.card.flex-fill{overflow:hidden;}


.grid-card{position:relative;display:flex;align-items:center}


/* .grid-card::after{ content:''; position:absolute;opacity:0; top:0; left:0; background:#0f172a; width:100%; height:100%; transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s; }


.grid-card:hover::after{ position:absolute;opacity:1;} 


.grid-card:hover p, .grid-card:hover .card-title{color:#fff !important;transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s;}*/


.grid-card p, .grid-card .card-title{z-index:1;position:relative;transition:0.5s; -webkit-transition:0.5s; -moz-transition:0.5s; -ms-transition:0.5s; -o-transition:0.5s;padding: 10px 5px;}


.attendance-card{position:sticky;top:85px}


.account-logo img{width:auto}


.c-pointer{cursor:pointer}


.mini-sidebar .header-left .logo img{height:auto;max-height:10px;width:auto}


.leave-tab{ position:relative; display:block; border-radius:3px; transition:0.5s;}


.link-active{transform: scale(1.11);box-shadow: 5px 5px 6px #bbbbbb;transition:0.5s;}


label.btn-sm{font-size:.675rem}


.profile-info-left{height:100%}


.tbl-header-fix{max-height:500px}


.tbl-header-fix table thead th{position:sticky;top:0;z-index:1}


.welcome-det p{font-size:15px}


.wrk-annvrsry{border:1px solid lightgray;border-radius:3px;background:#f7f7f7;padding:7px;position:absolute;right:25px;top:14px;display:flex;animation:slide 1.5s linear forwards;-webkit-animation:slide 1.5s linear forwards;-moz-animation:slide 1.5s linear forwards;animation-delay:3s;-webkit-animation-delay:3s;-moz-animation-delay:3s;transform:translateX(calc(100% + 100px));animation-timing-function:ease-in-out;-webkit-animation-timing-function:ease-in-out;-moz-animation-timing-function:ease-in-out}


@keyframes slide{from{transform:translateX(translateX(calc(100% + 100px)))}to{transform:translateX(0)}}


@-webkit-keyframes slide{from{transform:translateX(translateX(calc(100% + 100px)))}to{transform:translateX(0)}}


@-moz-keyframes slide{from{transform:translateX(translateX(calc(100% + 100px)))}to{transform:translateX(0)}}


@-o-keyframes slide{from{transform:translateX(translateX(calc(100% + 100px)))}to{transform:translateX(0)}}


@-ms-keyframes slide{from{transform:translateX(translateX(calc(100% + 100px)))}to{transform:translateX(0)}}


.close-annvrsry{position:absolute;right:-18px;top:-1px;height:19px;width:19px;line-height:19px;padding:0;cursor:pointer}


.blink{animation:blink 0.8s alternate infinite;-webkit-animation:blink 0.8s alternate infinite;-moz-animation:blink 0.8s alternate infinite}


@keyframes blink{from{opacity:1}to{opacity:0}}


@-webkit-keyframes blink{from{opacity:1}to{opacity:0}}


@-moz-keyframes blink{from{opacity:1}to{opacity:0}}


@-o-keyframes blink{from{opacity:1}to{opacity:0}}


@-ms-keyframes blink{from{opacity:1}to{opacity:0}}


@media(max-width:480px) {


    .avatar{height:25px}


    .wrk-annvrsry{display:none}


}


.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}


.punch-hours{height:154px;width:154px;font-size:23px;text-transform:lowercase}


/*====clock CSS Start========*/


.punch-info .clock {


  color: #e31b48;


  font-size: 7vh;


  font-family: sans-serif;


  display: flex;


  position: relative;


  overflow: hidden;


  width: 100%;


  justify-content: center;


  height: 9vh;


  line-height: 9vh;


  font-weight: 600;


}


.punch-info .clock > div {


  display: flex;


}





.punch-info .tick {


  line-height: 8vh;


}





.punch-info .tick-hidden {


  opacity: 0;


}





.punch-info .move {


  animation: move linear 1s infinite;


}





@keyframes move {


  from {


    display: block;


}


  to {


    display: block;


  }


}





/*====clock CSS End========*/


  a {


    color: #0f172a;


}


.emp-dashboard .grid-boxes .card-body{


  max-height:420px;


  overflow: auto;


  background: #f1f5f9;


}


.morris-hover{


  position: absolute;


    top: -48px !important;


    font-size: 12px;


    right: 0 !important;


    left: initial !important;


}


#bar-charts svg{


  height:295px;


}


.emp-dashboard .grid-boxes .card-body p {


    background:#d4e1ef;


}


.emp-dashboard .grid-boxes .card-body {


  padding: 0;


    font-size: 12px;


}


@media (max-width:1366px){


  .grid-card .card-title {


    font-size: 12px;


  }


}


.punch-btn {


    font-size: 16px;


    padding: 3px 20px;


}


.form-focus .select2-container .select2-selection--single,


.form-focus .form-control{


    height: 40px;


}


.form-focus .select2-container--default .select2-selection--single .select2-selection__arrow {


    height: 37px;


}


.form-focus .select2-container--default .select2-selection--single .select2-selection__rendered {


    font-size: 14px;


    line-height: 34px;


}


.form-focus.select-focus .focus-label {


    font-size: 12px;


}


.form-focus .focus-label {


    top: -20px;


    font-size: 12px;


}


.filter-row .btn {


    min-height: 40px;


    padding: 5px 12px;


    font-size: 14px;


}


.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success.focus:active, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover {


    background: #71b1ab;


    border: 1px solid #71b1ab;


}


.avatar {


    height: 30px;


    width: 30px;


}


/*---------New Login Page CSS---------*/


.login-bg{


  background: center / cover fixed no-repeat url(../img/login/login-bg.jpg);


}


.account-page .main-wrapper {


  width:initial;


  position: absolute;


  top: 50px;


  left: 50px;


  right: 50px;


  bottom: 50px;


  background: #fff;


  border-radius: 20px;


  overflow:hidden;


}


.account-box{


  background: transparent;


  border:none;


  box-shadow: none;


}


.account-subtitle{


  color:#1f1f1f;


  letter-spacing: 2px;


  margin-bottom: 15px;


}


.account-box .form-control {


  background-color: #fff;


  border: 1px solid #e3e3e3;


  border-radius: 45px;


  height: 40px;


  padding-left: 40px;


}


.account-box .account-btn{


  border-radius: 45px;


  background: #e21c43;


  font-size: 18px;


  padding: 7px 26px;


}


.daily-thoughts{


  background:center / cover no-repeat url(../img/login/bg-sidebar.jpg);


  height: 84vh;


  display: flex;


  justify-content: center;


  align-items: center;


}


.login-bg:before{


  content:'';


  position: absolute;


  width:350px;


  height: 200px;


  background:#e21c43;


  border-radius:20px;


  -webkit-border-radius:20px;


  -moz-border-radius:20px;


  -ms-border-radius:20px;


  -o-border-radius:20px;


  top:25px;


  right:25px;


  z-index:-1;


}


.account-box .form-group{


    position:relative;


}


.text-field-icon{


    position: absolute;


    left: 15px;


    top: 12px;


    width: 14px;


}


@media(max-width:480px){


  .account-page .main-wrapper {


    left: 20px;


    right: 20px;


  }


  .account-box:before{


    display: none;


  }


  .account-box {


    background: #fff;


  }


  .account-page .main-wrapper{


    position: initial;


  }


}


/*---------New Login Page CSS End---------*/


table.payslip td,table.payslip th{


  padding:.1rem .5rem


}


.custom-tabs li{


    margin-left:2px;


}


.custom-tabs li a{


    background: linear-gradient(#ffffff, #cfcfcf) !important;


    color: #321f1f;


    border: 1px solid #cccccc !important;


}


.custom-tabs li a.active{


    background: linear-gradient(#ffffff, #e7afbc) !important;


    border-bottom: 2px solid #e31b48 !important;


}


input[type="date"] {


        position: relative;


    }





    /* create a new arrow, because we are going to mess up the native one


    see "List of symbols" below if you want another, you could also try to add a font-awesome icon.. */


    input[type="date"]:after {


        content: "\25BC"; 


        color: #555;


        padding: 0 5px;


        top: -5px;


        position: relative;


    }





    /* change color of symbol on hover */


    input[type="date"]:hover:after {


        color: #bf1400;


    }





    /* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/


    input[type="date"]::-webkit-calendar-picker-indicator {


        position: absolute;


        top: 0;


        left: 0;


        right: 0;


        bottom: 0;


        width: auto;


        height: auto;


        color: transparent;


        background: transparent;


    }





    /* adjust increase/decrease button */


    input[type="date"]::-webkit-inner-spin-button {


        z-index: 1;


    }





    /* adjust clear button */


    input[type="date"]::-webkit-clear-button {


        z-index: 1;


    }





    input::-webkit-outer-spin-button,


    input::-webkit-inner-spin-button {


      -webkit-appearance: none;


      margin: 0;


    }





    .table-responsive::-webkit-scrollbar {


        background: #f7f7f7;


        height: 10px;


        width: 10px;


    }


    .bg-theme-gray{


      background:#f1f5f9 !important;


    }


    .change-view{


        position:relative;


        display: flex;


        align-items: center;


    }


    .change-view a{


        font-size: large;


    }


    .change-view a.active{


        position: relative;


        display: block;


        padding: 4px;


        width: 33px;


        text-align: center;


        background: #e31b48;


        color: #fff;


    }


    .tbl-header{


        position:relative;


        display: grid;


        grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;


        width: 100%;


        list-style: none;


        padding:0;


        margin:0;


    }


    .tbl-header li{


        position:relative;


        display: block;


        width:100px;


        border:1px solid #f4f4f4;


        padding:8px 7px;


    }


    .prefix,.suffix{


        position: relative;


        display: flex;


        align-items: center;


    }


    .prefix{


        flex-direction: row-reverse;


    }


    .suffix{


        flex-direction: row;


    }


    


    .unit-placement.prefix span, .unit-placement.suffix span {


        display: block;


    } 


    .nowrap{white-space: nowrap;}