html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

body {
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.page.main_container {
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    height: 100vh;
}

main {
    overflow: visible !important;
}

@supports (scrollbar-width: thin) {
    html {
        scrollbar-width: thin;
    }
}

::-webkit-scrollbar {
    width: 12px;
}

*{
    scrollbar-color: #c1c1c1 #ffffff;
}

.main_container {
    scrollbar-color: #c1c1c1 transparent;
}

/* DASH shell background tokens live in css/dash/tokens.css (loaded globally via App.razor). */

.main_container.main-background {
    background-image: url('/images/main_background_only_elips.png');
}

.main_container.account-background {
    /* Login page owns its own prototype gradients via .dash-login-page--*.
       Other account pages (ForgotPassword, etc.) keep the legacy image. */
    background-image: url('/images/Rectangle 30.png');
    background-size: cover;
    background-position: center;
}

.main_container.account-background:has(.dash-login-page) {
    /* admin_nav.css centers flex children in a row — stretch full-bleed for login. */
    background-image: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
}

.main_container.account-background .content--account {
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0;
    min-height: 100vh;
    width: 100%;
    max-width: none;
}

.main_container.account-background:has(.dash-login-page) main,
.main_container.account-background:has(.dash-login-page) .content--account,
.main_container.account-background:has(.dash-login-page) .dash-login-page {
    width: 100%;
    max-width: none;
    flex: 1 1 auto;
    align-self: stretch;
    box-sizing: border-box;
}

.main_container.account-background:has(.dash-login-page--gateway) {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.main_container.account-background:has(.dash-login-page--gateway) main,
.main_container.account-background:has(.dash-login-page--gateway) .content--account {
    overflow: hidden;
    height: 100%;
}

.line-spacer-4 {
    height: 4rem;
    width: 100%;
}
.step {
    display: flex;
    align-items: flex-start;
}

.step-number {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    font-size: 14px;
}

.step-content {
    flex: 1;
}