html,body {
    font-family: 'Roboto', 'Lato' !important;
    font-size: 12px;
}

.modal.fade .modal-dialog {
 -webkit-transform: translate(0);
 -moz-transform: translate(0);
 transform: translate(0);
 }

::selection {
  background: #ffb142; 
}
::-moz-selection {
  background: #ffb142; 
}

/*----------------------------
    Padding and Margin Adjustments
----------------------------*/

.bx-wrapper .bx-prev,
.bx-wrapper .bx-next {

    opacity: 0.5 !important;
    transition: 100ms opacity ease-in-out;
   
}

.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-next:hover {
    
    opacity: 0.9 !important;
   
}

.bx-wrapper .bx-controls-direction a  {
    z-index: 10 !important;
}



.w-auto {
    width: auto !important;
}

/*Paddings*/

@media only screen and (min-width: 768px) {
    .pl-lg-0 {
        padding-left: 0 !important;
    }

    .pr-lg-0 {
        padding-right: 0 !important;
    }
    .pt-lg-0 {
        padding-top: 0 !important;
    }
   .pb-lg-0 {
        padding-bottom: 0 !important;
    }
   .w-lg-100 {
       width: 100% !important
   }
}

.plr-2 {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

.plr-3 {
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.plr-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.plr-5 {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

.p-0 {
    padding: 0 !important;
}

.p-10 {
    padding: 10px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-5 {
    padding: 10px !important;
}

.pt-0 {
    padding-top: 0 !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.pb-5 {
    padding-bottom: 5px !important;
}

.pl-0 {
    padding-left: 0 !important;
}
.pl-15 {
    padding-left: 15px !important;
}

.plr-10 {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

.plr-20 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.plr-30 {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.pr-0 {
    padding-right: 0 !important;
}

@media screen and (max-width: 660px) {
    .pl-xs-0 {
        padding-left: 0 !important;
    }

}

/*Margins*/


@media screen and (min-width: 768px) {
    .mb-sm-0 {
        margin-bottom: 0px !important;
    }
     .pl-sm-0 {
        padding-left: 0px !important;
    }
    .pr-sm-0 {
        padding-right: 0px !important;
    }
}
.m-0 {
    margin: 0 !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}


.mb-5 {
    margin-bottom: 5px !important;
}
.mt-0 {
    margin-top: 0 !important;
}

.ml-0 {
    margin-left: 0 !important;
}
.mr-0 {
    margin-right: 0 !important;
    
}
.mr-5 {
    margin-right: 5px !important;
}

.mt-3 {
    margin-top: 3px !important;
}
.mt-4 {
    margin-top: 4px !important;
}
.mt-5 {
    margin-top: 5px !important;
}

.mt-19 {
    margin-top: 19px !important;
}

.mt-25 {
    margin-top: 25px !important;
}
.mt--25 {
    margin-top: -25px !important;
}


.m--10 {
    margin-top: -10px !important;
}
.m-5 {
    margin: 5px !important;
}
.mt-10 {
    margin-top: 10px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.m-10 {
    margin: 10px !important;
}

.mt---16 {
    margin-top: -16px !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}


.mt-15 {
    margin-top: 15px !important;
}

.ml-10 {
    margin-left: 10px !important;
 
}

.mlr-5 {
    margin-left: 5px !important;
    margin-right: 5px !important;
}


.mt-7 {
    margin-top: 7px !important;
}

.mt-30 {
    margin-top: 30px !important;
}


.mt-33 {
    margin-top: 33px !important;
}
/*-----------------------------------
    Border Radius Adjustments
-------------------------------------*/

.bblr-0 {
    border-bottom-left-radius: 0 !important;
}

.bbrr-0 {
    border-bottom-right-radius: 0 !important;
}

.btlr-0 {
    border-top-left-radius: 0 !important;
}

.btrr-0 {
    border-top-right-radius: 0 !important;
}

/*----------------------------
    Navbar Customization
----------------------------*/



@media (min-width: 767px) {
    .navbar-nav .dropdown-menu .caret {
        transform: rotate(-90deg);
    }
}

@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #fff;
        
    }
}

.navbar-right .dropdown-menu li a .caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-bottom: 4px dashed;
    border-top: 4px solid transparent;
    border-right: 4px solid transparent;
}

ul li {
    list-style: none !important;
}

ul.dropdown-menu li {
    list-style: none !important;
}


.navbar {
    margin-bottom: 0 !important
}

.navbar-fixed-top {
    position: relative !important;
}

.navbar-default {
    
    background-color: #34495e;
    border-color: #2c3e50;
}

.navbar-brand {
    padding: 8px 0px !important;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #27aae1 !important;
    background-color: transparent !important;
    font-weight: 500;
}

.navbar-default .navbar-nav>li>a {
    color: #fff;
    font-weight: 500;
    transition: transform 300ms;
    padding: 15px 10px;
    /*letter-spacing: 0.5px;*/
    
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:active,
.navbar-default .navbar-nav>li>a:focus  {
    color: #27aae1;
    
}

.navbar-default .navbar-nav > li>a:hover {
    transform: scale(0.97);
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
    color: #fff;
    background-color: #2c3e50;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
    color: #fff;
    background-color: transparent;
}

.dropdown-menu>li>a {
    display: block;
    padding: 6px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    white-space: nowrap;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
    color: #fff;
    text-decoration: none;
    background-color: #3498db;
}







/*----------------------------
    Background Customization
----------------------------*/

#lp-register {
    background: linear-gradient(to right, rgba(0, 126, 255, 0.2) , rgba(173, 3, 3, 0.2)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5) , rgba(0, 0, 0, 0.0)), url(../images/wallbg.jpeg)  no-repeat !important;
    background-size: cover !important;
    background-position: center !important;
    width: 100%;
    height: 100%;

}

body {
    background: #f1f2f6;


}


.wrapper_dashboard {
    
        background: rgba(255,255,255,1);
    margin: 20px;
    padding-bottom: 10px;
    border: 1px solid #d6d8dc;
    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
    border-radius: 2px;

}

/*----------------------------
    Registration Form Customization
----------------------------*/


.reg-form-container {
    min-height: auto !important;
   
}

@media screen and (max-width: 600px) {
    .reg-form-container {
    margin: 10px 20px;
   
}
    #lp-register {
        position: relative;
    }
    #lp-register .wrapper {
        padding-top: 4em;
        padding-bottom: 2em;
    }
}

/*----------------------------
    btn Customization
----------------------------*/

.btn {
    outline: none !important;
    transition: 0.3s background-color ease-in-out !important;
   
}

.btn-no-label {
    margin-top: 2.65rem;
}

/*----------------------------
    Main Container Dashboard
----------------------------*/
.container-card {
    padding: 24px;
    word-wrap: break-word;
    margin: 16px 0;
    display: block;
    background-color: #fff;
    border-radius: 2px;
    position: relative;
    list-style: none;
    transition: all 0.5s;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 2px 3px rgba(0,0,0,.1);
}

.container-card:hover {
    box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 3px 4px rgba(0,0,0,.2);
    /*transform: translate(0px, -1px)*/
}


.container-card-scroller {
    padding: 10px 15px;
    word-wrap: break-word;
    margin: 16px 0;
    display: block;
    background-color: #fff;
    border-radius: 0px;
    position: relative;
    list-style: none;
}
/*----------------------------
    Dashboard Profile Page
----------------------------*/

/*Cover Image*/
.bg-view-box {
    user-select: none;
margin: 16px 0 0 0;
height: 180px;
}

.bg-view-box .userimg {
    width: 100%;
    height: 100%;   
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: center 38% !important;
    
   

}

/*Export Button*/

.userimg .export--btn {
    position: relative;
   float: right;
    bottom: -140px;
    right: 10px;
}


/*Profile Image*/
.profile-image-section {
    margin: -100px 0;
    user-select: none;
    

}

/*--------------------------
    Profile Image Replacement
----------------------------*/


textarea {
    min-width: 100%;
    max-width: 100%;
    min-height: 40px;
}


@media screen and (max-width: 680px) {
    .profile-image-section {
        text-align: center;
    }

    .profile-image img {
        object-fit: cover;
    min-width: 100px !important;
    min-height: 100px !important;
    max-width: 100px !important;
    max-height: 100px !important;
    margin-top: 30px;
    
}

    .image-frame img {
opacity: 1 !important;

}

    .image-frame:hover {
 /*background-color: transparent !important;*/
 border-radius: 50%;

}

    .navbar-brand {
        width: 100px !important;
    }



    .edit-button-profile a {
    margin: -5px 0 0 0;
}
}


.profile-image img {
    object-fit: cover;
    min-width: 160px;
    min-height: 160px;
    max-width: 160px;
    max-height: 160px;
    box-sizing: border-box;
    background-clip: content-box;
    border: 0 solid transparent;
    background-color: rgba(243,246,248,.94);
    border: 4px solid #fff;
    box-shadow: inset 0 1.5px 3px 0 rgba(0,0,0,.15), 0 1.5px 3px 0 rgba(0,0,0,.15);
    border-radius: 50%;
}

.profile-img.in-modal {
    text-align: center;
    margin-bottom: 5px;
        
}

.profile-img.in-modal img {
    width:80px;
    height: 80px;
    box-sizing: border-box;
    background-clip: content-box;
    border: 0 solid transparent;
    background-color: rgba(243,246,248,.94);
    border: 4px solid #fff;
    box-shadow: inset 0 1.5px 3px 0 rgba(0,0,0,.15), 0 1.5px 3px 0 rgba(0,0,0,.15);
    border-radius: 50%;
}


/*Edit Button Profile*/

.edit-button-profile {
    margin: 0 auto;
    float: right;
    
}

.col-xs-2.pull-right .edit-button-profile {
   position: relative;
   right: -8px;
}

.edit-button-profile a svg {
    display: block;
    /*vertical-align: top;*/
    color: #3498db;
    transition: transform 100ms ease-in-out;

}

.edit-button-profile.plus {
    background-color: #2d98da;
    border-radius: 100%;
    transform: scale(0.8);
}

.edit-button-profile.plus a svg {
    color: white;
    background-color:#2d98da;
    border-radius: 100%;
}

@media only screen and (max-width: 660px) {
    .edit-button-profile.plus a svg {
    margin-top: 3px;
}

        .edit-button-profile.plus {
    padding: 2px 1px;
}
}

.edit-button-profile.plus:hover a svg {
   
    transform: none;

}

.edit-button-profile:hover a svg {
    transform: rotate(47deg);

}

.edit-button-profile a .add-svg {
    display: block;
    /*vertical-align: top;*/
    color: #2ecc71
}

   

.edit-button-profile a {
    cursor: pointer;
    float: right;
    transition: transform, background-color 0.3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    border-radius: 50%;
    padding: 5px;
    
}

    .edit-button-profile a:hover {
        background-color: #ebf7ff;
    }

     .edit-button-profile a:active {
         transform: scale(0.9);
}

/*Delete Document BUtton*/

.del-button-profile {

    margin: 0 auto;
    padding-top: 8px;
    float: left;

}

.del-button-profile a svg {
    display: inline;
 

}

.del-button-profile a {
    cursor: pointer;
    transition: all 0.3s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
    border-radius: 50%;
    line-height: 30px;
    padding: 9px 6px 4px 6px;
    margin-right: 10px;
    
}

.del-button-profile.resign .resign-disabled svg {
    cursor: default;
  position: relative;
  top: 50px;
  right: 10px;
    
}


    .del-button-profile a:hover {
        background-color: rgba(173, 3, 3, 0.2);
        
    }

     .del-button-profile a:active {
         transform: scale(0.9);
}


     .document-file-name {
         line-height: 40px;
     }

       .document-file-name a {
         color: rgba(0,0,0,0.6);
     }

     .title-card-box.docs {
         border-bottom: 1px solid #ecf0f1;
     }

      .card-body:last-child .title-card-box.docs {
         border-bottom: 0;
     }



     .del-button-profile.resign {
         float: right;
         margin: 50px -15px 0;
     }

/*User Information*/

.user-information {
margin: 12rem 0 auto;
/*margin-left: 13em;*/
display: block;
}

.user-information div:nth-child(1) {
    font-size: 24px;
    font-weight: 400;
    color: rgba(0,0,0,.9);
}

.user-information div:nth-child(2) {
    font-size: 16px;
    line-height: 32px;
    font-weight: 500;
    color: rgba(0,0,0,.9);
    
}

.user-information div:nth-child(3) {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: rgba(0,0,0,.6);
}


/*---------------------------
        Boxes Dashboard 
----------------------------*/
.dropdown-box {
    width: 100%;
    position: relative;
    display: inline-block;
    
    
}

.profile-section-buttons {
    margin-top: 20px;
}
/* 
    Dropdown Content (Hidden by Default) */

.box {
    cursor: pointer;
    margin: 5px 0px;
  transition: transform 300ms, box-shadow 300ms;
   
    border-radius: 2px;
    width: 100%;
  height:120px;
  overflow: hidden;
  z-index: -1
 
}

.col-sm-3:nth-child(1) .dropdown-box .box {
    background-color: #34495e
 
}

.col-sm-3:nth-child(2) .dropdown-box .box {
    background-color: #9b59b6
 
}

.col-sm-3:nth-child(3) .dropdown-box .box {
    background-color: #2980b9
 
}


.col-sm-3:nth-child(4) .dropdown-box .box {
    background-color: #16a085
 
}


.col-sm-3:nth-child(5) .dropdown-box .box {
    background-color: #c0392b
 
}

.col-sm-3:nth-child(6) .dropdown-box .box {
    background-color: #d35400
 
}


.box:hover {
transform: scale(1.02);
box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.1) inset;
}

.box:before{
    background: url(../images/static-image.svg) no-repeat center;
    content: "";
    opacity: 0.1;
  top: 5px;
  left: 0;
  bottom: 5px;
  right: 0;
  position: absolute;
  z-index: 0; 
  overflow: hidden;
}
.box-module-name {
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 16px;
    padding: 10px 20px;
   line-height: 7em;
   z-index: 99999;

}


/*-----------------------------------
    Glyphicons in Dashboard Boxes
-------------------------------------*/

@font-face {
    font-family: "Glyphicons Halflings";
    src: url("../fonts/glyphicons-halflings-regular.eot") format("embedded-opentype"),   
    url("../fonts/glyphicons-halflings-regular.woff") format("woff"), 
    url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"), 
    url("../fonts/glyphicons-halflings-regular.svg") format("svg");
}

.col-sm-3:nth-child(1) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e010";
    position: absolute
}

.col-sm-3:nth-child(2) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e008";
    position: absolute
}

.col-sm-3:nth-child(3) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e109";
    position: absolute
}

.col-sm-3:nth-child(4) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e031";
    position: absolute
}

.col-sm-3:nth-child(5) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e224";
    position: absolute
}

.col-sm-3:nth-child(6) > .dropdown-box > .box > .glyphiconcss:before {
    font-family: "Glyphicons Halflings";
    content: "\e019";
    position: absolute
}

.box:hover .glyphiconcss {
transform: translate(-35px, -55px);
color: white;
}

.glyphiconcss {
    transform: rotate(-20deg);
    color: rgba(255,255,255,0.2);
    font-size: 4em;
    padding: 35px 30px;
    position: absolute;
    bottom: -15px;
    transition: transform 0.6s, color 0.6s;
    right: 15px;
}


.dropdown-content {
    display: none;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15), 0 10px 15px rgba(0,0,0,.3);
    transition: box-shadow 83ms;
    border: 1px solid #cdcfd2;
    background-color: #fff;
    position: absolute;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    margin-top: -10px;
    max-height: 300px;
}

/* Links inside the dropdown */



.dropdown-content > div {
    user-select: none;
    cursor: pointer;
    border-top: .5px solid rgba(0,0,0,0.1);
    border-bottom: .5px solid rgba(0,0,0,0.1);
    text-decoration: none;
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: rgba(0,0,0,.9);
    border-radius: 0;
    background: #fff;
    padding: 16px 0px 16px 0px;
    justify-content: space-between;
}

.dropdown-content .menu-item:hover .menu-item-sub  {
    margin-bottom:-15px;
}


/* Show the dropdown menu (using JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}



/*-----------------------------------------------
    Bootstrap Outline Override and Ripple Effect
-------------------------------------------------*/

/*Bootstrap button outline override*/

.btn-outline {
    background-color: transparent;
    color: inherit;
    transition: all .5s;

}

.btn-primary.btn-outline {
    color: #27aae1;
    border: 1px solid #27aae1;
}


.btn-success {
        background-color: #20bf6b !important;
    border-color: #1fab61 !important;
   border-style: solid !important;
    border-width: 2px !important;
    border-left:none !important;
    border-top: none !important;
    border-right: none !important;
    transition: all ease-in-out 300ms !important;
}

.btn-info {
        background-color: #45aaf2 !important;
    border-color: #2d98da !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-left:none !important;
    border-top: none !important;
    border-right: none !important;
    transition: all ease-in-out 300ms !important;
}
.btn-danger {
        background-color: #fc5c65 !important;
    border-color: #eb3b5a !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-left:none !important;
    border-top: none !important;
    border-right: none !important;
    transition: all ease-in-out 300ms !important;
}

.btn-warning {
        background-color: #f7b731 !important;
    border-color:  #e3a72a !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-left:none !important;
    border-top: none !important;
    border-right: none !important;
    transition: all ease-in-out 300ms !important;
}


.btn-success:hover, .btn-info:hover, .btn-danger:hover, .btn-warning:hover, .activeGreen {
    transform: translateY(1px);
    border-width: 1px !important;
}

.btn-success.btn-outline {
    color: #5cb85c;
    border: 1px solid #5cb85c;
}

.btn-info.btn-outline {
    color: #5bc0de;
}

.btn-warning.btn-outline {
    color: #f0ad4e;
}

.btn-danger.btn-outline {
    color: #d9534f;
}

.btn-primary.btn-outline:hover,
.btn-success.btn-outline:hover,
.btn-info.btn-outline:hover,
.btn-warning.btn-outline:hover,
.btn-danger.btn-outline:hover {
    color: #fff;
}

/*Ripple Effect*/



.btn-secondary-muted {
    background-color: transparent;
    border: 0;
    border-radius: 2px;
    color: rgba(0,0,0,.6);
    cursor: pointer;
    line-height: 40px;
    outline-width: 2px;
    padding: 0 24px;
    position: relative;
    transition: all 100ms cubic-bezier(0,0,.2,1);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 1px transparent;
    box-sizing: border-box;
    font-size: 1.6rem;
    font-family: inherit;
    overflow: hidden;
    text-decoration: none;
    z-index: 0;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    font-weight: 600;
}

.btn-secondary-muted:hover {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 2px transparent;
}

/*.btn:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, .2);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.btn-secondary-muted:after {
    background: rgba(0, 0, 0, .1) !important;
    content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 1;
  }
  20% {
    transform: scale(25, 25);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(40, 40);
  }
}

.btn:focus:not(:active)::after {
  animation: ripple 400ms ease-out;

}

.btn-secondary-muted:focus:not(:active)::after {
    animation: ripple 1000ms ease-out;

}*/



/*-----------------------------------
    Card Body -- Education/Experience/Skill
--------------------------------------*/

 .card-header {
    font-size: 20px;
    line-height: 28px;
    color: rgba(0,0,0,.9);
    padding-bottom: 15px
}
 .card-body.edu-exp {
     margin-left: 6em;
 }

 @media screen and (max-width: 600px) {
      .card-body.edu-exp {
     margin-left: 0;
 }
 }

  .seplast:last-child hr {
      display: none;
  
 }

  .card-body .title-card-box {
      letter-spacing: 0.7px;
      font-weight: 600;
    font-size: 15px;
    line-height: 28px;
    color: rgba(0,0,0,.9);
}

    .card-body .title-card-box-secondary {
        letter-spacing: 0.7px;
      font-weight: 400;
    font-size: 15px;
    line-height: 18px;
    color: rgba(0,0,0,.9);
}

        .card-body .title-duration {
        letter-spacing: 0.7px;
      font-weight: 500;
    font-size: 12px;
    line-height: 28px;
    color: rgba(0,0,0,.6);
}

 .card-body .title-duration i {
    color: #27aae1;
    margin: 0 4px;
    
    
}


 .card-body .title-card-skill {
     font-size: 16px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.9);
     letter-spacing: 0.5px;
     padding: 16px 0 0;
    border-bottom: 1px solid #e6e9ec;
     /*max-width: calc(100% - 40px);*/
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
        height: 3.7em;
 }

.TableDataEmployeeName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 150px;
    max-width: 150px;
}

@media screen and (max-width: 600px) {
    .card-body .title-card-skill {
        font-size: 14px;
        height: auto;
 }
 }

  .card-body .title-card-skill label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }



/*-------------------
    Separator
---------------------*/

div.separator,
span.separator {
    height:1px;
background:rgba(0,0,0,0.1);
border-bottom:1px solid rgba(0,0,0,0.1);
}

#show_more {
   -webkit-transition-duration: 0.8s;
   transition: 300ms ease-in-out all;
}

#show_more .show-more-height { 
    height: 125px; overflow:hidden; 
    transition: 300ms ease-in-out all;

}

#show_more .show-more {
    width: 100%;
     color: #27aae1;
      position:relative;
       font-size: 16px;
        padding: 10px;
         height: 30px;
          text-align: center;
           background: #fff;
            cursor: pointer;
}

#show_more .show-more .glyphicon {
       font-size: 12px;
       margin-left: 8px;
       
}

#show-toggle-btn {
    user-select: none;
}



/*Drop DOwn Menu */

.menu-item .menu-item-parent a {
    text-indent: 20px;
  color: rgba(0,0,0,0.9);
  font-weight: 600;
  font-size: 16px;
  display: block;
  text-decoration: none;
  
} 

.menu-item {
    transition: background-color 100ms, color 100ms;
}
.menu-item:hover {
    background-color: #3498db;
    color: white;
}  

.menu-item:hover .menu-item-parent a {
    
    color: white;
}  
 

.menu-item .menu-item-sub {
    text-indent: 30px;
  font-size: 13px;
  line-height: 45px;
  height: 0px; /*Collapses the menu*/
  overflow: hidden;
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

.menu-item-text {
    border-bottom: 1px solid rgba(0,0,0,0.05);
    width: 100%;
    font-size: 14px;
    color: #fff;
    transition: all 300ms;
    
}

.menu-item-text:hover {
    /*text-shadow: 0px 1px 1px rgba(0,0,0,0.5);*/
    font-size: 15px;
    background-color: #2a7fb9;
    
}

.menu-item-text:nth-child(1) {
    margin-top: 10PX;
    
}

.menu-item:hover .menu-item-sub  {
  height: auto;
}


.menu-item .menu-item-sub .menu-item-icon i.glyphicon {
font-size: 15px !important;
padding-right: 5px;
}



/*------------------------
Bootstrap Modal Customization
-------------------------*/

.modal-content {
    border-radius: 0px !important;
    
}

.modal-header .close {
    font-size: 26px !important;
    font-weight: 400 !important;
    color: #000 !important;
    text-shadow: none !important;
    filter: alpha(opacity=60);
    opacity: .6;
    outline: none !important;
    margin-top: 0px !important;
    margin-bottom: -8px !important;
    border-radius: 100%;
    /*padding-left: 5px;
    padding-right: 5px;*/
    line-height: 0;
    width: 25px;
    height: 25px;
    transition: all 100ms ease-in-out;
}

.modal-header .close:hover {
    opacity: 1;
    color: #fff !important;
    background-color: #e74c3c;
    transform: scale(0.9); 
}

.modal-title {
    color: rgba(0, 0, 0, 0.9 ) !important;
}
    

.modal-body {
    max-height: 540px;
    overflow-y: auto;
    padding-bottom: 18px !important;
}

.btn-save {
    background-color: #0073b1;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-weight: 600;
    height: 32px;
    line-height: 32px;
    outline-width: 2px;
    padding: 0 16px;
    z-index: 0;
    margin-left: auto;
}

.btn-save-new:hover,
 .btn-save-new:focus,
.btn-save-new:active{
    color: #fff;
}

.btn-save-new {
    background-color: #20bf6b;
    border: 0;
    border-radius: 2px;
    color: #fff;
    font-weight: 600;
    height: 32px;
    line-height: 32px;
    outline-width: 2px;
    padding: 0 16px;
    z-index: 0;
    margin-left: auto;
}

.btn-save:hover,
.btn-save:focus,
.btn-save:active {
    color: #fff;
}

.btn-delete,
.btn-delete:focus {
    background-color: transparent;
    color: rgba(0,0,0,.6);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 1px transparent;
    border: 0;
    border-radius: 2px;
    font-weight: 600;
    height: 32px;
    line-height: 32px;
    outline-width: 2px;
    padding: 0 16px;
    z-index: 0;
    margin-left: auto;
    transition: all 800ms ease-in-out;
    float: left;
}

.btn-delete:hover,
.btn-delete:active {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 2px transparent;
    
}

.btn-cancel,
.btn-cancel:focus {
    background-color: transparent;
    color: rgba(0,0,0,.6);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 1px transparent;
    border: 0;
    border-radius: 2px;
    font-weight: 600;
    height: 32px;
    line-height: 32px;
    outline-width: 2px;
    padding: 0 16px;
    z-index: 0;
    margin-left: auto;
    transition: all 800ms ease-in-out;
}

.btn-cancel:hover,
.btn-cancel:active {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.6), inset 0 0 0 2px transparent, inset 0 0 0 2px transparent;
    
}
    
    
   

.btn-modal:hover,
.btn-modal:active,
.btn-modal:focus {
    color: #fff !important;
}


/*--------------------
    Form Control Bootstrap Override
---------------------*/

input.form-control {
 
    height: 32px !important;

}

textarea {
    min-height: 40px;
}


.form-control {
    border: 1px solid rgba(0,0,0,0.6);
    border-radius: 2.5px !important;
    color: rgba(0,0,0,0.9) !important;
    transition: border ease-in-out .25s,box-shadow ease-in-out .25s !important;
}

.form-control:focus {
    /*border: 2px solid #0073b1;*/
    /*box-shadow: none !important;*/
    border: 1.2px solid;
    border-color: #0073b1 !important;
    
}

.chosen-container-single .chosen-single {
     border: 1px solid rgba(0,0,0,0.6) !important;
     border-radius: 2.5px !important;
     color: rgba(0,0,0,0.9) !important;
     height: 32px !important;
    padding: 2px 10px !important;
}

.chosen-search input[type="text"] {
    padding: 0px 20px 0px 4px !important;
}


.chosen-container-multi .chosen-choices {
     border: 1px solid rgba(0,0,0,0.6) !important;
     border-radius: 2.5px !important;
     color: rgba(0,0,0,0.9) !important;
    padding: 0 !important;
}

.chosen-container-multi .chosen-choices .search-field input[type="text"] {
    padding: 0px 20px 0px 4px !important;

}

.chosen-container-multi .chosen-choices .search-choice {
        margin: 5px 0 3px 5px !important;

}
select.form-control{
    height: 32px !important;
    padding: 2px 10px !important;
    color: rgba(0,0,0, 0.9) !important;
}

label {
 
    font-weight: 600 !important;
    color: rgba(0,0,0,0.9)!important;
}

.caret {
    position:relative;
    border: none;
}

.caret:before {
    content: "\f078";  /* this is your text. You can also use UTF-8 character codes as I do here */
    font-family: FontAwesome;
    left:-8px;
    font-size: 10px;
    position:absolute;
    top:-5px;
}


/*MultiSelect Modification*/

.multiselect-native-select .btn-group,
.multiselect-native-select .btn-group button {
    width: 100% !important;
    text-align: left;
}

.multiselect-native-select .btn-group button b {
    float: right;
    margin-top: 8px;
    margin-right: -2px;
}

.multiselect.dropdown-toggle.btn.btn-default {
    border-color: rgba(0,0,0,0.6)!important;
    border-radius: 2.5px !important;
    height: 32px !important;
    padding: 2px 10px !important;
}


.btn-group.open ul {
        left: -20px !important; 
    max-height: 100px;
    overflow-y: scroll;

}

.btn-group.open ul li:nth-child(1) a label {
    font-weight: 600 !important;
    font-size: 13px;
}

.btn-group.open ul li.active a,
.btn-group.open ul li.active a:hover {
    background-color: #2d98da !important;
}

.btn-group.open ul li a:hover {

    background-color: rgba(0,0,0,.1) !important;

}

.btn-group.open ul li.active a label {
    color: #fff !important;
    background-color: #2d98da;
    /*border-bottom: 1px solid #45aaf2 !important;*/
}

.btn-group.open ul li a label {
    font-weight: 400 !important;
    font-size: 13px;
}



/*Select Arrow Customization*/

 
/*To remove button from IE11, thank you Matt */
select::-ms-expand {
     display: none;
}
 
.selectdiv:after {
  content: '>';
  font: 17px "Consolas", monospace;
  color: rgba(0,0,0,0.3);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 18px;
  /*Adjust for position however you want*/
  top: 38px;
  /*left line */
  position: absolute;
  pointer-events: none;
}

.selectdiv.no-label:after {
  
  right: 18px;
  /*Adjust for position however you want*/
  top: 7px;
  /*left line */
  position: absolute;
  pointer-events: none;
}

@media only screen and (min-width: 768px) {
    .selectdiv.no-label.no-r-padding:after {
  
  right: 10px;

}
}

 
.selectdiv select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
 
}

/*--------------------
   Custom Buttons
---------------------*/
.btn-3d-green {
    border: none !important;
    color: white;
    background-color: #20bf6b;
    border-bottom: 3px solid #1fab61 !important;
    transition: 300ms ease-in-out all !important;
}

.btn-3d-green:hover {
    box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.1) !important;
}

.btn-3d-green:hover,
.btn-3d-green:active {
    color: white !important;
    box-shadow: none;
    transform: translateY(1px);
    border-bottom: 1px solid #1fab61 !important;
}
.btn-3d-green:focus {
    color: white;
}

.btn-3d-blue{
    border: none !important;
    color: white;
    background-color: #45aaf2;
    border-bottom: 4px solid #2d98da !important;
    transition: 300ms ease-in-out all !important;
}

.btn-3d-blue:hover {
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1) !important;
}

.btn-3d-blue:hover,
.btn-3d-blue:focus,
.btn-3d-blue:active {
    color: white !important;
    box-shadow: none;
    transform:  translateY(2px);
    border-bottom: 1px solid #2d98da !important;
}

.scale-out
 {
transition: 100ms ease transform !important;
border-width: 1px !important;   
}

.scale-out:active
 {
transform: scale(0.9) !important;
}


/*-------------------------
    Custom Checkboxes & Radio
--------------------------*/
 .checkbox-cs {
    
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-cs input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark {
    border: 1px solid rgba(0,0,0, 0.6);
    position: absolute;
    top: 4px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.checkbox-cs:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-cs input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-cs input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-cs .checkmark:after {
    left: 5.5px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



/*Radio */

 .checkbox-cs-radio {
    
    display: block;
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox-cs-radio input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom checkbox */
.checkmark-radio {
    border: 1px solid rgba(0,0,0, 0.2);
    position: absolute;
    top: 4px;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.checkbox-cs-radio:hover input ~ .checkmark-radio {
    background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.checkbox-cs-radio input:checked ~ .checkmark-radio {
    background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-radio:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.checkbox-cs-radio input:checked ~ .checkmark-radio:after {
    display: block;
}

/* Style the checkmark/indicator */
.checkbox-cs-radio .checkmark-radio:after {
    /*top: 4px;
	left: 4px;
	width: 8px;
	height: 8px;
    background: white;
    border-radius: 50%;*/
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
   



/*-------------------------
    Scroll to Top
-------------------------*/


 #Scroll_top {
    display: none;
    position: fixed;
    bottom: 10px;
    right: 5px;
    z-index: 99;
    font-size: 14px;
    border: none;
    outline: none;
    background-color: #27aae1;
    color: white;
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 50%;
    transition: 300ms ease-in-out background-color;
}

 #Scroll_top:hover {
  background-color: #0073b1;
}
.fixed {
    position: fixed;
}

.fixed-scroll-outer {
    position: relative;
    margin-top: 15px;
}

@media screen and (max-width: 660px) {
.fixed-scroll-outer {
   display: none;
}
}

.above {
    z-index: 1043;
}

.w100 {
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .w-lg-100 {
    width: 100% !important;
}
}

.scroll-bar-btn {
    padding: 0px 0px;
    width: 330px;  
    
}
.scroll-bar-btn .scroll-text-btn {
   font-size: 14px;
   
   
}

.scroll-bar-btn .badge {
    margin-right: 12px;   
    border-radius: .25em;
    float: right;
    padding-left: 0 !important;
    
}

.scroll-bar-btn .badge span {
    padding-right: 3px;
}

.scroll-bar-btn .glyphicon {
    color: #3498db;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    transition: all 100ms ease-in-out;
}

.scroll-bar-btn:hover .glyphicon {
    color: #2b7fb8;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}


.badge-success {
  background-color: #3498DB !important;
  color: white !important; 
  transition: background-color 300ms ease-in-out;
}

.scroll-bar-btn .btn {
    /*width: 100%;*/
     width: 280px; 
    padding: 14px 0px;
    border-radius: 0px !important;
    text-align: left;
    text-indent: 10px;
    transition: all 300ms ease-in-out !important;
    border-bottom-right-radius: 10px !important;
    border-top-right-radius: 10px !important;
  
    
}

.scroll-bar-btn .btn:active,
.scroll-bar-btn .btn.scrollactive {
    border-bottom: 2px solid rgba(0,0,0,.15) !important;
    border-top: 0px solid rgba(0,0,0,.15) !important;

}

.scroll-bar-btn .btn-primary {
   background-color: #fff !important;
   color: rgba(0,0,0,0.7);
   font-weight: normal;

    
}

.scroll-bar-btn .btn-primary:hover,
.scroll-bar-btn .btn.scrollactive {
   background-color: rgba(0,0,0,0.03) !important;
   color: rgba(0,0,0,0.9) !important;

    
}

.scroll-bar-btn .scrollbtn {
    border-bottom: 1px solid rgba(0,0,0,.15);
    
}

.scroll-bar-btn .scrollbtn.alpha {
    border-top: 1px solid rgba(0,0,0,.15);
    
}

.scroll-bar-btn .btn:hover,
.scroll-bar-btn .btn.scrollactive
 {
    
    width: 300px;  
    
}

.scroll-bar-btn .btn:hover .badge-success,
.scroll-bar-btn .btn.scrollactive .badge-success {
    background-color: #2f8bc9 !important;
    
  
}

.scroll-bar-btn .btn.scrollactive .badge-success {
    border: 2px solid rgba(0,0,0,0.1);
    
  
}


.scroll-bar-btn .glyphicon {
    padding-right: 5px;
    font-size: 15px;
}

#fileLoader
{
    display:none;
}



/*---------------------------
    Tabs
-----------------------------*/

/* Style the tab */
.tab {
    overflow: hidden;
   width: 100%;
    background-color: #3498db;
    margin-bottom: 10px;
}

/* Style the buttons inside the tab */
.tab button {
    width: 33.3%;
    background-color: #3498db;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 10px 10px;
    transition: 0.3s;
    font-size: 15px;
    font-weight: 600;
}

@media screen and (max-width: 660px) {
    .tab button {

    width: 100%
}
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #2980b9;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #2980b9;
}

/* Style the tab content */
.tabcontent {
    display: none;
    border-top: none;
}


/*--------------------
    Table Customization
---------------------*/

table {
    background-color: #fff !important;
    
}

.dataTables_wrapper {
    margin-top: 8px !important;
}


.table-striped>tbody>tr:nth-of-type(odd) {
    background-color: #f4f4f4;
}

.table > thead > tr > th {
    border-radius: 1px !important;
}

.table > tbody > tr > td {
    color: rgba(0,0,0,0.8) !important;
    
}

.table-head,
.table-head-role {
    background-color: #0073b1 !important;
    color: #fff;
    border-top: #0073b1 solid 1px;
}

.table-head tr th{
    background-color: #0073b1 !important;
    border: #0073b1 solid 1px !important;

 
}

.table-head-role + tbody .FormName {
    font-weight: 600;
   
}
 .table-bordered > thead > tr > th {
    border: 1px solid #03689f !important;
}

 .table-search-field {
     margin-top: 10px;
     margin-bottom: 10px;
     

 }
.after-search {
    float: right;
    margin: 10.5px 15px;
}

@media screen and (max-width: 660px) {

    .after-search {
    margin: 15px;
    width: 93%;
    text-align: center;
}

        .input-group.after-search .form-control {
    width: 100% !important;
}

}

.input-group .form-control {
    width: 500px !important;
}

/*Page Specific Search*/

.after-search input {
    background-color: #3d536d;
    border-color: #3b4d63;
    color: white !important;
    transition: 300ms ease-in-out all !important;
}

.after-search input::placeholder {

    color: #637b98;
}

.after-search input:focus {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.03), 0 0 8px rgba(102,175,233,.1);
}

/*** Page Specific Search END ***/
  

.search-more.btn.btn-sm {
    padding: 5px 12px !important;
    /*margin-left: -6.4em !important;*/
     margin-left: -3.1em !important;
   
}

.search-more:hover {
 border-width: 2px !important;
}

.search-more.btn {
    transform: none !important;
    border-top-right-radius: 0px !important;
    border-bottom-right-radius: 0px !important;
}

@media screen and (min-width: 1370px) {
    .dataTables_wrapper {
        overflow-x: hidden;
    }
}



/*Btn-info Customization*/
.search-more.btn.btn-info {
    z-index: 3;
    color: #fff;
    background-color: #3498db;
    border-color: #3498db;
}

    .search-more.btn.btn-info:hover {
        background-color: #2980b9;
        border-color: #2980b9;
    }


    .btn-info {
        color: #fff;
    background-color: #3498db;
    border-color: #2980b9;
    }

     .btn-info:hover,
     .btn-info:active,
     .btn-info:focus {
        background-color: #2980b9;
        border-color: #2577ad;
    }
  
/*Table Alignments and width*/

   .table-head tr th:nth-last-child(-n+2),
   .table-body tr td:nth-last-child(-n+2) {
        text-align: center;
        width: 50px !important;
        
    }

   .table-paging--btn {
       margin-top: -25px;
       text-align: center
       
   }



   .table-paging--btn .btn-default.active {
       color: #fff;
       background-color: #0073b1;
   }


   .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {

    vertical-align: middle !important;

}

   .white {
       color: white !important;
   }



/*-----------------
Employee Leave List
-------------------*/

.table-head.ell tr th:nth-child(3) {
    width: 220px !important;

} 

.table-head.ell tr th:nth-child(4),
.table-head.ell + tbody tr td:nth-child(4) {
    width: 100px !important;
    text-align: center;
} 


.table-head.ell tr th:nth-child(5) {
    width: 130px !important;
}

.table-head.ell tr th:nth-child(6) {
    width: 160px !important;
}

.table-head.ell + tbody tr td:nth-child(7) {
    width: 120px !important;
}


/*------------------
Leave Approval - Subordinates leave
---------------------*/
.subordinateleavetable thead tr th {
    padding-right: 6.5px !important
}
.subordinateleavetable thead tr th:nth-child(2),
.subordinateleavetable tbody tr td:nth-child(2) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(2):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(3),
.subordinateleavetable tbody tr td:nth-child(3) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(3):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(4),
.subordinateleavetable tbody tr td:nth-child(4) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(4):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(5),
.subordinateleavetable tbody tr td:nth-child(5) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(5):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(6),
.subordinateleavetable tbody tr td:nth-child(6) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(6):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(7),
.subordinateleavetable tbody tr td:nth-child(7) {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.subordinateleavetable tbody tr td:nth-child(7):hover {
    overflow: visible;
    white-space: normal;
    word-break: break-all;
}
.subordinateleavetable thead tr th:nth-child(8),
.subordinateleavetable tbody tr td:nth-child(8) {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
}

.subordinateleavetable thead tr th:nth-child(9),
.subordinateleavetable tbody tr td:nth-child(9) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
}
.subordinateleavetable thead tr th:nth-child(10),
.subordinateleavetable tbody tr td:nth-child(10) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}


@media only screen and (min-width: 1500px) {
    .Col9WidthSet #SubOrdinatesLeaves .subordinateleavetable {
    transform: scale(0.82) translate(-140px, -77px) !important;
   
  
}
    .Col9WidthSet #SubOrdinatesLeaves .page--dragtable {
    max-height: 640px !important;
    height: 640px !important;
  
}
.Col9WidthSet #SubOrdinatesLeaves .subordinateleavetable tbody {
    max-height: 690px !important;
    height: 690px !important;
  
}
}
.Col9WidthSet #SubOrdinatesLeaves .subordinateleavetable {
    transform: scale(0.74) translate(-235px, -120px);
    
  
}
.Col9WidthSet #SubOrdinatesLeaves .page--dragtable {
    max-height: 560px;
     height: 560px;
  
}
.Col9WidthSet #SubOrdinatesLeaves .subordinateleavetable tbody {
    max-height: 660px;
    height: 660px;
  
}
 #SubOrdinatesLeaves .subordinateleavetable {
    transform: scale(0.988);
  
}
#SubOrdinatesLeaves .page--dragtable {
    max-height: 560px;
  
}
#SubOrdinatesLeaves .subordinateleavetable tbody {
    max-height: 490px;
  
}







/*---------------------END SUBORDINATE LEAVES-----------------------------*/


.table-head.myleaves-th tr th:nth-child(5),
.table-head.myleaves-th + tbody tr td:nth-child(5),
.table-head.myleaves-th tr th:nth-child(4),
.table-head.myleaves-th + tbody tr td:nth-child(4) {
    width: 120px !important;
    text-align: center;
}


.table-head.sub-leaves-th tr th {
   padding-right: 8px !important;
    border-width: 0.5px !important;

}

.table-head.sub-leaves-th tr th:nth-child(2),
.table-head.sub-leaves-th + tbody tr td:nth-child(2)
 {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-head.sub-leaves-th tr th:nth-child(3),
.table-head.sub-leaves-th + tbody tr td:nth-child(3)
 {
    min-width: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    text-align: center;
}

.table-head.sub-leaves-th tr th:nth-child(4),
.table-head.sub-leaves-th + tbody tr td:nth-child(4)
 {
    min-width: 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    text-align: center;
    
}

.table-head.sub-leaves-th tr th:nth-child(5),
.table-head.sub-leaves-th + tbody tr td:nth-child(5)
 {
    min-width: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
    text-align: center;
    
}


.table-head.sub-leaves-th tr th:nth-child(6),
.table-head.sub-leaves-th + tbody tr td:nth-child(6)
 {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;
    text-align: center;
    
}

.table-head.sub-leaves-th tr th:nth-child(7),
.table-head.sub-leaves-th + tbody tr td:nth-child(7)
 {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    word-break: break-all;
    
}

.table-head.sub-leaves-th tr th:nth-child(8),
.table-head.sub-leaves-th + tbody tr td:nth-child(8)
 {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
      
}

.table-head.sub-leaves-th tr th:nth-child(9),
.table-head.sub-leaves-th + tbody tr td:nth-child(9)
 {
    min-width: 114px !important;
    width: 114px !important;
    max-width: 114px !important;
      
}

.table-head.sub-leaves-th tr th:nth-child(10),
.table-head.sub-leaves-th + tbody tr td:nth-child(10)
 {
    min-width: 50px !important;
    width: 50px !important;
    max-width: 50px !important;
    text-align: center;
      
}



/*------------------------
Collapse Heading
--------------------------*/

.heading-collapsable {
    padding: 0px 10px;
    cursor: pointer;
    background-color: #007ec3;
    /*border-bottom: 1px solid rgba(0,0,0,.15);*/
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}

.collapse-body {
    margin-bottom: 10px;
    border-radius: 2px;
    border-right: 0px solid rgba(0,0,0,.2) !important;
    background-color: #007ec3;
    border: 1px solid rgba(0,0,0,.2);
}

.collapse-body .collapse-text {
    margin-left: 5px;
 }

.collapse-text2 {
    margin-left: 10px;
}

.collapse-mod-text {
    color: #fff;
    padding: 3px 0;
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
}



/*-----------------------
    Page Header
------------------------*/


.page--header {
    background-color: #4b6584;
}

.margin-c {
    margin-left: -15px !important;
    margin-right: -15px !important;

}

/*Heading*/

.page--heading {
    display: inline-block;
    padding: 5px 12px;
    width: auto;
}

@media only screen and (max-width: 660px) {
    .page--heading {
        position: relative;
        height: 30px;
    }
     .page--heading span {
        position: absolute;
        top: 10px;
        font-size: 14px !important; 
    }
}

.page--heading span {
    
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 2em;
}



@media screen and (max-width: 660px) {
    .page--heading {
 
    width: 100%;
}
    .page--header {
    padding-bottom: 10px;
}

}

/*Heading Button*/

.heading--btn {
    width: auto;
    display: inline-block;
   
}
.heading--btn---tabs {

    display: inline-block;
}
.heading--btn .btn {
    margin-top: -10px;
   
}

@media screen and (max-width: 660px) {
    .heading--btn {
    /*width: 100%;*/
    text-align: center;
    position: relative;
    float: right;


}

    .heading--btn .btn {
    position: absolute;
    right: -10px !important;
    top: -1.6em !important;
    transform: scale(0.8);
}
}




/*-----------------------
    Container Box
----------------------*/

.container-box {
    /*padding-top: 10px !important;*/
    padding: 10px 5px 20px 5px;
    /*width: 100%;*/
    border-radius: 2px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.2);
    margin: 15px 15px;
}


/*Table IMG*/

.table-head th.tableh-img{
    width: 10px;
    padding: 0 !important;
}

.table-body .table-img img {
    height: 40px;
}


.table-body .table-img-cell  {
    padding: 5px !important;
    text-align: center;

}


.table .employee-list-th tr th:nth-child(2) {
    min-width: 120px;

}

.table .employee-list-th tr th:nth-child(4) {
    min-width: 80px;

}

.table .employee-list-th tr th:nth-child(5) {
    min-width: 80px;

}

.table .employee-list-th tr th:nth-child(8) {
    min-width: 30px;

}

.table .employee-list-th tr th:nth-child(9) {
    min-width: 60px;

}

.table .employee-list-th tr th:last-child {
    min-width: 70px !important;
}

.table .employee-list tr td {
    vertical-align: middle
}


/*Employee List on img Hover*/

.img-transition{
    -webkit-transform: scale(3.5) translate(15px, 0px); 
    -moz-transform: scale(3.5) translate(15px, 0px);
    -o-transform: scale(3.5) translate(15px, 0px);
    transform: scale(3.5) translate(15px, 0px);
    /*border: 1px solid rgba(0,0,0,0.3);*/
    z-index: 999999 !important;
}

tr:first-child td#img_hover .img-transition {
        -webkit-transform: scale(3.5) translate(15px, 14px); 
    -moz-transform: scale(3.5) translate(15px, 14px);
    -o-transform: scale(3.5) translate(15px, 14px);
    transform: scale(3.5) translate(15px, 14px);
}

tr:last-child td#img_hover .img-transition {
        -webkit-transform: scale(3.5) translate(15px, -14px); 
    -moz-transform: scale(3.5) translate(15px, -14px);
    -o-transform: scale(3.5) translate(15px, -14px);
    transform: scale(3.5) translate(15px, -14px);

}

#img_hover img:hover {
	background:rgba(0,0,0,0.2);
    padding: 2px;
    border-radius: 100px;
}

#img_hover img {
	-webkit-transition: all .3s cubic-bezier(.67,.17,.36,.74);
	-moz-transition: all .3s cubic-bezier(.67,.17,.36,.74);
	-o-transition: all .3s cubic-bezier(.67,.17,.36,.74);
	-ms-transition: all .3s cubic-bezier(.67,.17,.36,.74);
    border-radius: 100px;
    width: 40px;
    height: 40px;
}

/*---------------------
Datepicker
----------------------*/

.datepicker-dropdown.dropdown-menu {
  z-index: 9999999;
    /*min-width: 260px;*/
   padding: 8px 12px !important;
    text-align: center !important;
    border: 1px solid rgba(0,0,0,.1) !important;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.4) !important;
    box-shadow: 0 6px 12px rgba(0,0,0,.4) !important;
     max-width: 222px !important;
 min-width: 222px !important;
 width: 222px !important;

}


.datepicker-dropdown.dropdown-menu .today {
  cursor: pointer;
  font-size: 15px !important;
    color: #ffffff; 
    text-align: center;
    transition: all 300ms ease-in-out;
    background-color: #2d98da;
    border-radius: 100px;
    transform: scale(0.9);
    display: block;
    position: relative;
    top: 1px;


}


.datepicker-dropdown.dropdown-menu .today:hover {

  box-shadow: 0 3px 7px rgba(0,0,0,.3) !important;


}


/*Datepicker Days*/

/*.datepicker .datepicker-days table tbody,
.datepicker .datepicker-days table thead {
    display: block !important;
}*/



.datepicker .datepicker-days .prev,
.datepicker .datepicker-days .next,
.datepicker .datepicker-months .prev,
.datepicker .datepicker-years .prev,
.datepicker .datepicker-months .next,
.datepicker .datepicker-years .next {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle !important;
    background-color: #2d98da;
    color: #fff;
        padding: 0 8px 3px 8px !important;
        border-radius: 100px;
        display: inline;
        transition: 300ms ease-in-out all;
        position: relative;
        top: 4px;
}

.datepicker .datepicker-days th.prev:hover {
 background-color: #45aaf2;
}


.datepicker .datepicker-days th.next:hover {
 background-color: #45aaf2;
}

.datepicker .datepicker-switch {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    vertical-align: middle !important;
    color: #4b6584;
   transition: 200ms ease-in-out all;
   border-radius: 100px;
background-color: #e9edf1;
transform: scale(0.85);
position: relative;
top: -0.5px;  
}
.datepicker .datepicker-switch:hover {
 color: white;
background-color: #45aaf2;
box-shadow: 0px 0.5px 1px 0px rgba(0,0,0,0.2);

 
}

.datepicker .datepicker-days tr .dow {
    cursor: default;
  color: #fff;
  font-size: 13px;
    color: #2d98da;
    border-radius: 5px; 
    text-align: center;
    position: relative;
    padding: 5px 0  !important;

    
}


.datepicker .datepicker-days tr .old.day,
.datepicker .datepicker-days tr .new.day {
    cursor: default;
  color: rgba(0,0,0,.2);
    background-color: white;
   

  
}

.datepicker .datepicker-days tr .old.day:hover,
.datepicker .datepicker-days tr .new.day:hover {
    background-color: rgba(0, 126, 255, 0.2);
    color: #fff;

  
}

.datepicker .datepicker-days tr .day {
    cursor: default;
  color: rgba(0,0,0,.9);
    background-color: white;
    padding: 1px 6px !important;
    transition: transform 300ms;
    border-radius: 100px;
    transform: scale(0.85)
}

.datepicker .datepicker-days tr td.active.day {
    color: white;
    background-color: #fc5c65;
    font-weight: 600;
    transform: scale(0.95);       
}

.datepicker .datepicker-days tr .day:hover {
    background-color: #3498db;
    color: #fff;
    transform: scale(0.9) !important;
  
}


/*Datepicker Months*/


.datepicker .datepicker-months tr td .month {
   cursor: default;
  color: rgba(0,0,0,.9);
    background-color: white;
    transition: transform 300ms;
    border-radius: 100px;
    display: inline-grid;
    padding: 4px 6px; 
    height: 40px !important;
    width: 40px !important;
    line-height: 2.2;
    
}

.datepicker .datepicker-years tr td .year {
   cursor: default;
  color: rgba(0,0,0,.9);
    background-color: white;
    transition: transform 300ms;
    border-radius: 100px;
    display: inline-grid;
    padding: 5px 7px; 
    height: 40px !important;
    width: 40px !important;
    line-height: 2.2;
    text-indent: -3px ;
    
}


.datepicker .datepicker-months tr td .month:hover,
.datepicker .datepicker-years tr td .year:hover {
    color: #fff;
    background-color: #fc5c65;
    transform: scale(0.9) !important;
 
}

.table-condensed>tbody>tr>td, .table-condensed>tbody>tr>th, .table-condensed>tfoot>tr>td, .table-condensed>tfoot>tr>th, .table-condensed>thead>tr>td, .table-condensed>thead>tr>th {
    padding: 7px !important;
}


.pointer
{
    cursor: pointer;


}

/*--------------------------
    Second Level Menu
---------------------------*/

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}


/*--------------
Image Frame Hover buttons
----------------*/
.image-frame{
    position: relative;
    max-width: 160px;
    max-height: 160px;
    border-radius: 100%;  
}

.image-frame .middle-frame {
   position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
   max-width: 100%;
    max-height: 100%;
  opacity: 0;

}


@media only screen and (max-width: 600px) {
    .image-frame{
    left: -40px;
    max-width: 160px;
    max-height: 160px;
}

    .image-frame .middle-frame {
        height: 100px !important;
        width: 100px !important;
         top: 30px !important;
  bottom: 0;
  left: 30px !important;
  right: 0;
    }

    #img_save_btn {
        position: absolute !important;
        left: 8em;
        top: -2em;
    }

}

.image-frame img {
    /*display: block;*/
  width: 100%;
  height: auto;
}

.image-frame .middle-frame {
   position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
   height: 100%;
   width: 100%;
  opacity: 0;
  transition: .3s ease;
  background-color: rgba(0,0,0,0.5);
  border-radius: 100%;
}

.image-frame:hover img {
    opacity: 1;
}

.image-frame:hover .middle-frame {
    opacity: 1;
}

.image-frame .middle-frame .overlay-options {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

.image-frame .middle-frame .overlay-options label i {
  font-size: 26px;
  color: white;
  transform: translateY(100px);
  visibility: hidden;

  transition: transform .2s ease, color .1s ease;
  -o-transition: transform .2s ease, color .1s ease;
  -ms-transition: transform .2s ease, color .1s ease;
  -moz-transition: transform .2s ease, color .1s ease;781`
  -webkit-transition: transform .2s ease, color .1s ease;
  
}

.image-frame:hover .middle-frame .overlay-options label i {
  transform: translateY(0);
  visibility: visible;
    transition: transform .2s ease-out;
  -o-transition: transform .2s ease-out;
  -ms-transition: transform .2s ease-out;
  -moz-transition: transform .2s ease-out;
  -webkit-transition: transform .2s ease-out;
}

.image-frame:hover .middle-frame .overlay-options label i:hover {
  color: #45aaf2;
}



#img_save_btn {
display: none;
transition: all 300ms ease-in-out;

}

.button-save-profile{
        position: absolute;
    top: 110px;
    left: 40px;
    z-index: 10;
    transition: 300ms ease-in-out all;

}



.child--menu-icon {
    font-size: 10px;
    float: right;
    margin-top: 5px;
    margin-right: -10px;

}

.menubar--icon {
    font-size: 10px;
    margin-left: 3px;
    color: #47c4f8;
}


/*-----------
Custom Table for PayGrade
-------------*/

.table .th-paygrade tr th:nth-child(1) {
    width: 10px;
}

.table .th-paygrade + tbody tr td:nth-child(2) {
 cursor: default;  
 
}


.table .th-paygrade tr th:nth-child(3),
.table .th-paygrade + tbody tr td:nth-child(3) {
    width: 300px;
    text-align: center;
}

.table .th-paygrade tr th:nth-child(4),
.table .th-paygrade + tbody tr td:nth-child(4) {
    width: 300px;
    text-align: center;
}

.table .th-paygrade tr th:nth-child(5),
.table .th-paygrade + tbody tr td:nth-child(5),
.table .th-paygrade tr th:nth-child(6),
.table .th-paygrade + tbody tr td:nth-child(6)  {
   width: 100px !important;
    text-align: center !important;
}



.color-active {
    color: #3498db;
}


.paygrade-name {
    font-size: 14px;
    font-weight: bolder;
}


/*-----------
Leave Graph Statistics CSS
------------*/



.statistics .stat-title {
    font-size: 13px;
font-weight: bolder;
text-align: center;
color: #666;

}


/*Progress Bar*/

    .tasks {
        background-color: #fff;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
    }

    .tasks .progress--bar {
            width: 93%;
    margin-left: 13px;
    }

        .tasks span {
            font-weight: bold;
        }

        .tasks input {
            display: block;
            margin: 0 auto;
            margin-top: 10px;
        }

        .tasks a {
            color: #000;
            text-decoration: none;
            border: none;
        }

            .tasks a:hover {
                border-bottom: dashed 1px #0088cc;
            }


            .progress--bar {
    height: 20px;
    margin-bottom: 20px;
    overflow: hidden;
    background-color: #adadad;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}

.col-xs-12.pl-0:nth-child(1) + .progress--bar{
    background-color: #cfe6f5 !important;
}

.col-xs-12.pl-0:nth-child(3) + .progress--bar{
    background-color: #cbfadf !important;
}

.col-xs-12.pl-0:nth-child(5) + .progress--bar{
    background-color: #fce1b7 !important;
}

.col-xs-12.pl-0:nth-child(7) + .progress--bar{
    background-color: #ffdeda !important;
}

                        .progress--bar .progress-bar span {
                            margin-left: 10px;
                            font-size: 9px;
                            text-shadow: 0.5px 0.5px 1px rgba(0,0,0,1);
                            color: #ffffff;
 
}

.progress-bar-blue{
    background-color: #3498db;
}


.progress-bar-green{
    background-color: #2ecc71;
}

.progress-bar-yellow{
    background-color: #f39c12;
}

.progress-bar-red {
    background-color: #e74c3c;
}

.progress--bar .progress-bar {
    animation-name: animateBar;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;
}
@keyframes animateBar {
    0% {transform: translateX(-100%);}
    100% {transform: translateX(0);}
}


@media screen and (max-width: 660px) {
    .container-box.mr-0,
    .container-box.ml-0 {
        margin: 15px !important;
    }
}



/*------------------------
Dashboard Container Boxes
--------------------------*/

/*Upcoming Holiday*/

.container-card .container-header {
 margin: -5px 0px 0px -5px;
     

}

/*COntainer with BOrder */

.container-card .container-header.with-border {
border-bottom: 1px solid rgba(0,0,0,.1);
padding: 15px 15px 10px 20px; 
margin: 0;   

}

.container-header.with-border.svg-add {
    position: relative;
}
/*HINT | Work Anniversary*/

.container-header.with-border.svg-add img {
    position: absolute;
    height: 55px;
    top: -1px;
    overflow: hidden;
    backface-visibility: hidden;
    right: 5px;
    opacity: 0.7;
    transition: opacity 300ms ease-in-out;
}
.container-card:hover .container-header.with-border.svg-add img {

    opacity: 0.9;
}

.container-card .container-header.with-border span {
font-weight: 500 !important;
    
}
.container-card .container-header .container-heading {
 font-size: 17px;
 color: rgba(0,0,0,0.9);
 font-weight: 700;   
}



.cont-note {
    font-size: 10px;
    color: rgba(69, 170, 242,0.5);
    float: right;
    cursor: default;

}
.container-card .container-header .arrow-toggle-left,
.container-card .container-header .arrow-toggle-right {
    float: right;   
}
.container-card .container-header .arrow-toggle-left b,
.container-card .container-header .arrow-toggle-right b {
    font-size: 15px;
   background-color: #e2e2e2;
   color: #b0b0b0;
   padding: 5px;
   margin-left: 2px;
   border-radius: 2px;
   cursor: pointer;
   transition: all ease-in-out 100ms;
}

.container-card .container-body.leave-summary-total .arrow-toggle-left b,
.container-card .container-body.leave-summary-total .arrow-toggle-right b {
    font-size: 15px;
   background-color: #e2e2e2;
   color: #b0b0b0;
   padding: 5px;
   margin: 0px 12px;
   border-radius: 2px;
   cursor: pointer;
   transition: all ease-in-out 100ms;
}

.container-card .container-body.leave-summary-total .leave-summary-month-selector {
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.container-card .container-header .arrow-toggle-left b:hover,
.container-card .container-header .arrow-toggle-right b:hover {
   background-color: #2577ad;
   color: #fff;
   transform: scale(1.05);
   
}
.container-card .container-body.leave-summary-total .arrow-toggle-left b:hover,
.container-card .container-body.leave-summary-total .arrow-toggle-right b:hover {
   background-color: #2577ad;
   color: #fff;
   transform: scale(1.05);
   
}

.container-info-blue {
    background-color: #2980b9;
}

.container-info-green {
    background-color: #3390ce;
}

.container-card .container-body .container-info-blue,
.container-card .container-body .container-info-green {
   padding: 35px 0px;
   margin: 15px -25px -25px -25px;
   height: 175px;
   user-select: none;
}
.container-card .container-body .container-info span {
  color: #fff !important;
  text-align: center;
}
.container-card .container-body .col-sm-6{
  padding: 15px 10px;
}
.container-card .container-body .col-sm-6:nth-child(1) {
  border-right: 1px solid #ffffff;
}
.container-card .container-body .container-info .container-date {
  font-size: 40px;
  display: block;
  font-weight: 400;
}
.container-card .container-body .container-info .container-month {
  font-size: 15px;
  display: block;
  line-height: 40px;
}
.container-card .container-body .container-info .container-day_year {
   line-height: 0px;
  display: block;
}
.container-card .container-body .container-info .container-holiday {
  font-size: 24px !important;
  padding-top: 15px;
  display: block;
  font-weight: 400;
}
.container-card .container-body .container-info .container-holiday-detail {
   line-height: 15px;
  display: block;

}

/*Leave Approvals*/


.button-badge {
  position: relative;
}

.button-badge:hover {
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.badge-dash {
    /*z-index: 99999;*/
  position: absolute;
  top: -15px;
  right: -10px;
  font-size: .8em;
      display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: 10px;
}

.badge-red {
    background-color: #e74c3c;
}


.container-card .container-header .container-see-all {
    float: right;
    margin-right: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: color 200ms ease-in-out;
    text-transform: uppercase;
}

.container-card .container-header .container-see-all:hover {
    color: #2980b9;
}


.container-card .container-body .container-info-message {
   background-color: #d2edff;
   border: 1px solid #aaddff;
   padding: 5px;
   margin: 15px -12px -12px -12px;
  
}

.container-card .container-body .container-userimage {
   width: 35px;
   height: 35px;
   border-radius: 50%;
   margin-top: 6px;
   background-color: #e74c3c;
       padding: 4.5px 10.5px;
       text-align: center;
       position: relative;
       left: -5px;

      
}

@media screen and (min-width: 1024px) {
    .container-card .container-body .container-userimage {

   margin-left: 10px;


      
}
}

.container-card .container-body .container-userimage .user-initials {
    display:block;
    visibility:hidden;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    text-transform: uppercase;

}

.container-card .container-body .container-userimage .user-initials:first-letter {
    visibility:visible;
}

.container-card .container-body .container-username {
    color: #474747;
    padding-left: 10px;
      
}
.container-card .container-body .container-leavetype {
    color: #474747;
   margin-top: -8px;
    padding-left: 10px;   
}
.container-card .container-body .container-leavetype span {
    background-color: #aaddff;
    color: rgba(0,0,0,0.9);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #8ad0fe;
    cursor: default;
}

@media screen and (max-width: 660px) {
    .container-card .container-body .container-leavetype span {
  display: inline-block;
  padding: 0px 10px;
  font-size: 12px;
}
    
}
.container-card .container-body .container-note {
    margin-top: 10px;
    margin-left: -30px;
    color: #474747;
    line-height: 16px;   
}

.container-card .container-body .container-note > span {
     overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}

.container-card .container-body .container-comment {
  margin-top: 15px;
      
}

.container-card .container-body .container-comment textarea{
  text-indent: 5px;
      
}

.container-card .container-body .container-buttons {
  margin-top: 5px;
  float: right;
      
}


/*Calendar*/


.container-calender {
    margin-top: 10px;
    float: right;
    width: 85%;

}
.container-calender .container-calender-header {
    background: linear-gradient(to bottom, #c0392b 0%,#b52929 44%,#a02424 100%);
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    user-select: none;
}
.container-calender .container-calender-header .container-calender-month {
    color: #fff;
}

.container-calender .container-calender-body {
    background-color: #fff;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    height: 77px;
    user-select: none;
    box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}

.container-calender .container-calender-body .container-calendar-date {
    font-size: 18px;
    font-weight: 700;
    word-spacing: 5px;
    line-height: 40px;
}


.container-calender .container-calender-body .container-calendar-day {
    font-size: 12px;
    font-weight: 500;
    word-spacing: 6.5px;
    line-height: 0px;
    margin-bottom: 10px;
}

.container-calender .container-calender-body .container-calendar-count {
    border-top: 1px solid rgba(0,0,0,.1);
   
    font-size: 12px;
    font-weight: 600;
    word-spacing: 0px;

}

.CalendarDayBlock {
    float: left;
    width: 32px;
    padding: 4px;
}  


/*--------------------
Employee Logins | Dashboard
----------------------*/   

.emp-logins .container-body div {
    text-align: center;
    user-select: none;
    padding: 15px;
}  

.employee-login--item span {
 display: block;
 text-align: center;
}  

.employee-login--item span:nth-child(2) {
    font-size: 14px;
 font-weight: 500;
 line-height: 1.3;
 transition: 300ms all ease-in-out;
}  

.employee-login--item span:hover + span:nth-child(2){
    transform: scale(1.1) translate(0px, 15px); 
}  

.employee-login--item span:nth-child(1):hover {
    transform:translate(0px, 5px) rotate(-15deg) scale(1.3); 
}




.employee-login--item .te,
.employee-login--item .ip,
.employee-login--item .rni{
   border-radius: 100%;
   border: 6px solid #d1d8e0;
   width: 86px;
   height: 86px;
   text-align: center;
   margin: 0 auto;
   font-weight: 600;
   font-size: 18px;
   line-height: 4;
   margin-bottom: 10px;
   transition: all 300ms ease-in-out !important;
       color: #778ca3;
}

.employee-login--item .te{
    border-color: #26de81;
} 

.employee-login--item .ip{
    border-color: #45aaf2;
} 

.employee-login--item .rni{
    border-color: #fed330;
}    

.employee-login--item .te:hover
{
    background-color: #26de81;
    color: white;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}  

.employee-login--item .ip:hover {
    background-color: #45aaf2;
    color: white;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
}


.employee-login--item .rni:hover {
    background-color: #fed330;
    color: white;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.6);
    
}



    /*---------------------------- */
   /*  Leave Attendance Summary   */
  /*-----------------------------*/


/*Page = ManualAttendance*/



.page--dragtable {
    width: 100% !important;
    overflow: hidden;
    overflow-x: auto !important;
}


.page--dragtable .table-leave-summary tbody tr td:not(:first-child) {
    min-width: 32px !important;
    max-width: 32px !important;
    width: 32px !important;
}

.page--dragtable .table-leave-summary tbody tr td:first-child {
    min-width: 12.5em !important;
    max-width: 12.5em !important;
    width: 12.5em !important;
}




.page--dragtable tbody {
overflow-y: auto;
  overflow-x: hidden;
  display: block;
  height: auto;
  /*margin-left: 150px;*/
}
.height500 {
    height: 500px !important;
}

.page--dragtable thead {
    display: block;
    position: relative;
}


@media only screen and (max-width: 660px) {
    .page--dragtable thead tr th:nth-child(1),
.page--dragtable tbody tr td:nth-child(1) {
    left: 0 !important;
}
}



/*Page = LeaveSummary*/



.page---LeaveSummary {
    width: 98.1% !important;
}

@media only screen and (min-width:880px) {
table .header-fixed {
  position: absolute;
  z-index: 2; /* 10 less than .navbar-fixed to prevent any overlap */
  top: 0;
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
  -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 8px rgba(0,0,0,.25);
     -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 8px rgba(0,0,0,.25);
          box-shadow: inset 0 1px 0 #fff, 0 1px 8px rgba(0,0,0,.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */
}

.page---LeaveSummary {
    margin-top: 7.3em !important;
}  
}

@media only screen and (max-width: 660px) {
    .table-leave-summary--border {
        overflow: auto !important;
    }
}

@media (min-width: 992px) {
.legend .col-md-2 {
    width: 13.66666667% !important;
}

.legend {
   text-align: center;
}
}

.icons-LeaveSummary.fa-calendar-o {
    color: #fa8231;
}

.icons-LeaveSummary.fa-dot-circle-o {
    color: #20bf6b;
}



/*** Page LeaveSummary End ***/

  .table-leave-summary--border {
      max-height: 350px;
  }
  .table-leave-summary {
      margin-left: 10px;
      
  }
  
    .table-leave-summary thead tr th,
    .table-leave-summary tbody tr td {
      border: 1px solid #cdd4d8 !important;   
  }
    .table-leave-summary thead tr:nth-child(1) th:not(:first-child) {
      
      background-color: #f3f7f8;
      color: rgba(0,0,0,0.9);  
      font-weight: bolder;
      text-align: center; 
      font-size: 12px;
      /*width: 100px;*/
      z-index: 10 !important;
      
  }

        .table-leave-summary thead tr:nth-child(2) th:not(:first-child) {
      color: rgba(0,0,0,0.9);  
      font-weight: 600;
      text-align: center; 
      font-size: 11px;
      background-color: white;
   

  }

                .table-leave-summary tbody tr td:not(:first-child) {
      color: inherit !important;
      text-align: center !important; 
      transition: 100ms box-shadow ease-in-out;
      padding: 0px;
      max-width: 2.45em !important;
    min-width: 2.45em !important; 
    height: 30px !important;
  

      
  } .table-leave-summary tbody tr td:not(:first-child) span {
       transition: 100ms transform ease-in-out;
       text-align: center !important;
       /*margin-left: 5px;*/
       user-select: none;
      
  }

.table-leave-summary tbody tr td:not(:first-child):hover span {
      transform: scale(1.6);

      
  }

.table-leave-summary tbody tr td:not(:first-child):hover{
      box-shadow: 0px 3px 2px 0px rgba(0,0,0,0.3);
      
  }

.table-leave-summary thead tr th:first-child {min-width: 150px !important; max-width: 150px !important;}

.table-leave-summary thead tr th:not(:first-child) {
    max-width: 32px !important;
    min-width: 2.65em !important; 
    height: 30px !important;
    padding: 0px;
    z-index: 2 !important;

}


 .table-leave-summary thead tr:nth-child(1) th:first-child,
  .table-leave-summary thead tr:nth-child(2) th:first-child,
  .table-leave-summary tbody tr td:first-child {
    background-color: #ecf0f1;
    color: rgba(0,0,0, 0.8) !important;
    font-weight: 700;
    text-align: left;
    z-index: 2 !important;
    left: 0;

}


 .table-leave-summary thead tr:nth-child(3) th:first-child,
 .table-leave-summary tbody tr td:first-child {
    text-indent: 10px;
}


.table-leave-summary thead tr:nth-child(3) th:first-child {
    background-color: #2980b9;
    color: #fff;
    font-weight: 600;
}


  .table-leave-summary>thead>tr>th,
  .table-leave-summary>tbody>tr>td {
    line-height: 1 !important;
 
}


/*Legend Customization*/


@media screen and (min-width: 768px) {
    .leave-summary-total .leave-summary-total--choose-calender {
        float: left;
        margin-top: 50px;
    }
        .leave-summary-total .legend {
                
                     float: right
                    }

}


@media screen and (max-width: 660px) {
.leave-summary-total--choose-calender {
        padding: 10px !important;
    text-align: center !important;
    }
}


 .leave-summary-total .table-leave-summary {
    margin-bottom: 0 !important;
    margin-top: 7px;

}


.leave-summary-total .legend span.fa {
    font-size: 17px;

}

 .leave-summary-total .table-leave-summary tbody tr td span.fa {
    font-size: 15px;

}

                    .leave-summary-total .legend span.fa-ban,
                    .leave-summary-total .table-leave-summary tbody tr td span.fa-ban { 
                    color: #e74c3c !important;
                    }
                    .leave-summary-total .legend span.fa-ban.paid,
                    .leave-summary-total .legend span.fa-minus-circle,

                    .leave-summary-total .table-leave-summary tbody > tr > td > span.fa-ban.paid,
                    .leave-summary-total .table-leave-summary tbody > tr > td > span.fa-minus-circle {
                    color: #3498db !important;
                    }

                    .leave-summary-total .legend span.fa-check-circle.paid,
                    .leave-summary-total .table-leave-summary tbody tr td span.fa-check-circle.paid {
                    color: #3498db !important;
                    }
                    .leave-summary-total .legend span.fa-check-circle,
                    .leave-summary-total .legend span.fa-times-circle,
                     .leave-summary-total .table-leave-summary tbody tr td span.fa-check-circle,
                    .leave-summary-total .table-leave-summary tbody tr td span.fa-times-circle {
                    color: #e74c3c !important;
                    }
                    .leave-summary-total .legend span.total-leaves,
                    .leave-summary-total .table-leave-summary thead tr th span.total-leaves,
                    .leave-summary-total .table-leave-summary tbody tr td span.total-leaves {
                    color: #d35400 !important;
                    }
                    .leave-summary-total .legend span.con-leaves,
                    .leave-summary-total .table-leave-summary thead tr th span.con-leaves,
                    .leave-summary-total .table-leave-summary tbody tr td span.con-leaves {
                    color: #16a085 !important;
                    }
                     .leave-summary-total .legend span.fa-exclamation-triangle,
                     .leave-summary-total .table-leave-summary tbody tr td span.fa-exclamation-triangle {
                    color: #d35400 !important
                    }
                     .leave-summary-total .legend span.fa-user.holiday,
                     .leave-summary-total .table-leave-summary tbody tr td span.fa-user.holiday {
                    color: #3498db  !important;
                    }

           
                     
/*-----------------------------
    Employee Information Modal
-------------------------------*/ 

.emp-info--heading {
    background-color: #2980b9;
    color: #fff;
    text-indent: 15px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 5px;
}

.emp-info--heading:nth-child(1) {
 margin-top: -10px;
}





/*-----------------
Polls
------------------*/

.PollQuestion .poll-heading {
     border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-bottom: 10px;
}

.PollQuestion .poll--question span {
    color: rgba(0,0,0,0.9);
    font-size: 16px;
    font-weight: 600;
    padding: 5px 0px 3px 0px;
    line-height: 30px;
}

.poll--question---total {
    float: right;
}

.PollQuestion .checkbox-cs-radio {
  background-color: rgba(0,0,0,0.05);
  border-radius: 5px;
  padding: 3px 30px;
  transition: all 150ms ease-in-out;

}

.PollQuestion .checkbox-cs-radio:hover {
  background-color: rgba(0,0,0,0.08);
  box-shadow: 0px 2px 0px rgba(0,0,0,0.15);
  transform: translate(0px, -2px)

}

.PollQuestion .checkmark-radio {
  left: 7px;
  top: 7px

}

.poll--answers--list span:nth-child(1) {
   font-weight: 600;
   color: rgba(0,0,0,.9);
}


.poll--answers--list span:nth-child(2) {
    float: right;
}

.poll-null-container {
    text-align: center;
    padding-top: 4em;
    height: 313px;
}

.poll-null--text {
    font-size: 28px;
    color: rgba(0,0,0,.9);
    padding-top: 4rem;
    line-height: 4rem;
}

.poll-create--text {
    font-size: 24px;
    color: rgba(0,0,0,.6);
    
}
.poll-create--btn {
    padding: 30px;
    transition: 300ms ease-in-out transform;
}

.poll-create--btn svg {
    transition: 100ms ease-in-out transform;
    cursor: pointer;
}

.poll-create--btn svg:hover {
    transform: scale(1.1)
}


/*---------------------
Container Announcements
-----------------------*/

.container-announcments {
 position: relative  
}

.container-announcments .container-announcments--heading {
  line-height: 20px;
    border-bottom: 1px solid #ecf0f1;
    margin-top: 15px;
    cursor: default;


}

.container-announcments .container-announcments--heading  span{
    font-weight: 600;
    color: #7f8c8d;
    background-color: #ecf0f1;
    padding: 3px 10px;
    text-align: center;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;

}

.container-announcments .container-announcments--description {
    margin-top: 5px;
    cursor: default;
    height: 200px;
}

/*.container-announcments:hover .container-announcments--properties {
    bottom: 25px;
     border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 border-bottom: 3px solid #3392d1;
 box-shadow: 0px 2px 5px rgba(0,0,0,0.3)

}*/





.container-announcments .container-announcments--properties {
    border-top: 3px solid #3392d1;
    background-color: #3498db;
    color: #fff;
    padding: 0px 10px;
    float: right;
 border-top-right-radius: 5px;
 border-top-left-radius: 5px;
 user-select: none;
 transition: all 300ms ease-in-out;
 /*transform: translate(0px, 0px);*/
 /*margin-top: 3.4em;*/
     position: absolute;
    bottom: 1px;
    right: 2px;
    z-index: 10 !important;
    font-size: 10px;
}



}

.container-announcments--description:hover + .container-announcments--properties {


 transform: translate( 0px, -25px);
  border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
 box-shadow: 0px 3px 4px rgba(0,0,0,0.3);


}


.container-announcments .container-announcments--properties span:nth-child(2) {
    margin-right: 5px;

}


.container-announcments .container-announcments--properties span:nth-child(3) {
    margin-left: 5px;

}


.container-announcments .container-announcments--properties span:nth-child(2) b {
    margin: 0 5px;
    font-size: 9px;  


}



/*--------------------------
     Page Announcements
----------------------------*/

.annc-head {
    padding: 2px 10px;
    margin-top: -10px;
    margin-left: -7px;
    margin-right: -7px;
    border-radius: 0px;
    border-bottom: 2px solid #45aaf2;
    background-color: #4b6584;

}

.annc--subject {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 1px;
    cursor: default;
}

.annc--postdate {
    float: right;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 1px;
    cursor: default;

}

.annc-body p {
    word-break: break-all;
    margin: 5px 0 -15px 0;
    line-height: 2rem;
}

.toggle--switches {
    float: right;
}

.btn-circle {
    margin: 0 6px 0 0;
  width: 18px;
  height: 18px;
  text-align: center;
  padding: 1px 0;
  font-size: 9px;
  line-height: 1.42;
  border-radius: 15px;
}


/*Polls*/


.poll--items {
    position: relative;
}
.poll--items .poll--icon {
    position: absolute;
    padding: 0 5px 0 5px;
    font-size: 7px;
    color: #fd9644;
    

}

.poll--items .poll--answers {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0,0,0,0.7);
    margin-left: 15px;

}

/*------------------------
    Payroll Dashboard Boxes
--------------------------*/


/*.row.container-card.payroll_custom {
    padding: 0px 0px 0px 0px !important;
}*/

.colored-box {
    margin: 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    user-select: none;
    background-color: #a5b1c2;
}

.colored-box .colored-box--body {
    padding: 15px 0 15px 0;
    
}

.colored-box .colored-box--footer span {
    font-size: 15px;
    font-weight: bolder;
    text-transform: uppercase;
    letter-spacing: 1px;
    
}

.colored-box .colored-box--body span {
    font-size: 20px;
    text-transform: uppercase;
    display: block;
    font-weight: 300;
}

.colored-box .colored-box--body span:nth-child(1) {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: 1px;
}

.colored-box .colored-box--footer {
    background-color: rgba(0,0,0,0.1);
    padding: 5px 0 5px 0;
}


.box-activate.box-active {
    margin-top: -14px;
    margin-left: -8px;
    margin-right: -8px;
}

#Highlight {
    margin: 0;
    padding: 2px;
    
}


/*Payroll Popup*/

@media only screen and (max-width: 660px) {
    .payrolltotalrecords {
   text-align: center;
    float: none !important;

}
    .payrollexportbtn {
        margin: 10px 0;
    }
}
.payrolltotalrecords {
    position: relative;
    float: left;
    padding: 2px 8px;
    background-color: #fc5c65;
    border-radius: 3px; 
    color: #fff;
     font-size: 14px;
}
.payrolltotalrecords span {
    
    font-weight: 400;
    
}

/*--------------------------------
    AnyCharts
----------------------------------*/

.anychart-credits {
    display: none;
}

g#ac_layer_1a text{
    font-weight: 600;

}

/*-----------------------
QuickView Boxes Dashboard
------------------------*/


/*Boxes 1-4*/
.quick-view-container {
    display: grid;
    cursor: default;
    height: 160px;
}


.quick-view-container > .quick-view-container--box > .faIcon i {
    padding: 8px 12px;
    font-size: 3.6em;
    color: #fff;
}

.quick-view-container > .quick-view-container--box > .Counter {
    padding: 15px 7px;
    float: right;
    color: #fff;
    font-size: 2.2em;
    font-weight: 600;
}

.quick-view-container > .quick-view-container--box > .qvInfo {
    padding-right: 10px;
    margin-left: 2rem;
    line-height: 1.5rem;
    letter-spacing: 0.5px;
    text-align: right;
    color: #fff;
    font-size: 13px;
}

.quick-view-container > .quick-view-box--bottombar {
    border-top: 3px solid rgba(0,0,0,0.1);
    background-color: rgba(255,255,255,0.95);
    padding: 5px 10px;
    margin-top: 10px;
    user-select: none;
  cursor: pointer;
}


.quick-view-container > .quick-view-box--bottombar > .qvClickable-Icon {
  float: right;
  font-size: 15px;
}

.quick-view-container > .quick-view-box--topbar {
    background-color: #4b6584;
    padding: 2px 10px;
}

.quick-view-container > .quick-view-box--topbar > .qv-Heading {
    font-size: 14px;
    font-weight: 600;
    color: white;
}

.quick-view-container > .quick-view-container--box {
   padding: 10px 5px 5px 0;
}


/*Box 5 -- 6*/

.quick-view-container > .quick-view-container--box.QA {
   padding: 20px 10px;
}


.quick-view-container > .quick-view-container--box > .qv-quick-access-btn:nth-child(1) {
    float: left;
    width: 50%;
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-btn:nth-child(1) .rounded-btn {
 border-radius: 100%;
 padding: 10px 9px;
 text-align: center;
}


.quick-view-container > .quick-view-container--box > .qv-quick-access-btn:nth-child(2) {
    float: right;
    width: 50%;
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info:nth-child(1) {
    float: left;
    width: 33%;
}


.quick-view-container > .quick-view-container--box > .qv-quick-access-info:nth-child(2) {
    float: right;
    width: 33%;
}
.quick-view-container > .quick-view-container--box > .qv-quick-access-info:nth-child(3) {
    float: right;
    width: 33%
}


.quick-view-container > .quick-view-container--box > .qv-quick-access-btn i {
 border-radius: 100px;
 font-size: 2rem;
 margin-left: 2.5px;


}

.quick-view-container > .quick-view-container--box > .qv-quick-access-btn:nth-child(2) i {
margin-left: 0;
margin-right: 2px;
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-btn .rounded-btn {
 border-radius: 100%;
 padding: 10px;
 text-align: center;
}


.quick-view-container > .quick-view-container--box > .qv-quick-access-btn,
.quick-view-container > .quick-view-container--box > .qv-quick-access-btn span {
 display: block;
 text-align: center;

}



.quick-view-container > .quick-view-container--box > .qv-quick-access-btn span {
    font-size: 12px;
    user-select: none;
    line-height: 1.5rem;
    margin-top: 5px;
  
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-btn .rounded-btn:hover + span{
    color: #3498db;
}


/*Box 6*/


.quick-view-container > .quick-view-container--box > .qv-quick-access-info .m-percentage,
.quick-view-container > .quick-view-container--box > .qv-quick-access-info .f-percentage {
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    margin-left: 5px;
    margin-bottom: 5px;

}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .m-icon,
.quick-view-container > .quick-view-container--box > .qv-quick-access-info .f-icon,
.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon {
    text-align: center;
    font-size: 3.5em;
    padding: 5px;
    text-shadow: 0px 0px 1px rgba(0,0,0,0.3);
  
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .m-icon {
    color: #0984e3;
    transition: transform 300ms ease-in-out;
    
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .m-icon:hover,
.quick-view-container > .quick-view-container--box > .qv-quick-access-info .f-icon:hover {
    transform: scale(1.2);
    
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon:hover .fa-male,
.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon:hover .fa-female {
    transform: scale(1.2);
    
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .f-icon {
    color: #fd79a8;
    transition: transform 300ms ease-in-out;
}


/*.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon {
    position: absolute; 
}*/


.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon .fa-male {
    color: #0984e3;
    transition: transform 300ms ease-in-out;
    clip-path: inset(0px 13px 0px 0px);
    margin-left: 10px;
    
}

.quick-view-container > .quick-view-container--box > .qv-quick-access-info .mf-icon .fa-female {
    color: #fd79a8;
    transition: transform 300ms ease-in-out;
    margin-left: -31px;
    clip-path: inset(0px 0px 0px 18px);
}


/*------------------
Yearly Table
--------------------*/

.yearly-legend {
    padding-top: 2em;
}

.yearly-legend div {
    padding: 10px;
}

.yearly-legend div i {
    margin-right: 5px;
    font-size: 16px;

}

.pubholiday {
    color: #3498db;
}


td:hover .yearlyLeaveTypes {
    transform: scale(1.5);
    transition: 100ms ease-in-out transform;
}

.eleave {
     color: #e67e22;
}
/*------------------
Yearly Table Leave types
--------------------*/
.emedical {color: #20bf6b}
.ecasual {color: #fa8231}
.eannual {color: #eb3b5a}
.ematernity {color: #fd79a8}
.epeternity {color: #45aaf2}

.table.yearly {
    width: auto;
}
@media screen and (min-width: 1400px) {
    .table.yearly {
    width: 100%;
}

}

.table .yearly-tbody tr td:nth-child(1){
    min-width: 50px !important;
    max-width: 50px !important;
    text-align: center;
    background-color: rgba(0, 126, 255, 0.05);
    
}

.table .yearly-thead tr th,
.table .yearly-tbody tr td{
    min-width: 30px !important;
    max-width: 30px !important;
    text-align: center;
    padding: 5px !important;
}

.yearly-hover--bg {
    background-color: rgba(254, 211, 48,0.2)
}

.yearly-hover--bg-aqua {
    background-color: rgba(43, 203, 186,0.2)
}

.yearly-hover--bg-green {
    background-color: rgba(38, 222, 129,0.2)
}

.yearly-hover--bg-blue {
    background-color: rgba(69, 170, 242,0.2)
}

.yearly-hover--bg-purple {
    background-color: rgba(165, 94, 234,0.2)
}

.yearly-hover--bg-red {
    background-color: rgba(252, 92, 101,0.2)
}

.yearly-hover--bg-orange {
    background-color: rgba(253, 150, 68,0.2)
}


/*------------------------
  Leave Deduction Rules
-------------------------*/

.policy-question {
    padding: 5px;
}

.policy-question div:nth-child(1) p {
    color: rgba(0,0,0,0.9);
    font-weight: 600;

}


.policy-question div:nth-child(3) p {
     color: rgba(149, 165, 166,1.0);
     font-size: 10px;
    line-height: 2.55rem !important;
}

.policy-question i {
   color: rgba(149, 165, 166,1.0);
   font-size: 14px;
}

.policy-question-radio--desc {
    font-weight: 500;
}

.policy-question--deduct-rules {
   padding: 10px 0 20px 0;
}

.policy-question--deduct-rules span {
    font-weight: 600;
    font-size: 14px;
}


.policy-question--deduct-rules select {
   border-radius: 5px;
   padding: 3px;
   margin: 0 10px;
}


/*-------------------
    Scrollbar - - - -
-------------------*/


/*Google Chrome Custom Scrollbar: Default*/


/* width */
::-webkit-scrollbar {
    width: 8px;
     transition: all 0.3s ease-in-out !important;
     height: 8px;
     border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; 
}

/* Track */
::-webkit-scrollbar-track {
    background: #d1d8e0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; 
   

   
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    background: #a5b1c2;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px; 
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px; 
    
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #778ca3 
    
}


.fixed-height
{
    height: 400px;
    /*overflow-y: auto;*/
}

.fixed-height-chart
{
    height: 320px;
    /*overflow-y: auto;*/
}

/*.scroll-bar-wrap {
  position: relative !important;

}
.scroll-box {
  overflow-y: scroll;
}
.scroll-box::-webkit-scrollbar {
  width: .4em; 
}
.scroll-box::-webkit-scrollbar,
.scroll-box::-webkit-scrollbar-thumb {
  overflow:visible;
  border-radius: 4px;
}
.scroll-box::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.2); 
}
.cover-bar {
    position: absolute;
    background: #fff;
    height: 100%;
    top: 0px;
    right: 0px;
    width: .4em;
    -webkit-transition: all .5s;
    opacity: 1;
}

.scroll-bar-wrap:hover .cover-bar {
   opacity: 0 !important;
  -webkit-transition: all .5s;
}*/


.modal-dialog.animated {
    animation-duration: 0.3s !important;
}

.fast-animation {
    animation-duration: 0.5s !important;
}

/* --------------
    star rating
----------------*/


pre {
display: block;
padding: 9.5px;
margin: 0 0 10px;
font-size: 13px;
line-height: 1.42857143;
color: #333;
word-break: break-all;
word-wrap: break-word;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
}

.success-box {
  margin:20px 0 15px 0;
  padding:10px 10px;
  border:1px solid #eee;
  background:#f9f9f9;
}

.success-box img {
  margin-right:10px;
  display:inline-block;
  vertical-align:top;
}

.success-box > div {
  vertical-align:top;
  display:inline-block;
  color:#888;
}

/*Rating Value Style*/

.ratingValue {
    margin: 0 8px 0 2px;
    background-color:#2d98da;
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 2px;
}

/* Rating Star Widgets Style */
.rating-stars ul {
  list-style-type:none;
  padding:0;
  
  -moz-user-select:none;
  -webkit-user-select:none;
}
.rating-stars ul > li.star {
  display:inline-block;
  
}

/* Idle State of the stars */
.rating-stars ul > li.star > i.fa {
  font-size:1.5em; /* Change the size of the stars */
  color:#ccc; /* Color on idle state */
}

/* Hover state of the stars */
.rating-stars ul > li.star.hover > i.fa {
  color:#FFCC36;
}

/* Selected state of the stars */
.rating-stars ul > li.star.selected > i.fa {
  color:#FF912C;
}

    .rating-stars ul > li.star.selected-starskill > i.fa {
        color: #FF912C;
    }


/*-------------------
    AbsentRate Style
-------------------*/



.absent-rate-container-1{
  width: 50%;
  float: left;
  text-align: center;
  padding-top: 10px
   
}

.absent-rate-container-2{
  width: 50%;
  float: right;
  padding-top: 10px

   
}

.absent-rate-container-2 span{
  display: block;

   
}


    .absent-rate-container-2 span input {
        background: transparent;
        border: none;
        font-size: 2.5em;
        text-indent: 2rem;
        font-weight: 600;
        letter-spacing: 2px;
        width: 100%;
    }

 



/*-----------------------------------
    Circle View @ Payroll Dashboard
-------------------------------------*/

.circle-view {
    cursor: default;
    user-select: none;
    max-height: 12em;
    max-width: 12.5em;
    min-height: 12em;
    min-width: 12.5em;
    /*padding: 4em 1em 4em 1em;*/
    margin: 15px;
    border-radius: 100%;
    border: 5px solid #e3e7e8;
    background-color: #ffffff;
    color: rgba(0,0,0,0.6);
    text-align: center;
    padding-top: 25px;
    transition: all 100ms ease-in-out;
}

.circle-view:hover {
    transform: translateY(-5px);
   background-color: rgba(0,0,0,.05);
   box-shadow: inset 0px -1px 10px rgba(0,0,0,0.05), 0px 3px 7px rgba(0,0,0,0.2);
    border-color: #26de81;
    cursor: pointer;
 
}

.circle-view:active {
    box-shadow: 0px 1px 7px rgba(0,0,0,0.2);
   transform: translateY(0px);
 
}

.borderGreen {
    border-color: #26de81 !important;
}

.circle-view  span{
  display: block;
}

.circle-view .cv-icon svg {
    width: 42px;
    height: 42px;
    margin: 0 auto;

}

.circle-view .cv-title {
    font-size: 10px;
    line-height: 0.5;
    font-weight: bolder;
    /*text-transform: uppercase;*/
}

.circle-view .cv-data {
    font-size: 13px;
    color: #3498db
   

}


/*ICONS COLORS*/

/*EOBI*/

.circle-view .cv-icon .EOBI path:nth-child(1) {
   fill:#16a085;
}

.circle-view .cv-icon .EOBI path:nth-child(2) {
   fill: #16a085;
}

.circle-view .cv-icon .EOBI path:nth-child(3) {
   fill: #d28e1e;
}

/*Internet Allowance*/

.circle-view .cv-icon .internetallowance path:nth-child(1) {
   fill: #2ecc71;
}


/*Mobile Allowance*/

.circle-view .cv-icon .mobileallowance path:nth-child(2) {
   fill: #34495e;
}

/*Fuel Allowance*/

.circle-view .cv-icon .fuelallowance {
    position: relative;
    left: 5px;
}

/*MobICONS*/

.circle-view .cv-icon .mobileallowance path:nth-child(1) {
   fill: #27aae1;
}

.circle-view .cv-icon .mobileallowance path:nth-child(3) {
   fill: #e74c3c;
}

.circle-view .cv-icon .mobileallowance path:nth-child(5) {
   fill: #706fd3;
}

.circle-view .cv-icon .mobileallowance path:nth-child(4) {
   fill: #ff793f;
}

.circle-view .cv-icon .mobileallowance path:nth-child(6) {
   fill: #33d9b2;
}

.circle-view .cv-icon .mobileallowance path:nth-child(8) {
   fill: #ffb142;
}

.circle-view .cv-icon .mobileallowance path:nth-child(7) {
   fill: #227093;
}

.circle-view .cv-icon .mobileallowance path:nth-child(9) {
   fill: #ffda79;
}

.circle-view .cv-icon .mobileallowance circle {
   fill: #2d3e4e;
}

/*Provident Fund*/

.circle-view .cv-icon .providentfund path:nth-child(2) {
   fill: #f0beb9;
}

.circle-view .cv-icon .providentfund circle:nth-child(1){
   fill: #f59e96;
}

.circle-view .cv-icon .providentfund path:nth-child(3) {
   fill: #f5dcda;
}



/*500*/
.circle-view .cv-icon .providentfund path:nth-child(1) {
   fill: #70bb83;
}


.circle-view .cv-icon .providentfund path:nth-child(5){
   fill: #70bb83;
}

.circle-view .cv-icon .providentfund path:nth-child(6){
   fill: #70bb83;
}

.circle-view .cv-icon .providentfund path:nth-child(7){
   fill: #70bb83;
}

.circle-view .cv-icon .providentfund circle:nth-child(4),
.circle-view .cv-icon .providentfund circle:nth-child(2){
   fill: #6ab07c;
}

.circle-view .cv-icon .providentfund ellipse{
   fill: #cbe1d0;
}

/*Salary*/

.circle-view .cv-icon .salary path:nth-child(1){
   fill: #70bb83;
}

.circle-view .cv-icon .salary path:nth-child(7){
   fill: #cbe1d0;
}

.circle-view .cv-icon .salary circle{
   fill: #70bb83;
}


.circle-view .cv-icon .salary path:nth-child(5),
.circle-view .cv-icon .salary path:nth-child(10),
.circle-view .cv-icon .salary path:nth-child(13){
   fill: #2d98da;
}

.circle-view .cv-icon .salary path:nth-child(9)
{
   fill: #ffb142;
}

.circle-view .cv-icon .salary polygon
{
   fill: #ffb142;
}

/*Tax Deductions*/

.circle-view .cv-icon .taxdeduction path:nth-child(2){
   fill: #c6cdd2;
}

.circle-view .cv-icon .taxdeduction path:nth-child(1){
   fill: #e74c3c;
}

/*Tax Deductions*/

.circle-view .cv-icon .transportcharges path:nth-child(2){
   fill: #95a5a6
}

.circle-view .cv-icon .transportcharges path:nth-child(1){
   fill: #95a5a6
}

.circle-view .cv-icon .transportcharges path:nth-child(3){
   fill: #70bb83;
}


/*Total Employee Salary*/

.circle-view .cv-icon .totalsalary path:nth-child(2),
.circle-view .cv-icon .totalsalary path:nth-child(3),
.circle-view .cv-icon .totalsalary path:nth-child(4){
   fill: #33d9b2;
}

.circle-view .cv-icon .totalsalary path:nth-child(1){
   fill: #57b8e2;
}



/*----------------
    Payslip
----------------*/

.payslip-header {
    text-align: center;
    padding-top: 10px;
}

.payslip-heading{
   font-size: 16px;
   font-weight: 600;
   color: rgba(0,0,0,0.7);
   padding: 0 10px;
   margin-top: 15px;
}

.payslip-heading--text{
   font-size: 14px;
   font-weight: 500;
   color: rgba(0,0,0,0.7);
   padding: 0 10px;
   
}


/*Summary*/

.payslip-summary-title {
    border: none;
    color: #34495e;
    font-weight: 500;
}

@media only screen and (max-width:660px) {
    .payslip-summary-title {
   display: none;
}
  .payslip-recordno {
      position: relative;
      top: 80px;
      left: 40%;
      right: 50%;
  }
}

.payslip-summary-data {
      border: none;
    color: rgba(0,0,0,.7);
    font-size: 13px;
    font-weight: 400;
    width: 200px;
    text-indent: 5px;
}

.payslip-recordno {
    position: absolute;
    right: 20px;
    color: #3498db;
}


.payslip-table-summary {
      margin-bottom: 20px;
      margin-left: 20px;
}

.payslip-table-summary thead tr th {
  line-height: 2.2em;  
}

.payslip-table-summary thead tr th svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-top: -6px;
    margin-right: 5px;
}

@media print {
    .payslip-table-summary thead tr th svg {
    display: none;
}

  @page { margin: 0; }

       .print-border-none {
      border-color: #ffffff !important;

  }
       .payslip-table thead tr th {
    background-color: #ccc !important;
    color: #000;
    text-align: center;
}
       .payslip-table thead tr th:nth-child(1) {
    min-width: 400px !important;

}

              .payslip-table tbody tr td:nth-child(2) {
    text-align: right !important;

}

              /*.payslip-notes p:nth-child(1) {
    
    line-height: 15px !important;
}*/
 
}

.payslip-table {
    border: 1px solid #ddd;
}

.payslip-table thead tr th {
    background-color: #2a7fb9;
    color: white;

}

.payslip-table thead tr  {
    border-top: 1px solid #2a7fb9 !important;

}

.payslip-table tbody tr td  {
    padding: 3px 5px !important;

}

.payslip-notes-heading {
    font-weight: 600;
    color: rgba(0,0,0,0.9);
    text-decoration: underline; 
}

.payslip-notes {
    padding-left: 4rem;
    line-height: 8px;
    color: rgba(0,0,0,0.8);
    font-weight: 500;
    font-size: 10px;
    padding-bottom: 15px;
}


/*-----------------------------------------
   Create Payroll Table | _PayrollSummary
-------------------------------------------*/


.generate-payroll-th tr th:nth-last-child(1),
.generate-payroll-tb tr td:nth-last-child(1) {
    min-width: 130px !important;
    text-align: right !important;
}



/*----------------------------
    Probation Question Group
-----------------------------*/

.pqg-th tr th:nth-child(2) {
    max-width: 150px !important;
    min-width: 150px !important;
}

.pqg-th tr th:nth-child(4) {
    max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}


/*Add Edit Paygrade Allowance*/

.paygrade-allowance-th tr th:nth-child(1) {
     max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
}
.paygrade-allowance-th tr th:nth-child(2),
.paygrade-allowance-th tr th:nth-child(3),
.paygrade-allowance-th tr th:nth-child(4),
.paygrade-allowance-th tr th:nth-child(5),
.paygrade-allowance-th tr th:nth-child(6) {
     max-width: 80px !important;
    min-width: 80px !important;
    width: 80px !important;
}


.paygrade-allowance-th tr th:nth-child(7) {
     max-width: 200px !important;
    min-width: 200px !important;
}

.paygrade-allowance-tb td:nth-last-child(1) {
    text-align: center;
}


/*Paygrade Deduction*/

.paygrade-deduction-th tr th:nth-child(1) {
     max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
}
.paygrade-deduction-th tr th:nth-child(2) {
     max-width: 80px !important;
    min-width: 80px !important;
    width: 80px !important;
}

.paygrade-deduction-th tr th:nth-child(5) {
     max-width: 150px !important;
    min-width: 150px !important;
    width: 150px !important;
}

.paygrade-deduction-th th:nth-child(6) {
    max-width: 100px !important;
    min-width: 100px !important;
    width: 100px !important;
}

.paygrade-deduction-tb td:nth-last-child(1),
.paygrade-deduction-tb td:nth-child(6) .checkbox-cs {
    text-align: center;
    margin-left: 3rem;
    margin-top: 1.5rem;
}



/*Notifications*/

.dropdown-container-notification {
  
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    min-width: 300px;
    overflow: auto;
    box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.4);
    z-index: 1;
    right: 0;
    top: 2.8em;
}


.dropdown-notification {
    position: absolute !important;
   right: 2.8em;
   top: 1.4em;


}
.user-name {
    position: relative;
    top: -0.6em;
    color: #4b6584;
    font-size: 10px;
    text-transform: uppercase;
    margin-left: 15px;
    cursor: default;
    pointer-events: none;
   
}

.single-notification {
    transition: 200ms ease-in-out all;
}

.single-notification:hover {
    background-color: #dfe4ea;
}


.notifications {
    position: relative;
    font-size: 17px;
    text-decoration: none;

}

.notifications:hover {
    color: transparent;

}

.notifications .glyphicon-bell {
    font-size: 16px !important;
    color: #e2a21d;
    
}


.notification-counter {
    text-align: center;
    position: absolute;
    top : -8px;
    right: -3px;
    font-size: 8px;
background-color: #e74c3c;
border-radius: 100%;
height: 17px;
width: 17px;
line-height: 1.8;
color: white !important;
border: 1.5px solid #e2e9f1;
}



.cpointer {
    cursor: pointer;
}

.notificationicon {
    position: relative;
    left: 10px;
}

.notification-text {
    margin-top: 5px;
    margin-bottom: 12px;
}

.notification-text .item-title {
    display: block;
    font-weight: 600;
    line-height: 1.6;
}


.notification-text .item-description {

}


/*Table Foodcourt*/


.table-head.foodcourt tr th:last-child {
    min-width: 180px !important;
    max-width: 180px !important;
    width: 180px !important;
}


/*Token Container Customization*/

.token-container {
    margin: 10px 15px -16px 15px;
    padding: 0 0 0 8px;
    border-radius: 0px;
    user-select: none;
}

.token-info {
    color: white;
    font-size: 13px;
    font-weight: 500;
    line-height: 3rem;
}

.token-counter {
    padding: 0 10px 0 10px;
   margin: 5px;
    float: right;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border-radius: 2px;
    background-color: rgba(0,0,0,0.15);
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.05);
}

.col-sm-6.col-xs-12:nth-child(1) .token-container {
    background-color: #2d98da;
    border: 2px solid rgba(255,255,255,0.1);
}

.col-sm-6.col-xs-12:nth-child(2) .token-container {
    background-color: #0fb9b1;
    border: 2px solid rgba(255,255,255,0.1);
}



/*Info Bar*/

.infobar {
    padding: 0px 35px;
    margin: 5px 0 15px 0;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    user-select: none;
   
   
}

.infobar-icon {
    position: relative;

}

.infobar-icon svg {
    position: absolute;
    width: 30px;
    height: 30px;
    top: -2px;
    left: -20px;
   
}
.infobar-data {
    text-align: center;
}
.infobar-data span:nth-child(1) {
    font-weight: 500;
    font-size: 13px;
}

.infobar-data .ibcount {
    border-radius: 100px;
    padding: 2px 10px;
    margin-left: 5px;
    font-weight: 600;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    background-color: #5cb85c;
}


/*No Record Found*/

.no-record {

    padding-top: 10rem;
}

.no-record .fa {
    font-size: 6em;
    color: rgba(0,0,0,0.05);
}


.no-record h6 {
    font-weight: 500;
    color: rgba(0,0,0,0.3);
}

/*No Notification*/

.no-notification {
    background-color: white;
    padding: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid rgba(0,0,0,.1);
}
.no-notification .fa {
    font-size: 4em;
    color: rgba(0,0,0,0.15);
}

.no-notification h6 {
    font-weight: 500;
    color: rgba(0,0,0,0.5);
}




/*Search Box*/

.searchbox-container {
 margin: 15px 15px -11px 0;
 padding: 5px;
 background-color: #fff;
 border: 1px solid rgba(0,0,0,0.2);
 border-radius: 5px;
    
}

.searchbox-container .form-control {
    border-color: rgba(0,0,0,0.1);
}

.searchbox--input {
    position: relative;
}

.searchbox--btn button {
    position: absolute;
    top: 5px;
    right: 5px;
}

/*Multiselect Custom in Modal*/

.multiselect-cst .btn-group.open ul {
    left: -20px !important;
    max-height: 220px;
    margin-left: 20px;
    overflow-y: scroll;
}



.chklst-thead tr th:last-child {
    min-width: 80px !important;
    max-width: 80px !important;
    width: 80px !important;
}


/*Checkbox Checklist Paygrade*/

.checkbox-container {
    padding: 0 3px 2px 5px;
    margin-bottom: 5px;
    border-radius: 3px;
    background-color : rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.1);
}


.checkbox-container button {
   border-radius: 100px;
   padding: 0 4px 0 5px;
}


   /*Payroll Summary & Breakup Custom Table Head Width*/

   .prsummary-thead + tbody tr td {
       white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   }



/*Serial*/
.prsummary-thead tr th:nth-child(1),
.prsummary-thead + tbody tr td:nth-child(1) {
    min-width: 60px !important;
    max-width: 60px !important;
    width: 60px !important;
    text-align: center;
}
/*Name*/
.prsummary-thead tr th:nth-child(2),
.prsummary-thead + tbody tr td:nth-child(2) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}
/*Designation Name*/
.prsummary-thead tr th:nth-child(3),
.prsummary-thead + tbody tr td:nth-child(3) {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
}
/*Department*/
.prsummary-thead tr th:nth-child(4),
.prsummary-thead + tbody tr td:nth-child(4) {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
}
/*Bank*/
.prsummary-thead tr th:nth-child(5),
.prsummary-thead + tbody tr td:nth-child(5) {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    text-align: center;
}
/*A/C Number*/
.prsummary-thead tr th:nth-child(6),
.prsummary-thead + tbody tr td:nth-child(6) {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
}
/*Total Payable*/
.prsummary-thead tr th:nth-child(7),
.prsummary-thead + tbody tr td:nth-child(7) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}
/*Joining Date*/
.prsummary-thead tr th:nth-child(8),
.prsummary-thead + tbody tr td:nth-child(8) {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
/*Employement Status*/
.prsummary-thead tr th:nth-child(9),
.prsummary-thead + tbody tr td:nth-child(9) {
    width: 150px !important;
     min-width: 150px !important;
      max-width: 150px !important;
    text-align: center;
}
/*Other Allowances*/
.prsummary-thead tr th:nth-child(10),
.prsummary-thead + tbody tr td:nth-child(10) {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    
}
/*Gross Per Month*/
.prsummary-thead tr th:nth-child(11),
.prsummary-thead + tbody tr td:nth-child(11) {
    width: 180px !important;
     min-width: 180px !important;
      max-width: 180px !important;
}
.prsummary-thead tr th:nth-child(12),
.prsummary-thead + tbody tr td:nth-child(12) {
    width: 120px !important;
     min-width: 120px !important;
      max-width: 120px !important;
      text-align: center;
}


/*** Payroll Summary Custom Table END ***/

/*Payroll Breakup Custom Table*/

   .prbreakup-thead + tbody tr td {
       white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
   }

/*Serial*/
.prbreakup-thead tr th:nth-child(1),
.prbreakup-thead + tbody tr td:nth-child(1) {
    min-width: 60px !important;
    max-width: 60px !important;
    width: 60px !important;
    text-align: center;
}
/*Name*/
.prbreakup-thead tr th:nth-child(2),
.prbreakup-thead + tbody tr td:nth-child(2) {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
}
/*Department*/
.prbreakup-thead tr th:nth-child(3),
.prbreakup-thead + tbody tr td:nth-child(3) {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
}
/*Bank*/
.prbreakup-thead tr th:nth-child(4),
.prbreakup-thead + tbody tr td:nth-child(4) {
    width: 200px !important;
    min-width: 200px !important;
    max-width: 200px !important;
    text-align: center;
}
/*AC Number*/
.prbreakup-thead tr th:nth-child(5),
.prbreakup-thead + tbody tr td:nth-child(5) {
     width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
}
/*Total Payable*/
.prbreakup-thead tr th:nth-child(6),
.prbreakup-thead + tbody tr td:nth-child(6) {
   width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}
/*Salary +*/
.prbreakup-thead tr th:nth-child(7),
.prbreakup-thead + tbody tr td:nth-child(7) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    
}
/*Tax Ded*/
.prbreakup-thead tr th:nth-child(8),
.prbreakup-thead + tbody tr td:nth-child(8) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
}
/*Prv Func*/
.prbreakup-thead tr th:nth-child(9),
.prbreakup-thead + tbody tr td:nth-child(9) {
    width: 150px !important;
     min-width: 150px !important;
      max-width: 150px !important;
  
}
/*EOBI*/
.prbreakup-thead tr th:nth-child(10),
.prbreakup-thead + tbody tr td:nth-child(10) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    
}
/*transport*/
.prbreakup-thead tr th:nth-child(11),
.prbreakup-thead + tbody tr td:nth-child(11) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    
}
/*Others - */
.prbreakup-thead tr th:nth-child(12),
.prbreakup-thead + tbody tr td:nth-child(12) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    
}

/*Others + */
.prbreakup-thead tr th:nth-child(13),
.prbreakup-thead + tbody tr td:nth-child(13) {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    
}

/*Actions*/
.prbreakup-thead tr th:nth-child(14),
.prbreakup-thead + tbody tr td:nth-child(14) {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    text-align: center;
    
}


/*** Payroll Breakup Custom Table END ***/


/*Hover Scroll Panner*/


.panner {
    background-color: #d1d8e0;
    display:block;
    position:absolute;
    top: 1px;
    padding: 0 8.5px;
    height: 286px;
     transition: 300ms ease-in-out all;
}

.panner .pan-icon {
   position: relative;
   top: 45%;
   font-size: 24px;
   text-align: center;
  
}

.panner.active {
     background-color: #45aaf2;
    color:white;
    
}
#panLeft {
    left:-30px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    border-left: 2px solid #b6bfce;
}

#panLeft:hover {
    box-shadow: 5px 0px 8px rgba(0,0,0,0.2);
    border-color: #2d98da;
}

#panRight:hover {
    box-shadow: -5px 0px 8px rgba(0,0,0,0.2);
    border-color: #2d98da;
}
#panRight {
    right:-30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-right: 2px solid #b6bfce;
}





   /*Team Yearly Leave*/

      .tyl-tbl-td {
       position: relative;
       transition: all 100ms ease-in-out
   }

   .tyl-tbl-td span {
       font-size: 10px;
       font-weight: 500;
       cursor: default;
       color: white;
       background-color: #45aaf2;
       /*border: 1px solid #2d98da;*/
       border-radius: 100%;
       line-height: 1.5rem;
       width: 20px;
       height: 20px;
       position: absolute;
       top: 3.5px;
       left: 5px;
       transition: all 300ms ease-in-out
   }

         .tyl-tbl-td:hover span {
            
             border-radius: 0%;
       transform: scale(1.40);
       background-color: #26de81;
       /*border: 1px solid #20bf6b;*/
   }



         /*Manual Leave Deductions*/

         @media only screen and (min-width: 1500px) {
                 .leavetable-height {
             max-height: 535px !important;
         }
         .leavetable-height tbody {
             max-height: 435px !important;
         }
         }
         @media only screen and (min-width: 1700px) {
                 .leavetable-height {
             max-height: 625px !important;
         }
         .leavetable-height tbody {
             max-height: 525px !important;
         }
         }
         @media only screen and (min-width: 1800px) {
                 .leavetable-height {
             max-height: 680px !important;
         }
         .leavetable-height tbody {
             max-height: 575px !important;
         }
         }

         .leavetable-height {
             max-height: 460px;
         }
         .leavetable-height tbody {
             max-height: 360px;
         }

            .mld-table-span--holiday { 
                padding: 2px 5px 2px 5px;
       font-size: 10px;
       font-weight: 500;
       color: white;
       background-color: #45aaf2;
       border: 1px solid #2d98da;
       border-radius: 100%;  
       transition: all 250ms ease-in-out !important;
          
   }

         td:hover .mld-table-span--holiday {
             padding: 5px 8px 5px 8px;
             font-size: 12px;
             border-radius: 0%;
   }

         
            .mld-table-span--leave { 
                padding: 2px 5px 2px 5px;
       font-size: 10px;
       font-weight: 500;
       color: white;
       background-color: #fc5c65;
       border: 1px solid #eb3b5a;
       border-radius: 100%;  
       transition: all 250ms ease-in-out !important;
          
   }

         td:hover .mld-table-span--leave {
             padding: 5px 8px 5px 8px;
             font-size: 12px;
             border-radius: 0%;
   }

                     .mld-table-span--marked { 
                padding: 2px 5px 2px 5px;
       font-size: 10px;
       font-weight: 500;
       color: white;
       background-color: #a55eea;
       border: 1px solid #8854d0;
       border-radius: 100%;  
       transition: all 250ms ease-in-out !important;
          
   }

         td:hover .mld-table-span--marked {
             padding: 5px 8px 5px 8px;
             font-size: 12px;
             border-radius: 0%;
   }

                     .mld-table-span--pd { 
                padding: 2px;
       font-size: 10px;
       font-weight: 500;
       color: white;
       background-color: #fc5c65;
       border: 1px solid #eb3b5a;
       border-radius: 100%;  
       transition: all 250ms ease-in-out !important;
          
   }

         td:hover .mld-table-span--pd {
             padding: 5px;
             font-size: 12px;
             border-radius: 0%;
   }

                              .mld-table-span--ld { 
                padding: 2px 3px;
       font-size: 10px;
       font-weight: 500;
       color: white;
       background-color: #fd9644;
       border: 1px solid #fa8231;
       border-radius: 100%;  
       transition: all 250ms ease-in-out !important;
          
   }

         td:hover .mld-table-span--ld {
             padding: 5px;
             font-size: 12px;
             border-radius: 0%;
   }

.dragscroll {
  overflow: auto;
  cursor : -webkit-grab;
  cursor : -moz-grab;
  cursor : -o-grab;
  cursor : grab;
}

.dragscroll:active {
  cursor : -webkit-grabbing;
  cursor : -moz-grabbing;
  cursor : -o-grabbing;
  cursor : grabbing;
}

.info-user {
    color: rgba(0,0,0,.4);
    font-size: 10px;
    display: table-cell;
    line-height: 12px;
   padding: 10px 5px;
   text-align: center;
}



.info-user i{
    color: #27aae1;
    
}


/*Salary Hold Payroll*/

thead.salaryhold tr th:nth-last-child(2) {
    min-width: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
}

.cursorDefault {
    cursor: default;
}

.vl {
    border-left: 1px solid rgba(0,0,0,.1);
    height: 50px;
    position: absolute;
    margin-top: 22px;
}


.red {
    color: #e74c3c !important;
}


/*BUS*/

.bus-container {
    border: 4px solid rgba(165, 177, 194,1.0);
    border-radius: 10px;
    padding: 5px;

}

.bus-body {
 
    background-color: rgba(209, 216, 224,0.5);
    border-radius: 5px;
  padding: 5px 3.5px;
    margin: 0 auto;
}

.bus-seats table {

    background: transparent !important;
    text-align: center;
    /*margin-left: -3em;*/
  
}

.bus-seats table tbody tr td {
width: 34px;
min-width: 34px;
max-width: 34px;
text-align: center;
cursor: default;


}

.bus-seats table tbody tr td span {
background-color: rgba(69, 170, 242,1.0);
border-radius: 2px;
padding: 4px 6px;
color: white;
font-size: 10px;
font-weight: 600;
text-align: center;
cursor: pointer;


}


.bus-seats table tbody tr td.mini-seats span {
background-color: rgba(252, 92, 101,1.0);
border-radius: 2px;
padding: 2px 4px;
color: white;
font-size: 10px;
font-weight: 600;
text-align: center;

}

.bus-seats table tbody tr td.driver-seat span {
background-color: rgba(253, 150, 68,1.0);
cursor: default;

}


/*Time Picker Custom*/

.bootstrap-timepicker-widget table td span {
   
    color: #4b6584 !important;
}

.bootstrap-timepicker-widget table td input {
   border: 1px solid #2d98da;
   background-color: #45aaf2;
   color: white;
   width: 30px !important;
   outline: none;
   cursor: pointer;
 
}

.bootstrap-timepicker-widget table td input::selection {
   background: #26de81;
  
}


/*Alternate Menubar Customization*/

#cssmenu {
    font-family: Roboto, sans-serif !important; 
    background: #e2e9f1 !important;
    border-bottom: 3px solid #cad3e0 !important;
    z-index: 10 !important;
    box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
    
}

#cssmenu ul li.has-sub ul[aria-labelledby="navbarDropdown"]:after {
    bottom: 100%;
	left: 10%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-bottom-color: #34495e;
	border-width: 8px;
   	
}

#cssmenu ul li.has-sub ul li a  {
    border-radius: 2px !important;
   }

#cssmenu ul ul li a {
    background-color: #34495e !important;
    border-bottom: 1px solid #2c3e50 !important;  
    box-shadow: 2px 3px 7px rgba(0,0,0,0.3);
    transition: all ease-in-out 200ms;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-right: 0 !important;
    padding-left: 10px !important;
    font-size: 11px !important;
    
   
}
#cssmenu ul ul li a:hover {
    background-color: #27ae60 !important;
    border-bottom-color: #219a54 !important;
    
}

#menu-button {
    color: #45aaf2 !important;
}

#cssmenu.small-screen #menu-button:before,
#cssmenu.small-screen #menu-button:after {
    background-color: #45aaf2 !important;
    border-color: #45aaf2 !important;
}

#cssmenu.small-screen #menu-button.menu-opened:before,
#cssmenu.small-screen #menu-button.menu-opened:after {
    background-color: #fc5c65 !important;
}
    #cssmenu > ul > #no_sub_icon,
    #cssmenu > ul > #no_sub_icon{
        float: right !important;
    }

#cssmenu > ul > #no_sub_icon.has-sub > a:before,
#cssmenu > ul > #no_sub_icon.has-sub > a:after {

    display: none;
}


#cssmenu > ul > li.has-sub > a:before {
    top: 17.5px !important;
    right: 6px !important;
    background-color: #45aaf2 !important;
    
}

#cssmenu > ul > li.has-sub:hover > a:before,
#cssmenu > ul > li.has-sub:hover > a:after
 {
    background-color: #20bf6b !important;
    
}

#cssmenu.small-screen .submenu-button:before,
#cssmenu.small-screen .submenu-button:after {
    background-color: #45aaf2 !important;
}

#cssmenu.small-screen .submenu-button.submenu-opened {
    background: #45aaf2 !important;
}

#cssmenu.small-screen .submenu-button.submenu-opened:before,
#cssmenu.small-screen .submenu-button.submenu-opened:after {
    background: #fff !important;
}

#cssmenu > ul > li.has-sub > a:after {
    top: 20.5px !important;
    right: 3px !important;
    background-color: #45aaf2 !important;
}

#cssmenu > ul > li > a {
    padding: 17px 17px !important;
    font-size: 10px !important;
    letter-spacing: 0.3px !important;
    color: #4b6584 !important;
    font-weight: 700;
    text-transform: none;
    transition: color 100ms ease-in-out;
}

#cssmenu > ul > li > a:hover {
 
    color: #20bf6b !important;

}
#cssmenu ul li ul {
    z-index: 1060 !important;

  
}


#cssmenu #no_sub_icon:hover > ul {
    right: 0;
}

/*Convert to ICONS*/


#convertIcon i {
    font-size: 16px;
    transition: color 100ms ease-in-out;
}

#convertIcon:hover i {
    color: #20bf6b;
}

@media screen and (max-width: 768px) {
    #convertIcon {
        display: none !important;
    }

    #displayonPhone {
        display: inline-block !important;
    }
}


#cssmenu.small-screen ul ul li a {
    color : #778ca3 !important;
}


/*Charts Mods*/

@media screen and (max-width: 660px) {
    #headCountChart,
    .individualSLC,
    #departmentChart {
        min-width: 600px
    }
    #departmentChart {
        min-height: 280px
    }
    .overflow-xs-x {
        overflow-x: auto;
        overflow-y: hidden;
    }
}


/*Allowances Modal Edit*/

.x-form-control {
    width: 100%;
    height: 20px;
    position: relative;
    top: 1px;
    border-radius: 3px;
    outline: none;
    border-style: solid;
    text-align: center;
    border-width: 1px;
}


/*2nd Level Modal*/

.secondary-modal {
    background: rgba(0,0,0,0.6) !important;
    z-index: 9999999;
    overflow: hidden;
    height: 100%;
    
    
}

.secondary-modal .modal-dialog .modal-body {
   max-height: 420px;

}

.go-back {
    z-index: 1 !important;
}

/*Chosen Drop up Specific Fields and Height*/

.chosen-drop {
    box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.15);
    z-index: 1020 !important;
}

#DepartmentId + .chosen-container-single .chosen-drop,
#SubdepartmentId + .chosen-container-single .chosen-drop,
#ReportingTo + .chosen-container-single .chosen-drop,
#Indirectsupervisor + .chosen-container-single .chosen-drop,
#Residential_DistrictId + .chosen-container-single .chosen-drop,
#Residential_CountryId + .chosen-container-single .chosen-drop


{
    top: -21.7em;
    max-height: 280px !important;
    height: 280px !important
}
#DepartmentId.topfield + .chosen-container-single .chosen-drop {
    top: 0 !important;
    max-height: 160px !important;
    height: 160px !important

}
#DepartmentId.topfield + .chosen-container-single .chosen-drop .chosen-results {
    max-height: 120px !important;
    height: 120px !important
}

#NationalityId + .chosen-container-single .chosen-results,
#Permanent_CountryId + .chosen-container-single .chosen-results{
    max-height: 150px !important;
    height: 150px !important
}

#Residential_CityId + .chosen-container-single .chosen-drop
{
    top: -18.7em;
}

#Residential_CityId + .chosen-container-single .chosen-results
{
    max-height: 200px !important;
    height: 200px !important
}


/*--------------------
Mini Loader
----------------------*/

.MiniLoader.boxes {
  vertical-align: middle;
  text-align: center;
  margin: 0 auto;
  transition: 300ms all ease-in-out;
  
  
}


.MiniLoader.notification-loader {
    top: 5px;
    right: -4px;
    transform: scale(0.8);
    
}

.MiniLoader {
  vertical-align: middle;
  text-align: center;
  margin: -5px 5px 0 auto;
  transition: 300ms all ease-in-out;
  position: relative;
  top: -5px;
  
}
.MiniLoader .loader-dot {
  width: 4px;
  height: 4px;
  display: inline-block;
  margin-right:0.5px;
  border-radius: 10px;
  background-color: #fff;
  -webkit-animation: loader-1 1s infinite;
  -moz-animation: loader-1 1s infinite;
  -o-animation: loader-1 1s infinite;
  animation: loader-1 1s infinite;
  transform: scale(0.8);
}
.MiniLoader .loader-dot:nth-child(1) {
  -webkit-animation-delay: 0.48s;
  -moz-animation-delay: 0.48s;
  -o-animation-delay: 0.48s;
  animation-delay: 0.48s;
}
.MiniLoader .loader-dot:nth-child(2) {
  -webkit-animation-delay: 0.24s;
  -moz-animation-delay: 0.24s;
  -o-animation-delay: 0.24s;
  animation-delay: 0.24s;
}
.MiniLoader .loader-dot:nth-child(3) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

@keyframes loader-1 { 
    0% {
        -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
        -ms-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0); 
        transition-timing-function: ease-out; 
    } 
    50% {
        -webkit-transform: translate3d(0,6px,0);
        -moz-transform: translate3d(0,6px,0);
        -ms-transform: translate3d(0,6px,0);
        transform: translate3d(0,6px,0); 
        transition-timing-function: ease-out; 
    }
}

@-webkit-keyframes loader-1 { 
    0% { 
        -webkit-transform: translate3d(0,0,0); 
         transition-timing-function: ease-out; 
    } 
    50% { -webkit-transform: translate3d(0,6px,0); 
          transition-timing-function: ease-out; 
    }
}
@-moz-keyframes loader-1 { 
    0% { 
        -moz-transform: translate3d(0,0,0); 
        transition-timing-function: ease-out; 
    } 
    50% { 
        -moz-transform: translate3d(0,6px,0); 
        transition-timing-function: ease-out; 
    }
}

@-o-keyframes loader-1 { 
    0% { -o-transform: translate3d(0,0,0); 
         transition-timing-function: ease-out; 
    } 
    50% { 
        -o-transform: translate3d(0,6px,0); 
        transition-timing-function: ease-out; 
    }
}

[not-existing] {
  zoom: 1;
}

/*Custom File Upload for Documents*/

.custom-file-upload--document {
    border-radius: 3px;
    padding: 2px 10px;
   border: none !important;
    color: white !important;
    background-color: #45aaf2;
    border-bottom: 2px solid #2d98da !important;
    transition: 300ms ease-in-out all !important;
    cursor: pointer;
    width: 100%;
    user-select: none;
}

.custom-file-upload--document:hover,
.custom-file-upload--document:focus,
.custom-file-upload--document:active {
    color: white !important;
    transform: translateY(1px);
    border-bottom-width: 1px !important;
    

 
}

/*Modal Mods*/
.modal-dialog {
    transform: scale(0.93) translate(10px,-50px) !important;
    display: inline-block;
  text-align: left;
  vertical-align: middle;
}

@media only screen and (max-width: 660px) {
    .modal-dialog {
    transform: translate(0px,0px) !important;
  
}
    .modal {
        overflow-y: auto;
    }
    .modal-body {
        overflow-y: auto !important;
    }
}

/*#addEmployeeInformation {
    overflow-y: hidden !important;
}*/

.modal {
  text-align: center;
  
}

div#ModalPopup.modal:before {
    height: auto !important;
}
@media only screen and (max-width: 660px) {
    div#ModalPopup .modal-dialog {
        width: 94% !important;
    }
}

@media screen and (min-width: 768px) { 
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  
  }
  .modal {
        overflow-y: hidden !important;
  }
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

/*Table Heading*/
.table-heading {
    background-color: #4b6584;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.table-heading h1,
.table-heading h2,
.table-heading h3,
.table-heading h4,
.table-heading h5,
.table-heading h6 {
    color: white;
}

.light-round-border {
    border: 1px solid #d1d8e0;
    border-radius: 5px;
}


/*--------------
    Organogram
----------------*/

#Organogram {
    height: 567px !important;
    max-height: 645px !important;
}
/*Header*/
#Organogram .get-org-chart .get-oc-tb {
    background-color: #4b6584;
    border-bottom: 3px solid #465e7b;
}

/*Zoom Icons*/
#Organogram .get-org-chart .get-oc-tb .get-minus,
#Organogram .get-org-chart .get-oc-tb .get-plus,
#Organogram .get-org-chart .get-oc-tb .get-prev,
#Organogram .get-org-chart .get-oc-tb .get-next {
    transform: scale(0.7);
    transition: transform 100ms ease-in-out;
}

/*Zoom & Prev Next Icons on Hover*/
#Organogram .get-org-chart .get-oc-tb .get-minus:hover,
#Organogram .get-org-chart .get-oc-tb .get-plus:hover,
#Organogram .get-org-chart .get-oc-tb .get-prev:hover,
#Organogram .get-org-chart .get-oc-tb .get-next:hover {
    transform: scale(0.9);
}


/*No Hover Animation if Disabled*/
#Organogram .get-org-chart .get-oc-tb .get-next.get-disabled:hover,
#Organogram .get-org-chart .get-oc-tb .get-prev.get-disabled:hover {
   transform: scale(0.7);
}

/*Input Search Customization*/
#Organogram .get-org-chart .get-oc-tb input[placeholder="Search"] {
   background-color: #3d5470;
   border: 1px solid #374c65;
   border-radius: 3px;
   color: #ffffff;
}

/*Input Search Placeholder Color*/
#Organogram .get-org-chart .get-oc-tb input[placeholder="Search"]::placeholder {
   color: #778ca3;
}

/*Page Arrows Customization*/
#Organogram .get-org-chart .get-left {
    background-color: #2d98da;
    width: 35px;
    padding-left: 3px;
    margin-left: -1px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-right: 3px solid #268bc9;
    transition: box-shadow 300ms ease-in-out;
}
#Organogram .get-org-chart .get-right {
    background-color: #2d98da;
    width: 35px;
    padding-left: 3px;
    margin-right: -1px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-left: 3px solid #268bc9;
    transition: box-shadow 300ms ease-in-out;
}
#Organogram .get-org-chart .get-up {
    background-color: #2d98da;
    height: 35px;
    padding-top: 3px;
    margin-top: -3px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 3px solid #268bc9;
    transition: box-shadow 300ms ease-in-out;
}
#Organogram .get-org-chart .get-down {
    background-color: #2d98da;
    height: 35px;
    padding-bottom: 3px;
    margin-bottom: -3px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 3px solid #268bc9;
    transition: box-shadow 300ms ease-in-out;
}

#Organogram .get-org-chart .get-left:hover {
    box-shadow: 3px 0px 10px rgba(0,0,0,0.2);
}
#Organogram .get-org-chart .get-right:hover {
    box-shadow: -3px 0px 10px rgba(0,0,0,0.2);
}
#Organogram .get-org-chart .get-up:hover {
    box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
#Organogram .get-org-chart .get-down:hover {
    box-shadow: 0px -3px 10px rgba(0,0,0,0.2);
}

@media only screen and (min-width: 768px) {
    .sm-centered-shaded {
    position: absolute;
    top: 40%;
    bottom: 50%;
}
}
.sm-centered-shaded .container-box {
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}


.btn-view-only {
    pointer-events: none; 
    border: none !important; 
    background-color: transparent !important; 
    color: white !important;
}

/*Loading Position on XS */

.loading-position {
    position: absolute;
    top: 15px;
    left: -35px;
}

/*Paygrade Deductions Search BTN */

.deducts-btn {
    position: relative;
}

@media only screen and (min-width: 768px) {
    .deducts-btn {
    left: -4.35em;
    top: 0.94em;
}}

@media only screen and (max-width: 660px) {
    .deducts-btn {
    float: right;
    right: 17px;
    top: -46.5px;
  
}}

/*Paygrade Fields TOPBAR*/
.form-control.pgd-fields {
background-color: #3d536d;
border-color: #3b4d63;
color: #8ba1b9 !important;
}

.form-control.pgd-fields option:first-child {

color: #536980 !important;
}


/*----------------------
    User Export Profile
-----------------------*/

/*Employee Name*/


@media only screen and (max-width: 660px) {
    .display-hidden-xs {
        display: none !important;
    }
}

.resume-top-area {
    padding: 4em 0;
    margin-left: 40%;

}

.resume-empname {
    text-transform: uppercase;
    font-size: 32px;
    font-weight: 600;
    color: #000000;
}
.resume-sub-details {
    margin-left: 2px;
    margin-top: 1%;
    line-height: 1.4;
}

.resume-sub-details .emp-phone,
.resume-sub-details .emp-email,
.resume-sub-details .emp-addr {
    font-weight: 500;
}
.resume-employee-image {
    position: absolute;
    padding-top: 2em;
    padding-left: 5em;

}

.resume-body {
        padding: 1.5em 2.5em 0em 2.5em;
}

.resume-body--title {
    font-weight: 600;
    font-size: 20px;
    color: #000;
    text-align: right;
    text-transform: uppercase;
    letter-spacing: -1px;
    
    
}

.bg-transparent{
    background: transparent !important;
}


.resume--info {
    padding-left:25px;
    padding-top: 45px;
    line-height: 1.4;
  
}

.resume--info li b {
    font-weight: 900;
}

.resume--info ul {
    padding-left: 0 !important;
}
.resume--info li .secondary-div {
    font-weight: 500;
}

.resume--info span:nth-child(1) {
    font-weight: 900;
}

/*.resume-table tr,
.resume-table tr td {
    vertical-align: middle !important;
}*/

.resume-info-title {
    min-width: 200px;
    max-width: 200px;
    width: 200px;
    vertical-align: top;
}



/*User Details Circle Image*/

/*Work Anniversary*/

.user-image-cicle {
    border-radius: 100%;
    width: 42px;
    height: 42px;
    background-color: #d1d8e0;
}

.user-image-cicle img {
    border-radius: 100%;
    width: 42px;
    height: 42px;
}

.user-image-cicle.small-img {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    background-color: #d1d8e0;
}

.user-image-cicle.small-img img {
    border-radius: 100%;
    width: 32px;
    height: 32px;
}

/*.user-image-cicle:after {
    font-family: 'FontAwesome';
    content: '\f1ae';
    font-size: 34px;
    text-align: center;
    position: relative;
    left: 22%;
    top: 29%;
    color: #b7c0cd;

}*/



.user-detail span:nth-child(1) {
    font-size: 14px;
    font-weight: 500;
   
   
    
}

.user-detail span:nth-child(2) {
    font-size: 9px;
    font-weight: 500;
    position: relative;
    top: -1.5px;
    
}

.user-detail div {
    font-size: 9px;
    font-weight: 400;       
    transition: 150ms ease-in-out all;
    display: table-cell;
       line-height: 0.5;
       color: #45aaf2;
 
  
    
}

.user-detail {
      white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 3px 10px 10px 10px;
    border-radius: 5px;
    transition: background-color 150ms ease-in-out;
}

.container-body .row:hover .user-detail {
    background-color: #f1f2f6;
    
}

.user-detail div:hover {
    transform: translateX(4px);
    color: #20bf6b;
    
}

.user-detail div:hover::after {
    font-family: 'FontAwesome';
    content: '\f064';
    margin-left: 5px;
    color: #20bf6b;
        
    
}

.bottom-separator {
    border-bottom: 1px solid rgba(0,0,0,.1);
    margin: 15px 0;
}


.row:last-child + div.bottom-separator{
   border-bottom: 0px solid rgba(0,0,0,.1);
}

/*.scrollable-body {
    max-height: 346px;
    overflow: hidden;
overflow-y: auto;
}*/


.scrollable-body {

    max-height: 346px;
    overflow: hidden;
overflow-y: auto;

}

/*.scrollable-body-mini {

    max-height: 212.5px;

transition: all ease-in-out 300ms;

}*/

/*.scrollable-body-mini:hover {
  

overflow-y: auto;

}*/


/*Personal Leave Count*/

.col-xs-12.pl-0:nth-child(1) .plcount-lt {
    color: #2d98da;
}

.col-xs-12.pl-0:nth-child(3) .plcount-lt {
    color: #20bf6b;
}


.col-xs-12.pl-0:nth-child(5) .plcount-lt {
    color: #fa8231;
}

.col-xs-12.pl-0:nth-child(7) .plcount-lt {
    color: #eb3b5a;
}


.plcount-con,
.plcount-rem,
.plcount-tot {
 float: right;
 font-weight: 300;
 font-size: 11px;
}

.plcount-con {
    margin-right: 10px;
}

.plcount-rem {
    margin-right: 10px;
}

.plcount-tot {
     
}

.plcount-con span,
.plcount-rem span,
.plcount-tot span {
    color: #20bf6b;
    font-weight: 900; 
}

.plcount-tot span {
    color: #2d98da;
 
}


/*Attendance Dashboard
*/


.user-detail-attendance span:nth-child(1) {
    font-size: 12px;
    font-weight: 500;
    position: relative;
    top: 2px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #778ca3;

    
}

.user-detail-attendance span:nth-child(2) {
    font-size: 9px;
    font-weight: 500;
    transition: 150ms ease-in-out all;
    float: right;
    position: relative;
    top: 3px;
    text-transform: uppercase;
    color: #a5b1c2;
  
    
}

.user-detail-attendance div:hover {
    transform: translateX(4px);
    color: #45aaf2;
    
}

.user-detail-attendance div:hover::after {
    font-family: 'FontAwesome';
    content: '\f064';
    margin-left: 5px;
    color: #45aaf2;
        
    
}

/*Container Card Secondary*/

.container-card.secondary { 
    margin: 0 0;
 border: 0.5px solid #d1d8e0;
    border-radius: 0;
    transition: all 0.5s;
    box-shadow: none;
   
}

.container-card.secondary.alt { 
   
    border-bottom-width:1px;
    border-top-width: 0;
}

.container-card.secondary .container-header{ 
        padding: 5px 15px 5px 15px;
        transition: box-shadow 200ms ease-in-out;
        margin: 0;
}

.container-card.secondary:hover{
    
    box-shadow:none
}

.container-card.secondary:hover .container-header  {
    box-shadow: 0 2px 4px -1px rgba(0,0,0,.15);
}

.container-card .container-header .container-heading.attendance {
font-size: 11px;
font-weight: 500;
color: #2d98da;
}

.slimScrollBar {
    background: #a5b1c2 !important;
    width: 5px !important;
}

.w-separator {
    border-bottom: 0.5px solid rgba(255,255,255,0.5);
    
}
/*Container Blue*/
.container-blue {
    background-color: #00a8ff;  
    color: white; 
    border-radius: 2px;
    height: 120px;

   
}

.container-blue .c-title {
    position: relative;
    top: 16px;
    letter-spacing: 0.5px;
    font-weight: 400;

}

.container-blue .c-person {
     text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    font-size: 9px;
    line-height: 1;
}

.container-blue .c-stats {
   
    font-weight: 200;
    font-size: 26px;
}

.container-blue .c-stats span {
    margin-left: -4px;  
    font-size: 11px;
    font-weight: 300;
}

.bg-orange {
    background-color: #fa8231;
    border-radius: 1px;
    color: white;
}

.bg-yellow {
    background-color: #f7b731;
    border-radius: 1px;
    color: white;
}

/*Container White*/
.container-white {
    background-color: #fff;  
    border-radius: 2px;
    height: 119px;   
    border-bottom: 1px solid #dbe1e7;
}

.container-white .c-title {
    font-weight: 500;
    padding: 5px 5px 0px 5px;
    color: #4b6584;
}

.container-white .c-sub-title {
    text-transform: uppercase;
    line-height: 2;
    color: #a5b1c2;
    font-size: 9px;
    font-weight: 500;
}

.container-white .c-person {
     text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    font-size: 9px;
    line-height: 2.4;
    text-align: center;
    display: block;
}

.container-white .c-stats {
   text-align: center;
    font-weight: 200;
    font-size: 28px;
    padding-top: 15px;
    
}


/*Clock IN*/

.container-white .c-date {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.4;
    display: block;
    color: #a5b1c2;
}

.container-white .c-clock {
    font-size: 20px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1;
    display: block;
    color: #0fb9b1;
    position: relative;
    left: -16px;

}


.container-white .c-clock span {
  margin-left: 3px;
  position: relative;
  top: -9px;
  font-weight: 600;
}

.container-white .c-clock span:nth-child(1) {
    font-size: 8px;
    border-bottom: 0.5px solid #d1d8e0;
}

.container-white .c-clock span:nth-child(2) {
    line-height: 1.4;
    display: block;
    font-size: 6px;
}

.container-white .c-links {
  text-align: right
   
}

.container-white .c-links span{
   display: block;
    line-height: 1.6;
    transition: 200ms ease-in-out all;
    pointer-events: none;
 
}

.container-white .c-links a {
   font-size: 10px;
   color: #45aaf2;
   text-decoration: none;
   transition: 200ms ease-in-out all;
   pointer-events: all;
}

.container-white .c-links span:hover {
   transform: translateX(-5px) scale(1.03);
   color: #5db7f7;
 
}


/*COntainer White Full*/

.container-white-full {
    background-color: #fff;  
    border-radius: 2px; 
    border-bottom: 1px solid #dbe1e7;
    
   
}

.container-white-full .c-title {
    font-weight: 500;
    padding: 5px 5px 0px 5px;
    color: #4b6584;
}

.container-white-full .c-sub-title {
    text-transform: uppercase;
    line-height: 2;
    color: #a5b1c2;
    font-size: 9px;
    font-weight: 500;
}

.activeGreen {
    background-color: #20bf6b !important;
    border-color: #1fab61 !important;
   border-style: solid !important;
    border-width: 2px !important;
    border-left:none !important;
    border-top: none !important;
    border-right: none !important;
    transition: all ease-in-out 300ms !important;
}


/*Attendance Dashboard Table*/
.att-table-icon i.fa-check-circle {
    color: #91dc5a;
    font-size: 16px;
    vertical-align: middle; 
}

.att-table-icon i.fa-exclamation-circle {
    color: #F79F1F;
    font-size: 16px;
    vertical-align: middle; 
}

.AttendanceLogTable thead tr th,
.AttendanceLogTable tbody tr td {
    vertical-align: middle;
}

.tr-hover-show i {
    font-size: 24px;
    vertical-align: middle;
    color: #45aaf2;
    cursor: pointer;
}

.tr-hover-show {
    visibility: hidden;
}


tr:hover .tr-hover-show {
    visibility: visible;
}

.arrivaltime img {
    width: 15px;
}

.eff-hours img {
    width: 12px;
    position: relative;
    top: -1px;
}

.AttendanceLogTable thead tr th,
.AttendanceLogTable tbody tr td {
    width: 150px;
}


/*Mini Dropdown*/


.dropdown-mini,
.dropdown-notification {
    position: relative;
    display: inline-block;
}

.dropdown-container {
    border-radius: 10px;
    display: none;
    position: absolute;
    background-color: #f6f6f6;
    width: 100px;
    /*overflow: hidden;*/
    box-shadow: 0px 3px 10px -1px rgba(0,0,0,0.4);
    z-index: 10;
    right: 40px;
    top: -5px;
}

.dropdown-container:after {
	left: 100%;
	top: 13%;
	border: solid transparent;
	content: "";
	position: absolute;
	pointer-events: none;
	border-left-color: rgba(138, 192, 246, 0.20);
	border-width: 8px;  


}

/*.dropdown-container:before {
	left: 100%;
	top: 7%;
	border: solid transparent;
	content: "";
	position: absolute;
	pointer-events: none;
	border-left-color: #3498db;
	border-width: 7px;  

}*/
.dropdown-container a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    transition: all ease-in-out 200ms;
    border-radius: 10px;
}



.dropdown-mini a:hover {
    background-color: #edf4f7;
    color: #3498db;

}

.showdrop {display: block;}


/*Rocket Animated*/


#rocket_launch {
  position: absolute;
  bottom: -50%;
  margin-bottom: 0;
  margin-left: 47%;
  transition: 4s;
}

/*#rocket_launch:hover{
  margin-bottom:1000px;
}*/
.rocket_shadow {
  fill: #fff;
}

.cloud_fill {
  fill: #f1c40f;
  -webkit-transform-origin: 40% 0%;
          transform-origin: 40% 0%;
}

@-webkit-keyframes smoke_size {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  20% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  40% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  90% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(0.25);
            transform: scale(0.25);
  }
}

@keyframes smoke_size {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  20% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  40% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  60% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  80% {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
  90% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  100% {
    -webkit-transform: scale(0.25);
            transform: scale(0.25);
  }
}
@-webkit-keyframes shadow_flare {
  from {
    fill: #000;
  }
  to {
    fill: #fff;
  }
}
@keyframes shadow_flare {
  from {
    fill: #000;
  }
  to {
    fill: #fff;
  }
}


.table-mini-heading {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding-bottom: 5px;
    color: #4b6584;
}

.fixed-height-tm {
    max-height: 309px;
    height: 309px;
    overflow-y: auto;
    overflow-x: hidden;
}


.table-mini-svg {
     text-align: center;
}
.table-mini-svg svg {
    position: relative;
    top: 10em;
   
}

#toggle-arrow-up {
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 10;
    box-shadow: 0px 2px 4px  rgba(0,0,0,0.4);
     animation-name: floating-up;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

#toggle-arrow-up:hover {
       transform: translate(0px,  2px ) !important;
    animation: none;
}

#toggle-arrow {
    position: absolute;
    margin-top: 10px;
    margin-left: 10px;
    z-index: 10;
    box-shadow: 0px 2px 4px  rgba(0,0,0,0.4);
     animation-name: floating;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}


#toggle-arrow:hover {
    transform: translate(2px,  0px ) !important;
    animation: none;
}

@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(3px, 0px);
    }
    to   { transform: translate(0, -0px); }    
}
@keyframes floating-up {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0px, 3px);
    }
    to   { transform: translate(0, -0px); }    
}

.notification-modal .modal-body {
    padding: 0 !important;
}

.limited-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    
}

.limited-text-comment {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;  
}


#splashScreen img{
    margin:0 auto;
}

#splashScreen{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background-color:#252525;
    background-repeat:no-repeat;
    text-align:center;
}



/*system error log*/

.error-log thead tr th:nth-child(1),
.error-log tbody tr td:nth-child(1) {
    min-width: 80px !important;
    width: 80px !important;
    max-width: 80px !important;
}
.error-log thead tr th:nth-child(2),
.error-log tbody tr td:nth-child(2) {
    min-width: 120px !important;
    width: 120px !important;
    max-width: 120px !important;

 
}
.error-log thead tr th:nth-child(3),
.error-log tbody tr td:nth-child(3) {
    min-width: 100px !important;
    width: 100px !important;
    max-width: 100px !important;

}
.error-log thead tr th:nth-child(4),
.error-log tbody tr td:nth-child(4) {
    min-width:150px !important;
    width: 150px !important;
    max-width: 150px !important;
}

.error-log thead tr th:nth-child(5),
.error-log tbody tr td:nth-child(5) {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    
}

.error-log thead tr th:nth-child(6),
.error-log tbody tr td:nth-child(6) {
    min-width: 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    
}

.error-log thead tr th:nth-child(7),
.error-log tbody tr td:nth-child(7) {
    min-width: 100px !important;
    width:100px !important;
    max-width: 100px !important;
    
}


/*Resignation Table*/

@media only screen and (max-width: 1280px) {
    .resignation-table {
    transform: scale(0.77) !important;
    position: relative;
    left: -184px !important;
    top: -30px !important;
}
}

.resignation-table {
    transform: scale(0.825);
    position: relative;
    left: -141px;
    top: -26px;
}

.resignation-table thead tr th:nth-child(2),
.resignation-table tbody tr td:nth-child(2),
.resignation-table thead tr th:nth-child(3),
.resignation-table tbody tr td:nth-child(3) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resignation-table thead tr th:nth-child(4),
.resignation-table tbody tr td:nth-child(4) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    text-align: center;
}
.resignation-table thead tr th:nth-child(5),
.resignation-table tbody tr td:nth-child(5) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: center;
}

.resignation-table thead tr th:nth-child(6),
.resignation-table tbody tr td:nth-child(6) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    word-break: break-all;
    
}

.resignation-table thead tr th:nth-child(7),
.resignation-table tbody tr td:nth-child(7),
.resignation-table thead tr th:nth-child(8),
.resignation-table tbody tr td:nth-child(8),
.resignation-table thead tr th:nth-child(9),
.resignation-table tbody tr td:nth-child(9) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    
}

.resignation-table thead tr th:nth-child(10),
.resignation-table tbody tr td:nth-child(10) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    
}
.resignation-table thead tr th:nth-child(11),
.resignation-table tbody tr td:nth-child(11) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    text-align: center;
    
}
.resignation-table thead tr th:nth-child(12),
.resignation-table tbody tr td:nth-child(12) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
    
}

/*------------------------------
--------------------------------
    Payroll Summary Table
-------------------------------
-------------------------------*/



@media only screen and (min-width: 1500px) {
.payroll-summary-table {
 transform:scale(0.889) translate(-102px, -30px) !important;
    }

.payroll-summary-table-height tbody {
        max-height: 590px !important;
        height: 590px !important;
    }
.payroll-summary-table-height {
        max-height: 570px !important;
        height: 570px !important;
    }
}
@media only screen and (min-width: 1700px) {
.payroll-summary-table {
 transform:scale(1) translate(0px, 5px) !important;
    }

.payroll-summary-table-height tbody {
        max-height: 610px !important;
        height: 610px !important;
    }
.payroll-summary-table-height {
        max-height: 660px !important;
        height: 660px !important;
    }
}

@media only screen and (max-width: 1366px) {
    .payroll-summary-table-height {
        max-height: 500px !important;
        height: 500px !important;
    }
     .payroll-summary-table-height tbody {
        max-height: 570px !important;
        height: 570px !important;
    }
}

.payroll-summary-table {
 transform:scale(0.795) translate(-210px, -70px);
    
    }


.payroll-summary-table thead tr th:nth-child(1),
.payroll-summary-table tbody tr td:nth-child(1) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;

}
.payroll-summary-table thead tr th:nth-child(2),
.payroll-summary-table tbody tr td:nth-child(2) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(2):hover {
    overflow: visible;
    white-space: normal;
    
}
.payroll-summary-table thead tr th:nth-child(3),
.payroll-summary-table tbody tr td:nth-child(3) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(3):hover {
    overflow: visible;
    white-space: normal;
    
}
.payroll-summary-table thead tr th:nth-child(4),
.payroll-summary-table tbody tr td:nth-child(4) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(4):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(5),
.payroll-summary-table tbody tr td:nth-child(5) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(5):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(6),
.payroll-summary-table tbody tr td:nth-child(6) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(6):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(7),
.payroll-summary-table tbody tr td:nth-child(7) {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(7):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(8),
.payroll-summary-table tbody tr td:nth-child(8) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(8):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(9),
.payroll-summary-table tbody tr td:nth-child(9) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(9):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(10),
.payroll-summary-table tbody tr td:nth-child(10) {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-summary-table tbody tr td:nth-child(10):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(11),
.payroll-summary-table tbody tr td:nth-child(11) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(11):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(12),
.payroll-summary-table tbody tr td:nth-child(12) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-summary-table tbody tr td:nth-child(12):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(13),
.payroll-summary-table tbody tr td:nth-child(13) {
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-summary-table tbody tr td:nth-child(13):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-summary-table thead tr th:nth-child(14),
.payroll-summary-table tbody tr td:nth-child(14) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-summary-table tbody tr td:nth-child(14):hover {
    overflow: visible;
   white-space: normal;  
}


/*Payroll Breakup Table*/

@media only screen and (min-width: 1500px) {
.payroll-break-table {
 transform:scale(0.895) translate(-100px, -30px) !important;
    }

.payroll-break-table-height tbody {
        max-height: 590px !important;
        height: 590px !important;
    }
.payroll-break-table-height {
        max-height: 570px !important;
        height: 570px !important;
    }
}
@media only screen and (min-width: 1700px) {
.payroll-break-table {
 transform:scale(1) translate(0px, 5px) !important;
    }

.payroll-break-table-height tbody {
        max-height: 610px !important;
        height: 610px !important;
    }
.payroll-break-table-height {
        max-height: 660px !important;
        height: 660px !important;
    }
}

@media only screen and (max-width: 1366px) {
    .payroll-break-table-height {
        max-height: 500px !important;
        height: 500px !important;
    }
     .payroll-break-table-height tbody {
        max-height: 560px !important;
        height: 560px !important;
    }
}

.payroll-break-table {
 transform:scale(0.796) translate(-205px, -70px);
    
    }



.payroll-break-table thead tr th:nth-child(1),
.payroll-break-table tbody tr td:nth-child(1) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}

.payroll-break-table thead tr th:nth-child(2),
.payroll-break-table tbody tr td:nth-child(2) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-break-table tbody tr td:nth-child(2):hover {
    overflow: visible;
    white-space: normal;
    
}
.payroll-break-table thead tr th:nth-child(3),
.payroll-break-table tbody tr td:nth-child(3) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-break-table tbody tr td:nth-child(3):hover {
    overflow: visible;
    white-space: normal;
    
}
.payroll-break-table thead tr th:nth-child(4),
.payroll-break-table tbody tr td:nth-child(4) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.payroll-break-table tbody tr td:nth-child(4):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(5),
.payroll-break-table tbody tr td:nth-child(5) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(5):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(6),
.payroll-break-table tbody tr td:nth-child(6) {
    width: 130px;
    min-width: 130px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(6):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(7),
.payroll-break-table tbody tr td:nth-child(7) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(7):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(8),
.payroll-break-table tbody tr td:nth-child(8) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(8):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(9),
.payroll-break-table tbody tr td:nth-child(9) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(9):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(10),
.payroll-break-table tbody tr td:nth-child(10) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(10):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(11),
.payroll-break-table tbody tr td:nth-child(11) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(11):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(12),
.payroll-break-table tbody tr td:nth-child(12) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(12):hover {
    overflow: visible;
   white-space: normal;  
}

.payroll-break-table thead tr th:nth-child(13),
.payroll-break-table tbody tr td:nth-child(13) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(13):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(14),
.payroll-break-table tbody tr td:nth-child(14) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(14):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(15),
.payroll-break-table tbody tr td:nth-child(15) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.payroll-break-table tbody tr td:nth-child(15):hover {
    overflow: visible;
   white-space: normal;  
}
.payroll-break-table thead tr th:nth-child(16),
.payroll-break-table tbody tr td:nth-child(16) {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    text-align: center;
}


/*Leave Summary Table*/
.leavesummary-height tbody {
    max-height: 320px;
    height: 320px;
    margin-bottom: 25px;
}

.leavesummarytable {
    transform: scale(1.08) translate(50px, 10px);
}

@media only screen and (min-width: 1500px) {
    .leavesummary-height tbody {
    max-height: 320px;
    height: 320px;
    margin-bottom: 85px;
}

.leavesummarytable {
    transform: scale(1.21) translate(100px, 40px) !important;
}
}
@media only screen and (min-width: 1700px) {
    .leavesummary-height tbody {
    max-height: 320px;
    height: 320px;
    margin-bottom: 140px;
}

.leavesummarytable {
    transform: scale(1.35) translate(160px, 70px) !important;
}
}

/*FOOD COURT TABLE*/

.FoodCourtTable .dataTables_info {
    position: relative;
    left: 10px;
    font-size: 11px;

}
.Col9WidthSet .FoodCourtTable .dataTables_info {
    top: -182px;
}

  .Col12WidthSet .FoodCourtTable table  {
    transform: scale(0.98);

}


.FoodCourtTable table thead tr th {
    padding-right: 7px !important;
} 

.Col9WidthSet .FoodCourtTable table  {
    transform: scale(0.73) translate(-230px, -120px);

}

.Col9WidthSet .FoodCourtTable  {
  height: 67vh;
   max-height: 67vh;

}

.Col9WidthSet .FoodCourtTable table tbody  {
  height: 81.5vh;
   max-height: 81.5vh;
  

 
}

.Col12WidthSet .FoodCourtTable  {
 height: 67vh;
   max-height: 67vh;

}

.Col12WidthSet .FoodCourtTable table tbody  {
   height: 360px;
   max-height: 360px;
 
}
    .Col12WidthSet .FoodCourtTable .dataTables_info { 
    top: -16px;
    left: 15px;
}

@media only screen and (min-width: 1500px) {
    .Col9WidthSet .FoodCourtTable table  {
    transform: scale(0.82) translate(-135px, -70px);

}
    .Col9WidthSet .FoodCourtTable .dataTables_info {
   
    top: -120px;
   

}

.Col9WidthSet .FoodCourtTable  {
 height: 69vh;
   max-height: 69vh;

}

.Col9WidthSet .FoodCourtTable table tbody  {
      height: 81.5vh;
   max-height: 81.5vh;
 
}

.Col12WidthSet .FoodCourtTable  {
   height: 69vh;
   max-height: 69vh;

}

.Col12WidthSet .FoodCourtTable table tbody  {
   height: 58vh;
   max-height: 58vh;
 
}
    .Col12WidthSet .FoodCourtTable .dataTables_info { 
    top: -18px;
    left: 15px;
}
}
@media only screen and (min-width: 1700px) {


.Col9WidthSet .FoodCourtTable  {
 height: 72vh;
   max-height: 72vh;

}
    .Col9WidthSet .FoodCourtTable .dataTables_info { 
    top: -130px;
    left: 25px
}

.Col9WidthSet .FoodCourtTable table tbody  {
   height: 58vh;
   max-height: 58vh;
 
}

.Col12WidthSet .FoodCourtTable  {
   height: 72.2vh;
   max-height: 72.2vh;

}

.Col12WidthSet .FoodCourtTable table tbody  {
   height: 530px;
   max-height: 530px;
 
}
}



.FoodCourtTable table thead tr th:nth-child(2),
.FoodCourtTable table tbody tr td:nth-child(2) {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    text-align: center;
}
.FoodCourtTable table thead tr th:nth-child(3),
.FoodCourtTable table tbody tr td:nth-child(3) {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
} 
@media only screen and (min-width: 1500px) {
.Col12WidthSet .FoodCourtTable table thead tr th:nth-child(3),
.Col12WidthSet .FoodCourtTable table tbody tr td:nth-child(3) {
    width: 200px;
    min-width: 200px;
    max-width: 200px;
   
  
}
.Col12WidthSet .FoodCourtTable table thead tr th:nth-child(10),
.Col12WidthSet .FoodCourtTable table tbody tr td:nth-child(10) {
    width: 270px;
    min-width: 270px;
    max-width: 270px;
   
  
}
}
@media only screen and (min-width: 1700px) {
.Col9WidthSet .FoodCourtTable table thead tr th:nth-child(10),
.Col9WidthSet .FoodCourtTable table tbody tr td:nth-child(10) {
    width: 330px;
    min-width: 330px;
    max-width: 330px;
   
  
}
.Col12WidthSet .FoodCourtTable table thead tr th:nth-child(3),
.Col12WidthSet .FoodCourtTable table tbody tr td:nth-child(3) {
    width: 250px;
    min-width: 250px;
    max-width: 250px;
   
  
}
.Col12WidthSet .FoodCourtTable table thead tr th:nth-child(10),
.Col12WidthSet .FoodCourtTable table tbody tr td:nth-child(10) {
    width: 410px;
    min-width: 410px;
    max-width: 410px;
   
  
}
}
 
.FoodCourtTable table tbody tr:hover td {
    overflow: visible;
   white-space: normal;
   word-break: break-all;
}

.FoodCourtTable table thead tr th:nth-child(4),
.FoodCourtTable table tbody tr td:nth-child(4) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
} 

.FoodCourtTable table thead tr th:nth-child(5),
.FoodCourtTable table tbody tr td:nth-child(5) {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
  
} 

.FoodCourtTable table thead tr th:nth-child(6),
.FoodCourtTable table tbody tr td:nth-child(6) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
  
} 

.FoodCourtTable table thead tr th:nth-child(7),
.FoodCourtTable table tbody tr td:nth-child(7) {
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
  
} 

.FoodCourtTable table thead tr th:nth-child(8),
.FoodCourtTable table tbody tr td:nth-child(8) {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
  
} 

.FoodCourtTable table thead tr th:nth-child(9),
.FoodCourtTable table tbody tr td:nth-child(9) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center
  
} 

.FoodCourtTable table thead tr th:nth-child(10),
.FoodCourtTable table tbody tr td:nth-child(10) {
    width: 170px;
    min-width: 170px;
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
  
} 

.FoodCourtTable table thead tr th:nth-child(11),
.FoodCourtTable table tbody tr td:nth-child(11) {
    width: 80px;
    min-width: 80px;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  
} 

/*Image Cropper Style*/


.cr-vp-circle {
    outline: none !important;
}



#upload-demo{
	width: 100%;
	height: 500px;
    text-align: center;
    object-fit: cover;
    object-position: center;
  padding-bottom:50px;
}