/* Class definitions generally used in all our templates */

input.invalid:invalid,
select.invalid:invalid,
textarea.invalid:invalid,
input[type=checkbox].invalid:invalid + label {
	border:1px solid red!important;
	background-color:#fff8f8!important; 
}


/* -------- box ratios -------- */
  .ratio-40{
	--bs-aspect-ratio: 40%;
  }
  .ratio-50{
	--bs-aspect-ratio: 50%;
  }
  .ratio-55{
	--bs-aspect-ratio: 55%;
  }
  .ratio-56{
	--bs-aspect-ratio: 56%;
  }
  .ratio-57{
	--bs-aspect-ratio: 57%;
  }
  .ratio-58{
	--bs-aspect-ratio: 58%;
  }
  .ratio-59{
	--bs-aspect-ratio: 59%;
  }
  .ratio-60{
	--bs-aspect-ratio: 60%;
  }
  .ratio-61{
	--bs-aspect-ratio: 61%;
  }
  .ratio-62{
	--bs-aspect-ratio: 62%;
  }
  .ratio-63{
	--bs-aspect-ratio: 63%;
  }
  .ratio-64{
	--bs-aspect-ratio: 64%;
  }
  .ratio-65{
	--bs-aspect-ratio: 65%;
  }
  .ratio-66{
	--bs-aspect-ratio: 66%;
  }
  .ratio-67{
	--bs-aspect-ratio: 67%;
  }
  .ratio-68{
	--bs-aspect-ratio: 68%;
  }
  .ratio-69{
	--bs-aspect-ratio: 69%;
  }
  .ratio-70{
	--bs-aspect-ratio: 70%;
  }
  .ratio-75{
	--bs-aspect-ratio: 75%;
  }
  .ratio-100{
	--bs-aspect-ratio: 100%;
  }
  .ratio-105{
	--bs-aspect-ratio: 105%;
  }
  .ratio-110{
	--bs-aspect-ratio: 110%;
  }
  .ratio-115{
	--bs-aspect-ratio: 115%;
  }
  .ratio-120{
	--bs-aspect-ratio: 120%;
  }
  .ratio-125{
	--bs-aspect-ratio: 125%;
  }
  .ratio-130{
	--bs-aspect-ratio: 130%;
  }
  .ratio-140{
	--bs-aspect-ratio: 140%;
  }
  .ratio-150{
	--bs-aspect-ratio: 150%;
  }
  

.overflow-ellipsis{
	overflow: hidden!important;
	white-space:nowrap;
	text-overflow:ellipsis;
}
.line-clamp-ellipsis{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}
.line-clamp-2{
	-webkit-line-clamp: 2;
}
.line-clamp-3{
	-webkit-line-clamp: 3;
}
.line-clamp-4{
	-webkit-line-clamp: 4;
}
.line-clamp-5{
	-webkit-line-clamp: 5;
}
.line-clamp-6{
	-webkit-line-clamp: 6;
}
.line-clamp-7{
	-webkit-line-clamp: 7;
}
.line-clamp-8{
	-webkit-line-clamp: 8;
}
.line-clamp-9{
	-webkit-line-clamp: 9;
}
.line-clamp-10{
	-webkit-line-clamp: 10;
}

.line-height-20{
	line-height: 20px!important;
}
.line-height-22{
	line-height: 22px!important;
}
.line-height-24{
	line-height: 24px!important;
}
.line-height-28{
	line-height: 28px!important;
}
.lspace-1{
	letter-spacing: 10px;
}
.fs-22px{
	font-size:22px;
}

.f-black{
	color:#000!important;
}
.text-align-justify {
	text-align: justify;
}

/* border-radius css */
.brad-2{
	border-radius: 2px!important;
}
.brad-3{
	border-radius: 3px!important;
}
.brad-4{
	border-radius: 4px!important;
}
.brad-5{
	border-radius: 5px!important;
}
.brad-6{
	border-radius: 6px!important;
}
.brad-7{
	border-radius: 7px!important;
}
.brad-8{
	border-radius: 8px!important;
}
.brad-9{
	border-radius: 9px!important;
}
.brad-10{
	border-radius: 10px!important;
}
.brad-12{
	border-radius: 12px!important;
}
.brad-14{
	border-radius: 14px!important;
}
.brad-15{
	border-radius: 15px!important;
}
.brad-16{
	border-radius: 16px!important;
}
.brad-18{
	border-radius: 18px!important;
}
.brad-20{
	border-radius: 20px!important;
}

.pt-50{
    padding-top: 50px;
}
.pt-60{
    padding-top: 60px;
}
.pt-70{
    padding-top: 70px;
}
.pb-50{
    padding-bottom: 50px;
}
.pb-60{
    padding-bottom: 60px;
}
.pb-70{
    padding-bottom: 70px;
}
.py-50{
    padding-top: 50px;
    padding-bottom: 50px;
}
.py-60{
    padding-top: 60px;
    padding-bottom: 60px;
}
.py-70{
    padding-top: 70px;
    padding-bottom: 70px;
}

.alert-overlay {
	height:100%;
	left:0;
	position:fixed;
	top:0;
	width:100%;
	border-radius:.25rem;
	-ms-flex-align:center;
	align-items:center;
	background:rgba(232,232,232,.64);
	display:-ms-flexbox;
	display:flex;
	-ms-flex-pack:center;
	justify-content:center;
	z-index:1100;
	transition:all .3s ease;
}
.alert-overlay.overlay-disabled {
	display:none!important;
}
.alert-overlay .alert-box,
.modal-inner-alert-wrapper .alert-box {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	min-width:250px;
	text-align:center;
	padding:20px;
	background-color:#fff;
	border-radius:10px;
	box-shadow:0 0 10px #ddde;
	border:1px solid #bbb;
	font-size:16px;
}
.modal-inner-alert-wrapper {
	position:absolute;
	background-color:#fff5;
	width:100%;
	height:100%;
	top:0;
	left:0;
}

.container-bs3{
	position:relative;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}



/*****************************************************/
/********************* media settings ****************/
/*****************************************************/


/*** this is xxl area ***/ 
@media (min-width:1400px) {

}



/*** below is xl area ***/ 
@media (max-width:1399.98px) {

}
@media (max-width:1399.98px) and (min-width:1200px) {

}
@media (min-width:1200px) {
	.container-bs3 {/* bs-3 lg*/
		width:1170px;
		max-width:1170px;
	}
}



/*** below is lg area ***/ 
@media (max-width:1199.98px) {

}
@media (max-width:1199.98px) and (min-width:992px) {
	.container-bs3 {/* bs-3 md*/
		width:970px;
		max-width:970px;
	}
}
@media (min-width:992px) {

}



/*** below is md area ***/ 
@media (max-width:991.98px) {

}
@media (max-width:991.98px) and (min-width:768px) {
	.container-bs3{/* bs-3 sm*/
		width:750px;
		max-width:750px;
	}
}
@media (min-width:768px) {

}



/*** below is sm area ***/ 
@media (max-width:767.98px) {
	.container-bs3 {/* bs-3 xs*/
		width:100%;
		max-width:unset;
	}
}
@media (max-width:767.98px) and (min-width:576) {

}
@media (min-width:576) {

}



/*** below is xs area ***/ 
@media (max-width:575.98px) {

}