/* * { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; } */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(../font/MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(../font/MaterialIcons-Regular.woff2) format('woff2'),
    url(../font/MaterialIcons-Regular.woff) format('woff'),
    url(../font/MaterialIcons-Regular.ttf) format('truetype');
}
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}
.md-16 { font-size:16px;}
.md-26 { font-size:26px;}
html,body,div,h1,h2,h3,h4,h5{margin:0;padding:0;}

*:focus { outline: none; }

html {background-color:#E5E5E5;}
body { background-color: #E5E5E5;}
    /* ::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px; background-color:var(--ui_gray02);} */

/* Color Theme Setting 
    * bg : Background
    * pd : Product
    * ci : Corporate Identity
*/
.default-theme {
    --primary: var(--ui_blue01);
    --txt-blk: var(--ui_gray12);
    --error: var(--ui_red01);
    --bg-color: #FFFFFF; 

    --bg-img: url('../images/login/login_bg.png');

    --pd-logo: url('../images/logo_prodiscovery_wh.png');
    --pd-width: 244px;
    --pd-height: 42px;
    
    --ci-logo: url('../images/logo_puzzledata_wh.png');
    --ci-width: 80px;
    --ci-height: 20px;
}

.no-drag { -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none;}

.wrap { position: relative; top: calc(50% - 425px); width:1280px; min-width: 1280px; min-height: 850px; margin: auto; background-color: var(--bg-color); border-radius: 20px; }
/* logo section */
.wrap .split-left { width:420px; color: var(--white); border-radius: 20px 0 0 20px; background-image: var(--bg-img); background-repeat: no-repeat; background-position: center; background-size: cover;}
.left-top, .left-bottom { width: 100%; height: 130px; text-align: center; vertical-align: middle;}
    .lang-wrap { position: relative; top: 40px; right: 20px; width:88px !important; font-size: 14px; height: 20px; line-height: 20px; vertical-align: middle;}
    .lang-wrap i { margin-right: 4px; padding: 2px 0; }
    .lang-wrap .lang-txt { margin-left: 4px; cursor: pointer; font-weight: 300; }
    .lang-wrap .lang-txt.selected { font-weight: 900; }

    .sub-txt { font-size: 12px; margin-bottom: 14px; }
    .product-logo { display: inlint-block; width: var(--pd-width); height: var(--pd-height); background-image: var(--pd-logo); background-repeat:no-repeat; background-position: center; background-size: var(--pd-width) auto; }
    .ci-logo { display: inline-block; width: var(--ci-width); height: var(--ci-height); background-image: var(--ci-logo); background-repeat: no-repeat; background-position: center; background-size: var(--ci-width) auto; cursor: pointer; }
/* login section */
.wrap .split-right { border-radius: 0 20px 20px 0; }
.login-wrap { height: 100%;}
.login-wrap .login-box { width: 310px;}
    .login-message-area { position: absolute; }
    .login-message { position: relative; top: -90px; width: 310px; height: 40px; background-color: var(--ui_gray02); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); border-radius: 4px; color: var(--ui_gray11); font-size: 12px; opacity: 0;}
    .login-message.animate { position: relative; top: -60px; width: 310px; height: 40px; background-color: var(--ui_gray02); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.05); border-radius: 4px; color: var(--ui_gray11); font-size: 12px; opacity: 1;}
    .login-message i { font-size: 14px; color: var(--error); margin-right: 12px;}
    .id-save-wrap { width: 310px; font-size: 14px; color: var(--txt-blk); margin-top: 8px; padding-left: 16px;}
    .id-save-btn, .id-save-btn > label { cursor: pointer;}
        .id-save-btn .checkbox-icon { color: var(--ui_gray08);}
        .id-save-btn .checkbox-icon.checked { color: var(--primary);}
    .button-wrap { width: 310px; margin-top: 36px;}
    .button-row-align { white-space: nowrap; }

.md-panel.md-tooltip { background-color: var(--txt-blk); color: var(--white); opacity: 0.8;}

/* input style class */
.input-container { display:block; box-sizing: border-box !important; max-width: 310px; width: 310px; color: var(--txt-blk); }
.input-container.invalid { border-color: var(--error) !important; color: var(--error) !important; }
    .mb-16 { margin-bottom: 16px;}
    .mb-20 { margin-bottom: 20px;} 
    .mb-28 { margin-bottom: 28px;}
    .mb-40 { margin-bottom: 40px;}
.input-container .input-label { font-size: 12px; font-weight: 500; margin-left: 16px; z-index: 10px;}
.input-container .input-box {width: 310px; vertical-align: middle; white-space: nowrap; position: relative; z-index: 20;}
    .input-default { width: 100%; display: block; box-sizing: border-box !important; margin-top: 4px; padding: 16px 48px 16px 16px; background-color: var(--white); border-radius: 4px; border: 1px solid var(--ui_gray06); font-size: 14px;}
    .input-default.ng-invalid.ng-touched.use-err-msg { border: 1px solid var(--error);}
    .input-default::placeholder { color: var(--ui_gray06); }
    .input-icon { position: absolute;  top: calc(50% - 12px); right: 12px; font-size: 16px; width: 24px; height: 24px; line-height: 24px; vertical-align: middle; text-align:center; cursor: pointer;}
.input-container .input-message-area { font-size: 12px; margin: -18px 0 0 16px; opacity: 0; z-index: 10;}
.input-container .input-message-area.animate { font-size: 12px; margin: 6px 0 0 16px; opacity: 1;}
    .input-message-area.error-msg { color: var(--error); height:18px; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; }
input[type="checkbox"] { display: none;}

.transition { transition: all 0.6s; }

/* button style class */
.round-btn { width: 100%; height: 48px; vertical-align: middle; background-color: var(--primary); color: var(--white); border: 0; border-radius: 30px; font-size: 14px; font-weight: bold;}
.round-btn.disabled {background-color: var(--ui_gray06); color:var(--ui_gray09);}
.underline-btn { width: 100px; height: 48px; line-height: 48px; vertical-align: middle; text-align: center; font-size: 14px; font-weight: 500; border: 0; background-color: transparent; color: var(--txt-blk); text-decoration: underline; cursor: pointer;}

.loading-container .loading i { position: absolute; top: calc(50% - 12px); left: calc(50% - 12px); margin-left:0; }
.loading-container .loading:before { background-color: white; opacity: 0.8; z-index: 30;}

@media screen and (max-height: 700px) {
    .login-form {
        top:0;
        margin-top:0;
    }
}