.title-decor-blue {position: absolute; top: -20px; left: -30px; background: url('../images/member/title-decor-blue.png'); width: 33px; height: 32px;}
.form-input-row {margin-bottom: 20px; position: relative;}
.form-input-col {width: 50%;}
.form-input-col {padding-left: 2.5%;}
.form-input-col:first-child {padding-right: 2.5%; padding-left: 0;}
input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
    width: 100%; background: #FFF; border-radius: 15px; border: 1px solid #d9f6fd; color: #46c1be; padding: 10px 30px; font-family: var(--nunitosans); font-size: 16px;
    box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -webkit-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75); -moz-box-shadow: 5px 5px 10px -5px rgba(60,60,60,0.75);
}
a {transition: var(--transition); color: var(--blue); text-decoration: none;}
a:hover {color: #46c1be;}
button {border: 1px solid var(--blue); background-color: var(--blue); color: #FFF; font-weight: bold; padding: 10px 15%; border-radius: 20px 10px 20px 10px; transition: var(--transition);}
button:hover {background-color: #FFF; color: var(--blue);}
button.green {background-color: #46c1be; border: 1px solid #46c1be;}
button.green:hover {background-color: #FFF; color: #46c1be;}
input:focus {outline: none;}

.form-input-group {position: relative;}
.invalid-feedback.position-absolute {position: absolute; top: 100%; left: 0; z-index: 1;}
.form-input-group.has-error {margin-bottom: 40px;}

.login-wrapper {position: relative; min-height: 100vh; width: 100%; background: url('../images/member/login-img.png') no-repeat right bottom; background-size: contain; background-color: #e6e6e9; padding-bottom: 80px;}
.register-wrapper {
    position: relative; min-height: 100vh; width: 100%; padding-bottom: 100px;
    background: rgb(174,231,241);
    background-image: url('../images/member/register-img.png');
    background-image: url('../images/member/register-img.png'), linear-gradient(90deg, rgba(174,231,241,1) 0%, rgba(134,212,221,1) 100%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right bottom;
}
.loginregister-gradient-light {background: url('../images/member/login-gradient-light.png') no-repeat 0 0; background-size: 100% 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0;}
.loginregister-content {position: relative; z-index: 1;}
.logo {padding-top: 25px; padding-left: 3%; margin-bottom: 80px; width: 100%; max-width: 250px;}
.logo a {display: block;}
.loginregister-img-mobile {margin-bottom: 30px; display: none;}
.loginregister-form-wrapper {padding-left: 10%;}
.loginregister-title {color: var(--blue); font-family: var(--domaine); font-size: 48px; font-weight: 500; position: relative; line-height: 1.1em; margin-bottom: 25px;}
.loginregister-form-wrapper {width: 50%;}
.login-remember-wrapper label {color: var(--blue)}
.login-remember-wrapper input[type="checkbox"] {border: 1px solid var(--blue); background: #FFF; width: 20px; height: 20px; border-radius: 10px; margin-right: 10px;}
.login-forgot-pass-wrapper {margin-bottom: 15px;}
.login-signup-wrapper {color: #46c1be; margin-bottom: 20px;}
.login-signup-wrapper a {font-weight: bold;}

/* .register-wrapper .logo {margin-bottom: 40px;} */
.to-login-page-link-wrapper {margin-bottom: 20px; color: #46c1be;}
.to-login-page-link-wrapper a {font-weight: bold;}
.btn-show-password {transition: var(--transition); width: 39px; height: 36px; background: url('../images/member/icon-eye.png') no-repeat 0 0; position: absolute; top: 5px; right: 10px; transform: scale(50%); cursor: pointer;}
.btn-show-password.show {background-image: url('../images/member/icon-eye-slash.png');}
.btn-show-password:hover {opacity: var(--imageopacity);}

.forgotpass-button-wrapper {display: flex; align-items: center; justify-content: space-between;}
.forgotpass-button-wrapper button {margin-left: 1%;}
.forgotpass-button-wrapper .btn-cancel {margin-right: 1%; margin-left: 0;}

@media screen and (max-width: 600px) {
    .login-wrapper, .register-wrapper {background-image: none;}
    .logo {margin-left: auto; margin-right: auto; margin-bottom: 20px;}
    .loginregister-form-wrapper {width: 100%; padding-right: 10%;}
    .loginregister-title {font-size: 46px;}
    .loginregister-img-mobile {display: block;}
}

@media screen and (max-width: 550px) {
    .loginregister-title {font-size: 44px;}
}

@media screen and (max-width: 500px) {
    .loginregister-title {font-size: 42px;}
}

@media screen and (max-width: 450px) {
    .loginregister-title {font-size: 40px;}
}

@media screen and (max-width: 400px) {
    .loginregister-title {font-size: 38px;}
}

@media screen and (max-width: 350px) {
    .loginregister-title {font-size: 36px;}
}