.popup-login {
opacity: 0;
visibility: hidden;
transition: all .5s;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: auto;
z-index: 1101;
background: #FAF9F6;
max-width: 706px;
}
.popup-login.failed,
.popup-login.show {
opacity: 1;
visibility: visible;
}
.popup-login .border {
padding: 64px 71px;
background: #FAF9F6;
position: relative;
}
.popup-title {
margin-bottom: 10px;
}
.popup-description p {
line-height: 25px;
}
.popup-login form {
padding-top: 29px;
position: relative;
}
.popup-login form p {
margin-top: 16px;
}
.popup-login form p.login-remember {
margin-top: 21px;
margin-bottom: 0 !important;
}
.popup-login label {
font: normal 500 17px/23px 'Hind';
align-items: center;
letter-spacing: .015em;
color: #001689;
}
.popup-login form input[type="text"], .popup-login form input[type="password"] {
display: flex;
flex-direction: row;
align-items: center;
padding: 10px 14px;
gap: 8px;
height: 46px;
background: #FFF;
border: 1px solid #E3E3E3;
}
.popup-login:before {
content: "";
background-color: #000;
display: block;
position: fixed;
width: 100vw;
height: 100vh;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
opacity: .8;
}
p.login-username, p.login-password {
margin-bottom: 17px;
}
.popup-login form p.login-remember label {
font-size: 14px;
line-height: 17px;
letter-spacing: .01em;
color: #282828;
margin-bottom: 6px;
}
.popup-login a.forgot-password {
position: absolute;
right: 0;
bottom: 68px;
font-family: 'Hind';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
letter-spacing: 0.01em;
}
.popup-login input[type=submit] {
width: 100%;
height: 46px;
transition: all .5s;
}
.popup-login .social-signup {
margin-top: 29px;
display: grid;
position: relative;
}
.popup-login .social-signup strong {
position: relative;
text-align: center;
width: 100%;
display: block;
min-height: 24px;
}
.popup-login .social {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.popup-login #xs-social-login-container {
margin: 0;
margin-top: 18px;
padding-bottom: 28px;
}
.popup-login .social-signup strong:before {
content: '';
display: block;
width: 100%;
max-width: 905px;
border-top: 1px solid #001689;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 0;
}
.popup-login .social-signup strong span {
margin: 0 auto;
font: normal 500 17px/23px 'Hind';
padding: 0 41px;
letter-spacing: .015em;
color: #001689;
background-color: #FAF9F6;
transform: none;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.popup-login .login-section {
font: normal 400 14px/17px 'Hind';
letter-spacing: .01em;
color: #282828;
text-align: center;
}
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--facebook {
height: 40px;
width: 40px;
margin-left: 17.5px;
background: transparent url(//jebgroup.cn/wp-content/themes/jeb/assets/images/facebook.svg) no-repeat;
background-position: center;
}
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--facebook i {
display: none;
}
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--google {
height: 40px;
width: 40px;
margin-right: 17.5px;
background: transparent url(//jebgroup.cn/wp-content/themes/jeb/assets/images/google.svg) no-repeat;
background-position: center;
}
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--google i {
display: none;
}
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--facebook span.xs-login__item--icon,
.popup-login .social-signup a.xs-login__item.wslu-color-scheme--google span.xs-login__item--icon {
background: transparent!important;
display: none;
}
.popup-login .social-signup #xs-social-login-container .xs-login {
display: flex;
min-width: 115px;
grid-gap: 0;
}
.popup-login .border > .close {
background-color: transparent;
position: absolute;
right: 18px;
top: 21px;
border: none;
padding: 0;
width: 37px;
height: 37px;
}
.popup-login .border > .close:hover {
opacity: .7;
}
.popup-login  .border > .close:before,
.popup-login .border > .close:after {
content: '';
height: 1px;
width: 100%;
display: block;
border-top: 2px solid #001689;
position: absolute;
}
.popup-login .border > .close:before {
transform: rotate(45deg);
top: 17px;
}
.popup-login .border > .close:after {
transform: rotate(135deg);
top: 18px;
}
.popup-login input[type="checkbox"] {
margin-right: 5px;
}
.popup-login .error-message {
margin-top: 21px;
display: inline-block;
font-weight: 500;
font-size: 14px;
line-height: 17px;
padding: 10px 25px 10px 40px;
background: rgba(17, 199, 0, 0.1) url(//jebgroup.cn/wp-content/themes/jeb/assets/images/Vector-10.svg) no-repeat;
background-position: left 10px center;
position: relative;
}
.popup-login .error-message {
background: #fbc6c6 url(//jebgroup.cn/wp-content/themes/jeb/assets/images/error.svg) no-repeat;
background-size: 22px;
background-position: left 10px center;
padding-right: 15px;
}
.popup-login .error-message .close {
background-image: url(//jebgroup.cn/wp-content/themes/jeb/assets/images/close-error.svg) !important;
background-color: transparent;
border: none;
background-repeat: no-repeat;
font-size: 0;
background-position: 10px 8px;
padding: 0;
width: 40px;
height: 25px;
}
.popup-login form input[type="checkbox"]:after {
left: 3px;
top: -1px;
}
.popup-login .border {
max-height: calc(100vh - 100px);
overflow: auto;
}
@media (max-width: 1024px) {
.popup-login .border {
padding: 25px
}
}
@media (max-width: 806px) {
.popup-login {
max-width: calc(100vw - 40px);
}
.popup-login .border {
max-height: calc(100vh - 80px);
}
.popup-login .border > .close{
width: 30px;
height: 30px;
}
.popup-login form {
padding-top: 15px;
}
.popup-title {
margin-bottom: 20px;
}
}
@media (max-width: 575px) {
.popup-login .social-signup strong span{
padding: 0 25px
}
}
@media (max-width: 370px) {
.popup-login .social-signup strong {
min-height: 50px;
}
}
@media (max-width: 355px) {
.popup-login form p.login-remember {
margin-bottom: 50px !important;
}
.popup-login a.forgot-password {
right: auto;
left: 0;
}
}