@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900);

:root {
    --a24x7-font-size: 14px;
    /* Themeable font stack. Keep a real fallback chain after whatever is chosen, so a webfont
       that fails to load degrades instead of dropping to the browser default serif. */
    --a24x7-font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --a24x7-primary-color: #0033C5;
    --a24x7-primary-border-color: #0033C5;
    --A24x7-PRIMARY-BG: #ffffff;
    --a247-checkbox-color: #0033C5;
    --a247-checkbox-disabled: #959495;
    --a24x7-font-color: #212529;
    --a24x7-nav-bg-start: #0033C5;
    --a24x7-nav-bg-end: #00a8ff;
    --a24x7-nav-font-color: #ffffff;
    /* Card header background + text + card border (themeable). Drive Bootstrap .card below. */
    --a24x7-section-bg: #f8f9fb;
    --a24x7-card-cap-color: #212529;
    --a24x7-section-border: #e8ecf2;
    --kendo-font-size: var(--a24x7-font-size);
    --kendo-font-family: var(--a24x7-font-family);
    --kendo-color-primary: var(--a24x7-primary-color);
    --kendo-color-error-on-surface: #FF0000;
    --bs-primary: var(--a24x7-primary-color);
    --bs-primary-rgb: 0, 51, 197;
}

/* Themeable Bootstrap cards — header background + header text + body text + border, all from the
   Site Theme.

   --a24x7-card-color is deliberately NOT declared in the :root above. Left undeclared, the var()
   falls through to --a24x7-font-color, so card text keeps inheriting the body colour exactly as it
   did before this was themeable. It only takes effect once an admin saves an override, because
   GetThemeCssAsync emits stored overrides only — never defaults. .card-header keeps its own
   --bs-card-cap-color, so theming the body text does not drag the header along with it. */
.card {
    --bs-card-cap-bg: var(--a24x7-section-bg);
    --bs-card-cap-color: var(--a24x7-card-cap-color);
    --bs-card-color: var(--a24x7-card-color, var(--a24x7-font-color));
    --bs-card-border-color: var(--a24x7-section-border);
}

html, body {
    font-family: var(--a24x7-font-family) !important;
    margin: 0px;
    font-size: var(--a24x7-font-size);
    color: var(--a24x7-font-color);
    background-color: var(--A24x7-PRIMARY-BG);
}

.container {
    padding-bottom: 100px;
}

i.fa, i.fa-solid, i.fas, i.fa-regular {
    color: var(--a24x7-primary-color) !important;
}

.swal2-container {
    z-index: 999999 !important;
}

/* SweetAlert2 Theme Overrides */
.swal2-popup {
    font-family: var(--a24x7-font-family) !important;
    font-size: var(--a24x7-font-size) !important;
    border-top: 3px solid var(--a24x7-primary-color);
    border-radius: 8px;
}

.swal2-title {
    color: var(--a24x7-font-color) !important;
    font-weight: 600 !important;
    font-size: 1.4em !important;
}

.swal2-html-container {
    color: var(--a24x7-font-color) !important;
    font-size: 0.95em !important;
}

.swal2-confirm.swal2-styled {
    background-color: var(--a24x7-primary-color) !important;
    border-color: var(--a24x7-primary-color) !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    padding: 0.4em 1.5em !important;
    box-shadow: none !important;
}

.swal2-confirm.swal2-styled:hover {
    background-color: color-mix(in srgb, var(--a24x7-primary-color) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--a24x7-primary-color) 85%, #000) !important;
}

.swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 197, 0.3) !important;
}

.swal2-cancel.swal2-styled {
    background-color: transparent !important;
    color: var(--a24x7-primary-color) !important;
    border: 1px solid var(--a24x7-primary-color) !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    padding: 0.4em 1.5em !important;
    box-shadow: none !important;
}

.swal2-cancel.swal2-styled:hover {
    background-color: var(--a24x7-primary-color) !important;
    color: #fff !important;
}

.swal2-cancel.swal2-styled:focus {
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 197, 0.3) !important;
}

.swal2-input:focus,
.swal2-textarea:focus,
.swal2-select:focus {
    border-color: var(--a24x7-primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 51, 197, 0.15) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(0, 51, 197, 0.3) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--a24x7-primary-color) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--a24x7-primary-color) !important;
    color: var(--a24x7-primary-color) !important;
}

/* Toast overrides */
.swal2-popup.swal2-toast {
    border-top: none;
    border-left: 3px solid var(--a24x7-primary-color);
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.swal2-popup.swal2-toast .swal2-title {
    font-size: 0.95em !important;
    font-weight: 500 !important;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.disabled-div {
    pointer-events: none;
    opacity: 0.4;
}

.btn-primary {
    color: #fff;
    background-color: var(--a24x7-primary-color) !important;
    border-color: var(--a24x7-primary-border-color) !important;
}

.btn-primary:hover {
    color: #fff;
    background-color: color-mix(in srgb, var(--a24x7-primary-color) 85%, #000) !important;
    border-color: color-mix(in srgb, var(--a24x7-primary-border-color) 85%, #000) !important;
}

.btn-outline-primary {
    color: var(--a24x7-primary-color) !important;
    border-color: var(--a24x7-primary-border-color) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--a24x7-primary-color) !important;
    border-color: var(--a24x7-primary-border-color) !important;
}

.color-primary {
    color: var(--a24x7-primary-color) !important;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-label {
    font-weight: bold !important;
    margin-bottom: 3px !important;
}

/* Account Area Background */
main.account-area {
    background-color: var(--A24x7-PRIMARY-BG);
    min-height: 100vh;
}

.k-listview {
    background-color: transparent !important;
}

/* BEGIN Custom A24x7 Styles */

.page-title {
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin-bottom: 10px;
    padding-bottom: 3px;
}

.page-instructions {
    margin-bottom: 10px;
}

.no-header-grid .k-grid-header {
    display: none;
}

.color-red {
    color: #b32121;
}

.color-green {
    color: #158738;
}

.cursor-pointer {
    cursor: pointer;
}

.a247-checkbox {
    line-height: 1.2;
    display: flex;
    justify-content: flex-start;
    align-items: center !important;
    gap: 3px;
    cursor: pointer;
    margin-bottom: 0px;
}

    .a247-checkbox + .a247-checkbox {
        margin-top: 1em;
    }

.a247-checkbox--disabled {
    color: var(--a247-checkbox-disabled);
    cursor: not-allowed;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--form-background); /* You should define --form-background */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 0.15em;
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

    input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform: scale(0);
        transform-origin: bottom left;
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--a247-checkbox-color);
        background-color: #ffffff;
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    input[type="checkbox"]:disabled {
        --a247-checkbox-color: var(--a247-checkbox-disabled);
        color: var(--a247-checkbox-disabled);
        cursor: not-allowed;
    }

/* Bootstrap form-switch uses its own SVG knob — suppress the global custom checkmark so it doesn't show inside the switch. */
.form-switch input[type="checkbox"],
.form-switch .form-check-input {
    -webkit-appearance: auto;
    appearance: auto;
    width: 2em;
    background-color: initial;
}

.form-switch input[type="checkbox"]::before,
.form-switch .form-check-input::before {
    content: none;
}


input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--form-background); /* Make sure this is defined */
    margin: 0;
    font: inherit;
    color: currentColor;
    width: 1.15em;
    height: 1.15em;
    border: 0.15em solid currentColor;
    border-radius: 50%; /* Makes it round for radio */
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
}

    input[type="radio"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        border-radius: 50%;
        transform: scale(0);
        transform-origin: center;
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--a247-checkbox-color);
        background-color: #ffffff;
    }

    input[type="radio"]:checked::before {
        transform: scale(1);
    }

    input[type="radio"]:disabled {
        --a247-checkbox-color: var(--a247-checkbox-disabled);
        color: var(--a247-checkbox-disabled);
        cursor: not-allowed;
    }


/* END Custom A24x7 Styles */

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
    margin-top: 3px;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Telerik Blazor Overrides */

/* hiding and/or filters input grid and the type dropdown so we only do "Contains" */
.k-filter-menu-container > span:nth-child(n+3) {
    display: none;
}

.k-filter-menu-container > span:nth-child(1) {
    display: none;
}

/* Loading Ring Styles */
div.loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 16, 16, 0.3);
    z-index: 999999;
}

@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-ms-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-moz-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-o-keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes uil-ring-anim {
    0% {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    min-width: 0;
}

/* ── Sidebar shell ── */
.sidebar {
    background-image: linear-gradient(180deg, var(--a24x7-nav-bg-start) 0%, var(--a24x7-nav-bg-end) 100%);
    display: flex;
    flex-direction: column;
}

/* ── Sidebar top bar (logo + hamburger) ── */
.sidebar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    height: 60px;
    box-sizing: border-box;
}

.sidebar-brand img {
    height: 32px;
    display: block;
}

.sidebar-toggler {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    display: none;
}

    .sidebar-toggler:hover {
        background: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.5);
        color: #fff;
    }

/* ── Nav container ── */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0 1rem;
    overflow-y: auto;
    flex: 1;
}

/* ── Top-level nav links ── */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1rem;
    color: var(--a24x7-nav-font-color);
    text-decoration: none !important;
    font-size: 0.875rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

    .sidebar-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--a24x7-nav-font-color);
    }

    .sidebar-link.active {
        background: rgba(255, 255, 255, 0.14);
        color: var(--a24x7-nav-font-color);
        border-left-color: rgba(255, 255, 255, 0.55);
    }

/* ── Sidebar icons — use span so site.css i.fa-solid rule doesn't override ── */
.sidebar-icon {
    font-size: 0.85rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--a24x7-nav-font-color);
    opacity: 0.65;
    transition: color 0.15s, opacity 0.15s;
}

.sidebar-link:hover .sidebar-icon,
.sidebar-link.active .sidebar-icon {
    color: var(--a24x7-nav-font-color);
    opacity: 1;
}

/* ── Logout variant ── */
.sidebar-link--logout {
    color: var(--a24x7-nav-font-color);
    opacity: 0.75;
}

    .sidebar-link--logout:hover {
        background: rgba(255, 255, 255, 0.1);
        color: var(--a24x7-nav-font-color);
        opacity: 1;
    }

    .sidebar-link--logout .sidebar-icon {
        color: var(--a24x7-nav-font-color);
        opacity: 0.65;
    }

    .sidebar-link--logout:hover .sidebar-icon {
        color: var(--a24x7-nav-font-color);
        opacity: 1;
    }

/* ── Collapsible toggle buttons ── */
.sidebar-link-toggle {
    width: 100%;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
}

.sidebar-link-text {
    flex: 1;
    text-align: left;
}

.sidebar-chevron {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: color 0.15s;
}

.sidebar-link-toggle:hover .sidebar-chevron {
    color: rgba(255, 255, 255, 0.75);
}

/* ── Sub-menus ── */
.sidebar-submenu {
    padding: 0;
}

.sidebar-sublink {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.38rem 1rem 0.38rem 2.5rem;
    color: var(--a24x7-nav-font-color);
    opacity: 0.75;
    text-decoration: none !important;
    font-size: 0.8125rem;
    transition: background 0.15s, color 0.15s;
}

    .sidebar-sublink:hover {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.9);
    }

    .sidebar-sublink.active {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }

/* ── Sub-link icons ── */
.sidebar-subicon {
    font-size: 0.72rem;
    width: 0.9rem;
    text-align: center;
    flex-shrink: 0;
    color: var(--a24x7-nav-font-color);
    opacity: 0.5;
    transition: color 0.15s;
}

.sidebar-sublink:hover .sidebar-subicon,
.sidebar-sublink.active .sidebar-subicon {
    color: var(--a24x7-nav-font-color);
    opacity: 0.9;
}

/* ── Section labels ── */
.sidebar-section-label {
    padding: 1rem 1rem 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

/* ── Dividers ── */
.sidebar-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0.5rem 1rem;
}

/* ── User card ── */
.sidebar-user-card {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.6rem 1rem;
}

.sidebar-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sidebar-user-info {
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-sub {
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Top content row ── */
.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
    }

    .top-row a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* ── Mobile ── */
@media (max-width: 640.98px) {
    .top-row:not(.auth) {
        display: none;
    }

    .top-row.auth {
        justify-content: space-between;
    }

    .top-row a, .top-row .btn-link {
        margin-left: 0;
    }

    .sidebar-toggler {
        display: block;
    }

    /* Nav flies out as a fixed overlay so it never pushes page content down */
    .sidebar-nav {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1040;
        background-image: linear-gradient(180deg, var(--a24x7-nav-bg-start) 0%, var(--a24x7-nav-bg-end) 100%);
        overflow-y: auto;
        padding-bottom: 2rem;
    }

    .sidebar-nav.nav-hidden {
        display: none;
    }
}

/* ── Desktop ── */
@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        overflow: hidden;
    }

    .sidebar-nav {
        overflow-y: auto;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* ── Login / Forgot Password / Reset Password ── */

.login-card {
    width: 100%;
    max-width: 420px;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.login-header {
    padding: 2rem 2rem 1.5rem;
    background: linear-gradient(135deg, var(--a24x7-nav-bg-start, #0033C5) 0%, var(--a24x7-nav-bg-end, #3a0647) 100%);
    color: #fff;
    text-align: center;
}

.login-header--admin {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.login-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
    color: #fff;
}

.login-header-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    color: #fff;
}

.login-header-sub {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.login-admin-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 193, 7, 0.12);
    border-bottom: 1px solid rgba(255, 193, 7, 0.25);
    padding: 0.6rem 1.25rem;
    font-size: 0.78rem;
    color: #856404;
}

.login-body {
    padding: 1.75rem 2rem 2rem;
    background: #fff;
}

.login-input-group {
    position: relative;
    margin-bottom: 1rem;
}

.login-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    font-size: 0.85rem;
    z-index: 5;
    pointer-events: none;
}

.login-input {
    padding-left: 2.4rem !important;
    border-radius: 8px !important;
    border: 1.5px solid #e9ecef !important;
    height: 44px;
    font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.login-input:focus {
    border-color: var(--a24x7-primary-color, #0033C5) !important;
    box-shadow: 0 0 0 3px rgba(0, 51, 197, 0.1) !important;
}

.login-admin-mode .login-input:focus {
    border-color: #495057 !important;
    box-shadow: 0 0 0 3px rgba(73, 80, 87, 0.12) !important;
}

.login-btn {
    width: 100%;
    height: 44px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    border: none;
    background: linear-gradient(135deg, var(--a24x7-nav-bg-start, #0033C5) 0%, var(--a24x7-nav-bg-end, #3a0647) 100%);
    color: #fff;
    transition: opacity 0.15s, transform 0.1s;
    cursor: pointer;
}

.login-btn:hover:not(:disabled) {
    opacity: 0.92;
    transform: translateY(-1px);
}

.login-btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.login-btn--admin {
    background: linear-gradient(135deg, #1a1a2e 0%, #2d2d4e 100%);
}

.login-footer-links {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #6c757d;
    cursor: pointer;
    user-select: none;
}

.login-forgot {
    color: var(--a24x7-primary-color, #0033C5);
    text-decoration: none;
    font-weight: 500;
}

.login-forgot:hover {
    text-decoration: underline;
}

.login-admin-mode .login-forgot {
    color: #495057;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff5f5;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 1rem;
    font-size: 0.83rem;
    color: #c62828;
}

/* Styling the spinner container */
.spinner {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    animation: rotate 3s linear infinite;
}

/* Styling the individual discs */
.circle {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: red;
}

/* Loader Circle 1 (top) */
.loader-circle-1 {
    background-color: var(--a24x7-loader-circle-1, #e93d2f);
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

/* Loader Circle 2 (bottom) */
.loader-circle-2 {
    background-color: var(--a24x7-loader-circle-2, #ffbd05);
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
}

/* Loader Circle 3 (left) */
.loader-circle-3 {
    background-color: var(--a24x7-loader-circle-3, #0dab49);
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

/* Loader Circle 4 (right) */
.loader-circle-4 {
    background-color: var(--a24x7-loader-circle-4, #1666ff);
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

/* Spinner rotation animation */
@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.deleted-row { opacity: 0.5; }

.k-table-th { font-weight: bold !important; }

/* ── Assessment status pills ──────────────────────────────────────────────────
   Built client-side by euAssessments.js (see wwwroot/js/euAssessments.js) rather
   than rendered server-side, so the markup never rides the SignalR circuit. Shared
   here — not in a page <style> block — because several surfaces host the same
   renderer (account + admin end-user grids, the link users popup) and they must
   not drift apart. Action-button styles stay with the pages that own the buttons. */
.eu-assess-pills {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 2px;
}

.eu-assess-pill {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    white-space: nowrap;
}

.eu-assess-pill.complete {
    background: #d1fae5;
    color: #065f46;
}

.eu-assess-pill.incomplete {
    background: #fee2e2;
    color: #991b1b;
}

/* Report download button on a pill. Shared for the same reason as the pills — the account and admin
   grids and the link users popup all render it from the same JS. Regenerate/email button styles stay
   with the two grids, which are the only surfaces that offer those actions. */
.eu-pill-download {
    background: #fff;
    border: 1.5px solid #dc2626;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    margin-left: auto;
    cursor: pointer;
    color: #dc2626;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    font-weight: 700;
    transition: background 0.12s;
}

.eu-pill-download:hover {
    background: #fef2f2;
}


/* ── Injected account/site header + footer ──────────────────────────────────
   Wraps the tenant-authored markup that /site/header and /site/footer return and
   loadAccountHeader injects. That HTML is written by account admins in the Header & Footer
   editor, so it carries whatever widths they chose -- and the logo upload itself emits an
   <img style="max-width:500px">, which overflows a phone viewport and gives the whole page a
   horizontal scrollbar.

   Lives here rather than in a component's <style> block because three different pages inject
   this content (Layout/Header, LoginHost, and the end user portal) and only the first two share
   a layout. site.css is loaded globally from App.razor, so the container class works anywhere.

   Media and tables are only forced to fit on mobile; above that breakpoint the account's own
   explicit widths are left alone, since they were chosen for a desktop header. */
.account-header-content {
    max-width: 100% !important;
    box-sizing: border-box;
}

@media (max-width: 767.98px) {
    .account-header-content img,
    .account-header-content svg,
    .account-header-content video,
    .account-header-content iframe,
    .account-header-content embed,
    .account-header-content object {
        max-width: 100% !important;
        height: auto;
    }

    .account-header-content table {
        max-width: 100% !important;
    }
}


/* ── Assessment-taking window ───────────────────────────────────────────
   Shared by the end user portal and the observer dashboard, so it lives here rather than in
   either page's style block.

   On a phone only the WIDTH is forced. Telerik's own positioning and height already behave --
   it centres the window, which lands at left 0 once the width matches the viewport, and sizes
   the height to the content up to the component's MaxHeight. Pinning top/left and forcing
   100dvh fought all of that and made it worse.

   width/max-width/min-width are !important because Telerik writes them as inline styles from its
   sizing parameters. Resetting min-width is the load-bearing line: min-width beats width in CSS,
   so the component's 600px desktop floor would otherwise re-inflate the window past the viewport
   even with width:100vw. */
.eu-asmt-win .k-window-content {
    padding: 0 !important;
    overflow-y: auto !important;
}

@media (max-width: 767.98px) {
    .eu-asmt-win.k-window {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 0 !important;
        border-radius: 0 !important;
        border-width: 0 !important;
    }

    /* Fiddly on touch, and the grips sit over the assessment's own controls. */
    .eu-asmt-win .k-resize-handle {
        display: none !important;
    }
}