/**
 * Written by Chewbrocca.
 * Date of Creation: 19 April 2019.
 * Date of Last Revision: 2025-11-12
 * Current Revision: 10
 * Comments:    (02) Revisions and clean up
 *              (03) Added classes and ids for admin nav and header views
 *              (04) Updates for Bootstrap additions
 *              (05) Updated many elements to accommodate smaller viewports
 *              (06) Added id for RZNET form
 *              (07) Renamed border classes to btn-out and created new border classes for colored borders
 *              (08) Added the cleanListing class (v1.5.26)
 *              (09) Removed navigation image styling, added the clickable class (v1.5.30)
 *              (10) Updated per_diem styling and added header gradient classes (v1.5.38)
                (11) Added shimmer styles (v1.5.44)
 */

/*
Colors:

Base Blue

#0063A4 Base Blue
#000F19 Dark Blue
#002943 Medium Dark Blue
#0FA0FF Medium Light Blue
#3EB3FF Light Blue

Base Green

#00B25D Base Green
#001C0E Dark Green
#004926 Medium Dark Green
#00FF84 Medium Light Green
#32FF9C Light Green

Base Dark Blue

#0009B2 Base Dark Blue
#00011C Dark Dark Blue
#000449 Medium Dark Dark Blue
#232EFF Medium Light Dark Blue
#4F58FF Light Dark Blue

*/


* {
    margin: 0;
}

body {
    font-family: 'Nanum Gothic', sans-serif;
}

/* Colors */
/* Greys */
.bg-base-grey {background-color: #999999}
.bg-dark-grey {background-color: #444444}
.bg-md-dk-grey {background-color: #666666}
.bg-md-lt-grey {background-color: #bbbbbb}
.bg-light-grey {background-color: #eeeeee}

.text-base-grey {color: #999999}
.text-dark-grey {color: #444444}
.text-md-dk-grey {color: #666666}
.text-md-lt-grey {color: #bbbbbb}
.text-light-grey {color: #eeeeee}

.header-gradient-1 {
    background-image: linear-gradient(to right, #000F19,#002943,#0063A4,#444444);
}

.header-gradient-2 {
    background-image: linear-gradient(to right, #FFFFFF,#bbbbbb,#999999);
}

.header-dkb-gradient-1 {
    background-image: linear-gradient(to right, #00011C,#000449,#0009B2,#444444);
}

.header-grn-gradient-1 {
    background-image: linear-gradient(to right, #004926,#001C0E,#00B25D);
}

/* Blues  */
.bg-base-blue {background-color: #0063A4}
.bg-dark-blue {background-color: #000F19}
.bg-md-dk-blue {background-color: #002943}
.bg-md-lt-blue {background-color: #0FA0FF}
.bg-light-blue {background-color: #3EB3FF}

.btn-base-blue {background-color: #0063A4; border: solid 1px #0063A4; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-dark-blue {background-color: #000F19; border: solid 1px #000F19; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-dk-blue {background-color: #002943; border: solid 1px #002943; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-lt-blue {background-color: #0FA0FF; border: solid 1px #0FA0FF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-light-blue {background-color: #3EB3FF; border: solid 1px #3EB3FF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #333; transition: 0.4s;}

.btn-base-blue:hover {background-color: #0FA0FF; border: solid 1px #0FA0FF; color: #333; transition: 0.4s;}
.btn-dark-blue:hover {background-color: #0063A4; border: solid 1px #0063A4; color: #FFF; transition: 0.4s;}
.btn-md-dk-blue:hover {background-color: #0063A4; border: solid 1px #0063A4; color: #FFF; transition: 0.4s;}
.btn-md-lt-blue:hover {background-color: #000F19; border: solid 1px #000F19; color: #FFF; transition: 0.4s;}
.btn-light-blue:hover {background-color: #002943; border: solid 1px #002943; color: #FFF; transition: 0.4s;}

.text-base-blue {color: #0063A4}
.text-dark-blue {color: #000F19}
.text-md-dk-blue {color: #002943}
.text-md-lt-blue {color: #0FA0FF}
.text-light-blue {color: #3EB3FF}

.btn-out-base-blue {background-color: #FFF; border: solid 1px #0063A4; border-radius: 4px; cursor: pointer; margin: 3px 0; padding: 6px 10px; color: #0063A4; transition: 0.4s;}
.btn-out-dark-blue {background-color: #FFF; border: solid 1px #000F19; border-radius: 4px; cursor: pointer; margin: 3px 0; padding: 6px 10px; color: #000F19; transition: 0.4s;}
.btn-out-md-dk-blue {background-color: #FFF; border: solid 1px #002943; border-radius: 4px; cursor: pointer; margin: 3px 0; padding: 6px 10px; color: #002943; transition: 0.4s;}
.btn-out-md-lt-blue {background-color: #FFF; border: solid 1px #0FA0FF; border-radius: 4px; cursor: pointer; margin: 3px 0; padding: 6px 10px; color: #0FA0FF; transition: 0.4s;}
.btn-out-light-blue {background-color: #FFF; border: solid 1px #3EB3FF; border-radius: 4px; cursor: pointer; margin: 3px 0; padding: 6px 10px; color: #3EB3FF; transition: 0.4s;}

.btn-out-base-blue:hover {border-color: #0063A4; background-color: #0063A4; color: #FFF; transition: 0.4s;}
.btn-out-dark-blue:hover {border-color: #000F19; background-color: #000F19; color: #FFF; transition: 0.4s;}
.btn-out-md-dk-blue:hover {border-color: #002943; background-color: #002943; color: #FFF; transition: 0.4s;}
.btn-out-md-lt-blue:hover {border-color: #0FA0FF; background-color: #0FA0FF; color: #FFF; transition: 0.4s;}
.btn-out-light-blue:hover {border-color: #3EB3FF; background-color: #3EB3FF; color: #FFF; transition: 0.4s;}

.border-base-blue {border-color: #0063A4}
.border-dark-blue {border-color: #000F19}
.border-md-dk-blue {border-color: #002943}
.border-md-lt-blue {border-color: #0FA0FF}
.border-light-blue {border-color: #3EB3FF}

/* Greens  */

.bg-base-green {background-color: #00B25D}
.bg-dark-green {background-color: #001C0E}
.bg-md-dk-green {background-color: #004926}
.bg-md-lt-green {background-color: #00FF84}
.bg-light-green {background-color: #32FF9C}

.btn-base-green {background-color: #00B25D; border: solid 1px #00B25D; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-dark-green {background-color: #001C0E; border: solid 1px #001C0E; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-dk-green {background-color: #004926; border: solid 1px #004926; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-lt-green {background-color: #00FF84; border: solid 1px #00FF84; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-light-green {background-color: #32FF9C; border: solid 1px #32FF9C; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #333; transition: 0.4s;}

.btn-base-green:hover {background-color: #00FF84; border: solid 1px #00FF84; color: #333; transition: 0.4s;}
.btn-dark-green:hover {background-color: #00B25D; border: solid 1px #00B25D; color: #FFF; transition: 0.4s;}
.btn-md-dk-green:hover {background-color: #00B25D; border: solid 1px #00B25D; color: #FFF; transition: 0.4s;}
.btn-md-lt-green:hover {background-color: #001C0E; border: solid 1px #001C0E; color: #FFF; transition: 0.4s;}
.btn-light-green:hover {background-color: #004926; border: solid 1px #004926; color: #FFF; transition: 0.4s;}

.text-base-green {color: #00B25D}
.text-dark-green {color: #001C0E}
.text-md-dk-green {color: #004926}
.text-md-lt-green {color: #00FF84}
.text-light-green {color: #32FF9C}

.border-base-green {background-color: #FFF; border: solid 1px #00B25D; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #00B25D; transition: 0.4s;}
.border-dark-green {background-color: #FFF; border: solid 1px #001C0E; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #001C0E; transition: 0.4s;}
.border-md-dk-green {background-color: #FFF; border: solid 1px #004926; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #004926; transition: 0.4s;}
.border-md-lt-green {background-color: #FFF; border: solid 1px #00FF84; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #00FF84; transition: 0.4s;}
.border-light-green {background-color: #FFF; border: solid 1px #32FF9C; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #32FF9C; transition: 0.4s;}

.border-base-green:hover {border-color: #00B25D; background-color: #00B25D; color: #333; transition: 0.4s;}
.border-dark-green:hover {border-color: #001C0E; background-color: #001C0E; color: #FFF; transition: 0.4s;}
.border-md-dk-green:hover {border-color: #004926; background-color: #004926; color: #FFF; transition: 0.4s;}
.border-md-lt-green:hover {border-color: #00FF84; background-color: #00FF84; color: #333; transition: 0.4s;}
.border-light-green:hover {border-color: #32FF9C; background-color: #32FF9C; color: #333; transition: 0.4s;}

/* Dark Blues */

.bg-base-dk-blue {background-color: #0009B2}
.bg-dark-dk-blue {background-color: #00011C}
.bg-md-dk-dk-blue {background-color: #000449}
.bg-md-lt-dk-blue {background-color: #232EFF}
.bg-light-dk-blue {background-color: #4F58FF}

.btn-base-dk-blue {background-color: #0009B2; border: solid 1px #0009B2; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-dark-dk-blue {background-color: #00011C; border: solid 1px #00011C; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-dk-dk-blue {background-color: #000449; border: solid 1px #000449; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-lt-dk-blue {background-color: #232EFF; border: solid 1px #232EFF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-light-dk-blue {background-color: #4F58FF; border: solid 1px #4F58FF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #333; transition: 0.4s;}

.btn-base-dk-blue:hover {background-color: #232EFF; border: solid 1px #232EFF; color: #333; transition: 0.4s;}
.btn-dark-dk-blue:hover {background-color: #0009B2; border: solid 1px #0009B2; color: #FFF; transition: 0.4s;}
.btn-md-dk-dk-blue:hover {background-color: #0009B2; border: solid 1px #0009B2; color: #FFF; transition: 0.4s;}
.btn-md-lt-dk-blue:hover {background-color: #00011C; border: solid 1px #00011C; color: #FFF; transition: 0.4s;}
.btn-light-dk-blue:hover {background-color: #000449; border: solid 1px #000449; color: #FFF; transition: 0.4s;}

.text-base-dk-blue {color: #0009B2}
.text-dark-dk-blue {color: #00011C}
.text-md-dk-dk-blue {color: #000449}
.text-md-lt-dk-blue {color: #232EFF}
.text-light-dk-blue {color: #4F58FF}

.btn-out-base-dk-blue {background-color: #FFF; border: solid 1px #0009B2; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #0009B2; transition: 0.4s;}
.btn-out-dark-dk-blue {background-color: #FFF; border: solid 1px #00011C; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #00011C; transition: 0.4s;}
.btn-out-md-dk-dk-blue {background-color: #FFF; border: solid 1px #000449; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #000449; transition: 0.4s;}
.btn-out-md-lt-dk-blue {background-color: #FFF; border: solid 1px #232EFF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #232EFF; transition: 0.4s;}
.btn-out-light-dk-blue {background-color: #FFF; border: solid 1px #4F58FF; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #4F58FF; transition: 0.4s;}

.btn-out-base-dk-blue:hover {border-color: #0009B2; background-color: #0009B2; color: #FFF; transition: 0.4s;}
.btn-out-dark-dk-blue:hover {border-color: #00011C; background-color: #00011C; color: #FFF; transition: 0.4s;}
.btn-out-md-dk-dk-blue:hover {border-color: #000449; background-color: #000449; color: #FFF; transition: 0.4s;}
.btn-out-md-lt-dk-blue:hover {border-color: #232EFF; background-color: #232EFF; color: #333; transition: 0.4s;}
.btn-out-light-dk-blue:hover {border-color: #4F58FF; background-color: #4F58FF; color: #333; transition: 0.4s;}

.border-base-dk-blue {border-color: #0009B2}
.border-dark-dk-blue {border-color: #00011C}
.border-md-dk-dk-blue {border-color: #000449}
.border-md-lt-dk-blue {border-color: #232EFF}
.border-light-dk-blue {border-color: #4F58FF}

/* Reds  */
.bg-base-red { background-color: #AD1616 }
.bg-light-red { background-color: #E85B5B }
.bg-md-lt-red { background-color: #D23030 }
.bg-md-dk-red { background-color: #8B0101 }
.bg-dark-red { background-color: #610000 }

.btn-base-red {background-color: #AD1616; border: solid 1px #AD1616; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-light-red {background-color: #E85B5B; border: solid 1px #E85B5B; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #333; transition: 0.4s;}
.btn-md-lt-red {background-color: #D23030; border: solid 1px #D23030; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-md-dk-red {background-color: #8B0101; border: solid 1px #8B0101; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}
.btn-dark-red {background-color: #610000; border: solid 1px #610000; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #FFF; transition: 0.4s;}

.btn-base-red:hover {background-color: #D23030; border: solid 1px #D23030; color: #FFF; transition: 0.4s;}
.btn-light-red:hover {background-color: #610000; border: solid 1px #610000; color: #FFF; transition: 0.4s;}
.btn-md-lt-red:hover {background-color: #8B0101; border: solid 1px #8B0101; color: #FFF; transition: 0.4s;}
.btn-md-dk-red:hover {background-color: #AD1616; border: solid 1px #AD1616; color: #FFF; transition: 0.4s;}
.btn-dark-red:hover {background-color: #AD1616; border: solid 1px #AD1616; color: #FFF; transition: 0.4s;}

.border-base-red {background-color: #FFF; border: solid 1px #AD1616; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #AD1616; transition: 0.4s;}
.border-light-red {background-color: #FFF; border: solid 1px #E85B5B; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #E85B5B; transition: 0.4s;}
.border-md-lt-red {background-color: #FFF; border: solid 1px #D23030; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #D23030; transition: 0.4s;}
.border-md-dk-red {background-color: #FFF; border: solid 1px #8B0101; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #8B0101; transition: 0.4s;}
.border-dark-red {background-color: #FFF; border: solid 1px #610000; border-radius: 4px; cursor: pointer; padding: 6px 10px; color: #610000; transition: 0.4s;}

.border-base-red:hover {border-color: #AD1616; background-color: #AD1616; color: #FFF; transition: 0.4s;}
.border-dark-red:hover {border-color: #E85B5B; background-color: #E85B5B; color: #333; transition: 0.4s;}
.border-md-dk-red:hover {border-color: #D23030; background-color: #D23030; color: #333; transition: 0.4s;}
.border-md-lt-red:hover {border-color: #8B0101; background-color: #8B0101; color: #FFF; transition: 0.4s;}
.border-light-red:hover {border-color: #610000; background-color: #610000; color: #FFF; transition: 0.4s;}

.text-base-red { color: #AD1616 }
.text-light-red { color: #E85B5B }
.text-md-lt-red { color: #D23030 }
.text-md-dk-red { color: #8B0101 }
.text-dark-red { color: #610000 }

.tiny_text {
    font-size: 9px;
}

.small_text {
    font-size: 12px;
}

.medium_text {
    font-size: 16px;
}

.large_text {
    font-size: 24px;
}

.clickable {
    cursor: pointer;
}

.form-ctrl {
    border: solid 1px #999;
    border-radius: 3px;
    padding: 6px 2px;
    width: auto;
}

.add_button {
    background-color: #FFF;
    border-color: #eee;
    color: #00B25D;
    padding: 2px 8px;
    transition: 0.4s;
}

.add_button:hover {
    background-color: #00B25D;
    border-color: #00B25D;
    color: #FFF;
    transition: 0.4s;
}

.remove_button {
    background-color: #FFF;
    border-color: #eee;
    color: #AD1616;
    padding: 2px 8px;
    transition: 0.4s;
}

.remove_button:hover {
    background-color: #AD1616;
    border-color: #AD1616;
    color: #FFF;
    transition: 0.4s;
}

.form-ctrl {
    border: solid 1px #999;
    border-radius: 3px;
    padding: 6px 2px;
    width: auto;
}

.wrapper {
    clear: left;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.header, .header_upload, .admin_header, .office_header {
    background-color: rgb(0, 95, 164);
    color: #FFF;
    display: inline-block;
    height: 160px;
    text-align: center;
    width: 100%;
}

.admin_header {
    background-color: #00B25D;
}

.office_header {
    background-color: #0009B2;
}

.header_upload, .header_logo {
    background-color: #0FA0FF;
    color: #111;
    display: inline-block;
}

.header h1, .header_upload h1 {
    font-weight: 300;
    padding-top: 5px;
}

.header>small, .header_upload>small {
    display: block;
}

.header_logo> {
    width: 400px;
}

.footer {
    background-color: #A0A0A0;
    clear: both;
    height: 75px;
    margin: 30px 0 0 0;
    padding: 30px 0;
    position: relative;
    bottom: 0;
    text-align: center;
    width: 100%;
}

.content-container {
    clear: left;
    min-height: 1080px;
    margin-left: 250px;
    width: auto;
}

@media only screen and (max-width: 1199px) {
    .content-container {
        clear: both;
        min-height: 1080px;
        margin-left: 0px;
        width: auto;
    }
    .header, .header_upload, .admin_header, .office_header {
        height: 180px;
        margin-top: 15px;
        padding: 10px 0px;
    }
    .header_upload {
        height: 200px;
    }
}

#emp_accord, #non_sts_accord {
}

.active {
    background-color: rgb(0, 95, 164);
}

.active:hover {
    background-color: rgb(0, 95, 164);
    color: #FFF;
}

#emp_content,
#emp_summaries,
#admin_content,
#sts_content {
    background-color: #999;
    height: 0;
    margin: 0;
    width: 100%;
    overflow: hidden;
    transition: 0.5s;
    visibility: hidden;
}

#emp_content>ul,
#emp_summaries>ul,
#admin_content>ul,
#sts_content>ul,
#report_content>ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

#emp_content>ul>li,
#emp_summaries>ul>li,
#admin_content>ul>li,
#sts_content>ul>li,
#report_content->ul>li {
    display: block;
    margin: 0;
    padding: 0;
}

#emp_content>ul>li>a,
#emp_summaries>ul>li>a,
#admin_content>ul>li>a,
#sts_content>ul>li>a,
#report_content>ul>li>a {
    color: #333;
    display: block;
    margin: 0;
}

#emp_content>ul>li>a:hover,
#emp_summaries>ul>li>a:hover,
#admin_content>ul>li>a:hover,
#sts_content>ul>li>a:hover,
#report_content>ul>li>a:hover {
    background-color: #FFF;
}

.nav_separator {
    background-color: #666;
    border-bottom: solid 3px #002943;
    border-right: solid 1px #333;
    margin: 0;
    padding: 0;
}

.nav_separator>p {
    color: #c9c9c9;
    font-weight: 300;
    padding: 15px 2px 0;
    text-align: center;
}

.notify {
    margin: 4px;
    padding: 8px;
    position: fixed;
    top: 0;
    right: -1200px;
    min-width: 400px;
    max-width: 1200px;
    z-index: 1000;
}






























.formBody {
    display: -ms-flexbox;
    display: -webkit-box;
    display: flex;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: rgba(0, 99, 164, 1);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 4;
}
.loginBody {
    background-color: #0063A4;
}

.loginBody>img {
    display: block;
    margin: auto;
    padding: 75px 0 55px;
    width: 400px;
}

.loginWrap {
    background-color: #00011C;
    margin: 2% auto;
    padding: 25px 0 50px;
    width: 100%;
}

.loginForm {
    margin: auto;
    width: 500px;
}

.loginForm>h2 {
    background-color: #FFF;
    border: solid 1px #111;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: #111;
    padding: 12px 0;
    text-align: center;
}

.loginForm>#logintip {
    display: inline-block;
    position: relative;
    top: 43px;
    left: 440px;
}

.loginForm>form {
    background-color: #FFF;
    border: solid 1px #999;
    border-top: solid 1px #111;
    border-radius: 0 0 6px 6px;
    width: auto;
}

.loginForm>form>.loginInput {
    display: block;
    margin: auto;
    width: 295px;
}

.loginForm>form>.loginInput>label {
    display: inline-block;
    font-size: 18px;
    margin: 15px;
    padding: 5px;
    width: 80px;
}

.loginForm>form>.loginInput>input {
    border: none;
    border-bottom: solid 1px #eee;
    font-size: 18px;
    margin: 0 3px;
    outline: none;
    padding: 5px;
    width: 150px;
}

.loginForm>form>button {
    background-color: #002943;
    border: solid 1px #002943;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    display: block;
    font-size: 18px;
    margin: 15px auto;
    padding: 10px 30px;
    width: 220px;
}

.loginForm>form>button:hover {
    background-color: #FFF;
    border: solid 1px #002943;
    color: #002943;
}

.tooltip, .logtip {
    display: none;
    position: relative;
}

.logfailtip {
    display: inline;
    position: relative;
}

.tooltip .tooltiptext {
    background-color: #FFF;
    border: solid 1px #eee;
    border-radius: 0;
    color: #0063A4;
    height: auto;
    padding: 5px 0;
    position: absolute;
    top: 6px;
    left: 450px;
    text-align: center;
    transition: 0.6s;
    width: 180px;
    visibility: visible;
    z-index: 1;
}

.logtip .loginText, .logfailtip .loginText {
    background-color: #FFF;
    border: solid 1px #eee;
    border-radius: 0;
    color: #AD1616;
    height: auto;
    padding: 5px 0 5px 8px;
    position: absolute;
    top: -20px;
    left: 400px;
    width: 380px;
    text-align: left;
    z-index: 1;
}

.logtip>img, .loginText>img {
    display: inline;
    margin-right: 3px;
    position: relative;
    top: 2px;
}

.logtip>p, .loginText>p {
    display: inline;
    position: relative;
    top: -5px;
}

/*.tooltip:hover .tooltiptext {
  visibility: visible;
}*/

.tooltip .tooltiptext::after, .logtip .loginText::after, .logfailtip .loginText::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #eee transparent transparent;
}

@media only screen and (max-width: 1199px) {
    .loginForm {
        margin: auto;
        width: 350px;
    }
    .loginForm>h2 {
        background-color: #FFF;
        border: solid 1px #111;
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        color: #111;
        font-size: 20px;
        padding: 10px 0;
        text-align: center;
    }
    .loginForm>#logintip {
        display: none;
    }
    .loginForm>form>.loginInput>label {
        font-size: 16px;
    }

    .loginForm>form>.loginInput>input {
        font-size: 16px;
    }
}



























































nav {
    background-color: #333;
    color: #FFF;
}

nav>ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav>ul>li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

nav>ul>li a {
    color: #FFF;
    display: block;
    padding: 8px;
    text-decoration: none;
}

nav>ul>li a:hover {
    background-color: #eee;
    color: #000;
    text-decoration: none;
}

.formNav {
    height: 100%;
    padding: 0;
    position: fixed;
    width: 250px;
    z-index: 2;
}

.formNav>ul {
    list-style: none;
}

.formNav>ul,
.formNav>ul>li {
    display: block;
    margin: 0;
    padding: 0;
}

.formNav>ul>li>a {
    display: block;
    font-size: 14px;
    margin: 0;
    padding: 16px 8px;
}

#issue_badge_clear, #issue_badge {
    background-color: #00B25D;
    border-radius: 50%;
    color: #FFF;
    cursor: pointer;
    padding: 2px 7px 4px;
    position: relative;
    top: -7px;
    left: 3px;
}

#issue_badge {
    background-color: #AD1616;
}

.clearBtn, .historyBtn {
    background-color: rgba(255,255,255,0);
    border: solid 1px #999;
    border-radius: 3px;
    color: #111;
    cursor: pointer;
    font-size: 15px;
    padding: 4px 6px;
    text-decoration: none;
}

.historyBtn {
    border: none;
}

.clearBtn>.clearBtnX {
    color: #111;
    font-size: 15px;
}

.clearBtn>a {
    color: #333;
    text-decoration: none;
}

.navActive {
    background-color: rgb(0, 95, 164);
    color: #333;
}

/*.formNav>ul>li>a #empMore, .formNav>ul>li>a #measureMore, .formNav>ul>li>a #exitImg, .formNav>ul>li>a #summaryMore, .formNav>ul>li>a #adminMore {
    display: inline;
    margin: -4px 0 0 0;
    position: relative;
    top: 4px;
    left: 132px;
}

.formNav>ul>li>a #adminMore {
    left: 107px;
}

.formNav>ul>li>a #measureMore {
    left: 89px;
}

.formNav>ul>li>a #exitImg {
    left: 156px;
}

.formNav>ul>li>a #payMore {
    margin: -8px 0 0 0;
    padding: 0;
    position: relative;
    top: 6px;
    left: 80px;
}*/

#create_payroll {
    background-color: #FFF;
    border: solid 1px #999;
    color: #333;
    height: 350px;
    overflow: hidden;
    padding: 8px;
    position: absolute;
    top: 36px;
    left: 250px;
    transition: 0.2s;
    width: 0;
    visibility: hidden;
}

#create_payroll>form>label {
    display: inline-block;
    margin: 6px 0;
    width: 120px;
}

#create_payroll>form>input, #create_payroll>form>textarea {
    border: solid 1px #eee;
    color: #eee;
    font-size: 14px;
    font-family: 'Nanum Gothic', sans-serif;
    outline: none;
    width: 160px;
}

#create_payroll>form>#periodDescription {
    font-size: 16px;
    width: 280px;
}

#create_payroll>form>button {
    background-color: #FFF;
    border: solid 1px #00011C;
    border-radius: 3px;
    color: rgb(0, 95, 164);
    cursor: pointer;
    margin-top: 4px;
    padding: 6px 10px;
}

#create_payroll>form>button:hover {
    background-color: rgb(0, 95, 164);
    color: #FFF;
}

#payrollToolTip {
    margin-top: -40px;
    padding: 0;
    position: relative;
    top: 46px;
    left: 300px;
}

#payrollTTMsg {
    background-color: #333;
    color: #FFF;
    height: 241px;
    overflow: hidden;
    padding: 3px 6px;
    position: absolute;
    top: 0;
    left: 350px;
    text-align: justify;
    transition: 0.1s;
    width: 0;
    visibility: hidden;
}

#payrollToolTip #payrollTTMsg::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%; /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #eee transparent transparent;
}

#payrollTTMsg>h3 {
    margin: 0 0 6px;
}

#payrollTTMsg>p {
    margin: 0 0 6px;
}

























#howToPayroll {
    clear: both;
    padding: 5px;
    width: 97.7%;
}

#howToPayroll>h2 {
    border-bottom: solid 3px #002943;
    color: #002943;
    font-size: 30px;
    font-weight: 300;
    margin: 6px 0;
    padding: 9px 3px;
}

#howToPayroll>h2>span {
    cursor: pointer;
    font-size: 16px;
    margin-left: 15px;
    padding: 4px 6px;
}

#howToPayroll>h2>span:hover {
    background-color: #eee;
    border-radius: 3px;
}

#howToPayroll>#explination {
    clear: both;
    display: none;
    width: 100%;
}

#howToPayroll>#explination>h3 {
    background-color: #eee;
    color: #002943;
    font-size: 24px;
    font-weight: 300;
    margin: 3px 0;
    padding: 6px 3px;
}

#howToPayroll>#explination>h4 {
    background-color: #FFF;
    border: solid 1px #002943;
    color: #002943;
    cursor: pointer;
    font-size: 18px;
    font-weight: 300;
    margin: 2px 0;
    padding: 12px 3px;
    width: auto;
}

#howToPayroll>#explination>h4:hover {
    background-color: #002943;
    color: #FFF;
}

#howToPayroll>#explination>#payrollCreate,
#howToPayroll>#explination>#uAttendUpload,
#howToPayroll>#explination>#nonStsWork,
#howToPayroll>#explination>#empApproval {
    clear: both;
    height: 0;
    margin: 0 0 4px 0;
    overflow: hidden;
    transition: 0.7s;
    width: 100%;
    visibility: hidden;
}

#howToPayroll>#explination>#payrollCreate>p,
#howToPayroll>#explination>#uAttendUpload>p,
#howToPayroll>#explination>#nonStsWork>p,
#howToPayroll>#explination>#empApproval>p {
    margin: 2px 0;
    padding: 4px 0;
}

#howToPayroll>#explination>#payrollCreate>ol,
#howToPayroll>#explination>#uAttendUpload>ol,
#howToPayroll>#explination>#nonStsWork>ol,
#howToPayroll>#explination>#empApproval>ol {
    margin: 0;
}

#howToPayroll>#explination>#payrollCreate>ol>li,
#howToPayroll>#explination>#uAttendUpload>ol>li,
#howToPayroll>#explination>#nonStsWork>ol>li,
#howToPayroll>#explination>#empApproval>ol>li {
    margin: 4px 0;
    padding: 2px 0;
}

#howToPayroll>#explination>#uAttendUpload>p:last-of-type,
#howToPayroll>#explination>#nonStsWork>p:last-of-type {
    color: #AD1616;
    font-style: italic;
}

.dashContainer {
    float: left;
    width: 100%;
}

.dashuAttend, .dashESAP, .dashMFEER, .dashSTS {
    border: solid 1px #999;
    border-radius: 4px;
}

.dashCorporate {
    border: solid 1px #999;
    border-radius: 4px;
    float: left;
    height: auto;
    margin: 5px;
    padding: 10px;
    width: 100%;
}

.corporateDetails {
    border: solid 1px #999;
    display: none;
    width: auto;
}

.corpDetailBtn {
    background: rgba(0, 0, 0, 0);
    border: none;
    color: #333;
    cursor: pointer;
    transition: 0.6s;
}

.corpDetailBtn:hover {
    color: #0063A4;
    transition: 0.6s;
}

.processPayrollBtn {
    background-color: #004926;
    border: solid 1px #004926;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    margin: 5px 0;
    padding: 8px 14px;
    transition: 0.6s;
}

.processPayrollBtn:hover {
    background-color: #00B25D;
    border: solid 1px #00B25D;
    color: #333;
    transition: 0.6s;
}

#processMsg {
    background-color: rgba(3, 3, 3, 0.5);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

#processMsgShown {
    background-color: rgba(3, 3, 3, 0.5);
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.processMsgBlock {
    margin: 8% auto;
    padding: 10px;
    width:  200px;
}

.processMsgBlock>p {
    color: #FFF;
    padding: 10px 0;
}

.processing {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #0063A4; /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    -webkit-animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#staticProcessMsg {
    background-color: rgba(3, 3, 3, 0.5);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
}

.staticProcessMsgBlock {
    height: auto;
    margin: 8% auto;
    padding: 10px;
    width:  auto;
}

.staticProcessMsgBlock>p {
    color: #333;
    text-align: center;
    padding: 10px 0;
}

.staticProcessing {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #0063A4; /* Blue */
    border-radius: 50%;
    height: 60px;
    margin: 8% auto;
    width: 60px;
    animation: staticSpin 2s linear infinite;
    -webkit-animation: staticSpin 2s linear infinite;
}

@-webkit-keyframes staticSpin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes staticSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#returnMsg {
    display: none;
    width: 100%;
}

.payrollSummaryTbl {
    margin: 15px 0;
}

.payrollSummaryTbl>table {
    border-collapse: collapse;
    width: 100%;
}

.payrollSummaryTbl>table>thead tr {
    background-color: #002943;
    color: #FFF;
}

.payrollSummaryTbl>table>thead th {
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    padding: 8px 0;
}

.payrollSummaryTbl>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

.payrollSummaryTbl>table>tbody>tr>td {
    font-size: 12px;
    font-weight: 300;
    padding: 5px 0;
    text-align: center;
}

#esapOverride, #mfeerOverride, #sceCamOverride {
    background-color: #FFF;
    border: solid 1px #999;
    border-radius: 4px;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    font-weight: 300;
    margin: 5px 0;
    padding: 9px 10px;
}

#esapOverride:hover, #mfeerOverride:hover, #sceCamOverride:hover {
    background-color: #999;
    color: #FFF;
}

.dashPayroll {
    width: 100%;
}

.dashuAttend, .dashESAP, .dashMFEER, .dashSTS {
    width: 100%;
}

.dashPayrollHeader,
.dashSTSHeader {
    background-color: #eee;
}

.dashESAPHeader,
.dashMFEERHeader {
    background-color: #00B25D;
}

.dashuAttendHeader,
.dashCorporateHeader {
    background-color: #002943;
    color: #FFF;
}

.dashCorpQPMHeader {
    background-color: #0063A4;
    color: #FFF;
}

.dashPayrollHeader,
.dashuAttendHeader,
.dashESAPHeader,
.dashMFEERHeader,
.dashSTSHeader,
.dashCorpQPMHeader {
    border-radius: 4px 4px 0 0;
    margin: -8px -8px 0;
    padding: 24px 8px;
}

.dashuAttend>h3,
.dashESAP>h3,
.dashMFEER>h3,
.dashSTS>h3 {
    font-weight: 300;
    padding: 8px 0;
}

.dashuAttend>h3>img, .dashESAP>h3>img, .dashMFEER>h3>img, .dashSTS>h3>img {
    position: relative;
    top: 15px;
}

.dashPayroll>form>small {
    font-size: 10px;
    font-style: italic;
    margin: 8px 0;
}

.dashPayroll>form>input {
    margin: 10px 0;
}

.dashPayroll>form>p,
.dashuAttend>p,
.dashESAP>p,
.dashMFEER>p,
.dashSTS>p {
    color: #999;
    font-style: italic;
    padding: 10px 0;
}

.dashPayroll>form>table,
.dashuAttend>table,
.dashESAP>table,
.dashMFEER>table,
.dashSTS>table {
    border-collapse: collapse;
    color: #999;
    font-style: italic;
}

.dashPayroll>form>table>tbody>tr>th,
.dashuAttend>table>tbody>tr>th,
.dashESAP>table>tbody>tr>th,
.dashMFEER>table>tbody>tr>th,
.dashSTS>table>tbody>tr>th {
    text-align: right;
}

.dashPayroll>form>table>tbody>tr>td,
.dashuAttend>table>tbody>tr>td,
.dashESAP>table>tbody>tr>td,
.dashMFEER>table>tbody>tr>td,
.dashSTS>table>tbody>tr>td {
    margin: 5px 0;
    padding: 5px;
}

#non_sts_csv_help, #non_sts_edit_help, #non_sts_reports_help, #office_admin_edit_help, #time_sheet_upload_help {
    cursor: pointer;
}

#non_sts_help_content, #non_sts_edit_help_content, #non_sts_reports_help_content, #office_admin_edit_help_content, #time_sheet_upload_help_content {
    display: none;
}

.dashPayroll>form>button {
    background-color: #00B25D;
    border: solid 1px #00B25D;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    margin: 5px 0;
    padding: 6px 18px;
}

.dashSTS>button {
    background-color: #004926;
    border: solid 1px #004926;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    margin: 5px 0;
    padding: 18px 24px;
}

.dashPayroll>form>button:hover {
    background-color: #FFF;
    color: #00B25D;
}

.dashSTS>button:hover {
    background-color: rgba(0, 73, 38, 0.3);
    color: #111;
}

#approvalMsg {
    display: none;
    width: 80%;
}

.dashPayroll>h3 {
    font-weight: 300;
    padding: 8px 0;
}

.dashPayroll>p {
    margin: 10px 0;
}

.formMessageGood, .formMessageBad {
    display: block;
    height: auto;
    margin: auto;
    width: 700px;
}

.formMessageGood>h3 {
    display: block;
    background-color: #CCFFCC;
    border-radius: 3px;
    font-weight: 300;
    margin: 8px auto;
    padding: 15px;
    text-align: center;
    width: 600px;
}

.formMessageBad>h3 {
    display: block;
    background-color: #FFCCCC;
    border-radius: 3px;
    font-weight: 300;
    margin: 8px auto;
    padding: 15px;
    text-align: center;
    width: 600px;
}

.formMessageGood>span, .formMessageBad>span {
    background-color: #FFF;
    border-radius: 50%;
    color: #999;
    cursor: pointer;
    font-size: 12px;
    font-weight: 300;
    font-family: sans-serif;
    padding: 4px 8px;
    position: relative;
    top: -45px;
    left: 590px;
    opacity: 0.8;
    text-align: right;
}

.formMessageGood>span:hover, .formMessageBad>span:hover {
    opacity: 1;
}















































.departmentform {
    height: 500px;
    margin: 20px auto;
    padding: 0;
    width: 500px;
}

.departmentform h3 {
    border-bottom: solid 3px rgb(142, 209, 251);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 8px;
    padding: 8px 0;
    text-align: center;
}

.departmentform>label {
    display: inline-block;
    font-family: sans-serif;
    font-weight: 300;
    margin: 4px;
    padding: 4px;
    width: 180px;
}

.departmentform>input {
    border: solid 1px #eee;
    display: inline-block;
    padding: 4px;
    outline: none;
}

.departmentform>button {
    background-color: #009900;
    border: none;
    border-radius: 3px;
    color: #FFF;
    display: block;
    margin: 8px;
    padding: 8px;
}

.departmentform>button:hover {
    background-color: #99FF99;
    color: #000;
}

.departmentform>#area_code {
    width: 30px;
}

.departmentform>#prefix {
    width: 53px;
}

.departmentform>#last4 {
    width: 80px;
}

.departmentform>select {
    background-color: #FFF;
    border-radius: 3px;
    border: solid 1px #eee;
    padding: 4px;
    width: 240px;
}


























.empTable {
    border: none;
    border-collapse: collapse;
    height: 100%;
    padding: 0 5px;
    width: 100%;
}

.empTable>thead th {
    background-color: #999;
    padding: 6px 0;
    text-align: left;
}

.empTable>tbody tr:nth-of-type(even) {
    background-color: #eee;
}

.empTable>tbody tr:hover {
    background-color: #B0E2FF;
    cursor: pointer;
}

.empTable>tbody tr td {
    padding: 16px 0 16px 2px;
}

#modalContainer {
    background-color: rgba(0,0,0,0.7);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2
}

#modalBox {
    background-color: #FFF;
    height: 675px;
    margin: 1% auto;
    padding: 25px 0 0 0;
    width: 700px;
    opacity: 1;
    z-index: 3;
}

#modalBox>form {
    border: solid 1px #333;
    height: 600px;
    margin: auto;
    padding: 10px;
    width: 600px;
}

#modalBox>.officeform h3 {
    border-bottom: solid 3px rgb(142, 209, 251);
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 8px;
    padding: 8px 0;
    text-align: center;
}

#modalBox>form>label {
    display: inline-block;
    font-family: sans-serif;
    font-weight: 300;
    margin: 6px 0;
    padding: 4px;
    width: 120px;
}

#modalBox>form>input {
    border: solid 1px #999;
    display: inline-block;
    margin: 6px 0;
    padding: 4px;
    outline: none;
    width: 120px;
}

#modalBox>form>#first, #modalBox>form>#last, #modalBox>form>#empNum, #modalBox>form>#hire {
    width: 150px;
}

#modalBox>form>#email, #modalBox>form>#empAddr {
    width: 300px;
}

#modalBox>form>#empCity {
    width: 150px;
}

#modalBox>form>#empState {
    width: 50px;
}

#modalBox>form>#empZip {
    width: 75px;
}

#modalBox>form>button {
    background-color: #009900;
    border: none;
    border-radius: 3px;
    color: #FFF;
    display: inline-block;
    margin: 8px;
    padding: 8px;
}

#modalBox>form>button:hover {
    background-color: #99FF99;
    color: #777;
}

#modalBox>form>#cxl {
    background-color: #FFF;
    border: solid 1px #B0E2FF;
    border-radius: 3px;
    color: #B0E2FF;
    display: inline-block;
    margin: 8px;
    padding: 8px;
}

#modalBox>form>#cxl:hover {
    background-color: #eee;
    color: #B0E2FF;
}




































.empProfile {
    width: 100%;
}

.empProfile>h1 {
    padding: 20px 0 10px;
    text-align: center;
}

.empProfile>table, .empProfile>form>table {
    border-collapse: collapse;
    margin: 30px auto auto;
    width: 85%;
}

.empProfile>table>thead th, .empProfile>form>table>thead th {
    background-color: #002943;
    color: #FFF;
}

#uni_employees_tbl>tbody>tr>td {
    margin: 10px 0;
    padding: 15px 0;
}

#uni_employees_tbl>tbody>tr>td>select {
    background-color: #eee;
    border: solid 1px #999;
    border-radius: 3px;
    height: 20px;
    padding: 8px 5px;
    width: 90%;
}

.empProfile>#clearAll {
    background-color: #eee;
    margin: 15px auto auto;
    padding: 10px 0;
    width: 85%;
}

.empProfile>#clearAll>span, .empProfile>#clearAll>button {
    display: inline-block;
}

.empProfile>#clearAll>span {
    padding: 0 10px;
}

.clearAllBtn {
    background-color: #AD1616;
    border: solid 1px #AD1616;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    font-weight: 300;
    padding: 6px 10px;
    transition: 0.6s;
}

.clearAllBtn:hover {
    background-color: #FFC1C1;
    color: #333;
    transition: 0.6s;
}

.empProfile>#clearAll>.clearAllBtn {
    background-color: #AD1616;
    border: solid 1px #AD1616;
    border-radius: 3px;
    color: #FFF;
    cursor: pointer;
    font-weight: 300;
    padding: 6px 10px;
}

.empProfile>#clearAll>.clearAllBtn:hover {
    background-color: #FFC1C1;
    color: #333;
}

#updateMessage {
    margin: 10px 0;
}

.issueHeader {
    margin: auto auto 20px;
    width: 85%;
}

.issueHeader>h1 {
    border-bottom: solid 6px #002943;
    margin: 10px 0 20px;
}

.issueHeader>ul {
    border-top: solid 2px #eee;
    border-left: solid 2px #eee;
    border-right: solid 2px #eee;
    border-radius: 3px;
    list-style: none;
    margin: 10px 0;
    padding: 0;
    width: 300px;
}

.issueHeader>ul>li  {
    border-bottom: solid 2px #eee;
    padding: 8px 4px;
}

.issueHeader>#missingPayroll>p, .issueHeader>#missingRate>p, .issueHeader>#missingMeasures>p {
    padding: 8px 0;
}

.issueHeader>#missingPayroll>ol, .issueHeader>#missingRate>ol, .issueHeader>#missingMeasures>ol {
    margin: 10px 0;
}

.issueHeader>#missingPayroll>ol>li, .issueHeader>#missingRate>ol>li, .issueHeader>#missingMeasures>ol>li {
    padding: 4px;
}

.issueHeader>h2 {
    color: #0063A4;
    margin: 8px 0 15px
}

.issueHeader>h3 {
    color: #000449;
    margin: 4px 0 10px;
}

.issueFocus {
    border: solid 1px rgb(15, 160, 255);
    box-shadow: 1px 0 8px rgba(15, 160, 255, 0.3);
}

.issueFocus>td>input {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    font-size: 15px;
    outline: none;
    text-align: center;
}

.promptContainer, .payIDContainer {
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
}

.promptContainer>.clearPrompt, .payIDContainer>.idPrompt {
    background-color: #FFF;
    border-radius: 3px;
    color: #333;
    height: 100px;
    margin: 10px 33%;
    width: 350px;
}

.promptContainer>.clearPrompt>p, .payIDContainer>.idPrompt>p:first-of-type {
    background-color: #000F19;
    border-bottom: solid 1px #000F19;
    border-radius: 3px 3px 0 0;
    color: #FFF;
    margin-bottom: 10px;
    padding: 8px 0;
    text-align: center;
}

.promptContainer>.clearPrompt>button, .payIDContainer>.idPrompt>button {
    border-radius: 3px;
    margin-left: 15px;
    outline: none;
    padding: 6px 10px;
}

.payIDContainer>.idPrompt {
    height: 150px;
}

.payIDContainer>.idPrompt>p:last-of-type {
    margin-left: 15px;
    text-align: left;
}

.promptContainer>.clearPrompt>button:first-of-type, .payIDContainer>.idPrompt>button:first-of-type {
    border: solid 1px #00C957;
}

.promptContainer>.clearPrompt>button:first-of-type:hover, .payIDContainer>.idPrompt>button:first-of-type:hover {
    background-color: #BDFCC9;
}

.promptContainer>.clearPrompt>button:last-child, .payIDContainer>.idPrompt>button:last-child {
    border: solid 1px #AD1616;
}

.promptContainer>.clearPrompt>button:last-child:hover, .payIDContainer>.idPrompt>button:last-child:hover {
    background-color: #FFC1C1;
}

.empProfile>form>table>tbody>tr>td>input {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    font-size: 15px;
    outline: none;
    text-align: center;
}

.empEditBtn, .empSaveBtn {
    background-color: rgba(255, 255, 255, 0);
    border: solid 1px #999;
    border-radius: 3px;
    color: #333;
    cursor: pointer;
    font-size: 14px;
    margin: 2px 0;
    outline: none;
    padding: 4px 8px;
}

.empSaveBtn {
    border: solid 1px #004926;
}

.empEditBtn:hover {
    background-color: #0FA0FF;
    border: solid 1px #0FA0FF;
    color: #FFF;
}

.empEditBtn:active {
    background-color: #002943;
    border: solid 1px #002943;
}

.empSaveBtn:hover {
    background-color: #00B25D;
    border: solid 1px #00B25D;
    color: #FFF;
}

.empSaveBtn:active {
    background-color: #004926;
    border: solid 1px #004926;
}

.empEditActive {
    box-shadow: 1px 0 8px rgba(0, 0, 0, 0.5);
    height: 60px;
    position: relative;
    transition: 0.5s;
    width: auto;
}

#summaryMessage,
#bulkDeletionsForm {
    display: none;
}

#bulkMessages {
    display: none;
    height: 70px;
    width: 100%;
}

#bulkDeletions {
    cursor: pointer;
}

.employeeBox {
    float: left;
    height: 100%;
    width: 100%;
}

.employeeInfo, .qpmInfo {
    border: solid 2px #eee;
    border-radius: 3px;
    height: auto;
    margin: 5px 5px 150px;
    padding: 0 0 5px;
}

.qpmInfo {
    border: none;
}

#qpmMessage {
    display: none;
}

.employeeInfo>h1 {
    background-color: #FFF;
    color: #111;
    padding: 5px;
}

.employeeInfo>h1>span>.aprvPay,
.employeeSummary>table>tfoot>tr>td>.aprvPay,
.employeeSummary>table>tfoot>tr>td>.disAprvPay,
.employeeSummary>table>tbody>tr>td>.aprvPay {
    background-color: #00B25D;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 15px;
    padding: 8px 12px;
    position: relative;
    transition: 0.6s;
}

.employeeSummary>table>tfoot>tr>td>.aprvPay,
.employeeSummary>table>tfoot>tr>td>.disAprvPay,
.employeeSummary>table>tbody>tr>td>.aprvPay{
    margin-left: 0;
    top: 0;
}

.disAprvPay {
    background-color: #FFF;
    border: solid 1px #AD1616;
    border-radius: 4px;
    color: #AD1616;
    cursor: pointer;
    margin-left: 15px;
    padding: 8px 12px;
    position: relative;
    transition: 0.6s;
}

.disAprvPay:hover {
    background-color: #AD1616;;
    color: #FFF;
    transition: 0.6s;
}

.disAprvPay {
    background-color: #FFF;
    border: solid 1px #AD1616;
    border-radius: 4px;
    color: #AD1616;
    cursor: pointer;
    margin-left: 15px;
    padding: 8px 12px;
    position: relative;
    transition: 0.6s;
}

.disAprvPay:hover {
    background-color: #AD1616;;
    color: #FFF;
    transition: 0.6s;
}

.employeeSummary>table>tfoot>tr>td>.disAprvPay {
    background-color: #FFF;
    border: solid 1px #AD1616;
    color: #AD1616;
}

.employeeInfo>h1>span>.aprvPay:hover,
.employeeSummary>table>tfoot>tr>td>.aprvPay:hover,
.employeeSummary>table>tbody>tr>td>.aprvPay:hover {
    background-color: #00FF84;
    transition: 0.6s;
}

.employeeSummary>table>tfoot>tr>td>.disAprvPay:hover {
    background-color: #AD1616;
    color: #FFF;
    transition: 0.3s;
}

.employeeInfo>h1>span>.aprvPay:active,
.employeeSummary>table>tfoot>tr>td>.aprvPay:active,
.employeeSummary>table>tbody>tr>td>.aprvPay:active {
    background-color: #004926;
}

.employeeSummary>table>tfoot>tr>td>.disAprvPay:active {
    background-color: #FFC1C1;
    color: #AD1616;
}

.employeeSummary .qpmBonusBtn {
    background-color: #0063A4;
    border: none;
    border-radius: 4px;
    color: #FFF;
    cursor: pointer;
    padding: 8px 12px;
    transition: 0.6s;
}

.employeeSummary .qpmBonusBtn:hover {
    background-color: #0FA0FF;
    transition: 0.6s;
}

.employeeSummary .qpmBonusBtn:active {
    background-color: #002943;
}

.employeeInfo>h1>span>.editSplit {
    background-color: #0063A4;
    border: none;
    border-radius: 4px;
    color: #FFF;
    cursor: pointer;
    margin-left: 15px;
    padding: 8px 12px;
    position: relative;
    top: -5px;
    transition: 0.6s;
}

.employeeInfo>h1>span>.editSplit:hover {
    background-color: #0FA0FF;
    transition: 0.6s;
}

.employeeInfo>h1>span>.editSplit:active {
    background-color: #002943;
}

.employeeInfo>h1>span>.editSplit:disabled {
    color: #999;
}

.employeeInfo>p {
    color: #111;
    display: inline-block;
    padding: 3px;
    text-align: right;
    width: 220px;
}

.employeeInfo>table {
    border-collapse: collapse;
    width: 100%;
}

.employeeInfo>table>thead th {
    background-color: #002943;
    color: #FFF;
    padding: 14px 8px;
}

.employeeInfo>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

.employeeInfo>table>tbody>tr>th {
    font-weight: 300;
}

.employeeInfo>p+span {
    color: #111;
    padding: 3px;
}

#employeeSummary, .employeeBtn {
    display: block;
}

.employeeBtn {
    margin: 5px 0;
}

#employeeSummary {
    margin: 5px 0;
}

.employeeSummary>table>tbody>tr>td>input {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    font-size: 16px;
    font-weight: 300;
    width: 33px;
}

.employeeSummary>table>tbody>tr>td>#qpmName, .employeeSummary>table>tbody>tr>td>#qpmPercent {
    text-align: center;
    width: 100%;
}

#adjustmentsForm, #perDiemForm, #bonusForm {
    background-color: rgba(0, 15, 25, 0.8);
    display: none;
    /*height: 0;*/
    padding: 5px;
    /*transition: 0.4s;*/
}

#bonusForm {
    display: block;
}

#qpmAdjustments {
    background-color: rgba(0, 15, 25, 0.8);
    float: left;
    margin: 5px 0;
    /*height: 0;*/
    padding: 5px;
    /*transition: 0.4s;*/
    width: 100%;
}

#perDiemForm {
    /*background-color: rgba(0, 99, 164, 0.3);*/
    background-color: #FFFFFF;
}

#adjustmentsForm>label,
#perDiemForm>label,
#adjustmentsForm>input,
#perDiemForm>input,
#adjustmentsForm>select,
#perDiemForm>select,
#qpmAdjustments>label,
#qpmAdjustments>input,
#qpmAdjustments>select {
    display: inline-block;
    font-size: 16px;
    font-weight: 300;
    margin: 8px 0;
    padding: 4px;
}

#adjustmentsForm>label,
#perDiemForm>label,
#adjustmentsForm>button,
#perDiemForm>button,
#qpmAdjustments>label,
#qpmAdjustments>button {
    margin: 0 15px;
}

#adjustmentsForm>label,
#perDiemForm>label,
#qpmAdjustments>label {
    color: #FFF;
    width: 200px;
}

#adjustmentsForm>input,
#adjustmentsForm>select,
#perDiemForm>input,
#perDiemForm>select,
#qpmAdjustments>input,
#qpmAdjustments>select {
    border: solid 1px #eee;
    border-radius: 2px;
    outline: none;
}

#adjustmentsForm>select,
#perDiemForm>select,
#qpmAdjustments>select {
    background-color: #FFF;
}

#adjustmentsForm>input:last-of-type,
#qpmAdjustments>input:last-of-type
{
    margin-right: 10px;
    width: 320px;
}

#adjustmentsForm>button,
#perDiemForm>button,
#qpmAdjustments>button {
    background-color: #00B25D;
    border: solid 1px #00B25D;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    padding: 6px 10px;
    transition: 0.3s;
}

#adjustmentsForm>button:hover,
#perDiemForm>button:hover,
#qpmAdjustments>button:hover {
    background-color: #FFF;
    transition: 0.3s;
}

.editContainer, .deleteContainer {
    background-color: rgba(0, 0, 0, 0.4);
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

.editContainer>.editAdjustment,
.deleteContainer>.deleteAdjustment {
    background-color: #FFF;
    border-radius: 3px;
    color: #333;
    display: block;
    height: auto;
    margin: 10px 33%;
    position: absolute;
    top: -30%;
    width: auto;
    z-index: 100;
}

/*.deleteContainer>.deleteAdjustment {
    height: 220px;
    width: 430px;
}*/

.editContainer>.editAdjustment>h3,
.deleteContainer>.deleteAdjustment>h3 {
    background-color: #00011C;
    border-radius: 3px 3px 0 0;
    color: #FFF;
    padding: 8px 0;
    position: relative;
    text-align: center;
}

.editContainer>.editAdjustment>h3>span,
.deleteContainer>.deleteAdjustment>h3>span {
    position: absolute;
    cursor: pointer;
    right: 15px;
}

.deleteContainer>.deleteAdjustment>p {
    font-size: 18px;
    padding: 5px 10px;
}

.editContainer>.editAdjustment>form {
    padding: 5px;
}

.editContainer>.editAdjustment>form>label {
    display: inline-block;
    margin: 3px 0;
    padding: 5px 0;
    width: 75px;
}

.editContainer>.editAdjustment>form>input {
    border: solid 1px #999;
    border-radius: 3px;
    font-size: 16px;
    outline: none;
    padding: 5px 3px;
}

.editContainer>.editAdjustment>form>button, .deleteContainer>.deleteAdjustment>button {
    background-color: #00B25D;
    border: solid 1px #eee;
    border-radius: 4px;
    cursor: pointer;
    margin: 5px 0;
    padding: 8px 16px;
    transition: 0.3s;
}

.deleteContainer>.deleteAdjustment>button {
    margin: 5px 10px;
}

.editContainer>.editAdjustment>form>button:hover,
.deleteContainer>.deleteAdjustment>button:hover {
    background-color: #32FF9C;
    border: solid 1px #00B25D;
    transition: 0.3s;
}

.editContainer>.editAdjustment>form>#adjAmount {
    width: 52px;
}

.editContainer>.editAdjustment>form>#adjDate {
    width: 115px;
}

#employeeWorkTbl, .employeeMeasuresTbl {
    display: none;
}

.employeeMeasuresTbl {
    display: block;
    width: 97.7%;
}

.employeeBtn>button, .issueBtn, .qpmBtn {
    background-color: #FFF;
    border: solid 2px #eee;
    color: #0063A4;
    cursor: pointer;
    font-size: 20px;
    font-weight: 300;
    outline: none;
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

.qpmBtn {
    display: block;
    margin: 3px 0;
    transition: 0.6s;
}

.qpmBtn:hover {
    background-color: #eee;
    text-decoration: none;
    transition: 0.6s;
}

.qpmBtn:active {
    background-color: #888;
}

.issueBtn {
    background-color: #eee;
    text-align: left;
}

#missingPayroll, #missingRate, #missingMeasures, #duplicateHVAC, #duplicateRecords, #failedFormSubmissions, #invalidDates {
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    width: 100%;
    visibility: hidden;
}

.employeeBtn>button:hover {
    background-color: #eee;
}

.employeeWorkTbl>table, .employeeSummary>table, .employeeMeasuresTbl>table {
    border-collapse: collapse;
    margin: 5px 0 15px;
    width: 100%;
}

.employeeWorkTbl>table>thead th, .employeeSummary>table>thead th, .employeeMeasuresTbl>table>thead th, .empProfile>table>thead th, .empProfile>form>table>thead th {
    background-color: #002943;
    color: #FFF;
    padding: 14px 8px;
}

.employeeWorkTbl>table>tbody>tr:nth-of-type(even), .employeeSummary>table>tbody>tr:nth-of-type(even), .employeeMeasuresTbl>table>tbody>tr:nth-of-type(even), .empProfile>table>tbody>tr:nth-of-type(even), .empProfile>form>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

.empProfile>table>tbody>tr>td>button {
    background-color: #FFF;
    border: solid 1px #eee;
    border-radius: 4px;
    color: #333;
    cursor: pointer;
    padding: 4px 8px;
    transition: 0.5s;
    width: 53px;
}

.empProfile>table>tbody>tr>td>button:hover {
    background-color: #3EB3FF;
    transition: 0.5s;
}

.employeeWorkTbl>table>tbody>tr>td, .employeeSummary>table>tbody>tr>td, .employeeMeasuresTbl>table>tbody>tr>td, .empProfile>table>tbody>tr>td, .empProfile>table>tfoot>tr>td, .empProfile>form>table>tbody>tr>td {
    padding: 4px 0;
    text-align: center;
}

.page {
    clear: both;
    margin: 10px auto;
    padding-top: 10px;
    width: 95%;
}

.page>a {
    border: solid 1px #eee;
    color: #111;
    display: inline-block;
    margin: 0;
    padding: 10px 16px;
    text-decoration: none;
    text-align: center;
    width: 200px;
}

.page>a:first-of-type {
    border-radius: 3px 0 0 0;
}

.page>a:last-of-type {
    border-radius: 0 0 3px 0;
}

.page>a:hover {
    background-color: #002943;
    color: #FFF;
}

.page>.current {
    background-color: #002943;
    color: #FFF;
}

.no-time {
    background-color: #FFF;
    color: #111;
    margin: 20px 0 10px;
    padding: 20px 0 60px;
    text-align: center;
    width: 100%;
}

.no-time>h1 #exclaim {
    margin: 0 7px;
    padding: 8px 15px;
    position: relative;
    top: -3px;
}

#hours_summary_explained_trigger {
    cursor: pointer;
}

#hours_summary_explained_container {
    display: none;
    width: 100%;
}





























.csvForm {
    margin: 16px auto;
    width: 500px;
}

.csvForm>form>label, .csvFrom>form>input {
    display: inline-block;
    margin: 10px 0;
    padding: 10px 2px;
}

.csvForm>form>label #uploadImg>img {
    margin: 2px 4px;
    position: relative;
    top: 10px;
}

.csvForm>form>input, .csvForm>form>input:hover {
    cursor: pointer;
    outline: none;

}

.csvForm>form>.disAprvPay {
    background-color: #FFF;
    border: solid 1px #AD1616;
    border-radius: 3px;
    color: #AD1616;
    cursor: pointer;
    display: inline;
    margin: 10px 5px;
    padding: 8px 10px;
    transition: 0.6s;
}

.csvForm>form>.disAprvPay:hover {
    background-color: #AD1616;
    color: #FFF;
    transition: 0.6s;
}

.csvForm>#mfeerHeaderContainer {
    margin: auto;
    width: 500px;
}

.csvForm>#mfeerHeaderContainer>#mfeerHeaderList {
    background-color: #ddd;
    border: solid 1px #999;
    cursor: pointer;
    margin: 10px 0;
    padding: 5px;
    text-align: center;
    transition: 0.4s;
}

.csvForm>#mfeerHeaderContainer>#mfeerHeaderList:hover {
    background-color: #FFF;
    border: solid 1px #999;
    transition: 0.4s;
}

.csvForm>#mfeerHeaderContainer>#show_mfeerHeaderList {
    display: none;
    width: 100%;
}

.csvForm>#mfeerHeaderContainer>#show_mfeerHeaderList>ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.csvForm>#mfeerHeaderContainer>#show_mfeerHeaderList>ul>li {
    border: solid 1px #eee;
    padding: 5px;
    width: 100%;
}

.pass, .error, .warn, .notice {
    display: block;
    margin: 15px auto;
    padding: 16px 8px;
    width: 60%;
}

.pass {
    background-color: #BDFCC9;
    border-left: solid 4px #00C957;
}

.pass>ul {
    list-style: none;
    padding: 0;
}

.pass>ul>li {
    padding: 8px;
}

.error {
    background-color: #FFC1C1;
    border-left: solid 4px #AD1616;
}

.warn {
    background-color: #FFFACD;
    border-left: solid 4px #FFF68F;
}

.notice {
    background-color: #F7F7F7;
    border-left: solid 4px #A9A9A9;
}

.error>p, .pass>p, .warn>p, .notice>p {
    padding: 0 0 0 8px;
    text-align: left;
}

.error>p {
    font-weight: bold;
}

.error>ul, .warn>ul, .notice>ul {
    list-style: none;
    margin: 6px 0 0 32px;
    padding: 0;
}

.error>ul>li, .warn>ul>li, .notice>ul>li {
    display: block;
    margin: 0;
    padding: 12px 0 12px 6px;
}

.error>ul>li {
    background-color: #F7F7F7;
    border-left: solid 4px #AD1616;
    margin: 2px 0;
    width: 60%;
}

.error>table {
    border-collapse: collapse;
    width: 100%;
}

.error>table>thead th {
    background-color: #AD1616;
    color: #FFF;
    padding: 10px 0;
}

.error>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

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

.error>table>tbody>tr td {
    padding: 5px 0;
    text-align: center;
}

.activeMeasure {
    background-image: linear-gradient(to right, #00B25D, #00FF84, #32FF9C, #F2F2F2, rgba(250,250,250, 0.5), rgba(255, 255, 255, 0));
    -webkit-background-image: linear-gradient(to right, #00B25D, #00FF84, #32FF9C, #F2F2F2, rgba(250,250,250, 0.5), rgba(255, 255, 255, 0));
    -moz-background-image: linear-gradient(to right, #00B25D, #00FF84, #32FF9C, #F2F2F2, rgba(250,250,250, 0.5), rgba(255, 255, 255, 0));
}

.inactiveMeasure {
    background-image: linear-gradient(to right, rgba(173, 22, 22, 1), rgba(139, 1, 1, 0));
    -webkit-background-image: linear-gradient(to right, rgba(173, 22, 22, 1), rgba(139, 1, 1, 0));
    -moz-background-image: linear-gradient(to right, rgba(173, 22, 22, 1), rgba(139, 1, 1, 0));
}

.csvWarn {
    padding: 10px 0;
    text-align: center;
    width: 100%;
}

.csvWarn>h1 {
    color: #AD1616;
    margin-bottom: 10px;
    padding: 10px 0 0;
    text-align: center;
}

.csvWarn>h1>img {
    position: relative;
    top: 0px;
}

.csvWarn>p {
    font-style: italic;
    padding: 10px 0;
}

.csvWarn>p:last-child {
    font-size: 20px;
    font-weight: bold;
}


























































/*.program_select {
    margin-bottom: 8px;
    padding: 8px;
}

.program_select>form {
    margin: auto;
    width: 650px;
}


.program_select>form>label, .program_select>form>input, .program_select>form>select {
    margin: 4px 4px 4px 0;
    padding: 4px;
    width: 200px;
}

.program_select>form>input, .program_select>form>select {
    width: 400px;
}*/

.measure_details>h2 {
    background-color: rgba(0, 41, 67, 0.9);
    color: #FFF;
    font-size: 48px;
    font-weight: 300;
    margin: 8px 0;
    padding: 8px 0;
    text-align: center;
}

.measure_details, .measure_details>form {
    width: 100%;
}

.measure_details>form>table {
    border-collapse: collapse;
    margin: 25px auto;
    width: 75%;
}

.measure_details>form>table>thead #measure_description {
    width: 550px;
}

.measure_details>form>table>thead {
    background-color: #002943;
}

.measure_details>form>table>thead th {
    color: #FFF;
    padding: 10px 0;
    text-align: center;
}

.measure_details>form>table>tbody>tr {
    border-bottom: solid 1px #eee;
}

.measure_details>form>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

.measure_details>form>table>tbody>tr>td>input {
    border: none;
    color: #111;
    font-size: 14px;
    font-weight: 300;
    margin: 4px 0;
    padding: 4px;
    width: 550px;
}

.measure_details>form>table>tbody>tr>td>input:disabled {
    color: #111;
}

.measure_details>form>table>tbody>tr>td>.pay_amt, .measure_details>form>table>tbody>tr>td>.bonus_pt {
    background-color: rgba(255,255,255,0);
    border: none;
    margin: auto 25%;
    text-align: center;
    width: 80px;
}

.measure_details>form>table>tbody>tr>td>.measure_name {
    background-color: rgba(255,255,255,0);
}

#measure_edit, #measure_edit_submit {
    float: right;
    clear: both;
    margin: 15px auto;
    width: auto;
}

#measure_edit_submit {
    display: none;
}

#measure_edit>#edit_btn {
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin: 4px;
    padding: 10px 12px;
    position: relative;
}

#measure_edit_submit>#cxl_btn, #measure_edit_submit>#sub_btn {
    border-radius: 3px;
    cursor: pointer;
    margin: 4px;
    padding: 10px 12px;
    position: relative;
}

@media only screen and (max-width: 1199px) {
    #measure_edit, #measure_edit_submit {
        float: left;
        clear: left;
        margin: 0px;
        width: 64px;
    }
    #measure_edit>#edit_btn {
        border: none;
        border-radius: 3px;
        cursor: pointer;
        margin: 0px;
        padding: 10px 12px;
        position: relative;
        left: 0px;
    }
    #measure_edit_submit>#cxl_btn, #measure_edit_submit>#sub_btn {
        border-radius: 3px;
        cursor: pointer;
        margin: 0px;
        padding: 10px 12px;
        position: relative;
        left: 0px;
    }
}

/*#measure_edit_submit>#cxl_btn {
    background-color: #eee;
}

.program_select>form>button:hover, #measure_edit>#edit_btn:hover {
    background-color: #777;
    color: #FFF;
}

#measure_edit_submit>#sub_btn:hover {
    background-color: #004926;
    color: #FFF;
}

#measure_edit_submit>#cxl_btn:hover {
    background-color: #999;
    color: #FFF;
}*/





























#viewMsg {
    display: none;
    margin: 12px auto;
    width: 80%;
}

.payrollHistory {
    margin: auto;
    width: 85%;
}

.payrollHistory>table {
    border-collapse: collapse;
    margin: 15px 0;
    width: 100%;
}

.payrollHistory>table>thead {
    background-color: #333;
    color: #FFF;
}

.payrollHistory>table>thead th {
    padding: 10px 0;
}

.payrollHistory>table>tbody>tr:nth-of-type(even) {
    background-color: #eee;
}

.payrollHistory>table>tbody>tr td {
    padding: 6px 0;
    text-align: center;
}

.payHistoryLink {
    color: #333;
    text-decoration: none;
    transition: 0.4s;
}

.payHistoryLink:hover {
    color: #999;
    text-decoration: none;
    transition: 0.4s;
}

.payHistoryDisplayWrapper {
    display: none;
    width: 100%;
}

.payHistoryDisplayBox {
    display: none;
    width: 100%;
}
























.paystubView {
    margin: auto;
    width: 100%;
}

.paystubView>h2 {
    margin: 5px 0 10px;
}

.paystubView>a {
    color: #333;
    text-decoration: none;
}

.paystubView>p {
    padding: 5px 0;
}

.paystubView>ul {
    list-style: none;
}

.paystubView>ul>li {
    border-left: solid 3px #eee;
    margin: 5px 0;
    padding: 5px;
}

.paystubs {
    margin: 12px auto;
    width: 100%;
}

.paystubBtn {
    display: block;
    margin: auto;
    width: 72%;
}

.paystubBtn>button {
    background-color: #FFF;
    border: solid 1px #eee;
    cursor: pointer;
    font-size: 20px;
    margin: 5px 0;
    padding: 16px 0;
    transition: 0.6s;
    width: 100%;
}

.paystubBtn>button:hover {
    background-color: #eee;
    transition: 0.6s;
}

.paystubList {
    display: none;
    margin: 5px auto;
    width: 72%
}

.paystubList>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.paystubList>ul>li {
    background-color: #FFF;
    border: solid 1px #eee;
    padding: 12px 8px 12px;
    transition: 0.6s;
}

.paystubList>ul>li:first-of-type {
    border-radius: 3px 3px 0 0;
}

.paystubList>ul>li:last-of-type {
    border-radius: 0 0 3px 3px;
}

.paystubList>ul>li:hover {
    background-color: #3EB3FF;
    cursor: pointer;
    transition: 0.6s;
}

.stubs {
    display: none;
    padding: 16px 0;
}

.stubs>ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.stubs>ul>li {
    margin: 2px;
    padding: 5px 3px;
}

.stubs>ul>li>a {
    border: none;
    color: #333;
    margin: 0 5px 0 0;
    padding: 6px 18px;
    text-decoration: none;
}

.pdf_img {
    padding-left: 15px;
    position: relative; top: -10px;
}

.special_alert_styling {
    margin: auto;
    width: 85%;
}

.not-visible{
    display: none;
}

/*#add_nspp_jobOrder {
    display: none;
}*/

#hourly_call_center {
    display: none;
}
#commission_only {
    display: none;
}

#rznetMultiFamRecordForm {
    display: none;
}

.scrollTable {
    overflow-y: auto;
    height: 600px;
}

.scrollTable-long {
    overflow-y: auto;
    max-height: 1522px;
}

.scrollTable thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.scrollTable-long thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

#full-non-sts-form {
    display: none;
}

.cleanListing {
    margin-left: 0;
    list-style: none;
}

.form-header-fill {
    border-radius: 4px 4px 0 0;
    margin: -8px -8px 0;
}

.explanation_blue {
    background-color: #eeeeee;
    border-left: #0063A4 3px solid;
    padding: 5px 0 5px 5px;
}

.shimmer { position: relative; overflow: hidden; background: #f6f7f8; }
.shimmer::after {
    content: ""; position: absolute; top: 0; left: -150px; height: 100%; width: 150px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 50%, rgba(255,255,255,0) 100%);
    animation: shimmer 1.25s infinite; opacity: 0.6;
}
@keyframes shimmer { 0% { left: -150px; } 100% { left: 100%; } }
td.editable { cursor: pointer; }
td.editable.dblhint::after { content: " (dbl‑click to toggle)"; color: #6c757d; font-size: .85em; }
#toastContainer { position: fixed; top: 1rem; right: 1rem; z-index: 1080; }

/* Fade-in animation for rows */
@keyframes fadeInRow {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeInRow 0.3s ease forwards;
}

/* Smooth fade-out + collapse animation for rows */
.fade-out {
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
}

.fade-out.hide {
    opacity: 0;
    transform: translateY(-10px);
    height: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    overflow: hidden;
}