h1:focus {
    outline: none;
}
.media-pill {
    min-width: 320px;
    max-width: 400px;
    border-radius: 12px;
    background-color: #21373f; /* navbar color */
    color: #fff;
    box-shadow: 0 6px 18px rgba(33,55,63,0.06);
}
.media-pill a { color: #ffe480; }

.youtube-card {
    width: 320px;
    max-width: 520px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(33,55,63,0.06);
    overflow: hidden;
}

.media-pill {
    border-radius: 50px;
    padding: 1rem;
    width: 360px;
    max-width: 520px;
    display: flex;
    flex-direction: column;
}

.media-top { padding: 0 0.5rem; }
.media-bottom { padding: 0.5rem 0.5rem 0.5rem 0.5rem; }

/* Events table layout: use native table layout so colgroup widths line up between header and rows */
.events-table { width: 100%; }

/* header spacing - padding kept to visually separate from page edges */
.events-header { border-bottom: 1px solid rgba(0,0,0,0.06); padding-left: 2rem; padding-right: 2rem; }

/* Pill uses full width */
.event-pill { width: 100%; border-radius: 999px; padding: 14px 24px; background-color: #21373f; color: #fff; box-shadow: 0 6px 18px rgba(33,55,63,0.06); margin-bottom: 1rem; }
.event-row { width: 100%; }
.events-list { width:100%; }

/* Text truncation for table cells */
.events-list tbody tr.events-row td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Responsive padding adjustments */
@media (max-width: 768px) {
    .events-list thead.events-header th,
    .events-list tbody tr.events-row td { padding-left: 0.75rem; padding-right: 0.75rem; }
    .event-pill { padding: 10px 16px; }
}

/* ensure the events list container stretches and grid columns can shrink properly */
.events-list { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 1rem; }
.events-header, .event-row { width: 100%; box-sizing: border-box; }
.event-row > * { min-width: 0; }

/* Table styling for events list rows */
.events-list thead.events-header th { border-bottom: 1px solid rgba(0,0,0,0.06); padding: 1.25rem 2rem; text-align: left; box-sizing: border-box; }
.events-list thead.events-header { display: table-header-group; }
/* header alignment per column to match td */
.events-list thead.events-header th.col-title { text-align: left; }
.events-list thead.events-header th.col-date { text-align: center; }
.events-list thead.events-header th.col-time { text-align: center; }
.events-list thead.events-header th.col-location { text-align: left; }
.events-list thead.events-header th.col-action { text-align: right; }
.events-list tbody tr.events-row { background-color: #21373f; color: #fff; box-shadow: 0 6px 18px rgba(33,55,63,0.06); }
.events-list tbody tr.events-row td { vertical-align: middle; padding: 1.25rem 2rem; box-sizing: border-box; }
.events-list tbody tr.events-row td.col-date,
.events-list tbody tr.events-row td.col-time { text-align: center; }
.events-list tbody tr.events-row td.col-action { text-align: right; }

/* Keep action cell from truncating with ellipsis and nudge the button slightly left */
.events-list tbody tr.events-row td.col-action {
    /* allow the button to display fully instead of showing '...' */
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    padding-right: 1rem; /* reduce right padding to move the button left */
}
.events-list thead.events-header th:last-child { text-align: right; }
.events-list tbody tr.events-row td.col-action { text-align: right; }
.events-list tbody tr.events-row td.col-title { font-weight: 700; }
.events-list tbody tr.events-row td.col-location { color: #fff; }
.events-list tbody tr.events-row .btn-outline-light { border-color: rgba(255,255,255,0.6); color: #fff; }
/* Make date and time inside event rows solid white */
.events-list tbody tr.events-row td.col-date,
.events-list tbody tr.events-row td.col-time {
    color: #fff;
}

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

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.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."
    }
.footer {
    text-align: center;
    font-size: 0.9rem;
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Make footer stick to bottom when page content is short */
html, body {
    height: 100%;
}
/* Use column flex layout so footer can stick to bottom when content is short */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
/* Ensure responsive nav links have appropriate spacing on mobile */
.navbar-nav .nav-link { padding: 0.5rem 1rem; }
.navbar-toggler { border-radius: 8px; }
main#page-top {
    flex: 1 0 auto;
}
/* Table hero styles */
.table-hero {
    background-color: #21373f; /* same as navbar */
    padding-top: 5rem;
    padding-bottom: 3rem;
    color: #fff;
}
.hero-pill {
    max-width: 900px;
    margin: 0 auto; /* center the pill */
    background-color: white; /* white background for the pill */
    color: #21373f; /* text color matching navbar */
    padding: 0.5rem 1rem; /* padding for the pill */
    border-radius: 50px; /* rounded pill shape */
}

/* Masthead slideshow - use nav color for the slide text */
.masthead {
    padding: 4rem 0 3rem 0;
}
.masthead-slideshow { position: relative; max-width: 900px; margin: 0 auto 1rem auto; }
.slides-wrapper { position: relative; min-height: 48px; }
.slide { position: absolute; left: 0; top: 0; width: 100%; display:flex; align-items:center; justify-content:center; opacity: 0; transition: opacity 800ms ease-in-out; }
.slide.active { opacity: 1; }
.masthead-subheading { font-size: 15rem; color: #21373f; font-weight: 700; font-style: italic; line-height: 1; }
.masthead-heading { font-size: 2.25rem; color: #21373f; }
.slide-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.04); border: none; color: #21373f; font-size: 1.5rem; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.slide-btn.prev { left: -16px; }
.slide-btn.next { right: -16px; }
.slide-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(33,55,63,0.15); }

/* Responsive sizing for slideshow text */
@media (max-width: 1200px) {
    .masthead-subheading { font-size: 12rem; }
}
@media (max-width: 992px) {
    .masthead-subheading { font-size: 9rem; }
}
@media (max-width: 576px) {
    .masthead-subheading { font-size: 4.5rem; }
}

/* Make nav-tabs and pills use the main navbar color */
.nav-tabs .nav-link,
.nav-pills .nav-link {
    color: #21373f;
}
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    background-color: #21373f !important;
    color: #fff !important;
    border-color: #21373f !important;
}

/* Buttons: match main nav color for primary and outline-primary */
.btn-primary {
    color: #fff !important;
    background-color: #21373f !important;
    border-color: #21373f !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: #182a2f !important;
    border-color: #182a2f !important;
}
.btn-outline-primary {
    color: #21373f !important;
    border-color: #21373f !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff !important;
    background-color: #21373f !important;
    border-color: #21373f !important;
}

/* Event pill card styling on the public table page */
.event-pill {
    min-width: 300px;
    max-width: 520px;
    padding: 1rem 1.25rem;
    border-radius: 50px;
    background-color: #fff;
    color: #21373f;
    box-shadow: 0 6px 18px rgba(33,55,63,0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.event-pill .event-info {
    display: flex;
    flex-direction: column;
}
.event-pill .event-meta {
    font-size: 0.9rem;
    color: #6c757d;
}
.event-pill .event-meta .meta-row {
    display: inline-block;
    margin-right: 0.5rem;
}

/* media pill when used for media items - dark background */
.event-pill[style] {
    /* inline style used to set background on per-item basis */
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Admin page: make headers and warning buttons match navbar color (#21373f) */
.admin-page .text-primary,
.admin-page .card-title,
.admin-page .section-heading,
.admin-page h4,
.admin-page h5 {
    color: #21373f !important;
}

.admin-page .btn-warning {
    background-color: #21373f !important;
    border-color: #21373f !important;
    color: #fff !important;
}
.admin-page .btn-warning:hover,
.admin-page .btn-warning:focus {
    background-color: #182a2f !important;
    border-color: #182a2f !important;
    color: #fff !important;
}

.admin-page .btn-outline-primary {
    color: #21373f !important;
    border-color: #21373f !important;
}
.admin-page .btn-outline-primary:hover {
    color: #fff !important;
    background-color: #21373f !important;
}