/*CTS CSS*/
@import 'cts-css.css';
@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400;500;600;700&display=swap');
/*===================
GLOBAL CSS
====================*/
body{
  font-family: 'El Messiri', serif !important;
  line-height: 1;
}
.rounded-lg {
    border-radius: 1.3rem!important;
}

.contentloader{
  transition: height .2s linear;
}

.float-btn{
  position: fixed;
  bottom: 15px;
  width: calc(100% - 250px);
  margin: auto;
}


.btn-teal {
  color: #fff;
  background-color: #20c997;
  border-color: #20c997;
  box-shadow: none;
}

.btn-teal:hover {
  color: #fff;
  background-color: #18a077;
  border-color: #18a077;
}

.btn-teal:focus, .btn-teal.focus {
  color: #fff;
  background-color: #18a077;
  border-color: #18a077;
  box-shadow: 0 0 0 0 #18a07780;
}

.btn-teal.disabled, .btn-teal:disabled {
  color: #fff;
  background-color: #20c997;
  border-color: #20c997;
}

.btn-teal:not(:disabled):not(.disabled):active, .btn-teal:not(:disabled):not(.disabled).active,
.show > .btn-teal.dropdown-toggle {
  color: #fff;
  background-color: #158b67;
  border-color: #158b67;
}

.btn-teal:not(:disabled):not(.disabled):active:focus, .btn-teal:not(:disabled):not(.disabled).active:focus,
.show > .btn-teal.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}


.btn-outline-teal {
  color: #20c997;
  border-color: #20c997;
}

.btn-outline-teal:hover {
  color: #fff;
  background-color: #20c997;
  border-color: #20c997;
}

.btn-outline-teal:focus, .btn-outline-teal.focus {
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.btn-outline-teal.disabled, .btn-outline-teal:disabled {
  color: #20c997;
  background-color: transparent;
}

.btn-outline-teal:not(:disabled):not(.disabled):active, .btn-outline-teal:not(:disabled):not(.disabled).active,
.show > .btn-outline-teal.dropdown-toggle {
  color: #fff;
  background-color: #20c997;
  border-color: #20c997;
}

.btn-outline-teal:not(:disabled):not(.disabled):active:focus, .btn-outline-teal:not(:disabled):not(.disabled).active:focus,
.show > .btn-outline-teal.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(58, 176, 195, 0.5);
}

.page-item.active .page-link{
  background-color: var(--teal);
  border-color: var(--teal);
}

/*===================
SideBar CSS
====================*/
.main-sidebar .brand-link{
	background: linear-gradient(45deg,#1d7bbf,#18db60);
}
.brand-link {
  line-height: 1;
}
.brand-link .brand-image {
  max-height: 43px;
}

/*===================
Body CSS
====================*/

.nav-sidebar > .nav-item .nav-link:hover p {
  margin-left: 6px;
}

.user_avatar{
  height: 70px;
  width: 70px;
  object-fit: cover;
}
.item .info-box-icon{
  box-shadow: 0 1px 3px rgba(0,0,0,0.07)!important;
}
.index-icon{
  font-size: 22px;
  border: 2px solid;
  text-align: center;
  padding: 7px 0px;
  border-radius: 50px;
  height: 40px;
  width: 40px;
}
.info-box {
  box-shadow: 0 0 1px rgb(9 17 253 / 21%), 0 1px 3px rgb(39 226 45 / 25%);
  border-radius: .25rem;
  background-color: #fff;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
  min-height: 55px;
  padding: .5rem;
  position: relative;
  width: 100%;
}
.info-box .info-box-text, .info-box .progress-description {
  line-height: 1.5;
}

/* Login page */
.login-page{
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/*===================
/*Footer CSS
====================*/


/*X-Small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {

}

/*Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {

}

/*Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {

}

/*Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {

}

/*X-Large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {

}

/*Inedex Slider*/
.slick-dots li {
    width: 6px !important;
}