html, body { font-family: CJOnlyOneBR; width: 100%; height: 100%; padding: 0px; margin: 0px; }
.no-drag {-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}

.layout-contents { position: relative; width: 100%; height: 100%; }

.layout-contents .background-area { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 100px); }
.layout-contents .background-area > .image { width: 100%; height: 100%; background: url(/resources/img/system/background-login-1.png); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; }

.layout-contents .login-area { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 100px); z-index: 99; }
.layout-contents .login-area .login { display: flex; align-items: center; justify-items: center; width: 1000px; height: 100%; margin: 0px auto; }
.layout-contents .login-area .login .login-logo { width: 100%; height: 60px; margin: 0px 0px 0px 0px; background-image: url(/resources/img/common/logo/logo.png); background-position: center center; background-size: auto 36px; background-repeat: no-repeat; }

.login-container { display: flex; overflow: hidden; white-space: nowrap; font-size: 0px; width: 100%; margin: 0px auto 0px auto; }
.login-container .block { display: inline-block; width: 50%; height: auto; padding: 30px; background-color: #ffffff; opacity: 0.93; vertical-align: top; }
.login-container > .left { width: 50%; border-top-left-radius: 10px; border-bottom-left-radius: 10px}
.login-container > .right { width: 50%; border-top-right-radius: 10px; border-bottom-right-radius: 10px;}

.layout-contents .login-area .login .login-container .login-header { width: 100%; height: 50px; }
.layout-contents .login-area .login .login-container .login-header > .icon { width: 90px; height: 20px; background-image: url('/resources/img/login/logo.png'); background-repeat: no-repeat}

.banner-box { position: relative; width: 100%; min-height: 300px; }

.banner-box .center {  display: flex; justify-items: center; width: 190px; height: 230px; margin: 0px auto; text-align: center; }
.banner-box .center > div { width: 100%; background: url(/resources/img/login/system_title.png) 50% 50% no-repeat; overflow:hidden; text-indent:-10000px}
.banner-box .center > div.eng {background: url(/resources/img/login/system_title_eng.png) 50% 50% no-repeat}
.partner-banner-box .center {  display: flex; justify-items: center; width: 220px; height: 230px; margin: 0px auto; text-align: center; }
.partner-banner-box .center > div { width: 100%; background: url(/resources/img/login/title_ESH.PNG) 50% 50% no-repeat; overflow:hidden; text-indent:-10000px}
.banner-box .center .t1 { position: relative; top: 45px; color: #0b2972; font-size: 65px; font-weight: 700; }
.banner-box .center .t2 { position: relative; top: 30px; color: #0b2972; font-size: 12px; font-weight: 700; }
.banner-box .center .t3 { position: relative; top: 30px; color: #333333; font-size: 16px; font-weight: 700; }

.banner-box .bottom { position: absolute; right: 0; bottom: 10px; width: 100%; }
.banner-box .bottom .right { float: right; width:115px; height:50px; background: url(/resources/img/login/login_logo_FactoryOne.svg) 50% 50% no-repeat; overflow:hidden; text-indent:-10000px; width: 180px; background-size: contain; }
/* .banner-box .bottom .right { float: right; width:115px; height:50px; background: url(/resources/img/login/icon_login_sys.png) 50% 50% no-repeat; overflow:hidden; text-indent:-10000px } */

.login-box { width: 400px; margin:0 auto; }
.login-box .title-form { width: 100%; }
.login-box .title-form .main { margin: 0px 0px 5px 0px; color: #0b2972; font-size: 26px; font-weight: 700; }
.login-box .title-form .sub { width: 100%; height: 23px; overflow:hidden; text-indent: -10000px; background: url(/resources/img/login/txt_member_login.png) 100% 0 no-repeat; margin:20px 0 30px}
.partner-login-box .title-form .sub { width: 100%; height: 23px; overflow:hidden; text-indent: -10000px; background: url(/resources/img/login/partner_login.PNG) 100% 0 no-repeat; margin:20px 0 30px}
.temp-password-box .title-form .sub { width: 100%; height: 23px; overflow:hidden; text-indent: -10000px; background: url(/resources/img/login/temp_password.PNG) 100% 0 no-repeat; margin:20px 0 30px}
.new-password-box .title-form .sub { width: 100%; height: 23px; overflow:hidden; text-indent: -10000px; background: url(/resources/img/login/new_password.PNG) 100% 0 no-repeat; margin:20px 0 30px}

.login-box .text-form { position: relative; width: 100%; }
.login-box .text-form .form-icon { display:none; }
.login-box .text-form .input-text { width: 100%; height: 44px; text-indent:10px; margin: 6px 0px; border: 1px solid #999; border-radius: 4px; color: #333333; font-size: 16px; }
.login-box .text-form .input-text::-webkit-input-placeholder { color: #ccc; }
.login-box .text-form .input-text::-ms-input-placeholder { color: #ccc; }
.login-box .text-form .input-text::-mos-input-placeholder { color: #ccc; }
.login-box .text-form .input-text:focus { outline: none; border: 1px solid #0b2972}
.login-box .text-form .input-text:hover { border: 1px solid #0b2972}
.login-box .text-form .input-text:active { border: 1px solid #0b2972}

.login-box input[type=button] { width: 100%; height: 46px; border: none; outline: none; margin: 6px 0px; background-color: #0b2972; color: #ffffff; font-size: 18px; font-weight: 700; text-transform: uppercase; cursor: pointer; border-radius: 4px; }
.login-box input[type=button]:hover { background: #39A2DB; }

.login-box .information-form { width: 100%; margin: 20px 0px 0px 0px; color: #999999; font-size: 12px; }
.login-box .information-form span { display: inline-block; vertical-align:middle }
.login-box .information-form a { display: inline-block; width: 24px; height: 24px; overflow: hidden; text-indent: -10000px; background: url(/resources/img/login/btn_help.png) no-repeat; vertical-align:middle; margin-left: 5px }
.login-box .information-form .icon-question { font-size: 18px; }

.layout-contents .login-form { display: none; }

.footer-area { position: absolute; bottom: 0; left: 0; overflow: hidden; white-space: nowrap; font-size: 0px; width: 100%; height: 100px; padding: 0px 20px; background-color: #37393e; color: white; }
.footer-area .footer-logo { display: inline-block; width: 200px; height: 100px; line-height: 100px; background-image: url(/resources/img/common/logo/logo_w.png); background-position: center center; background-size: 120px auto; background-repeat: no-repeat; vertical-align: top; }
.footer-area .footer-copyright { display: inline-block; width: calc(100% - 200px); height: 100px; line-height: 100px; font-size: 12px; text-align: right; vertical-align: top; }

.block-radio { display: inline-block; width: calc(50% - 5px); height: 45px; line-height: 25px; padding: 10px; margin-right: 10px; border: 1px solid #0b2972; border-radius: 5px; vertical-align: top; cursor: pointer; }
.input-checked { background-color: #0b2972; }
.block-radio > label { margin-top: -2px; margin-left: 5px; font-size: 16px; vertical-align: top; }
input[class="user-language"] { -webkit-appearance: none; width:16px; height: 16px; border:1px solid #0b2972; border-radius:50%; background-color: #ffffff; outline: none; cursor: pointer; }
input[class="user-language"]:before { content:''; position: relative; display:block; top: 3px; width: 8px; height: 8px; margin: auto; border-radius: 50%; }
input[class="user-language"]:checked:before { background: #0b2972; }
input[class="user-language"]:checked + label { color: #ffffff; font-weight: 700; }

.select-language { color: #0b2972 !important; }

/* Modal Dialog */
.modalDialog { z-index:9999998; }
.modalDialog-dialog { display: flex; top: 0; left: 0; width: 100%; min-width: 100%; height: 100%; margin: 0px auto 0px auto; z-index:9999999; }
.modalDialog-body { width: 100%; height: 125px; padding: 0px; }
.body-content { overflow: hidden; height: 100%; }
.modalDialog-content { left: calc(50% - 280px); width: 560px;  border-bottom: 2px solid rgb(160, 160, 160); }
.modalDialog-centered { display: flex; align-items: center; }
.dialog-icon { font-size: 24px; color: #333333; margin: 0px 5px 0px 0px; }
.alert-icon { float: left; width: 150px; height: 100%; line-height: 125px; color: #666666; font-size: 70px; text-align: center; }
.alert-icon:before { float: left; width: 150px; height: 100%; font-family: "Font Awesome 5 Free"; font-style: normal; content: "\f071"; }
.confirm-icon { float: left; width: 150px; height: 100%; line-height: 125px; color: #666666; font-size: 70px; text-align: center; }
.confirm-icon:before { float: left; width: 150px; height: 100%; font-family: "Font Awesome 5 Free"; font-style: normal; content: "\f071"; }
.dialog-text { float: right; display: flex; align-items: center; width: calc(100% - 150px); height: 100%; overflow-y: auto; font-size: 16px; font-weight: 1000; }
#dialogValue { max-height: 100%; }
#dialog-box .modalPage-title { font-weight: 700; }

.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body { width: 100%; height: calc(100% - 50px); padding: 0px; }
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body .modalPage-body-container { width: 100%;  height: 100%;  padding: 15px 15px 15px 15px; }

.tab-content .tab-pane { display: none !important; visibility: hidden; }
.tab-content .modalPage-tab { height: 100%; }
.tab-content > .active { display: block !important; visibility: visible; }

/* Modal Footer */
.modalPage-footer { padding: 0px; border: none; }














/* Modal */
.modal-open { overflow: auto; }
.modalBox { box-sizing: border-box; }
.modalBox .modalPage { display: block; overflow: hidden; padding: 0px; z-index: 999999; }
.modalBox .modalPage .modalPage-dialog { position: fixed; width: 100%; height: 100%; max-width: 100%; inset:0; margin: 0px auto 0px auto; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; }
.modalBox .modalPage .modalPage-dialog .modalPage-content { width: 100%; border: none; box-sizing: border-box; }

/* Modal Drag Resize */
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-resize-drag { position: absolute; display: none; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }

/* Modal Header */
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-header { display: block; height: 50px; line-height: 30px; padding: 12px 15px 8px 15px; border: none; border-radius: 0px; background-color: #006ecd; color: #ffffff; cursor: pointer; }
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-header .modalPage-title { display: inline-block; height: 30px; font-weight: 700; vertical-align: top; }

.modalPage-btn { box-shadow: 0px 0px 3px 0px #919191; }
.modalPage-close { float: right; width: 50px; height: 50px; line-height: 26px; box-sizing: border-box; padding: 1rem; margin: -1rem -1rem -1rem auto; font-size: 1.5rem; font-weight: 700; color: #ffffff; opacity: 1; text-shadow: 0 1px 0 #fff; }
.modalPage-close:hover { color: #ffffff; opacity: 0.75; }
.modalPage-close:active { outline: none; border: none; }
.modalPage-close:focus { outline:0; }

.modalPage-close .modalPage-close-text { font-size: 22px; }
.modalPage-zoom { float: right; width: 50px; height: 50px; line-height: 30px; box-sizing: border-box; margin: -0.9rem -1rem -1rem auto; font-size: 18px; border: none; background-color: transparent; color: #ffffff; cursor: pointer; }
.modalPage-zoom:hover { opacity: .75; }
.modalPage-zoom:active { outline: none; border: none; }
.modalPage-zoom:focus { outline:0; }

/* Modal Body */
/* Modal Tabs */
.modalPage-nav-tabs { position: relative;  border-bottom: 1px solid transparent; }
.modalPage-nav-tabs .tab-line { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border-bottom: solid 1px #0b2972 !important; z-index: 1; }
.modalPage-nav-tabs .modalPage-nav-item { display: inline-block; overflow: hidden; width: 180px; height: 34px; line-height: 34px; position: relative; padding: 0; margin: 0; text-align: center; box-sizing: border-box; cursor: pointer; z-index: 2 }
.modalPage-nav-tabs .modalPage-nav-item:nth-child(n+3) { margin-left: -1px; }
.modalPage-nav-tabs .modalPage-nav-item .nav-link { display: block; width: 100%; height: 34px; line-height: 34px; background-color: #e6f0f6 !important; color: #0b2972 !important;  border-radius: 0; border: 1px solid #0b2972; border-left: 1px solid #0b2972; text-align: left; text-decoration: none; padding: 0 17px 0 15px; box-sizing: border-box; font-size: 13px; letter-spacing: -1px; }
.modalPage-nav-tabs .modalPage-nav-item .active { border-bottom: transparent !important; border-radius: 0; background-color: #ffffff !important; color: #0b2972 !important; font-weight: 700; }

/* Modal Dialog */
.modalDialog { z-index:9999998; }
.modalDialog-dialog { display: flex; top: 0; left: 0; width: 100%; min-width: 100%; height: 100%; margin: 0px auto 0px auto; z-index:9999999; }
.modalDialog-body { width: 100%; height: 125px; padding: 0px; }
.body-content { overflow: hidden; height: 100%; }
.modalDialog-content { left: calc(50% - 280px); width: 560px;  border-bottom: 2px solid rgb(160, 160, 160); }
.modalDialog-centered { display: flex; align-items: center; }
.modal-icon { font-size: 18px; margin: 0px 5px 0px 0px; }
.dialog-icon { font-size: 18px; margin: 0px 5px 0px 0px; }
.alert-icon { float: left; width: 150px; height: 100%; line-height: 125px; color: #666666; font-size: 70px; text-align: center; }
.alert-icon:before { float: left; width: 150px; height: 100%; font-family: "Font Awesome 5 Free"; font-style: normal; content: "\f071"; }
.confirm-icon { float: left; width: 150px; height: 100%; line-height: 125px; color: #666666; font-size: 70px; text-align: center; }
.confirm-icon:before { float: left; width: 150px; height: 100%; font-family: "Font Awesome 5 Free"; font-style: normal; content: "\f071"; }
.dialog-text { float: right; display: flex; align-items: center; width: calc(100% - 150px); height: 100%; overflow-y: auto; font-size: 16px; font-weight: 1000; }
#dialogValue { max-height: 100%; }

.modalDialog-dialog .modalPage-header { display: block; height: 50px; line-height: 30px; padding: 12px 15px 8px 15px; border: none; border-radius: 0px; background-color: #0b2972; color: #ffffff; cursor: pointer; }
.modalDialog-dialog .modalPage-title { display: inline-block; height: 30px; font-weight: 700; vertical-align: top; }

.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body { width: 100%; height: calc(100% - 50px); padding: 0px; }
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body .modalPage-body-container { width: 100%;  height: 100%;  padding: 10px; }
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body img { width:100%; height: 100%; max-height: calc(768px - 50px); object-fit: scale-down; }
.modalBox .modalPage .modalPage-dialog .modalPage-content .modalPage-body .picture-editor { width:100%; height: 100%; min-height: calc(768px - 50px); max-height: calc(768px - 50px); }

.tab-content .tab-pane { display: none !important; visibility: hidden; }
.tab-content .modalPage-tab { height: 100%; }
.tab-content > .active { display: block !important; visibility: visible; }