body { background-color: #ffffff; --footer-height: 35px; }

header { background-color: #f6f6f6; min-height: 90%; }

footer { font-size: 0.75rem; text-align: center; padding-bottom: 2.75rem; }

a, .signup-options { color: #0056b3; }

.input-group-text { background-color: unset; border: unset; padding: unset; min-width: unset; position: relative; left: 0.5rem; top: 0.7rem; z-index: 10; max-height: 1rem; }

.form-control { padding: 0.375rem 3rem; background-color: #ebebeb; border: solid 1px #ffffff; border-radius: 5px; width: 94%; }

.form-control:placeholder { color: #838383; font-size: 14px; }

.input-group { width: 100%; }

.input-group .form-control:not(:first-child) { border-top-left-radius: 5px; border-bottom-left-radius: 5px; }

.input-group-prepend { width: 0; }

.btn-google-new { border: solid 1px #e7e7e7; border-radius: 5px; font-family: "roboto", sans-serif; font-size: 1rem; color: #060606; font-weight: normal; margin-top: 0.75rem; }

.bottom-text { padding-top: 3.5rem; font-size: 1rem; font-weight: normal; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: normal; text-align: center; color: #9d9d9d; }

.well-reset { width: 529px; min-height: 434px; border-radius: 10px; box-shadow: 18px 16px 46px 0 rgba(0, 0, 0, 0.06); border: solid 1px #e2e2e2; background-color: #ffffff; }

.reset-title { font-family: "Roboto"; font-size: 28px; height: 10vh; display: flex; align-items: end; justify-content: center; }

.password-input { width: 390px; }

.reset-button { position: relative; width: 410px; height: 48px; border-radius: 5px; background-color: #f49c26; bottom: 0.6rem; }

.reset-info { font-size: 12px; color: #a0a0a0; margin: 1rem 3.5rem; margin-bottom: 2rem; text-align: left; }

.auth-field { appearance: none; width: 390px; border: solid 1px #ffffff; height: 49px !important; -webkit-appearance: none; -moz-appearance: none; border-radius: 5px; padding-right: 1px; padding-left: 10px; background: url(../images/arrow_down.svg) no-repeat scroll 95% 18px, #ebebeb; }

.auth-type-label { font-size: 14px; margin-bottom: 6px; }

.auth-header-title { font-weight: normal; margin-top: 2.5rem; margin-bottom: 3rem; }

#id_otp_token, #otp-token { appearance: none; width: 390px; border: solid 1px #ffffff; height: 49px; -webkit-appearance: none; -moz-appearance: none; border-radius: 5px; padding-right: 1px; padding-left: 35px !important; background: url(../images/icn_key.svg) no-repeat scroll 12px 12px, #ebebeb; }

.authenticate-button { width: 390px; height: 48px; margin-top: 2rem; border-radius: 5px; background-color: #f49c26; }

.send-otp-button { color: #005cc9; cursor: pointer; font-size: 14px; }

#id_authentication_type:focus, #id_otp_token:focus, #otp-token:focus { outline: none !important; border: solid 2px #f49c26; }

.errorlist { padding: .2rem 0 0 .2rem; list-style: none; color: #e75511; text-align: center; font-size: 12px; margin: 2rem 0rem; }

.errorlist li { display: inline; }

.inside_container { display: flex; flex-direction: column; align-items: center; }

.logout-container { display: flex; justify-content: flex-end; padding: 0.5em 2em; }

.logout-container a { color: #313536; font-weight: 700; font-size: 13px; }

@media screen and (max-width: 767px) { .well-reset, .authenticate-button, .auth-field, #id_otp_token { width: 100%; }
  .inside_container { margin: 0 20px; display: block; } }

.btn-secondary-login { border: 1px solid #f49c26; color: #f49c26; font-weight: 400; margin-top: 0.5rem; }

.logout-container { display: flex; justify-content: flex-end; padding: 1em 2em; }

.logout-container a { color: #313536; font-weight: 700; font-size: 13px; }

nav.impress-staff-login { position: absolute; left: 3.25rem; top: calc(100% - var(--footer-height) - 1rem); }

@media (max-height: 611px), (max-width: 749px) { nav.impress-staff-login { left: 1rem; top: calc(100% - var(--footer-height)); } }

nav.impress-staff-login a { color: #40A9FF; }

@media screen and (max-width: 767px) { .impress-staff-login { --footer-height: 78px; }
  .well-reset, .authenticate-button, .auth-field, #id_otp_token { width: 100%; }
  .inside_container { margin: 0 20px; display: block; } }

.login-header { text-align: start; padding-bottom: 1.5rem; }

.login-header > span { font-size: 0.9rem; }

body.login.staff, body.login.candidate, body.login.recruiter, body.login.login { display: flex; flex-direction: column; }

body.login.staff .navbar-toggler, body.login.candidate .navbar-toggler, body.login.recruiter .navbar-toggler { display: none; }

body.login.recruiter, body.login .recruiter-bg { background-color: #161E2E; }

body.login.candidate, body.login .candidate-bg { background-color: #FFFFFF; }

.login-body { display: flex; color: #484d4e; flex: 1; position: relative; padding: 2rem 1rem; }

.login-body .bg-art { z-index: -1; position: fixed; inset: 0; height: 100%; transition: width 650ms ease-in-out; }

.login-body .bg-art > svg { width: 100%; height: 100%; }

.login-body .bg-art.art-left { left: 0; width: 50%; }

.login-body .bg-art.art-right { left: 50%; width: 50%; }

@media (max-height: 611px), (max-width: 749px) { .login-body .bg-art.art-left { left: 0px; height: 46vh; width: 100%; }
  .login-body .bg-art.art-right { left: 0; width: 100%; } }

.login-body .bg-art.art-full { left: 0; width: 100%; }

.login-body .art-meeting { z-index: -1; position: fixed; bottom: 0; left: 0; width: 500px; height: 250px; }

.login-body .art-recruiter { z-index: -1; position: fixed; bottom: 4.75rem; left: 1rem; height: 303px; }

.login-body .art-candidate { z-index: -1; position: fixed; bottom: 4.75rem; right: 1rem; height: 303px; }

.login-body .singpass-button { background-color: #F4333D; margin-top: 0.75rem; padding: 0; border-radius: 0.5rem; }

.login-body .btn-recruiter-login { padding: 0.65rem 1rem; margin-top: 2rem; font-weight: 400; border: 1px #D9D9D9 solid; border-radius: 4px; width: 80%; margin-inline: auto; }

.login-sub-heading { text-align: start; padding-bottom: 0.4rem; color: #484d4e; }

.login-extras { padding-bottom: 1rem; display: flex; justify-content: end; }

@media (min-height: 612px) and (min-width: 750px) { body.candidate .login-inner-box:not(.no-animations), body.recruiter .login-inner-box:not(.no-animations) { border: 0; overflow: hidden; min-width: 0; max-width: 0; max-height: 0; border-radius: 60%; animation: blob-to-rectangle 750ms ease-in-out forwards; animation-iteration-count: 1; } }

@media (min-height: 612px) and (min-width: 750px) and (max-height: 611px), (min-height: 612px) and (min-width: 750px) and (max-width: 749px) { body.candidate .login-inner-box:not(.no-animations), body.recruiter .login-inner-box:not(.no-animations) { min-width: 250px; max-width: 512px; max-height: 1000px; border-radius: 4px; } }

.login-inner-box { transition: min-width ease-in-out 500ms, padding ease-in-out 500ms; display: flex; gap: 6rem; margin: 0; min-width: 468px; max-width: 512px; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15); }

@media (max-height: 611px), (max-width: 749px) { .login-inner-box { min-width: 250px; } }

.login-wrapper { flex: 1; }

.login-wrapper #login-loading { height: 100%; display: flex; justify-content: center; align-items: center; min-height: 200px; }

.login-wrapper #login-loading > span { color: #f49c26; font-size: 2.5rem; }

.login-wrapper #password-eye { position: absolute; left: 100%; transform: translateX(calc(-100% - 0.8rem)); cursor: pointer; }

.login-wrapper #is-scheduled-processing { display: flex; justify-content: center; align-items: center; }

.login-container-box { border-radius: 4px; margin: auto; height: fit-content; }

.login-container-box form > .input-group { margin-bottom: 1.5rem; }

.login-container-box #login-button, .login-container-box #saml-login-button, .login-container-box #google-login-button { font-weight: normal; }

.login-container-box #login-button:disabled { cursor: not-allowed; }

.login-container-box #login-button:disabled > span.fa { display: inline-block; margin-left: 3px; }

.login-container-box #login-button > span.fa { display: none; }

.login-container-box #saml-login-button { font-weight: normal; margin-top: 0.75rem; }

.login-container-box #google-login-button { display: flex; flex-wrap: nowrap; gap: 0.65rem; justify-content: center; align-items: center; border: 1px #D9D9D9 solid; border-radius: 4px; margin-top: 0.75rem; }

.login-container-box .or-separator { margin-top: 0.75rem; display: flex; align-items: center; gap: 1rem; color: #8C8C8C; font-weight: 100; }

.login-container-box .or-separator .dash { flex: 1; height: 0; border: 1px solid #eee; }

.login-container-box .login-failed { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 200px; gap: 1.5rem; }

.login-container-box .login-failed .fa-exclamation-triangle { color: #b50000; font-size: 3rem; }

.login-container-box .well { padding: 40px; }

.login-container-box .well .login-info { max-width: 512px; }

.login-container-box .well .input-group .input-group-prepend img { min-width: 30px; top: 11px; }

.login-container-box .well .input-group input { border-top-right-radius: 5px; border-bottom-right-radius: 5px; }

.login-container-box .well .input-group input[readonly] { background-color: #f5f5f5; color: #acacac; pointer-events: none; }

#fc_frame.fc-widget-normal:not(.fc-open) { max-width: 75px; }

#fc_push_frame { height: 1px; }

#fc_frame, #fc_frame.fc-widget-normal { position: fixed; }

@media screen and (max-width: 876px) { .login-container-box .well { padding: 30px; }
  .login-body { padding: 4rem 1rem 8rem 1rem; } }

@media (max-height: 611px), (max-width: 749px) { .login-body { padding: 4rem 1rem 5rem 1rem; } }

.login-choice-box { --art-initial-height: 450px; display: flex; width: 100%; height: 100%; justify-content: space-around; align-items: center; }

@media (max-height: 611px), (max-width: 749px) { .login-choice-box { --art-initial-height: 35vh; flex-direction: column; min-width: 350px; gap: 0.5rem; } }

.login-choice-box .art-selection-container { display: flex; flex-direction: column; height: 100%; align-items: center; justify-content: center; gap: 2rem; flex: 1; position: relative; }

.login-choice-box .art-selection-container .img-animation-initials { height: var(--art-initial-height); }

@media (min-height: 612px) and (min-width: 750px) { .login-choice-box .art-selection-container .img-animation-initials { position: absolute; left: 50%; bottom: 50%; transform: translate(-50%, 40%); } }

.login-choice-box .choose-login-button { background-color: #f49c26; border-radius: 16px; font-weight: 700; border: none; outline: none; padding: 14px 21px; margin-top: 0.5rem; color: #fff; text-decoration: none; }

@media (max-height: 611px), (max-width: 749px) { .login-choice-box .choose-login-button { margin-top: -5.5rem; padding: 10px 18px; } }

@media (min-height: 612px) and (min-width: 750px) { .login-choice-box .choose-login-button { position: absolute; bottom: calc(50% - var(--art-initial-height)/2 - 10px); left: 50%; transform: translateX(-50%); } }

.login-choice-box .choose-login-button:hover { background-color: #FDA94F; }

.login-choice-box .choose-login-button:active { background-color: #FF7515; }

@media (min-height: 612px) and (min-width: 750px) { .login-choice-box.recruiter-selected .recruiter-section .art-recruiter-big { animation: recruiter-animation 600ms ease-in-out forwards; }
  .login-choice-box.recruiter-selected .recruiter-section .choose-login-button { animation: recruiter-fade-animation 300ms ease-in-out forwards; }
  .login-choice-box.recruiter-selected ~ .bg-art.art-left.recruiter-bg { width: 100%; }
  .login-choice-box.recruiter-selected .candidate-section .art-candidate-big, .login-choice-box.recruiter-selected .candidate-section .choose-login-button { animation: recruiter-fade-animation 500ms ease-in-out forwards; }
  .login-choice-box.candidate-selected .candidate-section .art-candidate-big { animation: candidate-animation 600ms ease-in-out forwards; }
  .login-choice-box.candidate-selected .candidate-section .choose-login-button { animation: candidate-fade-animation 300ms ease-in-out forwards; }
  .login-choice-box.candidate-selected ~ .bg-art.art-left.recruiter-bg { width: 0; }
  .login-choice-box.candidate-selected .recruiter-section .art-recruiter-big, .login-choice-box.candidate-selected .recruiter-section .choose-login-button { animation: candidate-fade-animation 500ms ease-in-out forwards; } }

@keyframes recruiter-animation { to { height: 303px;
    bottom: 0;
    left: 0;
    transform: translate(0%, 0%); } }

@keyframes candidate-animation { to { height: 303px;
    bottom: 0;
    left: 100%;
    transform: translate(-100%, 0%); } }

@keyframes recruiter-fade-animation { from { opacity: 1; }
  to { opacity: 0;
    left: 75%; } }

@keyframes candidate-fade-animation { from { opacity: 1; }
  to { opacity: 0;
    left: 25%; } }

@keyframes blob-to-rectangle { to { min-width: 468px;
    max-width: 512px;
    max-height: 1000px;
    border-radius: 4px; } }

.primary-shade-6-stroke { stroke: #FE8A2D; }

.primary-shade-6-fill { fill: #FE8A2D; }

.primary-shade-stroke { stroke: #f49c26; }

.primary-shade-fill { fill: #f49c26; }

.primary-shade-2-fill { fill: #ffddae; }

.primary-shade-4-fill { fill: #FDA94F; }

.primary-shade-4-stroke { stroke: #FDA94F; }

.primary-shade-8-fill { fill: #FF7515; }

.primary-shade-0-fill { fill: #ffab36; }

.primary-shade-9-fill { fill: #e15c00; }

.primary-shade-10-fill { fill: #c85200; }

.primary-shade-11-fill { fill: #ae4700; }

.password-input .eye-wrapper { width: 2rem; margin-block: auto; margin-left: -2rem; z-index: 100; cursor: pointer; }

.password-input .eye-wrapper i { color: #706060; }

.password-input .eye-wrapper i:hover { color: black; }