html{
    height: 100%;
}
body{
    height: 100%;
    font-size: 15px;
    font-family: 'Open Sans', sans-serif;
}

p a:hover{
    color: #111;
    text-decoration: none;
}
a, button {
    -webkit-transition: all ease 0.6s;
    -moz-transition: all ease 0.6s;
    -ms-transition: all ease 0.6s;
    -o-transition: all ease 0.6s;
    transition: all ease 0.6s;
}

/* ========== LOGIN PAGE ========== */

.us_profileimg{
    cursor: pointer;
    position: relative;
}
.us_dropDown {
    position: absolute;
    z-index: 9999;
    right: 0px;
    top: 65px;
    width: 200px;
    background-color: #f9f9f9;
    border-radius: 3px;
    box-shadow: 0 0 2px #076ddc52;
    transition: .4s;
    display: none;
}
.us_dropDown ul{
    display: block;
    float: left;
    padding: 0;
    margin-bottom: 0;
}
.us_dropDown li {
	    display: block;
	    padding: 0px 10px;
	    text-align: left;
	    float: left;
	    width: 100%;
	    margin-bottom: 2px;
	    transition: .4s;
}
.us_dropDown li:last-child {
    margin-bottom: 0px;
}
.us_dropDown li:hover {
    background-color: #066cdb;
}
.us_dropDown li:hover a{
    color: #fff;
}
.us_dropDown li a {
    color: #777;
    text-decoration: none;
    text-align: left;
    font-size: 14px;
    font-family: inherit;
    font-weight: 400;
    transition: .4s;
    float: left;
    padding: 8px 0px;
    width: 100%;
}


#login_screen{
    background: url(../images/body-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    display: flex;
    align-items: center;
}

#login_form {
    padding: 30px;
    box-sizing: border-box;
    width: 550px;
    margin: 0 auto;
    border: 1px solid #cecece59;
    border-radius: 5px;
    position: relative;
    background: #fff;
        border-top: 5px solid #014475
}
#login_form input {
    background: #fff;
    border-left: none;
    outline: none;
    padding: 15px 65px;
    height: auto;
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    box-shadow: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid #e6e6e6;
}
#login_form input::placeholder{
    font-size: 16px;
    letter-spacing: 1px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
#login_form a{
    color: #02416e;
}
#login_form .form-group{
    position: relative;
}
#login_form h3 {
    text-align: center;
    font-weight: 600;
    color: #014270;
    margin: 25px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
.icon_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 100%;
    padding-top: 14px;
    text-align: center;
    background: linear-gradient(45deg, #00406b, #155dad);
    color: #fff;
    border-radius: 5px 0 0 5px;
}
.btn_standard {
    width: 100%;
    padding: 13px 0;
    outline: none;
    border: none;
    background: linear-gradient(45deg, #00406b, #155dad);
    color: #fff;
}
.btn_standard:hover {
    background: linear-gradient(45deg, #155dad, #00406b);
}
.logo_box {
    background: #fff;
    display: inline-block;
    position: absolute;
    top: -35px;
    left: 30%;
    right: 30%;
    border-radius: 50px;
    padding: 8px;
}
.footer_text{
    text-align: center;    
    padding: 15px 0;
}
.footer_text p, .footer_text a{
    color: #fff;
}

/* ========== EMPLOYEE DASHBOARD ========== */

.navbar-default {
    background-color: transparent;
    border-color: transparent;
    margin: 10px 0;
    float: right;
}
.user_profile_image {
    margin-top: 10px;
    display: inline-block;
    background: #f1f1f1;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 50%;
}
.user_profile_image img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: -8px;
}
.dashboard_screen{
    background: url(../images/dashboard-bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
}
.main_header {
    background: #fff;
    padding: 10px 0 5px 0;
}
.main_title{
    padding: 30px 0;
}
.main_title h3{
    color: #104162;
    font-weight: 600;
    font-size: 30px;
}
tr.time_okay {
    background: #d1ffcb !important;
}
tr.time_late {
    background: #ffdcdc !important;
}
.emp_data_table{
    background: #fff;
}
.emp_data_table thead{
    background: #086ddc;
    color: #fff;
}

/* ========== EMPLOYEE PROFILE PAGE  ========= */

.main_emp_body {
    padding-top: 30px;
}
.main_emp_body .nav-tabs {
    margin-top: 25px;
}
.main_emp_body .nav-tabs > li{
    width: 33.3%;
    text-align: center;
}
.main_emp_body .nav-tabs > li > a{
    color: #111;
}
.main_emp_body .nav-tabs > li.active > a{
    color: #fff;
    cursor: default;
    background-color: #086ddc;
}
.main_emp_body .tab-content {
    background: #fff;
    padding: 15px;
    float: left;
    width: 100%;
}
.main_title h3{
    display: inline-block;
}
.btn.btn_classic {
    display: inline-block;
    float: right;
    padding: 10px 25px;
    background: #086ddc;
    color: #fff;
    margin-top: 12px;
}
.clock_box {
    box-shadow: 0 1px 8px 5px #d2d2d2;
}
.clock_header {
    background: #104162;
    margin: 0;
    color: #fff;
    text-align: center;
    padding: 5px;
}
.clock_header h4{
    font-weight: bold;    
}
#clock_body {
    background: #fff;
    padding: 15px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
}
#clock_body span {
    font-size: 30px;
    color: #086ddc;
}

#pw_popup .modal-dialog{
    margin: 100px auto !important;
}
#pw_popup .modal-header {
    background: #086ddc;
    color: #fff;
    text-align: center;
}
#pw_popup .modal-header .modal-title{
    font-size: 24px;
}
#pw_popup .modal-body {
    float: left;
    width: 100%;
    background: #fff;
}
#pw_popup .close{
    opacity: 1;
    color: #fff;
}
.form-group.upload_pic_form {
    margin: 20px 0;
}
.form-group.upload_pic_form input[type="file"]{
    float:left;
}
.form-group.upload_pic_form .btn.btn_classic{
    margin-top: -10px;
}
#active_users {
    margin-top: 20px;
    padding: 20px 10px 30px 10px;
    background: #fff;
    max-height:370px;
    overflow-y: scroll;
}

#active_users h4{
    font-weight: bold;
    text-align: center;
}
#active_users li{
    display: block;
    margin-bottom: 10px;
    background: #fff;
}
#active_users li img{
    border-radius: 50%;
    margin-right: 10px;
    width:50px;
    height: 50px;
}

.active_users_collapse{
    position: fixed;
    bottom: 0;
    width: 270px;
    z-index:9999;
}
.active_users_collapse:focus{
    outline: none;
    border: none;
}
.time_status_header {
    display: block;
    color: #ff0000;
    border-radius: 5px;
    margin-top: 10px;
    padding: 5px 25px;
}
.time_status_header img{
    float: left;
    width: 35px;
}
.time_status_header h4 small{
    color: #ff0000 !important;
}

/* UPDATED LOGIN PAGE */
.us_loginBox {
	    display: grid;
	    grid-gap: 0;
	    grid-template-columns: 65% 35%;
	    width: 100%;
	    margin: 0 auto;
	    box-shadow: 0px 0px 3px #086ddc;
	    overflow: hidden;
	    height: 100vh;
	}
	.us_loginSec{
	    float: left;
	    width: 100%;
	    position: relative;	
	}
	.loginLeft {
	    float: left;
	    width: 100%;
	    background-image: url(../images/bodybg.jpg);
	    background-position: top left;
	    background-repeat: no-repeat;
	    background-size: cover;
	}
	img.u_mainLogo {
	    text-align: center;
	    display: flex;
	    justify-content: center;
	    margin: 0 auto;
	}
	.us_loginRight {
	    align-self: center;
	    min-height: 100vh;
	    background-color: #fff;
	    position: relative;
	    padding: 130px 0px 0px;
	}	
	.us_loginRight h3 {
	    padding-top: 10px;
	    font-size: 22px;
	    font-weight: 400;
	    color: #333;
	    text-align: center;
	    font-family: inherit;
	    padding-bottom: 15px;
	}
	span.us_title {
	    display: table;
	    position: absolute;
	    top: 0px;
	    left: 0;
	    padding: 10px 29px 10px 8px;
	    color: #fff;
	    background: linear-gradient(91deg, #89a7bf, #167ac5);
	    border-radius: 0px 0px 10px 0px;
	    font-size: 25px;
	    font-weight: 400;
	    font-family: inherit;
	}
	.us_copyright {
	    position: absolute;
	    font-size: 14px;
	    text-align: center;
	    float: right;
	    width: 100%;
	    right: 0;
	    left: 0;
	    bottom: 0;
	    padding: 80px 4px 0px;
	    color: #333;
	    font-weight: 400;
	}
	.us_login-form {
	    float: left;
	    width: 100%;
	    text-align: center;
	    position: relative;
	}
	.us_login-form input[type="text"], input[type="password"] {
	    width: 85%;
	    border: none;
	    border-bottom: 1px solid #d0d0d0;
	    margin-bottom: 30px;
	    padding: 8px 30px;
	    position: relative;
	    color: #333;
	}
	.us_login-form input[type="text"]:focus, input[type="password"]:focus{
	    background: transparent !important;
	}
	
	.us_login-form input[type="text"]:focus ,input[type="password"]:focus{
	    outline: none;
	}
	.us_login-form input[type="text"]::placeholder ,input[type="password"]::placeholder{
	    font-size: 16px;
	    color: #333;
	}
	.us_login-form .btn_standard {
	    margin: 0 auto;
	    padding: 10px 35px;
	    font-size: 16px;
	    font-weight: 600;
	    cursor: pointer;
	    width: 85%;
	    background: linear-gradient(166deg, #104162, #175580);
	    border: none;
	    color: #fff;
	    border-radius: 25px;
	    text-transform: uppercase;
	}
	.us_login-form .btn_standard:hover{
	    background: linear-gradient(166deg, #175580, #104162);
	}
	label.us_icons img {
        position: absolute;
        display: block;
        height: 20px;
        width: 20px;
        max-width: 20px;
        bottom: -30px;
        z-index: 99;
        left: 5px;
    }
	label.us_icons {
	    width: 85%;
	    position: relative;
	    color: #333;
	    display: table;
	    margin: 0 auto;
	}
	#login_response p{
	    font-weight : bold !important;
	}
	.clock_box_login {
        float: left;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }
	.clock_box_login .clock {
        font-size: 30px;
        letter-spacing: 2px;
        padding: 10px 0;
	}
	
	@media (max-width: 767px) {
		.us_loginBox {
		    display: block;
		}
		.loginLeft {
		    display: none;
		}
		.us_loginRight {
		    width: 90%;
		    margin: 0 auto;
		    padding-top: 100px;
		}
		.us_login-form:before {
		    left: 24px;
		}
		.us_login-form:after {
		    left: 24px;
		}
		span.us_title {
		    left: -21px;
		}
	}
/* UPDATE LOGIN PAGE STYLING END */	

/* BIRTHDAY POPUP CODE */
#birthday_popup {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000000bf;
}
.popup_box_birthday {
    width: 650px;
    height: 433px;
    margin: 10% auto;
    background: url(../images/birthday_bg.png) no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 5px;
    position: relative;
}
.popup_box_birthday h4{
    float: right;
    padding: 120px 55px 0px 0;
    font-size: 60px;
    color: #ffffff;
    font-family: 'The Nautigal', cursive;
}
#close_birthday_popup {
    position: absolute;
    right: -25px;
    top: -10px;
    background: red;
    color: #fff;
    border: none;
}
#close_birthday_popup:hover{
    background: #bf0000;
}

@media only screen and (max-width : 767px){
    .popup_box_birthday {
        width: 85%;
        background-size: 100%;
    }
    .popup_box_birthday h4 {
        float: right;
        padding: 130px 15px 0px 0;
        font-size: 36px;
    }
    #close_birthday_popup{
        right: -25px;
        top: 80px;
    }
}

::-webkit-scrollbar {
    width: 8px;
}
 
::-webkit-scrollbar-track {
    border-radius: 0px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 0px;
    background: #ccc; 
}