@import url('drop-down.css');

@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'AgencyFB';
    src: url('../fonts/agencyfb-regular.otf');
    src: local('Myriad Pro'), url('../fonts/agencyfb-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    font-weight: inherit;
    font-style: normal; /*vertical-align: baseline;*/
    background: transparent;
    border: 0;
    outline: 0;
}

strong {
    font-weight: bold;
}

em {
    font-style: italic;
}

/* HTML5 RESETS FOR OLDER BROWSERS */
article, aside, figure, figure img, hgroup, footer, header, main, nav, section {
    display: block;
}

ul {
    list-style: none;
    list-style-type: none;
}

ol {
    margin-left: 1.5em;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input, select {
    vertical-align: middle;
}

a img {
    border: 0;
}

:focus {
    outline: 0;
}

a:hover, a:active {
    outline: none;
}

#content-detail a:hover, #content-detail a:active {
    text-decoration: underline;
}

/*FORM RESET */
textarea, select, input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

input, select, textarea {
    border: solid 1px #ccc;
    padding: 0;
}

    input:focus, select:focus, textarea:focus {
        background: #e4f7fb !important;
    }

    input[type="checkbox"] {
        width: inherit !important;
    }

#content-detail input.ip-t, #content-detail select.ip-t, #content-detail textarea.ip-t {
    border: none;
    background: #efefef;
    width: 205px;
    padding: 0 5px;
}

#content-detail input.ip-t {
    height: 25px;
}

#content-detail select.ip-t {
    height: 27px;
}

.dxpcLite_MetropolisBlueCadena .popupChangpassword .dxpc-headerText, .dxdpLite_MetropolisBlueCadena .popupChangpassword .dxpc-headerText {
    margin-top: 2px !important;
}
/* GENERAL STYLES
----------------------------------------------- */
html {
    font-size: 62.5%; /* 1em = 10px */
}

body {
    width: 100%;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    line-height: 1.384615em; /*18px/13px*/ /*color: #555;*/
    background: #f8f8f8;
    font: 12px Arial, Helvetica, sans-serif;
}

img,
embed,
object,
video { /*max-width: 100%;*/
}

.hide {
    display: none;
}

h1 {
    font-size: 16px;
    font-weight: normal;
}

h2 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

h5 {
    font-size: 100%;
    font-weight: bold;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* ----- LINKS ----- */

a, a:link, a:visited {
    text-decoration: none;
    color: #0067aa;
    transition: all 200ms ease-in-out 0s;
}

    a:hover, a:focus {
        color: #0067aa;
        text-decoration: none;
    }

/* ----- BUTTON ----- */
button.button {
    border-radius: 2px;
    height: 30px;
    cursor: pointer;
    transition: all 200ms ease-in-out 0s;
}

button.white {
    background: linear-gradient(to bottom, #fff 0%, #eee 74%, #eee 100%) repeat;
    border: #ccc solid 1px;
    color: #222;
}

    button.white:hover {
        background: linear-gradient(to bottom, #fff 0%, #eee 40%, #ddd 100%) repeat;
        border: #555 solid 1px;
    }

button.blue { /*background:linear-gradient(to bottom, #10b2e9 0%, #0067aa 100%) repeat;*/
    background: #0067aa;
    border: #0067aa solid 1px;
    color: #fff;
}

    button.blue:hover {
        background: #55b6fa;
        border: #fff solid 1px;
    }

button.red { /*background:linear-gradient(to bottom, #10b2e9 0%, #0067aa 100%) repeat;*/
    background: #bf1b00;
    border: #981601 solid 1px;
    color: #fff;
}

    button.red:hover {
        background: #fc8181;
        border: #fff solid 1px;
    }

button.no-style {
    background: transparent none;
    border: none 0;
    width: inherit !important;
    height: inherit !important;
    padding: 0;
    margin: 0;
    cursor: pointer;
}

/*------ COLOR -----*/
.i-bg-blue {
    background: #00a0da;
}

.i-bg-blue-l {
    background: #55B6FA;
}

.i-bg-red {
    background: #FC8181;
}

.i-bg-green { /*background:#9AC115;*/
    background: #b3d04f;
}

.i-bg-yellow {
    background: #FFD243;
}

.i-bg-white {
    background: #fff !important;
}

/*----- PADDING -----*/
.padded {
    padding: 10px;
}

.padded-row {
    padding: 10px 0;
}

.padded-col {
    padding: 0 10px;
}

/*--------------------*/

.right {
    float: right;
}

.left {
    float: left;
}

.note {
    font-size: 90%;
    color: #999;
}

/* PAGE STRUCTURE
----------------------------------------------- */
#container {
    width: 100%;
    min-height: 100%;
    display: table;
    clear: both;
}

#header {
    width: 100%;
    min-width: 1140px;
    color: #fff;
    background: #0d74ba;
    position: absolute;
    z-index: 1000;
}

.logo {
    background: url(../img/logo.png) #0d74ba left center no-repeat;
    position: relative;
    width: 229px;
    height: 52px;
    float: left;
}

.top-menu {
    margin-left: 229px;
}

    .top-menu, .top-menu a {
        color: #fff;
        font-size: 14px;
        text-decoration: none;
    }

        .top-menu .top-menu-item {
            border-left: solid 1px #84BFD2;
            float: left;
            height: 52px;
        }

            .top-menu .top-menu-item:nth-child(2n) {
                border-left: 0 none !important;
            }

        .top-menu .genericon:before {
            padding-right: 5px;
        }

        .top-menu .genericon-home:before {
            font-size: 25px; /*position: relative;*/
            top: -6px;
        }

        .top-menu li:hover, .top-menu li:focus {
            background: #0067aa;
        }

        .top-menu li > ul, .top-menu li > ul li {
            padding: 0;
            margin: 0;
        }

            .top-menu li > ul li {
                float: none;
            }

        /*Search*/
        .top-menu .search {
            padding: 0 10px;
        }

            .top-menu .search .search_field {
                float: left;
                position: relative;
            }

                .top-menu .search .search_field input[type="text"] { /*width: 140px;*/
                    height: 26px !important;
                    border: solid 1px #ccc;
                    border-right: none;
                }

        .top-menu .search {
            padding-top: 10px;
            height: 41px;
        }

            .top-menu .search:hover {
                background: none;
            }

            .top-menu .search button.select-emp {
                float: left;
                position: relative;
                left: -2px;
            }

            .top-menu .search button.i-search {
                background: none;
                border: none;
                position: absolute;
                right: 0;
                padding: 0;
                top: 0;
            }

        /*right*/
        .top-menu .i-lang {
            background: url(../img/flags.png) no-repeat;
            width: 16px;
            height: 11px;
            display: inline-block;
            margin-right: 10px;
        }

        .top-menu .i-lang-eng {
            background-position: -176px -44px;
        }

        .top-menu .i-lang-vnm {
            background-position: -16px -165px;
        }

        /*ALERT*/
        .top-menu .nav-ntf .wrapper-dropdown-1:after {
            border: none 0;
        }

        .top-menu .i-ntf-have-item { /*background: url('../Images/Icon/alert.png') no-repeat;*/
            background: url('../Images/Icon/i-alert-have-item.png') no-repeat;
            background-position: 5px 3px;
            height: 30px;
            width: 30px;
            margin: 0;
            top: -6px;
            position: relative;
            float: left; /*border-top-left-radius: 70px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 70px;
            border-bottom-left-radius: 15px;*/ /*transform: rotate(180deg);*/ /*transform: scaleX(-1);*/
        }

        .top-menu .i-ntf { /*background: url('../Images/Icon/alert.png') no-repeat;*/
            background: url('../Images/Icon/i-alert.png') no-repeat;
            background-position: 5px 3px;
            height: 30px;
            width: 30px;
            margin: 0;
            top: -10px;
            position: relative;
            float: left; /*border-top-left-radius: 70px;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 70px;
            border-bottom-left-radius: 15px;*/ /*transform: rotate(180deg);*/ /*transform: scaleX(-1);*/
        }

            .top-menu .i-ntf label, .top-menu .i-ntf-have-item label {
                position: absolute;
                top: 2px;
                left: 6px;
                font-size: 11px;
                text-align: center;
                width: 30px;
            }

.icon-menu-top {
    width: 16px;
    height: 16px;
    float: left;
    margin-right: 10px;
}

.i-dashboard {
    background: url('../HRMIcons/16x16/dashboard.png') no-repeat;
}

.i-favorite {
    background: url('../HRMIcons/16x16/favorite.png ') no-repeat;
}

.i-logout {
    background: url('../HRMIcons/16x16/logout.png') no-repeat;
}

.i-ess {
    background: url('../HRMIcons/16x16/ess-16.png') no-repeat;
}

.i-reference-setting {
    background: url('../HRMIcons/16x16/user-reference-setting-16.png') no-repeat;
}

.i-change-password {
    background: url('../HRMIcons/16x16/change-password.png') no-repeat;
}

.i-inbox-announcement {
    background: url('../HRMIcons/16x16/inbox-and-announcement.png') no-repeat;
}

.ntf-list li {
    border-bottom: #E7E7E5 solid 1px;
    position: relative;
}

.top-menu .nav-ntf li,
.top-menu .nav-ntf li span {
    font-size: 12px !important;
}

.ntf-list li:hover {
    background: #efefef;
}

.ntf-list li.checked {
    background: #E4F7FB;
}

.ntf-list li span, .top-menu .ntf-list li span {
    padding: 0 !important;
    margin: 0;
    color: #555;
}

    .ntf-list li:hover span, .top-menu .ntf-list li span:hover { /*color: inherit !important;*/
    }

.avt {
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    vertical-align: top;
}

.ntf-list li .avt {
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.top-menu .nav-ntf li .avt {
    height: 50px;
    width: 50px;
}

.top-menu .nav-ntf li .icon-alert {
    background: url('../Images/Icon/alert.png') no-repeat;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
}

    .top-menu .nav-ntf li .icon-alert:before {
        display: none;
    }

.top-menu .nav-ntf li .icon-service-alert {
    background: url('../Images/Icon/service-alert.png') no-repeat;
    width: 50px;
    height: 50px;
    background-size: 50px 50px;
    border-radius: 50px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
}

.ntf-list li .avt .icon:before {
    color: #fff;
    text-align: center;
    font-size: 70px;
    position: relative;
    top: 10px;
}

.top-menu .nav-ntf li .avt .icon:before {
    font-size: 40px;
    top: 0;
}

.ntf-list li .avt img {
    max-width: 100px;
    max-height: 100px;
    position: relative;
    border-radius: 50px;
}

.top-menu .nav-ntf li .avt img {
    max-width: 50px;
}

.ntf-list .ntf-con {
    display: inline-block;
    width: -moz-calc(100% - 200px);
    width: -webkit-calc(100% - 200px);
    width: -o-calc(100% - 200px);
    width: calc(100% - 200px);
}

.top-menu .nav-ntf .ntf-con {
    width: -moz-calc(100% - 130px);
    width: -webkit-calc(100% - 130px);
    width: -o-calc(100% - 130px);
    width: calc(100% - 130px);
}

.ntf-active {
    position: absolute;
    right: 10px;
    bottom: 10px;
}

.top-menu .nav-ntf .ntf-active {
    right: 5px;
    bottom: 5px;
}

    .top-menu .nav-ntf .ntf-active .genericon:before {
        width: 20px;
    }

.ntf-active .no-style .genericon:before {
    font-size: 25px;
    border-radius: 20px;
    width: 25px;
    height: 25px;
    color: #fff;
}

.ntf-active .no-style .genericon-checkmark:before {
    background: #0d74ba;
}

.ntf-active .no-style .genericon-close:before {
    background: #bf1b00;
}

.ntf-active button.no-style:hover .genericon:before {
    background: #CCC;
}

.ntf-list .ntf-date {
    position: absolute;
    top: 7px;
    right: 5px;
    z-index: 200;
}

.top-menu .nav-ntf .ntf-top-pn {
    text-align: right;
    background: #e8e8e8;
    color: #555;
    padding: 10px;
}

    .top-menu .nav-ntf .ntf-top-pn a {
        color: #0d74ba;
    }

        .top-menu .nav-ntf .ntf-top-pn a:hover {
            text-decoration: underline;
        }
/*End ALERT*/

.top-menu .nav-user {
    border: none 0;
}

    .top-menu .nav-user .user-cont {
        font-size: 12px;
        padding: 10px;
    }

        .top-menu .nav-user .user-cont a {
            color: #0067aa;
            font-size: 12px;
        }

            .top-menu .nav-user .user-cont a:hover, a:focus {
                color: #0067aa;
                text-decoration: underline;
            }

        .top-menu .nav-user .user-cont img {
            float: left;
            width: 70px;
            margin-right: 10px;
        }

        .top-menu .nav-user .user-cont button {
            width: 100px;
        }

/* ----- FOOTER ----- */
.footer {
    position: fixed;
    bottom: 0;
    background: #0d74ba;
    color: #fff;
    height: 29px;
    left: 0;
    z-index: 1000;
    width: 100%;
}

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

    .footer .foot-left {
        background: #0067aa;
        width: 230px;
        float: left;
        position: relative;
        height: 29px;
    }

    .footer .foot-right {
        position: relative;
        margin-left: 229px;
    }

    .footer .foot-right-item {
        border-left: solid 1px #84BFD2;
        padding: 5px 10px 0 10px;
        height: 24px;
    }

        .footer .foot-right-item:first-child {
            border: none;
        }

    .footer .foot-right .fr-gr-right li {
        float: right;
        margin-left: 10px;
    }

/* ---------------- MAIN ------------------ */

.main { /*overflow: hidden;*/
    position: absolute;
    min-width: 1140px;
    top: 52px;
    bottom: 3px;
    width: 100%;
}

/* ----- MAIN MENU ----- */

.main-menu {
    bottom: auto; /*float: left;*/
    display: inline-block;
    left: 0; /*transition: all 200ms ease-in-out 0s;*/
    height: 100%;
}

    .main-menu a {
        color: #222;
    }

        .main-menu a.icon:before, .main-menu a.genericon:before {
            color: #0067aa !important;
        }

        .main-menu a:hover.icon:before, .main-menu a:hover.genericon:before {
            color: #fff !important;
        }

    .main-menu #toggle-menu a {
        display: block;
        width: 229px;
        height: 29px;
        border-left: none; /*transition: all 200ms ease-in-out 0s;*/
    }

    .main-menu #toggle-menu .genericon {
        position: relative;
        top: 8px;
        float: right;
        right: 15px;
    }

    .main-menu #toggle-menu a:hover {
        background: #0067aa;
        color: #fff;
        text-decoration: none;
    }

    .main-menu nav .i-left:before {
        width: 32px;
    }

/*.main-menu nav ul {border-right:#E7E7E5 solid 1px;}

.main-menu nav li {border-bottom:#E7E7E5 solid 1px;}
.main-menu nav li a {
	display:block !important;
	width:207px;
	height:20px;
	padding:11px 5px 9px 17px;
	font-size:15px;
	text-transform:uppercase;
	transition: all 200ms ease-in-out 0s;
	text-decoration:none;
}

.main-menu nav .mn-sub-l li a {
	font-size:12px;
	text-transform:none;
	background:#fff;
}
.main-menu nav .mn-sub-l li {border:none;}

.main-menu nav .i-right:before {position:relative; float:right; font-size:20px; top:-2px;}

.main-menu nav ul.mn-sub-l {border:none;}*/

/* ----- CONTENT ----- */
#content {
    background: #fff;
    display: inline-block;
    position: absolute;
    height: -moz-calc(100% - 1px);
    height: -webkit-calc(100% - 1px);
    height: -o-calc(100% - 1px);
    height: calc(100% - 1px);
    width: -moz-calc(100% - 232px);
    width: -webkit-calc(100% - 232px);
    width: -o-calc(100% - 232px);
    width: calc(100% - 232px);
}

#content-detail p {
    margin: 10px 0;
}

table.no-style {
    border-collapse: separate;
    border-spacing: 5px; /* cellspacing */
}

table.tbl-con {
    border-collapse: collapse;
}

    table.tbl-con td, table.tbl-con th {
        padding: 5px;
        border: #a5c4d9 solid 1px;
    }

    table.tbl-con th {
        background: #0d74ba;
        color: #fff;
    }

    table.tbl-con tr:nth-child(even) {
        background: #f1f1f1;
    }

    table.tbl-con tr:nth-child(odd) {
        background: #FFF;
    }

    table.tbl-con tr:hover {
        background: #e4f7fb;
    }

    table.tbl-con td:hover {
        background: #FFFFB2;
    }

table.ip-text {
    position: relative;
    margin: 0 auto;
    width: inherit;
    border-spacing: 10px;
}
}

#content #main-tab {
    background: #f8f8f8;
    border-top: #E7E7E5 solid 1px;
    border-bottom: #E7E7E5 solid 1px;
    padding: 4px 5px 0 5px;
    height: 25px;
    position: absolute;
    width: -moz-calc(100% - 10px);
    width: -webkit-calc(100% - 10px);
    width: -o-calc(100% - 10px);
    width: calc(100% - 10px);
}

    #content #main-tab li {
        float: left;
    }

        #content #main-tab li a {
            background: #E7E7E5;
            display: block;
            position: relative;
            height: 20px;
            margin: 0 5px;
            padding: 5px 10px 0 10px; /*transition: all 200ms ease-in-out 0s;*/
            border: #E7E7E5 solid 1px;
            border-bottom: none;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

            #content #main-tab li a:hover, #content #main-tab li a.selected {
                background: #fff;
            }

#content-detail {
    flex-grow: 1; /*width:100%;*/
    min-height: 100px;
    background: #fff;
}

/*--hidden menu--*/
.main-menu #toggle-menu.show a {
    width: 49px;
}

    .main-menu #toggle-menu.show a.nav-toggler:before {
        font-family: 'Genericons';
        content: '\f501';
        font-size: 16px;
        position: relative;
        top: 5px;
        float: right;
        right: 15px;
    }

.main-menu #toggle-menu.show .genericon-leftarrow, .main-menu nav.show .mn-text,
.main-menu nav.show .closed:after, .main-menu nav.show .opened:after {
    display: none;
}

.main-menu nav.show a, .main-menu nav.show #example1 li a {
    width: 32px;
}

.main #content.hidden-nav {
    width: -moz-calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    width: -o-calc(100% - 50px);
    width: calc(100% - 50px);
}

/*--end hide menu--*/

.con-item {
    position: relative; /*border:#a5c4d9 solid 1px;*/
    padding-bottom: 10px;
    margin-bottom: 5px; /*background: #f8f8f8 Hue comment*/
    background: white;
}

.title-item {
    height: 20px;
    padding: 5px;
    background: #55b6fb; /*color:#fff;*/
    font-weight: bold; /*box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05) inset;*/
}
/*.title-item i {color:#fff;}*/
.scroll-panel,
.btn-close {
    position: relative;
    float: right;
}

    .btn-close span:hover {
        opacity: 0.5;
    }

.cvs-item {
    width: inherit;
    padding: 10px;
}

.btn-page {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

    .btn-page .genericon:before {
        border: #000 solid 1px;
        border-radius: 15px;
        height: 25px;
        width: 25px;
        font-size: 25px;
    }

    .btn-page button:hover .genericon:before {
        background: #00a0da;
        color: #fff;
        border: none;
    }

.home-con li {
    float: left;
    position: relative;
    width: 170px;
    max-width: 170px;
    height: 135px;
    text-align: center;
    padding: 5px;
    margin: 5px;
    border-radius: 10px; /*background:#f8f8f8;*/
}

    .home-con li:hover {
        background: #efefef;
        transition: all 200ms ease-in-out 0s;
    }

    .home-con li a .icon {
        color: #fff;
    }

.home-con .home-con-icon {
    width: 100px;
    height: 100px; /*background:#6CF;*/
    border-radius: 50px;
    margin: 0 auto;
    margin-bottom: 10px;
}

    .home-con .home-con-icon img {
        max-width: 100px;
        height: 100px;
        border-radius: 50px;
    }

.home-con li .icon {
    margin-bottom: 10px;
}

.home-con li [class^="icon-"]:before,
.home-con li [class*=" icon-"]:before {
    position: relative;
    font-size: 40px;
    top: 15px;
}

.home-con li .btn-close span { /*color:#f8f8f8;*/
    color: transparent;
}

.home-con li:hover .btn-close span {
    color: #0067aa;
}

.home-con .genericon:before {
    font-size: 20px;
    text-decoration: none;
}

#content-detail .ntf-list {
    width: 390px;
    display: inline-block;
    position: relative;
    padding-bottom: 50px;
    border: #ccc solid 1px;
    margin: 5px;
}

#content-detail .ntf-detail {
    width: -moz-calc(100% - 410px);
    width: -webkit-calc(100% - 410px);
    width: -o-calc(100% - 410px);
    width: calc(100% - 410px);
    display: inline-block;
    position: absolute;
    border: #ccc solid 1px;
    margin: 5px 5px 5px 0;
}

    #content-detail .ntf-detail .ntf-detail-top {
        position: relative;
        min-height: 30px;
    }

    #content-detail .ntf-detail .ntf-active {
        top: 5px;
        left: 5px;
    }

/*----------BOX----------*/
/*.box {
	position:relative;
	width:100%;
}
	.box .box-title {
		position:fixed;
		width:100%;
		z-index:1000;
	}
	.box .scroll-panel {
		position:absolute;
		right:10px;
		top:0;
	}
	.box .scroll-panel a {
		float:left;
		display:block;
		width:20px;
		height:20px;
		padding:5px;
		color:#fff;
		background:#6eacd6;
		border-left:#ccc solid 1px;
	}
	.box .scroll-panel a:hover {background:#fff; color:#0d74ba;}
	.box-con {
		position:relative;
		margin-top:30px;
		padding:5px;
	}
	.box .scroll-panel .icon:before {font-size:12px; margin:3px 0 0 3px;}
	.box .scroll-panel a:hover .genericon:before {color:#0d74ba;}
	.box .scroll-panel a:hover .genericon-heart:before {color:#bf1b00;}
	.box .scroll-panel a:hover .genericon-refresh:before {color:#34a901;}
*/
.box-title { /*position: absolute;*/
    top: 0px;
    left: 0px;
    height: 20px;
    padding: 5px;
    right: 0px;
    overflow: hidden;
    background: #8fc5e9;
    font-weight: bold;
}

.box .scroll-panel {
    position: absolute;
    right: 0;
    top: 0;
}

    .box .scroll-panel span {
        float: left;
        display: block;
        width: 20px;
        height: 20px;
        padding: 5px;
        color: #fff;
        background: #6eacd6;
        border-left: #ccc solid 1px;
        text-decoration: none !important;
        cursor: pointer;
    }

        .box .scroll-panel span:hover {
            background: #fff;
            color: #0d74ba;
        }

    .box .scroll-panel .icon:before {
        font-size: 12px;
        margin: 3px 0 0 3px;
    }

    .box .scroll-panel span:hover .genericon:before {
        color: #0d74ba;
    }

    .box .scroll-panel span:hover .genericon-heart:before {
        color: #bf1b00;
    }

    .box .scroll-panel span:hover .genericon-refresh:before {
        color: #34a901;
    }

.box-con {
    position: absolute;
    top: 30px;
    bottom: 1px;
    left: 0px;
    right: 0px; /*overflow: auto;*/
}

/*----------CHART----------*/
.org-chart-item {
    width: 210px;
    min-height: 60px;
    background: #25a0da;
    color: #fff;
    position: relative;
}

    .org-chart-item .avt {
        width: 55px;
        height: 55px;
    }

.org-chart-con {
    display: inline-block;
    width: 140px;
}

.org-chart-detail {
    background: #bfeaff;
    width: 370px;
    position: relative;
    float: right;
}

    .org-chart-detail .emp-img img {
        width: 128px;
        height: 128px;
    }

    .org-chart-detail .ocd-top button {
        width: 150px;
        margin: 0 0 5px 10px;
        text-align: left;
    }

/*------- Message ---------*/
.message .genericon:before, .message .icon:before {
    font-size: 40px;
}

.ms-info {
    color: #0d74ba;
}

.ms-error {
    color: #bf1b00;
}

.ms-warning {
    color: #EE7A39;
}

.ms-invalid {
    color: #5EBA47;
}

.tab-command-icon {
    width: 20px;
    height: 20px;
    padding: 3px 7px 11px 7px;
    color: #fff;
    background: #6eacd6;
    border-left: #ccc solid 1px;
    cursor: pointer;
}

    .tab-command-icon i:before {
        margin-top: 6px;
    }

    .tab-command-icon:hover {
        background: #fff;
        color: #0067aa;
    }   
 

.is-favorite {
    color: #0d74ba;
    cursor: default;
    background:#fff;
}

/*------------------ MENU 1 ---------------*/
.toggleMenu {
    display: none;
    color: #fff;
    padding: 15px 0 24px 0;
}

    .toggleMenu .genericon {
        font-size: 25px;
    }

.nav {
    list-style: none;
    *zoom: 1;
    background: #0D74BA;
}

    .nav:before,
    .nav:after {
        content: " ";
        display: table;
    }

    .nav:after {
        clear: both;
    }

    .nav ul {
        list-style: none;
        width: 150px;
    }

    .nav a {
        padding: 20px;
        color: #fff;
        font-weight: bold;
        height: 15px;
        transition: background-color 0.2s ease-in 0s;
    }

    .nav li {
        position: relative;
    }

    .nav > li {
        float: left;
    }

        .nav > li > .parent {
            background-image: url("../img/downArrow.png");
            background-repeat: no-repeat;
            background-position: right;
        }

        .nav > li > a {
            display: block;
        }

    .nav li ul {
        position: absolute;
        left: -9999px;
    }

    .nav > li.hover > ul {
        left: 20px;
    }

    .nav li li.hover ul {
        left: 100%;
        top: 0;
    }

    .nav li li a {
        display: block;
        background: #1787C6;
        position: relative;
        z-index: 1000;
        border-top: 1px solid #84BFD2;
        padding: 10px !important;
    }

        .nav li li a:hover {
            background: #0067AA;
        }
/*.nav li li li a {
    background:#249578;
    z-index:200;
    border-top: 1px solid #1d7a62;
}*/

.menu-r {
    float: right;
}

/*------------------ MENU 2 ---------------*/
nav {
    margin: 0 auto;
}

    nav ul { /*margin-left: 0;
	padding-left: 0;*/
        list-style: none;
        position: relative;
        display: inline-table;
    }

        nav ul ul {
            display: none;
        }

        nav ul li:hover > ul {
            display: block;
        }

        nav ul li {
            float: right;
            text-align: left;
        }

            /*nav ul li:hover {
	background: #f2f2f2;
}*/

            nav ul li a {
                display: block;
                color: #fff;
                height: 55px;
                transition: background-color 0.2s ease-in 0s;
            }

                nav ul li a .text {
                    display: inline-block;
                    position: relative;
                    top: -12px;
                }

                nav ul li a .emp-img {
                    display: inline-block;
                    position: relative;
                    padding: 10px;
                }

                    nav ul li a .emp-img img {
                        max-width: 34px;
                        max-height: 34px;
                        border: #fff solid 1px;
                    }

        nav ul ul {
            padding: 0;
            position: absolute;
            top: 100%;
        }

            nav ul ul li {
                position: relative;
                text-align: left;
                float: right;
                min-width: 155px;
                border-top: 1px solid #84BFD2;
                background: #1787C6;
            }

                nav ul ul li a {
                    padding: 10px;
                    height: 15px !important;
                }

                    nav ul ul li a:hover {
                        background: #0067AA;
                    }

#down-triangle {
    float: right;
    width: 0;
    height: 0;
    margin: 25px 10px 0 10px;
    border-top: 5px solid #fff;
    border-left: 4px solid transparent;
    border-right: 5px solid transparent;
}
/*-------------------------------------------*/

/*---------TABLE DIV---------*/
div.table {
    display: table;
    width: 100%;
}

div.tr {
    display: table-row;
}

div.td {
    display: table-cell;
    vertical-align: middle;
}

.ip-form div.td {
    padding: 2px;
}

.txt-note {
    color: #c0c0c0;
    font-style: italic;
}

.txt-highlight {
    color: #00b4ff;
}

.line {
    border-top: #99bfd8 solid 1px;
}

.page-title {
    margin-bottom: 10px;
}

    .page-title .heading {
        display: inline-block;
        margin-right: 20px;
    }

.ip-form {
    border: #99bfd8 solid 1px;
    padding: 10px;
}

    .ip-form button.button, .ip-form .button {
        height: 25px;
    }

.label {
    display: inline-block;
    width: 35%;
    max-width: 170px;
    min-width: 100px;
}

.ip {
    display: inline-block;
    width: 62%;
}

.img-profile {
    float: left;
    width: 100px;
    height: 128px;
    padding: 5px;
    border: #ccc solid 1px;
}

.emp-info {
    float: left;
    width: -moz-calc(100% - 152px);
    width: -webkit-calc(100% - 152px);
    width: -o-calc(100% - 152px);
    width: calc(100% - 152px);
}

.alert, .menu-search {
    position: relative;
    padding: 10px;
    top: 2px;
}

    .alert .number {
        color: #fff;
        font-size: 10px;
        position: absolute;
        right: 12px;
        top: 10px;
        z-index: 1;
    }

/* HEADER
----------------------------------------------- */
.header {
    position: relative;
    width: 100%;
    background: #0D74BA;
    height: 55px;
    clear: both;
    z-index: 5000;
}

.ess-logo {
    width: 15%;
    min-width: 120px;
    height: 45px;
    position: relative;
    float: left;
    padding: 5px;
    margin-right: 2%;
}

    .ess-logo img {
        max-width: 120px;
        max-height: 45px;
    }

.menu {
    position: relative;
    float: left;
}

.textBoxControl {
    margin: 0;
    width: 200px;
    height: 20px;
}

.disable-cell {
    background-color: #e7e7e7 !important;
    color: #333;
}

.filter {
    border: 1px solid white;
    background-color: #0d74ba;
    color: #ffffff;
    width: 100%;
}

    .filter td {
        width: 100px;
        padding-top: 5px;
        padding-bottom: 5px;
        text-align: center;
        vertical-align: top;
        cursor: pointer;
        border: 1px solid white;
    }

.selected {
    background-color: #55b6fa;
}

.removeselected {
    background-color: #0d74ba;
}

.button_refresh {
    background: url('../Images/Icon/refresh12_5-hover.png');
    background-repeat: no-repeat;
    vertical-align: middle;
    min-height: 16px !important;
    max-height: 16px !important;
    max-width: 16px !important;
    display: inline-block !important;
    margin-left: 5px;
    border: none;
}

.button_remove {
    background: url('../Images/Icon/DeleteRed_16x16.png');
    background-repeat: no-repeat;
    vertical-align: middle;
    min-height: 16px !important;
    max-height: 16px !important;
    max-width: 16px !important;
    display: inline-block !important;
    margin-left: 5px;
    border: none;
}

.truncated {
    white-space: nowrap;
    width: 12em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.truncated-span {
    white-space: nowrap;
    width: 21em;
    overflow: hidden;
    text-overflow: ellipsis;
}