﻿
.header-wrapper {padding: 26px 0px;}
.activate-card.pre-active {border: 1px solid #00497A;border-radius: 6px;padding:4px 9px 4px 10px;height:42px;}
.activate-card.pre-active a {text-decoration: none;color: #00497A;}
header .cta-sec .section-icon {background: rgba(0, 73, 122, 0.10);}
header .header-right svg path {filter: brightness(0) saturate(100%) invert(12%) sepia(100%) saturate(3430%) hue-rotate(191deg) brightness(91%) contrast(100%);}
.login-page-sec:after {content:"";position: absolute;height: 100%;right: 0;background: url(https://nationscdn.azureedge.net/otc-container/images/login-bg-icon.svg) no-repeat bottom;background-size: 100%;bottom: 0;width: 460px;}
.login-page-sec .unified-benefits-sec{margin: 50px 0 0;}
.login-page-sec .unified-benefits-sec h3 {font-size: 40px;font-style: normal;font-weight: 600;line-height: normal;color: #fff;margin: 0px 0 6px;}
.login-page-sec .unified-benefits-list{display:flex;margin:0px 0px 24px;position: relative;z-index: 9; align-items: center;}
.login-page-sec .unified-benefits-img {width: 64px;height: 64px;}
.login-page-sec .unified-benefits-sec h6 {font-size: 20px;font-style: normal;font-weight: 400;line-height: 24px;margin: 0 0 78px;color: #fff;}
.login-page-sec .unified-benefits-cont h4 {font-size: 24px;font-weight: 600;line-height: normal;color: #fff;margin:0px;}
.login-page-sec .unified-benefits-cont p {font-size: 24px;font-style: normal;font-weight: 400;line-height: normal;color: #fff;opacity: 0.7; margin:0px;}
.login-page-sec .unified-benefits-cont {margin-left: 20px;}
.login-page-sec {background:#00497A;padding:64px 120px;position:relative;}
.login-page-sec .unified-benefits-sec:after {position: absolute;content: "";background: url(https://nationscdn.azureedge.net/otc-container/images/login-bg-shade.png) no-repeat;width: 947px;height: 900px;flex-shrink: 0;background-size: 100%;    top: 1%;left: 7%;}
.login-page-sec .login-form {padding: 74px;border-radius: 32px;background: #FFF;max-width: 520px;margin: 0 auto; position:relative; z-index:9;}
.login-page-sec .login-page-sec .nb-logo-login {width: 80.043px;height: 80px;}
.login-page-sec .member-title.text-center.text-lg-start {display: none;}
.login-page-sec .login-form h1:after {display: none;}
.login-page-sec .login-form .custom-form {width: 100%;}
.login-page-sec .login-form h1 {font-size: 24px;font-weight: 600;line-height: normal;display: block;margin:24px 0px 6px;}
.login-page-sec .login-form .member-record {margin-bottom: 0;}
.login-page-sec .login-form .create {margin-top: 22px;}
.login-page-sec .new-user-registration.text-center {margin: 16px 0 0;padding: 0;border: 0;}
.login-page-sec .position-absolute.info.memberid.cursor-pointer {right: 18px;}
.login-page-sec .registerFormBlock .form-control {color: var(--woodsmoke-color);line-height: 22px;height: 48px;border: 0;padding: 16px;letter-spacing: 0.3px;font-weight: 400;box-shadow: none;border-style: solid;transition: none;border-radius: 6px;border-bottom: 2px solid #B1B9C1;background: #F0F3F6; font-size:18px;}
.login-page-sec .registerFormBlock .form-control:hover {border-top: 0px;border-left:0px;border-right:0px;background-color: #F0F3F6;border-bottom: 2px solid #B1B9C1;}
.login-page-sec .registerFormBlock .form-control:focus {border-bottom: 2px solid var(--secondary-blue-dark);background-color: #F0F3F6;box-shadow: none;border-top: 0px;border-left: 0px;border-right: 0px;}
.login-page-sec .new-user-registration.text-center {display: flex;align-items: center;justify-content: center;}
.login-page-sec .login-form .new-user-registration p {margin-bottom: 0;margin-right: 4px;font-size:16px; font-weight:600;}
.login-page-sec .login-form .icon-border-btn{border: 0;padding: 0;font-size: 17px;font-weight: 600;text-decoration: underline;min-width:auto;background:none; height:auto; line-height:normal; min-height:auto; color:#255798;}
.login-page-sec .login-form .create svg {display: none;}
.login-page-sec  .registerFormBlock .form-group:last-child {margin: 0;}
.login-page-sec .registerFormBlock .form-group input:not(:placeholder-shown) ~ label, .login-page-sec .registerFormBlock .form-group input:-webkit-autofill ~ label{top: -26px;left: 0;color: #212121;letter-spacing: 0.3px;line-height: normal;font-weight: 400; font-size:18px;}
.login-page-sec .registerFormBlock .form-control:focus ~ label, .login-page-sec .form-control:not(:placeholder-shown) ~ label {top: -26px;color: #212121;font-size: 18px;letter-spacing: 0.3px;line-height: 18px;background: var(--white-color) !important;margin-bottom: 0;padding: 0px 3px;left: 0;}
.login-page-sec .registerFormBlock .form-group {padding-bottom: 12px;position: relative;margin: 0 0 16px;}
.login-page-sec .registerFormBlock .form-group label {font-size: 16px !important;padding-bottom:6px; font-weight:400;}
.login-page-sec .registerFormBlock .position-absolute.info.memberid.cursor-pointer {top: 36px;}
.login-page-sec .registerFormBlock .position-absolute.info.memberid.cursor-pointer img {width: 22px;height: 22px;}
.login-page-sec .registerFormBlock .registerFormBlock .password-icon-close:after {right: 12px;top: 50px;}
.login-page-sec .registerFormBlock .password-icon-close:after {top: 51px;}
.login-page-sec .registerFormBlock input[type="checkbox"] + .box:after {border-radius: 2px;}
.login-page-sec .registerFormBlock .password-icon-open:after{top: 51px;}
.login-page-sec .registerFormBlock .form-error:after {top: 49px;}
header .header-right .language-preference .section-icon {background: transparent;margin: 0;color: var(--secondary-blue-dark);min-width: 72px;display: flex;align-items: center;justify-content: center;}
.custom-popup.member-id-popup .modal-body {border-radius: 0 0 32px 32px;}
.custom-popup.member-id-popup p {color: #212121;margin: 0px 0 12px;}
.custom-popup.member-id-popup .member-card-img {max-width: 253.333px;max-height: 152px;margin-right: 60px;margin-bottom: 32px;border-radius: 5.923px;border: 0.987px solid var(--Grayscale-Athens-gray, #E9ECF0);background: #FFF;padding: 4px 14px;}
.custom-popup.member-id-popup .member-card-img img {max-width: 100%;}
.custom-popup.member-id-popup .member-card {display: flex;position:relative;}
.custom-popup.member-id-popup .member-card-text{margin:28px 0px 0px;}
.custom-popup.member-id-popup .slimScrollDiv{height:190px !important; overflow:auto;}
.custom-popup.member-id-popup .member-card-sec.slimscroll {height: 100% !important;}
.custom-popup.member-id-popup .member-card:after {position: absolute;content: "";height: 36px;width: 195px;background: url(https://nationscdn.azureedge.net/otc-container/images/member-ID-line.svg) no-repeat bottom;left: 110px;top: 35px;}
.custom-popup.member-id-popup .modal-header {border-radius: 32px 32px 0 0;}
.modal{z-index:99999999999 !important;}
footer {background:var(--white-color) !important;}
.footer-sec {font-size: 20px;font-style: normal;font-weight: 400;line-height: 29.333px;letter-spacing: 0.4px;color: #fff;text-align: center;padding: 46px 0px 24px;}


@media (min-width: 1800px) {
.login-page-sec {padding: 64px 160px 64px 200px;}
.login-page-sec:after {background-size: cover;top: 0;width: 530px;}
.login-page-sec .login-form {padding: 74px}
.login-page-sec .login-form h1 {margin: 24px 0px 12px;}
.login-page-sec .unified-benefits-img{height:80px; width:80px;}
.login-page-sec .unified-benefits-sec:after {width: 980px;left: 0; top:0px;}
}

@media (max-width: 1800px) {
.login-page-sec .registerFormBlock .form-group input:not(:placeholder-shown) ~ label, .login-page-sec .registerFormBlock .form-group input:-webkit-autofill ~ label{font-size:16px; top: -22px;}
.login-page-sec .registerFormBlock .form-control:focus ~ label, .login-page-sec .form-control:not(:placeholder-shown) ~ label {font-size: 16px;top: -22px;}
.login-page-sec .registerFormBlock .form-group label {font-size: 16px !important;}
}

@media (min-width:1440px) and (max-width:1799.98px) {
.login-page-sec:after {background-size: cover;top: 0;width: 518px;}
.login-page-sec .unified-benefits-cont {margin-left: 20px;}
}
@media (min-width: 1024px) and (max-width: 1800px) {
.login-page-sec .unified-benefits-sec {margin: 60px 0 0;}
.login-page-sec .unified-benefits-sec h3 {font-size: 40px;line-height: 40px;margin:0px 0px 6px;}
.login-page-sec .unified-benefits-sec h6 {font-size: 20px;line-height: 28px;margin: 0 0 32px;}
.login-page-sec .unified-benefits-cont h4 {font-size: 24px;margin:0px 0 4px;}
.login-page-sec .unified-benefits-cont p {font-size: 18px;}
.login-page-sec .unified-benefits-list {margin: 0px 0px 42px;}
.login-page-sec .login-form {padding: 48px;border-radius: 32px;background: #FFF;max-width: 100%;margin: 0 auto;}
.login-page-sec .unified-benefits-sec:after {top: -50px;left: 0;}
.footer-sec span {font-size: 16px;}
.login-page-sec:after {background-size: cover;top: 2px;}
.login-page-sec .unified-benefits-cont {margin-left: 20px;}

}
@media (min-width: 1200px) and (max-width: 1439px) {
.login-page-sec .login-form .custom-form {width: 100%;margin: 0;}
.login-page-sec {padding: 64px 50px 64px;}
}
@media (min-width: 1024px) and (max-width:1279px) {
.login-page-sec {background: #00497A;padding: 90px 24px 30px;position: relative;}
.login-page-sec .login-form {max-height: 580px;display: flex;justify-content: flex-start;align-items: center;height: 100%;max-width:450px;}
header .header-right > div {margin: 0 20px 0 0;}
.login-page-sec .unified-benefits-sec {margin: 36px 0 0;}
}

@media (min-width: 768px) and (max-width:1023px) {
.login-page-sec .unified-benefits-sec:after {max-width: 768px;height: 100%;flex-shrink: 0;background-size: 100%;top: 57%;left: 0;margin: 0 auto;}
.login-page-sec .unified-benefits-sec h3 {font-size: 40px;font-weight: 600;line-height: 40px;margin:0px 0px 6px;}
.login-page-sec .unified-benefits-sec h6 {font-size: 20px;line-height: 28px;margin: 0 0 32px;}
.login-page-sec {padding: 60px 60px 60px;position: relative;}
.unified-benefits-img {width: 64px;height: 64px;margin: 0 auto;}
.login-page-sec .unified-benefits-list {display: inline-block;margin: 0px 0px 42px;}
.login-page-sec .unified-benefits-sec {margin: 149px 0 32px;text-align: center;}
.login-page-sec .unified-benefits-cont h4 {font-size: 24px;margin:20px 0 0;}
.login-page-sec .unified-benefits-cont p {font-size: 18px;}
.login-page-sec:after {content: "";position: absolute;height: 100%;right: 0;background: url(https://nationscdn.azureedge.net/otc-container/images/login-bg-icon-768.png) no-repeat bottom;background-size: 100%;top: -50%;width: 460px;}
.login-page-sec:before {content: "";position: absolute;height: 100%;left: -40%;background: url(https://nationscdn.azureedge.net/otc-container/images/login-bg-icon-768.png) no-repeat bottom;background-size: 100%;top: -50%;width: 460px;}
.login-page-sec .login-form {padding: 56px;border-radius: 32px;max-width: 500px;}
header .header-right > div {margin: 0 20px 0 0;}
}

@media (max-width: 767px) {
.login-page-sec:after{display:none;}
.login-page-sec {background: #00497A;padding:0px;}
.login-page-sec .unified-benefits-list {display: inline-block;margin: 0px 0px 42px;}
.login-page-sec .unified-benefits-sec {margin: 56px 6px 16px;text-align: center;}
.login-page-sec .login-form {padding: 32px 11px 0px;border-radius: 0;background: #FFF;margin: 0px;max-width:100%;}
.login-page-sec .unified-benefits-sec h6 {font-size: 16px;line-height: normal;margin: 0 0 32px;}
.login-page-sec .unified-benefits-sec h3 {font-size: 32px;line-height: 32px;font-weight: 600;margin: 0px 0 6px;}
.login-page-sec .unified-benefits-cont h4 {font-size: 20px;line-height: normal; margin:0px 0px 4px;}
.login-page-sec .unified-benefits-cont p {font-size: 14px;}
.login-page-sec .login-form .icon-border-btn {width: auto;}
.login-page-sec .unified-benefits-sec:after {max-width: 540px;flex-shrink: 0;background-size: 100%;top: 58%;left: 0;margin: 0 auto;}
.login-page-sec .unified-benefits-cont {margin-left: 0px;}
.login-page-sec .unified-benefits-img {margin: 0px auto 20px;height: 56px;width: 56px;}
.login-page-sec .custom-container {padding: 0;}
.login-page-sec .cta-sec .section-icon svg {fill: #00497A !important;}
.login-page-sec .active-card {margin: 0px 0px 60px;padding: 24px 0 0;border-top: 1px solid #E9ECF0;}
.login-page-sec .new-user-registration.text-center {margin: 16px 0 24px;padding: 0;}
.login-page-sec .login-form h1 {margin: 24px 0px 0px;}
.login-page-sec .checkbox {padding: 10px 4px;}

.custom-popup.member-id-popup .member-card:after {left:38px;}
.custom-popup.member-id-popup .member-card-img {max-width: 220px; max-height: 145px; margin-right: 20px;}
.custom-popup.member-id-popup .modal-body {padding: 16px 12px 24px;}


}