html, body {
    margin: 0;
    padding: 0;
}

/* LOGIN */
.login-container {
    display: inline-block;
    width: 100%;
    height: 100%;
    /*background-size: 100% 100%;
    background-image: url(/Content/Images/Background_HR.jpg);*/
    box-shadow: 0 7px 20px 2px rgba(0, 0, 0, 0.2);
    /*background-repeat: no-repeat;*/
    background-color: #eeeced;
    position: fixed;
}

.login-form-outer {
    margin: 10% auto;
    width: 450px;
    height: 400px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    border-radius: 4px;
    border: 1px solid #eeeced;
    background-color: #ffffff;
}

.login-form-outer-text 
{
    color: #074392;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 24px;
    margin-top: 30px;
    text-align: center;
}

.login-form-inner 
{
    padding: 0 10%;
    border-radius: 4px 4px 0 0;
}

.login-form-inner .dxflCaption_Metropolis
{
    color: black;
}

.login-form-inner .dxflGroupBox_Metropolis {
    border: none;
}

.login-form-title-image 
{
    /*background: url(/Content/Pictures/logo.png);*/
    background-repeat: no-repeat;
    height: 60px;
    background-size: 250px;
    margin-left: 30px;
}

.login-form-label 
{
    display: inline;
}

.login-form-inner .login-textbox 
{
    width: 300px;
    margin: 10px 0;
    border-radius: 2px;
    border: 1px solid #c3cde4;
    min-height: 34px;
}

.login-container .dxflElConSys > div 
{
    display: inline;
}

.login-container div.dxflGroupSys > div > div 
{
    display: block;
}

.login-form-inner .login-button {
    width: 300px;
    margin-top: 10px;
    background-color: #0766c6;
    color: #ffffff;
    font-size: 16px;
    /*box-shadow: none;
    border: 1px solid;
    border-color: #011943;*/
}

/*.login-form-inner .login-button:hover {
    width: 300px;
    margin-top: 10px;
    background-color: #011943;
    color: #ffffff;
    font-size: 16px;
    box-shadow: none;
    border: 1px solid;
    border-color: #c3cde4;
}*/

.dxflHALSys > .dxflItemSys 
{
  width: -webkit-fill-available;
}

.dxflCLLSys .dxflCaptionCell_Metropolis
{
    padding: 0;
}



.dxflFormLayout_Metropolis .dxflCaptionCell_Metropolis 
{
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    color: #212121;
}
.dxpnl-edge.l 
{
    border: 1px solid #e9eaec;
}

.dxflCLLSys .dxflCaptionCell_Metropolis
{
    padding-right: 15px;
}

/* Header */
.headerPane 
{
    background-color: #EDEDED;
    background-position: left top;
    background-repeat: no-repeat;
    font-family: Tahoma;
}
.headerPane .headerTop
{
    height: 45px;
}
.templateTitle 
{
    float:left;
    margin-left: 15px;
    margin-top: 11px;
}
.templateTitle a 
{
    text-decoration: none;
    font-size: x-large;
    color: black;
}
.loginControl 
{
    float: right;
    margin-top: 17px;
    margin-right: 25px;
    font-size: 12px;
}
.loginControl a 
{
    color: black;
    text-decoration: none;
    border-bottom: dashed 1px black;
    display: inline-block;
}
.headerMenu 
{
    margin-top: 11px;
}

/* HEADER MAIN MENU */
.header-menu-container 
{
    display:inline-block;
    vertical-align: top;
    padding: 0px;
    margin-top: 25px !important;
    margin-bottom: 5px !important;
    /*margin: 0 auto;*/
    text-align: center;
    width: 65%;
}

.header-menu-container .dxmLite_Metropolis .dxm-main
{
    background: none;
}

.header-menu-container  .dxmLite_Metropolis
{
    display: inline-block;
    /*width:  60%;*/
}

.header-menu-container .dxbButton_Metropolis
{
    border-radius: 0;
    border: none;    
    display: inline-block;
    margin-left: 25px;
    vertical-align: middle;
}
.dxpnlControl_Metropolis .header-menu-container
{
    padding: 0px;
}


.left-menu-title {
    margin: 40px 20px;
}

.left-menu-title-img 
{
    width: 60px;
    display: inline-block;
}

.left-menu-title-text 
{
    display: inline-block;
    font-size: 18px;
    margin-top: 15px;
    vertical-align: top;
    text-shadow: 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 1px 2px rgba(0,0,0,.3), 0 3px 9px rgba(0,0,0,.1);
    color: #345aa4;
    text-transform: uppercase;
}

.header-menu-item 
{
    text-align: left;
    color: white;
}

.test {
    color: red;
}

.dxmLite_Metropolis .dxm-main .dxm-selected
{
    background: none;
    background-color: rgba(0,0,0,0.3);
}

.header-menu-btn img
{
    width: 20px;
}

.header-menu-btn 
{
    text-align: left;
    text-transform: uppercase;
    border: 0;
    box-shadow: none;
}

.dxm-item .header-menu-item-hover {
    background-color: #021943;
    text-decoration: underline;
}

.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab a
{
    color: #ffffff;
}

.header-menu-btn span 
{
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    margin-left: 5px;
    font-size: 10px;
}

.header-menu-btn img
{
    width: 20px;
}

.header-menu-btn 
{
    text-align: left;
    display: inline-block;
}

/* Footer */
.copyright {
    display: inline-block;
    margin-left: 40%;
    color: #011943;
}
.footer-logo
{
    /*background-image: url(/Content/Images/SL.png);*/
    display: inline-block;  
}

.footer-logo img
{
    width: 20px;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
}

.content 
{
    padding: 5px;
}


/* Account */
.accountHeader h2 
{
    margin: 10px 0 7px 0;
    font-size: 16px;
}
.accountHeader p 
{
    font-size: 12px;
    margin: 0;
    padding: 0;
}
.accountHeader 
{
    margin-bottom: 20px;
}

/* iOS */
.dxsplVSeparator_iOS,
.dxsplHSeparator_iOS
{
    border-width: 0px !important;
}
.dxsplPane_iOS.leftPane,
.dxsplPane_iOS.rightPane,
.dxsplPane_iOS.contentPane
{
    border-width: 1px !important;
}
.dxsplControl_iOS .templateTitle
{
    margin-top: 3px;    
}
.dxsplControl_iOS .templateTitle a
{
    color: #303030;
    font-size: 26px;
    line-height: 1em;
    font-weight: bold;
}
.dxsplControl_iOS .headerTop,
.dxsplControl_iOS .content
{
    font-family: HelveticaNeue,Helvetica,Verdana,sans-serif;
}
.dxsplControl_iOS .loginControl
{
    margin-top: 4px;    
}
.dxsplControl_iOS .loginControl a
{
    color: #0160E7;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
}
.dxsplControl_iOS .headerTop
{
    height: 33px;
}
.dxsplControl_iOS .headerMenu
{
    margin-top: 0px;   
}
.dxsplPane_iOS.mainContentPane
{
    border-width: 0px !important;
    box-shadow: initial;
    -webkit-box-shadow: initial;
    -moz-box-shadow: initial;
}
.dxsplPane_iOS.footerPane
{
    border-width: 1px !important;
}
.dxsplControl_iOS .accountHeader p
{
    color: #303030;
    font-size: 18px;
}
.dxsplControl_iOS .accountHeader h2
{
    color: #303030;
    font-size: 26px;
    margin-bottom: 10px;
}


/* Aqua */
.dxsplControl_Aqua 
{
    font-family: Tahoma;
}
.dxsplControl_Aqua .headerPane,
.dxsplControl_Aqua .footerPane,
.dxsplControl_Aqua .footerMenu li
{
    background-color: #BFDBFF;
}
.dxsplControl_Aqua .headerPane
{
    background-image: url('images/AquaHeader.jpg');
}
.dxsplControl_Aqua .accountHeader h2
{
    color: #5689C5;
}
.dxsplControl_Aqua .loginControl a,
.dxsplControl_Aqua .templateTitle a
{
    color: White;
    border-color: White;
}

/* DevEx */
.dxsplControl_DevEx 
{
    font-family: Verdana;
    color: #201F35;
}
.dxsplControl_DevEx .headerPane,
.dxsplControl_DevEx .footerPane,
.dxsplControl_DevEx .footerMenu li
{
    background-color: #F2F3F4;
}
.dxsplControl_DevEx .templateTitle a,
.dxsplControl_DevEx .loginControl,
.dxsplControl_DevEx .loginControl a
{
    color: #4B4B57;
}
.dxsplControl_DevEx .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxsplControl_DevEx .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_DevEx .accountHeader p
{
    font-size: 11px;
}

/* BlackGlass */
.dxsplControl_BlackGlass 
{
    font-family: Tahoma;
}
.dxsplControl_BlackGlass .headerPane,
.dxsplControl_BlackGlass .footerPane,
.dxsplControl_BlackGlass .footerMenu li
{
    background-color: #2A2A2A;
    color: white;
}
.dxsplControl_BlackGlass .headerPane
{
    background-image: url('images/BlackGlassHeader.jpg');
}
.dxsplControl_BlackGlass .leftPanel li[class$="dxnb-last"] ul
{
    border-bottom: 1px solid black;
}
.dxsplControl_BlackGlass .accountHeader p
{
    color: #585858;
}
.dxsplControl_BlackGlass .loginControl a,
.dxsplControl_BlackGlass .templateTitle a
{
    color: White;
    border-color: White;
}


/* Glass */
.dxsplControl_Glass 
{
    font-family: Tahoma;
}
.dxsplControl_Glass .headerPane,
.dxsplControl_Glass .footerPane,
.dxsplControl_Glass .footerMenu li
{
    background-color: #CFE0E7;
}
.dxsplControl_Glass .headerPane
{
    background-image: url('images/GlassHeader.jpg');
}
.dxsplControl_Glass .footerMenu *
{
    background-image: none !important;
}
.dxsplControl_Glass .templateTitle a,
.dxsplControl_Glass .loginControl,
.dxsplControl_Glass .loginControl a
{
    color: #4B4B57;
}
.dxsplControl_Glass .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxsplControl_Glass .accountHeader h2
{
    color: #387FA4;
}
.dxsplControl_Glass .accountHeader p
{
    color: #575757;
}



/* Office2003Blue */
.dxsplControl_Office2003Blue 
{
    font-family: Tahoma;
}
.dxsplControl_Office2003Blue .headerPane,
.dxsplControl_Office2003Blue .footerPane,
.dxsplControl_Office2003Blue .footerMenu li
{
    background-color: #BCD4F6;
}
.dxsplControl_Office2003Blue .footerMenu div
{
    background: transparent none;
}
.dxsplControl_Office2003Blue .leftPanel > ul
{
    background: transparent none;
}
.dxsplControl_Office2003Blue .templateTitle a,
.dxsplControl_Office2003Blue .loginControl,
.dxsplControl_Office2003Blue .loginControl a
{
    color: #4B4B57;
}
.dxsplControl_Office2003Blue .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxsplControl_Office2003Blue .accountHeader p
{
    color: #424242;
}
.dxsplControl_Office2003Blue .headerMenu 
{
    margin-top: 5px;
}


/* Office2003Olive */
.dxsplControl_Office2003Olive 
{
    font-family: Tahoma;
}
.dxsplControl_Office2003Olive .headerPane,
.dxsplControl_Office2003Olive .footerPane,
.dxsplControl_Office2003Olive .footerMenu li
{
    background-color: #D6DCBB;
}
.dxsplControl_Office2003Olive .footerMenu div
{
    background: transparent none;
}
.dxsplControl_Office2003Olive .leftPanel > ul
{
    background: transparent none;
}
.dxsplControl_Office2003Olive .templateTitle a,
.dxsplControl_Office2003Olive .loginControl,
.dxsplControl_Office2003Olive .loginControl a
{
    color: #4B4B57;
}
.dxsplControl_Office2003Olive .loginControl a 
{
    border-bottom-color: #4B4B57;
}
.dxsplControl_Office2003Olive .accountHeader p
{
    color: #424242;
}
.dxsplControl_Office2003Olive .headerMenu 
{
    margin-top: 5px;
}

/* Office2003Silver */
.dxsplControl_Office2003Silver 
{
    font-family: Tahoma;
}
.dxsplControl_Office2003Silver .headerPane,
.dxsplControl_Office2003Silver .footerPane,
.dxsplControl_Office2003Silver .footerMenu li
{
    background-color: #D0D0DE;
}
.dxsplControl_Office2003Silver .footerMenu div
{
    background: transparent none;
}
.dxsplControl_Office2003Silver .leftPanel > ul
{
    background: transparent none;
}
.dxsplControl_Office2003Silver .templateTitle a,
.dxsplControl_Office2003Silver .loginControl,
.dxsplControl_Office2003Silver .loginControl a
{
    color: #4B4B57;
}
.dxsplControl_Office2003Silver .loginControl a
{
    border-bottom-color: #4B4B57;
}
.dxsplControl_Office2003Silver .accountHeader p
{
    color: #424242;
}
.dxsplControl_Office2003Silver .headerMenu 
{
    margin-top: 5px;
}


/* Office2010Black */
.dxsplControl_Office2010Black 
{
    font-family: Verdana;
}
.dxsplControl_Office2010Black .headerPane,
.dxsplControl_Office2010Black .footerPane,
.dxsplControl_Office2010Black .footerMenu li
{
    background-color: #393939;
    color: white;
}
.dxsplControl_Office2010Black .footerMenu a
{
    color: white !important;
}
.dxsplControl_Office2010Black .accountHeader h2
{
    color: #3C3C3C;
}
.dxsplControl_Office2010Black .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Office2010Black .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_Office2010Black .loginControl a,
.dxsplControl_Office2010Black .templateTitle a
{
    color: White;
    border-color: White;
}


/* Office2010Blue */
.dxsplControl_Office2010Blue 
{
    font-family: Verdana;
}
.dxsplControl_Office2010Blue .headerPane,
.dxsplControl_Office2010Blue .footerPane,
.dxsplControl_Office2010Blue .footerMenu li
{
    background-color: #D3E4F6;
}
.dxsplControl_Office2010Blue .templateTitle a,
.dxsplControl_Office2010Blue .loginControl,
.dxsplControl_Office2010Blue .loginControl a
{
    color: Black;
}
.dxsplControl_Office2010Blue .loginControl a 
{
    border-bottom-color: Black;
}
.dxsplControl_Office2010Blue .accountHeader h2
{
    color: #498BC2;
}
.dxsplControl_Office2010Blue .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Office2010Blue .headerMenu 
{
    margin-top: 13px;
}


/* Office2010Silver */
.dxsplControl_Office2010Silver 
{
    font-family: Verdana;
}
.dxsplControl_Office2010Silver .headerPane,
.dxsplControl_Office2010Silver .footerPane,
.dxsplControl_Office2010Silver .footerMenu li
{
    background-color: #A9ACB4;
    color: white;
}
.dxsplControl_Office2010Silver .accountHeader h2
{
    color: #3B3B3B;
}
.dxsplControl_Office2010Silver .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Office2010Silver .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_Office2010Silver .loginControl a,
.dxsplControl_Office2010Silver .templateTitle a
{
    color: White;
    border-color: White;
}



/* PlasticBlue */
.dxsplControl_PlasticBlue 
{
    font-family: Tahoma;
}
.dxsplControl_PlasticBlue .headerPane,
.dxsplControl_PlasticBlue .footerPane,
.dxsplControl_PlasticBlue .footerMenu li
{
    background-color :#3C4F8F;
    color: white;
}
.dxsplControl_PlasticBlue .headerPane
{
    background-image: url('images/PlasticBlueHeader.jpg');
}
.dxsplControl_PlasticBlue .accountHeader h2
{
    color: #5A83D0;
}
.dxsplControl_PlasticBlue .accountHeader p
{
    color: #575757;
}
.dxsplControl_PlasticBlue .headerMenu 
{
    margin-top: 12px;
}
.dxsplControl_PlasticBlue .loginControl a,
.dxsplControl_PlasticBlue .templateTitle a
{
    color: White;
    border-color: White;
}


/* RedWine */
.dxsplControl_RedWine 
{
    font-family: Tahoma;
}
.dxsplControl_RedWine .headerPane,
.dxsplControl_RedWine .footerPane,
.dxsplControl_RedWine .footerMenu li
{
    background-color: #78002B;
    color: white;
}
.dxsplControl_RedWine .headerPane
{
    background-image: url('images/RedWineHeader.jpg');
    background-position: top right;
}
.dxsplControl_RedWine .footerMenu div 
{
    background: transparent none;
}
.dxsplControl_RedWine .accountHeader h2
{
    color: #8A0A37;
}
.dxsplControl_RedWine .headerMenu 
{
    margin-top: 9px;
}
.dxsplControl_RedWine .loginControl a,
.dxsplControl_RedWine .templateTitle a
{
    color: White;
    border-color: White;
}


/* SoftOrange */
.dxsplControl_SoftOrange 
{
    font-family: Tahoma;
}
.dxsplControl_SoftOrange .headerPane,
.dxsplControl_SoftOrange .footerPane,
.dxsplControl_SoftOrange .footerMenu li
{
    background-color: #F9F9F9 !important;
    background-image: none !important;
}
.dxsplControl_SoftOrange .templateTitle a,
.dxsplControl_SoftOrange .loginControl,
.dxsplControl_SoftOrange .loginControl a
{
    color: Black;
}
.dxsplControl_SoftOrange .loginControl a 
{
    border-bottom-color: Black;
}
.dxsplControl_SoftOrange .accountHeader h2
{
    color: Black;
}
.dxsplControl_SoftOrange .accountHeader p
{
    color: #707070;
}
.dxsplControl_SoftOrange .headerMenu 
{
    margin-top: 8px;
}


/* Youthful */
.dxsplControl_Youthful 
{
    font-family: Tahoma;
}
.dxsplControl_Youthful .headerPane,
.dxsplControl_Youthful .footerPane,
.dxsplControl_Youthful .footerMenu li
{
    background-color: #8AA150;
    color: white !important;
}
.dxsplControl_Youthful .accountHeader h2
{
    color: #80A70E;
}
.dxsplControl_Youthful .headerMenu 
{
    margin-top: 1px;
}
.dxsplControl_Youthful .loginControl a,
.dxsplControl_Youthful .templateTitle a
{
    color: White;
    border-color: White;
}

/* Metropolis */
.dxsplControl_Metropolis 
{
    font-family: Segoe UI;
}
.dxsplControl_Metropolis .headerPane,
.dxsplControl_Metropolis .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxsplControl_Metropolis .accountHeader h2
{
    color: #3B3B3B;
}
.dxsplControl_Metropolis .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Metropolis .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_Metropolis .loginControl a,
.dxsplControl_Metropolis .templateTitle a
{
    color: Black;
    border-color: Black;
}
.dxsplControl_Metropolis .templateTitle a 
{
    font-size: 28px;
}
.dxsplControl_Metropolis .dxsplVSeparator_Metropolis 
{
    border-bottom: 0!important;
}

/* MetropolisBlue */
.dxsplControl_MetropolisBlue
{
    font-family: Segoe UI;
}
.dxsplControl_MetropolisBlue .headerPane,
.dxsplControl_MetropolisBlue .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxsplControl_MetropolisBlue .accountHeader h2
{
    color: #3B3B3B;
}
.dxsplControl_MetropolisBlue .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_MetropolisBlue .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_MetropolisBlue .loginControl a,
.dxsplControl_MetropolisBlue .templateTitle a
{
    color: Black;
    border-color: Black;
}
.dxsplControl_MetropolisBlue .templateTitle a 
{
    font-size: 28px;
}
.dxsplControl_MetropolisBlue .dxsplVSeparator_MetropolisBlue 
{
    border-bottom: 0!important;
}

/* Moderno */
.dxsplControl_Moderno 
{
    font-family: Segoe UI;
}
.dxsplControl_Moderno .headerPane,
.dxsplControl_Moderno .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxsplControl_Moderno .accountHeader h2
{
    color: #3B3B3B;
}
.dxsplControl_Moderno .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Moderno .headerMenu 
{
    margin-top: 13px;
}
.dxsplControl_Moderno .loginControl a,
.dxsplControl_Moderno .templateTitle a
{
    color: #0072c6;
    border-color: #0072c6;
}
.dxsplControl_Moderno .templateTitle a 
{
    font-size: 28px;
}
.dxsplControl_Moderno .dxsplVSeparator_Moderno 
{
    border-bottom: 0!important;
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
}
.dxsplControl_Moderno .footerPane 
{
    background: #EDEDED;
}

/* Mulberry */
.dxsplControl_Mulberry
{
    font-family: Segoe UI;
}
.dxsplControl_Mulberry .footerMenu li
{
    background-color: White;
    color: Black;
}
.dxsplControl_Mulberry .accountHeader h2
{
    color: #3B3B3B;
}
.dxsplControl_Mulberry .accountHeader p
{
    font-size: 11px;
}
.dxsplControl_Mulberry .headerMenu 
{
    margin-top: 10px;
}
.dxsplControl_Mulberry .loginControl a,
.dxsplControl_Mulberry .templateTitle a
{
    color: #BF4E6A;
    border-color: #BF4E6A;
}
.dxsplControl_Mulberry .templateTitle a 
{
    font-size: 28px;
}
.dxsplControl_Mulberry .dxsplVSeparator_Mulberry
{
    border-width: 0px !important;
}
.dxsplControl_Mulberry .headerPane,
.dxsplControl_Mulberry .footerPane
{
    background: #F1F2F5;
}

.dx-placeholder 
{
    padding-left: 10px;
}

/* INFO TABLE */


/*BUTTON*/
.insideFormBtn, #SaveBtn
{
    width: 100%;
}

.insideGV .gvPrint 
{
    background-color: black;
}
.saveBtn
{
    padding: 10px;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #2098d1;
    color: #ffffff;
    border-radius: 5px;
    width: 100%;
}

.saveBtn:hover
{
    background-color: #1b8ca3;
}
.insideFormBtn .formSaveBtn, .insideFormBtn .formSendBtn, .insideFormBtn .formApproveBtn,  #passSaveBtn {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #ffffff;
    color: #2098d1;
    border-radius: 5px;
    border: 1px solid;
    border-color: #2098d1;
    float: right;
    font-size: 12px;
}

.insideFormBtn .formCancelBtn {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #ffffff;
    color: #F25E5E;
    border-radius: 5px;
    border: 1px solid;
    border-color: #F25E5E;
    float: right;
    font-size: 12px;
}
    .insideFormBtn .formCancelBtn:hover {
        color: #ffffff;
        border-color: #F25E5E;
        background-color: #F25E5E;
    }
    .insideFormBtn .formSendBtn:hover, .insideFormBtn .formApproveBtn:hover {
        color: #ffffff;
        border-color: #81E281;
        background-color: #81E281;
    }

    .insideFormBtn .addRowBtn {
        box-shadow: none;
        -webkit-box-shadow: none;
        background-color: #ffffff;
        color: #2098d1;
        border-radius: 5px;
        border: 1px solid;
        border-color: #2098d1;
        float: left;
    }

    .insideFormBtn .addRowBtn:hover, .insideFormBtn .formSaveBtn:hover, #passSaveBtn:hover {
        color: #ffffff;
        background-color: #2098d1;
    }

.dx-radiobutton-checked .dx-radiobutton-icon-dot 
{
    background: #337ab7;
}

.dx-texteditor-input 
{
    min-height: 22px;
    padding: 0;
}

.dx-placeholder:before 
{
    padding: 0;
}

.dx-datagrid-rowsview .dx-row 
{
    border-bottom: 1px solid #d3d3d3;
}

.dropZoneExternal > div,
.dropZoneExternal > img
{
    position: absolute;
}
.dropZoneExternal
{
    position: relative;
    border: 1px dashed #f17f21!important;
    cursor: pointer;
}
.dropZoneExternal,
.dragZoneText
{
    width: 120px;
    height: 150px;
    margin-top: 20px;
}
#dragZone
{
    width: 100%;
    display: table;
}
#uploadedImage
{
    width: 100%;
}
.dropZoneText
{
    width: 300px;
    height: 150px;
    color: #fff;
    background-color: #888;
}
#dropZone
{
    top: 0;
    padding: 100px 25px; 
}
.uploadControlDropZone
{
    display: none;
}
.dropZoneText,
.dragZoneText
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-size: 18px;
}
.dragZoneText
{
    color: #808080;
}
.dxucInlineDropZoneSys span
{
    color: #fff!important;
    font-size: 10pt;
    font-weight: normal!important;
}
.validationMessage
{
    padding: 0 20px;
    text-align: center;
}
.uploadContainer
{
    width: 150px;
    max-width: 350px;
    min-width: 286px;
    margin-top: 10px;
}

.contentPane 
{
    margin: 0 auto;
}

.dxgvControl_Metropolis  {
    background-color: transparent;
}
/*HEADER*/
.dxpnlControl_Metropolis.dxpnl-edge
{
    padding: 0px;
    border: none;
}

.footerPane {
    display: inline-block;
    width: 100%;
    /*background: url(/Content/Images/Header.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;*/
    background-color: #00aeef;
    bottom: 0;
    right: 0;
    left: 0;
}

#FooterPane {
    width: 100% !important;
}
.header-menu {
    display: inline-block;
    width: 100%;
    height: 80px;
    /*  background: url(/Content/Images/Header.jpg);*/
    /*background-size: 100% 100%;
    background-repeat: no-repeat;*/
    background-color: #00aeef;
}
.header-content
{
    display: inline-block;
    margin-left: 25px;
    vertical-align: middle;
    width: 25%;
}

.header-logo {
    display: inline-block;
    margin-left: 25px;
    vertical-align: middle;
    width: 15%;
}

.header-logo img
{
    height: 60px;
    margin-top: 8px;
}
.header-right-text
{
    display: inline-block;
    vertical-align: middle;
}
.header-right-text .dxeBase_Metropolis {
    display: inline-block;
    vertical-align: top;
    margin-top: 25px;
    font-size: 18px;
    color: #011943;
    text-transform: uppercase;
}
.header-right-text .dxeBase_Metropolis:hover {
    color: #e2edff;
}

.header-right-menu 
{
    display: inline-block;
    float: right;
    margin-right: 15px;
}

.header-right-menu .dxmLite_Metropolis .dxm-main {
    border-radius: 30px;
    font-size: 18px;
    background: none;
    border-style: none;
    display: inline-block;
    vertical-align: top;
    margin-top: 25px;
    font-size: 18px;
    color: #ffffff;
    text-transform: uppercase;
}

.header-right-menu #Menu .dxm-item 
{
    /*height: 55px;*/
    margin-right: 10px;
}

.header-right-menu .dxmLite_Metropolis .dxm-main .dxm-item.dxm-hovered 
{
    /*border-radius: 30px;*/
    background: none;
}

    .header-right-menu .dxmLite_Metropolis .dxm-main .dxm-selected {
        background: none;
        /*border-radius: 30px;*/
    }
.header-right-menu .dxeImage_Metropolis {
    /*width: 45px;*/
    height: 60px;
    margin-top: 10px;
    vertical-align: middle;
    border-radius: 30px;
    /*margin-left: 2px;*/
}

.header-right-menu .dxmLite_Metropolis .dxm-horizontal .dxm-image-l .dxm-content 
{
    padding: 3px;
}

.dxpnlControl_Metropolis .headerPane .panel .dxpnl-edge.t 
{
    border: none;
}

.dxmLite_Metropolis.dxm-ltr .dxm-popup .dxm-image
{
    height: 20px;
}

.line
{
    margin-top: 20px;
    width: 80%;
    border-top: 1px solid;
    border-color: #909090;
    margin-left: 10%;
}


/* EMPLOYEE */

.employeeInfo .dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-tab,
.employeeInfo .dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab {
    text-align: left;
    font-size: 12px;
}
.employeeInfo .dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab a
{
    color: #2098d1;
}

.dxflFormLayout_Metropolis .dxflCaption_Metropolis {
    color: #011943;
    font-size: 12px;
}

.dxflGroupBoxCaption_Metropolis {
    color: #011943;
}

.infoFamily .dxeListBox_Metropolis,
.infoNonFamily .dxeListBox_Metropolis,
.infoBloodRelative .dxeListBox_Metropolis,
.infoAddress .dxeListBox_Metropolis,
.infoCommunication .dxeListBox_Metropolis,
.infoLanguageSkill .dxeListBox_Metropolis,
.infoLanguageTest .dxeListBox_Metropolis,
.infoComputerSkill .dxeListBox_Metropolis,
.infoReward .dxeListBox_Metropolis,
.infoTalent .dxeListBox_Metropolis,
.infoPunishment .dxeListBox_Metropolis
{
    font-size: 12px;
}

.contentPane .index-image {
    background: url(/Content/Images/background_HR.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: fixed;
}

.dxm-separator {
    visibility: hidden;
}

.infoFamily .dxgvControl_Metropolis,
.infoNonFamily .dxgvControl_Metropolis,
.infoBloodRelative .dxgvControl_Metropolis,
.infoCommunication .dxgvControl_Metropolis,
.infoEducation .dxgvControl_Metropolis,
.infoQualification .dxgvControl_Metropolis,
.infoLanguageSkill .dxgvControl_Metropolis,
.infoLanguageTest .dxgvControl_Metropolis,
.infoReward .dxgvControl_Metropolis,
.infoWorkExperience .dxgvControl_Metropolis,
.infoPunishment .dxgvControl_Metropolis,
.employeeMyWork .dxgvControl_Metropolis,
.employeeList .dxgvControl_Metropolis {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 12px;
    width: 95% !important;
}

.infoJob .dxflFormLayout_Metropolis,
.infoGeneral .dxflFormLayout_Metropolis,
.infoAddress .dxflFormLayout_Metropolis,
.infoMilitaryService .dxflFormLayout_Metropolis {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 12px;
    width: 50% !important;
}

.employeeList .dx-ac 
{
    height: 70px;
}

.organizationInfo .dxflFormLayout_Metropolis {
    margin-top: 15px;
    margin-left: 15px;
    font-size: 12px;
    width: 55% !important;
}

.newsStyle .dxflFormLayout_Metropolis {
    margin-top: auto;
    font-size: 14px;
    width: 100% !important;
}

.infoFavour .dxgvControl_Metropolis,
.infoTalent .dxgvControl_Metropolis,
.infoComputerSkill .dxgvControl_Metropolis {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 12px;
    width: 60% !important;
}
.employeeSalary .dxgvControl_Metropolis {
    border: 20px;
}
.employeeWorkPlanFilter #flTitle {
    margin-left: 10px;
    font-size: 42px;
    width: 90% !important;
    border: 20px;
    /*border-bottom: 1px solid;*/
    border-color: #011943;
}

.employeeWorkPlan .dxgvControl_Metropolis {
    margin-left: 10px;
    font-size: 12px;
    width: 95% !important;
}
.employeeTimeAttendance .dxgvControl_Metropolis {
    margin-left: 10px;
    margin-top: 10px;
    font-size: 12px;
    width: 95% !important;
}

.employeeDecision .dxgvControl_Metropolis,
.employeeContract .dxgvControl_Metropolis {
    margin-left: 10px;
    margin-top: 10px;
    font-size: 12px;
    width: 95% !important;
}

.employeeLeave .dxgvControl_Metropolis {
    margin-left: 10px;
    margin-top: 10px;
    font-size: 12px;
    width: 95% !important;
}

.dxeButtonEdit_Metropolis,
.dxeTextBox_Metropolis,
.dxeBase_Metropolis,
.dxeMemoEditArea_Metropolis {
    font-size: 12px;
}

.dxflGroupCell_Metropolis {
    padding: 0 3px;
}

.dxsplPane_Metropolis .menuPane .left-menu-container {
    width: 15%;
    display: inline-block;
    background-color: #ffcf40;
    /*height: 100%;*/
    /*font-size: 12px;*/
    margin-right: 20px;
    vertical-align: top;
    /*border: 1px solid #d8d8d8;*/
    /*border-radius: 6px;*/
    /*box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);*/
}

/*LEFT MENU */
.left-menu-container .dxbButton_Metropolis {
    height: 30px;
    border-radius: 0;
    border: none;
    background-color: #f6f8fa;
    color: #021943;
    white-space: inherit;
}

.left-menu-container .dxbButtonHover_Metropolis {
    /*height: 35px;*/
    font-weight: bold;
    background-color: #ffcf40;
    text-align: left;
    color: #021943;
}

.dxsplControl_Metropolis
{
    height: 80vh !important;
}
.dxsplPane_Metropolis .left-menu-container {
    padding: 0px;
    background-color: #f6f8fa;
}

.left-menu-title {
    margin: 40px 20px;
}

.left-menu-title-img {
    width: 60px;
    display: inline-block;
}

.left-menu-title-text {
    display: inline-block;
    font-size: 18px;
    margin-top: 15px;
    vertical-align: top;
    text-shadow: 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 0 1px #f3f7fa, 0 1px 2px rgba(0,0,0,.3), 0 3px 9px rgba(0,0,0,.1);
    color: #345aa4;
    text-transform: uppercase;
}

.dxbButton_Metropolis .left-menu-item {
    text-align: left;
    height: 50px;
    background-color: #f6f8fa;
    color: #021943;
}

.dxbButton_Metropolis .left-menu-btn img {
    width: 20px;
}

.left-menu-btn {
    text-align: left;
    text-transform: uppercase;
}

.dxbButton_Metropolis.left-menu-item:hover, .dxbButton_Metropolis.left-menu-item-clicked {
    /*height: 35px;*/
    font-weight: bold;
    background-color: #ffcf40;
    text-align: left;
    color: #021943;
}

.dxtcLite_Metropolis > .dxtc-stripContainer .dxtc-activeTab a {
    color: #ffffff;
}

.left-menu-btn span {
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    margin-left: 0 auto;
    font-size: 10px;
    padding-top: 5px;
}

.left-menu-btn img {
    width: 20px;
    padding-right: 5px;
    float: left;
}

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

input[type="text"].dxeEditArea_Metropolis,
.dxeDisabled_Metropolis,
.dxeMemo_Metropolis .dxeMemoEditArea_Metropolis {
    color: #011943;
}

.change-pass-form .dxflTextEditItemSys .dxflVATSys.dxflCaptionCell_Metropolis {
    text-align: left;
}

.change-pass-form label {
    /*margin-right: 10px;*/
}

.change-pass-form {
    margin: 0 auto;
    background-color: #ffffff;
    width: 400px;
    padding: 40px;
    height: 150px;
    box-shadow: 0 1px 4px 0px rgba(0, 0, 0, 0.16);
    margin-top: 50px;
}

.change-pass-form table {
    margin-bottom: 5px;
}

.right-container-title {
    /*font-family: 'Lobster', cursive;*/
    font-size: 25px;
    text-align: center;
    margin: 20px 0 0 50px;
    /*font-weight: bold;*/
    text-transform: uppercase;
}

.contentPane .right-container {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    /*margin: 20px;*/
}

.viewbag-text {
    text-align: center;
    margin-left: 60px;
    color: red;
    font-size: 16px;
}

.viewbag-text-success {
    text-align: center;
    margin-left: 60px;
    color: green;
    font-size: 16px;
}

.dxgvHeader_Metropolis .hiddenCell, .hiddenCell .dxgv {
    display: none;
}

.employeeSalary,
.employeeAsset {
    margin: 0;
    left: 50%;
    position: absolute;
    margin-right: -50%;
    transform: translate(-50%, 0);
    margin-bottom: 30px;
}

.employeePayable .dxgvControl_Metropolis,
.employeeReceivable .dxgvControl_Metropolis {
    margin-top: 10px;
    margin-left: 10px;
    font-size: 12px;
    /*width: 95% !important;*/
}

#filterButton {
    background-color: #00aeef !important;
    color: white !important;
}

.online-request-item {
    margin-bottom: 5px;
    float: right;
    width: 390px;
}

.online-request-label {
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
    font-weight: bold;
}

#customerContactGrid a:first-child, .formSaveBtn, #passSaveBtn {
    background-color: #00aeef;
    color: #ffffff;
    width: 60px;
}

.dxpc-content #test-text-content {
    height: 800px;
    white-space: pre-line;
    margin: 0 20px;
    margin-left: 100px;
}

.test-radio-button 
{
    /*display: inline-block;*/
    border: none;
}


.test-radio-button .dxEditors_edtRadioButtonCheckedDisabled_Metropolis {
    background-color: green;
}

.test-check-button {
    /*display: inline-block;*/
    border: none;
}

.survey-save-button {
    /*text-align: right;*/
    background-color: dodgerblue;
    color: white;
    border-radius: 6px;
}

.survey-submit-button {
    /*text-align: left;*/
    background-color: green;
    color: white;
    border-radius: 6px;
}

.survey-exit-button {
    /*text-align: left;*/
    background-color: red;
    color: white;
    border-radius: 6px;
}

.tile-view {
    /*background-color: white;*/
}

.tile-view-clicked {
    background-color: #00aeef;
    color: white;
}

.startFormBtn 
{
    text-align: center;
    margin-top: 20px;
}

.start-button {
    border-radius: 6px;
    color: #2098d1;
    border-color: #2098d1;
}

.start-button:hover {
    background-color: #2098d1;
    color: white;
}

.test-question-modal .dxpc-content {
    height: 800px;
}

.test-header 
{
    text-align: center;
}

#notification {
    position: fixed;
    top: 40px; /* Set to 0 or wherever */
    width: 95%; /* set to 100% if space is available */
    z-index: 105;
    text-align: center;
    font-weight: normal;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #FF7800;
    padding: 5px;
}

#notification span.dismiss {
    border: 2px solid #FFF;
    padding: 0 5px;
    cursor: pointer;
    float: right;
    margin-right: 10px;
}

#notification a {
    color: white;
    text-decoration: none;
    font-weight: bold
}

#test-time {
    font-size: 20px;
    text-align: center;
    border-radius: 8px;
    border-color: white;
    color: white;
    background-color: red;
    width: 200px;
    display: inline-block;
}

#pcTestQuestionModal_PWH-1 {
    text-align: center;
}

.test-correct-answer {
    background-color: green;
    border: none;
}

.alert {
    padding: 20px;
    background-color: green;
    color: white;
    visibility: hidden;
    display: inline-block;
}

.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.closebtn:hover {
    color: black;
}