@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;
}

h3
{
    font-size: 20px;
    font-weight: bold;
}

strong
{
    font-weight: bold;
}

em
{
    font-style: italic;
}

.color999
{
    color: #999;
}

.title_log
{
    font-size: 20px !important;
    font-weight: bold !important;
}
/* 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;
}

.main-responsive
{
    position: relative;
    padding: 10px 1%;
    margin: 0 auto;
    clear: both;
}

.row-padded
{
    padding: 10px 0;
}
/* 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;
}

/*Full icon in combobox change language */

/*img {
    padding-top: 3px;
}*/

/*Hide header column of ASPxCombobox change language*/
.dxeListBox_MetropolisBlueCadena .dxeHD
{
    display: none;
}

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

/**/
#btnLogin
{
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
    text-align: center;
    min-width: 80px;
}

    #btnLogin.button
    {
        border-radius: 2px;
        height: 30px;
        float: left;
        cursor: pointer;
        transition: all 200ms ease-in-out 0s;
    }

    #btnLogin.disable
    {
        cursor: default;
        background-color: whitesmoke !important;
        color: #c0c0c0 !important;
        border: #c0c0c0 solid 1px !important;
    }

        #btnLogin.disable:hover
        {
            cursor: default;
            background-color: whitesmoke !important;
            color: #c0c0c0 !important;
            border: #c0c0c0 solid 1px !important;
        }

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

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

/*Generic Button*/

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

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

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

.cancel-button
{
    background: #c7c7c7 !important;
    border: #c7c7c7 solid 1px !important;
}

.disable-button
{
    cursor: default;
    background-color: whitesmoke !important;
    color: #c0c0c0 !important;
    border: #c0c0c0 solid 1px !important;
}

    .disable-button:hover
    {
        cursor: default;
        background-color: whitesmoke !important;
        color: #c0c0c0 !important;
        border: #c0c0c0 solid 1px !important;
    }

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

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

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

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

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

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

/*----- PADDING -----*/
.padded
{
    padding: 9px;
    z-index: 9;
}

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

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

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

.right
{
    float: right;
}

.left
{
    float: left;
}

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

    .note p
    {
        font-size: 12px;
    }
/* PAGE STRUCTURE
----------------------------------------------- */
#container
{
    width: 100%;
    min-height: 100%;
    display: table;
    clear: both;
}

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

.title-item-2 .logo
{
    height: 72px;
}

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

.jingle
{
    float: right;
    position: relative;
    top: 20px;
    right: 30px;
    cursor: pointer;
}

    .jingle .genericon:before
    {
        font-size: 30px;
    }

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

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

        .top-menu .top-menu-item
        {
            float: left;
        }

        .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: 115px;
                    height: 28px;
                    border-right: none;
                }

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

            .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-viet
        {
            background-position: -16px -165px;
        }

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

        .top-menu .i-ntf
        {
            background: #BF1B00;
            width: 30px;
            height: 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 label
            {
                position: absolute;
                top: 5px;
                text-align: center;
                width: 30px;
            }

.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;
    }

.ntf-list li .avt
{
    display: inline-block;
    margin-right: 10px;
    text-align: center;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border-radius: 50px;
}

.top-menu .nav-ntf li .avt
{
    height: 50px;
    width: 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;
        }
/*---------TABLE DIV---------*/
div.table
{
    display: table;
    width: 100%;
}

div.tr
{
    display: table-row;
}

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

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

    .ip-form div.td, .con-item div.td
    {
        padding: 4px;
    }

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

.ct_lg_w, .ct_lg_mid, .ct_lg_mg
{
    position: relative;
}

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

.table .tr .td .label
{
    padding-top: 8px !important;
    float: left;
}

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

/*input[type="text"].dxeEditArea_MetropolisBlueCadena, input[type="password"].dxeEditArea_MetropolisBlueCadena,
input[type="text"].dxeEditArea_MetropolisBluePayTime, input[type="password"].dxeEditArea_MetropolisBluePayTime {
    height: 25px;
}*/

/* ----- 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
{
    bottom: 0;
    /*overflow: hidden;*/
    position: absolute;
    min-width: 1100px;
    top: 55px;
    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: 5px;
        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;
    /*margin-left:230px;*/
    display: inline-block;
    position: absolute;
    height: -moz-calc(100% - 30px);
    height: -webkit-calc(100% - 30px);
    height: -o-calc(100% - 30px);
    height: calc(100% - 30px);
    width: -moz-calc(100% - 230px);
    width: -webkit-calc(100% - 230px);
    width: -o-calc(100% - 230px);
    width: calc(100% - 230px);
}

#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;
    min-height: 100px;
}

.content_login
{
    /*position: relative;
    margin: 0 auto;
    margin-top: 15%;*/
    width: 600px;
}
/*--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;
}

.title-item
{
    height: 20px;
    padding: 5px;
    background: #b7d6ea;
    /*color:#fff;*/
    font-weight: bold;
    /*box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.05) inset;*/
}

.title-item-2
{
    margin-bottom: 5px;
    background: #0d74ba;
    font-weight: bold;
    color: #fff;
}

/*.title-item i {color:#fff;}*/
.scroll-panel,
.btn-close
{
    position: relative;
    float: right;
}

.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: 150px;
    text-align: center;
    padding: 10px;
    margin: 10px;
    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;
    }

.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: #b7d6ea;
    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; Hue remove this line for addressing the GAP on top page of popup Employee Profilce (because using Form.aspx)*/
    left: 0px;
    right: 0px;
    overflow: auto;
    padding-bottom: 1px;
}

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

.line-right
{
    border-right: #ccc dotted 1px;
}

.center-screen
{
    position: fixed;
    top: 48%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.lnk-bottom
{
    display: block;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
}
/*Select company css*/
.radio-button > td td
{
    padding: 5px;
    border: #a5c4d9 solid 1px;
}

.ct_bottom
{
    position: relative;
    clear: both;
}

.clloginversion
{
    position: relative;
    display: block;
    margin-left: 10px;
    margin-top: 15px;
}

.formLayout_fg div.dxflGroupSys > div
{
    width: 100% !important;
}

.formLayout_fg .dxflVATSys.dxflCaptionCell
{
    width: 35% !important;
}

.formLayout_fg .button
{
    width: 60px !important;
}

    .formLayout_fg .button.btchangesave
    {
        width: initial !important;
    }

.formLayout_fg .fg_Captcha .dxcaRefreshButtonCell_MetropolisBlueCadena
{
    border-bottom: 0 !important;
    width: 90px;
    display: block;
    float: left;
}

.formLayout_fg .dxflCLLSys.dxflItemSys.dxflCustomItemSys.dxflItem.ly_rcpass.dxflElConSys
{
    margin-bottom: 8px;
}