/* theme_02 */
:root {
    --primary: #3078e4;
    --primary-hover: #2165cb;
    --secondary: #E4E6EF;
    --login-text: #fff;
    --forgot-text: #333;
}


/* common */
.pm_list_header, .pm_list_header a, .pm_field_title, .pm_list_title, .title01, .tabletitle, a, a:link, a:active, a:focus {color: #2165cb; color: var(--primary-hover);}


/* login */
.login.theme, .login.theme a, .login.theme a:link, .login.theme a:hover, .login.theme a:focus {color: #fff; color: var(--login-text);}
.login.theme {
    background: no-repeat;
    /* background-image: linear-gradient(to bottom, rgba(57, 84, 67, 0.55) 0%, rgba(57, 84, 67, 0.7) 100%), url(login_bg.jpg); */
    background-image: url(login_bg.jpg);
    background-size: cover; background-position: 50% 0%;
    width: 100vw; height: 100vh; position: relative;
}
.login.theme .title {font-size: 1.2rem; color: #fff; color: var(--login-text);}
.login.theme .company_logo {width: 150px; position: absolute; top: 3rem; right: 3rem;}
.login.theme .software_logo {padding: 0.25rem 0; position: absolute; top: 3rem; left: 3rem;}
.login.theme .client_logo {width: 100%; margin: 0 auto 2rem; text-align: center; display: table;}
.login.theme .client_logo > * {width: 100%; display: table; table-layout: fixed;}
.login.theme .client_logo > * > * {height: 110px; display: table-cell; vertical-align: middle; text-align: center;}

.login.theme .login_wrap, .login.theme .forgot_wrap {width: 600px; position: fixed; top: 40%; left: 50%; transform: translate(-50%, -50%);}
.login.theme .login_wrap .title {margin: 0 0 1rem;}
.login.theme .login_wrap form {margin: 0 -0.25rem;}
.login.theme .login_wrap form > * {margin: 0 0.25rem; float: left; position: relative;}
.login.theme .login_wrap form:after {content: " "; display:block; clear:both;}
.login.theme .login_wrap input {border: none; width: 100%; padding: 0; line-height: 2.5rem;}
.login.theme .login_wrap input:focus {outline-color: #3078e4; outline-color: var(--primary); outline-offset: 1px; outline-style: solid;}
.login.theme .login_wrap .input_wrap {width: calc(41% - 0.5rem);}
.login.theme .login_wrap .input_wrap input {border: 1px solid #3078e4; border: 1px solid var(--primary); padding: 0 0 0 2.5rem;}
.login.theme .login_wrap .input_wrap label {color: #3078e4; color: var(--primary); position: absolute; top: 50%; left: 0.5rem; transform: translateY(-50%); cursor: text;}
.login.theme .login_wrap .input_wrap i {display: block;}
.login.theme .login_wrap .button_wrap {width: calc(18% - 0.5rem);}
.login.theme .login_wrap .button_wrap input {background: #3078e4; background: var(--primary); border: 1px solid #3078e4; border: 1px solid var(--primary); font-size: 1rem; color: #fff; text-indent: -1rem; cursor: pointer;}
.login.theme .login_wrap .button_wrap input:hover {background-color: #2165cb; background-color: var(--primary-hover);}
.login.theme .login_wrap .button_wrap label {font-size: 20px; color: #fff; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); transition: all 0.2s linear; cursor: pointer;}
.login.theme .login_wrap .button_wrap i {display: block;}
.login.theme .login_wrap .button_wrap:hover label {right: 0.5rem;}
.login.theme .login_wrap .hint {padding: 0.25rem 0 0; font-style: italic;}
.login.theme .login_wrap .prompt_wrap {padding: 0.5rem;}
.login.theme .login_wrap .askForgot_wrap {padding: 0.5rem;}
.login.theme .login_wrap .left_wrap {float: left;}
.login.theme .login_wrap .right_wrap {float: right;}
.login.theme .software_info {width: 100%; font-size: 0.875rem; position: absolute; bottom: 8rem; display: flex; justify-content: center;}
.login.theme .software_info > * {width: 50%; position: relative;}
.login.theme .software_info > *:nth-child(1) {padding: 0 4rem 0 2rem; line-height: 1.4;}
.login.theme .software_info > *:nth-child(2) {padding: 0 2rem 0 4rem;}
.login.theme .software_info > *:nth-child(2):after {content: " "; border-right: 1px solid #fff; height: 100%; position: absolute; top: 0; left: 0;}
.login.theme .software_info .c-left {display: flex; flex-direction: row-reverse;}
.login.theme .software_info .c-left > * {max-width: 460px;}
.login.theme .software_info .title {margin: 0 0 2rem;}
.login.theme .software_info ul {margin: 0 -1rem;}
.login.theme .software_info ul li {padding: 0 1rem; float: left; text-align: center;}
.login.theme .software_info ul:after {content: " "; display:block; clear:both;}
.login.theme .software_info ul li i {margin: 0 0 0.5rem; display: block; font-size: 40px;}

.login.theme .forgot_wrap {top: 50%;}
.login.theme .forgot_wrap .forgot_box {background: #fff; border-radius: 8px; width: 400px; margin: 0 auto; padding: 1.5rem; color: #333; color: var(--forgot-text);}
.login.theme .forgot_wrap .title {margin: 0 0 1rem; color: #333; color: var(--forgot-text); text-align: center;}
.login.theme .forgot_wrap input {border: none; width: 100%; padding: 0; line-height: 2.5rem;}
.login.theme .forgot_wrap .input_wrap {width: 100%; margin: 0 0 0.5rem;}
.login.theme .forgot_wrap .input_wrap input {border: 1px solid #333; border: 1px solid var(--forgot-text); padding: 0 0.5rem; width: 100%; display: block;}
.login.theme .forgot_wrap .input_wrap label {padding: 0.25rem 0; font-weight: bold; display: block;}
.login.theme .forgot_wrap .button_wrap {margin: 1rem 0 0;}
.login.theme .forgot_wrap .button_wrap input {background: #3078e4; background: var(--primary); border: 1px solid #3078e4; border: 1px solid var(--primary); font-size: 1rem; color: #fff; line-height: 3rem; cursor: pointer;}
.login.theme .forgot_wrap .button_wrap input:hover {background-color: #2165cb; background-color: var(--primary-hover);}
.login.theme .forgot_wrap .policy_wrap {margin: 0; position: relative;}
.login.theme .forgot_wrap .policy_wrap > span {margin: 1rem 0 0; padding: 0.5rem 0 0; display: block; position: relative;}
.login.theme .forgot_wrap .policy_wrap > span:before {content: " "; background: #999; width: 100%; height: 1px; position: absolute; top: 0;}
.login.theme .forgot_wrap .hint {padding: 0.25rem 0 0; font-style: italic;}

.login.theme .back_wrap {width: 400px; margin: 2rem auto 0; font-size: 1rem; height: 24px; line-height: 24px; text-align: center;}
.login.theme .back_wrap i {display: inline-block; vertical-align: middle;}

/* banner */
.banner.theme {background:#fff; position: relative;}
.banner.theme figure {
    background: url(../theme02/banner_client.jpg); background-size: cover; background-position: 100% 0%; background-repeat: no-repeat;
    height: 80px; margin: 0; display: flex; /*flex-direction: row-reverse;*/
}
/*.banner.theme figure {background: url(banner_bg_1.jpg); background-size: 74%; background-position: 100% 76%; height: 80px; margin: 0; display: flex;}*/
.banner.theme figure img {display: block;}
.banner.theme .top {width: 100%; height: 100%; position: absolute;}
.banner.theme .top .info {height: 100%; padding: 0 1rem; display: flex; flex-direction: column;}
.banner.theme .top .info > * {flex-grow: 1; display: flex; flex-direction: column; justify-content: center;}
.banner.theme .top .info > *:first-child {justify-content: flex-end; display: none;}
.banner.theme .top .info > *:last-child {flex-grow: 2; margin: -0.5rem 0 0;}
.banner.theme .top .title {font-size: 1rem; font-weight: bold; color: #3078e4; color: var(--primary); display: none;}
.banner.theme .top .logo {position: absolute; top: 50%; right: 1rem; bottom: 0; transform: translateY(-50%);}
.banner.theme .top .logo img {width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; display: block;}
.banner.theme .top .logo .company_logo {width: 100px; display: none;}


/* sidebar */
.sidebar {background-color: #3078e4; background-color: var(--primary);}
.sidebar a, .sidebar a:active, .sidebar a:link, .sidebar a:hover, .sidebar a:focus {color: #fff;}
.sidebar .sidetop:after {background-color: #3078e4; background-color: var(--primary);}
.sidebar .statichoverstyle {background-color: #2165cb; background-color: var(--primary-hover);}

/* p-title */
.p-tilte {color: #3078e4; color: var(--primary);}

/* IE 8,9 and 10 */
@media screen\0 {
    /* .login.theme {background-image: url(theme02/login_bg_green.jpg);} */
    .login.theme .login_wrap input {height: 40px; line-height: 40px;}
    .login.theme .forgot_wrap input {height: 40px; line-height: 40px;}
    .login.theme .forgot_wrap .button_wrap input {height: 50px; line-height: 50px;}
}

/* < 1023 */
@media only screen and (max-width: 63.9375em) {
    .login.theme .software_info ul {display: flex;}
    .login.theme .software_info > *:nth-child(1) {padding: 0 2rem;}
    .login.theme .software_info > *:nth-child(2) {padding: 0 2rem;}
}
/* mobile all */
@media only screen and (min-width : 0em) and (max-width : 47.9375em) {
    /* login */
    .login.theme {min-height: 667px;}
    .login.theme input {-webkit-appearance: none;}
    .login.theme input:focus {outline: none}
    .login.theme .company_logo {width: 100px; top: 1rem; right: 1rem;}
    .login.theme .software_logo {padding: 6rem 0 0; text-align: center; position: static;}
    .login.theme .client_logo {width: 70%; margin: 1rem auto;}
    .login.theme .login_wrap {width: 100%; position: static; transform: none;}
    .login.theme .login_wrap .title {margin: 0 0 1rem; padding: 0 2rem;}
    .login.theme .login_wrap form {margin: 0; padding: 0 2rem;}
    .login.theme .login_wrap form > * {margin: 0; float: none;}
    .login.theme .login_wrap .input_wrap {width: 100%; margin: 0 0 1rem;}
    .login.theme .login_wrap .button_wrap {width: 100%;}
    .login.theme .login_wrap .button_wrap input {text-indent: 0;}
    .login.theme .software_info {bottom: 6rem; display: none;}
    .login.theme .forgot_wrap {width: 100%; position: static; transform: none;}
    .login.theme .forgot_wrap .forgot_box {width: 80%; padding: 1rem;}
    .login.theme .forgot_wrap .title {margin: 0 0 0.5rem; font-size: 1rem;}
    .forgot.login.theme {height: initial;}
    .forgot.login.theme .forgot_wrap {padding: 0 0 10rem;}
    .forgot.login.theme .software_logo {padding: 1.25rem 1.5rem 3rem; text-align: left; font-size: 1rem;}

    /* nav */
    .control .ui-menu > div {background: #fff; background: var(--login-text);}
    .control.active .ui-menu > div {background: #fff;}
    
    /* banner */
    .banner.theme figure {background: url(../theme02/m_banner_client.jpg); background-size: cover; background-position: 100% 0%; background-repeat: no-repeat;}
    .banner.theme .top .info {align-items: flex-end;}
    .banner.theme .top .info > *:last-child {margin: 0;}
    .banner.theme .top .title {font-size: 1.5rem; color: #fff;}
    
    /* sidebar */
    .sidebar .level1 {padding: 0.5rem 5px;}
}
/* iphone 5 portrait */
@media only screen and (min-width : 0em) and (max-width : 20em) and (orientation: portrait) {
    .login.theme .software_logo {font-size: 1rem;}
    .login.theme .client_logo {margin: 0 auto;}
    .login.theme .client_logo > * {height: 120px;}

}