@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap);

#main_section {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: url("/img/bg_login3.jpg") no-repeat 50%;
    background-size: cover
}

#main_section, #main_section #form_section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

#main_section #form_section {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 880px;
    height: 480px;
    background: hsla(0, 0%, 100%, .95);
    border-radius: 8px;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, .2)
}

#main_section #form_section #logo_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 480px;
    height: 100%
}

#main_section #form_section #logo_box img {
    width: 280px;
    max-width: 280px;
    height: 280px;
    max-height: 280px
}

#main_section #form_section #form_box {
    width: calc(100% - 480px)
}

#main_section #form_section #form_box, #main_section #form_section #form_box .form_box_content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

#main_section #form_section #form_box .form_box_content {
    width: 290px;
    padding-top: 12px
}

#main_section #form_section #form_box .form_box_content h1 {
    margin-top: 0;
    margin-bottom: 35px;
    font: 30px/36px Open Sans, sans-serif;
    font-weight: 700;
    color: #150f53
}

#main_section #form_section #form_box .form_box_content h1 span {
    display: block
}

#main_section #form_section #form_box .form_box_content form .input_box {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-bottom: 26px;
    overflow: hidden
}

#main_section #form_section #form_box .form_box_content form .input_box.has-error input {
    -o-border-image: -o-linear-gradient(left, #ff5600 0, #ffba00 100%) 100% 1;
    border-image: -webkit-gradient(linear, left top, right top, from(#ff5600), to(#ffba00)) 100% 1;
    border-image: linear-gradient(90deg, #ff5600 0, #ffba00) 100% 1
}

#main_section #form_section #form_box .form_box_content form .input_box label {
    margin-bottom: 2px;
    font: 12px/12px Open Sans, sans-serif;
    font-weight: 600;
    color: #150f53;
    text-transform: uppercase;
    opacity: .8
}

#main_section #form_section #form_box .form_box_content form .input_box .help-block {
    position: absolute;
    right: 0;
    width: auto;
    padding: 0;
    margin: 0;
    font: 11px/12px Open Sans, sans-serif;
    color: #ff5600;
    white-space: nowrap
}

#main_section #form_section #form_box .form_box_content form .input_box input {
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    padding: 3px 0 5px;
    font: 14px/14px Open Sans, sans-serif;
    color: #150f53;
    background: none;
    border: 1px;
    border-bottom: 1px solid;
    border-radius: 0;
    -o-border-image: -o-linear-gradient(left, #008eff 0, #00f5d3 100%) 100% 1;
    border-image: -webkit-gradient(linear, left top, right top, from(#008eff), to(#00f5d3)) 100% 1;
    border-image: linear-gradient(90deg, #008eff 0, #00f5d3) 100% 1;
    -webkit-box-shadow: none;
    box-shadow: none
}

#main_section #form_section #form_box .form_box_content form .input_box input::-webkit-input-placeholder {
    color: rgba(21, 15, 83, .5)
}

#main_section #form_section #form_box .form_box_content form .input_box input::-moz-placeholder {
    color: rgba(21, 15, 83, .5)
}

#main_section #form_section #form_box .form_box_content form .input_box input:-ms-input-placeholder {
    color: rgba(21, 15, 83, .5)
}

#main_section #form_section #form_box .form_box_content form .input_box input:-moz-placeholder {
    color: rgba(21, 15, 83, .5)
}

#main_section #form_section #form_box .form_box_content form .input_box input:focus, #main_section #form_section #form_box .form_box_content form .input_box input:hover {
    padding: 4px 0;
    border-width: 3px;
    outline: none
}

@-webkit-keyframes autofill {
    to {
        color: #150f53;
        background: rgba(0, 0, 0, 0)
    }
}

#main_section #form_section #form_box .form_box_content form .input_box input:-webkit-autofill {
    -webkit-animation-name: autofill;
    -webkit-animation-fill-mode: both
}

#main_section #form_section #form_box .form_box_content form input[type=submit] {
    width: 100%;
    height: 40px;
    margin: 2px 0 18px;
    font: 14px/14px Open Sans, sans-serif;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    background: -webkit-gradient(linear, left top, right top, from(#008eff), to(#00f5d3));
    background: -o-linear-gradient(left, #008eff 0, #00f5d3 100%);
    background: linear-gradient(90deg, #008eff 0, #00f5d3);
    border: none;
    border-radius: 4px;
    outline-color: #209cff;
    -webkit-box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .5);
    box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .5);
    -webkit-transition: -webkit-box-shadow .25s;
    transition: -webkit-box-shadow .25s;
    -o-transition: box-shadow .25s;
    transition: box-shadow .25s;
    transition: box-shadow .25s, -webkit-box-shadow .25s
}

#main_section #form_section #form_box .form_box_content form input[type=submit]:hover {
    cursor: pointer;
    border: 0;
    -webkit-box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .7);
    box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .7)
}

#main_section #form_section #form_box .form_box_content form input[type=submit]::-moz-focus-inner {
    border: 0
}

#main_section #form_section #form_box .form_box_content form input[type=submit]:focus {
    outline: none;
    -webkit-box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .87);
    box-shadow: 0 2px 14px 0 rgba(9, 193, 234, .87)
}

#main_section #form_section #form_box .form_box_content form input[type=submit]:active {
    -webkit-box-shadow: 0 1px 4px 0 rgba(9, 193, 234, .3);
    box-shadow: 0 1px 4px 0 rgba(9, 193, 234, .3)
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password .select_box {
    position: relative
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password .select_box:hover:before {
    border-color: #150f53 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password .select_box select {
    display: block;
    height: 20px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    padding: 2px 4px;
    margin-left: -4px;
    font: 12px/16px Open Sans, sans-serif;
    font-weight: 600;
    color: rgba(21, 15, 83, .6);
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 2px;
    -webkit-transition: color .25s;
    -o-transition: color .25s;
    transition: color .25s
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password .select_box select:hover {
    color: #150f53
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password .select_box select:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 142, 255, .5);
    box-shadow: 0 0 0 3px rgba(0, 142, 255, .5)
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password a {
    padding: 2px 4px;
    margin-right: -4px;
    font: 12px/16px Open Sans, sans-serif;
    font-weight: 600;
    color: rgba(21, 15, 83, .6);
    text-decoration: underline;
    border-radius: 2px;
    -webkit-text-decoration-color: rgba(21, 15, 83, 0);
    text-decoration-color: rgba(21, 15, 83, 0);
    -webkit-transition: opacity .25s, -webkit-text-decoration-color .25s;
    transition: opacity .25s, -webkit-text-decoration-color .25s;
    -o-transition: opacity .25s, text-decoration-color .25s;
    transition: opacity .25s, text-decoration-color .25s;
    transition: opacity .25s, text-decoration-color .25s, -webkit-text-decoration-color .25s
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password a:hover {
    color: #150f53;
    text-decoration: underline;
    -webkit-text-decoration-color: #150f53;
    text-decoration-color: #150f53
}

#main_section #form_section #form_box .form_box_content #line_language_forgot_password a:focus {
    outline: none;
    -webkit-box-shadow: 0 0 0 3px rgba(0, 142, 255, .5);
    box-shadow: 0 0 0 3px rgba(0, 142, 255, .5)
}

#main_section #form_section #form_box .form_box_content .login-more-info {
    font: 12px / 16px Open Sans, sans-serif;
    font-weight: 600;
    color: rgba(21, 15, 83, .6);
    text-decoration: underline;
    border-radius: 2px;
    -webkit-text-decoration-color: rgba(21, 15, 83, 0);
    text-decoration-color: rgba(21, 15, 83, 0);
}
#main_section #form_section #form_box .form_box_content .mb-10 {
    margin-bottom: 10px;
}
