* { 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;}
    
    * { font-family: 'Spoqa Han Sans'; }
    html {background-color:#f4f4f4;}
    body { background-color:#f4f4f4;}
        /* ::-webkit-scrollbar { height: 16px; overflow: visible; width: 16px; background-color:#fafafa;} */
        
    .wrap {position:relative;width:1200px;margin: 0 auto; top:30px; background-color:#fff; border:1px solid #e4e4e4;}
    .wrap:before {position:absolute; content:''; width:100%; top:30px; right:0; bottom:0;background-image:url('../images/login/login_background.png'); background-repeat:no-repeat; background-position:100% 100%;}
    .wrap:after  {position:absolute; content:''; width:700px; top:30px; right:0; bottom:0;background-color:#fff; opacity:0.3;filter:alpha(opacity=30);}
        
    .login-wrap {position:relative; min-height:750px;}
    .login-form-wrap { position:relative; background-color:#fff;z-index:1; width:380px; padding-left:90px; padding-top:130px;}
    .login-form-wrap .licenseTitle { text-align : center;}
    .login-form-wrap h2 {margin:0;padding-bottom:10px;}
    .login-form-wrap .hello {text-align:center;display:block;color:#15191d;font-size:20px;font-weight:normal;}
        .login-form-wrap .welcome {
            text-align:center;
            display:block;
            color:#0d77cc;
            font-size:0;
            font-weight:bold;
            background-image:url('../images/prodiscovery_bold.png');
            background-repeat:no-repeat;
            background-size:cover;
            /* text-indent:-9999px; */
            width:314px;
            height:54px;
            margin: 0 auto;
            margin-top:10px;
        }
        
        p.product {color:#f8f9fa; font-size:11px; width:230px; height:48px; margin-left:20px; margin-top:30px; line-height:1.45; text-align:center; box-sizing:border-box;}
        div.image {width:258px; margin-top:30px; margin-left:5px;}
        div.contactus {width:230px; text-align:center; margin-top:30px; margin-left:20px;}
        a.contactus {background-color:rgb(26,121,201); border-radius:20px; display:inline-block; padding: 3px 20px; color:#fff; text-decoration:none; font-size:10px;}
        
        .login-btn {
            background-color:#0d77cc; border-radius:20px; display:inline-block; width:240px; height:40px; color:#f8f9fa; text-decoration:none; font-size:18px; border:solid 1px #f8f9fa;
        }
        
        .account-form {font-size:14px;}
        .account-form input {border-color:rgb(168,220,253);}

        .submit-btn-wrap{display:block;text-align:center; margin-top:50px;}    
        
        .idsave-wrap{margin-top:20px;}
        
        .account-form .fa-lg {font-size:0.75em;}
        .account-form .fa-stack {line-height:1.9;}
        
        .lang {position:absolute; top:20px; left:90px; border:1px solid #868e96; border-radius:30px; width:95px; text-align:center; height:20px; line-height:16px; overflow:hidden;}
        .lang select {width:80px; height:18px; border:0; color:#868e96; font-size:12px; background-color:#fff; vertical-align:middle;}
        .lang select:focus {box-shadow:none;outline:none;}
        
        .label-id, .label-pass { font-size:14px; color:#15191d; margin-top:30px; display:block;}
        .input-wrap input {width: 374px; height: 40px; background-color: #ffffff; border: solid 1px #61656a; padding:10px 25px; box-sizing:border-box;outline:none;box-shadow:none;}
        
        .id-wrap {height:41px;}
        .id-wrap .material-icons {position:absolute;line-height:41px; width:30px; text-align:center; color:#868e96;}
        .pass-wrap { height:41px;}
        .pass-wrap .material-icons {position:absolute;line-height:41px; width:30px; text-align:center; color:#868e96;}
        
        .login-wrap md-input-container.md-input-focused .md-input,
        .login-wrap md-input-container .md-input.ng-invalid.ng-dirty,
        .login-wrap md-input-container .md-input {width: 374px; height: 40px; background-color: #ffffff; border: solid 1px #61656a; padding:10px 25px;}
        .login-wrap md-input-container {margin:0;}
        .login-wrap md-input-container.pass-wrap .md-input-messages-animation { position:absolute;top:40px; text-align:right; line-height:16px;}
        .login-wrap md-input-container .md-input-message-animation {line-height:16px;}
        
        .forgot {font-size:12px; text-align:center; display:block; color:#61656a; margin-top:20px;}
        .forgot span {cursor:pointer; padding:0 5px;}
        .line {text-align:center; margin-top:40px;}
        .line div {position:relative;display:inline-block; top:-16px; width:50px; color:#868e96; font-size:12px; text-align:center; background-color:#fff;}
        .line hr {border-width: 1px; border-style: solid; background: none; border-bottom:0; border-color:#ced4da;}
        
        .ci {display:block;height:24px;position:absolute;}
        .ci .img {display:inline-block;position:relative; background-image:url('../images/PuzzleData_e.png'); background-repeat:no-repeat; background-color:transparent; background-size:120px auto; background-position:0 50%; width:150px;height:26px; cursor:pointer;}

        .contact {float:right; text-align:center;display:inline-block; vertical-align:top; font-size:12px; color:#61656a; line-height:26px;}
        .contact a {margin:0 10px;}
        
        .loading-container {
            position: relative;
        }
        .loading-container .loading:before, .loading-container .loading:after {
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            min-height: 50px;
            min-width: 50px;
        }
        .loading-container .loading:before {
            background-color: white;
            opacity: 0.8;
        }
        .loading-container .loading i {position:absolute; top:45%; margin-left:45%; z-index: 999;}
                
        @media screen and (max-height: 700px) {
            .login-form {
                top:0;
                margin-top:0;
            }
        }