@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: #E7E7E5 solid 1px; 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: red; }

/*------------------ 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; }