#forgot-password.auth-page, #reset-password.auth-page { min-height: 100%; width: 100%; position: relative; background-image: url("../images/backgrounds/academy/bg_grid_pwd.webp"); } #forgot-password.auth-page .logo-container, #reset-password.auth-page .logo-container { margin-bottom: 40px; } #forgot-password.auth-page .auth-container, #reset-password.auth-page .auth-container { position: relative; z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100%; padding: 40px 16px; } #forgot-password.auth-page .logo-container img, #reset-password.auth-page .logo-container img { width: 66px; height: 57px; } #forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card { width: 100%; max-width: 520px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 60px 33px 160px 33px; -webkit-box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); text-align: center; background-color: var(--aifo-dark-gary); background-image: url("../images/backgrounds/bg_bottom.webp"); background-size: 100% 100%; background-repeat: no-repeat; } #forgot-password.auth-page .logo-icon, #reset-password.auth-page .logo-icon { width: 50px; height: 36px; margin: 0 auto 20px; } #forgot-password.auth-page .auth-title, #reset-password.auth-page .auth-title { color: #F9F9F9; font-size: 28px !important; font-weight: 700; line-height: 1.25; margin-bottom: 12px; } #forgot-password.auth-page .auth-description, #reset-password.auth-page .auth-description { color: rgba(249, 249, 249, 0.72); font-size: 15px; line-height: 1.5; margin-bottom: 35px; } #forgot-password.auth-page .form-label, #reset-password.auth-page .form-label { display: block; color: rgba(249, 249, 249, 0.85); font-size: 15px; font-weight: 500; margin-bottom: 10px; text-align: left; } #forgot-password.auth-page .form-control, #reset-password.auth-page .form-control { height: 50px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 11px; color: #F9F9F9; font-size: 15px; padding: 0 16px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } #forgot-password.auth-page .form-control::-webkit-input-placeholder, #reset-password.auth-page .form-control::-webkit-input-placeholder { color: rgba(249, 249, 249, 0.35); } #forgot-password.auth-page .form-control::-moz-placeholder, #reset-password.auth-page .form-control::-moz-placeholder { color: rgba(249, 249, 249, 0.35); } #forgot-password.auth-page .form-control:-ms-input-placeholder, #reset-password.auth-page .form-control:-ms-input-placeholder { color: rgba(249, 249, 249, 0.35); } #forgot-password.auth-page .form-control::-ms-input-placeholder, #reset-password.auth-page .form-control::-ms-input-placeholder { color: rgba(249, 249, 249, 0.35); } #forgot-password.auth-page .form-control::placeholder, #reset-password.auth-page .form-control::placeholder { color: rgba(249, 249, 249, 0.35); } #forgot-password.auth-page .form-control:focus, #reset-password.auth-page .form-control:focus { background: rgba(0, 0, 0, 0.65); border-color: #F98715; -webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); color: #F9F9F9; outline: none; } #forgot-password.auth-page .invalid-feedback, #reset-password.auth-page .invalid-feedback { display: none; color: var(--aifo-orange); font-size: 13px; text-align: left; margin-top: 8px; } #forgot-password.auth-page .invalid-feedback.show, #reset-password.auth-page .invalid-feedback.show { display: block; } #forgot-password.auth-page .btn-primary, #reset-password.auth-page .btn-primary { width: 100%; height: 50px; background: var(--aifo-orange); border: none; border-radius: 11px; color: var(--aifo-white); font-size: 16px; font-weight: 600; margin-top: 30px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; cursor: pointer; } #forgot-password.auth-page .btn-primary:hover:not(:disabled), #reset-password.auth-page .btn-primary:hover:not(:disabled) { background: #e97d10; -webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #forgot-password.auth-page .btn-primary:disabled, #reset-password.auth-page .btn-primary:disabled { opacity: 0.65; cursor: not-allowed; } #forgot-password.auth-page .btn-primary:focus, #reset-password.auth-page .btn-primary:focus { -webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); outline: none; } #forgot-password.auth-page .spinner-border-sm, #reset-password.auth-page .spinner-border-sm { width: 18px; height: 18px; border-width: 2px; margin-right: 8px; } #forgot-password.auth-page .signup-prompt, #reset-password.auth-page .signup-prompt { color: rgba(249, 249, 249, 0.6); font-size: 14px; margin-top: 30px; } #forgot-password.auth-page .signup-link, #reset-password.auth-page .signup-link { color: #F98715; text-decoration: none; font-weight: 500; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #forgot-password.auth-page .signup-link:hover, #reset-password.auth-page .signup-link:hover { color: #ff9a2e; text-decoration: underline; } #forgot-password.auth-page .back-link, #reset-password.auth-page .back-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; color: rgba(249, 249, 249, 0.7); font-size: 14px; text-decoration: none; margin-top: 24px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #forgot-password.auth-page .back-link:hover, #reset-password.auth-page .back-link:hover { color: rgba(249, 249, 249, 0.95); text-decoration: none; } #forgot-password.auth-page .back-icon, #reset-password.auth-page .back-icon { width: 20px; height: 20px; background: #F98715; border-radius: 5px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #forgot-password.auth-page .back-link:hover .back-icon, #reset-password.auth-page .back-link:hover .back-icon { -webkit-box-shadow: 0 0 12px rgba(249, 135, 21, 0.4); box-shadow: 0 0 12px rgba(249, 135, 21, 0.4); } @media (max-width: 991px) { #forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card { padding: 36px; } } @media (max-width: 767px) { #forgot-password.auth-page .auth-card, #reset-password.auth-page .auth-card { max-width: calc(100% - 32px); padding: 28px 22px; } #forgot-password.auth-page .auth-title, #reset-password.auth-page .auth-title { font-size: 24px; } #forgot-password.auth-page .auth-description, #reset-password.auth-page .auth-description { font-size: 14px; } } .auth-page::before, #reset-password.auth-page::before, #ch_pwd_message.auth-page { content: ""; position: absolute; top: 0; left: 0; bottom: 0; pointer-events: none; z-index: 0; background-image: url(../images/backgrounds/login_bg_light.svg); height: 500px; width: 72%; background-repeat: no-repeat; background-size: contain; z-index: 1; } #ch_pwd_message.auth-page { padding: 40px 0; height: 100%; } #reset-password.auth-page .form-group { margin-bottom: 16px; } #reset-password.auth-page .form-label { color: rgba(249, 249, 249, 0.85); font-size: 13.5px; font-weight: 500; margin-bottom: 8px; display: block; } #reset-password.auth-page .input-wrapper { position: relative; } #reset-password.auth-page .form-control { height: 50px; border-radius: 11px; background: #0f0f0f; border: 1px solid rgba(255, 255, 255, 0.18); color: #F9F9F9; font-size: 15px; padding-right: 45px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #reset-password.auth-page .form-control::-webkit-input-placeholder { color: rgba(249, 249, 249, 0.35); } #reset-password.auth-page .form-control::-moz-placeholder { color: rgba(249, 249, 249, 0.35); } #reset-password.auth-page .form-control:-ms-input-placeholder { color: rgba(249, 249, 249, 0.35); } #reset-password.auth-page .form-control::-ms-input-placeholder { color: rgba(249, 249, 249, 0.35); } #reset-password.auth-page .form-control::placeholder { color: rgba(249, 249, 249, 0.35); } #reset-password.auth-page .form-control:focus { background: #0f0f0f; border-color: #F98715; -webkit-box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); box-shadow: 0 0 0 0.2rem rgba(249, 135, 21, 0.25); color: #F9F9F9; outline: none; } #reset-password.auth-page .form-control.is-invalid { border-color: var(--aifo-orange); } #reset-password.auth-page .form-control.is-invalid:focus { border-color: var(--aifo-orange); -webkit-box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25); } #reset-password.auth-page .toggle-password { position: absolute; right: 14px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: none; border: none; color: rgba(249, 249, 249, 0.55); cursor: pointer; padding: 8px; -webkit-transition: color 0.2s ease; transition: color 0.2s ease; width: 32px; height: 32px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } #reset-password.auth-page .toggle-password:hover { color: rgba(249, 249, 249, 0.85); } #reset-password.auth-page .toggle-password:focus { outline: none; } #reset-password.auth-page .password-hint { color: rgba(249, 249, 249, 0.45); font-size: 11.5px; margin-top: 8px; margin-bottom: 0; text-align: left; } #reset-password.auth-page .btn-primary { width: 100%; height: 50px; border-radius: 11px; background: #F98715; border: none; color: #fff; font-weight: 600; font-size: 17px; margin-top: 24px; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } #reset-password.auth-page .btn-primary:hover { background: #e97d10; -webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); -webkit-transform: translateY(-1px); transform: translateY(-1px); } #reset-password.auth-page .btn-primary:active { -webkit-transform: translateY(1px); transform: translateY(1px); } #reset-password.auth-page .btn-primary:focus { background: #e97d10; -webkit-box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); box-shadow: 0 10px 24px rgba(249, 135, 21, 0.18); outline: none; } #reset-password.auth-page .btn-primary:disabled { background: rgba(249, 135, 21, 0.5); cursor: not-allowed; -webkit-transform: none; transform: none; } #reset-password.auth-page .security-note { color: rgba(249, 249, 249, 0.45); font-size: 11.5px; line-height: 1.45; margin-top: 15px; margin-bottom: 0; text-align: left; } #reset-password.auth-page .invalid-feedback { color: #dc3545; font-size: 12px; margin-top: 6px; } @media (max-width: 767px) { #reset-password.auth-page .auth-card { width: calc(100% - 32px); padding: 28px 22px; } #reset-password.auth-page .auth-title { font-size: 23px; } #reset-password.auth-page .auth-description { font-size: 14px; } } @media (min-width: 768px) and (max-width: 991px) { #reset-password.auth-page .auth-card { padding: 36px; } #reset-password.auth-page .auth-title { font-size: 25px; } } #ch_pwd_message.auth-page { min-height: 100%; width: 100%; position: relative; background-image: url("../images/backgrounds/academy/bg_grid_pwd.webp"); } #ch_pwd_message.auth-page .success-page { min-width: 450px; min-height: 650px; background-color: var(--aifo-dark-gary); background-image: url(../images/backgrounds/bg_bottom.webp); background-size: 100% 100%; background-repeat: no-repeat; border: 1px solid rgba(255, 255, 255, 0.06); -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55); border-radius: 14px; } #ch_pwd_message.auth-page .success-card { max-width: 450px; width: 100%; min-height: 650px; padding: 80px 33px 150px; -webkit-transform: translateY(6px); transform: translateY(6px); } #ch_pwd_message.auth-page { /* @keyframes cardFadeIn { to { opacity: 1; transform: translateY(0); } } */ } #ch_pwd_message.auth-page .success-icon { width: 72px; height: 72px; border-radius: 8px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto 40px; /* box-shadow: 0 10px 22px rgba(249,135,21,0.25); */ } #ch_pwd_message.auth-page .success-icon img { width: 100%; height: 100%; } #ch_pwd_message.auth-page .success-icon i { color: white; font-size: 20px; } #ch_pwd_message.auth-page .success-title { color: var(--aifo-white); font-size: 25px; font-weight: 600; line-height: 1.3; text-align: center; margin-bottom: 20px; } #ch_pwd_message.auth-page .success-countdown { color: var(--aifo-white); font-size: 52px; font-weight: 700; line-height: 1; text-align: center; margin: 70px 0 70px; -webkit-transition: -webkit-transform 100ms ease-out; transition: -webkit-transform 100ms ease-out; transition: transform 100ms ease-out; transition: transform 100ms ease-out, -webkit-transform 100ms ease-out; } #ch_pwd_message.auth-page .success-countdown.pulse { -webkit-animation: countdownPulse 100ms ease-out; animation: countdownPulse 100ms ease-out; } @-webkit-keyframes countdownPulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.98); transform: scale(0.98); } } @keyframes countdownPulse { 0%, 100% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.98); transform: scale(0.98); } } #ch_pwd_message.auth-page .success-back-link { color: var(--aifo-orange); font-size: 15px; font-weight: 300; text-align: center; text-decoration: none; display: block; -webkit-transition: all 200ms ease; transition: all 200ms ease; } #ch_pwd_message.auth-page .success-back-link:hover { color: var(--aifo-orange); text-decoration: underline; opacity: 0.9; } @media (max-width: 576px) { #ch_pwd_message.auth-page .success-card { width: 100%; padding: 40px 33px 100px; min-height: 460px; } #ch_pwd_message.auth-page .success-page { min-width: unset; min-height: unset; } #ch_pwd_message.auth-page .success-title { font-size: 16px; } #ch_pwd_message.auth-page .success-countdown { font-size: 46px; } #ch_pwd_message.auth-page .success-back-link { font-size: 12px; } #ch_pwd_message.auth-page .success-countdown { margin: 35px 0 35px; } #ch_pwd_message.auth-page .success-icon { margin: 0 auto 20px; } }