/* ==========================================================================
   Summer Camp Scholarship Program - site layout (utility bar, header, menu,
   user chip, footer, landing). Scoped with the "sc-" prefix so it does not
   change the existing pages' content styles.
   Palette: PBC institutional navy + accents from the Summer Camp logo
   (coral / sky). Accents are only used for backgrounds, borders and icons;
   text colors below were chosen for WCAG AA contrast.
   ========================================================================== */

:root {
    --sc-navy: var(--app-color-navy);        /* text on white 11.4:1 */
    --sc-navy-dark: var(--app-color-navy-dark);
    --sc-coral: #e8603c;       /* decorative only */
    --sc-coral-text: #a8360f;  /* text on white 6.1:1 */
    --sc-sky: #4fc3e8;         /* decorative only */
    --sc-sky-soft: #e6f6fc;
    --sc-sand: #f7f4ec;
    --sc-ink: #1a1a1a;
    --sc-muted: var(--app-color-muted);       /* text on white 6.9:1 */
    --sc-line: var(--app-color-line);
    --sc-focus: #ffd24d;
    --sc-font: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    --sc-font-title: "Merriweather", Georgia, serif;
}

/* ---------- skip link ---------- */
.sc-skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 2000;
    padding: 8px 14px;
    background: var(--sc-focus);
    color: var(--sc-navy-dark);
    font-weight: 700;
    border-radius: 0 0 4px 0;
}

    .sc-skip-link:focus {
        left: 0;
        color: var(--sc-navy-dark);
    }

/* Sticky footer: the footer stays at the bottom of the window on short pages (class set in _Layout.cshtml) */
body.sc-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    body.sc-body > main {
        flex: 1 0 auto;
        width: 100%;
    }

/* The skip link moves focus to <main>; no outline box around the whole page content */
#main-content:focus {
    outline: none;
}

/* ---------- utility bar ---------- */
.sc-utilbar {
    background: var(--sc-navy-dark);
    color: #dce6f1;
    font-family: var(--sc-font);
    font-size: 13px;
    padding: 4px 0;
}

    .sc-utilbar .sc-inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 4px 16px;
    }

    .sc-utilbar a {
        color: #dce6f1;
        text-decoration: none;
    }

        .sc-utilbar a:hover, .sc-utilbar a:focus {
            color: #fff;
            text-decoration: underline;
        }

.sc-env {
    color: #fff;
    background: #b91c1c;
    border-radius: 10px;
    padding: 0 8px;
    font-weight: 700;
}

.sc-inner {
    padding-left: 15px;
    padding-right: 15px;
}

/* ---------- impersonation banner ---------- */
.sc-impersonation {
    background: #fff4d6;
    border-bottom: 1px solid #e0b64f;
    color: var(--sc-ink);
    font-family: var(--sc-font);
    font-size: 14px;
    padding: 6px 0;
}

/* ---------- header ---------- */
.sc-header {
    position: relative;
    background: #fff;
    font-family: var(--sc-font);
    border-bottom: 4px solid var(--sc-coral);
    box-shadow: 0 2px 6px rgba(0, 40, 81, .08);
}

    .sc-header .sc-inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 16px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

.sc-brand {
    display: flex;
    flex: 1 1 100%;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    min-width: 0;
}

    .sc-brand:hover, .sc-brand:focus {
        text-decoration: none;
    }

    .sc-brand img {
        display: block;
        width: 52px;
        height: 52px;
        flex-shrink: 0;
    }

.sc-brand-text {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
}

.sc-header h1.sc-brand-title,
.sc-brand-title {
    margin: 0;
    color: var(--sc-navy);
    font-family: var(--sc-font-title);
    font-size: 19px !important;
    font-weight: 700;
    line-height: 1.2;
}

.sc-brand-sub {
    color: var(--sc-muted);
    font-size: 13px;
}

.sc-header-tools {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.sc-menu-toggle {
    display: none;
    border: 1px solid var(--sc-line);
    background: #fff;
    border-radius: 4px;
    padding: 8px 10px;
    color: var(--sc-navy);
    font-size: 18px;
    line-height: 1;
    min-height: 44px;
    min-width: 44px;
}

/* ---------- account (user chip) ---------- */
#sc-account {
    margin-left: auto;
    min-width: 0;
    max-width: 40%;
}

.sc-account {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .sc-account form {
        display: none;
        margin: 0;
    }

.sc-account > .dropdown {
    min-width: 0;
    max-width: 100%;
}

.sc-user-button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--sc-line);
    background: #fff;
    border-radius: 24px;
    padding: 3px 12px 3px 3px;
    color: var(--sc-ink);
    min-height: 40px;
    max-width: 100%;
}

    .sc-user-button:hover, .sc-user-button:focus {
        border-color: var(--sc-navy);
    }

.sc-user-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sc-navy);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    flex-shrink: 0;
}

.sc-user-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

.sc-user-name {
    font-weight: 700;
    color: var(--sc-navy);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-user-role {
    font-size: 12px;
    color: var(--sc-muted);
}

.sc-account .dropdown-menu > li > a {
    padding: 8px 16px;
}

.sc-account-links {
    display: flex;
    gap: 8px;
}

    .sc-account-links a {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 14px;
        border-radius: 4px;
        font-weight: 700;
        text-decoration: none;
        min-height: 40px;
    }

.sc-link-register {
    color: var(--sc-navy);
    border: 1px solid var(--sc-navy);
}

.sc-link-login {
    color: #fff;
    background: var(--sc-navy);
    border: 1px solid var(--sc-navy);
}

    .sc-link-register:hover, .sc-link-register:focus,
    .sc-link-login:hover, .sc-link-login:focus {
        text-decoration: none;
        background: var(--sc-navy-dark);
        color: #fff;
    }

/* ---------- application menu ---------- */
.sc-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sc-menu > li {
        position: relative;
    }

        .sc-menu > li > a {
            display: block;
            padding: 8px 12px;
            color: var(--sc-navy);
            font-weight: 700;
            font-size: 15px;
            text-decoration: none;
            border-radius: 4px;
        }

            .sc-menu > li > a:hover,
            .sc-menu > li > a:focus,
            .sc-menu > li.open > a {
                background: var(--sc-sky-soft);
                color: var(--sc-navy-dark);
                text-decoration: none;
            }

    .sc-menu .dropdown-menu {
        font-family: var(--sc-font);
        font-size: 14px;
        border-top: 3px solid var(--sc-coral);
    }

        .sc-menu .dropdown-menu > li > a {
            padding: 7px 16px;
            color: var(--sc-ink);
        }

            .sc-menu .dropdown-menu > li > a:hover,
            .sc-menu .dropdown-menu > li > a:focus {
                background: var(--sc-sky-soft);
                color: var(--sc-navy-dark);
            }

        .sc-menu .dropdown-menu .fa {
            width: 18px;
            color: var(--sc-navy);
        }

    /* Nested navigation groups (Bootstrap 3 has no submenus): open left because menus are right aligned. */
    .sc-menu .dropdown-submenu {
        position: relative;
    }

        .sc-menu .dropdown-submenu > .dropdown-menu {
            top: 0;
            left: auto;
            right: 100%;
            margin-top: -6px;
            border-radius: 6px;
        }

        .sc-menu .dropdown-submenu > a:after {
            display: block;
            content: " ";
            float: left;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-right-color: #767676;
            margin-top: 6px;
            margin-right: 8px;
        }

/* ---------- visible keyboard focus ---------- */
.sc-utilbar a:focus, .sc-header a:focus, .sc-header button:focus,
.sc-footer a:focus, .sc-footer button:focus, .sc-landing a:focus, .sc-landing button:focus {
    outline: 3px solid var(--sc-focus);
    outline-offset: 2px;
}

/* ---------- footer ---------- */
.sc-footer {
    margin-top: 32px;
    background: var(--sc-navy-dark);
    color: #dce6f1;
    font-family: var(--sc-font);
    font-size: 14px;
    padding: 28px 0 12px;
}

    .sc-footer a,
    .sc-footer .btn-link {
        color: #fff;
        text-decoration: underline;
    }

        .sc-footer a:hover, .sc-footer .btn-link:hover {
            color: var(--sc-sky);
        }

    .sc-footer .btn-link {
        padding: 0;
        border: 0;
        font-size: 14px;
        vertical-align: baseline;
    }

.sc-footer-heading {
    color: #fff;
    font-family: var(--sc-font-title);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.sc-footer-links a {
    display: block;
    padding: 3px 0;
}

.sc-footer-bottom {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .2);
    font-size: 13px;
    text-align: center;
}

.sc-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    text-decoration: none;
}

/* ---------- login landing (Views/Account/Login.cshtml) ---------- */
.sc-landing {
    margin: -5px -15px 0; /* full bleed inside .body-content */
    font-family: var(--sc-font);
    color: var(--sc-ink);
    font-size: 16px;
    line-height: 1.55;
}

    /* Titles are divs, not h2-h6: the only heading of the site is the header h1 (see AGENTS.md) */
    .sc-hero-title, .sc-login-title, .sc-section-title, .sc-path-title, .sc-how-group-title {
        font-family: var(--sc-font-title);
        font-weight: 700;
        line-height: 1.2;
    }

/* ADA: solid background (no gradient / transparency) so contrast checkers can measure every text on it.
   White on #003a70 = 11.4:1, sky #4fc3e8 on #003a70 = 5.6:1 */
.sc-hero {
    background-color: var(--sc-navy);
    background-image: none;
    border-bottom: 4px solid var(--sc-sky);
    color: #fff;
    padding: 40px 15px 48px;
}

.sc-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1140px;
    margin: 0 auto;
}

.sc-hero-inner.sc-signin-layout {
    display: grid;
    grid-template-columns: minmax(0, 620px) minmax(0, 420px);
}

.sc-hero-copy {
    flex: 1 1 480px;
    max-width: 620px;
}

.sc-signin-layout .sc-hero-copy {
    grid-column: 1;
    grid-row: 1;
}

.sc-hero-badge {
    display: inline-block;
    background: var(--sc-sky);
    color: var(--sc-navy-dark);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.sc-hero-title {
    color: #fff;
    font-size: 36px;
    line-height: 1.15;
    margin: 0 0 14px;
}

    .sc-hero-title em {
        color: var(--sc-sky);
        font-style: normal;
    }

.sc-hero-lead {
    color: #e0eaf5;
    font-size: 17px;
    margin-bottom: 18px;
}

/* ADA: solid background (was a translucent white) so contrast can be measured.
   White on #1a4e7e = 8.3:1, label #bfe8f7 on #1a4e7e = 6.6:1 (the sky color was only 4.3:1 here) */
.sc-hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.sc-hero-dates {
    flex: 1 1 240px;
    background: #1a4e7e;
    border-left: 4px solid var(--sc-coral);
    border-radius: 0 6px 6px 0;
    padding: 10px 14px;
}

    .sc-hero-dates strong {
        display: block;
        color: #bfe8f7;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
    }

.sc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sc-btn-ghost,
.sc-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
}

.sc-btn-ghost {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, .8);
}

    .sc-btn-ghost:hover, .sc-btn-ghost:focus {
        color: #fff;
        background: rgba(255, 255, 255, .12);
        text-decoration: none;
    }

.sc-btn-primary {
    color: #fff;
    background: var(--sc-coral-text);
    border: 0;
}

    .sc-btn-primary:hover, .sc-btn-primary:focus {
        color: #fff;
        background: #8a2c0b;
        text-decoration: none;
    }

.sc-login-card {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    background: #fff;
    color: var(--sc-ink);
    border-radius: 8px;
    box-shadow: 0 18px 40px rgba(0, 20, 50, .35);
    padding: 22px 24px;
}

.sc-login-title {
    color: var(--sc-navy);
    font-size: 22px;
    margin: 0 0 4px;
}

.sc-account-help {
    background: var(--sc-sky-soft);
    border-left: 4px solid var(--sc-navy);
    border-radius: 0 4px 4px 0;
    color: var(--sc-ink);
    padding: 18px;
    margin: 18px 0;
}

.sc-account-help-title { color: var(--sc-navy); font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.sc-account-help p { margin: 0 0 12px; }
.sc-account-help .sc-account-help-note { margin: 10px 0 0; font-size: 14px; color: var(--sc-muted); }
.sc-account-check-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 18px; border: 2px solid var(--sc-navy); border-radius: 4px; color: #fff; background: var(--sc-navy); font-size: 16px; font-weight: 700; text-align: center; text-decoration: none; }
.sc-account-check-button:hover, .sc-account-check-button:focus { color: #fff; background: var(--sc-navy-dark); text-decoration: none; }
.sc-account-help a:focus { outline: 3px solid var(--sc-navy); outline-offset: 3px; }
.sc-login-card .sc-account-check-button { width: 100%; }
.sc-login-card .sc-account-help {
    margin: 12px 0;
    padding: 12px;
}
.sc-login-card .sc-account-help-title { font-size: 17px; margin-bottom: 4px; }
.sc-login-card .sc-account-help p { margin-bottom: 8px; }
.sc-login-card .sc-account-check-button {
    padding: 8px 12px;
    color: var(--sc-navy);
    background: #fff;
}
.sc-login-card .sc-account-check-button:hover,
.sc-login-card .sc-account-check-button:focus {
    color: var(--sc-navy);
    background: var(--sc-sky-soft);
}
.sc-login-new { margin: 16px 0; }
.sc-login-new a { color: var(--sc-navy); font-weight: 700; text-decoration: underline; }

.sc-login-sub,
.sc-login-secure {
    color: var(--sc-muted);
    font-size: 14px;
}

    .sc-login-sub strong {
        color: var(--sc-ink);
    }

/* Error of the last sign in attempt (AccountController.LoginAuth); stays until the next attempt */
.sc-login-error {
    margin: 8px 0 4px;
    padding: 10px 12px;
    font-size: 14px;
}

    .sc-login-error p {
        margin: 0 0 4px;
    }

        .sc-login-error p:last-child {
            margin-bottom: 0;
        }

    .sc-login-error a {
        color: #843534;
        font-weight: 700;
        text-decoration: underline;
    }

.sc-login-frame {
    margin: 0 -8px;
    overflow: hidden;
}

    .sc-login-frame iframe {
        width: 100%;
        height: 300px;
        border: 0;
    }

.sc-login-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin: 6px 0 12px;
}

    .sc-login-meta a {
        color: var(--sc-navy);
        font-weight: 700;
    }

.sc-login-secure {
    border-top: 1px solid var(--sc-line);
    padding-top: 10px;
    margin: 0;
}

    .sc-login-secure .fa {
        color: #257a3e;
    }

.sc-section {
    padding: 48px 15px;
    background: #fff;
}

.sc-section-alt {
    background: var(--sc-sand);
}

.sc-section-inner {
    max-width: 1140px;
    margin: 0 auto;
}

.sc-eyebrow {
    color: var(--sc-coral-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sc-section-title {
    color: var(--sc-navy);
    font-size: 26px;
    margin: 0 0 22px;
}

.sc-paths {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.sc-path {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--sc-line);
    border-top: 4px solid var(--sc-sky);
    border-radius: 8px;
    padding: 22px;
    background: #fff;
}

    .sc-path-title {
        color: var(--sc-navy);
        font-size: 18px;
        margin: 0 0 8px;
    }

    .sc-path p {
        color: var(--sc-muted);
        font-size: 15px;
    }

    .sc-path .sc-btn-primary {
        margin-top: auto;
    }

.sc-path-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--sc-navy);
    color: #fff;
    font-size: 20px;
    margin-bottom: 12px;
}

.sc-path-icon-coral {
    background: var(--sc-coral);
    color: var(--sc-navy-dark);
}

.sc-path-status {
    font-size: 14px;
}

.sc-path-note {
    margin-top: auto;
    font-style: italic;
}

.sc-pill {
    display: inline-block;
    padding: 1px 9px;
    margin-right: 4px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.sc-pill-open { background: #1e7e34; }
.sc-pill-closed { background: #b91c1c; }
.sc-pill-neutral { background: #555; }

.sc-how {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.sc-how-group-title {
    color: var(--sc-navy);
    font-size: 18px;
    margin: 0 0 14px;
}

.sc-steps {
    counter-reset: sc-step;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .sc-steps li {
        position: relative;
        counter-increment: sc-step;
        padding: 4px 0 14px 50px;
        min-height: 44px;
    }

        .sc-steps li:before {
            content: counter(sc-step);
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--sc-coral);
            color: var(--sc-navy-dark);
            font-family: var(--sc-font-title);
            font-weight: 700;
        }

.sc-help {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
    align-items: center;
}

.sc-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.sc-fact {
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    padding: 20px 12px;
    text-align: center;
}

.sc-fact-number {
    display: block;
    color: var(--sc-navy);
    font-family: var(--sc-font-title);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

.sc-fact-label {
    display: block;
    margin-top: 6px;
    color: var(--sc-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.sc-help-box {
    border-left: 4px solid var(--sc-coral);
    padding-left: 18px;
}

    .sc-help-box .sc-section-title {
        margin-bottom: 10px;
    }

/* ---------- register page (Views/Account/Register.cshtml): reuses the login landing components ---------- */
.sc-hero-compact {
    padding-top: 32px;
    padding-bottom: 36px;
}

    /* No sign in card next to it (unlike the login), so the title can use more width */
    .sc-hero-compact .sc-hero-copy {
        max-width: 820px;
    }

.sc-register-help {
    align-items: start;
}

.sc-register-staff {
    border-top: 1px solid var(--sc-line);
    padding-top: 10px;
    color: var(--sc-muted);
    font-size: 14px;
}

    .sc-register-staff strong {
        color: var(--sc-ink);
    }

@media (max-width: 991px) {
    .sc-paths, .sc-how, .sc-help {
        grid-template-columns: 1fr;
    }

    .sc-hero-inner.sc-signin-layout {
        grid-template-columns: minmax(0, 620px);
        justify-content: center;
    }

    .sc-login-card {
        grid-column: 1;
        max-width: 560px;
        justify-self: center;
    }

    .sc-signin-layout .sc-hero-copy {
        grid-row: 2;
    }

}

@media (max-width: 600px) {
    .sc-hero {
        padding: 24px 15px 32px;
    }

        .sc-hero-title {
            font-size: 27px;
        }

    .sc-login-card {
        padding: 18px;
    }

    .sc-btn-ghost, .sc-btn-primary, .sc-account-check-button {
        width: 100%;
    }

    .sc-facts {
        grid-template-columns: 1fr;
    }
}

/* ---------- small screens: brand above the visible account and menu toggle ---------- */
@media (max-width: 767px) {
    /* Preserve DOM/focus order: brand first, then account and menu toggle on their own row. */
    .sc-brand {
        flex-wrap: wrap;
        gap: 8px 12px;
    }

    .sc-brand-text {
        flex-basis: calc(100% - 56px);
    }

    #sc-account {
        flex: 1 1 0;
        max-width: calc(100% - 56px);
    }

    #sc-account.sc-account-links {
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 100%;
    }

    .sc-user-name {
        max-width: 100%;
    }

    .sc-menu-toggle {
        flex: 0 0 auto;
    }

    .sc-hide-xs {
        display: none;
    }

    .sc-brand img {
        width: 44px;
        height: 44px;
    }

    .sc-header h1.sc-brand-title,
    .sc-brand-title {
        font-size: 16px !important;
    }

    .sc-brand-sub {
        font-size: 12px;
    }

    .sc-menu-toggle {
        display: inline-block;
    }

    .sc-header-tools {
        flex-basis: 100%;
        align-items: stretch;
    }

        .sc-header-tools.collapse {
            display: none;
        }

            .sc-header-tools.collapse.in {
                display: flex;
            }

    .sc-account {
        flex-direction: column;
        align-items: flex-start;
    }

    .sc-menu {
        flex-direction: column;
        border-top: 1px solid var(--sc-line);
        padding-top: 6px;
    }

        .sc-menu .dropdown-menu {
            position: static;
            float: none;
            box-shadow: none;
            border: 0;
        }

        .sc-menu .dropdown-submenu > .dropdown-menu {
            margin-left: 12px;
        }

    .sc-footer .col-md-4 {
        margin-bottom: 18px;
    }
}

@media (min-width: 768px) {
    .sc-header-tools.collapse {
        display: flex !important;
        height: auto !important;
    }
}