:root {
  --theme-cl: #813cd5;
  --theme-dbcl:#a2d4ff;
  --white: #ffffff;
}
.font10{font-size: 10px !important}
.font11{font-size: 11px !important}
.font12{font-size: 12px !important}
.font13{font-size: 13px !important}
.font14{font-size: 14px !important}
.font15{font-size: 15px !important}
.font16{font-size: 16px !important}
.font17{font-size: 17px !important}
.font18{font-size: 18px !important}
.font19{font-size: 19px !important}
.font20{font-size: 20px !important}
.font22{font-size: 20px !important}
.font25{font-size: 25px !important}
.font30{font-size: 30px !important}
.font35{font-size: 35px !important}
.br0{border-radius: 0px !important}
.br2{border-radius: 3px !important}
.br3{border-radius: 3px !important}
.br5{border-radius: 5px !important}
.br8{border-radius: 8px !important}
.br10{border-radius:10px !important}
.br20{border-radius:20px !important}
.fw400{font-weight:400 !important}
.fw500{font-weight:500 !important}
.fw600{font-weight:600 !important}
.fw700{font-weight:700 !important}
.cs_card{background:#fff; padding:15px; border-radius: 10px; }

.csLable{ padding:2px 8px; font-size: 12px; border-radius: 3px; text-transform: uppercase;}
.csLable.danger{border:1px solid #ff3838; color: #ff3838}
.csLable.primary{border:1px solid #624bff; color: #624bff}

.csLable.success{border:1px solid #31b726; color: #31b726}
.csLable.warning{border:1px solid #d2d23f; color: #d2d23f}
.csBtn{padding: 5px 12px; font-size: 14px; border-radius:5px; font-weight: 500; margin: 0; font-family: inherit; line-height: inherit; display: inline-block; height: 35px}
.csBtn.sm{padding: 3px 8px; font-size: 13px; border-radius: 4px; font-weight: 500;}
.csBtn.success{border:1px solid #FF6E31; background: #FF6E31; color: #fff}
.csBtn.success:disabled{border:1px solid  #FFA680; background: #FFA680; color: #fff}
.csBtn.primary{border:1px solid var(--theme-cl); background: var(--theme-cl); color: #fff}
.csBtn.basic{border: 1px solid #E8E8E8;background: #F5F5F5;color:#808080}
.csBtn.basic:hover{border: 1px solid #d0cfcf;}
.csBtn.default{border: 1px solid #E8E8E8;background: #fff;color:#808080}
.cursor{cursor:pointer}

.navbar-vertical{max-width: 240px !important}
#app-content {margin-left: 15rem !important;}
.header .navbar{left:240px !important}
#main-wrapper.toggled .header .navbar {left: 0 !important;}
#main-wrapper.toggled #app-content, #main-wrapper.toggled .navbar-vertical {margin-left: 0 !important;}
@media only screen and (min-width: 768px){
#main-wrapper.toggled .navbar-vertical {
  margin-left: -17rem !important;
}
}
@media only screen and (max-width: 576px) {
#app-content {margin-left: 0 !important;;}
.header .navbar {left: 0 !important;}
}

.suggestArea{position:absolute; width: 300px ; max-height: 300px; overflow-y:auto; background: #fff; z-index: 999 ;   box-shadow: 0 4px 20px rgb(0 0 0 / 10%); border-radius: 5px; }
.suggestArea ul{padding-left:0px; margin-bottom: 0px}
.suggestArea ul li{list-style: none; display: flex;width: 100%; border-bottom: 1px solid #ccc; padding: 7px 10px; cursor: pointer}
.suggestArea ul li:last-child{border-bottom: 0px   }
.suggestArea ul li .img{width:50px; float: left}
.suggestArea ul li .img img{width: 50px; max-width: 50px; height: 50px; object-fit: cover;}
.suggestArea ul li .name{float:left; padding-left: 15px; font-size: 14px; color: #555}

.img-zoom {
  /*padding: 50px;*/
  background-color: green;
  transition: transform .2s;
  width: 40px;
  height: 40px;
  margin: 0 auto;
}

.img-zoom:hover {
  -ms-transform: scale(2.8); /* IE 9 */
  -webkit-transform: scale(2.8); /* Safari 3-8 */
  transform: scale(2.8);  border-radius:3px; box-shadow: 0 2px 4px rgba(0,0,20,.08),0 1px 2px rgba(0,0,20,.08);
}

.mini-month-top{width:14%;float:left;min-height:38px;background:#fff}
.mini-month-top p{margin-bottom:5px;margin-top:5px;text-align:center}
.mini-month-top span{clear:both;color:#444;margin-bottom:2px}
.mini-month-inner{width:14%;float:left;min-height:60px;background:#fff; border: 1px solid #eee; padding-left: 4px}
.mini-month-inner p{margin-bottom:5px;margin-top:5px;text-align:center}
.mini-month-inner span{clear:both;margin-bottom:2px}
.mini-month-inner .shift{font-size:12px; display:inline-block; padding: 1px 5px; background: #eee; border-radius:10px}
.monthdays.active{background:#08a742;border-radius:50%;padding:5px 6px;color:#fff!important} 


#dateRangefilter{font-size:13px;  min-width: 130px;float: right; height: 34px;border: 1px solid #c6c6c6 !important;padding: 6px 10px;background: #fff;cursor: pointer;border-radius: 3px;border-radius: 3px; text-align: left}
.daterangepicker .ranges li.active {
  background-color: #6e59ff !important;
  color: #fff;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #6e59ff !important; 
  border-color: transparent;
  color: #fff;
}

@font-face {
  font-family: "bootstrap-icons";
  src: url("./fonts/bootstrap-icons.woff2?524846017b983fc8ded9325d94ed40f3") format("woff2"),
  url("./fonts/bootstrap-icons.woff?524846017b983fc8ded9325d94ed40f3") format("woff");
}

.bi-chevron-expand::before { content: "\f283"; }
.bi-chevron-left::before { content: "\f284"; }
.bi-chevron-right::before { content: "\f285"; }
.bi-chevron-up::before { content: "\f286"; }