/* INDEX / LOGIN */
.login {height:calc(var(--vh, 1vh) * 100); width:100%; max-width:unset; background:#BB9FF4; display:flex; flex-direction:column; align-items:flex-start;}


.loginContentContainer {flex:1 1 auto;color:#014254; display:flex; align-items:center; max-width:1280px; width:100%; margin:0 auto; overflow:auto;}


.loginLogo {font-size:18px; font-weight:500; display:flex; flex-direction:column;  height:100%; margin-right:50px; padding:20px;}
.loginLogo .logo {font-weight: bold; font-size:28px;}
.loginLogo .svg {flex:1 1 auto; display:flex; height:100%;align-items:center; max-height:365px;}
.loginLogo .svg svg {height:calc(100% - 80px); width: auto; max-height:290px;}

.loginContent {overflow:auto; display:flex; flex-direction: column; max-height:100%; max-width:900px; padding-right:20px;}
.loginContent h1 {font-size:70px; font-weight:500; line-height:1; margin:0; padding:0 0 30px 0;}

.loginTextHead {display:flex; justify-content: space-between;}
.loginTextHead > div {width:calc(50% - 20px)}
.loginTextHead > div b {font-weight: 500;} 




.loginFolderContainer { background:#014254; width:100%; display:flex; justify-content: center;}
.loginFolderContainer.open {position:absolute; bottom:0;}

.loginFolderContainer .title {font-size:18px; font-weight:500;}

.loginFolder {position:relative; max-width:450px; width:100%; padding:30px 30px 20px 30px; display:flex; flex-direction:column; justify-content: center; color:#d0f5ff;}

.loginFolder:before {
    content:''; position:absolute; height:35px; left:0; top:-34px; width:100%;
    background-color:#014254; -webkit-mask:url(/assets/images/foldertop.svg) no-repeat; mask:url(/assets/images/foldertop.svg) no-repeat; mask-size: auto 100%;   
}
.loginFolder button {width:100%;}
.loginFolder button.register {background:#BB9FF4; color:#014254; margin-bottom:20px;}
.loginFolder button.signin {background:#BB9FF4; color:#014254; position:relative;}
.loginFolder button.apple:before {content:''; background:url(/assets/images/icons/apple.svg); width:24px; height:24px; position:absolute; left:15px; top:calc(50% - 12px);}
.loginFolder button.google:before {content:''; background:url(/assets/images/icons/google.svg); width:24px; height:24px; position:absolute; left:15px; top:calc(50% - 12px);}
.loginFolder button.facebook:before {content:''; background:url(/assets/images/icons/facebook.svg); width:24px; height:24px; position:absolute; left:15px; top:calc(50% - 12px);}
.loginFolder button.email:before {content:''; background:url(/assets/images/icons/email.svg); width:24px; height:24px; position:absolute; left:15px; top:calc(50% - 12px);}
.loginFolder .terms {margin:10px auto 0 auto; max-width:250px; text-align:center; font-weight: normal; line-height:1.6;}
.loginFolder .steps {display:flex; flex-direction:column;}

.loginFolder > div {} 
.loginFolder label[data-icon] {position: relative; display:block; margin-bottom:20px;}
.loginFolder label[data-icon]:before {
    position: absolute; color:#007798; font-size: 24px;transform: translateY(-50%);top: 50%;left: 20px; font-variation-settings: 'FILL' 0, 'wght' 200;
}
.loginFolder input[type=text], textarea, .loginFolder input[type=password] {
    background:#003949; border:1px solid #007798; color:#d0f5ff; border-radius:30px; font-size:16px; padding:10px 20px 10px 50px;
}
textarea:focus, input:focus {background:#003949; border:1px solid #007798; color:#d0f5ff;}

.loginFolder textarea {border-radius:10px; padding:20px;}
.passwordBoxEye {position:relative;}
.passwordBoxEye i {position:absolute; right:20px;color:#BB9FF4; top:50%; transform:translateY(-50%); cursor:pointer;}
.loginFolder input:-webkit-autofill, .loginFolder input:-webkit-autofill:hover, .loginFolder input:-webkit-autofill:focus {
    -webkit-text-fill-color: #d0f5ff; -webkit-box-shadow: inset 0 0 0px 9999px #003949; transition: background-color 5000s ease-in-out 0s; background-color: #003949 !important;
}

.loginFolder .accessLoginLinks {margin-top:20px;}
.loginFolder select {font-size: 16px; border-radius: 20px;padding:10px 20px;background: #003949; border: 1px solid #007798;}
.loginFolder a {cursor:pointer;color:#BB9FF4;}
.loginFolder b {font-weight:500;}
.loginFolder input::placeholder, .loginFolder textarea::placeholder {color:#d0f5ff; opacity:0.4} 

#signupRobot, #emailConfirmPinContainer, #resetPassPinContainer, #inactiveRobot, #declineFormContainer, #contactRobot {
    display:flex; align-items: center; margin:0 10px; justify-content: center; position:fixed; top:0; left:0; width:100dvw; height:100dvh;background:#BB9FF4; padding:20px; z-index: 1; display:none;
}
#signupRobot > div, #emailConfirmPinContainer > form, #resetPassPinContainer > form, #inactiveRobot > div, #declineFormContainer > div, #contactRobot > div {
    width:400px; padding:30px; background:#014254; border-radius: 10px; text-align:center;
}

#signupRobot, #inactiveRobot {text-align:center;}
#signupRobot .robotInfo, #inactiveRobot .robotInfo {max-width:250px; margin:0 auto 10px auto;}
#signupRobot .robotIcon i, #inactiveRobot .robotIcon i {font-size:72px;}
#signupRobot .g-recaptcha, #inactiveRobot .g-recaptcha {display:inline-block;margin:0 auto;}

.loginFolder .access_message {}




.popupAuth {background: rgba(0,0,0,0.9);position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 99999999;display: none;}
.popupAuth > div {display: flex;align-items: center;justify-content: center;width: 100%;height:100%; color:#d0f5ff;}
.popupAuth > div > div {max-width: 400px;margin: 0 10px;width: 100%;border-radius: 10px; text-align:center;font-size: 14px;}
.popupAuth > div > div .peHeader {font-size: 20px;font-weight: 500; padding: 20px 20px 20px 20px;display: flex; background: #BB9FF4;color: #fff; border-radius:10px 10px 0 0;}
.popupAuth > div > div .peHeader span {flex: 1 1 auto;}
.popupAuth > div > div .peBody {padding: 20px 20px 20px 20px;background: #014254; border-radius:0 0 10px 10px;}
.popupAuth > div > div .peBody a {cursor:pointer;}
.popupAuth button {width:100%;}

#loginPINBox {display:flex; margin-bottom:20px;}
#loginPINBox div {width:60px; margin:0 5px; text-align:center;}
#loginPINBox div input {line-height:1; padding:16px 0; font-size:36px; text-align:center; background:transparent; border: 1px solid #007798; color:#d0f5ff;}
#loginPINBox div input.secure {text-security:disc;-webkit-text-security:disc;-moz-text-security:disc;}


#memorableWordContainer {display: flex;margin-bottom: 15px;justify-content: center;}
#memorableWordContainer > span {width: 60px;margin: 0 10px;text-align: center;}
#memorableWordContainer > span > span {display: block;margin-bottom: 10px;font-weight: 500;}
#memorableWordContainer > span input {
	line-height: 1;padding: 16px 0;font-size: 36px;text-align: center;
	text-security:disc;-webkit-text-security:disc;-moz-text-security:disc; background:transparent; border: 1px solid #007798; color:#d0f5ff;
}


#emailConfirmPin, #googleAuthNumContainer {margin:10px auto 20px auto;}
.sixDigitPin {display: flex;align-items: center;overflow: hidden;margin-bottom: 10px;position: relative; max-width:320px; margin-bottom:20px;}
.sixDigitPin:after {position: absolute;content: '';width: 8px;height: 4px;background: #007798;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.sixDigitPin input[type="number"] {
    width: 16.66666666666666666%;line-height: 1;padding: 16px 0;font-size: 36px;
    text-align: center;border-radius: 0;appearance: textfield;-webkit-appearance: textfield;border: 0; border:1px solid #007798; color: #d0f5ff; background:transparent;
}
.sixDigitPin input[type="number"]:nth-of-type(1) {border-radius: 5px 0 0 5px;}
.sixDigitPin input[type="number"]:nth-of-type(2) {border-left: 0;}
.sixDigitPin input[type="number"]:nth-of-type(3) {border-left: 0;margin-right: 15px;border-radius: 0 5px 5px 0;}
.sixDigitPin input[type="number"]:nth-of-type(4) {margin-left: 15px; border-radius: 5px 0 0 5px;}
.sixDigitPin input[type="number"]:nth-of-type(5) {border-left: 0;}
.sixDigitPin input[type="number"]:nth-of-type(6) {border-left: 0; border-radius: 0 5px 5px 0;}

.sixDigitPin input::-webkit-outer-spin-button, #googleAuthNumContainer input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
.sixDigitPin input[type="number"]:nth-child(n+4) {order: 2;}
.sixDigitPin label {
	border: 0 !important; clip: rect(1px, 1px, 1px, 1px) !important; -webkit-clip-path: inset(50%) !important; clip-path: inset(50%) !important;
	height: 1px !important;margin: -1px !important;overflow: hidden !important;padding: 0 !important;position: absolute !important;width: 1px !important;
	white-space: nowrap !important;
}


@media only screen and (max-width: 1280px) {
    .loginTextHead {flex-direction:column; margin-bottom:50px;}
    .loginTextHead > div {width:auto;}
    .loginContent h1 {font-size:48px;}
}
@media only screen and (max-width: 880px) {
    .loginLogo {max-width:220px;}
}
@media only screen and (max-width: 750px) {
    .loginContent h1 {font-size:36px;}
}
@media only screen and (max-width: 580px) {
    .loginContentContainer {flex-direction: column;}
    .loginLogo {height: auto; margin-right: 0;text-align: center;flex-direction: row-reverse; align-items: center;}
    .loginLogo .logo {padding-bottom:0;}
    .loginLogo .svg {margin-right:20px;}
    .loginLogo .svg svg {height:50px;}
    .loginContent {flex: 1 1 auto;padding: 0 20px;text-align: center;}
    .loginContent h1 {padding-top:0;font-size:30px;}
}