@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'); */
: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;
--hoverclr:#e8eef2;
--backgray:#f3f7fc;
--tblheadbackclr:#fff;
--gg:#ecf0f1;
--darkgreen:#45aa5b;
--title:#000;
--tblrowovr:#ffffff;
/* --fonttheme:'Inter', sans-serif, 'Source Sans Pro', sans-serif; */
--fonttheme: 'Inter', sans-serif;
/* --fonttheme:'InterRegular,-apple-system,BlinkMacSystemFont',"Segoe UI",Roboto,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; */
--bor: #f5f5f5;
--filterhed:#e4eaec;

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


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: 10px;
    top: -2px;
    position: absolute;
    margin-top: -5px;
    /* border-radius: 50%; */
    right: -2px;

}
.fa-border button{
    margin: auto;
    text-align: center;
}
.parsley-required
{
    font-size: 11px;
    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 10x 5px !important;
    font-size: 13px;
}
.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: 18px;
      font-weight: bold;
      color: var(--green);
      line-height: 6px;
  }
  .activetab
  {
      background-color: var(--green);
      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: 14px;
    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
{
    background-color: var(--tblheadbackclr);
    height: 32px;
}
.table td{
    vertical-align:inherit;
}
.font12
{
    font-size: 12px;
}
.f16
{
    font-size: 16px;
}
.f18
{
    font-size: 18px;
}
.f13
{
    font-size: 13px;
}
.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: 13px;

}
.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: 1600 !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: 15px;
color: var(--darkgreen);
font-weight: bold;
}
.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;
    padding: 10px;
    position:absolute;
    right: 0px;
    bottom: 0px;
    box-shadow: #e9e9e9 0px 0px 5px;
    width: 100%;
    display: block;
    margin-bottom: 0px;
}
input[type=text]
{
padding-left: 10px;
}
.btn-red
{
    color: #f6e8e8;
    background-color: #e84144;
    border-color: #ce3739;
}
.btn-red,.btn-success {
    font-size: 14px;
}
.btn-success
{
    border: var(--red) solid 1px;
    border-radius: 3px;
}

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

    font-size: 14px;
    line-height: 20px;

}
.btn-ediview:focus
{
    border: #ddd solid 1px;
}
.btn-ediviewdd img{
    width: 20px;
}
.btn-ediview img{
    width: 12px;
}
.btn-ediviewdd
{
    color: #333;
    background-color: #fff;
    border-color: #ccc !important;
    font-size: 14px;
    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;
}
.backbtn
{
    width: 30px;
    height: 30px;
    margin-top: 10px;
    background-color: var(--hovergray) !important;
    left: 0px;
    padding-left: 1px;
}   
.tab ul
{
    margin-left: 0px;
    padding-left: 0px; 
    margin-bottom: 0px; 
    padding-top: 0px;
    border-bottom: var(--bor) solid 1px;
}
.menus11 li{
    display: inline-block;
    list-style: none;
    width: auto;
    text-align: center;
    font-size: 14px;
    padding: 7px 10px;
    color: #0249a0;
    cursor: pointer;
}
.empname
{
    font-size:18px;

}
.midcontainer-emp-overview
{
    width: auto;
    height: calc(100vh - 200px);
    padding: 20px 0px;
    overflow-y: scroll;
    margin-bottom: 20px;

}
@media only screen and (min-width:320px)
{
    .midcontainer-emp-overviewem
{
    width: auto;
    height: calc(100vh - 290px);
    padding: 0px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto, .col-xxl, .col-xxl-1, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 1.0715rem;
    padding-left: 1.0715rem;
}
}
@media only screen and (min-width:1024px)
{
    .midcontainer-emp-overviewem
{
    width: auto;
    height: calc(100vh - 290px);
    padding: 0px 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.modal-body .col-sm-8,  .modal-body .col-md-6,  .modal-body .col-lg-8,  .modal-body.col-xl-9{
    padding-right: 0.8rem;
    padding-left: 0.8rem;

}
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto, .col-xxl, .col-xxl-1, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-auto {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 0.8rem;
    padding-left: 0.8rem;
}
}
@media only screen and (min-width:1280px)
{
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto, .col-xxl, .col-xxl-1, .col-xxl-10, .col-xxl-11, .col-xxl-12, .col-xxl-2, .col-xxl-3, .col-xxl-4, .col-xxl-5, .col-xxl-6, .col-xxl-7, .col-xxl-8, .col-xxl-9, .col-xxl-auto {
        position: relative;
        width: 100%;
        min-height: 1px;
        padding-right: 1.0715rem;
        padding-left: 1.0715rem;
    }
    .modal-body .col-sm-8,  .modal-body .col-md-6,  .modal-body .col-lg-8,  .modal-body.col-xl-9, .modal-body.col-xl-8,  .modal-body.col-xl-4, .modal-body.col-lg-7, .modal-body.col-lg-4, .modal-body.col-lg-5{
        padding-right: 0.8rem;
        padding-left:0.8rem;
    
    }

    .midcontainer-emp-overviewem
{
    width: auto;
    height: calc(100vh - 290px);
    padding: 0px 20px;
    overflow-y: scroll;
    overflow-x: hidden;
}
}
.midcontainer-emp-overviewem1
{
    width: auto;
    height: calc(100vh - 120px);
    padding: 0px 0px;
    overflow-y: scroll;
}
.graybox
{
    background-color: #fff;
    border-radius: 0px;
    padding: 10px;
   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: 14px;
    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: 14px;
    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: 17px;
    color: #000; 
    font-weight: 600;
}
.padbtm
{
    padding-bottom: 10px;
}

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

.imgsclose .trsbtn
{
    position: absolute;
    right: 0;
    top: 0;
}
.imgsclose button{
    background-color:#000;
    border: transparent; 
}
.trsbtn img{
    width: 12px;
    height: 12px;
}
@media only screen and (min-width:320px)
{
    .wid25
{
    width: 100%;
}
.filtergroup
{
    background-color: #fbfafa;
    height: auto;
    padding:5px ;
    color: var(--textgray);
    font-size: 14px;
    font-weight: 100;
    border:var(--gg) solid 1px;
}
}
@media only screen and (min-width:768px)
{
    .wid25
{
    width: 48%;
    margin: 5px;
}
.filtergroup
{
    background-color: #fbfafa;
    height: auto;
    padding:5px ;
    color: var(--textgray);
    font-size: 14px;
    font-weight: 100;
    border:var(--gg) solid 1px;
}
}
@media only screen and (min-width:1024px)
{
    .wid25
{
    width: 31%;
    margin: 5px;
}

.filtergroup
{
    background-color: #fbfafa;
    height: 48px;
    padding:5px ;
    color: var(--textgray);
    font-size: 14px;
    font-weight: 100;
    border:var(--gg) solid 1px;
}
}
@media only screen and (min-width:1366px)
{
   
    .wid25
{
    width: 23%;
    margin: 10px;
}

.filtergroup
{
    background-color: #fbfafa;
    height: 48px;
    padding:5px ;
    color: var(--textgray);
    font-size: 14px;
    font-weight: 100;
    border:var(--gg) solid 1px;
}
}
@media only screen and (min-width:1600px)
{
    .wid25
{
    width: 23%;
    margin: 10px;
}

.filtergroup
{
    background-color: #fbfafa;
    height: 48px;
    padding:5px ;
    color: var(--textgray);
    font-size: 14px;
    font-weight: 100;
    border:var(--gg) solid 1px;
}
}
.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;
    
}
.empphotoicon img, .empphotoicon1 img{
    border-radius: 50%;
    background-color: var(--hovergray);
    width: 100px;
    height: 100px;
    border: 1px var(--gg) solid;
}
.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:18px;
    font-weight: bold;
}
.wid25 .graybox
{
 padding: 20px;
 height: 400px;
}

.bl{
    color: #000;
}
.bckgry
{
    background-color: var(--hovergray);
}
.totalnet
{
    background-color: #fff8e6;
    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: 12px;
    padding: 2% 0%;
    text-align: center;
}
.moboff img{
    width: 100%;
    overflow: hidden;
}
@media only screen and (min-width:320px)
{
    .lognn
    {

        margin: auto;
        width: 100%;
    }
    .moboff
    {
        display: none;
    }
    .loginsection
{
  width:100%;
  max-width:100%;
  margin:auto;
  padding:2% 5%;
  text-align:left;
background-color: #fff;
}
.welcometxt {
    font-size: 15px;
    width: auto;
    margin: 0 auto;
    text-align: center;
    display: block;
  }
  
  .logintitle {
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
  }
  .page-headerview
{

    border-bottom: var(--gg) solid 1px;
    height:auto;
    line-height: 56px;
}
}
@media only screen and (min-width:768px)
{
    .lognn
    {
        margin: auto;
    }
    .moboff
    {
        display: block;
    }
    .loginsection
    {
      width:400px;
      max-width:100%;
      margin:auto;
      padding:2% 5%;
      text-align:left;
    background-color: #fff;
    }
}
@media only screen and (min-width:1024px)
{
    .welcometxt {
        font-size: 16px;
        width: auto;
        margin: 0 auto;
        text-align: center;
      }
      
      .logintitle {
        font-size: 1.785rem;
        font-weight: 700;
        text-align: center;
      }
    .moboff
    {
        display: block;
    }
    .emmm .graybox
{
    margin:0px 5px 15px 5px;
}
    .loginsection
{
  width:400px;
  max-width:100%;
  margin:auto;
  padding:2% 5%;
  text-align:left;
background-color: #fff;
border-radius: 5px;
}
}
@media only screen and (min-width:1280px)
{
    .loginsection
    {
      width:100%;
      max-width:400px;
      margin:auto;
      padding:2% 3%;
      text-align:left;
    background-color: #fff;
    border-radius: 5px;
    }
    .emmm .graybox
{
    margin:0px 15px 15px 15px;
}
.page-headerview
{
    border-bottom: var(--gg) solid 1px;
    height: 50px;
    line-height: 48px;

}
}





.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: Roboto,sans-serif;
    font-size: 14px;
    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: Roboto,sans-serif;
    font-size: 11px;
    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;
}
@media only screen and (min-width:320px)
{
    .stsfnt
{
    font-size: 14px;
    text-align: center;
    white-space: normal;
    line-height: 20px;
}
.page-title{   
     margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 30px;
    color:var(--title);    
    font-weight:500;
    padding: 0px 0px 0 0;
}

    .form-group {
        margin-bottom: 8px;
    }
}
@media only screen and (min-width:768px)
{
    .stsfnt
{
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
}
.page-title{    margin-top: 0;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 30px;
    color:var(--title);    
    font-weight:500;
    padding: 0px 0px 0 0;}
    .form-group {
    margin-bottom: 10px;
    }
}
.f12
{
    font-size: 12px !important;
}
.empname{
    font-size: 14px;
    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: 26px;
    padding-top: 10px;

}
.tabllll li{
    display: inline-block;
    padding-top: 8px;
    padding-right: 8px;
    font-size: 14px;
}

.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;
}
@media only screen and (min-width:320px)
{
    .box1
    {
        /* background-color: #fff;
        border: 1px solid #e0e4e7; */
        margin: 0px 10px 10px 0px;
        border-radius: 3px;
        width:fit-content;
        width: 100%;
        color: var(--label);
        font-size: 13px;
        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; */
    }
    .box1:nth-of-type(4)
{
    flex: 1;
}
.box1:nth-of-type(5)
{
    flex: 1;
}
}
@media only screen and (min-width:1024px)
{
    .box1
    {
        /* background-color: #fff;
        border:1px solid #ced4da; */
        margin: 0px 10px 10px 0px;
        width:fit-content;
        width: 48.5%;
        padding-bottom:10px ;
       /* min-height: 420px; */
    }
    .box1:nth-of-type(4)
{
    flex: auto;
}
.box1:nth-of-type(5)
{
    flex: auto;
}
}
@media only screen and (min-width:1400px)
{
    .box1
    {
        /* background-color: #fff;
        border: 1px solid #ced4da; */
        margin: 0px 10px 10px 0px;
        width:fit-content;
        width: 49%;
        /* min-height: 420px; */
        padding-bottom:10px ;
      

    }
    .box1:nth-of-type(4)
    {
        flex: auto;
    }
    .box1:nth-of-type(5)
    {
        flex: auto;
    }
}
@media only screen and (min-width:1600px)
{
    .box1
    {
        /* background-color: #fff;
        border: 1px solid #ced4da; */
        margin: 0px 20px 20px 0px;
        width:fit-content;
        width: 31.8%;
        padding-bottom:10px ;
        /* min-height: 420px; */
    }
    .box1:nth-of-type(4)
{
    flex: 1;
}
.box1:nth-of-type(5)
{
    flex: 1;
}
}
@media only screen and (min-width:1920px)
{
    .box1
    {
        /* background-color: #fff;
        border: 1px solid #ced4da; */
        margin: 0px 20px 20px 0px;
        width:fit-content;
        width: 32.1%;
        padding-bottom:10px ;
        /* min-height: 420px; */
    }
    .box1:nth-of-type(4)
{
    flex: 1;
}
.box1:nth-of-type(5)
{
    flex: 1;
}
}





.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: 16px;
}
.empdetail .name{
    font-size: 16px;
    color: #fff;
    padding-bottom: 5px;
}
.empdetail .descp
{
    font-size: 13px;

    text-transform: capitalize;
}
.empdetail .descp span{
    padding: 5px 10px 5px 0px;
    color: #bcd8ff;
}
.empdetail .contact span
{
    padding: 5px 20px 5px 0px;
    font-size: 12px;
    color: var(--menutext);
}
.empdetail .count
{
  
    text-align: center;
    font-weight: 500;
    line-height: 25px;
    font-size: 22px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.empdetail .caption
{
    font-size: 12px;
    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);
}
.circle
{
    width: 140px;
    text-align: center;
    margin: 0px 15px;
}
.empdetailmain
{
    width: auto;
    flex: 1;
    position: relative;
}
.emmm
{
    font-size: 14px;
    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;
}

.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: 15px;
}
.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: 11px;
    }
    .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: 14px;
      }
      .modal-dialog-l
      {
     max-width: 468px;
      }
.modal-s
{
    width: 500px !important;
    margin:0% auto;
}

@media only screen and (min-width:320px)
{
    .lable-left
{
    width: 50%;
    float: left;
    padding-right: 15px;
    font-size: 13px;
}
.lable-right
{
    width: 50%;

    float:right;
    font-size: 13px;

}
}
@media only screen and (min-width:768px)
{
    .lable-left
{
    width: 45%;
    float: left;
    padding-left: 10px;
}
.lable-right
{
    width: 55%;

    float:right;

}
}
@media only screen and (min-width:1024px)
{
    .lable-left
{
    width: 40%;
    float: left;
    padding-right: 10px;
}
.lable-right
{
    width: 60%;

    float:right;

}
}
@media only screen and (min-width:1360px)
{
    .lable-left
{
    width: 35%;
    float: left;
    padding-right: 15px;
}
.lable-right
{
    width: 65%;

    float:right;

}
}

.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);
      font-weight: bold;
      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;
}
.userrole .table-responsivefixedheader thead{
    border-bottom: var(--gg) solid 1px;
    padding: 5px 0px;
    color: #000; 
}
@media only screen and (min-width:320px)
{
    .lable-left, .import
    {
        text-align: right;
        padding-right: 1.0715rem;
        color: #0a0a0a;
    }
}
@media only screen and (min-width:1024px)
{
    .lable-left, .import
    {
        text-align: right;
        padding-right: 0.8rem;
 
    }
}
@media only screen and (min-width:1280px)
{
    .lable-left, .import
    {
        text-align: right;
        padding-right: 1.0715rem;
        
    }
}


 .lable-right
 {
     color: black;
 }
 .lablebox
 {
    display: block;
    width: 100%;
    padding: .25rem 0.75rem;
    font-size: 13px;
    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: 32px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
 }
 .txtlink
 {
    font-size: 13px; color: cornflowerblue;
    cursor: pointer;
 }

 /* -------emp---------- */
 .tablll
 {
    overflow: scroll;
    white-space: nowrap;
 }
@media only screen and (min-width:320px)
{
    .tablll::-webkit-scrollbar
    {
        width: auto;
    }
    
}
@media only screen and (min-width:1024px)
{
    .tablll::-webkit-scrollbar
    {
        width: auto;
    }
    
}
@media only screen and (min-width:1280px)
{
    .tablll::-webkit-scrollbar
    {
        width: 0px;
    }
    
}
.lable-right
{

}
.yellowbg {
    background-color: #e2f5ff;
    padding:5px 15px;
    font-size: 13px;
}
.yellowbg .blktxt
{
    white-space: pre-line;
}

.pointer {
    cursor: pointer;
  
    transition: ease-in-out 0.2s;
    color: #0249a0;
}
.pointer:hover
{
    text-decoration: underline;
    color: #0249a0;
}
.badg 
{
    border: rgb(220, 220, 221) solid 1px;
    padding: 7px 0px 7px 10px !important;
    margin-right: 15px;
    cursor: pointer;
}
.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;
}
.bdat
{
    font-size: 10px;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    position: absolute;
    right: 7px;
    top: 3px;
  
}
.btn-editview div{

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

@media only screen and (min-width:320px)
{
    .yellowbg .ripd{
        padding-right: 0;
    }  
    .yellowbg .pplf{
        padding-left: 0;
    }   
   
}
@media only screen and (min-width:1024px)
{
    .yellowbg .ripd{
        padding-right: 0;
    }   
    .yellowbg .pplf{
        padding-left: 10px;
    } 
}
@media only screen and (min-width:1280px)
{
    .yellowbg .ripd{
        padding-right: 15px;
    }   
    .yellowbg .pplf{
        padding-left: 5px;
    } 
}
@media only screen and (min-width:1366px)
{
    .yellowbg .ripd{
        padding-right: 10px;
    }  
    .yellowbg .pplf{
        padding-left: 5px;
    }  
}

@media only screen and (min-width:1600px)
{
    .yellowbg .ripd{
        padding-right: 0px;
    }   
    .yellowbg .pplf{
        padding-left:15px;
    } 
}
.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;
}
.scrolltrns
{
    height: calc(100vh - 150px);
    overflow-y: scroll;
}
.modal-xxl
{
width: 100% !important;
max-width:100% !important;
}
.modal-xxl .modal-content
{
    height: 100vh;
}
/* ======= 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: #604bba;

}
.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: 13px;
font-weight: 600;
}
.empoverview .subh
{
font-size: 11px;
color: #7491b7;
} 
.br-rt
{
    border-right: rgb(236, 236, 236) solid 1px;
}


.empoverview .icon .col-md-12
{
    padding-top:5px;
    font-size: 12px;
    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: 15px;
}
.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: 30px;
    text-align: center;
    align-items: center;
    cursor: pointer;
    border:#bacadf solid 1px;
}
.calendardd .arbg:hover, .calendardd .arbg:active
{
    background-color: var(--menuback);
}
.arbg img{
    width: 8px; 
}
.fie
{
    width: 150px;
    background-color: #fff;
    border-radius: 3px;
padding-top: 3px;
    Height: 30px;
    align-items: center;
    font-size: 13px;
    text-align: center;
    border:#bacadf solid 1px;
}
.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;
}
.cal-month-view .cal-day-cell.cal-weekend .cal-day-number {
    color: #000 !important;
}

@media only screen and (min-width:320px)
{
    .page-title {
        cursor: pointer;
        width: 250px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }
}
@media only screen and (min-width:1280px)
{
    .page-title {
        cursor: pointer;
        width: auto;
        text-overflow: inherit;
        overflow: hidden;
        white-space: nowrap;
    }
}