.text-blue {
    color: #0C0A3E;
}

.text-blue-70 {
    color: #0C0A3EB3;
}

.border-bottom-blue-20 {
    border-bottom: 1px solid #0C0A3E33;
}

h4>a.text-blue:hover {
    color: #0C0A3E;
    opacity: 1 !important;
}

a.text-blue-70:hover {
    color: #0C0A3E;
    opacity: 1 !important;
}

.text-red {
    color: #C0133D;
}

.text-white {
    color: #FFFFFF;
}

.btn-blue {
    background-color: #0C0A3E !important;
    border-color: #0C0A3E !important;
    color: #fff !important;
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus,
.btn-blue.focus {
    background-color: #0C0A3E !important;
    border-color: #0C0A3E !important;
    color: #fff !important;
}

.btn-outline-blue {
    color: #0C0A3E;
    border-color: #0C0A3E;
}

.btn-outline-blue:hover {
    color: #fff;
    background-color: #0C0A3E;
    border-color: #0C0A3E;
}

/* SafetyClerk blue for radios and checkboxes when checked (override Bootstrap primary) */
.form-check-input {
    accent-color: #0C0A3E;
}
.form-check-input:checked {
    background-color: #0C0A3E !important;
    border-color: #0C0A3E !important;
}

.border-bottom-blue {
    border-bottom: 1px solid #0C0A3E !important;
}

.bg-gray-100 {
    --bs-bg-opacity: 1;
    background-color: var(--bs-gray-100) !important;
    opacity: var(--bs-bg-opacity) !important;
}

.bg-blue {
    background-color: #0C0A3E;
}

.mt-n2px {
    margin-top: -2px;
}

.min-h-50vh {
    min-height: 50vh;
}

.max-h-300px {
    max-height: 300px;
}

.cursor-pointer {
    cursor: pointer;
}

.cursor-move {
    cursor: move;
}

.min-w-192px {
    min-width: 192px !important;
}

.px-6 {
    padding-right: 6rem !important;
    padding-left: 6rem !important;
}

.fs-7 {
    font-size: 0.9rem !important;
}

.fs-8 {
    font-size: 0.8rem !important;
}

.btn-unstyled {
    background-color: transparent !important;
    border: none;
}

.btn-unstyled:focus {
    outline: none !important;
    box-shadow: none !important;
}

.btn-link {
    border: none;
    background: transparent;
    color: var(--bs-primary);
}

.rotate-180deg {
    transform: rotate(180deg);
}


.dropdown-hover:hover .dropdown-hover-menu {
    display: block;
    margin-top: 0;
}

.login-dropdown-setup button.btn.btn-primary.dropdown-toggle {
    background: transparent;
    color: #0c0a3e;
    border: 0;
}

.login-dropdown-setup ul.dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    left: inherit;
    min-width: 180px;
}

.login-dropdown-setup ul.dropdown-menu a.nav-link {
    background: transparent;
    padding: 0;
}

.login-dropdown-setup ul.dropdown-menu a.nav-link button.btn {
    background: transparent;
    color: #454545;
    width: 100%;
    border: 0;
    box-shadow: none;
    text-align: left;
    font-size: 18px;
}

/* Logout pop-up is not wrapped by <a> tag */
.login-dropdown-setup ul.dropdown-menu button.btn {
    background: transparent;
    color: #454545;
    width: 100%;
    border: 0;
    box-shadow: none;
    text-align: left;
    font-size: 18px;
}

.login-dropdown-setup ul.dropdown-menu a.nav-link button.btn-primary:focus,
.login-dropdown-setup ul.dropdown-menu a.nav-link button.btn-primary:active {
    box-shadow: none;
}

.login-dropdown-setup ul.dropdown-menu a.nav-link button.btn-primary:hover {
    color: #0c0a3e;
}

.description {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}


.invited-by {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-description {
    display: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inner-section {
    min-height: 550px;
    height: 100%;
}

.global-back-tab {
    display: none;
    left: 0;
    position: fixed;
    top: 70px;
    z-index: 1020;
}

.global-back-tab.global-back-tab--visible {
    display: inline-flex;
}

/* Mobile breadcrumb sits in the page body, horizontally centered and aligned to
   the top of the global back tab. Hidden on desktop, where the app header carries
   the breadcrumb instead. The bar spans the full width so the pill (and the panel
   it opens) center in the viewport; a flex item (not an inline box) keeps the top
   edge stable between the collapsed and expanded states. */
.sc-mobile-breadcrumb {
    display: none;
}

@media screen and (max-width: 900px) {
    /* Sit the back tab and breadcrumb a little below the sticky header (not flush
       against it), with matching tops so they line up. */
    .global-back-tab {
        top: 80px;
        transition: opacity 0.2s ease, transform 0.2s ease;
    }

    .sc-mobile-breadcrumb {
        align-items: flex-start;
        display: flex;
        justify-content: center;
        left: 0;
        /* Symmetric side padding keeps the pill centered in the viewport while
           guaranteeing it can never overlap the 40px back tab on the left. */
        padding: 0 48px;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 80px;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 1020;
    }

    /* Hide on scroll-down (mobile only); keep layout/display so they can animate
       back in on scroll-up. Separate from ``global-back-tab--visible`` (back URL). */
    .global-back-tab.global-mobile-chrome--scroll-hidden,
    .sc-mobile-breadcrumb.global-mobile-chrome--scroll-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px);
        visibility: hidden;
    }

    .sc-mobile-breadcrumb.global-mobile-chrome--scroll-hidden > sc-breadcrumb {
        pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
        .global-back-tab,
        .sc-mobile-breadcrumb {
            transition: none;
        }
    }

    /* Figma "titles alignment" (node 3909:22511): on pages with the fixed mobile
       breadcrumb, the page title / first content tile always starts 63px below the
       back tab's top edge (back tab top 80px − section top 60px + 63px = 83px of
       section padding), in a centered column that clears the 40px back tab
       (70px margin + 12px container padding = Figma's 82px side inset) and wraps
       instead of being covered or cut off. Scoped to the page's top-level section
       (the direct body child under the fixed chrome): classic `.page-section`
       shells, the project overview v2 shell (`.sc-project-v2`) and `sc_page_shell`. Nested /
       subsequent `.page-section` blocks — e.g. review pages embed a second
       section — keep their normal spacing rather than gaining an 83px gap. */
    body:has(.sc-mobile-breadcrumb) > .page-section:not(.page-section ~ .page-section),
    body:has(.sc-mobile-breadcrumb) > .sc-project-v2,
    body:has(.sc-mobile-breadcrumb) > .inner-section > .sc-page-shell {
        padding-top: 83px;
    }

    body:has(.sc-mobile-breadcrumb) > .page-section:not(.page-section ~ .page-section) > .container > .page-header h1 {
        margin-left: 70px;
        margin-right: 70px;
    }

    /* Only the pill/panel are interactive; the rest of the bar lets taps fall
       through to the page (e.g. the edit controls beneath it). */
    .sc-mobile-breadcrumb > sc-breadcrumb {
        pointer-events: auto;
    }

    /* Gradient veil under the sticky header (Figma node 3833:23775): SC-blue
       fading from 5% to 0, top-down, starting at the header's bottom edge. Scoped
       to the sticky header instead of a global body pseudo-element so it cannot
       collide with page-level or third-party body decorations. */
    body:not([data-embed="mobile"]) #topbar::after {
        background: linear-gradient(180deg, rgba(12, 10, 62, 0.05) 0%, rgba(12, 10, 62, 0) 100%);
        content: "";
        height: 121px;
        left: 0;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
    }
}

.home-section h3.text-center {
    color: #0c0a3e;
    padding-top: 100px;
}

footer {
    padding: 30px 0px 0px;
    background: #ffffff;
}

footer h6 {
    font-size: 18px;
    color: #0c0a3e;
    position: relative;
}

footer h6:after {
    content: '';
    display: block;
    position: absolute;
    bottom: -10px;
    width: 35px;
    height: 2px;
    background: #0c0a3e;
}

footer p {
    margin-bottom: 8px;
    font-size: 15px;
}

footer p a {
    font-size: 15px;
    color: #2b2b2b;
    text-decoration: none;
}

footer p a:hover {
    color: #0c0a3e;
    text-decoration: none;
}

.ftr-cont-addr p .fa {
    color: #0c0a3e;
    margin-right: 5px;
    width: 22px;
}

.ftr-copy-right {
    color: #666;
    font-size: 12px;
}

.ftr-copy-right a {
    color: #0c0a3e;
}

/* Reduce footer padding on mobile for auth pages */
@media screen and (max-width: 575px) {
    body.safetyclerk-background .footer {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

.login-sign-pge {
     min-height: calc(100vh - 140px);
     padding: 0.75rem 0;
     flex: 1;
     max-width: 100%;

     @media screen and (max-width: 575px) {
         padding: 0.5rem 0;
         min-height: calc(100vh - 120px);
     }

     @media screen and (min-width: 768px) {
         padding: 1.5rem 0;
         min-height: calc(100vh - 160px);
     }

     /* Figma interstitial: gradient from white (top) to #def3ef (bottom) */
     &.use-app-interstitial {
         background: #ffffff;
         min-height: calc(100vh - 140px);

         @media screen and (max-width: 575px) {
             min-height: calc(100vh - 120px);
         }

         /* Keep guidance near Safari’s Smart App Banner (system UI at top of viewport) */
         &.use-app-interstitial--smart-banner {
             min-height: calc(100vh - 140px);
         }
     }

     .use-app-smart-banner-hint {
         max-width: 504px;
         width: 100%;
         padding: 0.875rem 1rem;
         background: #def3ef;
         border: 1px solid rgba(12, 10, 62, 0.12);
         border-radius: 12px;
         box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);

         @media screen and (max-width: 575px) {
             padding: 0.75rem 0.875rem;
             border-radius: 10px;
         }

         .use-app-smart-banner-hint__icon {
             font-size: 1.25rem;
             color: var(--blue, #0C0A3E);
             opacity: 0.85;
             line-height: 1;
             margin-bottom: 0.35rem;
         }

         .use-app-smart-banner-hint__headline {
             font-family: 'Work Sans', sans-serif;
             font-weight: 600;
             font-size: clamp(17px, 4.2vw, 20px);
             line-height: 1.3;
             color: var(--blue, #0C0A3E);
             max-width: 22rem;
             margin-left: auto;
             margin-right: auto;
         }

         .use-app-smart-banner-hint__lede {
             font-family: 'Work Sans', sans-serif;
             font-weight: 400;
             font-size: 13px;
             line-height: 1.45;
             color: var(--blue, #0C0A3E);
             opacity: 0.92;
             max-width: 320px;
             margin-left: auto;
             margin-right: auto;
         }
     }

     .inner-sgn-lgn {
         max-width: 504px;
         width: 100%;
         height: auto;
         background: #FFFFFF;
         padding: 1.25rem;
         margin: 0 auto;
         box-shadow: 0px 0px 10px 0px #00000026;
         border-radius: 20px;

         @media screen and (max-width: 575px) {
             padding: 1rem;
             border-radius: 16px;
         }

         /* Figma interstitial card: 378px on mobile, shadow 0 0 10px rgba(0,0,0,0.1) */
         &.use-app-card {
             box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);

             @media screen and (max-width: 430px) {
                 max-width: 378px;
             }
         }

         @media screen and (min-width: 768px) {
             padding: 2rem;
         }

         .welcome-text {
             font-family: 'Koulen', sans-serif;
             font-weight: 400;
             font-size: clamp(1.75rem, 5vw, 48px);
             line-height: 1.1;
             letter-spacing: 0;
             text-align: center;
             color: var(--blue, #0C0A3E);
             display: block;
             margin-bottom: 0.5rem;
         }

         .logo-horizontal {
             width: 50%;
             height: auto;
         }

        form.form {
            text-align: center;

            label {
                text-align: left;
                display: block;
                font-family: 'Work Sans', sans-serif !important;
                font-weight: 500 !important;
                font-size: 14px !important;
                line-height: 1.4 !important;
                letter-spacing: 0 !important;
                color: #000000 !important;
                margin-bottom: 0.5rem !important;
            }

            .form-control {
                height: 50px;
                border-radius: 8px;
                border: 2px solid #E8E7EC;
                width: 100%;
                font-size: clamp(14px, 2vw, 16px);
                padding: 0.75rem 1rem;

                &:focus {
                    border: 2px solid var(--blue, #0C0A3E);
                    box-shadow: none;
                }
            }

            .password-input-wrapper {
                position: relative;
                width: 100%;
            }

            .password-field-with-toggle {
                padding-right: 45px !important;
            }

            .password-toggle-btn {
                position: absolute;
                right: 12px;
                top: 50%;
                transform: translateY(-50%);
                background: none;
                border: none;
                color: #666;
                cursor: pointer;
                padding: 5px;
                font-size: 16px;
                z-index: 10;
                transition: color 0.2s ease;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .password-toggle-btn:hover {
                color: #0C0A3E;
            }

            .password-toggle-btn:focus {
                outline: 2px solid #0C0A3E;
                outline-offset: 2px;
                border-radius: 4px;
            }

            .password-toggle-btn:active {
                transform: translateY(-50%) scale(0.95);
            }

            .btn.btn-primary {
                background: #0C0A3E;
                border-color: #0C0A3E;
                color: #fff;
                transition: all 0.5s ease;
                padding: 0.75rem 1.5rem;
                font-size: clamp(13px, 2vw, 16px);
                text-transform: uppercase;
                margin-top: 1.5rem;
                width: 100%;
                height: 50px;
                border-radius: 8px;
                font-weight: 500;

                &:hover {
                    color: #0c0a3e;
                    background: transparent;
                    border-color: #0C0A3E;
                }
            }

            .mb-3.required {
                margin-bottom: 1rem !important;
            }

            .required {
                text-align: left;
            }
        }

        .support-icon {
            width: clamp(28px, 5vw, 38px);
            height: auto;
            flex-shrink: 0;
            margin-bottom: 0.5rem;

            @media screen and (min-width: 768px) {
                margin-bottom: 0.75rem;
            }
        }

        .support-message {
            font-family: 'Work Sans', sans-serif;
            font-weight: 500;
            font-size: clamp(13px, 2vw, 16px);
            line-height: 1.6;
            letter-spacing: 0;

            p {
                margin-bottom: 0.25rem;
            }

            a {
                color: var(--blue, #0C0A3E);
                text-decoration: underline;

                &:hover {
                    text-decoration: none;
                }
            }
       }

        .invite-rocket-icon {
            width: clamp(120px, 30vw, 164px);
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .invite-text {
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
            font-size: clamp(16px, 3vw, 18px);
            line-height: 1.3;
            color: var(--blue, #0C0A3E);
            margin-bottom: 0;

            em {
                font-style: italic;
            }
        }

        .invite-warning {
            font-family: 'Work Sans', sans-serif;
            font-size: 14px;
            line-height: 1.4;
            color: #333;
        }

        .invite-druid-agreement {
            font-family: 'Work Sans', sans-serif;
            font-size: 13px;
            line-height: 1.4;
            color: #333;
            text-align: left;
        }

        .invite-join-btn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            gap: 7px;
            background: var(--blue, #0C0A3E);
            border-color: var(--blue, #0C0A3E);
            color: #FFFFFF;
            font-family: 'Work Sans', sans-serif;
            font-weight: 500;
            font-size: 12px;
            line-height: 14px;
            height: 39px;
            border-radius: 8px;
            text-transform: none;
            text-decoration: none;
            transition: all 0.3s ease;

            &:hover {
                background: transparent;
                color: var(--blue, #0C0A3E);
                border-color: var(--blue, #0C0A3E);

                svg line, svg polyline {
                    stroke: var(--blue, #0C0A3E);
                }
            }

            &.use-app-fallback-cta {
                background: transparent;
                color: var(--blue, #0C0A3E);
                border: 2px solid var(--blue, #0C0A3E);
                font-weight: 500;

                &:hover {
                    background: var(--blue, #0C0A3E);
                    color: #FFFFFF;
                    border-color: var(--blue, #0C0A3E);
                }
            }
        }

        .use-app-title {
            font-family: 'Work Sans', sans-serif;
            font-weight: 500;
            font-size: 22px;
            line-height: 28px;
            text-align: center;
            color: var(--blue, #0C0A3E);
            display: block;
        }

        .use-app-description {
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
            font-size: 16px;
            line-height: 19px;
            text-align: center;
            color: var(--blue, #0C0A3E);
            max-width: 280px;
            margin: 0 auto;
        }

        &.use-app-card .use-app-description {
            max-width: 220px;
        }

        .use-app-hint {
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
            font-size: 12px;
            line-height: 1.3;
            color: var(--blue, #0C0A3E);
            opacity: 0.7;
        }

        /* Revealed only when "Open it" did not hand off to the app (in-app
           browser, or app not installed); highlighted so it draws the eye. */
        .use-app-safari-hint {
            font-family: 'Work Sans', sans-serif;
            font-weight: 500;
            font-size: 12px;
            line-height: 1.35;
            color: var(--blue, #0C0A3E);
            background: #DEF3EF;
            border-radius: 10px;
            padding: 8px 12px;
        }

        .use-app-safari-hint[hidden] {
            display: none;
        }

        .app-icon-wrapper {
            width: 90px;
            height: 90px;
            background: #DEF3EF;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.5rem;
        }

        .app-icon-img {
            width: 50px;
            height: 50px;
            object-fit: contain;
        }

        .app-icon-label {
            font-family: 'Work Sans', sans-serif;
            font-weight: 400;
            font-size: 11px;
            line-height: 14px;
            text-align: center;
            color: var(--blue, #0C0A3E);
            opacity: 0.5;
            margin-bottom: 0;
        }

        .invite-deny-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            /* Used on both an anchor and the deny action's POST submit button, so the
               native button chrome is reset here. A button also carries user-agent
               padding (`1px 6px`) that an anchor does not, which would widen it and
               overhang the `border-bottom`. Must stay above the `border-bottom` and
               `padding-bottom` below, which re-set the bottom edge. */
            background: transparent;
            border: 0;
            padding: 0;
            font-family: 'Work Sans', sans-serif;
            font-weight: 500;
            font-size: 12px;
            line-height: 14px;
            color: var(--blue, #0C0A3E);
            text-decoration: none;
            border-bottom: 1.5px solid var(--blue, #0C0A3E);
            padding-bottom: 2px;
            transition: opacity 0.3s ease;

            &:hover {
                opacity: 0.7;
            }
        }
    }
}

.page-section {
    padding: 30px 0px;
}

.page-section .page-header h1 {
    text-align: center;
    font-size: 30px;
    color: #0c0a3e;
    margin-bottom: 20px;
}

form.form {
    text-align: center;
}

form.form .form-control {
    height: 45px;
    border-radius: 0px;
}

/* BS5 selects render via .form-select, not .form-control — same sizing so
   selects and text inputs line up inside legacy forms. */
form.form .form-select {
    height: 45px;
    border-radius: 0px;
}

form.form label {
    text-align: left;
    display: block;
}

nav.main-breadcrumb ol.breadcrumb {
    justify-content: center;
}

.breadcrumb>.active {
    color: black;
}

form.form .btn.btn-primary {
    background: #0c0a3e;
    border-color: #0c0a3e;
    color: #fff;
    transition: all 0.5s ease;
    padding: 8px 25px;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 20px;
}

form.form .btn.btn-primary:hover {
    color: #0c0a3e;
    background: transparent;
}

form.form .btn.btn-secondary {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
    transition: all 0.5s ease;
    padding: 8px 25px;
    font-size: 16px;
    text-transform: uppercase;
    margin-top: 20px;
}

form.form .btn.btn-secondary:hover {
    color: #6c757d;
    background: transparent;
}

.page-section form.form {
    background: #f8f9fa;
    padding: 30px;
    border-radius: 25px;
    box-shadow: 0px 0px 30px rgb(0 0 0 / 8%);
    width: 830px;
    max-width: 100%;
    margin: 20px auto 0px;
}

.page-section form.form .sticky-top-form-bg {
    background: #f8f9fa;
}

a.create-new-project {
    padding: 0px 0px;
    color: #0c0a3e;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
}

a.create-new-project:hover {
    opacity: 0.8;
}

a.invite-new-user {
    margin-right: 25px;
    padding: 0px 0px;
    color: #0c0a3e;
    text-decoration: none;
    max-width: 150px;
    display: inline-block;
    font-weight: 600;
}

a.link {
    padding: 0px 0px;
    color: #0c0a3e;
    text-decoration: none;
    max-width: 150px;
    display: inline-block;
    font-weight: 600;
}

a.invite-new-user:hover {
    opacity: 0.8;
}

.heading-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Action-only rows (no section heading) still align controls to the right in classic UI. */
.heading-button:not(:has(:is(h1, h2, h3, h4, h5, h6))) {
    justify-content: flex-end;
}

.heading-button p {
    margin-bottom: 0px;
}

.heading-button label {
    margin-bottom: 0px;
}

a {
    text-decoration: none;
    color: #0c0a3e;
    transition: all 0.5s ease;
}

a:hover {
    opacity: 0.7;
}

/* A POST submit button standing in for what used to be an inline text link, as produced
   by `post_action_button` (macros/forms/post_action.html). A state-changing action has to
   be a form submit rather than an `href`, but it should still read as the link it
   replaced, and it cannot inherit the rule above. Bootstrap's `.btn btn-link` is not a
   substitute: it brings its own blue, an underline and a 1rem font size, and the `p-0
   border-0` utilities needed to tame it are `!important`, so they also flatten any
   border a call site wants. Table cells restyle this alongside their links — see
   table.css. */
.btn-inline-link {
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: baseline;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    color: var(--sc-brand-blue, #0c0a3e);
    transition: all 0.5s ease;
}

.btn-inline-link:hover {
    opacity: 0.7;
}

.view-content-labels {
    padding: 25px;
    background: #f8f9fa;
    margin-top: 33px;
    margin-bottom: 20px;
}

.view-content-labels p {
    font-size: 18px;
}

.view-content-labels p b {
    margin-right: 15px;
}


.page-section form.form .mb-3.form-check {
    text-align: center;
    width: 107px;
    margin: auto;
    margin-bottom: 5px !important;
}

section.inner-section.page-section.orinton .view-content-labels {
    text-align: center;
}

.safetyclerk-background {
    background: #FFFFFF;
    background-blend-mode: multiply;
    background: radial-gradient(50% 69.62% at 50% 50%, #DEF3EF 0%, rgba(222, 243, 239, 0) 100%);
}

.safetyclerk-app-background {
    background: linear-gradient(270deg, rgba(222, 243, 239, 0.00) -11.46%, rgba(222, 243, 239, 0.60) 92.67%), #FFF;
}

.safetyclerk-button {
    background-color: #0c0a3e !important;
    border-color: #0c0a3e !important;
    color: #fff !important;
}

.safetyclerk-button-red {
    background-color: #C0133D !important;
    border-color: #C0133D !important;
    color: #fff !important;
}

.safetyclerk-button-chips {
    background-color: #0c0a3e !important;
    border-color: #0c0a3e !important;
    color: #fff !important;
}

.safetyclerk-button-chips:hover {
    background-color: var(--bs-body-bg) !important;
    color: #0c0a3e !important;
}

.safetyclerk-button-chips:hover svg path {
    fill: #0c0a3e !important;
}

/* Handle icons color on hover */
.safetyclerk-button-chips:hover .stamp_icon svg path {
    fill: none !important;
}

.safetyclerk-button-chips:hover .stamp_icon svg path,
.safetyclerk-button-chips:hover .stamp_icon svg line,
.safetyclerk-button-chips:hover .stamp_icon svg rect {
    stroke: #0c0a3e !important;
}

.safetyclerk-button-chips:hover .analysis_document_icon svg rect,
.safetyclerk-button-chips:hover .analysis_document_icon svg polygon,
.safetyclerk-button-chips:hover .analysis_document_icon svg polyline {
    stroke: #0c0a3e !important;
}


.safetyclerk-button-chips-wrapper:hover {
    opacity: 1;
}

.project-chips-row {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.project-chips-row:last-child {
    margin-bottom: 0;
}

@media (min-width: 576px) {
    .project-chips-row .project-chips-item {
        flex: 1 1 0;
        padding: 0;
    }

    .project-chips-row .project-chips-item .btn {
        height: 100%;
        display: flex;
        align-items: center;
    }
}

@media (min-width: 900px) and (max-width: 991.98px) {
    .project-chips-row .project-chips-item .btn {
        min-height: 3.6rem;
        white-space: normal;
    }

    .project-chips-row .project-chips-item .btn span {
        line-height: 1.2;
    }
}

.wrapper {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.wrapper embed {
    height: 100%;
    width: 100%;
    object-fit: contain;
    overflow: scroll;
}

.page-section form.form .mb-3.form-check {
    width: 100%;
}

/*
    user invite step form css
*/
.invited-usr-step-form fieldset {
    background: white;
    border: 0 none;
    border-radius: 0.5rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding-bottom: 20px;
    position: relative;
}

.invited-usr-step-form .form-card {
    text-align: left;
}

/*Hide all except first fieldset*/
.invited-usr-step-form fieldset:not(:first-of-type) {
    display: none;
}

.invited-usr-step-form input,
.invited-usr-step-form textarea {
    padding: 8px 15px 8px 15px;
    border: 1px solid #ccc;
    border-radius: 0px;
    margin-bottom: 20px;
    margin-top: 2px;
}

.invited-usr-step-form input:focus,
.invited-usr-step-form textarea:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: 1px solid #0c0a3e;
    outline-width: 0;
}

/*Next Buttons*/
.invited-usr-step-form .action-button {
    width: 100px;
    background: #0c0a3e;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 0px 10px 5px;
    float: right;
}

.invited-usr-step-form .action-button:hover,
.invited-usr-step-form .action-button:focus {
    background-color: #0c0a3e;
}

/*Skip Buttons*/
.invited-usr-step-form .action-button-skip {
    width: 100px;
    background: #ea8f8f;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

.invited-usr-step-form .action-button-skip:hover,
.invited-usr-step-form .action-button-skip:focus {
    background-color: #c62222;
}

/*Previous Buttons*/
.invited-usr-step-form .action-button-previous {
    width: 100px;
    background: #616161;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 0px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px 10px 0px;
    float: right;
}

.invited-usr-step-form .action-button-previous:hover,
.invited-usr-step-form .action-button-previous:focus {
    background-color: #000000;
}

/*The background card*/
.user-invite-stepform-c .card {
    z-index: 0;
    border: none;
    position: relative;
}

/*Step Count*/
.user-invite-stepform-c .steps {
    color: gray;
    text-align: right;
}

/*Icon progressbar*/
.step-form-progressbar {
    margin-bottom: 30px;
    overflow: hidden;
    color: lightgrey;
}

.step-form-progressbar .active {
    color: #0c0a3e;
}

.step-form-progressbar li {
    list-style-type: none;
    font-size: 11px;
    width: 12%;
    float: left;
    position: relative;
    font-weight: 400;
}

/*Icons in the ProgressBar*/
.step-form-progressbar #set_password:before {
    font-family: FontAwesome;
    content: "\f13e";
}

.step-form-progressbar #personal:before {
    font-family: FontAwesome;
    content: "\f007";
}

.step-form-progressbar #company:before {
    font-family: FontAwesome;
    content: "\f0c0";
}

.step-form-progressbar #emergency:before {
    font-family: FontAwesome;
    content: "\f112";
}

.step-form-progressbar #sst_card:before {
    font-family: FontAwesome;
    content: "\f1c3";
}

.step-form-progressbar #other_card:before {
    font-family: FontAwesome;
    content: "\f2c2";
}

.step-form-progressbar #picture:before {
    font-family: FontAwesome;
    content: "\f030";
}

.step-form-progressbar #view_orientation:before {
    font-family: FontAwesome;
    content: "\f00c";
}

/*Icon ProgressBar before any progress*/
.step-form-progressbar li:before {
    width: 50px;
    height: 50px;
    line-height: 45px;
    display: block;
    font-size: 20px;
    color: #ffffff;
    background: lightgray;
    border-radius: 50%;
    margin: 0 auto 10px auto;
    padding: 2px;
}

/*ProgressBar connectors*/
.step-form-progressbar li:after {
    content: "";
    width: 100%;
    height: 2px;
    background: lightgray;
    position: absolute;
    left: 0;
    top: 25px;
    z-index: -1;
}

/*Color number of the step and the connector before it*/
.step-form-progressbar li.active:before,
.step-form-progressbar li.active:after {
    background: #0c0a3e;
}

/*Animated Progress Bar*/
.user-invite-stepform-c .progress {
    height: 20px;
}

.user-invite-stepform-c .progress-bar {
    background-color: #0c0a3e;
}

/* form error */
.form-group.has-error input {
    border-color: red !important;
}

.form-group.has-error p {
    color: red !important;
    margin-top: -20px !important;
}

/* Profile */
.contact-988-banner {
    background-color: #1D385E;
    color: #ffffff;
    padding: 35px 35px 35px 35px;
    text-align: center;
    border-top-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.contact-988-banner>h4 {
    font-weight: bold;
    font-size: 26px;
}

.contact-988-banner>p {
    font-size: 15px;
}

.contact-988-banner>a {
    background-color: #B5D334;
    color: #1D385E;
    font-weight: bold;
    padding: 9px 16px 9px 16px;
    border-radius: 24px;
}

/* profile picture preview  */
.pp-preview img {
    width: 65%;
    height: 500px;
    border-radius: 50%;
    margin: auto;
}

/* upload document radio btns css */
.upload-sst40-sst62-radios .upload-type-radios input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.upload-sst40-sst62-radios .upload-type-radios {
    cursor: pointer;
    /* width: 20%; */
}

.upload-sst40-sst62-radios .upload-type-radios .radio-content {
    padding: 15px;
    border: 2px solid #e1e2e7;
    border-radius: 10px;
    position: relative;
    margin: 5px;
}

.upload-sst40-sst62-radios .upload-type-radios .radio-content:hover {
    -webkit-box-shadow: 0px 3px 5px 0px #e8e8e8;
    box-shadow: 0px 3px 5px 0px #e8e8e8;
}

.upload-sst40-sst62-radios .upload-type-radios input[type="radio"]:checked+.radio-content:after {
    content: "";
    position: absolute;
    height: 8px;
    width: 8px;
    background: #216fe0;
    right: 7px;
    top: 5px;
    border-radius: 100%;
    border: 3px solid #fff;
    -webkit-box-shadow: 0px 0px 0px 2px #0066ff;
    box-shadow: 0px 0px 0px 2px #0066ff;
}

.upload-sst40-sst62-radios .upload-type-radios input[type="radio"]:checked+.radio-content {
    border: 2px solid #216ee0;
    background: #eaf1fe;
    -webkit-transition: ease-in 0.3s;
    -o-transition: ease-in 0.3s;
    transition: ease-in 0.3s;
}

/* user invite step form css ends here */


@media screen and (min-width: 660px) {
    .description {
        display: table-cell;
    }

    .project-description {
        display: table-cell;
    }

    .invited-by {
        display: table-cell;
    }

    a.invite-new-user {
        max-width: 100%;
    }

    .wrapper embed {
        height: 40rem;
    }
}


@media screen and (max-width: 991px) {
    .upload-sst40-sst62-radios {
        margin: 0 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding: 40px;
    }

    .upload-sst40-sst62-radios .upload-type-radios {
        width: 100%;
    }

    .upload-sst40-sst62-radios .upload-type-radios .radio-content .radio-details {
        width: 70%;
        display: inline-block;
    }

    .upload-sst40-sst62-radios .upload-type-radios input[type="radio"]:checked+.radio-content:after {
        top: 45%;
        -webkit-transform: translate(-50%);
        -ms-transform: translate(-50%);
        transform: translate(-50%);
    }

    /*Icon ProgressBar before any progress*/
    .step-form-progressbar li:before {
        width: 40px;
        height: 40px;
        line-height: 35px;
        display: block;
        font-size: 17px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px;
    }
}

@media screen and (max-width: 767px) {
    .upload-sst40-sst62-radios .upload-type-radios .radio-content .radio-details {
        width: 60%;
        display: inline-block;
    }

    /*Icon ProgressBar before any progress*/
    .step-form-progressbar li:before {
        width: 30px;
        height: 37px;
        line-height: 35px;
        display: block;
        font-size: 17px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px;
    }

    /* profile picture preview  */
    .pp-preview img {
        width: 85%;
        height: 500px;
        border-radius: 50%;
        margin: auto;
    }
}


@media screen and (max-width: 540px) {
    .upload-sst40-sst62-radios .upload-type-radios .radio-content img {
        margin-bottom: 20px;
        height: 56px;
        -webkit-transition: height 0.4s;
        -o-transition: height 0.4s;
        transition: height 0.4s;
    }

    .upload-sst40-sst62-radios .upload-type-radios input[type="radio"]:checked+.radio-content:after {
        top: 20px;
        right: 10px;
    }

    .upload-sst40-sst62-radios .upload-type-radios .radio-content .radio-details {
        width: 100%;
    }

    .upload-sst40-sst62-radios .upload-type-radios .radio-content {
        padding: 20px;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline;
    }

    /*Icon ProgressBar before any progress*/
    .step-form-progressbar li:before {
        width: 30px;
        height: 37px;
        line-height: 35px;
        display: block;
        font-size: 17px;
        color: #ffffff;
        background: lightgray;
        border-radius: 50%;
        margin: 0 auto 10px auto;
        padding: 2px;
    }

    /* profile picture preview  */
    .pp-preview img {
        width: 100%;
        height: 500px;
        border-radius: 50%;
        margin: auto;
    }
}

/* `sc_page_shell` (templates/macros/page_shell.html): full-width page layout whose left inset clears the back tab. */
.sc-page-shell {
    min-height: calc(100vh - 60px);
    padding: 20px 50px 48px 90px;
}

@media (max-width: 1199px) {
    .sc-page-shell {
        padding-left: 48px;
        padding-right: 32px;
    }
}

@media (max-width: 767px) {
    .sc-page-shell {
        padding: 20px 16px 32px;
    }
}

/* Increase Bootstrap's xxl default (1320px) to match design-system layout at 1440px viewport */
@media (min-width: 1400px) {
    .container,
    .container-xxl {
        max-width: 1380px;
    }
}

@media (min-width: 1600px) { /* New breakpoint for ultra-large screens */

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1540px; /* Increased max-width for better real estate usage */
    }
}

@media (min-width: 900px) and (max-width: 991.98px) {

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 100%;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

@media (min-width: 1800px) { /* New breakpoint for ultra-large screens */

    .container-xxl,
    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: 1740px; /* Increased max-width for better real estate usage */
    }
}

/* =====================================================
   FEATURE NAVIGATOR - Mobile-first feature navigation
   ===================================================== */


/* Feature Cards - Used in accordion */
.feature-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    color: #2b2b2b;
    transition: all 0.15s ease;
    min-height: 68px;
    width: 100%;
}

.feature-card:hover {
    background: #f8f9fa;
    border-color: #0C0A3E;
    color: #0C0A3E;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(12, 10, 62, 0.08);
}

.feature-card:active {
    background: #f0f0f5;
}

.feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: #0C0A3E;
    border-radius: 8px;
    margin-right: 12px;
    color: #ffffff;
}

.feature-card-icon svg {
    width: 20px;
    height: 20px;
}

.feature-card-icon i {
    font-size: 17px;
}

.feature-card:hover .feature-card-icon svg path {
    fill: #ffffff;
}

.feature-card-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    flex: 1;
}

/* Disabled State */
.feature-card-disabled {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
}

.feature-card-disabled:hover {
    background: #f8f9fa;
    border-color: #e9ecef;
    color: #6c757d;
    box-shadow: none;
}

.feature-card-disabled .feature-card-icon {
    background: #adb5bd;
}

/* Accordion Styling */
.feature-navigator .accordion-flush .accordion-item {
    border: none;
    border-bottom: 1px solid #e9ecef;
    border-radius: 0 !important;
}

.feature-navigator .accordion-flush .accordion-item:last-child {
    border-bottom: none;
}

.feature-navigator .accordion-button {
    padding: 14px 8px;
    font-weight: 700;
    color: #2b2b2b;
    background: transparent;
    font-size: 16px;
}

.feature-navigator .accordion-button:not(.collapsed) {
    background: transparent;
    color: #0C0A3E;
    box-shadow: none;
}

.feature-navigator .accordion-button:focus {
    box-shadow: none;
}

.feature-navigator .accordion-button::after {
    margin-left: 8px;
    width: 14px;
    height: 14px;
    background-size: 14px;
}

.feature-navigator .category-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #0C0A3E;
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
}

.feature-navigator .accordion-button:not(.collapsed) .category-icon {
    background: #0C0A3E;
}

.feature-navigator .category-title {
    font-size: 16px;
}

.feature-navigator .accordion-body {
    padding: 8px 0 16px 0;
    background: transparent;
}


/* Highlighted Search Results */
.feature-item.search-match .feature-card {
    border-color: #0C0A3E;
    background: #f8f9ff;
}

/* Hidden items during search */
.feature-item.search-hidden {
    display: none !important;
}

.feature-category.search-hidden {
    display: none !important;
}

/* Mobile Optimizations */
@media (max-width: 575.98px) {
    .feature-navigator-card .card-body {
        padding: 12px;
    }

    .feature-chip {
        padding: 10px 14px;
        font-size: 13px;
    }

    .feature-card {
        padding: 12px 12px;
    }

    .feature-card-icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        margin-right: 10px;
    }

    .feature-card-text {
        font-size: 15px;
    }

    .feature-navigator .accordion-button {
        padding: 14px 4px;
    }

    .feature-navigator .category-title {
        font-size: 15px;
    }

}

/* Tablet and up - expand accordion when searching */
@media (min-width: 768px) {
    .feature-navigator.searching .accordion-collapse {
        display: block !important;
    }

    .feature-navigator.searching .accordion-collapse.collapsing {
        transition: none;
    }
}

/* Better grid for features inside accordion */
@media (min-width: 576px) {
    .feature-navigator .accordion-body .row {
        --bs-gutter-x: 0.5rem;
        --bs-gutter-y: 0.5rem;
    }
}

@media (min-width: 992px) {
    .feature-navigator .accordion-body .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333%;
    }
}

/* Required-field marker.

   bootstrap-flask's `render_field` already tags a required field's group with `.required`, derived
   from the field's validators, so the marker follows the form definition. Opt in per form with
   `.sc-required-marks` rather than styling `.required` globally, so forms keep their current look
   until they are reviewed for it. */
.sc-required-marks .required > .form-label::after {
    content: " *";
    color: var(--sc-brand-red);
    font-weight: 600;
}

/* Signature pad.

   The `SignatureInput` widget renders `#sig-canvas`. This border used to be copied into a
   `{% block styles %}` in each of the 36 templates that render the field; it lives here so the
   pad looks the same everywhere and no template has to carry it. `touch-action: none` keeps a
   drawing gesture from scrolling the page under the finger.

   Page-level `#sig-canvas` rules still win: `{% block styles %}` is emitted after this file, so a
   page that needs a different canvas (the orientation self-affirmation form sizes its own, and
   shanty centres it) overrides these by source order. */
#sig-canvas {
    border: 2px dotted #cccccc;
    touch-action: none;
}