html {
    font-size: 14px;
}

.banner-link {
    padding-top: 0rem;
    padding-bottom: 0rem;
    height: auto;
}

.banner-image {
    left: 0;
    top: 0;
    height: 49px;
    object-fit: contain;
}

.nav-container-custom {
    padding-left: 0rem;
}

.ql-toolbar.ql-snow {
    border-radius: .5rem .5rem 0rem 0rem;
}
#quill-editor {
    border-radius: 0rem 0rem .5rem .5rem;
}
/* ── Registration Button Animation ── */
@keyframes he-btn-pop {
    0% {
        transform: scale(0.92);
        opacity: .6;
    }

    60% {
        transform: scale(1.04);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

    .he-btn-pop {
        animation: he-btn-pop .3s ease;
    }

    .he-btn-loading {
        pointer-events: none;
        opacity: .75;
    }

    @media (min-width: 576px) {
        /*    .banner-image {
        height: 51px;
    }*/
    }

    @media (min-width: 768px) {
        html {
            font-size: 16px;
        }

        .navbar-nav {
            padding: 0rem 0rem;
        }

        .banner-image {
            height: 74px;
        }
    }

    #searchInput {
        width: 100%;
        max-width: 250px;
    }

    @media only screen and (min-width: 0px) {

        .navbar-toggler {
            margin: 0rem;
        }

        .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;
        }

        html {
            position: relative;
            min-height: 100%;
        }

        body {
            margin-bottom: 60px;
        }

        .main-body {
            max-width: 850px;
            width: 100%;
            margin: auto;
        }
        /* Custom CSS */

        h1 {
            margin-bottom: 2rem;
        }

        .admin-buttons {
            max-width: 830px;
        }

        .event {
            display: flex;
            justify-content: start;
            align-items: center;
            min-height: 17rem;
            border-left: .2rem black solid;
            max-width: 830px;
            margin: auto;
            background-color: rgb(241, 241, 241);
            border-top: .1rem solid rgb(199, 199, 199);
            border-right: .1rem solid rgb(199, 199, 199);
            border-bottom: .1rem solid rgb(199, 199, 199);
            padding: 2rem 1rem;
            width: 100%;
        }

        .description {
            width: 830px;
            margin: auto;
            text-align: start;
        }

        .date {
            margin: 0rem 0rem;
        }

        h2 {
            padding: 1rem;
        }

        .date h2 > span {
            display: block;
            font-size: 3rem;
            margin-top: -.5rem;
        }

        .info {
            margin: 0rem 0rem 0rem 1rem;
            display: flex;
            flex-direction: column;
            align-content: start;
            justify-content: center;
            text-align: left;
            width: fit-content;
        }

            .info .time, .location {
                display: flex;
                justify-content: start;
                align-items: start;
                width: 100%;
            }

            .info .time {
                margin-bottom: .5rem;
            }

                .info .time > svg {
                    margin-right: .5rem;
                    width: 1rem;
                }

            .info .location > svg {
                margin-right: .5rem;
                width: 1.5rem;
            }

            .info .buttons {
                margin: 1rem 0rem 0rem 0rem;
                display: flex;
                flex-wrap: wrap;
                justify-content: start;
            }

                .info .buttons a, .info .buttons button {
                    margin-right: 1rem;
                    margin-bottom: 1rem;
                }

        h3 {
            font-size: 2rem;
            font-weight: bold;
        }

        h4, h5 {
            font-size: 1rem;
        }

        h4, h5 {
            margin-bottom: 0rem;
        }

        .pic {
            margin: 0rem 1rem 0rem 2rem;
            margin-left: auto;
        }

            .pic img {
                display: none;
                width: 285px;
                height: 162px;
                object-fit: cover;
                border-radius: 1rem;
            }
        /* Check-Ins Page */
        .profile-image {
            border-radius: 100%;
            object-fit: cover;
            margin-right: 1.5rem;
        }

        .person-info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: start;
            margin-right: 1.5rem;
        }

            .person-info h5 {
                padding-top: 0rem !important;
            }

            .person-info p {
                margin-bottom: .5rem;
            }

        #resultsList .person {
            max-width: 347px;
            height: auto;
            min-width: 20rem;
            margin-right: 1rem;
            margin-bottom: 1rem;
        }
    }

    @media only screen and (min-width: 768px) {
        .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;
        }

        html {
            position: relative;
            min-height: 100%;
        }

        body {
            margin-bottom: 60px;
        }

        h1 {
            margin-bottom: 2rem;
        }

        .admin-buttons {
            max-width: 830px;
        }

        .event {
            display: flex;
            justify-content: start;
            align-items: center;
            height: 15rem;
            border-left: .2rem black solid;
            max-width: 830px;
            margin: auto;
            background-color: rgb(241, 241, 241);
            border-top: .1rem solid rgb(199, 199, 199);
            border-right: .1rem solid rgb(199, 199, 199);
            border-bottom: .1rem solid rgb(199, 199, 199);
            padding: 2rem 1rem;
            height: auto;
        }

        .date {
            margin: 0rem 1rem;
        }

            .date h2 > span {
                display: block;
                font-size: 3rem;
                margin-top: -.5rem;
            }

        .info {
            margin: 0rem 1rem;
            display: flex;
            max-width: 310px;
            flex-wrap: wrap;
            flex-direction: column;
            align-content: start;
            justify-content: center;
            text-align: left;
        }

            .info .time, .location {
                display: flex;
                justify-content: start;
                align-items: start;
                width: 100%;
            }

            .info .buttons a, .info .buttons button {
                margin-bottom: 1rem;
            }

        .pic img {
            display: unset;
            width: 213.75px;
            height: 121.5px;
            object-fit: cover;
            border-radius: 1rem;
        }
    }

    @media only screen and (min-width: 1024px) {
        .pic img {
            width: 285px;
            height: 162px;
            object-fit: cover;
            border-radius: 1rem;
        }

        .info .buttons a, .info .buttons button {
            margin-bottom: 0rem;
        }
    }

    @media only screen and (min-width: 1300px) {
    }
    /* Password Reset */
    /* Card styling */
    .auth-card {
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(16,24,40,.08);
        box-shadow: 0 10px 30px rgba(16,24,40,.08);
        border-radius: 1rem;
    }
        /* Softer inputs */
        .auth-card .form-control {
            background-color: #f7f9fc;
            border-color: rgba(16,24,40,.14);
        }

            .auth-card .form-control:focus {
                background-color: #ffffff;
                border-color: rgba(var(--bs-primary-rgb), .45);
                box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .12);
            }
    /* Text tweaks */
    .auth-muted {
        color: #5b6776 !important;
    }
    /*------------------*/
    /* Make the bootstrap-select control look like a modern input */
    .bootstrap-select > .dropdown-toggle {
        border-radius: .75rem;
        padding: .65rem .9rem;
        border: 1px solid rgba(0,0,0,.12);
        background: rgba(255,255,255,.7);
        box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
        /* Focus state that matches Bootstrap vibe */
        .bootstrap-select.show > .dropdown-toggle,
        .bootstrap-select > .dropdown-toggle:focus {
            border-color: rgba(13,110,253,.35);
            box-shadow: 0 0 0 .2rem rgba(13,110,253,.12);
        }
    /* Dropdown menu */
    .bootstrap-select .dropdown-menu {
        border-radius: .75rem;
        border: 1px solid rgba(0,0,0,.10);
        box-shadow: 0 12px 28px rgba(0,0,0,.10);
        padding: .35rem;
    }
        /* Fix tall/roomy option spacing and make it feel tighter */
        .bootstrap-select .dropdown-menu .dropdown-item,
        .bootstrap-select .dropdown-menu li a {
            border-radius: .5rem;
            padding: .45rem .75rem;
            line-height: 1.2;
        }
            /* Hover + selected states */
            .bootstrap-select .dropdown-menu .dropdown-item:hover,
            .bootstrap-select .dropdown-menu li a:hover {
                background: rgba(0,0,0,.04);
            }

        .bootstrap-select .dropdown-menu .selected > a,
        .bootstrap-select .dropdown-menu .active > a {
            background: rgba(13,110,253,.10);
        }
    /* Search input at top */
    .bootstrap-select .bs-searchbox .form-control {
        border-radius: .6rem;
    }
    /* Prevent selected text from wrapping ugly */
    .bootstrap-select .filter-option-inner-inner {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .dropdown-item.active {
        color: black !important;
    }

    .bs-searchbox {
        padding: 10px 8px;
    }
    /* site.css */
    .soft-navbar {
        border-bottom-color: rgba(16, 24, 40, 0.08);
    }

        .soft-navbar .navbar-brand {
            padding-top: .35rem;
            padding-bottom: .35rem;
        }

        .soft-navbar .nav-link {
            color: #212529 !important;
            font-weight: 500;
            border-radius: .75rem;
            padding: .5rem .75rem;
            margin-right: .25rem;
        }

            .soft-navbar .nav-link:hover,
            .soft-navbar .nav-link:focus {
                color: rgba(16, 24, 40, 0.95);
                background-color: rgba(16, 24, 40, 0.04);
            }

            .soft-navbar .nav-link:focus-visible,
            .soft-navbar .navbar-toggler:focus-visible {
                outline: 2px solid rgba(13, 110, 253, 0.35);
                outline-offset: 2px;
            }

    /* ===== Global Toast System ===== */
.he-toast-container {
    z-index: 1080; /* above most content, below modal */
    margin-bottom: 4rem;
}

.toast.he-toast {
    position: relative;
    min-width: 320px;
    max-width: 420px;
    border: 1px solid rgba(15, 23, 42, .12);
    border-radius: 1rem;
    background: #fff;
    color: #212529;
    box-shadow: 0 14px 32px rgba(15, 23, 42, .14);
    overflow: hidden;
}

.toast.he-toast::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: .28rem;
    background: rgba(13, 110, 253, .45); /* default/info */
}

.toast.he-toast .toast-header {
    background: transparent;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
    padding: .65rem .9rem;
}

.toast.he-toast .toast-title {
    font-weight: 600;
    color: #0f172a;
}

.toast.he-toast .toast-body {
    padding: .8rem .9rem .95rem;
    color: rgba(33, 37, 41, .9);
    line-height: 1.35;
}

/* Variants */
.toast.he-toast.he-toast-success::before { background: rgba(25, 135, 84, .55); }
.toast.he-toast.he-toast-warning::before { background: rgba(255, 193, 7, .75); }
.toast.he-toast.he-toast-danger::before  { background: rgba(220, 53, 69, .65); }
.toast.he-toast.he-toast-info::before    { background: rgba(13, 110, 253, .45); }