: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.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.primary:hover {border:1px solid #630eca; background:#792dd4; color: #fff}
.csBtn.basic{border: 1px solid #E8E8E8;background: #F5F5F5;color:#808080}
.csBtn.basic:hover{border: 1px solid #d0cfcf;}
.csBtn.info{background:#9eeaf9 ; border : 1px solid #9eeaf9}
.csBtn.info:hover {background:#84ebff ; border : 1px solid #83e3f6}
.csBtn.info-dark {background: #1c489e; border-color: #1c489e; color: #fff;}
.csBtn.default{border: 1px solid #E8E8E8;background: #fff;color:#808080}
.csBtn.danger{background: #ed4c4c; border: 1px solid red; color: #fff;}
.csBtn.sm{ padding: 3px 8px !important; font-size: 12px !important; border-radius: 4px; font-weight: 500; height: 25px}
.cursor{cursor:pointer}
.csBtn.primary:disabled{background:#cfa8ff; border-color: #cfa8ff; cursor: not-allowed}
.navbar-vertical{max-width: 220px !important}
#app-content {margin-left: 13.75rem !important;}
.header .navbar{left:220px !important; padding:5px 10px !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;}
}
.app-content-area{ padding: 70px 10px 0px !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: inline-block;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}
.suggestArea ul li .code{float:left; padding-left: 15px; font-size: 13px; color: #777; clear: both}
.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"; }

.navbar-vertical .navbar-nav .nav .nav-item .nav-link {
  color: #7194c7;
  padding: .25rem 1rem;
  position: relative;
  border-left: 8px solid #eee;
  margin-left: 20px;
}
.navbar-vertical .navbar-nav .nav .nav-item .nav-link::before{
   left: 4px;
}
.navbar-vertical .navbar-nav .nav-item .nav-link{
   padding: .5rem 1rem;
} 

.scrollable{max-width:100%; overflow:auto;}
.scrollable thead th{position:-webkit-sticky!important;position:sticky!important;top:0!important}
.scrollable tbody th{position:-webkit-sticky!important;position:sticky!important;left:0!important}
.scrollable thead th:first-child{left:0!important;z-index:1!important}
.scrollable thead th{background:#f8f8f8 !important;color:#444 !important;white-space: nowrap;font-family: arial;letter-spacing: 1px;font-weight: 600;font-size: 12px!important; font-family:Roboto,sans-serif;text-transform: uppercase; padding: 8px 10px; border-top: 2px solid #dee2e6;z-index: 2;}
.scrollable tbody th{background:#fff!important;border-right:1px solid #ccc!important; padding: 6px 10px !important;}
.scrollable table{border-collapse:collapse!important}
.scrollable table td{padding: 6px 10px !important; padding-bottom: 6px !important;}

.actionBtn button{padding:3px 6px; font-size: 12px}
.btn.success{border:1px solid #20cd12; color:#20cd12}
.btn.danger{border:1px solid #e63131; color: #e63131}
.badge.success{border:1px solid #20cd12; color:#20cd12; font-weight:500}
.badge.danger{border:1px solid #e63131; color: #e63131; font-weight:500}
.badge.warning{border:1px solid #caaf1d; color: #caaf1d; font-weight:500}
.badge.primary{border:1px solid #624bff; color: #624bff ; font-weight:500}
.badge.info{border:1px solid #0dcaf0; color: #0dcaf0; font-weight:500}


.scrollable{max-width:100%; overflow:auto;}
.scrollable table{border-collapse:collapse!important ;background: #fff;}
.scrollable thead th{position:-webkit-sticky!important;position:sticky!important;top:0!important} 
.scrollable thead th:first-child{left:0!important;z-index:1!important}
.scrollable thead th{background:#f8f8f8 !important;color:#444 !important;white-space: nowrap;font-family: arial;letter-spacing: 1px;font-weight: 600;font-size: 12px!important; font-family:Roboto,sans-serif;/*text-transform: uppercase;*/ padding: 8px 10px; border-top: 2px solid #dee2e6;z-index: 2;}
.scrollable tbody th{position:-webkit-sticky!important;position:sticky!important;left:0!important}
.scrollable tbody th{background:#fff!important;border-right:1px solid #ccc!important; padding: 6px 10px !important;} 
.scrollable table td{padding: 6px 10px !important; padding-bottom: 6px !important; font-size: 14px; border: 1px solid #dee2e6; color: #495057;}