.d-grid {
	display: -ms-grid;
	display: grid;
}

.grid-col-1 {
	-ms-grid-columns: 1fr;
	grid-template-columns: 1fr;
}

.grid-col-2 {
	-ms-grid-columns: 1fr 1fr;
	grid-template-columns: repeat(2,1fr);
}

.grid-col-3 {
	-ms-grid-columns: 1fr 1fr 1fr;
	grid-template-columns: repeat(3,1fr);
}

.grid-col-4 {
	-ms-grid-columns: 1fr 1fr 1fr 1fr;
	grid-template-columns: repeat(4,1fr);
}

.gap-1 {
	gap:.8rem;
}

.gap-2 {
	gap:1.6rem;
}

.gap-3 {
	gap:2.4rem;
}

.gap-4 {
	gap:3.2rem;
}

.gap-5 {
	gap:4rem;
}

.gap-1px {
	gap:1px;
}

.gap-2px {
	gap:2px;
}

.gap-3px {
	gap:3px;
}

.gap-4px {
	gap:4px;
}

.gap-5px {
	gap:5px;
}

.gap-10px {
	gap:10px;
}

.white-space-wrap {
	white-space: wrap!important;
}

.mnw-100 {
	min-width: 100%;
}

.flex-1 {
	-webkit-box-flex:1;
	    -ms-flex:1;
	        flex:1;
}

.flex-2 {
	-webkit-box-flex:2;
	    -ms-flex:2;
	        flex:2;
}

.flex-3 {
	-webkit-box-flex:3;
	    -ms-flex:3;
	        flex:3;
}

.flex-4 {
	-webkit-box-flex:4;
	    -ms-flex:4;
	        flex:4;
}

.flex-5 {
	-webkit-box-flex:5;
	    -ms-flex:5;
	        flex:5;
}

.flex-6 {
	-webkit-box-flex:6;
	    -ms-flex:6;
	        flex:6;
}

.flex-7 {
	-webkit-box-flex:7;
	    -ms-flex:7;
	        flex:7;
}

.flex-8 {
	-webkit-box-flex:8;
	    -ms-flex:8;
	        flex:8;
}

.flex-grow-1 {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.jc-center {
	justify-content: center;
}

.v-hidden {
	visibility: hidden;
}

.bg-gray-opacity {
	background: rgba(0,0,0,.05);
	background-color: rgba(0,0,0,.05);
}

.minw-120px {
	min-width: 120px;
}

.minw-150px {
	min-width: 150px;
}

.minw-200px {
	min-width: 200px;
}

.minw-280px {
	min-width: 280px;
}

.minw-300px {
	min-width: 300px;
}

.minw-400px {
	min-width: 400px;
}

.minh-265px {
	min-height: 265px;
}

.minh-400px {
	min-height: 400px;
}

.maxw-120px {
	max-width:120px;
}

.maxw-150px {
	max-width:150px;
}

.maxw-350px {
	max-width:350px;
}

.maxw-30rem {
	max-width:30rem;
}

.maxw-40rem {
	max-width:40rem;
}

.w-40px {
	width: 40px;
}

.h-0px {
	height: 0px;
}

.h-40px {
	height: 40px;
}

.h-60px {
	height: 60px;
}

.w-50px {
	width: 50px;
}

.w-60px {
	width: 60px;
}

.w-120px {
	width: 120px;
}

.h-120px {
	height: 120px;
}

.scale-1-2 {
	-webkit-transform:scale(1.2);
	    -ms-transform:scale(1.2);
	        transform:scale(1.2);
}

.vertical-middle {
	vertical-align: middle!important;
}

.shadow-min {
	-webkit-box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
	        box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.shadow-default-1 {
	-webkit-box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
	        box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}

.shadow-default-2 {
	-webkit-box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
	        box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

.list-disc {
	list-style-type: disc;
}

.f-size-13px {
	font-size: 13px!important;
}

.f-size-14px {
	font-size: 14px!important;
}

.f-size-15px {
	font-size: 15px;
}

.f-size-16px {
	font-size: 16px;
}

.f-size-18px {
	font-size: 16px;
}

.f-size-1 {
	font-size: 1.2rem;
}

.f-size-2 {
	font-size: 1.8rem;
}

.f-size-18px {
	font-size: 18px;
}

.l-height-1 {
	line-height: 1.2;
}

.f-tablepfj {
	font-size:1rem;
	word-wrap: break-word;
}

.break-word {
	word-wrap: break-word;	
}

.resize-none {
	resize: none;
}

.display-none {
	display:none !important;
}

.validate-control-none {
	border-color:transparent!important;
	background-image: none!important;
}

.form-control.validate-control-none,
.form-control.is-valid.validate-control-none,
.form-control.is-invalid.validate-control-none {
	border-color:#eff0f2!important;
}

.pointer-events-none {
	pointer-events: none;
}

.text-black {
	color:#000;
}

.w-5 {
	width: 5%;
}

.fit-cover {
	-o-object-fit: cover;
	   object-fit: cover;
}

.fit-contain {
	-o-object-fit: contain;
	   object-fit: contain;
}

.tbls {
	overflow-x: auto;
}

.tbls table td {
	min-width:150px;
}

/** Checkbox component 
<label class="custom-checkbox-label">
	<input type="checkbox">
	<span class="checkmark"></span>
</label>
**/
.custom-checkbox-label {
	display: inline-block;
	position: relative;
	padding-left: 35px;
	cursor: pointer;
	-moz-user-select: none;
	 -ms-user-select: none;
	     user-select: none;
	-webkit-user-select:none;
}

.custom-checkbox-label input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #eee;
	border-radius: 5px;
}

.custom-checkbox-label input:checked ~ .checkmark {
	background-color: #2196f3;
}

.custom-checkbox input:checked ~ .checkmark {
	background-color: #343a40;
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.custom-checkbox-label input:checked ~ .checkmark:after {
	display: block;
}

.custom-checkbox-label .checkmark:after {
	left: 8px;
	top: 4px;
	width: 5px;
	height: 10px;
	border: solid white;
	border-width: 0 3px 3px 0;
	-webkit-transform: rotate(45deg);
	    -ms-transform: rotate(45deg);
	        transform: rotate(45deg);
}

.user-select-text {
	-moz-user-select: text;
	-ms-user-select: text;
		user-select: text;
   -webkit-user-select:text;
}

.rotate-arrow {
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
		transform: rotate(180deg);
}

.border-bottom-gray {
	border-bottom: 1px solid gray;
}

.px-30px.important {
	padding-left: 30px!important;
	padding-right: 30px!important;
}

.px-50px.important {
	padding-left: 50px!important;
	padding-right: 50px!important;
}

@media screen and (min-width:1024px) {
	.gap-lg-0 {
		gap: 0 !important;
	}

	.gap-lg-1 {
		gap:.8rem;
	}

	.gap-lg-2 {
		gap:1.6rem;
	}
	
	.gap-lg-3 {
		gap:2.4rem;
	}
	
	.gap-lg-4 {
		gap:3.2rem;
	}
	
	.gap-lg-5 {
		gap:4rem;
	}
}

@media screen and (min-width:767px) {
	.gap-md-0 {
		gap: 0 !important;
	}

	.gap-md-1 {
		gap:.8rem;
	}

	.gap-md-2 {
		gap:1.6rem;
	}
	
	.gap-md-3 {
		gap:2.4rem;
	}
	
	.gap-md-4 {
		gap:3.2rem;
	}
	
	.gap-md-5 {
		gap:4rem;
	}

	.border-md-right {
		border-right: 1px solid #dee2e6;
	}

	.w-sm-25 {
		width: 25%!important;
	}

	.minw-md-350px {
		min-width:350px;
	}

	.maxw-md-650px {
		max-width:650px;
	}

	.maxw-md-800px {
		max-width:800px;
	}

	.text-md-center {
		text-align: center;
	}

	.text-md-left {
		text-align: center;
	}
}


@media screen and (min-width:576px) {
	.flex-sm-1 {
		-webkit-box-flex:1;
		    -ms-flex:1;
		        flex:1;
	}
	
	.flex-sm-3 {
		-webkit-box-flex:3;
		    -ms-flex:3;
		        flex:3;
	}

	.gap-sm-0 {
		gap: 0 !important;
	}

	.gap-sm-1 {
		gap:.8rem;
	}

	.gap-sm-2 {
		gap:1.6rem;
	}
	
	.gap-sm-3 {
		gap:2.4rem;
	}
	
	.gap-sm-4 {
		gap:3.2rem;
	}
	
	.gap-sm-5 {
		gap:4rem;
	}

	.w-sm-auto {
		width: auto!important;
	}
}

.w-100-mobile {
	width:auto;
}

@media screen and (max-width:767px) {
	.grid-col-2 {
		-ms-grid-columns: 1fr;
		grid-template-columns: 1fr;
	}
	
	.w-100-mobile {
		width: 100%;
	}

	.f-size-1-mobile {
		font-size: 1.6rem;
	}

	.f-size-2-mobile {
		font-size: 1.8rem;
	}

	.f-size-14px-mobile {
		font-size: 14px;
	}
	.f-size-16px-mobile {
		font-size: 16px;
	}

	.text-center-mobile {
		text-align: center;
	}

	.overflow-x-auto-mobile {
		overflow-x: auto;
	}
	
	.overflow-x-mobile {
		overflow-x: scroll;
	}

	.mb-150-mobile {
		margin-bottom: 150px!important;
	}

	.minh-320px-mobile {
		min-height: 320px!important;
	}

	.minw-200px-mobile {
		min-width: 200px;
	}

	.flex-1-mobile {
		-webkit-box-flex:1;
		-ms-flex:1;
			flex:1;
	}

	.mb-10-mobile {
		margin-bottom: 6rem;
	}

	.white-space-wrap-mobile {
		white-space: wrap!important;
	}
}

@-webkit-keyframes modal {
    from {
        opacity:0;
        -webkit-transform:translateY(-10px);
                transform:translateY(-10px);
        display:none;
    } 

    to {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
        opacity:1;
    }
}

@keyframes modal {
    from {
        opacity:0;
        -webkit-transform:translateY(-10px);
                transform:translateY(-10px);
        display:none;
    } 

    to {
        -webkit-transform:translateY(0px);
                transform:translateY(0px);
        opacity:1;
    }
}

@media screen and (max-width:520px) {
	.f-tablepfj {
		font-size: .85rem;
	}
}