/* ----------------------------------------------------- FIXED HEADER FOR REGISTER FLOW ------------------------------------------------------ */ .register-header { position: fixed; top: 0; left: 0; width: 100%; background: var(--color-white); display: flex; align-items: center; justify-content: center; z-index: 999; border-bottom: 1px solid var(--color-border); } body { padding-top: 4rem; } footer{ display: none; } /* Pages that explicitly want the footer back (e.g. Login, ResendEmailActive) apply the .auth-show-footer class to . */ body.auth-show-footer footer { display: unset; } /* ----------------------------------------------------- REGISTER CONTAINER ------------------------------------------------------ */ .register-container { max-width: 60rem; margin: 3.75rem auto; } /* ----------------------------------------------------- PAGE TITLE ------------------------------------------------------ */ .page-title { font-size: 1.625rem; font-weight: 700; text-align: center; margin-bottom: 2.1875rem; } /* ----------------------------------------------------- ALERT NOTE ------------------------------------------------------ */ .alert-note { background: #fff2f2; border-left: .25rem solid var(--color-warning); padding: .9375rem; border-radius: var(--radius-md); font-size: .875rem; } /* ----------------------------------------------------- REGISTER STEPPER ------------------------------------------------------ */ :root { --step-circle-size: 3rem; /* ~40px */ } .register-stepper { margin: 0 auto 0; } .register-stepper-list { display: flex; justify-content: space-between; } .register-stepper-item { position: relative; flex: 1 1 0; text-align: center; } .register-stepper-item::before { content: ""; position: absolute; top: calc(var(--step-circle-size) / 2 - 0.0625rem); left: -50%; width: 100%; height: 0.3125rem; background: var(--color-border); z-index: 1; } .register-stepper-item:first-child::before { content: none; } .register-stepper-circle { position: relative; z-index: 2; width: var(--step-circle-size); height: var(--step-circle-size); line-height: var(--step-circle-size); border-radius: 50%; margin: 0 auto 0.75rem; background: var(--color-inactive); color: #fff; font-size: 0.875rem; font-weight: 600; } .register-stepper-item--active .register-stepper-circle { background: var(--color-secondary); } .register-stepper-item--active:before{ background-color: var(--color-secondary) } .register-stepper-label { font-size: 0.875rem; line-height: 1.5; color: var(--color-inactive); } .register-stepper-item--active .register-stepper-label { color: var(--color-text); } .register-form-area { padding: 3rem 2.5rem; background-color: var(--color-white); } .register-container h3{ font-weight: 600; font-size: 2.25rem; } .register-note { font-size: 1.25rem; margin: 1.5rem 0; } .m-header--fixed .m-body { padding-top: 3.75rem !important; } .sidebar-toggler-mobile{display: none !important;} /* MOBILE */ @media (max-width: 480px) { :root { --step-circle-size: 2rem; } .register-stepper { margin-bottom: 2rem; } .register-stepper-label { font-size: 0.6875rem; } .m-header--fixed .m-body { padding-top: 2rem !important; } } @media (max-width: 576px) { .salary-input { max-width: 180px !important; } }