@import "/fonts/std-51/std-51.css";
@import "/fonts/segoe-ui/segoe-ui.css";
@import "/fonts/clearface-bold/clearface-bold.css";

/*@font-face {
	font-family: 'GothamBold';
	src: url('/fonts/GothamBold/GothamBold.eot');
	src: url('/fonts/GothamBold/GothamBold.woff2') format('woff2'), url('/fonts/GothamBold/GothamBold.woff') format('woff'), url('/fonts/GothamBold/GothamBold.ttf') format('truetype'), url('/fonts/GothamBold/GothamBold.svg#GothamBold') format('svg'), url('/fonts/GothamBold/GothamBold.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'OCRAExtended-Regular';
	src: url('/fonts/OCR A Extended/OCRAExtended.eot');
	src: url('/fonts/OCR A Extended/OCRAExtended.woff2') format('woff2'), url('/fonts/OCR A Extended/OCRAExtended.woff') format('woff'), url('/fonts/OCR A Extended/OCRAExtended.ttf') format('truetype'), url('/fonts/OCR A Extended/OCRAExtended.svg#OCRAExtended') format('svg'), url('/fonts/OCR A Extended/OCRAExtended.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Book';
	src: url('/fonts/GothamNarrow/GothamNarrow-Book.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Book.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Book.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Book.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Book.svg#GothamNarrow-Book') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Book.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Black';
	src: url('/fonts/GothamNarrow/GothamNarrow-Black.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Black.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Black.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Black.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Black.svg#GothamNarrow-Black') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Black.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Book';
	src: url('/fonts/GothamNarrow/GothamNarrow-Book.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Book.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Book.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Book.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Book.svg#GothamNarrow-Book') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Book.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Light';
	src: url('/fonts/GothamNarrow/GothamNarrow-Light.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Light.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Light.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Light.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Light.svg#GothamNarrow-Light') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Light.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Medium';
	src: url('/fonts/GothamNarrow/GothamNarrow-Medium.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Medium.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Medium.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Medium.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Medium.svg#GothamNarrow-Medium') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Medium.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Thin';
	src: url('/fonts/GothamNarrow/GothamNarrow-Thin.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Thin.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Thin.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Thin.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Thin.svg#GothamNarrow-Thin') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Thin.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-Ultra';
	src: url('/fonts/GothamNarrow/GothamNarrow-Ultra.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-Ultra.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-Ultra.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-Ultra.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-Ultra.svg#GothamNarrow-Ultra') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-Ultra.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-XLightItalic';
	src: url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.svg#GothamNarrow-XLightItalic') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GothamNarrow-XLightItalic';
	src: url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.eot');
	src: url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.woff2') format('woff2'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.woff') format('woff'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.ttf') format('truetype'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.svg#GothamNarrow-XLightItalic') format('svg'), url('/fonts/GothamNarrow/GothamNarrow-XLightItalic.eot?#iefix') format('embedded-opentype');
	font-weight: normal;
	font-style: normal;
}*/

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
/*Disable zoom on focus iPhone*/

ol, ul, ol ol, ol ul, ul ol, ul ul {
    margin-bottom:10px;
}
    ul.nostyle li, li.nostyle {
        list-style: none;
        margin-bottom: 5px;
    }


    .color-green {
        color: #6EC165;
    }

.color-red {
    color: #CA565F;
}

.color-organ {
    color: #faab17;
}

.color-tembo {
    color: #389c90;
}

    .color-tembo :checked:before {
        background: red;
    }

.format-employee {
    cursor: default;
}

    .format-employee:hover {
        background: white;
        cursor: default;
    }

.format-message-titile {
    font-weight: bold;
}

.format-message1 {
}

.format-message2 {
    padding-bottom: 10px;
}

.width-img-nodata {
    width: 200px;
}

.title-order {
    color: #000000;
    padding-top: 20px;
}

.title-nodata {
    color: #000000;
    padding-top: 20px;
}

.color-error {
    color: #000000;
    padding-top: 20px;
}

.width-img-nodata {
    width: 200px;
}

.font-weight {
    font-weight: bold !important
}

.switch {
    position: relative;
    display: inline-block;
    width: 55px;
    height: 30px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 5px;
        bottom: 5px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: #17c8b8;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 30px;
}

    .slider.round:before {
        border-radius: 50%;
    }

@media screen and (-webkit-min-device-pixel-ratio:0) {
    select:focus,
    textarea:focus,
    input:focus {
        /*font-size: 16px !important;*/
    }
}

/*------------------*/
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
    display: none !important;
}

.row:after {
    display: block;
}

.full-sz {
    min-width: 100%
}

body {
    background-color: #F7F7F7;
    font-family: 'Open Sans', sans-serif, Arial, Helvetica;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.4;
    color: #222525;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: sans-serif;
    line-height: 1.3;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    opacity: 1;
}

#wrapper {
    width: 100%;
}

.crud-mode .content-wrapper {
    background-color: #f3f3f3;
    padding: 107px 42px 60px 42px;
}

.crud-mode .form-box {
    background-color: #FFFFFF;
    min-height: calc(100vh - 154px);
}

.form-box .page-ctn {
    padding: 0 20px;
}

    .form-box .page-ctn .language-ui,
    .language-ui {
        /*white-space: normal;
	word-wrap: break-word;*/
    }

.title[data-language] {
}

.form-box .page-ctn .paymentperiod-ui,
.paymentperiod-ui {
    /*white-space: normal;
	word-wrap: break-word;*/
}

.title[data-paymentperiod] {
}
/*======================================*/
/*
 * Login Screens
 */
.s12-box-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow-x: hidden;
    overflow-y: auto;
}

.s12-box-modal-cnt {
    display: table;
    height: 100%;
    width: 100%;
}

    .s12-box-modal-cnt .container {
        -webkit-transform: translate3d(0,0,0);
        -o-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
        vertical-align: middle;
    }

    .s12-box-modal-cnt .panel-default {
        border: 1px solid #cccccc;
    }

    .s12-box-modal-cnt .panel-heading {
        background-color: #fff;
        border: 1px solid #cccccc;
        border-bottom: #f8f5f2 solid 2px !important;
        color: #222525;
        text-align: center;
        border-radius: 0;
        height: 80px;
        margin: -1px;
        padding: 16px 10px;
    }

    .s12-box-modal-cnt .panel-title {
        color: #222525;
        font-size: 40px;
        font-family: sans-serif;
        font-weight: bold;
    }

.s12-box-modal .big-title {
    color: #303640;
    font-size: 24px;
    line-height: 28.8px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

.landing-panel,
.login-panel,
.forgot-password-panel {
    max-width: 400px;
    background-color: transparent;
}

.landing-panel,
.login-panel,
.signup-panel,
.forgot-password-panel,
.reset-password-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: auto;
}

.reset-password-panel {
    max-width: 700px;
}

.signup-panel {
    max-width: 1030px;
}

    .signup-panel .panel-body,
    .reset-password-panel .panel-body {
        padding: 20px 40px;
    }

.icon-elephant {
    margin-top: 33%;
}

@media (max-width: 991px) {
    .icon-elephant {
        margin-top: 0;
    }
}

.s12-form .signup-panel .items .row > div:last-child,
.s12-form .signup-panel .cta-group > div:last-child,
.reset-password-panel .items .row > div:last-child,
.reset-password-panel .cta-group > div:last-child {
    text-align: left;
}

.login-panel {
    margin-top: 100px;
}

    .login-panel .panel-heading,
    .forgot-password-panel .panel-heading {
        position: relative;
    }

    .login-panel .img-elephant {
        position: absolute;
        top: -100px;
        left: 20%;
    }

    .login-panel .panel-body,
    .forgot-password-panel .panel-body {
        background-color: #FFFFFF;
        padding: 42px 40px 50px;
    }

    .login-panel .form-group,
    .forgot-password-panel .form-group {
        margin-bottom: 25px;
    }

        .login-panel .form-group label,
        .forgot-password-panel .form-group label {
            margin-bottom: 10px;
            margin-left: 15px;
        }

.language-dropdown .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 30px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
}

.language-dropdown.loginform .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
    background: #FAFFBD;
    color: #555;
}

.language-dropdown .btn-default .caret {
    position: absolute;
    right: 22px;
    top: 45%;
}

.language-dropdown .dropdown-menu {
    width: 100%;
    border: none;
    border-radius: 0;
}

    .language-dropdown .btn-default img,
    .language-dropdown .dropdown-menu img {
        margin-right: 5px;
        margin-bottom: 3px;
    }

    .language-dropdown .dropdown-menu img {
        margin-right: 6px;
    }



.paymentperiod-dropdown .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 30px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
}

.paymentperiod-dropdown.loginform .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
    background: #FAFFBD;
    color: #555;
}

.paymentperiod-dropdown .btn-default .caret {
    position: absolute;
    right: 22px;
    top: 45%;
}

.paymentperiod-dropdown .dropdown-menu {
    width: 100%;
    border: none;
    border-radius: 0;
}

    .paymentperiod-dropdown .btn-default img,
    .paymentperiod-dropdown .dropdown-menu img {
        margin-right: 5px;
        margin-bottom: 3px;
    }

    .paymentperiod-dropdown .dropdown-menu img {
        margin-right: 6px;
    }


.version {
    background-color: #f8f8f8;
    font-size: 14px;
    line-height: 24px;
    color: #999999;
    padding-top: 10px;
}

.forgot-password {
    font-size: 14px;
    line-height: 16.8px;
    color: #17c8b8;
    float: right;
}

    .forgot-password:hover,
    .forgot-password:focus {
        text-decoration: none;
    }

    .forgot-password img {
        margin-right: 6px;
    }

.login-panel .cta-neutral {
    margin-left: 10px;
}

.login-panel .s12-input {
}
/*======================================*/

.content-wrapper {
    background-color: #FFFFFF;
    min-height: 100vh;
    padding: 125px 50px 50px 50px;
}
/*@media (min-width: 992px) {
	.content-wrapper {
		padding-left:5% !important;
		padding-right:5% !important;
	}
}*/
/*Dropdown menu white-space by Nga*/
.dropdown-menu > li > a {
    white-space: normal;
}

/*----*/

.navbar-static-top {
    background-color: #17c8b8;
    border: 0;
    /* min-height: 65px; */
}

.navbar-default {
    background-color: #17c8b8;
}

#tree-menu > .active > a {
    background: #1EB6A8 !important;
    color: #fff;
}

@media (min-width: 992px) {
    .content-wrapper {
        margin-left: 230px;
    }

    .navbar-static-top .sidebar #side-menu {
        background-color: #F7F7F7;
        position: absolute;
        top: 0;
        left: 0;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 65px;
        height: calc(100vh - 65px);
        width: 230px;
        padding-top: 8px;
    }

    .navbar-static-top .sidebar #side-menu-custom {
        background-color: #f8f5f2;
        position: absolute;
        top: 0;
        left: 0;
        overflow-x: auto;
        overflow-y: auto;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-top: 65px;
        height: calc(100vh - 65px);
        width: 225px;
        padding-top: 8px;
    }
}

@media (max-width: 991px) {
    .sidebar .sidebar-nav.navbar-collapse {
        padding-left: 0;
        padding-right: 0;
        background-color: #f8f5f2;
    }

        .sidebar .sidebar-nav.navbar-collapse,
        .sidebar .sidebar-nav.navbar-collapse.collapse {
            overflow-x: auto !important;
            display: none;
        }

            .sidebar .sidebar-nav.navbar-collapse.collapse.in {
                display: block;
            }

    .navbar-static-top {
        min-height: 50px;
    }

        .navbar-static-top .sidebar .navbar-collapse {
            margin-top: 0px;
            background-color: #f8f5f2;
        }

    .content-wrapper {
        margin-top: 0;
    }

    .info-dropdown {
        min-width: auto;
    }

    .navbar-top-links.navbar-right {
        float: left !important;
    }

    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

        .navbar-collapse.collapse {
            display: none !important;
        }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

        .navbar-nav > li {
            float: none;
        }

            .navbar-nav > li > a {
                padding-top: 10px;
                padding-bottom: 10px;
            }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block !important;
    }

    .navbar-default.navbar-static-top .navbar-brand {
        height: 50px;
        padding: 12px 20px;
    }

    .navbar-brand img {
        max-height: 30px;
    }

    .content-wrapper,
    .crud-mode .content-wrapper {
        padding: 85px 20px 60px 20px;
        margin-left: 0px;
    }
}

.navbar-default .navbar-brand {
    color: #FFFFFF;
    font-size: 29px;
    font-family: 'OCRAExtended-Regular';
    padding: 20px;
    height: 65px;
    font-weight: bold;
}

    .navbar-default .navbar-brand:hover {
        color: #FFFFFF;
    }

.navbar-top-links {
    margin-right: 0;
}

    .navbar-top-links li {
        display: inline-block;
    }

@media screen and (min-width: 992px) {
    .nav-right {
        float: right;
    }
}

.nav-user {
    padding-top: 10px;
}

@media screen and (min-width: 768px) {
    .nav-user, .nav-user li {
        float: right;
        width: inherit;
    }
}

@media screen and (max-width: 768px) {
    .nav-right {
        width: 100%;
    }

    .nav-user, .nav-user li {
        width: 100%;
        float: left;
    }
}

.info-dropdown {
    min-width: 215px;
    text-align: right;
}

.navbar-top-links > li > a,
.navbar-top-links > li .dropdown > a {
    /*padding: 22px 24px 22px 23px;*/
    color: #008B8B;
    transition: all 0.3s ease-in-out;
}
.navbar-top-links > li > a {
    border: #10394E solid 5px;
    border-radius: 50%;
    background: #134958;
    padding: 5px 15px;
}
@media (max-width: 992px) {
    .navbar-top-links > li > a {
        border: #fff solid 5px;
        background: #f8f5f2;
        padding: 10px 15px;
    }
}

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

    @media (min-width: 768px) {
        .navbar-nav > li > a {
            padding-bottom: 22px;
        }
    }

    .nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
        background-color: #389c90;
        border-color: #CDD6DA;
    }

    .navbar-top-links > li a:hover {
        color: #008B8B;
        transition: all 0.25s linear;
    }

    .navbar-top-links .open li > a:hover {
        background-color: rgba(23,200,184,0.1);
        transition: all 0.25s linear;
    }

    .navbar-top-links > .dropdown > a img {
        margin-left: 10px;
    }

    .navbar-top-links > .dropdown > .dropdown-menu {
        width: 100%;
        border: none;
        border-radius: 0;
        margin-top: 0;
        border: 1px solid #17c8b8;
        padding: 0;
    }

    .navbar-top-links > li .dropdown > a:hover {
        text-decoration: none;
    }

    .navbar-top-links .dropdown-menu li {
        display: block;
    }

        .navbar-top-links .dropdown-menu li:last-child {
            margin-right: 0;
        }

        .navbar-top-links .dropdown-menu li a {
            padding: 10px;
            min-height: 0;
            color: #999999;
        }

            .navbar-top-links .dropdown-menu li a img {
                padding-right: 10px;
            }

.company-login {
    position: relative;
    padding-left: 25px;
}

    .company-login img.company-flag {
        position: absolute;
        left: 0;
        top: 3px;
    }

.navbar-top-links .dropdown-menu li a.company-login {
    position: relative;
    background: #F5F5F5;
    padding: 5px 10px 5px 45px !important;
    cursor: pointer;
}

    .navbar-top-links .dropdown-menu li a.company-login img.company-flag {
        position: absolute;
        left: 20px;
        top: 8px;
    }

            .navbar-top-links .dropdown-menu li a div {
                white-space: normal;
            }

    @media (max-width: 767px) {
        .navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu > li > a {
            padding: 15px 5px 15px 25px;
        }

        .navbar-top-links .dropdown-menu li a.company-login {
            background: #fff;
            padding-left: 60px !important;
        }

            .navbar-top-links .dropdown-menu li a.company-login img.company-flag {
                left: 35px;
            }
    }



    .navbar-top-links .dropdown-messages,
    .navbar-top-links .dropdown-tasks,
    .navbar-top-links .dropdown-alerts {
        width: 310px;
        min-width: 0;
    }

    .navbar-top-links .dropdown-messages {
        margin-left: 5px;
    }

    .navbar-top-links .dropdown-tasks {
        margin-left: -59px;
    }

    .navbar-top-links .dropdown-alerts {
        margin-left: -123px;
    }

    .navbar-top-links .dropdown-user {
        right: 0;
        left: auto;
    }

    .sidebar .sidebar-nav.navbar-collapse {
        padding-left: 0;
        padding-right: 0;
    }

    .sidebar .sidebar-search {
        padding: 15px;
    }

    .sidebar ul li a.active {
        background-color: #eeeeee;
    }

    .sidebar .arrow {
        float: right;
    }

    .sidebar .fa.arrow:before {
        content: "\f104";
    }

    .sidebar .active > a > .fa.arrow:before {
        content: "\f107";
    }

    #side-menu > li {
        margin-bottom: 0px;
    }

        #side-menu > li > a:hover,
        #side-menu > li > a:focus {
            background-color: transparent;
        }

        #side-menu > li > a {
            color: #777;
            font-size: 14px;
            padding: 10px;
        }

            #side-menu > li > a > * {
                vertical-align: top;
            }

            #side-menu > li > a > img, #side-menu > li > a .fa, #side-menu > li > a .nav-label {
                display: inline-block;
            }

            #side-menu > li > a > img {
                margin-right: 10px;
            }

            #side-menu > li > a .fa {
                color: #17c8b8;
            }

            #side-menu > li > a .nav-label {
                width: 140px;
            }

    .img-expand-collapse {
        margin-left: 135px;
        margin-top: 3px;
    }

    .menu-title {
        width: 110px !important;
        position: absolute;
    }

    .sidebar .nav-second-level li,
    .sidebar .nav-third-level li {
        border-bottom: none !important;
    }

        .sidebar .nav-second-level li a {
            padding: 8px 10px 8px 45px;
            color: #1EB5A7;
            font-size: 14px;
        }

            .sidebar .nav-second-level li a:hover,
            .sidebar .nav-second-level li a:focus {
                background-color: #b3ddd7;
                color: #222525;
            }

        .sidebar .nav-second-level li.active a {
            background-color: #b3ddd7;
            border-left: 4px solid #17C8B8;
            padding-left: 41px;
        }

        .sidebar .nav-third-level li a {
            padding-left: 52px;
        }

    /*
 * Styling for form custom
 */

    .sm-form [class^="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

.s12-form .label-text {
    padding-top: 7px;
        padding-bottom: 6px;
    min-height: 30px;
}

.s12-form .label-new {
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
@media screen and (max-width: 768px) {
    .s12-form .label-new {
        justify-content: flex-start;
    }
}

.s12-form .items {
    padding-top: 38px;
    padding-bottom: 26px;
}

    .s12-line-green {
        border-bottom: 3px solid #17c8b8;
        display: block;
        margin-bottom: 20px;
    }

    .s12-line-green-1px {
        border-bottom: 1px solid #17c8b8;
        display: block;
        margin-bottom: 10px;
        margin-top: 10px;
    }

    .s12-line {
        border-bottom: 1px solid #cdd6da;
        display: block;
    }

        .s12-line.double {
            margin-left: 10px;
            margin-right: 10px;
        }

    .s12-form .item {
        margin-bottom: 10px;
    }

    .s12-form .row h3 {
        color: #333 !important;
    }

    /*Nga*/
    .text-note {
        color: #999999;
    }

    .label-color {
        text-align: right;
        color: #999999;
        font-size: 14px;
        font-family: sans-serif;
    }

    @media screen and (max-width: 768px) {
        .label-color {
            text-align: left;
        }
    }
    /**/

    .s12-form.payslip-detail .row > div:first-child {
        text-align: left;
        padding-left: 50px;
    }

    .s12-form.payslip-detail .row > div:nth-child(3) {
        color: #999999;
    }

    .payslip-detail-header {
        margin-top: 40px;
    }

        .payslip-detail-header .group-title {
            margin-top: 0;
        }

    .s12-form .cta-success {
        /*margin-right: 10px;*/
    }

    /*.s12-form.view-form > div,*/ .s12-form.view-form .item {
        margin-bottom: 10px;
        white-space: normal;
        word-wrap: break-word;
    }

    /*.s12-form.view-form .row > div:first-child {
	padding-top: 0;
}*/

    .img-profile {
        margin: 0 auto;
        display: block;
    }

    .s12-form.view-form .img-flag {
        width: 22px;
        height: 14px;
    }

    .group-title {
        /*font-family: 'Segoe UI';*/
        margin-bottom: 20px;
    }

        .first {
            margin-top: 0;
            padding-top: 0;
        }

    .small-group-title {
        font-size: 16px;
        line-height: 20px;
    }

    .photo-avarta img {
        margin: 0 auto 40px;
        display: block;
        padding-right: 10%;
    }

    .s12-form .control-inline > * {
        display: inline-block;
        color: #999999;
        vertical-align: sub;
    }

    .s12-form .control-inline .s12-input {
        max-width: 153px;
    }

    .department,
    .position {
        margin-top: 40px;
    }

        .department .group-title,
        .position .group-title {
            margin-top: 0;
        }
    /*
 * Input, Textarea custom
 */
    .s12-input,
    .s12-textarea {
        border: 1px solid #d0d4d5;
        border-radius: 0;
        box-shadow: none;
        min-height: 30px;
    }

    .s12-textarea {
        height: auto;
        resize: none
    }

    .s12-form .s12-input,
    .s12-form .s12-textarea {
        max-width: 320px;
        display: inline-block
    }

    .date-picker {
        max-width: 320px;
    }

    .date-picker {
        width: 100%;
    }

    .s12-input:hover,
    .s12-input:focus,
    .s12-textarea:hover,
    .s12-textarea:focus {
        outline: none;
        box-shadow: none;
        border-color: #17c8b8;
    }

    .s12-input-group {
        max-width: 320px;
        width: 100%;
    }

        .s12-input-group .input-group-btn {
            height: 30px;
            width: 32px;
            border: 1px solid #d0d4d5;
            border-left: 0;
            text-align: center;
        }

            .s12-input-group .input-group-btn .fa {
                font-size: 20px;
                color: #ec5453;
            }

        .s12-input-group input.form-control:last-child {
            border: 1px solid #d0d4d5;
            box-shadow: none;
            height: 40px;
            position: relative;
            border-radius: 4px;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            padding-left: 40px;
            max-width: 320px;
            width: 100%;
            z-index: 2;
        }

            .s12-input-group input.form-control:last-child:hover,
            .s12-input-group input.form-control:last-child:focus {
                border-color: #17c8b8;
            }

        .s12-input-group .input-group-addon {
            background: transparent;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 3;
            border: none;
            height: 40px;
            width: 40px;
            text-align: center;
            padding: 10px;
        }

            .s12-input-group .input-group-addon .fa {
                font-size: 18px;
                color: #999999;
            }
    /*
 * Select custom
 */
    .s12-select,
    .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
        width: 100%;
        max-width: 320px;
    }

        .s12-select .btn-default {
            border: 1px solid #d0d4d5;
            border-radius: 0;
            box-shadow: none;
            padding: 6px 12px;
            padding-right: 30px;
        }

            .s12-select .btn-default .filter-option {
                text-overflow: ellipsis;
            }

        .s12-select .img-flag {
            width: 22px;
            height: 14px;
        }

        .s12-select > .dropdown-toggle.bs-placeholder:active,
        .s12-select > .dropdown-toggle.bs-placeholder:focus,
        .s12-select > .dropdown-toggle.bs-placeholder:hover,
        .s12-select .btn-default.active,
        .s12-select .btn-default:active,
        .dropdown-toggle.btn-default:hover,
        .dropdown-toggle.btn-default:focus,
        .s12-select .open > .dropdown-toggle.btn-default,
        .s12-select .open > .dropdown-toggle.btn-default:hover,
        .s12-select .open > .dropdown-toggle.btn-default:focus,
        .s12-select .open > .dropdown-toggle.btn-default:active,
        .btn-group.open .dropdown-toggle {
            background-color: white;
            border-color: #17c8b8;
            outline: none;
            box-shadow: none
        }

    .bootstrap-select.s12-select .dropdown-toggle:focus {
        outline: none !important
    }

    .s12-select .dropdown-menu li a:focus,
    .s12-select .dropdown-menu li a:active {
        outline: 0
    }

    .s12-select .dropdown-menu li.selected a {
        outline: 0;
        background-color: rgba(23,200,184,0.1);
    }

    .s12-select .dropdown-menu {
        border-radius: 0;
        border: none;
        z-index: 1030;
    }

        .s12-select .dropdown-menu li a {
            padding: 3px 13px;
        }

    .s12-select-language .btn-default .flag {
        margin-bottom: 2px;
        margin-right: 4px;
    }

    .s12-select-language .dropdown-menu li a {
        padding: 3px 13px;
    }

        .s12-select-language .dropdown-menu li a .flag {
            margin-right: 4px;
            margin-bottom: 3px;
        }

.s12-select-paymentPeriod .btn-default .flag {
    margin-bottom: 2px;
    margin-right: 4px;
}

.s12-select-paymentPeriod .dropdown-menu li a {
    padding: 3px 13px;
}

    .s12-select-paymentPeriod .dropdown-menu li a .flag {
        margin-right: 4px;
        margin-bottom: 3px;
    }

    /*
 * CTA Button
 */

    .cta {
        font-family: sans-serif;
        font-size: 16px;
        border: transparent solid 1px;
        border-radius: 7px;
        display: inline-block;
        padding: 10px 20px;
        text-align: center;
        min-width: 138px;
        transition: all 0.3s ease-in-out;
        margin-bottom: 5px;
    }

    .s12-table .cta, .cta-sm {
        min-width: 75px;
        margin-bottom: 0;
        padding: 4px 10px !important;
        font-size: 14px;
    }

    .cta:hover,
    .cta:focus {
        outline: none;
        text-decoration: none;
        transition: all 0.25s linear;
    }

    .cta:active {
        outline: 0;
    }

    .cta i {
        font-size: 18px;
        margin-right: 10px;
    }

.cta-success {
    background-color: #008080 /*#17c8b8*/;
    color: #FFFFFF;
}

        .cta-success[disabled] {
            cursor: not-allowed;
            opacity: 0.5;
        }

            .cta-success[disabled]:hover,
            .cta-success[disabled]:focus {
                background-color: #17c8b8;
                opacity: 0.5;
            }

    .cta-success:hover,
    .cta-success:focus {
        background-color: #05d2c6;
    }

        .cta-success.cta-pay {
            min-width: 90px;
        }

    .cta-neutral {
        background-color: #dddddd;
        color: #54555a;
    }

        .cta-neutral:hover {
            background-color: #999;
            color: #666;
        }

        .cta-neutral:active {
            background-color: #6B6B6B;
            color: #333;
        }

    .cta.cta-delete:hover, .cta.cta-delete:focus {
        background: #c14f4e;
    }

    .cta.cta-delete {
        background-color: #ec5453;
        color: #FFFFFF;
    }

    .cta.cta-cancel {
        background-color: #ec5453;
        color: #FFFFFF;
    }

    .cta-group {
        padding-top: 22px;
        padding-bottom: 22px;
    }
        .cta-group.first {
            padding-top: 0;
        }

        .cta-small:hover,
        .cta-small:focus {
            outline: 0;
            text-decoration: none
        }

    .cta-small.cta-edit {
        color: #17c8b8;
        font-family: sans-serif;
        font-size: 14px;
        line-height: 17px;
    }

        .cta-small.cta-edit img,
        .cta-small.cta-add img {
            margin-right: 5px;
        }

    .cta-small.cta-add {
        color: #17c8b8;
    }

    .cta-small.btn-es {
        color: #999999;
        line-height: 17px;
    }

    .control-form .cta-small.cta-add {
        margin-top: 0;
    }

    .control-form .header {
        margin-top: 40px;
    }

        .control-form .header .cta-small.cta-add,
        .control-form .header .cta-small.cta-lock {
            margin-right: 25px;
        }

    .cta-small.cta-add > *,
    .cta-small.cta-lock > * {
        vertical-align: top;
    }

    .cta-small.cta-add .fa,
    .cta-small.cta-lock .fa {
        font-size: 20px;
        margin-right: 5px;
    }

    .cta-small.cta-delete {
        color: #ec5453;
        font-size: 22px;
        line-height: 24px;
    }

    .cta-small.cta-cancel {
        color: #ec5453;
        font-size: 22px;
        line-height: 24px;
    }

    .cta-small.cta-lock {
        color: #ec5453;
        font-family: sans-serif;
        font-size: 14px;
        line-height: 17px;
    }

    .not-yet-paid {
        color: #ec5453;
    }

    .paid {
        color: #5cb75b;
    }

    .link-email {
        color: #17c8b8;
        word-break: break-all;
        cursor:pointer;
    }
    /*
 * Page Title(Big title) like Change Password
 */
    .page-title {
        position: relative;
    }

        .page-title h2 {
            font-family: sans-serif;
            color: #303640;
            margin-top: 0;
            word-break: break-word;
        }

        .page-title.edit-title h2 {
            padding-left: 20px;
        }

    @media screen and (max-width: 768px) {
        .page-title.edit-title h2 {
            padding-left: 10px;
        }
    }

    .page-title.edit-title .cta-close {
        /*padding-right: 40px;*/
        color: #dddddd;
        cursor: pointer;
        padding-top: 3px;
        position: absolute;
        right: 30px;
    }

    /* 25/4/2019 */
    .sbtitle {
        /*width: 30%;*/
        position: relative;
        text-align: right;
        font-size: 12px;
        margin-bottom: 15px;
        top: 0;
        right: 0;
    }

    @media screen and (max-width: 992px) {
        .sbtitle {
            position: relative;
            top: 0;
        }
    }

    .tab-header > * {
        display: inline-block;
        vertical-align: top;
    }

    .tab-header .tab-left {
        width: 150px;
    }

    .tab-header .tab-right {
        width: calc(100% - 155px);
    }

        .tab-header .tab-right .stt-active,
        .tab-header .tab-right .sttinactive {
            margin-left: 20px;
            position: relative;
            bottom: 5px;
        }

    .tab-header.header-single h2 {
        margin-top: 0;
    }

    .header-inline {
        margin-bottom: 20px;
    }

        .header-inline h2 {
            margin-top: 10px;
            margin-right: 20px;
        }

        .header-inline > * {
            display: inline-block;
            vertical-align: middle;
        }

    .emp-position {
        font-style: italic;
        color: #999999 !important;
        min-width: 100px;
    }

    .break-word {
        word-break: break-word;
    }

    .tab-right .emp-name {
        position: relative;
        word-break: break-word;
    }

        .tab-right .emp-name .emp-status {
            position: absolute;
            right: 0;
            bottom: 0;
        }

    h2 .emp-position {
        font-size: 20px;
    }

    @media screen and (max-width: 768px) {
        .tab-right .emp-name .emp-status {
            position: relative;
        }
    }

    .s12-nav-tabs {
        border-bottom: 2px solid #cdd6da;
    }

        .s12-nav-tabs > li {
            margin-bottom: 0;
        }

            .s12-nav-tabs > li > a {
                font-size: 16px;
                line-height: 20px;
                color: #999999;
                position: relative;
                padding: 10px 2px;
                margin-right: 20px;
                border: none;
                cursor: pointer;
            }

                .s12-nav-tabs > li > a::before {
                    content: '';
                    display: block;
                    position: absolute;
                    bottom: -3px;
                    left: 0px;
                    right: 0px;
                    height: 4px;
                    background-color: transparent;
                }

                .s12-nav-tabs > li > a:hover,
                .s12-nav-tabs > li > a:focus,
                .s12-nav-tabs > li > a:active {
                    background-color: transparent;
                    border: none;
                }

                    .s12-nav-tabs > li > a:hover::before,
                    .s12-nav-tabs > li > a:focus::before,
                    .s12-nav-tabs > li > a:active::before,
                    .s12-nav-tabs > li.active > a::before {
                        background-color: #17c8b8;
                    }

            .s12-nav-tabs > li.active > a,
            .s12-nav-tabs > li.active > a:focus,
            .s12-nav-tabs > li.active > a:hover {
                background-color: transparent;
                border: none;
                color: #000000;
            }

    .nav-tab-custom {
        margin-top: 10px;
        color: #5cb75b;
        font-size: 15px;
        font-family: sans-serif;
        font-weight: 700;
    }

    .tab-content {
        padding-top: 40px;
    }
    /*
 * Company Setup Detail
 */
    .box-rollOver-custom {
        padding-top: 6px;
        padding-bottom: 8px;
        padding-left: 14px;
        padding-right: 14px;
        border-radius: 4px;
        background-color: #17C8B8;
        border: none;
        color: #ffffff;
        font-size: 14px;
        -webkit-transition: background-color 500ms linear;
        transition: background-color 500ms linear;
    }

        .box-rollOver-custom > i {
            float: left;
            /*margin-top: 4px;*/
            margin-right: 6px;
        }

        .box-rollOver-custom:hover {
            background-color: #389c90;
        }

        .box-rollOver-custom ::after, .box-rollOver-custom :focus {
            border: none;
        }

        .box-rollOver-custom .i-single {
            float: unset;
            position: relative;
            top: 3px;
            margin-right: 0;
        }

    .s12-box {
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        padding: 30px 20px;
        max-width: 220px;
        width: 100%;
        display: block;
        margin-bottom: 20px;
        font-family: sans-serif;
    }



        .s12-box.text-left {
            text-align: left;
        }

        .s12-box:hover,
        .s12-box:focus {
            text-decoration: none;
        }

        .s12-box .title {
            margin-top: 17px;
            margin-bottom: 0;
        }

    .add-box {
        background-color: #dff0d8;
        border: 1px solid #d6e9c6;
        color: #333333;
    }

        .add-box:hover {
            background: #B5D2AA;
        }

    .active-box {
        background-color: #dff0d8;
        border: 1px solid #d6e9c6;
        color: #333333;
        width: 250px;
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        padding: 20px 20px;
        display: block;
        margin-bottom: 20px;
        font-family: sans-serif;
    }

        .active-box .title {
            margin-top: 17px;
            margin-bottom: 0;
        }

    .birthday-box {
        background-color: #ecf1f5;
        border: 1px solid #dae4ea;
        color: #999999;
        width: 250px;
        border-radius: 4px;
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        padding: 20px 20px;
        display: block;
        margin-bottom: 20px;
        font-family: sans-serif;
    }

        .birthday-box .title {
            margin-top: 17px;
            margin-bottom: 0;
        }

    .dashboard-box {
        width: 260px;
        padding-left: 0px;
    }

    .select-box {
        background-color: #ecf1f5;
        border: 1px solid #dae4ea;
        padding: 15px;
        color: #999999;
        font-size: 16px;
        line-height: 16.8px;
        min-width: 220px;
        border-radius:4px;
    }

        .select-box:hover, .select-box:focus {
            background: #d4ecff;
        }

        .select-box > .title {
            font-size: 16px;
            line-height: 20px;
            color: #17c8b8;
            margin-top: 10px;
        }

        .select-box .title:hover {
            text-decoration: none;
            cursor: pointer;
        }

        .select-box label {
            font-family: 'GothamBold', sans-serif;
            line-height: 24px;
            font-size: 14px;
            color: #333333;
        }

        .select-box.text-left .title {
            margin: 20px 0px;
            line-height: 24px;
        }

        .select-box.text-left h4 {
            color: #333333;
        }

        .select-box .cta-success {
            width: 100%;
            margin-bottom: 20px;
        }

        .select-box .s12-select {
            margin-top: 7px;
            margin-bottom: 20px;
        }

        .select-box .title img {
            margin-right: 5px;
        }

        .select-box .title .fa {
            margin-right: 10px;
        }

        .select-box .title > * {
            vertical-align: middle;
        }

    .resign-box {
        background-color: #f2dede;
        border: 1px solid #f1dade;
        color: #333333;
    }

        .resign-box:hover {
            background: #e5b8b8;
        }

    .contract-box, .payroll-box {
        border: 1px solid #bfddd2;
        border-radius: 4px;
        padding: 10px;
        margin-bottom: 20px;
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }

    @media screen and (min-width: 1024px) {
        .contract-box {
            margin-right: 20px;
            max-width: 450px;
        }
    }

    .box-body {
        padding: 10px;
    }

        .box-body td, .box-body .row, .payroll-box .row {
            padding-top: 5px;
            padding-bottom: 5px;
        }

    /*.contract-box .box-header > div,
	.contract-box .box-body > div {
		display: inline-block;
		vertical-align: top;
	}

	.contract-box .box-header {
		font-size: 21px;
		line-height: 25px;
		color: #303640;
	}

	.contract-box .box-header .job-name {
		color: #9a609b;
		font-family: sans-serif;
		font-size: 14px;
		margin-top: 3px;
		display: inline-block;
	}*/

    /*.contract-box .box-header > div:first-child,
	.contract-box .box-body > div:first-child {
		width: 70%;
	}

	.contract-box .box-header > div:last-child,
	.contract-box .box-body > div:last-child {
		width: calc(100% - 70% - 6px);
		text-align: right;
	}

	.contract-box .box-body {
		margin-top: 15px;
	}

		.contract-box .box-body .table {
			margin-bottom: 0;
		}

			.contract-box .box-body .table tr td {
				border: 0;
				padding: 5px 10px;
			}

				.contract-box .box-body .table tr td:first-child {
					text-align: right;
					color: #999999;
				}*/

    .contract-box .cta {
        min-width: 100px;
        margin-bottom: 15px;
        min-height: 40px;
    }
    /*
	 Employee
  */
    .employee-tbl tbody tr td {
        border: none;
        vertical-align: middle;
        padding: 10px;
    }

    .employee-tbl tbody tr:hover {
        background-color: #edf9ff;
        cursor: pointer;
    }

    .employee-tbl .last-name {
        font-family: 'GothamBold', sans-serif;
    }

    .employee-tbl .avarta {
        height: 65px;
        width: 65px;
        border-radius: 100%;
        display: block
    }
    /*sprint 87*/
    .employee-tbl thead tr th {
        color: #8c648f;
        font-weight: normal;
        border-bottom: 2px solid #8c648f;
    }

    @media screen and ( max-width: 768px ) {
        .employee-tbl .emp-name, .employee-tbl .emp-position {
            max-width: 300px;
            white-space: normal !important;
        }
    }

    .stt-active,
    .stt-inactive {
        font-size: 12px;
        line-height: 15px;
        font-family: 'GothamBold', sans-serif;
        text-transform: uppercase;
    }

        .stt-active .fa,
        .stt-inactive .fa {
            font-size: 18px;
            padding-right: 5px;
        }

    .stt-active {
        color: #5cb75b;
    }

    .stt-inactive {
        color: #999999;
    }
    /*
 * Thai customer
 */
    .component-div-h1 {
        font-size: 36px;
        color: #333333;
        font-family: sans-serif;
        line-height: 43px;
        margin-top: 0
    }

    .component-div-h1-content {
        font-size: 16px;
        color: #000000;
        font-family: sans-serif;
        line-height: 24px;
    }

    .component-div-ThingstoDo h3 {
        color: #999999;
        font-size: 21px;
        margin-top: 0;
    }

    .component-div-ThingstoDo p {
        color: #999999;
        font-size: 14px;
    }

    .component-div-h1-title {
        color: #000000;
        font-size: 24px;
        font-family: sans-serif;
        line-height: 24px;
    }

    .component-div-ThingstoDo {
        width: 350px;
        background-color: #F2EEFF;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        padding: 10px 10px 10px 20px;
        border: 1px solid #CCB6D1;
        margin-bottom: 20px;
    }

    .component-div-Reminders {
        width: 300px;
        background-color: #ECF1F5;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        padding: 10px 10px 10px 20px;
        border: 2px solid #E4EDF4;
        text-align: center;
        margin-bottom: 20px;
    }

        .component-div-ThingstoDo:last-child,
        .component-div-Reminders:last-child {
            margin-bottom: 0
        }

        .component-div-Reminders h3 {
            color: #999999;
            font-size: 21px;
        }

        .component-div-Reminders p {
            color: #999999;
            font-size: 14px;
        }

    .component-div-ThingstoDo .formatA {
        float: right;
        padding-right: 10px;
        padding-top: 7px;
        font-size: 15px;
        color: #999999;
    }

    /*
 * Custom table
 */
    table.s12-table td {
        font-size: 14px;
    }

    .s12-table thead tr th {
        color: #8c648f;
        font-weight: normal;
        border-bottom: 2px solid #8c648f;
    }

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

    .s12-table tbody tr {
        border-bottom: 1px solid #cdd6da;
    }

        .s12-table tbody tr td {
            border: none;
            vertical-align: middle;
        }

    @media screen and (max-width: 768px) {
        .s12-table tbody tr td {
            word-break: normal !important;
        }
    }

    .s12-table tbody tr td .rollover {
        color: #00c7a0;
        font-size: 18px;
    }

    .tr-group, .s12-table .tr-group {
        font-size: 16px;
        background: #fff;
        color: #55B6FA;
        border-bottom: #55B6FA solid 2px;
        font-weight: bold;
        padding: 10px;
    }

    .s12-dvgrid {
        margin: 0 15px;
    }

        .s12-dvgrid div.row {
            padding-top: 10px;
            border-bottom: #cdd6da solid 1px;
        }

    .s12-table-striped div.row:nth-of-type(odd) {
        background-color: #f5f5f5;
    }

    .table-responsive > .table > tbody > tr > td, .table-responsive > .table > tbody > tr > th, .table-responsive > .table > tfoot > tr > td, .table-responsive > .table > tfoot > tr > th, .table-responsive > .table > thead > tr > td, .table-responsive > .table > thead > tr > th {
        white-space: normal;
    }

    /*Nga*/
    .table-responsive {
        padding-bottom: 20px;
    }

        .table-responsive .s12-table thead tr th {
            /*min-width: 120px;*/
        }

            .table-responsive .s12-table thead tr th.check-all {
                min-width: 30px;
            }

        .table-responsive .s12-table {
            margin-bottom: 0;
            color: #333;
        }

    .table-nostyle > tbody > tr:nth-of-type(odd) {
        background-color: unset;
    }

    .s12-table tbody tr td .avarta {
        border-radius: 100%;
    }

    .payslip-tbl tbody tr td {
        vertical-align: middle;
        color: #999999;
    }

        .payslip-tbl tbody tr td .net-pay {
            color: #333333;
        }

        .payslip-tbl tbody tr td .last-name {
            font-family: 'GothamBold', sans-serif;
        }

    .send-payslip > *,
    .stt-send > *,
    .stt-sent > * {
        vertical-align: middle;
    }

    .send-payslip,
    .stt-send {
        color: #17c8b8;
        background: transparent;
        border: 0;
    }

    .stt-sent {
        color: #cdd6da;
        background: transparent;
        border: 0;
    }

        .send-payslip svg,
        .stt-send svg,
        .stt-sent svg {
            width: 20px;
            height: 18px;
            margin-right: 4px;
        }

    .leave-tbl tbody tr td {
        color: #999999;
    }

        .leave-tbl tbody tr td .num-days {
            color: #333333;
        }
    /*
 * Checkbox and radio buttons
 */
    .checkbox, .radio {
        margin: 0;
        display: block;
        width: 100%;
    }

        .checkbox .checkbox-span, .radio .radio-span {
            width: calc(100% - 25px);
            vertical-align: top;
            /*word-break:break-word;*/
        }


        .radio > *, .checkbox > * {
            display: inline-block;
            /*color: #999999;*/
        }

        .radio > span, .checkbox > span {
            padding-left: 5px;
        }

        .radio .card-ctn {
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            margin-left: 15px;
            padding: 10px;
            width: calc(100% - 37px);
        }

            .radio .card-ctn.checked {
                border: 1px solid #18aa4f;
            }

            .radio .card-ctn > div {
                margin: 0;
            }

        .radio[disabled] > label {
            cursor: not-allowed;
            opacity: 0.7;
        }

        .checkbox label, .radio label {
            margin: 0;
            padding: 0;
        }

        /*.checkbox label {
            margin-right: 5px;
        }*/

        .checkbox[disabled] label {
            cursor: not-allowed;
        }

        .checkbox label > *, .radio label > * {
            vertical-align: sub;
        }

        .checkbox label:after, .radio label:after {
            content: '';
            display: table;
            clear: both;
        }

        .checkbox label input[type="checkbox"], .checkbox label input[type="radio"],
        .radio label input[type="checkbox"], .radio label input[type="radio"] {
            display: none;
        }

            .checkbox label input[type="checkbox"] + .icon-checked > .icon, .checkbox label input[type="radio"] + .icon-checked > .icon-cicle-radio,
            .radio label input[type="checkbox"] + .icon-checked > .icon, .radio label input[type="radio"] + .icon-checked > .icon-cicle-radio {
                opacity: 0;
            }

            .checkbox label input[type="checkbox"]:disabled + .icon-checked, .checkbox label input[type="radio"]:disabled + .icon-checked,
            .radio label input[type="checkbox"]:disabled + .icon-checked, .radio label input[type="radio"]:disabled + .icon-checked {
                opacity: 1;
            }

        .checkbox .icon-checked, .radio .icon-checked {
            position: relative;
            display: inline-block;
            border: 1px solid #999999;
            margin-right: 0;
            background-color: #FFFFFF;
        }

        .radio .icon-checked {
            border-radius: 100%;
            width: 20px;
            height: 20px;
        }

        .checkbox .icon-checked {
            border-radius: 0;
            width: 18px;
            height: 18px;
        }

            .checkbox .icon-checked svg {
                height: 22px;
                width: 22px;
                position: absolute;
                top: -3px;
                left: -3px;
            }

    .checkbox-error .icon-checked,
    .radio-error .icon-checked {
        border: solid 1px #cccccc;
    }

    .checkbox label input[type="checkbox"]:checked + .icon-checked > .icon {
        opacity: 1;
        font-size: 14px;
    }

    .checkbox label input[type="checkbox"]:checked + .icon-checked {
        background-color: #FFFFFF;
    }

    .icon-cicle-radio {
        height: 10px;
        width: 10px;
        display: block;
        background-color: #17c8b8;
        border-radius: 100%;
    }

    .radio label input[type="radio"]:checked + .icon-checked > .icon-cicle-radio {
        opacity: 1;
        font-size: 10px;
        position: absolute;
        top: 4px;
        left: 4px;
    }

    .error-message, .error-message-error {
        color: #b77a6c;
        margin-top:2px;
        /*padding-left: 10px;*/
    }

        .error-message > * {
            vertical-align: middle;
        }

        .error-message svg,
        .error-message img {
            margin-right: 5px;
        }

    .error-date-picker {
        /*position: relative;
	bottom: 10px*/
    }

    /*div.has-error {
		display: flex;
		align-items: center;
	}

	.s12-box-modal div.has-error {
		display: block;
	}*/
    /*
 * Screen Congratulations to add success
 */
    .success-msg img {
        margin-top: 60px;
        margin-bottom: 10px;
    }

    .success-msg p {
        font-size: 16px;
        line-height: 24px;
        color: #999999;
    }

    .success-msg a {
        color: #17c8b8;
    }

    .g-recaptcha {
        transform-origin: left top;
        -webkit-transform-origin: left top;
    }

    /*
 * Bootstrap Date Picker
 */
    .bootstrap-datetimepicker-widget {
        display: block;
    }

    div.datepicker > div {
        display: block;
    }

    .cadena-datetimepicker {
        position: relative;
        max-width: 320px;
        width: 100%;
    }

        .cadena-datetimepicker .input-group-addon {
            position: absolute;
            z-index: 4;
            top: 0;
            right: 0;
            background: transparent;
            border: none;
            padding: 0;
            width: auto;
            margin: 6px 9px;
            font-size: 17px
        }

        .cadena-datetimepicker .s12-input {
            padding-right: 30px;
        }

    .datepicker.datepicker-dropdown {
        z-index: 5000 !important;
    }
    /*
 * Custom style Bootstrap Modal
 */
    .comfirm-popup-header-color {
        background-color: #389c90 !important;
    }

.t5bootstrap .modal {
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1300 !important;

}

        .t5bootstrap .modal .modal-header {
            background-color: #d44637;
            border-bottom: none;
            text-align: left;
        }

            .t5bootstrap .modal .modal-header .modal-title {
                color: #fff;
                font-family: $font-helveticaneueBold;
                font-size: 16px;
            }

        .t5bootstrap .modal .modal-content {
            color: #000000;
            text-align: center;
            font-size: 15px;
            line-height: 30px;
            border-radius: 0px;
        }

        .t5bootstrap .modal .modal-footer {
            text-align: center;
            border-top: 0;
            border-bottom: none;
        }

            .t5bootstrap .modal .modal-footer .btn-danger {
                background-color: #b3382c;
                border: none;
                box-shadow: none;
                border-radius: 0px;
                min-width: 6em;
            }

        .t5bootstrap .modal .modal-content .close {
            font-size: 14px;
            position: absolute;
            top: -10px;
            right: -10px;
            color: #f8f8f8;
            opacity: 1;
            min-width: 30px;
            width: 30px;
            height: 30px;
            background-color: rgba(171,171,171,0.75);
            border-radius: 50%;
            color: #333;
            font-size: 14px;
            padding: 0px;
            z-index: 7;
        }

    .t5bootstrap .defaultModal .modal-header {
        background-color: #17c8b8;
    }

    .t5bootstrap .defaultModal .cta {
        min-width: 80px;
        padding: 7px 20px;
        margin: 0 3px;
    }

    .avarta-profile {
        position: relative;
        height: 100px;
        width: 100px;
        border-radius: 50%;
    }

        .avarta-profile img {
            height: 100px;
            width: 100px;
        }

        .avarta-profile span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #FFFFFF;
            opacity: 0;
        }

        .avarta-profile:hover span {
            opacity: 1;
        }

    /*.income-type {
		margin-left: 45px;
	}*/

    .income-type .checkbox {
        margin-bottom: 20px;
        margin-left: 5px;
    }

    /*
 * Styling for Title
 */
    .title-group .title {
        margin: 0;
    }

    .big-title-group.first,
    .small-title-group.first {
        margin-top: 0;
    }

    .big-title-group {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    .small-title-group {
        margin-top: 20px;
        margin-bottom: 25px;
    }

    /*#leave-policy .view-form {
		padding-top: 20px;
		padding-bottom: 20px;
		display: block;
	}*/

    /*.leave-day > span:first-child,
	.leave-month > span:first-child {
		width: 35px;
		display: inline-block;
	}

	.leave-day span:last-child,
	.leave-month span:last-child {
		color: #999999;
	}

	.leave-month {
		margin-left: 20px;
	}*/

    .payroll .form-box .tab-content,
    .payroll .form-box .s12-nav-tabs,
    .payroll .form-box .header-inline {
        margin-left: 20px;
        margin-right: 20px;
    }

    @media (max-width: 479px) {
        .tab-header .tab-right {
            width: 100%;
        }

        .cta {
            min-width: 120px;
            margin-bottom: 10px;
        }

        .contract-box .box-header > div:first-child, .contract-box .box-body > div:first-child,
        .contract-box .box-header > div:last-child, .contract-box .box-body > div:last-child {
            width: 100%;
        }

        /*.contract-box .box-header > div:last-child, .contract-box .box-body > div:last-child {
			text-align: center
		}*/
    }

    .glyphicon glyphicon-ok check-mark {
        position: relative;
        float: left;
    }

    .list-hover:hover {
        background-color: #d5f2ed;
    }

    .list-hover {
        padding: 5px;
    }

    .list-role {
        padding-left: 15px;
    }

    .status-active {
        font-size: 20px;
        color: #17c8b8;
    }

    .list-checkbox,
    #checboxactive {
        padding-top: 7px;
    }

    button.cta-small {
        background: transparent;
        border: 0px;
    }

        button.cta-small[disabled] {
            cursor: not-allowed;
            opacity: 0.5;
        }

    .employeeInfo.list-inline:hover {
        cursor: pointer;
    }

    .employeeInfo.list-inline > li:first-child,
    .employeeInfo.list-inline > li img {
        width: 65px;
        height: 65px;
        margin-right: 10px;
        vertical-align: middle;
    }

    .successfully {
        padding-top: 25vh;
    }
    /*==== Header ====*/
    .navbar-default {
        background-color: #10394E !important;
        border: 0;
        /*border-bottom: #f8f5f2 solid 1px;*/
    }

        .navbar-default .navbar-nav > li > a {
            color: #777;
            text-transform: uppercase;
            font-size: 12px;
            font-weight: bold;
            text-decoration: none;
        }

    /*.navbar-default .navbar-nav > li > a span {
            color: #d9d9d9;
        }*/

    .navbar-btn {
        font-size: 12px !important;
        text-transform: uppercase;
    }

    .navbar-default .navbar-nav > li > a:focus span, .navbar-default .navbar-nav > li > a:hover span {
        color: #FAA719;
        /*border-bottom: #fff solid 2px;*/
    }

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

    .navbar-right .btn {
        height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        text-decoration: none;
    }

    .navbar-right .btn-default {
        color: #777;
        background: transparent;
        border: #fff solid 1px;
    }

        .navbar-right .btn-default:hover {
            color: #fff;
            background: rgba(0,0,0,0.1);
            border: #fff solid 1px;
        }
    /*------- popup ----------*/
    .popup {
        background: #fff;
        border: #ccc solid 2px;
    }

    ul.dropdown-menu.inner {
        max-width: 120px;
    }

    .popup-signup .popup {
        /*position: absolute;*/
        top: 0;
        width: 100%;
        max-width: 535px;
        /*z-index: 5000;*/
    }

        .popup-signup .popup i {
            font-size: 24px;
            margin-top: 10px;
            vertical-align: middle;
            margin-right: 15px;
        }

        .popup-signup .popup i.fa-calendar {
            font-size:17px;
            margin-top:0;
            margin-right:0;
        }

    .popup-signup {
        position: relative;
        margin-top: 5%;
        margin-left: 13%;
    }

    .control-label {
        font-weight: normal;
    }

    .popup-log .popup {
        margin-top: 150px;
    }

    .e-elephant-look {
        display: none;
    }

    .popup-change {
        position: absolute;
        right: 5%;
        left: 5%;
        top: 190px;
        z-index:1;
    }

        .popup-change .popup {
            margin-top: 0;
        }

    @media screen and (max-width: 992px) {
        .popup-signup {
            margin-left: 5%;
        }
    }

    @media screen and (max-width: 768px) {
        .popup-change {
            position: absolute;
            right: 5%;
            left: 5%;
            top: 135px;
        }

            .popup-change .popup {
                margin-top: 0 !important;
            }

        .popup-log .popup {
            margin-top: 70px;
        }

        .e-elephant-look img {
            display: none;
        }

        .e-elephant-look {
            display: none;
        }
    }

    .e-elephant-teacher {
        position: absolute;
        top: 0;
        right: 0;
    }

        .e-elephant-teacher h2 small {
            color: #fff;
        }

    @media screen and (max-width: 768px) {
        /*.popup-signup .popup {
            margin-top: 300px;
        }*/

        .e-elephant-teacher {
            display:none;
        }
    }

    @media screen and (min-width: 768px) {
        .e-elephant-teacher {
            right: 0;
            left: 545px;
        }
    }

    .popup-footer {
        background: #DAEEF3;
        padding: 10px;
        min-height: 60px;
        position: relative;
    }
    /*---- Padding ----*/
    .padded {
        padding: 15px;
    }

    .padded-col {
        padding-left: 15px;
        padding-right: 15px;
    }

    .padded-row {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .padded-top {
        padding-top: 15px;
    }

    /*---- Typography ----*/
a {
    color: #17C8B8;
    cursor: pointer;
}

        a:hover {
            color: #17c8b8;
        }

    h1 {
        font-size: 48px;
    }

    .help h2 {
        font-size: 40px !important;
        line-height: 31px;
        margin: 0 0 15px 0;
    }

        .help h2.head {
            margin: 0 0 30px 0
        }

        .help h2 small {
            font-size: 30px !important;
            line-height: 36px;
            color: inherit;
            font-family: "Clearface Bold", "clearface", "Times New Roman", Arial, sans-serif;
            !important;
        }

    .help h3 {
        font-size: 20px !important;
        line-height: 1;
        margin: 0 0 15px 0;
    }

    h3.sub-head {
        margin: 10px 0 30px 0;
    }

    h3.card-title {
        margin: 30px 0 15px 0;
    }

    h3 small {
        font-size: 18px !important;
        color: inherit;
    }

    .text-highlight {
        color: #1EB6A8;
    }

    .text-highlight-2 {
        color: #8A67B2;
    }

    .text-danger {
        color: #CF142B !important;
    }

    .text-warning {
        color: #FAA719 !important;
    }

    /*---- Form ----*/
    .login-form .form-control {
        /*background: #FAFFBD;*/
        height: 34px;
    }

.login-form .icon-ms-warning {
    font-size:16px !important;
    position:relative;
    top:2px;
    margin-right:5px !important;

}

.padded .language-dropdown .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
    /*background: #FAFFBD;*/
}
.padded .paymentperiod-dropdown .btn-default {
    border: 1px solid #d0d4d5;
    border-radius: 0;
    box-shadow: none;
    height: 40px;
    width: 100%;
    text-align: left;
    padding: 4px 30px 4px 20px;
    /*background: #FAFFBD;*/
}


.s12-select .form-control {
    background: unset !important;
}

        .s12-select .form-control:hover {
            border: unset !important;
        }

    .form-control {
        border-radius: 0;
        box-shadow: none;
    }

        .form-control:hover, .input-group-addon:hover {
            /*border: #000 solid 1px;*/
        }

        .form-control:focus, .input-group-addon:focus {
            /*border: #1EB6A8 solid 1px;*/
            border: #000 solid 1px;
            box-shadow: none;
        }

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
        color: unset;
        background-color: rgba(23,200,184,0.1);
    }


    .login-form .input-group-addon i {
        color: #FF9700;
    }

    .input-search .form-control {
        background: #fff;
    }

    .input-search .btn {
        background: #fff;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        border: #D0D2D3 solid 1px;
        border-left: 0;
    }

    .padded .row {
        margin-top: 15px !important;
    }
    /*-------main--------*/
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .main {
        margin-top: 60px;
    }

    .text-right {
        text-align: right;
    }

.btn-success {
    color: #fff;
    background: #008080;
    border: #1da369 solid 1px;
}

    .btn-success:hover {
        color: #fff;
        background: #05d2c6;
        border: #1da369 solid 1px;
    }

    .mouse-cursor {
        cursor: pointer;
    }

    .userprofile-a {
        padding-top: 2px !important;
        text-align: right !important;
    }

    /*.userprofile-span-company {
		margin-right: 25px;
		position: relative;
		top: 10px;
	}

	.userprofile-span-fullname {
		position: relative;
		top: 10px;
	}*/

    /*.userprofile-img {
		margin-top: -20px;
		margin-left: 5px !important;
	}*/

    .paytime-a {
        padding: 15px;
        padding-top: 20px;
    }

    .icon-caption {
        position: relative;
        /*top: 5px;*/
    }
    /*-----thead-----*/
    .th-center {
        text-align: center;
    }

    .th-90 {
        width: 90px;
    }

    .th-100 {
        width: 100px;
    }

    .th-120 {
        width: 120px;
    }

    .th-150 {
        width: 150px;
    }

    .th-135 {
        width: 135px;
    }

    .th-155 {
        width: 155px;
    }

    .th-185 {
        width: 185px;
    }
    /*-----------------*/
    /*--------td-------*/
    .td-50 {
        width: 50px;
    }

    .td-90 {
        width: 90px;
    }

    .td-100 {
        width: 100px;
    }

    .td-120 {
        width: 120px;
        text-align: right;
    }

    .td-120-center {
        width: 120px;
        text-align: center;
    }

    .td-120-left {
        width: 120px;
        text-align: left;
    }

    .td-300-middle {
        width: 300px;
        vertical-align: middle !important;
    }

    .td-middle {
        vertical-align: middle !important;
        text-align: left;
    }

    .td-150 {
        width: 150px;
    }

    .td-200 {
        width: 200px;
    }

    .td-185 {
        width: 185px;
    }

    .td-155 {
        width: 155px;
    }

    .td-center {
        text-align: center;
    }

    .td-right {
        text-align: right;
    }

    .td-left {
        text-align: left;
    }
    /*--------------------*/
    /*---------div--------*/
    .div-120 {
        width: 120px;
    }

    .div-130 {
        width: 130px;
    }

    .div-140 {
        width: 140px;
    }

    .div-150 {
        width: 150px;
    }

    .div-center {
        text-align: center;
    }

    .div-right-height {
        text-align: right;
        height: 15px;
    }

    .div-right {
        text-align: right;
    }

    .title-padding {
        padding-top: 30px;
    }

    .img-middle {
        vertical-align: -webkit-baseline-middle !important;
        padding-right: 10px;
    }
    /*---------------------*/
    /*--------span---------*/
    .error-middle {
        vertical-align: -webkit-baseline-middle;
    }
    /*---------------------*/
    .none-margin-padding {
        margin: 0px;
        padding: 0px;
    }

    .row-table {
        margin-left: 0px;
        margin-right: 0px;
    }

    .email-green-color {
        color: #17c8b8;
    }
    /*---------message------*/
    .messager .top-icon {
        max-width: 150px;
        margin: 0 auto;
        margin-bottom: 45px;
    }
    /*---- Padding ----*/
    .padded {
        padding: 15px;
    }

    .padded-row {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    .padded-col {
        padding-left: 15px;
        padding-right: 15px;
    }

    .page {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /*---- BG ----*/
    .bg-white {
        background: #fff;
    }

    .bg-green {
        background: #1EB6A8;
        color: #fff;
    }

        .bg-green h2, .bg-purple h2 {
            font-weight: bold;
        }

    .bg-grey {
        background: #F2F2F2;
    }

    .bg-purple {
        background: #8A67B2;
        color: #fff;
    }

    /*---- FOOTER ----*/
    .main {
        margin-top: 60px;
    }

    @media screen and (max-width: 768px) {
        footer {
            font-size: 12px;
        }
    }

    footer ul.footer-center {
        padding: 0;
        margin: 0;
    }

        footer ul.footer-center li {
            display: inline-block;
            margin: 0 15px;
        }

    footer a {
        color: #fff;
        text-decoration: none;
    }

        footer a:hover {
            color: #000;
            text-decoration: none;
        }

    footer {
        background-color: #555;
        color: white;
        padding: 15px;
    }
    /*------ Header ---------*/
    .help .navbar-default {
        background-color: #1EB6A8;
        border: 0;
        min-height: 60px !important;
    }

        .help .navbar-default .navbar-brand {
            color: #FFFFFF;
            font-size: 29px;
            font-family: 'OCRAExtended-Regular';
            padding: 0px !important;
            margin-top: 5px;
            height: 50px !important;
            font-weight: bold;
        }

        .help .navbar-default .navbar-nav > li > a {
            color: #777;
            text-transform: uppercase;
            font-size: 12px;
            text-decoration: none;
        }

            .help .navbar-default .navbar-nav > li > a span {
                color: #d9d9d9;
            }

            .help .navbar-default .navbar-nav > li > a:focus, .help .navbar-default .navbar-nav > li > a:hover {
                color: #FAA719;
            }

                .help .navbar-default .navbar-nav > li > a:focus span, .help .navbar-default .navbar-nav > li > a:hover span {
                    color: #FAA719;
                    border-bottom: #fff solid 2px;
                }

    .help .navbar-btn {
        font-size: 12px !important;
    }

    .help .navbar-default .navbar-toggle {
        border: #ddd solid 1px;
    }

        .help .navbar-default .navbar-toggle:focus, .help .navbar-default .navbar-toggle:hover {
            background: rgba(0,0,0,0.1);
        }

        .help .navbar-default .navbar-toggle .icon-bar {
            background: #888 !important;
        }

    .help .navbar-default .navbar-right .btn {
        margin-right: 15px;
    }

    @media screen and (max-width: 768px) {
        .help .navbar-default .navbar-right .btn {
            margin-left: 15px;
        }
    }

    @media screen and (min-width: 768px) {
        .help .navbar-fixed-top {
            padding-right: 15px;
        }
    }

    .help .navbar i {
        font-size: 14px;
    }
    /*------- Help ---------*/

    .backgroundcolorWhite {
        background-color: white !important;
    }

    @media screen and (min-width: 768px) {
        .features-help .card {
            min-height: 320px;
        }
    }

    .features-help .card {
        border: #ddd solid 1px;
    }

        .features-help .card a {
            color: #404040 !important;
        }

        .features-help .card .card-title {
            font-size: 22px !important;
        }

        .features-help .card .card-text {
            font-size: 16px;
        }

    .help-content-right {
        margin-top: 30px;
        border-top: #1EB6A8 solid 2px;
        padding-top: 30px;
    }
    .policies .help-content-right {
        border-top: none !important;
    }

        @media screen and (min-width: 768px) {
            .help-content-left {
            float: left;
            position: fixed;
            width: 250px;
            height: 400px;
            overflow-y: auto;
        }

        .help-content-right {
            margin-left: 280px;
            margin-top: 0;
            border-top: 0;
            padding-top: 0;
        }
            .policies .help-content-right {
                margin-left:0;
            }
    }

    /*.help-content-right a {
    color: #1EB6A8;
}*/

    .help-content-right h4 a {
        color: #404040;
    }

    .help-content-right .question {
        font-size: 24px;
        line-height: 30px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .help-content-right div.qa {
        margin-bottom: 20px;
    }

    /*.help-content-right div.qa:target {
		border: #4CAF50 solid 3px;
		border-radius: 3px;
	}

		.help-content-right div.qa:target .question {
			background: #4CAF50;
			color: #fff;
			padding: 15px;
			font-size: 20px;
		}

		.help-content-right div.qa:target p {
			padding: 5px 15px !important;
		}

		.help-content-right div.qa:target li {
			margin-right: 15px;
		}*/
    .high-light-question {
        border: #4CAF50 solid 3px;
        border-radius: 3px;
    }

        .high-light-question .question {
            background: #4CAF50;
            color: #fff;
            padding: 15px;
            font-size: 20px;
        }

        .high-light-question p {
            padding: 5px 15px !important;
        }

        .high-light-question li {
            margin-right: 15px;
        }

    @media screen and (max-width: 768px) {
        .btn-gotop {
            bottom: 15px;
            right: 5px;
        }
    }

    .features .card {
        padding: 30px;
        margin-bottom: 15px;
    }

        .features .card img {
            max-width: 100px;
            max-height: 100px;
        }

    @media screen and (min-width: 768px) {
        #features .card {
            min-height: 450px;
        }
    }

    @media screen and (min-width: 992px) {
        #features .card {
            min-height: 320px;
        }
    }

    /*.help {
    font-family: 'Open Sans',sans-serif !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: #404040;
}*/

    .help .navbar-default .navbar-nav > li > a {
        color: #777;
        text-transform: uppercase;
        font-size: 16px;
        text-decoration: none;
    }

    @media (max-width: 768px) {
        .help .navbar-default .navbar-nav > li > a {
            font-family: 'Clearface Bold', "clearface", 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }
    }
    /* Remove the navbar's default margin-bottom and rounded borders */
    .help nav.navbar {
        margin-bottom: 0;
        border-radius: 0;
    }

    .help .navbar-default {
        background-color: #1EB6A8;
        border: 0;
        min-height: 60px;
    }

    .items {
        margin-top: 15px !important;
    }
    /*==== form =====*/
    .help .form-control {
        background: #FAFFBD;
        border: #D0D2D3 solid 1px;
        height: 40px;
    }

    .help .form-control, .input-group {
        margin: 0 0 0 0;
    }

        .help .form-control:hover {
            border: #000 solid 1px;
        }

        .help .form-control:focus {
            border: #1EB6A8 solid 1px;
        }

    .input-search .form-control {
        background: #fff;
    }
    /*==== Button ====*/
    .help .btn {
        height: 40px;
        padding: 8px 12px;
        font-size: 14px;
        text-decoration: none;
    }

    .help .btn-default {
        color: #777;
        background: transparent;
        border: #fff solid 1px;
    }

        .help .btn-default:hover {
            color: #fff;
            background: rgba(0,0,0,0.1);
            border: #fff solid 1px;
        }

    .help .btn-highlight {
        background: #FFC000;
        color: #000;
        font-weight: 500;
    }

        .help .btn-highlight:hover {
            background: #FF9700;
        }

    .help .btn-success {
        color: #fff;
        background: #1EB6A8;
        border: #1da369 solid 1px;
    }

        .help .btn-success:hover {
            color: #fff;
            background: #1da369;
            border: #1da369 solid 1px;
        }

    .btnHelpSearch {
        border: 1px solid transparent !important;
        border-radius: 4px !important;
        background: gainsboro !important;
        margin-left: -2px !important;
    }

    .input-group-addon i {
        color: #FF9700;
    }

    .input-search .btn {
        background: #fff;
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        border: #D0D2D3 solid 1px;
        border-left: 0;
    }

    .btn-gotop {
        position: fixed;
        right: 30px;
        bottom: 60px;
        font-size: 18px;
        font-weight: bold;
        -webkit-box-shadow: 2px 3px 20px -8px rgba(0,0,0,0.66);
        -moz-box-shadow: 2px 3px 20px -8px rgba(0,0,0,0.66);
        box-shadow: 2px 3px 20px -8px rgba(0,0,0,0.66);
        background: #fff;
        padding: 5px;
    }

    .well {
        background: #fff2cc;
        margin: 10px;
    }

    .well-sm {
        padding: 9px;
        border-radius: 3px;
    }
    /*==========End Help===================*/
    /*=============Progress Bar============*/
    .progress-img {
        position: fixed;
        z-index: 2000;
        top: 45%;
        margin-top: -50px;
        left: 10%;
        margin-left: -50px;
    }
    /*=============End Progress Bar========*/

    /*===========Report===================*/
    .formEA {
        height: 500px;
        overflow: auto;
        border: 1px solid;
        padding-top: 20px !important;
    }

    .formE {
        height: 500px;
        overflow: auto;
        border: 1px solid;
        padding-bottom: 10px;
        padding-top: 20px !important;
    }

        .formE .label {
            display: table-cell;
            padding: .2em .6em .3em;
            font-size: 100%;
            font-weight: 100;
            line-height: 1.2;
            color: #000;
            text-align: left;
            white-space: normal;
            vertical-align: baseline;
            border-radius: .25em;
        }

        .formE table tr td {
            vertical-align: middle;
            text-align: left;
        }

    .body-formE .td-9 {
        text-align: right;
        padding-right: 7px !important;
    }

    .body-formE .padding {
        padding-top: 80px !important;
    }

    .body-formE .td-emp {
        height: 27px !important;
    }

    .notificationChangeForm {
        height: 500px;
        overflow: auto;
        border: 1px solid;
        padding-bottom: 10px;
        padding-top: 20px !important;
    }

    /*===========End Report===============*/
    /*==========Payslip Detail============*/
    .body-payslip {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #777777;
        width: 210mm;
        position: relative;
        margin: 0 auto;
    }

        .body-payslip .content {
            color: #333333;
        }

        .body-payslip .tbl td {
            border-bottom: #CDD6DA solid 1px;
            padding: 10px;
        }

        .body-payslip .tbl tr:nth-child(even) {
            background: #F5F5F5;
        }

        .body-payslip .tbl tr:nth-child(odd) {
            background: #ffffff;
        }

        .body-payslip .title {
            font-family: Arial, Helvetica, sans-serif;
            font-size: 15px;
            font-weight: 500;
            color: #777777;
        }

        .body-payslip .number {
            text-align: right;
            color: #333333;
        }

        .body-payslip .status-active {
            font-size: 15px;
            color: #17c8b8;
        }
    /*==========End Payslip Detail========*/
    /*==========Time-sheet===============*/
    .time-sheet-week {
        padding-left: 5px;
        padding-right: 5px;
        vertical-align: super;
        color: #000;
    }

    .paytime-color {
        color: #1EB6A8;
    }

    .calendar-color {
        color: #1EB6A8;
        vertical-align: -webkit-baseline-middle;
        padding-left: 25px;
    }

    .calendar-text {
        /* margin-left: -30px; */
        vertical-align: -webkit-baseline-middle;
    }

    .input-50 {
        width: 50px;
        text-align: center;
    }

    .input-60 {
        width: 60px;
    }

    .input-80 {
        width: 80px;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .timesheet-calendar {
        /* margin-left: 60px; */
    }

        .timesheet-calendar .input-group-addon i {
            color: #1EB6A8;
        }

        .timesheet-calendar .cadena-datetimepicker .s12-input {
            padding-right: 30px;
            display: none;
        }

    .timesheet-form .s12-line.double {
        margin-left: 0px;
        margin-right: 0px;
    }

    .remark-popup {
        position: absolute;
    }

    .remark-popup-content {
        position: relative;
        background-color: #E3F3F0;
        border: 1px solid #cdd6da;
        padding: 10px 10px 0px 10px;
        box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.25);
        border-radius: 8px;
    }
    /*.remark-popup-content:before {
		right: 100%;
		top: 50%;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(194, 225, 245, 0);
		border-right-color: #E3F3F0;
		border-width: 10px;
		margin-top: -70px;
	}*/
    .description-popup {
        position: absolute;
        background-color: #e3f3f1;
        padding: 10px;
        box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.25);
        border-radius: 5px;
        z-index: 10;
    }

    @media screen and (max-width: 768px) {
        .description-popup, .remark-popup {
            left: 0 !important;
            width: 100%;
        }
    }

    @media screen and (min-width: 769px) {
        .remark-popup-content, .description-popup {
            width: 350px;
        }
    }

    .btn-remark {
        min-width: 50px;
        padding: 5px;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .icon-Description {
        margin-right: -17px;
        /*margin-left: 3px;*/
        font-size: 16px;
        color: #17c8b8;
    }

    .row .icon-Description {
        position: relative;
        top: 3px;
        /* float: right; */
        font-size: 14px;
    }

    @media screen and (max-width: 768px) {
        .row .icon-Description {
            float: none;
        }
    }

.marker-group {
    display: block;
    /*margin: 15px 0;*/
}

.marker-item {
    display: flex;
    align-items: center;
    float: left;
    width: 25%;
    min-width: 200px;
    margin-bottom: 10px;
    margin-right: 30px;
}

@media screen and (max-width: 480px) {
    .marker-item {
        width: 100%;
    }
}

.marker {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .marker-title {
        flex: 1;
    }

    .marker-dayoff {
        width: 20px;
        height: 20px;
        background-color: #d2ecf9;
        float: left;
    }
.marker-offday {
    width: 20px;
    height: 20px;
    background-color: #fdf59a;
    float: left;
}

    .marker-holiday {
        width: 20px;
        height: 20px;
        background-color: #ffdede;
        float: left;
    }

    .marker-halfdayoff {
        width: 20px;
        height: 20px;
        background-color: #edeba6;
        float: left;
    }

    /*.marker-restday {
        width: 20px;
        height: 20px;
        background-color: #edeba6;
        float: left;
    }*/



    .range-date {
        text-align: left;
        width: 220px;
    }

    .table-timesheet {
        margin-left: 0px;
        margin-right: 0px;
    }
    /*==========End Time-sheet===========*/
    /*==========Salary Calculation=======*/
    .calculate-status {
        margin-top: 10px;
        color: #5cb75b;
        font-size: 14px;
        font-family: sans-serif;
        font-weight: 700;
    }

    .lock-status {
        margin-top: 10px;
        color: #c31212;
        font-size: 14px;
        font-family: sans-serif;
        font-weight: 700;

    }

    .span-middle {
        vertical-align: -webkit-baseline-middle;
    }

    .div-btn-back {
        position: absolute;
        right: 0px;
        margin-right: -30px;
        z-index: 10;
    }

        .div-btn-back .cta-close {
            min-width: 100px;
        }

    /*.i-collapse-expand {
		font-size: 16px;
		margin-left: 50px;
	}*/

    .payroll-box {
        padding-top: 0px !important;
        background-color: #ecf1f5;
        border-top: #1EB6A8 solid 3px;
    }

    .align-left {
        text-align: left;
    }

    .payroll-box .color {
        color: #8A67B2;
    }
    /*========End Salary Calculation=====*/

    .badge {
        background-color: #ff0000;
        position: relative;
        top: -9px;
        left: -5px;
        padding: 3px 5px;
    }

    .link-popup {
        cursor: pointer;
        color: #1EB6A8;
    }

    .require {
        border: 1px solid #a94442;
    }

    /*====DASHBOARD=====*/
    .employeeName-dashboard {
        word-break: break-word;
        min-width: 110px;
    }

    .bt-leave-pending-db {
        padding: 5px 0px 5px 0px !important;
        margin-bottom: unset !important;
        margin-right: -10px !important;
        min-width: 105px !important;
        /*line-height: 30px !important;*/
        font-size: 14px;
    }

    .tag-content {
        font-size: 15px !important;
    }

    .tag-leave-dashboard {
        border: none;
        border-radius: 7px;
        display: inline-block;
        padding: 10px 20px;
        text-align: left;
        min-width: 110px;
        margin-bottom: -20px;
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .tag-leave-pending {
        background-color: #faab17;
        color: #FFFFFF;
    }

    .tag-leave-approved {
        background-color: #6EC165;
        color: #FFFFFF;
    }

    .tag-leave-canceled {
        background-color: #CA565F;
        color: #FFFFFF;
    }

    .tag-leave-rejected {
        background-color: #CA565F;
        color: #FFFFFF;
    }

    .tag-leave-cancellation-submitted {
        background-color: #CA565F !important;
        color: #FFFFFF;
    }

    .tag-leave-draft {
        background-color: #999;
        color: #FFFFFF;
    }

    .tag-leave-new {
        background-color: #5BC0DE;
        color: #FFFFFF;
    }

    .td-min-width-100 {
        min-width: 100px;
    }

    .dropdown-submenu {
        position: relative;
    }

        .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: -95%;
            max-width: 180px;
            margin-top: -6px;
            margin-right: -1px;
        }

        .dropdown-submenu:hover > .dropdown-menu {
            display: block;
        }

        .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: left;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-right-color: #999;
            margin-top: 5px;
            margin-right: 10px;
        }

        .dropdown-submenu:hover > a:after {
            border-left-color: #ffffff;
        }

        .dropdown-submenu.pull-left {
            float: none;
        }

            .dropdown-submenu.pull-left > .dropdown-menu {
                left: -100%;
                margin-left: -74px;
            }

    .dropdown-menu-right {
        margin-left: 22px;
        border: 1px solid #17c8b8;
        border-radius: 0;
    }
}

.td-min-width-110 {
    min-width: 110px;
}

/*=====LEAVE===*/

.tag-leave-history {
    border: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    display: inline-block;
    padding: 2px 10px 3px;
    text-align: left;
    min-width: 100px;
    margin-top: 5px;
    margin-bottom: 5px;
    word-break:normal;
}

    .tag-leave-history .fa-tag {
        margin-right: 5px;
    }

.cursor-help {
    cursor: help;
}

.arrow-menu {
    float: right;
    font-size: 12px;
    margin-top: 6px;
}

.a-content {
    color: black;
    text-decoration: none;
    padding: 6px 0px;
    display: inline-block;
}

    .a-content:hover {
        text-decoration: none;
        color: black;
        cursor: context-menu;
    }

/*=====REPORT===*/
.text-left {
    text-align: left !important;
}

.radio-report-leave {
    width: unset !important;
}

.dateTimePicker-report-leave {
    width: 100% !important;
}

.remove-hover {
}

    .remove-hover:hover {
        background-color: unset !important;
        cursor: default !important;
    }

/*Admin Page*/
#search-admin-company {
}

    #search-admin-company:focus {
        border: #1EB6A8 solid 1px;
    }

.max-width-td-110 {
    max-width: 110px !important;
}

#dataTableTempTest_filter > label {
    color: #999999;
}

.salaryCalculation {
}

    .salaryCalculation .checkbox {
        padding-left: 20px;
    }

        .salaryCalculation .checkbox label {
            display: inline-block;
            position: relative;
            padding-left: 5px;
        }

            .salaryCalculation .checkbox label::before {
                content: "";
                display: inline-block;
                position: absolute;
                width: 17px;
                height: 17px;
                left: 0;
                margin-left: -20px;
                border: 1px solid #cccccc;
                border-radius: 3px;
                background-color: #fff;
                -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
                -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
                transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            }

            .salaryCalculation .checkbox label::after {
                display: inline-block;
                position: absolute;
                width: 16px;
                height: 16px;
                left: 0;
                top: 0;
                margin-left: -20px;
                padding-left: 3px;
                padding-top: 1px;
                font-size: 11px;
                color: #555555;
            }

        .salaryCalculation .checkbox input[type="checkbox"] {
            opacity: 0;
        }

            .salaryCalculation .checkbox input[type="checkbox"]:focus + label::before {
                outline: thin dotted;
                outline: 5px auto -webkit-focus-ring-color;
                outline-offset: -2px;
            }

            .salaryCalculation .checkbox input[type="checkbox"]:checked + label::after {
                font-family: 'FontAwesome';
                content: "\f00c";
            }

            .salaryCalculation .checkbox input[type="checkbox"]:disabled + label {
                opacity: 0.65;
            }

                .salaryCalculation .checkbox input[type="checkbox"]:disabled + label::before {
                    background-color: #eeeeee;
                    cursor: not-allowed;
                }

        .salaryCalculation .checkbox.checkbox-circle label::before {
            border-radius: 50%;
        }

        .salaryCalculation .checkbox.checkbox-inline {
            margin-top: 0;
        }

.calculate-not-status {
    margin-top: 10px;
    color: #999999;
    font-size: 14px;
    font-family: sans-serif;
    font-weight: 700;
    /*text-transform: uppercase;*/
}

.contract-box-admin {
    border: 1px solid #bfddd2;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 19px;
    /*max-width: 700px;*/
}

/*Employee Profile*/
@media screen and (max-width: 768px) {
    .taxDependence-relationship {
        word-break: break-word;
        white-space: normal !important;
        min-width: 150px;
        width: 150px;
    }
}

.remove-panding-margin {
    padding: unset !important;
    margin: unset !important;
}

.remove-panding-left {
    padding-left: unset !important;
}

.remove-panding-right {
    padding-right: unset !important;
}

.remove-panding-top {
    padding-top: unset !important;
}

.remove-panding-bottom {
    padding-bottom: unset !important;
}
/*logo css*/
.logo-pading {
    padding: 10px !important;
}

/*.select-background {
}
.select-background > button {
        background-color: #FAFFBD;
}

.select-background > button:hover {
            background-color: #FAFFBD;
}*/

/*====Salary Calculating table=====*/
.column-number-value {
    word-break: break-word !important;
    min-width: 110px !important;
}

.padding-t-5 {
    padding-top: 5px;
}

.padding-t-10 {
    padding-top: 10px;
}

.padding-t-15 {
    padding-top: 15px;
}

.padding-l-5 {
    padding-left: 5px;
}

.padding-l-10 {
    padding-left: 10px;
}

.padding-l-25 {
    padding-left: 25px;
}

.padding-l-15 {
    padding-left: 15px;
}

.padding-unset {
    padding: unset;
}

.padding-l-unset {
    padding-left: unset;
}

.padding-r-unset {
    padding-right: unset;
}

.padding-t-unset {
    padding-top: unset;
}

.padding-b-unset {
    padding-bottom: unset;
}

.padding-r-5 {
    padding-right: 5px;
}

.padding-r-10 {
    padding-right: 10px;
}

.padding-r-15 {
    padding-right: 15px;
}

.padding-b-5 {
    padding-bottom: 5px;
}

.padding-b-10 {
    padding-bottom: 10px;
}

.margin-t-5 {
    margin-top: 5px;
}

.margin-t-10 {
    margin-top: 10px;
}

.margin-l-15 {
    margin-left: 15px;
}

.margin-l-25 {
    margin-left: 25px;
}

.margin-l-5 {
    margin-left: 5px;
}

.margin-r-15 {
    margin-right: 15px;
}

.rows {
    color: #999999;
    font-size: 14px;
    font-family: sans-serif;
    padding-top: 5px;
}

.iframe-report {
    min-height: 2000px;
    width: 100%;
    border: none;
}

/*Combox select year*/
.max-width-combox-year-100 {
    width: 100px;
    max-width: 100px;
}

/*Combox select Leave*/
.max-width-combox-leave-200 {
    width: 200px;
    max-width: 200px;
}

.gray-color {
    color: #999999
}

.max-width-combox-DateTime-200 {
    width: 200px;
    max-width: 200px;
}

.max-width-combox-Month-150 {
    width: 150px;
    max-width: 150px;
}

.table-help td, th {
    padding-left: 5px !important;
}

.text-R {
    text-align: right;
}

.text-L {
    text-align: left;
}

.text-C {
    text-align: center;
}

.max-width-190 {
    max-width: 190px;
}

.max-width-150 {
    max-width: 150px;
}

.image-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alr-c {
    width: 40%;
    margin: 0 auto;
    position: relative;
}

@media screen and (max-width:768px) {
    .alr-c {
        width: unset;
    }
}

a.hrf-icon {
    font-size: 25px;
    /*padding: 11px 15px 18px 15px !important;*/
    height: 65px;
}

    a.hrf-icon i {
        position: relative;
    }

a.hrf-icon-active {
    background: #0c6772 !important;
    color:#fff !important;
}

    @media screen and (max-width: 768px) {
        a .hrf-icon {
        /*font-size: 20px;*/
        padding: 11px 15px !important;
    }

        a.hrf-icon i {
            top: 5px !important;
        }
}

.max-width-100Per {
    max-width: 100%;
}

.timesheet-calendar-datepicker {
    width: 50px;
}

    .timesheet-calendar-datepicker .input-group-addon i {
        color: #1EB6A8;
    }

    .timesheet-calendar-datepicker .cadena-datetimepicker .s12-input {
        color: transparent;
        border: transparent;
    }

    .timesheet-calendar-datepicker .cadena-datetimepicker .input-group-addon {
        left: 0;
    }

.container-subscription {
    position: relative;
}

.bottomright {
    position: absolute;
    bottom: 0px;
    right: 16px;
}

.btn-drop {
    position: fixed;
    border: 1px solid #17c8b8;
    min-width: 260px;
    cursor: pointer;
}

@media screen and (max-width:768px) {
    .btn-drop {
        width: 100%;
        left: 0 !important;
    }
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn, .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control,
.btn.disabled:hover, .btn[disabled]:hover, fieldset[disabled] .btn:hover {
    opacity: .7;
    background: #f1f1f1;
    border: #f1f1f1 solid 1px;
}

@media screen and (max-width:768px) {
    .navbar-default .navbar-nav > .open > a {
        color: #fff !important;
        /*background-color: #b3ddd7 !important;*/
    }
}

@media screen and (max-width:768px) {
    .date-pick {
        text-align: right;
    }
}

/*======Employee Schedule by Nga=====*/

.emp-schedule, .my-schedule {
    /* border-bottom:#CDD6DA solid 1px; */
    padding: 10px;
    font-size: 12px;
}

    .emp-schedule .avatar, .emp-schedule .name {
        margin-right: 10px;
        margin-bottom: 10px;
        display: inline-block;
        vertical-align: top;
    }

    .emp-schedule .avatar {
        width: 30px;
        height: 30px;
    }

        .emp-schedule .avatar img {
            border-radius: 100%;
        }

    .emp-schedule .name {
        width: calc(100% - 55px);
    }

    .emp-schedule .emp-schedule-name, .emp-schedule .emp-schedule-group, .emp-schedule-line {
        display: inline-block;
        vertical-align: top;
    }

        .emp-schedule-line .day-row {
            border-bottom: #CDD6DA solid 1px;
        }

    .emp-schedule .emp-schedule-name {
        margin-bottom: 10px;
        color: #000;
    }
    /*.emp-schedule .emp-schedule-group, .emp-schedule .emp-schedule-line {
	width:83%;
}*/
    .my-schedule .emp-schedule-line {
        width: 100% !important;
    }

.schedule-item {
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: top;
}

.schedule-item-top {
    padding: 5px;
    background-color: rgba(0,0,0,0.1);
    line-height: 19px;
    padding-top: 6px;
}

.schedule-date {
    background-color: #ECF1F5;
    text-align: center;
    color: #333;
    padding: 5px;
    line-height: 21px;
    font-size: 13px;
}

.schedule-con {
    padding: 5px;
}

.schedule-date-selected {
    color: #333;
    border-top: #17c8b8 solid 3px;
}

.schedule-date-not-selected {
    border-top: transparent solid 3px;
}

.schedule-date-error {
    color: #fff;
    background: #ec5453;
    border-top: #17c8b8 solid 3px;
}

/*.schedule-date-selected {
    color: #333;
    border: #d4a0d3 solid 2px;
}*/

/*.schedule-shift .shift {padding:5px 8px; border-left:solid 4px;}
.schedule-shift .shift-default {
	border-color:#8ED2C3;
}
.schedule-shift .shift-leave {
	border-color:#BFB85E;
	color:#BFB85E;
}
.schedule-shift .shift-holiday {
	border-color:#E59725;
	color:#E59725;
}
.schedule-shift .shift-dayoff {
	border-color:#9DB4D6;
	color:#9DB4D6;
}
.schedule-shift .shift-restday {
	border-color:#edeba6;
	color:#9DB4D6;
}
.schedule-shift .shift-night {
	border-color:#3B79A2;
	color:#3B79A2;
}
.schedule-shift .shift-ot {
	border-color:#BA878C;
	color:#BA878C;
}*/

.shift {
    color: #fff;
    padding: 5px 10px;
    text-align: center;
    line-height: 21px;
}

.shift-default {
    background: #8ED2C3;
}

.shift-leave {
    background: #faab17;
}

.shift-approved {
    background: #6EC165;
}


.shift-CancelledSubmited {
    background: #CA565F;
}


.shift-holiday {
    background: #ffdede;
    color: #e03434;
}

.shift-dayoff {
    background: #d2ecf9;
    color: #1f6aae;
}
.shift-offday {
    background: #fdf59a;
    color: #1f6aae;
}


.shift-note {
    font-style: italic;
}

/*========Schedule by Nga 5/7/2019==================*/

ul.tbl-schedule {
    padding: 0;
    margin: 20px 0;
}

li.tr-schedule {
    list-style: none;
    border-top: #CDD6DA solid 2px;
    border-right: #CDD6DA solid 2px;
    border-left: #CDD6DA solid 2px;
}

.tbl-schedule .emp-schedule, .tbl-schedule .my-schedule {
    padding: 0;
}

.tbl-schedule .emp-schedule-name {
    margin: 0;
    padding: 5px;
}

.tbl-schedule .avatar, .tbl-schedule .name {
    margin-bottom: 0;
}

@media screen and (min-width:1601px) {
    .tbl-schedule .emp-schedule-name {
        width: 20%;
    }

    .tbl-schedule .emp-schedule-group, .tbl-schedule .emp-schedule-line {
        width: 79.72%;
    }

    .tbl-schedule .schedule-item {
        width: 14.3%;
        margin: 0 -0.1px;
    }

    .emp-schedule .avatar {
        width: 50px;
        height: 50px;
    }

    .emp-schedule .name {
        width: calc(100% - 75px);
    }
}

@media screen and (max-width:1600px) {
    .tbl-schedule .emp-schedule-name {
        width: 16%
    }

    .tbl-schedule .emp-schedule-group, .tbl-schedule .emp-schedule-line {
        width: 83.59%;
    }

    .tbl-schedule .schedule-item {
        width: 14.29%;
        margin: 0 -0.1px;
    }
}

@media screen and (max-width:1200px) {
    .tbl-schedule .emp-schedule-name {
        width: 25%
    }

    .tbl-schedule .emp-schedule-group, .tbl-schedule .emp-schedule-line {
        width: 74.46%;
    }

    .tbl-schedule .schedule-item {
        width: 33.4%;
        margin: 0 -0.22px;
    }
}

@media screen and (max-width:768px) {
    .tbl-schedule .emp-schedule-name {
        width: 100%
    }

    .tbl-schedule .emp-schedule-group, .tbl-schedule .emp-schedule-line {
        width: 100%;
    }

    .tbl-schedule .schedule-item {
        width: 100%;
        margin: 0;
    }
}

@media screen and (min-width:769px) {
    .emp-schedule-line .schedule-date, .emp-schedule-line .schedule-shift, .schedule-con {
        display: inline-block;
        vertical-align: top;
    }

    .emp-schedule-line .schedule-date, .emp-schedule-line .schedule-shift {
        width: 130px;
        margin-right: 15px;
    }

    .schedule-con {
        width: calc(100% - 300px);
    }
}

/*========Schedule by Tuan 9/7/2019==================*/
.pagerPaging {
    display: inline-block;
    padding-left: 0;
    margin: 5px 0 0 0;
    border-radius: 4px;
}

    .pagerPaging > li {
        display: inline;
    }

        .pagerPaging > li > a {
            position: relative;
            float: left;
            padding: 6px 12px;
            margin-left: -1px;
            line-height: 1.42857143;
            color: #17c8b8;
            text-decoration: none;
            /* background-color: #969596; */
            border: 1px solid #CDD6DA;
        }

        .pagerPaging > li > a {
            cursor: pointer;
        }

            .pagerPaging > li > a > input {
                max-width: 50px;
                height: 19px;
            }

    .pagerPaging > .active > a {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #bb0731;
        border-color: #bb0731;
    }

.disabled {
    background-color: #B7B7B7 !important;
}

    .disabled > a {
        cursor: default !important;
        color: #B7B7B7 !important;
    }

.color1, .color2, .color3, .color4, .color5, .color6, .color7, .color8, .color9, .color10, .color11, .color12, .color13, .color14, .color15 {
    color: #fff;
}

.color1 {
    background-color: #a7c3cc;
}

.color2 {
    background-color: #9bcdca;
}

.color3 {
    background-color: #3fb1b2; /*#8aa11e;*/
}

.color4 {
    background-color: #016f83; /*#958569;*/
}

.color5 {
    background-color: #a6d7e8;
}

.color6 {
    background-color: #00addc; /*#dcdb29;*/
}

.color7 {
    background-color: #738ac8; /*#8ED2C3;*/
}

.color8 {
    background-color: #bcbce0;
}

.color9 {
    background-color: #f3aabe;
}

.color10 {
    background-color: #eb8779; /*#018fca;*/
}

.color11 {
    background-color: #c1c7a3; /*#6b6aae;*/
}

.color12 {
    background-color: #bcaea3; /*#bca5cf;*/
}

.color13 {
    background-color: #f0b49d;
}

.color14 {
    background-color: #536a74; /*#dd1a21;*/
}

.color15 {
    background-color: #b79f31; /*#a0a19f;*/
}
.color-timesheet1 {
    background-color: #d2ecf9;
}

.color-timesheet3 {
    background-color: #edeba6;
}

.color-timesheet2 {
    background-color: #ffdede
}
.color-timesheet4 {
    background-color: #fdf59a;
}

.pointerHand {
    cursor: pointer;
}

.hightLightText {
    font-weight: bold;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

    .videoWrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

/*==============Time line====================*/
.timeline {
    width: 100%;
    max-width: 800px;
    background: #fff;
    padding: 0;
    margin: 15px 0;
    position: relative;
}

    .timeline:before {
        content: '';
        position: absolute;
        top: 0px;
        left: calc(40% - 1px);
        bottom: 0px;
        width: 4px;
        background: darkcyan;
    }

    .timeline:after {
        content: "";
        display: table;
        clear: both;
    }

    .timeline .title {
        font-size: 12px;
        border-bottom: none;
        padding: 0 30px 0 0;
    }

    .timeline .label {
        line-height: 2;
    }

.entry {
    clear: both;
    text-align: left;
    position: relative;
    cursor: pointer;
    word-break: break-word;
}

    .entry .title {
        margin-bottom: .5em;
        float: left;
        width: 40%;
        padding-right: 30px;
        text-align: right;
        position: relative;
    }

        .entry .title:before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            border: 4px solid #17c8b8;
            background-color: #fff;
            outline: #fff solid 4px;
            border-radius: 100%;
            top: 15%;
            right: -8px;
            z-index: 99;
        }

.done .title:before {
    border: 4px solid #cccccc !important;
}

.lock .title:before {
    background: #17c8b8 !important;
}

.entry:hover .title:before {
    background: #F90;
}

.entry .title h3 {
    margin: 0;
    font-size: 120%;
}

.entry .title p {
    margin: 0;
    font-size: 100%;
}

.entry .body {
    float: right;
    width: 57%;
    padding: 5px 10px;
    margin: 0 0 10px 1%;
    /*box-shadow:0.5rem 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);*/
}

.entry:hover .body {
    box-shadow: 0.5rem 0.5rem 2rem 0 rgba(0, 0, 0, 0.2);
}

.entry .body p {
    margin: 5px 0;
}

    .entry .body p:first-child {
        margin-top: 0;
    }

.entry .body ul {
    color: #aaa;
    padding-left: 0;
    list-style-type: none;
}

    .entry .body ul li:before {
        content: "–";
        margin-right: .5em;
    }

.entry .emppic, .entry .cont {
    float: left;
    margin-right: 15px;
}

    .entry .emppic img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
    }

/*end Time line*/

.eClaim-min-width-70 {
    min-width: 70px;
}

.eClaim-min-width-100 {
    min-width: 100px;
}

.eClaim-min-width-150 {
    min-width: 150px;
}

.eClaim-min-width-200 {
    min-width: 200px;
}

.eClaim-min-width-250 {
    min-width: 250px;
}

.eClaim-max-width-300 {
    max-width: 300px;
}

.eClaim-total-amount {
    color: darkcyan;
    font-weight: bold;
}

/*Capture Video EClaim*/

.view-text,
.view--video,
.view--snapshot {
    margin-top: 0;
}

.view-text {
    padding: 1.2rem;
    text-align: center;
    background-color: #e6e6e6;
}

.view-text__instructions {
    display: block;
    margin-top: .4rem;
    font-size: 1.5rem;
}

.view-text--snapshot {
    background-color: #f2f2f2;
    margin-top: 1.2rem;
}

.view--video {
    background-color: rgba(0,0,0,1);
}

.view--snapshot {
    position: relative;
    background-color: rgba(0,0,0,.85);
}

.view--video__video,
.view--snapshot__canvas {
    width: 100%;
    cursor: pointer;
}

@media (min-width: 33.75em) {
    .demo-area {
        display: -webkit-flex;
        display: flex;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .view-text,
    .view--video,
    .view--snapshot {
        flex: 1 1 auto;
        margin-top: 0;
        width: 50%;
        max-width: none;
    }

    .view-text--video {
        -webkit-order: 1;
        order: 1;
    }

    .view-text--snapshot {
        margin-top: 0;
        -webkit-order: 2;
        order: 2;
    }

    .view--video {
        -webkit-order: 3;
        order: 3;
    }

    .view--snapshot {
        -webkit-order: 4;
        order: 4;
    }
}
/*====== Color combobox ======*/

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    background: #ffffff !important;
}

/*Capture Video EClaim*/

.cus-dataTables_scroll {
    overflow-y: auto;
}

    .cus-dataTables_scroll thead th {
        position: sticky;
        top: 0;
    }

    .cus-dataTables_scroll table {
        border-collapse: collapse;
        width: 100%;
    }

    .cus-dataTables_scroll th, td {
        padding: 15px;
    }

    .cus-dataTables_scroll th {
        background: #eee;
        z-index:1;
    }

#employee .s12-input {
    max-width: 320px;
    display: block !important;
}

#addLeaveHistoryTab .s12-textarea {
    max-width: 320px;
    display: block;
}

#add-ExpenseDetail #btnTakePhoto {
    padding: 3px 10px !important;
}

#add-ExpenseDetail #btnUpload {
    padding: 3px 10px !important;
}

#add-ExpenseDetail #btnDelete {
    padding: 3px 10px !important;
}

#btnImportAllowance {
    min-width: 40px;
    border: 1px solid #dfdfdf;
    min-height: 33px
}
#btnImportEmployee, .btn-import {

    min-width: 40px;
    border: 1px solid #dfdfdf;
    min-height: 33px
}
@media screen and (max-width: 768px) {
    #btnImportAllowance {
        margin-left: 0px !important;
    }
}

.labelTitle {
    font-size: 16px;
    color: #17C8B8;
}

.icon-bank {
    padding: 0px 20px;
    margin-bottom: 20px;
    float: left;
}

.bank-title {
    font-size: 20px;
    line-height:1.2;
    padding-right: 10px;
    font-family: sans-serif;
    vertical-align: inherit;
    /*margin-top: 12px;*/
    /*position: absolute;*/
}

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

.s12-line-green-1 {
    border-bottom: 1px solid #17c8b8;
    display: block;
    margin-bottom: 5px;
    margin-top: 5px;
}

.time-approve {
    color: #17c8b8;
    position: absolute;
    margin-top: 2px;
    margin-left: -20px;
}

.dis-connect-status {
    font-size: 13px;
    padding: 3px;
    background-color: #ffd3d3 !important;
    font-weight: 500;
    color: red;
    margin-left: 10px;
    border-color: #ffd3d3 !important;
}

.connect-status {
    font-size: 13px;
    padding: 3px;
    background-color: #cef6e0 !important;
    font-weight: 500;
    color: #239b57;
    margin-left: 10px;
    border-color: #cef6e0 !important;
}

.select-glaccount {
    color: #1EB5A7;
    font-weight: 700;
    border-left: 5px solid #17C8B8 !important;
}

.announcement-box {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 8px;
    /*background-color: #f2f9fd;*/
    border-radius: 8px;
}

@media screen and (min-width: 1024px) {
    .announcement-box {
        margin-right: 20px;
    }
}

.truncate {
    font-size: 14px;
    overflow: hidden;
    line-height: 2rem;
    max-height: 6rem;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    float: left;
    margin-bottom: 10px;
    margin-top: 5px;
}

.truncateTitle {
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    max-width: 90%;
    margin-top: 5px;
    font-size: 15px;
    float: left;
    margin-right: 10px;
}

.truncate-name-pdf {
    /*-webkit-box-orient: vertical;
    display:-webkit-box;*/
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    font-size: 15px;
    float: left;
    margin-right: 10px;
    width: 95px;
    margin: 7px;
    margin-right: 0px;
}

.thumbnail-announcement {
    width: 100%;
    height: 150px;
    object-fit: cover;
    float: left;
    border-radius: 5px;
    margin: 10px;
}

.image-new {
    width: 40px;
    height: 35px;
}

.post-by {
    float: left;
    border: 1px solid #e2dfdf;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
    margin-right: 5px;
    padding-top: 2px;
    display: flex;
    align-items: center;
}

.post-by-title {
    color: grey;
    font-size: 12px;
}

.confirm-deadline {
    float: left;
    border: 1px solid #e2dfdf;
    border-radius: 5px;
    padding-left: 3px;
    padding-right: 3px;
    font-size: 11px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.confirmation-deadline-title {
    color: grey;
    font-size: 12px;
}

.confirm-date {
    float: right;
    color: #1EB5A7;
    font-size: 11px;
    padding-top: 3px;
}

.announcement-title {
    float: left;
    position: relative;
    top: 10px;
    right: 0;
}

.announcement-title-color {
    color: #1EB5A7;
    font-size: 19px
}

.annoucement-category-color {
    color: #F8A61A;
    font-size: 18px
}

.announcement-content {
    padding-bottom: 10px;
    padding-top: 10px;
}

.confirm-check {
    border: 1px solid #F8A61A !important;
}

.image-pdf {
    width: 35px;
    height: 45px;
    margin-top: 10px;
}

.font-14 {
    font-size: 14px;
}

.font-13 {
    font-size: 13px;
}

.confirm-color {
    color: white;
    font-size: 15px
}

.read-color {
    color: #1EB5A7;
}

.post-back {
    float: right;
    position: relative;
    top: 10px;
    right: 0;
    text-align: right;
    padding-right: 75px;
}

.color-darkgrey {
    color: darkgrey;
}

.padding-left-none {
    padding-left: 0px;
}

.float-left {
    float: left;
}

.padding-top-10 {
    padding-top: 10px;
}

.padding-top-15 {
    padding-top: 15px;
}

.padding-left-0 {
    padding-left: 0px;
}

.btn-confirm {
    background: #F8A61A;
    /*padding: 3px 18px !important;*/
    min-width: 50px;
    margin-top: 12px;
}

    .btn-confirm[disabled]:hover,
    .btn-confirm[disabled]:focus {
        background-color: #F8A61A;
        opacity: 0.5;
    }

    .btn-confirm:hover,
    .btn-confirm:focus {
        background-color: #F8A61A;
    }

.active-box-custom01 {
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #333333;
    width: 260px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    display: block;
    /*margin-bottom: -20px;*/
    font-family: sans-serif;
    /*margin-left: 10px;*/
    margin-bottom: 20px;
    margin-right: 10px;
}

.active-box-custom02 {
    /*background-color: #ecf1f5;
    border: 1px solid #dae4ea;*/
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #333333;
    min-width: 320px;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    display: block;
    /*margin-bottom: -20px;*/
    font-family: sans-serif;
    margin-right: 10px;
    margin-bottom: 20px;
    padding-bottom:15px;
}

.avarta-post-by {
    width: 25px;
    height: 25px;
    border-radius: 15px;
    margin-bottom: 1px;
}

.width-145 {
    width: 145px;
}

.confirm-before-footer {
    background-color: #fdf1c1;
    height: 60px;
    border-radius: 5px;
}

.confirm-after-footer {
    background-color: #d2e9dc;
    height: 60px;
    border-radius: 5px;
}

.confirm-before-footer .checkbox {
    width: 30px;
    float: left;
    margin-top: 17px;
    margin-left: 10px;
}

.label-checkbox {
    float: left;
    margin-top: 5px;
    color: #F8A61A;
}

.label-read {
    float: left;
    margin-top: 5px;
    color: green;
    margin-left: 10px;
}

.pdf-background {
    width: 135px;
    height: 95px;
    border: 1px solid #e5e2e2;
    background: #e1eef5;
    border-top: 2px solid #1EB5A7;
}

.companypost-con {
    position:relative;
    margin-top:15px;
    top:5px;
}

.companypost-title {
    /*width: 88%;*/
    float: left;
    text-align: left;
    padding-left: 5px;
    font-size: 20px;
}
    .companypost-number {
        float:right;
    }

    .image-notify {
        width: 45px;
        float: left;
        padding-left: 5px;
        padding-top: 15px;
        padding-right: 10px;
    }

.download-pdf {
    display: block;
    margin-top: 8px;
    margin-right: 2px;
    color: #1EB5A7;
}

.lbl-service-active {
    color: #10998c;
}

.lbl-service-inactive {
    color: #8c648f;
}

@media screen and (max-width: 768px) {
    .active-box-custom01 {
        width: 100%;
    }

    .active-box-custom02 {
        width: 100%;
        margin-left: 0px;
    }
}
/*================Xero Sign Up===============*/
/*padding*/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.padding-20px {
    padding: 20px !important;
}

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

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

.padding-top-20px {
    padding-top: 20px !important;
}

.padding-bottom-20px {
    padding-bottom: 20px !important;
}

.padding-top-30px {
    padding-top: 30px !important;
}

.bg-white {
    background-color: #fff;
}

.bg-parsnip {
    background-color: #f8f5f2;
}

.text-green {
    color: #17c8b8;
}

.text-alert {
    color: #FF6B19;
}

.bg-guava {
    background: #feefe8;
}

.bd-radius-5px {
    border-radius: 5px;
}

@media (min-width: 576px) {
    .padding-sm-50px {
        padding: 50px !important;
    }

    .padding-left-sm-50px {
        padding-left: 50px !important;
    }

    .padding-right-sm-50px {
        padding-right: 50px !important;
    }

    .padding-top-sm-50px {
        padding-top: 50px !important;
    }

    .padding-bottom-sm-50px {
        padding-bottom: 50px !important;
    }
}

.align-items-center .col-center {
    margin: 0 auto;
}

.align-items-center [class*='col-md'] {
    float: unset !important;
    margin: 0 auto;
    display: inline-block;
    padding: 0;
}

.xerosignup nav.navbar {
    margin-bottom: 0;
    border-radius: 0;
}

.xerosignup .navbar-default .navbar-brand {
    padding: 10px 15px;
    max-height: 65px;
}

.xerosignup h2, .h2 {
    font-size: 38px;
    font-weight: 700;
    line-height: 42px;
    letter-spacing: -0.285px;
}

.xerosignup .h1, .xerosignup h2, .xerosignup h3, .xerosignup h4, .xerosignup h5, .xerosignup h6, .xerosignup .h1, .xerosignup .h2, .xerosignup .h3, .xerosignup .h4, .xerosignup .h5, .xerosignup .h6 {
    font-family: "Clearface Bold", "clearface", "Times New Roman", 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
}

.xerosignup main {
    margin: 0px;
    margin-top: 65px;
}

.xerosignup .container {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    padding-top: 30px;
    padding-bottom: 40px;
}

@media (min-width: 1200px) {
    .xerosignup .container {
        padding-top: 80px;
        /*padding-bottom: 80px;*/
        width: 95%;
        max-width: 1300px;
    }
}

@media (max-width: 1200px) {
    .xerosignup .container {
        padding-top: 80px;
        padding-bottom: 70px;
        width: 95%;
        max-width: 1100px;
    }
}

@media (max-width: 992px) {
    .xerosignup .container {
        padding-top: 60px;
        padding-bottom: 60px;
        width: 95%;
        max-width: 860px;
    }
}

.xerosignup .text-large {
    font-size: 17px;
    font-weight: 300;
}

.relative {
    position: relative;
}

.z-index-1 {
    z-index: 1;
}

.z-index-2 {
    z-index: 2;
}

.width-100 {
    width: 100%;
}

@media (min-width: 768px) {
    .custom-height {
        /* min-height: 867px; */
    }
}

@media (min-width: 576px) {
    .custom-height {
        min-height: 555px;
        height: 100%;
    }
}

.bg-parsnip .form-signup-cus {
    position: absolute;
    top: 0;
}

.xerosignup .item-slide-cus .item {
    position: relative;
}

@media screen and (min-width: 992px) and (max-width: 1600px) {
    .xerosignup .item-slide-cus .item .item-bg {
        position: relative;
        padding-top: 19%;
        padding-bottom: 0%;
    }
}

@media (min-width: 992px) {
    .form-signup-cus {
        padding-left: 5%;
    }

    .xerosignup .item-slide-cus .item .item-bg {
        padding-right: 5%;
    }

    .xerosignup .item-bg .img-hidden {
        display: block;
    }

    .xerosignup .item-bg .img-mobile {
        display: none;
    }
}

@media (max-width: 992px) {
    .bg-parsnip .form-signup-cus {
        left: 0;
        top: 0;
    }

    .slider-home-page {
        clear: both;
    }

    .item-bg .img-hidden {
        display: none;
    }

    .item-bg .img-mobile {
        display: block;
    }
}

/*-----form-----*/
.xerosignup .form-group {
    margin-bottom: 10px;
}

.xerosignup .error-msg {
    display: none;
}

.xerosignup .form-control {
    display: block;
    width: 100%;
    height: 50px;
    background-color: #ffffff;
    background-clip: padding-box;
    border: 1px solid #eaeaea;
    border-radius: 3px;
    padding-left: 15px;
    font-weight: 300;
    outline: none;
    box-shadow: none;
    font-size: 16px;
}

    .xerosignup .form-control:focus {
        border: 1px solid #1EB5A7;
    }

.xerosignup .form-control-error {
    border: 1px solid #FF6B19;
}

/*--------------Button------------------*/
.xerosignup .btn, .xerosignup a.btn {
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    vertical-align: middle;
    border: none;
    padding: 14px 20px;
    border-radius: 5px;
    text-decoration: none;
}

.xerosignup .btn-sm {
    padding: 5px 10px !important;
    display: inline-block !important;
    font-size: 12px;
}

.xerosignup .btn-default {
    background: #f8f5f2;
    color: #222525 !important;
}

    .xerosignup .btn-default:hover, .xerosignup .btn-default:focus {
        background: #f8f5f2 !important;
        color: #1EB5A7 !important;
    }

.xerosignup .btn-highlight {
    background: #FAA719;
    color: #ffffff !important;
}

    .xerosignup .btn-highlight:hover, .xerosignup .btn-highlight:focus {
        background: #1EB5A7 !important;
    }

.xerosignup a {
    color: #1EB5A7;
    text-decoration: underline;
}

    .xerosignup a.nostyle {
        color: unset;
        text-decoration: unset;
    }

    .xerosignup a:hover {
        color: #FF6B19;
    }

.xerosignup article, .xerosignup aside, .xerosignup figcaption, .xerosignup figure, .xerosignup footer, .xerosignup header, .xerosignup hgroup, .xerosignup main, .xerosignup nav, .xerosignup section {
    display: block;
}

.margin-right-0px {
    margin-right: 0px !important;
}

.bttap {
    font-family: sans-serif;
    font-size: 16px;
    line-height: 8px;
    border: none;
    border-radius: 50px;
    display: inline-block;
    text-align: center;
    min-width: 138px;
    transition: all 0.3s ease-in-out;
    margin-bottom: 5px;
    padding: 12px 15px !important;
}

.loader {
    font-size: 10px;
    margin: 50px auto;
    /*text-indent: -9999em;*/
    width: 11em;
    height: 11em;
    border-radius: 50%;
    background: #f8f5f2;
    background: -moz-linear-gradient(left, #e9f1ed 10%, rgba(233,241,237, 0) 42%);
    background: -webkit-linear-gradient(left, #e9f1ed 10%, rgba(233,241,237, 0) 42%);
    background: -o-linear-gradient(left, #e9f1ed 10%, rgba(233,241,237, 0) 42%);
    background: linear-gradient(to right, #e9f1ed 10%, rgba(233,241,237, 0) 42%);
    position: relative;
    -webkit-animation: load3 1.4s infinite linear;
    animation: load3 1.4s infinite linear;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

    .loader:before {
        width: 50%;
        height: 50%;
        background: #1EB5A7;
        border-radius: 100% 0 0 0;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
    }

    .loader:after {
        background: #f8f5f2;
        width: 75%;
        height: 75%;
        border-radius: 50%;
        content: '';
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

@-webkit-keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes load3 {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*================Performance Appraisal===============*/
.padding-left-0px {
    padding-left: 0px;
}

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

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

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

.margin-left-0px {
    margin-left: 0px !important;
}

.margin-right-0px {
    margin-right: 0px;
}

.margin-top-0px {
    margin-top: 0px;
}

.margin-bottom-0px {
    margin-bottom: 0px;
}

.margin-top-15px {
    margin-top: 15px;
}

.margin-top-10px {
    margin-top: 10px;
}

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

.margin-bottom-5px {
    margin-bottom: 5px !important;
}

.margin-bottom-15px {
    margin-bottom: 15px;
}

.margin-left-15px {
    margin-left: 15px;
}

.margin-right-15px {
    margin-right: 15px;
}

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

.margin-left-5px {
    margin-left: 5px;
}

.margin-top-4px {
    margin-top: 4px;
}

.padding-top-30px {
    padding-top: 30px;
}

.padding-top-45px {
    padding-top: 45px !important;
}
.padding-top-18px {
    padding-top: 18px;
}

.padding-top-17px {
    padding-top: 17px;
}

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

.padding-top-25px {
    padding-top: 25px;
}

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

.padding-top-10px {
    padding-top: 10px;
}

.padding-bottom-10px {
    padding-bottom: 10px;
}

.padding-bottom-20px {
    padding-bottom: 20px;
}


.padding-top-100px {
    padding-top: 100px !important;
}

.padding-top-38px {
    padding-top: 38px !important;
}

.padding-bottom-38px {
    padding-bottom: 38px !important;
}

.padding-top-5px {
    padding-top: 5px;
}

.padding-top-27px {
    padding-top: 27px;
}

.padding-top-3px {
    padding-top: 3px;
}

.padding-left-20px {
    padding-left: 20px;
}

.padding-0px {
    padding: 0px;
}

.padding-right-3px {
    padding-right:3px;
}

.width-120px {
    width: 120px;
}

.width-75px {
    width: 75px;
}

.height-80px {
    height: 80px;
}

.font-weight-600 {
    font-weight: 600;
}

.font-size-16px {
    font-size: 16px;
}

.font-size-17px {
    font-size: 17px;
}

.font-size-19px {
    font-size: 19px;
}

.appraisal-header-title {
    color: #303E65;
    font-size: 30px;
}

.appraisal-box {
    background-color: white;
    border-radius: 8px;
    border: 1px solid #E9E9EB;
}

.appraisal-box-admin {
    background-color: white;
    border-radius: 8px;
    /*border: 1px solid #1eb5a7;*/
    /*border: 1px solid #E9E9EB;*/
    border: 1px solid #CFEDEA;
}

.appraisal-name {
    padding-top: 5px;
    font-size: 19px;
    font-weight: 600;
    color: #303E65;
}

.appraisal-hyperlink {
    color: #8A67B2;
    cursor: pointer
}

.appraisal-employee-number {
    padding-top: 10px;
    font-size: 16px;
    color: #1eb5a7;
    font-weight: 600;
}

.appraisal-employee-title {
    padding-bottom: 10px;
    font-size: 15px;
}

.appraisal-period {
    padding-bottom: 20px;
    font-size: 14px;
    padding-top: 7px;
}

.appraisal-publish {
    padding-top: 20px;
    text-align: right;
}

.appraisal-publish-button {
    padding-bottom: 0;
    border: 2px solid #1eb5a7;
    border-radius: 8px;
    height: 40px;
    background-color: white;
    margin-right: 15px;
}

.appraisal-publish-span {
    color: #1eb5a7;
    font-size: 14px;
    font-weight: 600;
}

.appraisal-withdraw-button {
    padding-bottom: 0;
    border: 2px solid #ed6254;
    border-radius: 8px;
    height: 40px;
    width: 80px;
    background-color: white;
    margin-right: 15px;
}

.appraisal-withdraw-span {
    color: #ed6254;
    font-size: 14px;
    font-weight: 600;
}

.appraisal-navbar-header {
    padding-top: 5px;
    text-align: right;
}

    .appraisal-navbar-header .navbar-header {
        float: right;
        padding-top: 6px
    }

.appraisal-dropdown-toggle {
    padding-top: 20px;
    text-align: right;
}

.appraisal-dropdown-toggle-button {
    padding-bottom: 0;
    border: 1px solid #17c8b8 !important;
    background:#fff;
    border-radius: 8px;
    width: 37px;
    height: 30px;
}
    .appraisal-dropdown-toggle-button:hover {
        background: #17c8b8;
    }
        .appraisal-dropdown-toggle-button:hover .appraisal-dropdown-toggle-button-span {
            color:#fff;
        }

        .appraisal-dropdown-toggle-button-span {
            color: #17c8b8;
            font-size: 33px;
            position: absolute;
            float: right;
            margin-left: -7px;
            margin-top: -28px;
        }

.appraisal-dropdown-menu {
    margin-top: 5px !important;
    border: 1px solid #E9E9EB !important;
    border-radius: 8px !important;
}

.appraisal-dropdown-menu-li {
    border-bottom: 1px solid #E9E9EB !important;
    font-size: 16px;
}

.appraisal-assessment {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #E9E9EB !important;
    margin-bottom: 15px;
    font-size: 15px
}

.appraisal-assessment-title {
    padding-top: 25px;
    padding-right: 10px;
}

    .appraisal-assessment-title .dropdown-toggle {
        padding-bottom: 0;
        border: none;
        border-radius: 8px;
        height: 40px;
        width: 80px;
        background-color: rgba(30, 181, 167, 0.1);
        margin-top: -5px;
        margin-bottom: 20px;
        float: right;
        cursor: auto
    }

        .appraisal-assessment-title .dropdown-toggle span {
            color: #1eb5a7;
            font-size: 16px;
            font-weight: 600
        }

.appraisal-review-period {
    padding-bottom: 3px;
    font-size: 16px;
    font-weight: 600;
    color: #999999;
}

.font-size-14px {
    font-size: 14px;
}

.appraisal-status {
    padding-bottom: 15px;
    font-size: 14px;
    padding-top: 7px;
}

.appraisal-status-process {
    background-color: #3abeb2;
    padding: 3px 3px 3px 7px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}
.appraisal-status-processManager {
    background-color: #00a933;
    padding: 3px 3px 3px 7px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

.appraisal-status-new {
    background-color: #8692a6;
    padding: 3px 3px 3px 7px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

.appraisal-status-complete {
    background-color: #5cb85c;
    padding: 3px 3px 3px 7px;
    text-align: center;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px;
}

.appraisal-status-process-title {
    color: #3abeb2;
    font-weight: 700
}

.appraisal-status-new-title {
    color: #a4adbc;
    font-weight: 700
}

.appraisal-status-complete-title {
    color: #5cb85c;
    font-weight: 700
}

.appraisal-angle-right {
    float: right;
    margin-top: 7px;
    padding-right: 10px;
}

.vertical-align-baseline {
    vertical-align: baseline
}

.appraisal-box-admin .progress-bar {
    width: 10%;
    background-color: #1eb5a7;
    line-height: 16px !important;
}
/*======Star======*/
.rating {
    text-align: center;
    position: relative;
    float: left;
    padding-top: 2px;
    border: 1px solid #E9E9EB;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff;
}

.rating-edit {
    text-align: center;
    position: relative;
    float: left;
    padding-top: 12px;
    border-radius: 8px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #fff
}

    .rating-edit .star {
        display: inline-block;
        font-size: 20px;
        color: #E9E9EB;
        position: relative;
        padding-right: 3px;
    }

.hidden {
    opacity: 0;
}

.star {
    display: inline-block;
    font-size: 14px;
    color: #E9E9EB;
    position: relative;
}

    .star.animate {
        -webkit-animation: stretch-bounce 0.5s ease-in-out;
    }

    .star.hidden {
        opacity: 0;
    }

.full:before {
    font-family: fontAwesome;
    display: inline-block;
    content: "";
    position: relative;
    float: right;
    z-index: 2;
}

.half:before {
    font-family: fontAwesome;
    content: "";
    position: absolute;
    float: left;
    z-index: 3;
}

.star-colour {
    color: #76ba69;
}

@-webkit-keyframes stretch-bounce {
    0% {
        -webkit-transform: scale(1);
    }

    25% {
        -webkit-transform: scale(1.5);
    }

    50% {
        -webkit-transform: scale(0.9);
    }

    75% {
        -webkit-transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
    }
}

.star .selected:before {
    font-family: fontAwesome;
    display: inline-block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: scale(1);
    opacity: 1;
    z-index: 1;
}

.star .selected.pulse:before {
    -webkit-transform: scale(3);
    opacity: 0;
}

.star .selected.is-animated:before {
    transition: 1s ease-out;
}

.score {
    font-family: arial;
    font-size: 20px;
    color: green;
    margin-top: 20px;
    margin-left: 50px;
}

.score-rating {
    vertical-align: sub;
    top: -5px;
    position: relative;
    font-size: 150%;
}

.total {
    vertical-align: sub;
    top: 0px;
    position: relative;
    font-size: 100%;
}

.average {
    font-family: arial;
    font-size: 20px;
    color: indianred;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

    .average .score-average {
        padding-top: 30px;
    }

.rating-star {
    line-height: 16px;
    margin-bottom: 5px;
}

.star-one {
    vertical-align: middle;
    font-size: 20px;
}

.rating-line-height {
    vertical-align: middle;
    border-left: 1px solid #E9E9EB;
    height: 25px;
}

.achievement {
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 10px;
    font-size: 15px;
}

.appraisal-status .small {
    margin-top: -30px;
    /*margin-left: -30px*/
}

.appraisal-status .dropdown-toggle {
    padding-top: 4px;
    padding-bottom: 4px;
    border: 1px solid #E9E9EB;
    background-color: #fff
}

.rating-value {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 15px;
}

.assessment-result {
    margin-top: -20px;
    margin-left: -45px;
    padding-left: 0px;
    padding-right: 0px;
}
/*======Star======*/

.search-pointerHand {
    height: 30px;
    width: 30px !important;
    padding: 7px !important;
    top: 3px !important;
}

.appraisal-assignment-header {
    background-color: #1eb5a7;
    border-radius: 8px;
    border: 1px solid #E9E9EB !important;
    margin-bottom: 0px;
    font-size: 14px
}

.appraisal-assignment-1 {
    background-color: white;
    border-radius: 8px;
    margin-bottom: 0px;
    font-size: 14px
}

.appraisal-assignment-2 {
    background-color: #f5f7f9;
    border-radius: 8px;
    /*border: 1px solid #E9E9EB !important;*/
    margin-bottom: 0px;
    font-size: 14px;
    /*margin-bottom: 15px;*/
}

.appraisal-assignment-header .appraisal-navbar-header {
    float: right;
}

.appraisal-assignment-checkbox-header {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 120px;
}


.appraisal-assignment-header-name {
    padding-top: 10px;
    font-size: 16px;
    color: #fff
}

.appraisal-assignment-checkbox {
    margin-left: 2px;
    float: left;
    padding-top: 25px;
    width: 40px;
}

.appraisal-assignment-avarta {
    /*padding-bottom: 10px;
    padding-top: 10px;*/
    width: 60px !important;
    min-width: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    border-radius: 100%;
    display: block;
}


.appraisal-assignment-name {
    font-size: 15px;
    /*padding-top: 15px;
    width: 220px*/
}

.assessment-header {
    background-color: #fff;
    border-radius: 8px;
    border: 1px solid #E9E9EB !important;
    margin-bottom: 15px;
    font-size: 14px;
    color: #303E65;
}

    .assessment-header .dropdown-toggle {
        padding-bottom: 0;
        border: none;
        border-radius: 5px;
        background-color: #e8f8f6;
        cursor: auto;
        padding: 2px 10px;
        margin-left: 20px;
    }

        .assessment-header .dropdown-toggle span {
            color: #1eb5a7;
            font-size: 14px;
        }

.appraisal-download-button {
    margin-left: 20px;
    background-color: #fff;
    border: 1px solid #fff
}

.border {
    border-bottom: 1px solid #E9E9EB
}

.objective-group-weight {
    border: 1px solid #fbdee5;
    background-color: #fbdee5;
    color: #ea5c7f;
    height: 30px;
    width: 50px;
}

.objective-weight {
    border: 1px solid #e8f8f6;
    background-color: #e8f8f6;
    color: #1eb5a7;
    height: 30px;
    width: 50px;
    margin-left: 5px;
}

.objective-description {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 14px;
}

.border-left {
    border-left: 5px solid #1eb5a7
}

.border-bottom {
    border-bottom: 1px solid #E9E9EB;
}

.border-top {
    border-top: 1px solid #E9E9EB !important;
    border-radius:0px;
}


.assessor-info {
    font-size: 14px;
    color: #645d5d
}

    .assessor-info .avarta {
        width: 27px;
        margin: 10px;
        margin-right: 5px;
        margin-left: 5px;
        width:27px;
        height:27px;
        border-radius:100%
    }

.assessor-note {
    /*padding-bottom: 10px;*/
    font-size: 14px;
    color: #8692a6;
    margin-top:-5px;
}

.summary-assessment-title {
    font-size: 18px;
    font-weight: 600;
    padding-top: 10px;
    padding-bottom: 5px;
}

.appraisal-textarea {
    border-radius: 8px;
    resize: none;
}

.selected-number {
    color: #008b8b;
    font-weight: bold;
}

.height-30px {
    height: 30px;
}

.input-search {
    height: 36px !important;
    font-size: 15px;
}

.appraisal-back-button {
    padding: 5px 12px;
    background-color: #dddddd;
    color: #303E65;
    border: 1px solid #dddddd;
    border-radius: 8px;
    margin-top: 1px;
}

.appraisal-font-color {
    color: #303E65
}

.appraisal-review-nav li {
    display: inline;
    list-style-type: none;
}

.achievement-truncate {
    font-size: 15px;
    overflow: hidden;
    line-height: 2rem;
    max-height: 4rem;
    -webkit-box-orient: vertical;
    display: block;
    display: -webkit-box;
    overflow: hidden !important;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    float: left;
}



.achievement-table {
    width: 195px;
    background: #fff;
    height: 41px;
    position: relative;
}

    .achievement-table td {
        padding: 0px;
    }

.achievemen-border-circle {
    border: 1px solid #E9E9EB;
    border-radius: 8px;
    width: 205px;
    height: 48px;
    padding: 5px;
    padding-top: 2px;
    background-color: #fff;
    margin-left: 5px;
}


.appraisal-employee {
}

/*.appraisal-employee:hover {
        background-color: #edf9ff;
        cursor: pointer;
    }*/

.appraisal-error-color {
    color: red;
}

.appraisal-font-color {
    color: #303E65;
}
.border-none{
    border:0px !important;
}

.hyperlink {
    color: #8A67B2;
    cursor: pointer
}

#side-menu-custom > li {
    margin-bottom: 5px;
}

    #side-menu-custom > li > a:hover,
    #side-menu-custom > li > a:focus {
        background-color: #b3ddd7;
        /*border-left: solid #17C8B8;*/
    }

    #side-menu-custom > li > a {
        color: #777;
        font-size: 16px;
    }

        #side-menu-custom > li > a > * {
            vertical-align: top;
        }

        #side-menu-custom > li > a > img {
            margin-right: 10px;
        }

        #side-menu-custom > li > a .fa {
            color: #17c8b8;
        }

        #side-menu-custom li.active {
            background-color: #b3ddd7;
            border-left: solid #17C8B8;
        }

.rp-list-item {
    width: unset;
    min-width: 300px;
    min-height: 50px;
    float: left;
    text-align: left;
    background-color: #fdfbf9;
    border: #e7e6e5 solid 1px;
    line-height: 1;
    font-size: 15px;
    font-weight: 300;
    padding: 15px;
    color: #8692a6;
}
a.rp-list-item:hover {
    text-decoration: none;
    color: unset;
    background: #DFF0D8;
}

    .rp-list-item .rp-icon, .rp-list-item .rp-name {
        float:left;
        margin-right: 10px;
    }
    .rp-list-item .rp-icon {
        width:20px;
    }
    .rp-list-item .rp-name {
        width: calc(100% - 55px);
        margin-top:3px;
    }
    .rp-list-item .rpicon-right {
        float:right;
    }

ul.list-bullet li {
    list-style-type: square;
}
ul.list-bullet li::marker {
    color: #8A67B2;
}



/*=============Tembo New 2022 by Nga ================*/

.padding-top-50 {padding-top:50px;}
.padding-bottom-50 {padding-bottom:50px;}

.padding-top-30 {padding-top:30px;}
.padding-bottom-30 {padding-bottom:30px;}

.padding-20 {
    padding: 20px;
}
.padding-top-20 {padding-top:20px;}
.padding-bottom-20 {padding-bottom:20px;}
.padding-top-20 {padding-top: 20px;}
.padding-bottom-20 {padding-bottom: 20px;}

.padding-top-10 {padding-top:10px;}
.padding-bottom-10 {padding-bottom:10px;}
.padding-left-10 {padding-left:10px;}
.padding-right-10 {padding-right:10px;}

.right {float:right;}
.left {float:left;}

.type-black {color:#000000; font-weight: 500;}
.type-dark {color:#333333; font-weight: 500;}
.type-default {color:#555555;}

.home-box {
	border-radius:4px;
	min-height:125px;
	min-width:200px;
	color:#555555;
	font-size:11px;
}
	.home-box .home-icon {
		width:40px;
		height:40px;
	}
	.home-box .number {
		color:#FAA719;
		font-size:40px;
		line-height:1;
	}
	
	.hb-button {
		padding:0;
	}
	.home-box .icon {
		font-size:20px;
	}
.home-box .avarta {
    width: 30px;
    height: 30px;
    float: left;
    margin-right: 10px;
}
	.home-box .hb-con {
		float:left;
		width:calc(100% - 40px);
	}
	
.hbox {cursor:pointer;}

/*.hbox:hover {
        background-color: rgba(255, 242, 219, 1);
    }*/


	
.list-nostyle {
		list-style:none;
		padding:0;
		margin:0;
	}
	
.pending-list li {
	position:relative;
	background:#FEEFE8;
	font-size:11px;
	color:#999999;
	padding:10px 15px;
	min-height:50px;
	cursor:pointer;
	clear:both;
	margin-bottom:10px;
}
    /*.pending-list li:hover {
        background-color: rgba(255, 161, 0, 0.15);
    }*/

    .pending-list li .tlt {
        color: #333333;
    }
	
	.pending-list li button {margin:1px 2px;}
	
.pending-number {
	color:#008B8B;
	font-size:15px;
	font-weight:500;
	text-align:right;
}

	.pending-list li .tlt, .pending-list li .pending-number {
		position:relative;
		top:5px;
		margin-bottom:10px;
	}
	
.tlt {
		color:#555555;
		font-size:15px;
	}
	.tlt.left {
		max-width:80%;
	}
	
.pending-number {
		right:0;
	}


.cta-skip {
    border: #FFA100 solid 1px;
    background: #FEEFE8;
    color: #FFA100;
}
	.cta-skip:hover {
		background:rgb(255, 161, 0, 0.2);
	}

.cta-skip-green {
    border: #17c8b8 solid 1px;
    background: #ffffff;
    color: #17c8b8 !important;
}

.hb-leave li {
	border-top:#DAE4EA solid 1px;
}
	
	.hb-leave .avarta {
		position:relative;
		width:50px;
		height:50px;
		top:10px;
	}
        .hb-leave .avarta .name-text {
            font-size: 30px;
            text-transform: uppercase;
        }
	
	.hb-leave .hb-con {
		width: calc(100% - 60px);
	}

.hb-com-post {
	background:#ECF1F5;
	border:#DAE4EA solid 1px;
	padding:10px;
	font-size:11px;
	color:#999999;
	margin-bottom:30px;
}
    .hb-com-post:hover {
        cursor:pointer;
    }

    .hb-com-post .thumbnail-announcement {
        height: 90px;
        border-radius: 0;
        margin: 0 0 10px 0;
    }
	.hb-com-post .tlt {
		font-size:14px;
		font-weight:500;
	}
	.tlt .truncate {
		max-height:40px;		
	}
	
	.hb-com-post .truncate {
		font-size:unset;
		line-height:unset;
		line-height: 1.5rem;
		max-height: 3rem;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		overflow: hidden !important;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		float: left;
		margin-bottom: 10px;
	}
	
	
.birthday-banner {
	background-image: linear-gradient(to bottom, #E4FEF8 , #ffffff);
	height:200px;
	text-align:center;
	padding:30px 3%;
	position:relative;
}
	.birthday-banner .avarta {
		width:100px;
		height:100px;
		border:#17C8B8 solid 2px;
		margin-bottom:20px;
		font-size:50px;
	}
        .birthday-banner .avarta .name-text {
            font-size: 50px;
            text-transform: uppercase;
        }

/*-----Flip------*/
.img-hor {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.img-hor-vert {
        -moz-transform: scale(-1, -1);
        -o-transform: scale(-1, -1);
        -webkit-transform: scale(-1, -1);
        transform: scale(-1, -1);
}

.emp-info {
    display: flex;
    align-items: center;
}

.avarta {
    position: relative;
    margin: 0 auto;
    text-align: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
}

    .avarta .name-text {
        position: relative;
        float:left;
        font-weight: bold;
        font-size: 16px;
        color: #ffffff;
        font-style: normal;
        text-transform: uppercase;
    }

.avarta-lg {
	width:50px;
	height:50px;
}
    .avarta-lg .name-text {
        font-size: 30px;
        text-transform: uppercase;
    }

/*----avatar color----*/
	.avarta-color-1 {
		background:#acdee7;
	}
	.avarta-color-2 {
		background:#ffb6e1;
	}
	.avarta-color-3 {
		background:#fff09b;
	}
	.avarta-color-4 {
		background:#feadac;
	}
	.avarta-color-5 {
		background:#a3e1dc;
	}
	.avarta-color-6 {
		background:#97c1a9;
	}
	.avarta-color-7 {
		background:#ffcea3;
	}
	.avarta-color-8 {
		background:#ccaacb;
	}
	.avarta-color-9 {
		background:#50b4d8;
	}
	.avarta-color-10 {
		background:#c0e589;
	}

.dsb-tab {
	position:absolute;
	top:0;
	right:0;
	float:right;
}
@media screen and (max-width: 480px) {
	.dsb-tab {position:relative;}
}

	.dsb-tab ul {
		list-style:none;
		padding:5px;
		margin:0;
		border:#FFA100 solid 1px;
		border-radius:7px;
	}

	.dsb-tab li {
		display:inline-block;
	}
	
	.dsb-tab li a {
		background: transparent;
		color: #999999;
		display:block;
		padding:5px;
	}
	.dsb-tab li a:hover {
		color:#FFA100;
		text-decoration:none;
	}
	.dsb-tab li a.active {
		background:#1ABC9C;
		color:#fff;
		text-decoration:none;
		border-radius:4px;
	}



/*--------Analytical Report---------*/
.anr {
    border: #0FB3FA solid 1px;
}

    .anr .row, .anr [class^="col-"] {
        padding-right: 0;
        padding-left: 0;
        margin-right:0;
        margin-left:0;
    }
.anr-item {
    border-top: #a5e8e2 solid 2px;
    border-left: #a5e8e2 solid 1px;
    border-right: #a5e8e2 solid 1px;
    padding: 5px;
}

    .anr-item .color-note {
        width: 10px;
        height: 10px;
        display: inline-block;
        position:relative;
        top:5px;
    }
    .anr-item .text-note {
        font-size:10px;
    }

.fnc_page-signup {
    position: relative;
    min-height: 100%;
    background-image: linear-gradient(180deg,#153a4f 0,#153a4f 50%,#153a4f 60%,#487b8a 0,#487b8a);
}
    .fnc_page-signup:before {
        background-image: url('../../images/wave-background.png');
        background-repeat: repeat-x;
        content: "";
        height: 300px;
        width: 100%;
        position: absolute;
        top: 55%;
        left: 50%;
        background-size: 100% 250px;
        transform: translate(-50%,-50%)
    }

.filter-box {
    background: #F8F5F2;
    padding: 10px;
    word-break: break-word;
}

.role-tag {
    display: inline-block;
    font-size: 12px;
    background: #fff;
    border: #b9e2dc solid 1px;
    border-radius: 15px;
    padding: 2px 10px;
    text-align: center;
    margin: 2px 5px 2px 0;
}
.sub-color-ms {
    color: #17C8B8;
}

hr.separator-break {
    width: 90px;
    border-top-width: 2px;
    border-color: #0cb4ce;
}

hr.separator-double-padding {
    margin-top: 54px;
    margin-bottom: 54px;
}


.home-mess {
    border-top: #FAA719 solid 1px;
    border-bottom: #FAA719 solid 1px;
    padding: 14px;
    color: #555;
    display:flex;
    align-content:center;
}

.home-mess i {
    font-size:24px;
}


.page-signup {
    position: relative;
    margin: 95px auto auto;
    padding-bottom: 220px; 
    font-family: Roboto,Helvetica Neue,sans-serif;
    color: #fff;
}

    .page-signup .box {
        background: #fff;
        border-radius: 4px;
        padding: 25px 25px;
        width: 550px;
        float: right;
        color: #4c4c4c;
    }

@media screen and (max-width: 768px) {
    .page-signup .box {
        width:100%;
        float:none;
        margin-top:25px;
    }
}

    .page-signup .popup-title {
        font-size: 28px;
        text-align: center;
        font-weight: 700;
        color: #212121;
        margin-bottom:8px;
    }

.page-signup .form-group {
    padding-top:14px;
}

.page-signup .group-caption {
    font-size: 14px;
    font-weight: 700;
    color: #4c4c4c;
    text-transform: uppercase;
    padding-bottom:6px;
}

.page-signup .form-group-item {
    padding:10px 0;
}

.page-signup label {
    font-weight: normal;
}

.page-signup .required-mark {
    color: #c9302c;
}

.page-signup .form-control, .page-signup .s12-select, .page-signup .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn), .page-signup .s12-select .btn-default {
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
    height:34px;
}

.page-signup .checkbox .icon-checked {
    border-radius:4px;
}

/*sprint 70*/
#resetPasswordForm {
    margin:5% auto;
    z-index: 1;
}

/* Fix for bootstrap-select 1.13 height collapse */
/*.bootstrap-select > .dropdown-toggle {
    height: 34px;
}
.bootstrap-select > .dropdown-toggle .filter-option {
    display: flex;
    align-items: center;
}

.bootstrap-select .dropdown-menu li.hidden {
    display: none !important;
}

.s12-select + .dropdown-menu.open,
.bootstrap-select .dropdown-menu.open {
    min-height: unset !important;
    height: auto !important;
}

.s12-select + .dropdown-menu .inner.open,
.bootstrap-select .dropdown-menu .inner.open {
    min-height: unset !important;
    height: auto !important;
}*/
/* ==========================================================================
   FIX BOOTSTRAP-SELECT 1.13 (Height Collapse & Blank Space Issues)
   ========================================================================== */

/* 1. Sửa lỗi xập xệ chiều cao của nút bấm (Dropdown Toggle) */
.bootstrap-select > .dropdown-toggle {
    height: 34px;
}

    .bootstrap-select > .dropdown-toggle .filter-option {
        display: flex;
        align-items: center;
    }

/* 2. Triệt tiêu hoàn toàn diện tích của option bị ẩn (data-hidden="true") */
.bootstrap-select .dropdown-menu li.hidden {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Gom nhóm: Ép menu ngoài và khung cuộn trong co giãn vừa khít theo data thực tế */
.s12-select + .dropdown-menu.open,
.bootstrap-select .dropdown-menu.open,
.s12-select + .dropdown-menu .inner.open,
.bootstrap-select .dropdown-menu .inner.open {
    min-height: unset !important;
    height: auto !important;
}

.calculation-scope-section {
    margin-top: 25px;
    margin-bottom: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.calculation-scope-container {
    padding: 10px 0;
}

.calculation-scope-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.scope-cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 25px;
}

.scope-card {
    flex: 1;
    /*min-width: 260px;*/
    max-width: 320px;
    border: 1px solid #ced4da;
    border-radius: 12px;
    padding: 18px 20px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    position: relative;
    user-select: none;
    display: block;
    margin-bottom: 10px;
}

    .scope-card:hover {
        border-color: #007a64;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .scope-card.active {
        background-color: #e6f2f0;
        border: 1.5px solid #007a64;
    }
 /*Calculation Scope & Select Department*/
.scope-card-description {
    font-size: 14px;
    /*color: #718096;*/
    line-height: 1.45;
    padding-left: 30px;
    font-weight: normal;
}
/* Signup Stepper */
.signup-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.step-item {
    display: flex;
    align-items: center;
    color: #999;
}
.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #1EB5A7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
    color: #000;
}
.step-item.active .step-circle {
    background-color: #1EB5A7;
    color: #fff;
}
.step-item.completed .step-circle {
    background-color: #fff;
    color: #000;
}
.step-label {
    font-weight: bold;
}
.step-item.active .step-label {
    color: #000;
}
.step-item.completed .step-label {
    color: #000;
}
.step-line {
    flex: 1;
    height: 1px;
    background-color: #ddd;
    margin: 0 15px;
}

/* Signup Buttons */
.btn-continue {
    background-color: #a4c9c5;
    color: #fff;
    border: none;
    font-weight: bold;
    padding: 10px 0;
    font-size: 16px;
    border-radius: 5px;
}
.btn-continue:hover {
    background-color: #8bb5b1;
    color: #fff;
}

/* Fix Signup Stepper Layout */
.signup-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}
.step-item {
    display: flex;
    align-items: center;
    color: #999;
    flex-shrink: 0;
}
.step-label {
    font-weight: normal;
    white-space: nowrap;
}
.step-item.active .step-label,
.step-item.completed .step-label {
    color: #000;
}
.step-circle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    border: 1px solid #1EB5A7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    font-weight: bold;
    color: #000;
}
.step-line {
    flex-grow: 1;
    height: 1px;
    background-color: #ddd;
    margin: 0 15px;
    min-width: 20px;
}

.step-item.active .step-label {
    font-weight: bold;
}

/* Final Fix for Stepper Layout */
.signup-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}
.step-item {
    display: flex;
    align-items: center;
    color: #999;
    flex-shrink: 1; /* Allow shrinking if absolutely necessary */
    min-width: 0;
}
.step-label {
    font-weight: normal;
    white-space: normal; /* Allow wrapping on very small screens to prevent overflow */
    font-size: 13px;
    line-height: 1.2;
}
.step-item.active .step-label {
    font-weight: bold;
    color: #000;
}
.step-item.completed .step-label {
    color: #000;
}
.step-circle {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    border: 1px solid #1EB5A7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-weight: bold;
    color: #000;
    font-size: 12px;
}
.step-item.active .step-circle {
    background-color: #1EB5A7;
    color: #fff;
}
.step-line {
    flex-grow: 1;
    height: 1px;
    background-color: #ddd;
    margin: 0 8px;
    min-width: 10px;
}

.has-success {
    color: #17C8B8;
    margin-top: 2px;
    /*padding-left: 10px;*/
}
.signup-back {
    color: #000;
    /*font-weight: bold;*/
    text-decoration: none; 
    display: inline-block;
    margin-bottom: 20px;
}