/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400,600,800&display=swap'); */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&family=Source+Sans+Pro:wght@600&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');
:root {
--green:#cd2033;
--menu:#fff;
--red:#57bb6d;
--menuactive:#0d202f;
--activegreen:#45aa5b;
--textgray:rgb(0, 0, 0);
--label:#000000;
--body:#000000;
--hovergray:#e8eef2;
--tblbor:#e4eaec;
--tblheaderclr:#2e3037;
--blue: #3A7DCB !important;
--hoverclr:#e8eef2;
--backgray:#f3f7fc;
--tblheadbackclr:#fff;
--gg:#ecf0f1;
--darkgreen:#13812b;
--title:#000;
--tblrowovr:#ffffff;
--fonttheme:'Montserrat', sans-serif;
/* --fonttheme: 'Inter', sans-serif; */


--bor: #f5f5f5;
--filterhed:#e4eaec;

--chatback:#f2f7f8; 
--salaryrd:#fde6e9;
--menutext:#bbbdc5;
--menuback:#1e223d;
--vio:#604bba;
}

 *{

    margin: 0px ;
    padding: 0px;
    
        
}
/* html body
{  
    width: 100%;
}  */

body
{
    font-family: var(--fonttheme);
    overflow: hidden;
    color: #000;
    /* font-family: 'Inter', sans-serif; */
 font-weight: normal;
   /* font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; */
}

.imgborprod
{
    border-radius: 5px;
}
.imgborprod
{
    border: var(--gg) solid 3px;
}
.rem
{
position: relative;
}
.rem button
{
    background-color: var(--label);
    border: 0px;
    /* border-top-right-radius: 5px; */
    /* border-bottom-right-radius: 5px; */
    color: white;
    font-size: var(--font10);
    top: -2px;
    position: absolute;
    margin-top: -5px;
    /* border-radius: 50%; */
    right: -2px;

}
.fa-border button{
    margin: auto;
    text-align: center;
}
.parsley-required
{
    font-size: var(--font11);
    color: red;
    padding: 1px 0px;
    transition: 0.3s ease-in;
}

.picwidth
{
    width: 25px;
    height: 25px;
}
.childtable
{
    display: grid;
}

.bootstrap-tagsinput {
    display: inline-block;
    max-width: 100%;
    padding: .2rem 0rem;
    line-height: 1.571429;
    color: #76838f;
    vertical-align: middle;
    cursor: text;
    /* background-color: #fff;
    border: 1px solid #ced4da; */
    border-radius: .215rem;
    -webkit-box-shadow: none;
    box-shadow: none;

}

.childtable .table td, .childtable .table th
{
    padding: 5px !important;
}
.table td, .table th
{
    padding:10px 5px 0x 5px !important;

}
.order-container {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
  }
  
  .order-item {
    padding: 1px 5px;
    border: 1px solid var(--tblbor);
    text-align: center;
    margin: 0px;
    width:70px;
    flex-basis: 70px;
    flex-grow: 1;
    cursor: pointer;
    background-color:#fff ;
  }
.num
  {
      font-size: var(--font18);
      font-weight: bold;
      color: var(--green);
      line-height: 6px;
  }
  .activetab
  {

      color: #fff !important;
  }
  .exal
  {
    width: 35px;
    flex-basis: 35px;
    justify-content: right;
    align-items: end;
    align-self: flex-end;
    float: right;
    text-align: right;
}
.hedicon
{
  width: auto;
  flex-basis: auto;
  justify-content: right;
  align-items: end;
  align-self: flex-end;
  float: right;
  text-align: right;
}
.activetab .num
{
    color: #fff !important;
    font-weight: bold;
}
.pearls
{
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;  
}
.pearls .pearl
{
    padding: 2px 5px;
    text-align: center;
    width:70px;
    flex-basis: 70px;
    flex-grow: 1;
}
.example-wrap
{
    padding-bottom: 10px;
    border-bottom:var(--backgray) solid 5px;
}
.orderfm .col-form-label, .emplabelfix
{
    line-height: 14px;
    font-size: var(--font14);
    color: #212529;
}

.b{
font-weight: bold;
}
.pearl-title
{
    line-height: 15px;
}

.greenbox
{
    color: #fff;
    text-align: center;
    align-content: center;

}
.table-user-thumb
{
    width: 50px;
    height:50px;
    border-radius: 50%;
    border: var(--backgray) solid 4px;
}

.tblheadbackclr thead th
{
    background-color: var(--clr-light2);
    height: 32px;
}
.table td{
    vertical-align:inherit;
    padding: 5px 5px !important;
}
.font12
{
    font-size: var(--font12);
}
.f16
{
    font-size: var(--font16);
}
.f18
{
    font-size: var(--font18);
}
.f13
{
    font-size: var(--font13);
}
.f20
{
    font-size: 20px !important;
}

.f23
{
    font-size: 23px;
}
.input-group-append button .btn-upload{
    width: 100%;
    background-color: var(--backgray);
    display: block;
}
.d-inline
{
    display: inline-flex;
}
.site-menu-icon img
{
    width: 17px;
    height: 17px;

}
.pgdesign .card:hover
{
    box-shadow: #d1dfe9 5px 0px 20px;
}
 .icon{
    opacity: 1;
    cursor: pointer;
}
.icon:hover{
    opacity: 1 !important;
}
.optionbtn
{
    width: 100px;
    border-radius: 5px;
    background-color:var(--green);
    color: #fff;
    text-align: center;
    height: 100px;
    margin: 5px;
    border: 0px;
    border: #fff solid 1px;
    transition: 0.3s ease-in-out;
}
.optionbtn:hover
{
    box-shadow: #dce7ee 2px 2px 5px;
    transition: 0.3s ease-in-out;

}
.page-header
{
    z-index: 9;

}
.dotbtn
{
    background-color: transparent;
    border: 0px;
}
.modal-body .optionbtn
{
    display: inline;
    /* flex-grow: 1; */
    flex-wrap: inherit;
    align-items: center;
    
    text-align: center;
}
.print .modal-body
{
    height: calc(100vh - 200px);
    overflow-y: scroll;
}
.site-footer
{
    background-color: transparent
}
.widget
{
    
    padding: 10px;
}
.dashboard .state
{
    text-align: center;
}
.widget:hover
{
    display: block;
  
    transition: 0.3s ease-in-out;

}

.white
{
    color: #fff;
    opacity: 1;
}
.custview tbody{
    height: 350px;
    overflow-y: scroll;
}
 .status.active {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2dce89;
    position: absolute;
    right: 0;
}
 .status {

    top: 6px;
    font-size: var(--font13);

}
.login
{
    width: 100%;
    overflow: hidden;
    height: 100vh;
    background-color: var(--gg);
    display: inline-flex;
    padding-top:0vh;

    background-size: cover;
    background-position: left top;
}
.loginbox
{
    background-color: #fff;
    padding: 60px 20px;
    justify-content: center;
    align-content: center;
    margin: auto;
    width: 320px;
    height: auto;
    text-align: center;
}
.vertical-align-middle
{
    margin: auto;
}

.brand-img
{
    width: 100px;
}

.modal-backdrop {

    z-index: 9999 !important;

}
.bor3
{
    background-color: var(--tblbor);
    height: 3px;
}
.nav-tabs
{
background-color: #f2f4f6;
cursor: pointer;    
}

.newbtn
{
    background-color: var(--red);
    color: #fff;
    border-radius: 3px;

}
.page-edit
{
}
.page-view
{
}

.inline-flex
{
    display: inline-flex;
}

.title
{
font-size: var(--font16);
color: var(--darkgreen);

}
.pos-relative
{
    position: relative;
    right: 0px;
}
.calendarimg {
    position: absolute;
    top: 5px;
    right: 20px;
    background-color: transparent;
    border: 0px;
    width: 25px;
    background-color: white;
    cursor: pointer;
}
.footerfix

{
    background-color: #fff;

    position:fixed;
    right: 0px;
    bottom: 0px;
    z-index: 99;
    /* display: flex !important; */
    align-items: center;
    box-shadow: #e9e9e9 0px 0px 5px;
    width: 100%;
    font-size: var(--font11);
padding-top: 5px;
    margin-bottom: 0px;
    height: 45px;
}
input[type=text]
{
padding-left: 10px;
font-size: var(--font13);
}
.btn-red
{
    color: #f6e8e8;
    background-color: #e84144;
    border-color: #ce3739;
}
.btn-red,.btn-success {
    font-size: var(--font14);
}
.btn-success
{
    border: var(--red) solid 1px;
    border-radius: 3px;
}

.btn-ediview
{
 
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;

    font-size: var(--font14);
    line-height: 20px;

}
.btn-ediview:focus
{
    border: #ddd solid 1px;
}
.btn-ediviewdd img{
    width: 20px;
}
.btn-ediview img{
    width: 14px;
}
.btn-ediviewdd
{
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
    font-size: var(--font14);
    line-height: 20px;
}
.btn-ediview:active, .btn-ediview:focus, .btn-ediview:hover, .btn-ediviewdd:hover
{ 
    border-color: #ccc;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.editbtnpg
{

  text-align: right;

}
.btn12-trans
{
    background-color: transparent;
    border: 0px;

}

.bckbtn
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
}
.filtselect .ng-select-container
{
    background-color: transparent;
    border: 0px;
}
.filtselectgtp
{
    border: #ddd solid 1px;
    border-radius: 3px;
    padding: 5px 10px 0px 10px;
    height: 32px;
}

.filtselect .ng-select.ng-select-opened>.filtselect .ng-select-container {
    background: transparent;
    border-color: none;
}

.filtselect .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked
{
         background-color:transparent; 
         text-align: left;
    /* color: #333; */
}
.filtselect .ng-select .ng-select-container {
   background-color: transparent !important; 
    border-radius: 2px;
    min-height: 24px;
    align-items: center;
}
.filtselect .ng-select-container:focus
{
    box-shadow:RGBA(172, 236, 255,1)  0px 0px 0px 0px !important;
}
   
.tab ul
{
    margin-left: 0px;
    padding-left: 0px; 
    margin-bottom: 0px; 
    padding-top: 0px;
    border-bottom: var(--bor) solid 1px;
    background-color: var(--clr-light2);
}
.menus11 li{
    display: table-cell;
    list-style: none;
    width: auto;
    text-align: center;
    font-size: var(--font14);
    padding: 5px 10px;
    /* color: #000 !important; */
    cursor: pointer;
    white-space: nowrap;
    flex-wrap: nowrap;
    margin: 0 15px 0 0;
}
.menus11 .activetab
{
    border-bottom: #000 solid 3px;
}

.empname
{
    font-size:var(--font18);

}




.midcontainer-emp-overviewem1
{
    width: auto;
    height: calc(100vh - 120px);
    padding: 0px 0px;
    overflow-y: scroll;
}
.graybox
{
    background-color: #fff;
    border-radius: 0px;
    padding:0px 0px;
   border: 1px solid #ced4da;
   min-height: 120px;
}
.box3
{
    margin: 0px 10px 10px 0px;
    border-radius: 3px;
    width:fit-content;
width: 100%;
    color: var(--label);
    font-size: var(--font14);
    padding-bottom:10px ;
    min-height: 360px; 

    border: 1px solid #EEEFF3;
box-shadow: 0 2px 7px 0 rgba(28,29,83,.1);
border-radius: 6px;
padding: 15px;

}

.box2
{
    margin: 0px 10px 10px 0px;
    border-radius: 3px;
    width:fit-content;
width: 100%;
    color: var(--label);
    font-size: var(--font14);
    padding-bottom:10px ;
    /* min-height: 420px; */

    border: 1px solid #EEEFF3;
box-shadow: 0 2px 7px 0 rgba(28,29,83,.1);
border-radius: 6px;
padding: 15px;
}

.box4{
    border: 1px solid #EEEFF3;
    box-shadow: 0 1px 9px 0 rgba(28,29,85,.03);
    border-radius: 10px;
    padding: 25px 5px 0 5px;
    margin-left: 0;
}
.box5{
    border: 1px solid #EEEFF3;
      border-radius: 10px;
    padding: 25px 5px;
    margin-left: 0;
}
/* .graybox
{
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 7px 0 rgba(28,29,83,.2)
} */
.bor-bt
{
    border-bottom: var(--bor) solid 1px;
}
.infotext, .tblheader-text
{
    text-transform: capitalize;
    font-size: var(--font17);
    color: #000; 
    font-weight: 600;
}
.padbtm
{
    padding-bottom: 10px;
}

.pad0
{
    padding: 0px;
}
.chiller_cb input
{
    margin-right: 5px;
}
.actiontd
{
    width: 1%;
    transition: auto;
    text-align: right;
}
.actiontd-lt
{
    width: 40px;
    transition: auto;
    text-align: left;
}

.imgsclose .trsbtn
{
    position: absolute;
    right: 0;
    top: 0;
}
.imgsclose button{
    background-color:#000;
    border: transparent; 
}
.trsbtn img{
    width: 12px;
    height: 12px;
}



.empphotoicon
{
  
    height: auto;
    align-self: center;
    justify-content: center;
    vertical-align: middle;
    display: inline-block;
    
}

.empphotoicon1
{
  
    height: 120px;
    align-self: center;
    justify-content: center;
    vertical-align: middle;
   
    
}
.empdetail
{

    align-self: center;
    justify-content: center;
    vertical-align: middle;
    display: table-cell;
    
}

.grbr
{
    padding-top: 10px;
    border-bottom: var(--gg) solid 1px;
    margin-bottom: 10px;
    width: 100%;
    display: block;
}
.grbrne
{
    padding-top: 10px;
    border-bottom: var(--gg) solid 1px;
    margin-bottom: 10px;
    width: 100%;
    display: block;
}
.wid25 .header-text 
{
    font-size:var(--font18);
    font-weight: bold;
}
.wid25 .graybox
{
 padding: 20px;
 height: 400px;
}

.bl{
    color: #000;
}
.bckgry
{
    background-color: var(--hovergray);
}
.totalnet
{
    background-color: #fffbdb;
    padding: 25px 15px;
}
.grayboxbr {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    /* box-shadow: 0 2px 7px 0 rgba(28,29,83,.2); */
    border: var(--gg) solid 1px;
}
.conm-phon
{
    position: absolute;
    left: 0px;
    top: 5px;
}

.font-small, .text-muted {
    font-size: 11px !important;
}
.popup .modal-body
{
    position: relative;
    flex: 1 1 auto;
    font-size: var(--font12);
    padding: 2% 0%;
    text-align: left;
}

.moboff img{
    width: 100%;
    overflow: hidden;
}








.dropify-wrapper:hover {
    background-image: -webkit-linear-gradient(135deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(135deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    background-image: linear-gradient(-45deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
    -webkit-animation: stripes 2s linear infinite;
    -o-animation: stripes 2s linear infinite;
    animation: stripes 2s linear infinite;
}
.dropify-wrapper {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 200px;
    padding: 5px 10px;
    overflow: hidden;
    font-family: var(--fonttheme);
    font-size: var(--font14);
    line-height: 22px;
    color: #76838f;
    text-align: center;
    cursor: pointer;
    background-color: #fff;
    background-image: none;
    border: 2px solid #e4eaec;
}
.dropify-wrapper .dropify-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 7;
    display: none;
    padding: 4px 8px;
    font-family:  var(--fonttheme);
    font-size: var(--font11);
    font-weight: 400;
    color: #fff;
    text-transform: uppercase;
    background: 0 0;
    border: 2px solid #fff;
    opacity: 0;
    -webkit-transition: all .15s linear;
    -o-transition: all .15s linear;
    transition: all .15s linear;
}
.dropify-wrapper .dropify-preview {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    text-align: center;
    background-color: #fff;
}

.dropify-wrapper:hover {
    background-image: -webkit-linear-gradient(135deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    background-image: -o-linear-gradient(135deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    background-image: linear-gradient(-45deg,#f6f6f6 25%,transparent 25%,transparent 50%,#f6f6f6 50%,#f6f6f6 75%,transparent 75%,transparent);
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px;
    -webkit-animation: stripes 2s linear infinite;
    -o-animation: stripes 2s linear infinite;
    animation: stripes 2s linear infinite;
}


.dropify-wrapper input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
.dropify-wrapper:hover .dropify-clear {
    opacity: 1;
} 
.dropify-wrapper.has-preview .dropify-clear {
    display: block;
}
textarea .form-control
{
    padding: .25rem 0.75rem;
}

.f12
{
    font-size:var(--font14)!important;
}
.empname{
    font-size: var(--font14);
    font-weight: bold;
    color: #333;
}
.tablll{
    background-color: #fff;
    /* box-shadow: #e4e3e3 5px 3px 3px; */
    width: 100%;
    /* margin-left: 20px; */
    /* border-top: #fff solid 1px; */
    padding-left: 0px;
    /* padding-top: 10px; */
    padding-right: 0px;

}
.tabllll li{
    display: inline-block;
    padding-top: 8px;
    padding-right: 8px;
    font-size: var(--font14);
}

.flex
{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-flow: wrap;
    justify-content: flex-start;


}
.bb{
    background-color: #fff;
    padding: 10px 0px;
    margin: 0px 0px;
}










.moboff
{
    align-self: center;
    justify-content: center;
    vertical-align: middle;
}
.card-header
{
    padding: 10px 10px;
}
.tableem
{
    width: 100%;
}
.tableem tr{
    border-bottom: var(--gg) solid 1px; 
    
    color: var(--label);
    font-weight: 500;
}
.tableem tr td, .tableem tr th{
    padding:5px 0px;
}
.empdetail .name
{
    font-size: var(--font16);
}
.empdetail .name{
    font-size: var(--font16);
    color: #fff;
    padding-bottom: 5px;
}
.empdetail .descp
{
    font-size: var(--font13);

    text-transform: capitalize;
}
.empdetail .descp span{
    padding: 5px 10px 5px 0px;
    color: #bcd8ff;
}
.empdetail .contact span
{
    padding: 5px 20px 5px 0px;
    font-size: var(--font12);
    color: var(--menutext);
}
.empdetail .count
{
  
    text-align: center;
    font-weight: 500;
    line-height: 25px;
    font-size: 22px;
    font-family: var(--fonttheme);
}

.empdetail .caption
{
    font-size: var(--font12);
    text-transform: uppercase;
    text-align: center;
    font-weight: 500;
    padding: 5px;
    color: #0a1920;
}
.empdetail .empbox:hover .caption {
color: #fff;
}
.empdetail .flexbox
{
    display: flex;
    flex: 1;
    flex-flow: nowrap;
    flex-basis: auto;
    flex-direction: row-reverse;
 

}
.empdetail .empbox
{
   border: #e9eff2 solid 3px;
    border-radius: 5px;
    min-height: 50px;
    margin: 3px;
    padding: 0.5% 1%;
    width: 100px;
    align-items: center;
    align-self: center;
    vertical-align: middle;
    justify-content: center;
    display: inline-block;
    transition: ease-in-out 0.3s;
 
}
.empdetail .empbox:hover{
    background-color: var(--red);
    transition: ease-in-out  0.1s;
    color: #fff;transform: scale(1.1,1.1);
}

.empdetailmain
{
    width: auto;
    flex: 1;
    position: relative;
}
.emmm
{
    font-size: var(--font14);
    color:#000;
}
.adrs
{
    word-break:break-all;
}
.dropdown-item
{
    cursor: pointer;
}
.dropdown-menu
{
    will-change:unset !important;
}
.blktxt
{
    color: black !important;
}
.table-responsive
{
min-height: 150px;

overflow-y: scroll;
height: calc(100vh - 100px);
}

.is-children .dropdown a{
   padding:  15px 10px !important;
}
.is-children .dropdown .dropdown-children a {
    padding:  0px 10px !important;
}
.wb-chevron-down-mini
{
    padding-top: 10px;
    font-size: var(--font15);
}
.dropdown a{
padding: 5px 0px !important;
}
.dropdown .dropdown-children a{
    padding: 0px 0px !important;
    }


    .burgermenu-panel.opened::-webkit-scrollbar {
        width: 0px;
      }
      .burgermenu-panel.opened::-webkit-scrollbar-track {
        background:var(--menuback); 
      }
       
      /* Handle */
      .burgermenu-panel.opened::-webkit-scrollbar-thumb {
        background: #888; 
      }
      
      /* Handle on hover */
      .burgermenu-panel.opened::-webkit-scrollbar-thumb:hover {
        background: #555; 
      }
      .olyweb img{
          justify-content: center;
          justify-self: center;
          padding-top: 15px;
      }
      .sear
      {
          float: right;
      }
      .searchsection

      {
      position: relative;
    border-bottom: 1px solid #CCCCCC;
    padding: 15px 25px;

      }
      .searchsection input{
          background-color: transparent;
          border: 0px;
      }
      .search i{
        position: absolute;
        top: 3px;
        left: 0;
      }
      .pull-left
      {
          float: left;
      }
      .headre
      {
          width: 100%;
          display: block;
      }

      .has-search .form-control {
        padding-left:20px;
        width: 250px;
        background: transparent;
    }
    .has-search input{
        padding: 5px 0px;
        border-bottom:1px solid #ccc;
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;

        
    }
    .has-search input:focus
    {
        outline: 0px;
        border-bottom:1px solid #000;
        box-shadow: RGBA(172, 236, 255,1)  0px 0px 0px 0px;
        -webkit-box-shadow:none;
        background-color: transparent;
    }
    
    .has-search .form-control-feedback {
        position: absolute;
        z-index: 2;
        display: block;
        width:auto;
        height: 30px;
        line-height: 30px;
        text-align: center;
        pointer-events: none;
        color: #aaa;
    }
    .has-search i{
        position: absolute;
        left: 3px;
        top: 8px;
    }
    .has-search
    {
        float: right;
        width: 250px;
        position: relative;
    }
    .table .dropdown-menu
    {
        top: 0px !important;
        width:auto !important;
        min-width: 100px !important;
        transform: inherit;

    }
    .table .dropdown-menu li{
        padding:5px 10px ;
    }
    .table .dropdown-menu li:hover{
        background-color: #2199e8;
        color: #fff;
    }
    .open
    {
        font-size: var(--font11);
    }
    .fade-scale {
        transform: scale(0);
        opacity: 0;
        -webkit-transition: all .25s linear;
        -o-transition: all .25s linear;
        transition: all .25s linear;
      }
      
      .fade-scale.in {
        opacity: 1;
        transform: scale(1);
      }
      .f14
      {
          font-size: var(--font14);
      }
      .modal-dialog-l
      {
     max-width: 468px;
      }
.modal-s
{
    width: 500px !important;
    margin:0% auto;
}





.modal{
    animation-name: example;
    animation-duration: 0.3s;
  }
  
  @keyframes example {
    0%   {-webkit-transform:translate(0,-25%);transform:translate(0,-25%)}
    100% { -webkit-transform:translate(0,0%);transform:translate(0,0%)}
    
  }
  .create-new
  {
      color: rgb(105, 152, 240);

      margin-bottom: 0px;
      cursor: pointer;
  }
  .smallgrd .myaggrid {
    width: 100%;
    height: calc(100vh - 360px);
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
    overflow-y: hidden;
}
.modal-xxxl
{
  width: 70% !important;
  max-width: 950px !important;
}


.bor-tp{
border-top: var(--gg) solid 1px;

}
.userrole .table-responsivefixedheader table tr td{
height: 45px;
border-bottom: var(--gg) solid 1px;
font-size: var(--font14);
}
.userrole .table-responsivefixedheader thead{
    border-bottom: var(--gg) solid 1px;
    padding: 5px 0px;
    color: #000; 
    background-color: var(--clr-light2);
}



 .lable-right
 {
     color: black;
 }
 .lablebox
 {
    display: block;
    width: 100%;
    padding: 5px 7px;
    font-size: var(--font13);
    line-height: 1.571429;
    color: var(--textgray);
    background-color: #fafafa;
    background-image: none;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #e3e6e9;
    border-radius: .215rem;
    height: 40px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
 }
 .txtlink
 {
    font-size: var(--font13); color: cornflowerblue;
    cursor: pointer;
 }

 /* -------emp---------- */
 .tablll
 {
    overflow: scroll;
    white-space: nowrap;
 }

.lable-right
{

}

.yellowbg .blktxt
{
    /* white-space: pre-line; */
}

.pointer {
    cursor: pointer;
  
    transition: ease-in-out 0.2s;
    color: #0249a0;
}
.pointer:hover
{
    text-decoration: underline;
    color: #0249a0;
}

.crossb
{
    background-color:rgb(235, 235, 235) ;
    border: rgb(238, 238, 241) solid 1px;
    width: 50px !important;
    padding: 5px;
}
.crossb:hover{
    background-color:rgb(235, 235, 235) ;
}
.filteralert:hover
{
    background-color: #eaf1ff;
    
}
.filteralert
{
    border-bottom:#eaf1ff solid 1px;
}
.filteralert :hover .badg
{
    background-color: #fff;
}
.filteralert  .close{
    padding-top: 7px !important;
}
.filteralert 
{
    padding: 5px 10px;
}
.bdat
{
    font-size: var(--font10);
    background-color: red;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 7px;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center; 
}
.btn-editview div{

    display: inline;
 
}
.yellowbg .text-right
{
    white-space: nowrap;
}






.wid5, .wid10, .wid20, .wid30, .wid40, .wid50, .wid60, .wid70, .wid80, .wid90, .wid100
{
  
}
.wid5{width: 5%;}
.wid10{width: 10%;}
.wid20{width: 20%;}
.wid30{width: 30%;}
.wid33{width: calc(100% / 3)}
.wid40{width: 40%;}
.wid50{width: 50%;}
.wid60{width: 60%;}
.wid70{width: 70%;}
.wid80{width: 80%;}
.wid90{width: 90%;}
.wid100{width: 100%;}

.w200
{
    width: 200px;
}
.w150
{
    width: 150px;
}

.badggg
{
    background-color: #f1f1f1;
    padding: 5px 10px;
    border-radius: 5px;
}

.modal-xxl
{
/* width: 100% !important; */
max-width:100% !important;
}
.modal-xxl .modal-content
{
     height: 100vh; 
     overflow-y: scroll;
}
/* ======= Employee Over View================ */
.empoverview
{
    background-color: var(--backgray);
    margin-left: -15px;
    /* margin-right: -30px; */
    width: 102%;
    overflow-y: scroll;
    height: calc(100vh - 50px);
}
.vio {
    background-color: #f6f3ff;
    color: #5a44bd;
    font-size: var(--font12);

}
.flex-container {
    display: flex;
    justify-content: end;
  }

.empoverview .cardblue
{
    background-color: #e5f6ff;
    border-radius: 5px;
    padding: 25px;
    width: 32%;
    margin:0% 0.5%;

}
.empoverview .cardblue .circle
{
    background-color: #b7e6ff;
    border-radius: 50%;
    width: 50px !important;
    height: 50px;
    color: #2c71ff;
    font-size: 21px;
    text-align: center;
    line-height: 52px;
}

.empoverview .cardorange
{
    background-color: #fff0e9;
    border-radius: 5px;
    padding: 25px;
    width: 32%;
    margin:0% 0.5%;
}
.empoverview .cardorange .circle
{
    background-color: #ffdac9;
    border-radius: 50%;
    width: 50px !important;
    height: 50px;
    color: #ff562d;
    font-size: 21px;
    text-align: center;
    line-height: 52px;
}
.empoverview .cardvio
{
    background-color: #f6f3ff;
    border-radius: 5px;
    padding: 25px;
    width: 32%;
    margin:0% 0.5%;
}
.empoverview .cardvio .circle
{
    background-color: #d9d3ff;
    border-radius: 50%;
    width: 50px !important;
    height: 50px;
    color: #604bba;
    font-size: 21px;
    text-align: center;
    line-height: 52px;
}
.emx
{
    padding: 15px 25px;
}
.emx .heading
{
color: #2c2b31;
font-weight: bold;
font-size: 25px;
}
.empoverview .panel-title
{
padding:10px 0px;
}
.empoverview .mainh{
font-size: var(--font13);
font-weight: 600;
}
.empoverview .subh
{
font-size: var(--font11);
color: #7491b7;
} 
.br-rt
{
    border-right: rgb(236, 236, 236) solid 1px;
}


.empoverview .icon .col-md-12
{
    padding-top:5px;
    font-size: var(--font12);
    color: #859ebe;
    line-height: 12px;
    padding-right: 0px;
    padding-left: 0px;
}
.empoverview .icon .col-md-12 img{
    padding:5px;
}
.calendar{
background-color: #f9fafd;
background: rgb(249,250,253);
background: linear-gradient(90deg, rgba(249,250,253,1) 0%, rgba(253,253,254,1) 100%);
}
.empoverview .cardblue .ttle
{
    color: #2c71ff;
    font-size: 25px;
    font-weight: bold;
}
.cardlignnevyblue
{
    background-color: #eaf0fe;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 5px 0;
}
.cardligngreen
{
    background-color: #e7fade;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 5px 0;
}
.cardlignblue
{
    background-color: #edfbfe;
    border-radius: 5px;
    padding: 8px 15px;
    margin: 5px 0;
}
.filtesearch
{
    border-radius: 25px;
    border: #cedee2 solid 1px;
    padding: 5px 8px;
    position: relative;
}
.searchtext
{
    border:0px;
    height: 27px;
}
.filtesearch .wb-search
{
    position: absolute;
    left: 15px; top: 8px;
    font-size: var(--font15);
}
.filtesearch input{
    padding-left: 25px;
    background: transparent;
}
.calendar-bg
{
    background-color: #e8eff7;
    background-repeat: no-repeat;
    height: 45px;
    align-items: center;
}
.calendardd .arbg 
{
    background-color: #fff;
    border-radius: 3px;
padding: 2px;
    width: 30px;Height: 40px;
    text-align: center;

    cursor: pointer;
    border:#bacadf solid 1px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.calendardd .arbg:hover, .calendardd .arbg:active
{
    background-color: var(--menuback);
}
.arbg img{
    width: 8px; 
}

.cal-month-view .cal-cell-row {
    -js-display: flex;
    display: flex;
    border: 1px var(--gg) solid;
}
.cal-month-view .cal-open-day-events {
    color: #000  !important;
    background-color: #e4eaec  !important;
    box-shadow: inset 0 0 5px 0 rgb(0 0 0 / 20%)  !important;
}
.ng-select-container input[type=text]
{
padding-left: 0px;
}
.cal-month-view .cal-cell-row .cal-cell:hover, .cal-month-view .cal-cell.cal-has-events.cal-open
{
    background-color:var(--backgray) !important;
    color: #000 ;
}
.cal-month-view .cal-day-cell.cal-weekend .cal-day-number {
    color: #000 !important;
}
.d-inline h4
{
    font-size: var(--font16);

}
.borbt
{
    border-bottom: #ccc solid 1px;
}
.page-header .dropdown-menu
{
    margin: 0px 0px 0px 0px;
}
/* .table thead th
{
    background-color: var(--clr-light2) !important;
    padding: 0px 5px;
} */

.labletxt textarea{
    height: 34px !important;
    padding-top: 3px;
}


.cal-day-number
{
    color: #000 !important;
    opacity: 1  !important;
}
.cal-month-view .cal-header .cal-cell
{
    font-weight: 500 !important;
}
.cal-month-view .cal-day-number
{
    font-size: var(--font17) !important;

}
.ful-mid
{
    display: flex;
    align-items: center;
}
.paysidefl .btn-success, .paysidefl .btn-red
{
    width: auto;

}
.btn-greentxt
{
    color: rgb(64, 155, 216);
}

.emphead .tab
{
    margin-left: 0px;
}
.userroltb 
{
    width: 100%;
    overflow-x: scroll;
}
.menus11 li span
{
padding-left: 10px;
color: #000;
}
  

.cal-month-view .cal-header .cal-cell
{
    background-color:#292e55 !important;
    color: #fff !important;

}
.cal-month-view
{
    padding: 15px;
}
.payslip-table th{
    font-size: var(--font14);
    font-weight: 600;
}
.payslip-table td{
    font-size: var(--font13);
}
.amount-field b
{
    font-size: var(--font16);

}
.tab
{
    overflow-x: inherit;
}
.tab::-webkit-scrollbar
{
    height: 2px;
    
}
.actiontd div{
    float: right;
}


@media only screen and (min-width:320px)
{
    .payslipse
{
    width: 320px;
    overflow-x: scroll;
 
}
#print-section
{

    width: max-content;
    overflow-x: scroll !important;
    width:920px;
    background: white;
    height: 100%;
    margin: auto;
}
    .empphotoicon img
{
    height: 80px;
    width: 80px;
}
    .checkboxxx
{
    min-width: 150px;
    text-align: left;
    display: inline-flex;
}
    .badg 
{
    border: rgb(220, 220, 221) solid 1px;
    padding: 7px 0px 7px 10px !important;
    margin-right: 5px;
    cursor: pointer;
}
.popup
{
    padding: 5px;
}
.navbar-default{background-color:var(--backgray)}
}
@media only screen and (min-width:820px)
{
    .payslipse
    {
        width: 100%;
        overflow-x: scroll;
     
    }
    #print-section
    {
    
        width: max-content;
        overflow-x: scroll !important;
        width: 920px;
        background: white;
        height: 100%;
    }
    .empphotoicon img
{
    height: 100px;
    width: 100px;
}
    .checkboxxx
{
    min-width: 200px;
    text-align: left;
    display: inline-flex;
}
    .badg 
{
    border: rgb(220, 220, 221) solid 1px;
    padding: 7px 0px 7px 10px !important;
    margin-right: 15px;
    cursor: pointer;
}
.popup
{
    padding: 0px;
}
.navbar-default{background-color:var(--backgray)}
}
.filteralert
{
    overflow-x: scroll;
}



.filteralert ::-webkit-scrollbar,
.filteralert ::-webkit-scrollbar-thumb,
.filteralert ::-webkit-scrollbar-track { 
    width: 8px;
    border: none;
    background: transparent;
}

.filteralert ::-webkit-scrollbar-button,
.filteralert ::-webkit-scrollbar-track-piece,
.filteralert ::-webkit-scrollbar-corner,
.filteralert ::-webkit-resizer {
    display: none;
}

.filteralert ::-webkit-scrollbar-thumb {
    border-radius: 6px;
    background-color: #1A5FAC;
}

.filteralert ::-webkit-scrollbar-track {

    background-repeat: repeat-y;
    background-size: contain;
}
/* ---------------- */
::-webkit-scrollbar{
    height: 8px;
    width: 10px;
    background: gray;
}


::-webkit-scrollbar-track {
  background:#fff;
}
 
    
::-webkit-scrollbar-thumb {
  background: rgb(155, 155, 155); 
}


/* ::-webkit-scrollbar-thumb:hover {
  background: #fff; 
} */

::-webkit-scrollbar-thumb:horizontal{
    background: rgb(238, 237, 237);
    border-radius: 10px;
}

/* .scroll-sidebar::-webkit-scrollbar-track, .scroll-sidebar::-webkit-scrollbar-thumb:hover , .scroll-sidebar::-webkit-scrollbar-thumb {
 background: #30365e !important; 
  } */

.maincontainer
{
    width: 100%;
}
.bism-icon img
{
width: 20px;
height: 20px;
}

.bism-icons img
{
width: 20px;
height: 20px;

}
.sidebar-nav ul li
{
    cursor: pointer;
}
.lock-nav
{

    width: 100%;

}


  


.lock-nav .topbar {
    padding-left: 220px
}

.lock-nav .topbar .navbar-header {
    margin-left: 0
}
.lock-nav .btn-trans img
{
visibility: hidden;
}
 .btn-trans img
{
    visibility: visible;
}

.lock-nav .left-sidebar {
    left: 0 !important;
    width: 260px !important;
}

.sidebar-nav ul li li a:hover
{
    /* background-color: #f0f5fd; */
}


.bis-main {
    background-color: #fff;
    margin: 0px;
    overflow: inherit;
    height: 100vh;
    overflow-x: clip;
}


  .scroll-sidebar {
    height: calc(100% - 50px);
    position: relative;
    overflow-y: scroll;

}
@media only screen and (min-width: 320px)
{
    

.left-sidebar {
    position: absolute;
    width: 260px;
    height: 100%;
    top: 0px;
    left: -200px;
    z-index: 9999;
    padding-top: 0;
    background: #fff;
    box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
    transition: .3s ease-in;
}
.left-sidebar .nav-text-box {
    padding: 7px 15px 7px 15px;
    border-bottom: 1px solid var(--clr-light4);
}
.scroll-sidebar {
    height: 100vh;
    position: relative;
    overflow-y: scroll;
 
}

.page-wrappernne
{
  padding-left:0px;
  position: relative;
  transition: .2s ease-in;
  z-index: 9;
}
  
}

@media only screen and (min-width: 820px)
{
   
.scroll-sidebar {
    height: calc(100% - 50px);
    position: relative;
    overflow-y: scroll;

}
.page-wrappernne
{
  padding-left: 0px;
  position: relative;
  transition: .2s ease-in;
  width: calc(100vw - 67px);
  float: right;
  z-index: 9;
}
.lock-nav .page-wrappernne {
    margin-left: 0px;
    padding-left: 0px;
    width: calc(100vw - 260px);
    float: right;
}
}





.reportsc 
{
    width: 100%;
    overflow-x: hidden;
}
.menui 
{
    padding: 5px 10px;
}
.menui img
{
    width: 20px;
}
.checkexport
{
    min-width: 220px;
    flex-wrap: nowrap;
    display: flex;
}

.ng-select-container:focus{
    outline: 0px;
}
.tab::-webkit-scrollbar, .tab::-webkit-scrollbar-track{
    height: 2px;
    width: 2px;
}
/* ---------- */
.checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: 20px;
    width: 20px;
    transition: all 0.1s ease-in-out;
    border: 2px solid var(--clr-dark2);
}
.checkbox-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--clr-light4);
    color: #000;
    width: 100%;
}
.checkbox-container {
    position: relative;
    padding: 0 15px 0 20px;
    margin-bottom: 0px;
    cursor: pointer;
    font-size: var(--font15);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: table;
    margin-left: 5px;
    margin-top: -6px;
}
.checkbox-container input:checked ~ .checkmark:after {
    display: block;
}
.checkbox-container .checkmark:after {
    left: 4px;
    top: 0;
    width: 7px;
    height: 11px;
    border: solid var(--clr-light1);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
    transform: rotate(
45deg);
}
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.checkbox-container input:checked ~ .checkmark {
    background-color: var(--blue);
    border-color: var(--blue);
    transition: all 0.2s ease-in-out;
}
/* -------- */
.ful-end
{
    display: flex;
    align-items: flex-end;
}

.reportsec {
    margin: 0px;
    /* box-shadow: #e7e9f5 0px 0px 8px; */
    border-radius: 5px;
    background-color: white;
    border: #d9d9da solid 1px;
    margin-bottom: 15px;
    padding: 6px 0px;
}
.ng-select .ng-select-container:focus, .ng-select .ng-select-container:active
{
outline: 0px;
border: 0px;
}
.ng-select .form-control:focus, .ng-select .form-control:focus-visible
{
    outline: 1px #000 solid;

}
.menus11 
{
    overflow-x: inherit;
    width: 100%;
}

.btn-success-light {
    color: #000;
    height: 32px;
    background-color: #bbe7c5;
    border-color: var(--red);
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-bottom: 10px;
    width: 60px !important;
}


/* .sidebar {
    z-index: 10;
    position: absolute;
    width: 240px;
    padding-top: 0px;
    height: 100%;
    top: 0;
    overflow-y: auto;

    border-right: 1px solid var(--brcolor);
} */

.sidebar {

	bottom: 0;
	left: 0;
	margin-top: 0;
    position: fixed;
	top: 50px;
	transition: all 0.2s ease-in-out 0s;
	width: 240px;
	z-index: 1001;
	border-top-right-radius: 0px;
	/* box-shadow: 0 0 13px 0 rgba(82,63,105,0.05); */
	overflow-y: hidden;
}
.user-profile {
    padding: 10px 0 10px 0;
    position: relative;
    text-align: center;
    background-color: #d7e0ea;
}
.dropdown, .dropleft, .dropright, .dropup {
    position: relative;
}
.user-profile {
    padding: 10px 0 10px 0;
    position: relative;
    text-align: center;
    background-color: #d7e0ea;
}
.user-profile .user-pro-body div {
    position: relative;
}
.user-profile {
    padding: 10px 0 10px 0;
    position: relative;
    text-align: center;
    background-color: #d7e0ea;
}
.user-profile .profile-text a {
    font-weight: 500;
    color: #0b1216;
}
.user-profile .user-pro-body div {
    position: relative;
}

.user-profile .companyid a {
    color: var(--btncolor);
    font-size: var(--font12);
    text-align: center;
    font-weight: 500;
    border-bottom: #fff solid 1px;
    padding-bottom: 10px;
}
.user-profile .profile-text a {
    font-weight: 500;
    color: #0b1216;
}
.sidebar-nav::-webkit-scrollbar, .scroll-sidebar::-webkit-scrollbar
{
    width: 0px;
}


.mini-sidebar .album-widget li{width:30.3%}.mini-sidebar .temp-widget .temp-days li{margin:0 6px}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--gg); 
}

.sidebar{z-index:10;width:240px;padding-top:0px;height:100%;overflow-y:auto;background:var(--sidebar); border-right:1px solid var(--brcolor)}
.sidebar .sidebar-nav.navbar-collapse{padding-left:0;padding-right:0}.sidebar .fa-fw{width:20px;text-align:left!important;display:inline-block;font-size: var(--font18);font-weight:400;vertical-align:middle;margin-right:10px}.sidebar .label{font-size: var(--font14);border-radius:4px;padding:6px 8px;min-width:35px;height:25px;margin-top:-2px}.sidebar .btn{font-size: var(--font15);padding:0;width:204px;height:50px;line-height:47px;text-align:center}
.collapse.in{display:block}
.sidebar-nav{background:var(--sidebar);}

.sidebar-nav ul#side-menu{margin:0;padding:0}.sidebar-nav ul#side-menu li{list-style:none}.sidebar-nav ul#side-menu li a{color:#000000;padding:10px 25px 10px 15px;display:block;font-size: var(--font15);font-weight:500}

.sidebar-nav ul#side-menu li a.active{color:#2b2b2b;background:0 0}
.sidebar-nav ul#side-menu li ul li a{color:#2a2e31 !important;background:0 0}
.sidebar-nav ul#side-menu li a{color:var(--menutext); text-decoration:none; margin-top: 0px ;padding:10px 15px 10px 15px;display:block;font-size: var(--font15);}.sidebar-nav ul#side-menu li a.active{color:#2b2b2b;background:0 0}.sidebar-nav ul#side-menu li a.active i{color:#0283cc}.sidebar-nav ul#side-menu li ul{padding-left:0px}.sidebar-nav ul#side-menu li ul li a{padding:10px 25px 10px 0px}.sidebar-nav ul#side-menu li ul ul{padding-left:0px}.user-profile{padding:10px 0 10px 0;position:relative;text-align:center; background-color: #d7e0ea;}

.user-profile .profile-image{padding-top:5px}.user-profile .profile-image img{position:relative;width:50px;height:50px}
.user-profile .badge{border:3px solid #fff;top:30px;position:absolute;padding:0;right:85px;display:inline-block;height:26px;width:26px;border-radius:50%;text-align:center;line-height:19px;font-size:14px}.user-profile .user-pro-body div{position:relative}.user-profile .dropdown-menu{top:50%;left:80px}.user-profile .dropdown-menu a{color:#000000}.user-profile .dropdown-menu i{margin-right:5px}
.user-profile .profile-text a{font-weight:500;color:#0b1216}
.user-profile .companyid a {color: var(--btncolor); font-size: var(--font12); text-align:center; font-weight: 500; border-bottom:#fff solid 1px; padding-bottom: 10px; }




@media (min-width:768px){
.mini-sidebar .sidebar-nav #side-menu li{position:relative; width: 67px;}

.mini-sidebar .sidebar-nav {
background: 0 0;
width: inherit !important;
overflow-y: scroll;
/* margin-top: 20px; */
height: calc(100vh - 70px) !important;
}

.mini-sidebar .sidebar-nav:hover{
    width: 320px;
}
.mini-sidebar .sidebar-nav #side-menu li li
{
width: 320px !important;
}



.mini-sidebar .sidebar-nav::-webkit-scrollbar
{
width: 0px;
}
.mini-sidebar .arr
{
display: none;
}

.mini-sidebar .sidebar-nav #side-menu>li>ul{position:absolute;left:59px;top:48px;z-index:999999;background:#f7fafc;color:#fff;display:none;padding-left:0; padding-bottom: 15px;}.mini-sidebar .sidebar-nav #side-menu>li:hover>ul{height:auto!important}

.mini-sidebar .sidebar-nav #side-menu>li:hover>ul,.mini-sidebar .sidebar-nav #side-menu>li:hover>ul.collapse{display:block}.mini-sidebar .user-profile{width:60px}.mini-sidebar .user-profile .profile-image{padding-top:0}.mini-sidebar .user-profile .profile-image img{width:50px;height:50px}.mini-sidebar .sidebar{width:60px}.mini-sidebar .scroll-sidebar{padding-bottom:0;position:absolute}.mini-sidebar .hide-menu,.mini-sidebar .user-profile .profile-text{display:none}.mini-sidebar .sidebar-nav{background:0 0}.mini-sidebar .sidebar-nav #side-menu>li>a{padding:14px 20px;width:60px}.mini-sidebar .sidebar-nav #side-menu>li:hover>a{width:240px;background:#e5ebec;color:#2b2b2b;border-color:#e5ebec}.mini-sidebar .sidebar-nav #side-menu>li:hover>a i{color:#0283cc}.mini-sidebar .sidebar-nav #side-menu>li:hover>a .hide-menu{display:inline}}@media (max-width:767px){.mini-sidebar .sidebar{position:fixed;transition:all .3s ease;left:-240px}.mini-sidebar.show-sidebar .sidebar{left:0}}@font-face{font-family:simple-line-icons;
src:url(../less/icons/font-awesome/fonts/Simple-Line-Icons.eot?-i3a2kk);
src:url(../less/icons/font/font-awesome/Simple-Line-Icons.eot?#iefix-i3a2kk) format('embedded-opentype'),url(../less/icons/font-awesome/fonts/Simple-Line-Icons.ttf?-i3a2kk) format('truetype'),url(../less/icons/font-awesome/fonts/Simple-Line-Icons.woff2?-i3a2kk) format('woff2'),url(../less/icons/font-awesome/fonts/Simple-Line-Icons.woff?-i3a2kk) format('woff'),url(../less/icons/font-awesome/fonts/Simple-Line-Icons.svg?-i3a2kk#simple-line-icons) format('svg');
font-weight:400;font-style:normal}
.mini-sidebar .sidebar-nav #side-menu>li>li{
    padding-left: 0px;
}

.mini-sidebar  .sidebar-nav ul#side-menu li ul li
{
padding-left: 15px !important;
}

@media only screen and (min-width: 320px)
{
.sidebar-nav {
    overflow-y: inherit;
    padding-bottom: 45px;
    height: 75vh; 
}
}

@media only screen and (min-width: 1024px)
{
.sidebar-nav {
    padding-bottom: 45px;
    height: 85vh;
}
}
@media only screen and (min-width: 1366px)
{
.sidebar-nav {
    padding-bottom: 45px;
    height: 75vh;
}
}
@media only screen and (min-width: 1440px){


.sidebar-nav {
    padding-bottom: 45px;
    height: 95vh;
}
}
/* .sidebar {
    z-index: 10;
    position: absolute;
    width: 240px;
    padding-top: 60px;
    height: 100%;
    z-index: 999;
    top: 0;
    overflow-y: auto;
    background: var(--sidebar);
    border-right: 1px solid var(--brcolor);
} */

.sidebar-nav ul#side-menu {
    margin: 0;
    padding: 0;
}

.sidebar-nav ul#side-menu li a {
    color: var(--menutext);
    text-decoration: none;
    margin-top: 0px;
    padding: 10px 25px 10px 15px;
    display: block;
    
    font-size: var(--font15);
}
.sidebar-nav ul#side-menu li a {
    color: #000000;
    padding: 10px 20px 10px 15px;
    display: block;
    font-size: var(--font14);
    font-weight: 500;
}
.waves-effect {
    position: relative;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}.sidebar-nav ul#side-menu li {
    list-style: none;
}

.sidebar .fa-fw {
    width: 20px;
    text-align: left!important;
    display: inline-block;
    font-size: var(--font18);
    font-weight: 400;
    vertical-align: middle;
    margin-right: 10px;
}




.arr {
    position: absolute;
    right: 10px;
}
.waves-effect i img
{
    width: 18px;
    height: auto;
margin-right: 16px;
}

.logout
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    display: block;
    width: 234px;
    background-color: #d7e0ea;
    /* background-color: var(--sidebar); */
}
.logout::-webkit-scrollbar-track
{
    width: 2px;
}

.mini-sidebar .logout
{
    position: absolute !important;
    bottom: 0px;
    left: 0px;
    display: block;
}

.mini-sidebar .sidebar {
    z-index: 10;
    position: absolute;
    width: 67px;
    padding-top: 0px;
    height: 100%;
    top: 50px;
    overflow-y: auto;
    background: var(--sidebar);
    border-right: 1px solid var(--brcolor);
}
.top-left-part a {
    color: #fff;
    font-size: var(--font18);
    padding-left: 10px;
    text-transform: uppercase;
    background: var(--sidebar);
}
@media only screen and (min-width: 320px)
{
.top-left-part {
    float: left;
    background: var(--sidebar);
    border-radius: 50px;
    height: 45px;
    width: 60px;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: space-between;
}
}
@media only screen and (min-width: 320px)
{
.mini-sidebar .top-left-part {
    /* width: 100%; */
    padding-left: 0;
}
}.mini-sidebar .logo b
{
    display: block;
}
.mini-sidebar .logo span
{
    display: none;
}
.logo b
{
    display: none;
}

.mini-sidebar .top-left-part
{
    justify-content: start !important;
}
.sidebar-nav ul#side-menu li li .waves-effect i img
{
opacity: 0.6;
margin-right: 10px;
}
.mini-sidebar .sidebar-nav #side-menu li
{
    word-spacing: normal;
    white-space: nowrap;
}
.sidebar-nav ul#side-menu li ul li 
{
    padding-left: 40px;
}

.mini-sidebar .sidebar-nav #side-menu>li:hover>a {
    width: 300px;
    background: transparent;
    color: #2b2b2b;
    border-color: transparent;
}

.mini-sidebar
{

}
.mini-sidebar .sidebar-nav #side-menu li:hover
{
    width: 320px;
    background-color: #ebeff4;
}

.sidebar-nav ul#side-menu li ul li:hover {
    padding-left: 40px;
    background: #fff;
}
.mini-sidebar .sidebar-nav #side-menu>li:hover>a {
    width: 300px;
    background: transparent;
    color: #2b2b2b;
    border-color: transparent;
}

.maincard {
    width: 100%;
    padding: 0px 0px;
    height: inherit;
    float: inherit;
}


.opened-left .innertable
{
    /* width: calc(100% - 240px) !important; */
    width: 100%;
}

.mini-sidebar .innertable
{
    width: 100% !important;
}

.mini-sidebar table {
    width: 100% !important;
    max-width: 100% !important;
}
.table {
    width: 100vw;
    max-width: calc(100vw - 264px);
}
.fas img 
{
    width: 64px;
    text-align: center;
    margin: auto;
}



.page-wrapper {
    margin-left: 240px;

        /* margin-left: 240px; */
        width: calc(100vw - 240px);
        overflow: hidden;
        height: auto;
        position: absolute;
        right: 0px;
        top:50px;

  
}
.mini-sidebar .page-wrapper {
    margin-left: 67px;
    width: calc(100vw - 67px);
    overflow: hidden;
    height: auto;
    position: absolute;
    right: 0px;
}

.transpage
{
    position: absolute !important;
    /* right: 0px;
    width: calc(100vw - 240px) !important; */
}
/* .mini-sidebar .transpage
{
   margin-left: 67px;
    width: calc(100vw - 67px) !important; 
    overflow: hidden;
    height: auto;
    position: absolute;
    right: 0px;
} */


#renolist .innertable::-webkit-scrollbar-track, #renolist .innertable::-webkit-scrollbar
{ width: 16px;
}