* { box-sizing: border-box; -moz-box-sizing: border-box; font-family: 'Lato', sans-serif;}

body {font-size: 14px; font-family: 'Lato', sans-serif; margin: 0; background: #002144;}

.mobileContainer { }

header { background:#fff; padding: 10px; position: fixed; left: 0; right: 0;}
    header img { max-width: 60%; display: inline-block;}

    header #kebab a {
        font-size: 1.4em;
        text-decoration: none;
        color: #002144;
        cursor: pointer;
    }

    header #kebab {
        position: relative;
        display: block;
        box-sizing: border-box;
        top: 8px;
        padding: 0 16px;
    }

    header #dropdown {
        position: absolute;
        right: 0.5em;
        top: 3em;
        width: 25%;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
        text-align: center;
    }

    header #dropdown a {      
        color: #002144;
        text-decoration: none;
        cursor: pointer;
    }

#mainContent { position:absolute; top: 90px; bottom: 0; left: 0; right: 0; overflow: auto; background: rgb(0,33,68);
background: -moz-linear-gradient(-45deg,  rgba(0,33,68,1) 0%, rgba(0,3,35,1) 100%);
background: -webkit-linear-gradient(-45deg,  rgba(0,33,68,1) 0%,rgba(0,3,35,1) 100%);
background: linear-gradient(135deg,  rgba(0,33,68,1) 0%,rgba(0,3,35,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002144', endColorstr='#000323',GradientType=1 );
}

.centerTextOuterContainer {display: table; height: 100%; width: 100%;}
.centerTextContainer {display: table-cell; vertical-align: middle;}

.logContainer {
    height: 200px;
    color:#fff;
    font-size: 14px;
    z-index:2;
    padding: 0 1rem;
    margin: 0rem 1rem 1.5rem;
    overflow-y: scroll;
}

table#log-table {border-collapse: collapse;}
table#log-table th {border-bottom: 1px solid #fff; border-left: 1px solid #fff;padding-bottom:0.3rem;}
table#log-table th:first-child { border-left: 0} 
table#log-table tr td {padding: 0.3rem 0.5rem;}
table#log-table tr td:nth-of-type(2) {border-left: 1px solid #fff; border-right: 1px solid #fff;}

.welcome { color:#ffd800; text-align:center; padding: 0;}
.current-time { font-size: 60px; font-weight: 900; text-align:center; color:#fff;}

.upper-container {padding: 22px 20px; text-align: center;}

.action-container { text-align:center; padding: 20px 20px 50px;}
.action-container a, .upper-container a {display:block; background:#109F82; border-radius: 5px; -moz-border-radius: 5px; margin: 0 auto; color:#fff; text-decoration: none; padding: 15px 20px; font-weight: 700; text-transform: uppercase;}


#details { position:absolute;  top: 100%; bottom: 0; left: 20px; right: 20px; overflow: auto; background: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; padding: 30px;}

.formItemTitle { font-size: 1.5em; color:#fff; font-weight: 900; padding-bottom: 15px;}

.formItem {margin-bottom: 12px; }
    .formItem label { display:block; margin-bottom: 7px; text-transform: uppercase; font-weight: 900; font-size: .8em;}
    .formItem select, .formItem input[type="text"], .formItem input[type="email"], .formItem input[type="password"], .formItem input[type="date"] , .formItem input[type="time"]  { width: 100%; padding: 10px;}
    .formItem textarea { width: 100%; height: 75px; padding: 10px;}

    .formItem input[type="submit"] { display:block; background:#109F82; border-radius: 5px; -moz-border-radius: 5px; margin: 0 auto; color:#fff; text-decoration: none; padding: 15px 20px; font-weight: 900; text-transform: uppercase; border: 0; width: 100%; font-size: 1em;}
    .formItem.cancel { margin-top: 50px; text-align: center;}
        .formItem.cancel a { color:#999; text-transform:uppercase; font-weight: 700; text-decoration: none; font-size: .8em;}

    .formItem select option {font-size: 14px; font-family:'Lato', sans-serif; font-weight:400;}


.formItem2 {margin-top: 4rem;}
    .formItem2 input[type="button"] { display:inline-block; background:#109F82; border-radius: 5px; -moz-border-radius: 5px; margin: 2rem; color:#fff; text-decoration: none; padding: 15px 20px; font-weight: 900; text-transform: uppercase; border: 0; width: 80%; font-size: 1em;}
.formItemTitle2 { font-size: 1.5em; color:#fff; font-weight: 900; padding-bottom: 15px; margin: 2rem;}

#thank-you { 
    display:none;
    color:#002144;
    padding: 2rem;
}

#thank-you .formItemTitle, #form-details .formItemTitle, #leave-status .formItemTitle { color:#002144;}

.width50 { float:left; width: 47.5%;}
    .width50:last-child { float:right;}

.width50a:first-child { float:left; width: 57.5%;}
.width50a:last-child { float:right; width: 37.5%;}

.clear-after:after {clear:both; content:""; display:block;}
.float-left { float:left;}
.float-right { float:right;}

/* .formItemTitle { color:#fff;} */

.loginContainer, .forgotPasswordContainer { padding: 0 30px 50px; color:#fff;}
.loginContainer a, .forgotPasswordContainer a { color:#ffd800}

select.invalid, input.invalid, textarea.invalid {  
    border-width: 2px;
    border: red;  
    box-shadow: 0px 0px 0px 2px red;
    box-sizing: border-box;
}

/* #sub-employee, #reason {background-color: #F0F0F0;} */

.table-container {width:100%;max-height:300px;overflow-y:scroll;}

table#leave-records {border-collapse: collapse;}
table#leave-records th {border-bottom: 1px solid #002144; border-left: 1px solid #002144;padding-bottom:0.3rem;}
table#leave-records th:first-child { border-left: 0} 
table#leave-records tr td, tr th {padding: 0.3rem 0.5rem;}
table#leave-records tr td:nth-of-type(2) {border-left: 1px solid #002144; border-right: 1px solid #002144;}