: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}
.font25{font-size: 25px !important}
.font30{font-size: 30px !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}

.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.danger{border:1px solid #dc3545; background: #dc3545; 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}

.mobile-logo{display:none !important;}
.navbar-vertical{max-width: 240px !important}
/*@media only screen and (min-width: 1080px)
{ 
    #app-content {margin-left: 240px !important;}
    .header .navbar{left: 240px !important;}
    #main-wrapper.toggled #app-content, #main-wrapper.toggled .navbar-vertical {
      margin-left: 0 !important;
    }
    #main-wrapper.toggled .header .navbar {
      left: 0 !important;
    }
}
 */
 @media only screen and (max-width: 1080px)
{
  #app-content {margin-left: 0rem !important;}
  .header .navbar{left: 0px !important}
  #main-wrapper.toggled .header .navbar {left: 0 !important;}
  #main-wrapper.toggled #app-content, #main-wrapper.toggled .navbar-vertical {margin-left: 0 !important;}
  #main-wrapper .navbar-vertical {margin-left: -17rem !important;}
  .mobile-logo{display:block !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;*/ 
  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);
}