/* California SPA - Site overrides + Bootstrap 3 to 5 compatibility */

/* Override Bootstrap default .btn padding (10px 40px is too wide) */
.btn {
    /* padding: 6px 12px; */
}

.navbar-toggle {
    --bs-btn-font-size: 14px;
}

.h4, h4 {
    font-size: 18px;
}

a {
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
}

body {
    font-size: 14px;
}

.page-title {
    margin-top: 20px;
    font-weight: 300;
}

.page-title {
    font-family: Patrick Hand;
    font-size: 25px;
}

h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 20px;
    margin-bottom: 10px;
}

h3, .h3 {
    font-size: 24px;
}

.page-header {
    padding-bottom: 9px;
    margin: 10px 0 10px;
    border-bottom: 1px solid #eee;
}

.btn-action:active {
    background: #FF8C00;
}

.btn-action:hover, .btn-action:focus {
    color: #fff;
    background: #FF9B22;
    text-decoration: none;
}

.btn-action, .btn-primary {
    color: darkgreen !important;
}

label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: 700;
}

/* ============================================================
   Bootstrap 3 → Bootstrap 5 Compatibility Layer
   These rules replicate BS3 classes that don't exist in BS5
   so the original HTML markup works with BS5 unchanged.
   ============================================================ */

/* --- Override BS5 .navbar to use BS3 block layout --- */
.navbar.navbar-inverse {
    display: block !important;
    flex-wrap: nowrap !important;
    padding-bottom: 0 !important;
}
:root {
    --bs-modal-width: 600px;
}
th.fc-day-header.ui-widget-header > span {
    color: #a94442 !important;
}
.fc .fc-day-other .fc-daygrid-day-top {
    opacity: 1 !important;
}
.fc .fc-daygrid-day-number {
    color: #a94442;
    text-decoration: none;
    font-size: 17px;
}
.fc .fc-col-header-cell-cushion {
    color: #a94442 !important;
    font-size: 16px !important;
    font-weight:bold !important;
    text-decoration: none !important;
}
.fc .fc-toolbar-title {
    font-size: 30px !important;
    font-weight: bold !important;
    color: #81d742 !important;
}
.modal-header {
    padding: 15px !important;
    border-bottom: 1px solid #e5e5e5 !important;
    min-height: 16.428571429px;
}
/* --- Override BS5 .nav inside navbar to use BS3 float layout --- */
.navbar-inverse .nav.navbar-nav {
    display: block !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fc-event-main div, .fc-event-main div span {
    color: #a94442 !important;
    
}
.navbar-inverse .navbar-nav > li {
    float: left;
    list-style: none;
}
.fc-day-past {
    background-color: grey !important;
    border-color: grey !important;
}
.fc-daygrid-day {
    border: 1px solid #FFFDD0 !important;
}
.fc-day-today, .fc-day-future {
    background: white !important;
    border: 1px solid grey !important;
}
.fc-daygrid-day-top
{
    /*height:20px !important;*/
}
.fc .fc-daygrid-day-number {
    position: relative;
    z-index: 4;
    padding-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    padding-right: 5px !important;
}
.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
    margin-bottom: 6px !important;
}

/*.fc-event-main div b{
    font-size:16px !important;
}*/

/* FullCalendar button styling — FC5 + FC3 buttons same look */
.fc .fc-button,
.fc .fc-button-primary,
.fc .fc-button-primary:not(:disabled),
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:focus,
.fc .fc-button-primary:hover,
.fc-prev-button, .fc-next-button,
.fc-state-default,
.fc button.ui-state-default,
.ui-state-default.fc-corner-left,
.ui-state-default.fc-corner-right,
.fc-toolbar .fc-button,
.fc-toolbar .ui-button,
button.fc-month-button,
.fc-month-button.ui-state-default,
.fc-header-toolbar .ui-state-default,
.ui-widget-header .ui-state-default {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000 !important;
    border: 1px solid #555 !important;
    text-shadow: none !important;
    /* font-weight: bold !important; */
    font-size: 14px !important;
    box-shadow: none !important;
}
/* FC3 jQuery UI button override — ensure no jQuery UI theme leaks through */
.fc .ui-state-default,
.fc .ui-state-hover,
.fc .ui-state-active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    color: #000 !important;
    border: 1px solid #555 !important;
    text-shadow: none !important;
}
.fc .fc-button:hover,
.fc .fc-button-primary:hover,
.fc-prev-button:hover, .fc-next-button:hover,
.fc-state-default:hover,
button.fc-month-button:hover {
    background: #e0e0e0 !important;
    color: #000 !important;
}

/* Modal header — Close button on right, title on left (V1 layout) */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.modal-header .close {
    order: 2;
}
.modal-header .modal-title,
.modal-header h4 {
    order: 1;
}

/* Hotel Calendar Modal — inherits global .fc-* admin theme. No overrides. */

/* BS5 sets hr opacity:0.25 making golden lines invisible. Restore V1 full opacity */
hr {
    opacity: 1 !important;
    border-top: 1px solid #f8d66a !important;
    color: #f8d66a !important;
}


/* Make page-title headings flex so float-end buttons align correctly */
.page-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap;
    gap: 8px;
}
.page-title .btn {
    float: none !important;
    flex-shrink: 0;
    margin-top: 0 !important;
}
.btn-close {
    --bs-btn-close-bg: none !important;
    /* --bs-btn-close-color: #000;
     --bs-btn-close-bg: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e);  
    --bs-btn-close-opacity: 0.5;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    --bs-btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);
    box-sizing: content-box;
    width: 1em;
    height: 1em;
    padding: .25em .25em;
    color: var(--bs-btn-close-color);
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    opacity: var(--bs-btn-close-opacity);*/
}
.active > .page-link, .page-link.active {
    background-color: #f8d66a !important;
    border-color: #f8d66a !important;
}
.close {
    color: white;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    float: right;
    opacity: 1;
    line-height: 1;
    padding: 0;
}
.well-sm {
    padding: 9px;
    border-radius: 3px;
}
label, .sv-qlabel {
    font-size: 16px !important;
}

span, .sv-answer {
    color: #f8d66a;
}

label, .sv-qlabel, .sv-score, .sv-clabel, .btn-close {
    color: #b30afb !important;
}
.sv-q {
    margin-bottom: 15px !important;
}
.modal {
    --bs-modal-bg: #6e0202 !important;
    /* --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color:;
  
    --bs-modal-border-color: var(--bs-border-color-translucent);
    --bs-modal-border-width: var(--bs-border-width);
    --bs-modal-border-radius: var(--bs-border-radius-lg);
    --bs-modal-box-shadow: var(--bs-box-shadow-sm);
    --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: var(--bs-border-color);
    --bs-modal-header-border-width: var(--bs-border-width);
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg:;
    --bs-modal-footer-border-color: var(--bs-border-color);
    --bs-modal-footer-border-width: var(--bs-border-width);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;*/
}

.table {
 /*   --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-body-bg);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bs-emphasis-color);
    --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
    --bs-table-active-color: var(--bs-emphasis-color);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bs-emphasis-color);
    --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
    width: 100%;
    margin-bottom: 1rem;
    vertical-align: top;*/
    border-color: white !important;
}

/* ── "NEED HELP" golden border box – global (MainIndex.css not loaded on all layouts) ── */
.box {
    width: auto;
    border: 4px solid #FFD700;
    box-shadow: inset 0 -1px 0 0 #FFD700, inset 0 1px 0 0 #FFD700,
                0 1px 0 0 #FFD700, 0 -1px 0 0 #FFD700;
    height: auto;
    color: #f8d66a !important;
    background: transparent;
    border-radius: 17px;
    margin: 40px auto !important;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 14px;
}
.box > strong { font-size: 21px !important; font-weight: bold; }
.box p, .box > p { color: #f8d66a !important; margin: 0 !important; }
.effect1 > p { font-size: 19px; }

.well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
.navbar-inverse .navbar-nav > li > a {
    color: #b30af3 !important;
    font-size: 20px;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: #81d742 !important;
}

.navbar-nav .btn {
    border: 1px solid rgba(255, 255, 255, .2);
    margin-left: 5px;
    margin-top: 5px;
    padding: 10px 12px !important;
}

.navbar-inverse .navbar-nav > li > a.btn {
    font-size: 18px !important;
}

.navbar-nav a.btn:focus,
.navbar-nav a.btn:hover {
    border: 1px solid rgba(255, 255, 255, .6);
}

.navbar-inverse .navbar-nav > .active > a {
    color: #b30af3 !important;
    background: none;
}

.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #81d742 !important;
    background: none;
}

.navbar-inverse .navbar-brand {
    color: #9d9d9d;
    float: left;
    display: block;
    width: 286px !important;
}

/* --- BS3 navbar-fixed-top --- */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    border-width: 0 0 1px;
}

/* --- BS3 navbar-header --- */
.navbar-header {
    float: left;
}

@media (max-width: 767px) {
    .navbar-header {
        float: none;
    }
}

/* --- BS3 navbar-collapse: visible on desktop, collapsible on mobile --- */
.navbar-inverse .navbar-collapse {
    overflow: hidden;
}

@media (min-width: 768px) {
    .navbar-inverse .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* --- BS3 navbar-toggle (hamburger button) --- */
.navbar-toggle {
    position: relative;
    float: right;
    padding: 9px 10px;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 8px;
    background-color: transparent;
    background-image: none;
    border: 1px solid #333;
    border-radius: 4px;
    display: none;
    cursor: pointer;
}

.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
    background-color: #b30afb !important;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 4px;
}

@media (max-width: 767px) {
    .navbar-toggle {
        display: block;
    }

    .navbar-inverse .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-inverse .navbar-collapse.collapse.show {
        display: block !important;
    }

    .navbar-inverse .navbar-nav {
        float: none !important;
        margin: 0;
    }

    .navbar-inverse .navbar-nav > li {
        float: none;
    }

    .navbar-inverse .navbar-nav > li > a {
        padding: 10px 15px;
    }
}

/* --- BS3→BS5 fix: images directly inside .row should not stretch --- */
/* In BS3 .row was display:block; in BS5 it's display:flex which stretches child images */
.row > img {
    max-width: none;
    width: auto;
    flex: 0 0 auto;
}

/* Center images inside .row.text-center (BS5 flex needs justify-content) */
.row.text-center {
    justify-content: center;
}

/* --- BS3→BS5 fix: tables inside .row need full width --- */
/* In BS3 .row was display:block; tables flowed normally at 100%.
   In BS5 .row is display:flex; tables as flex items may shrink/misalign. */
.row > table {
    flex: 0 0 100%;
    width: 100% !important;
}

/* Tables used for centering content (with col-md-4 empty cells on sides) */
table.col-md-12,
table.col-sm-12 {
    width: 100% !important;
}

/* Ensure td elements with col-* classes get proper widths inside tables */
table td[class*="col-md-4"] {
    width: 33.33333333%;
}
table td[class*="col-md-6"] {
    width: 50%;
}

/* --- BS3 pull-right / pull-left --- */
.pull-right {
    float: right !important;
}

.pull-left {
    float: left !important;
}

/* --- BS3 text-right / text-left (renamed to text-end / text-start in BS5) --- */
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

/* --- BS3 col-xs-* mapped to BS5 col-* (base mobile-first defaults) --- */
/* In BS3, col-xs-* was the base that applied at all sizes, overridden by
   col-sm/md/lg at their breakpoints. In BS5 there is no col-xs-*.
   We define col-xs-* at mobile only, PLUS ensure article.maincontent
   (which uses col-xs-12 as its only sizing) gets 100% width globally.  */
@media (max-width: 575.98px) {
    .col-xs-1  { flex: 0 0 auto; width: 8.33333333%; }
    .col-xs-2  { flex: 0 0 auto; width: 16.66666667%; }
    .col-xs-3  { flex: 0 0 auto; width: 25%; }
    .col-xs-4  { flex: 0 0 auto; width: 33.33333333%; }
    .col-xs-5  { flex: 0 0 auto; width: 41.66666667%; }
    .col-xs-6  { flex: 0 0 auto; width: 50%; }
    .col-xs-7  { flex: 0 0 auto; width: 58.33333333%; }
    .col-xs-8  { flex: 0 0 auto; width: 66.66666667%; }
    .col-xs-9  { flex: 0 0 auto; width: 75%; }
    .col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
    .col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
    .col-xs-12 { flex: 0 0 auto; width: 100%; }
}

/* Article.maincontent uses col-xs-12 as its ONLY column class —
   ensure it's always full width (BS3 behavior). Higher specificity
   so it doesn't break col-md-3, col-sm-6 etc. on other elements. */
article.col-xs-12.maincontent,
.row > .col-xs-12:only-child {
    flex: 0 0 auto;
    width: 100%;
}

/* --- BS3→BS5 fix: partial-width col-* need float:left ---
   In BS3, col-md-2 through col-lg-11 used float:left in ANY parent.
   In BS5, they only flex inside .row. Restore float for all partial-width cols.
   Full-width (col-*-12, col-xs-12) don't need float. */
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,
.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,
.col-sm-1,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,
.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-11 {
    float: left;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Inside .row, BS5 flex overrides float — no conflict */

/* Clearfix for containers with floated children */
.panel-body::after,
.col-lg-12::after,
.col-md-12::after,
.col-sm-12::after,
article.maincontent::after {
    content: "";
    display: table;
    clear: both;
}

/* --- BS3 col-*-offset-* (BS5 uses offset-*-*) --- */
/* Offsets must be inside media queries to match BS3 behavior */
@media (min-width: 576px) {
    .col-sm-offset-1 { margin-left: 8.33333333%; }
    .col-sm-offset-2 { margin-left: 16.66666667%; }
    .col-sm-offset-3 { margin-left: 25%; }
    .col-sm-offset-4 { margin-left: 33.33333333%; }
}
@media (min-width: 768px) {
    .col-md-offset-1 { margin-left: 8.33333333%; }
    .col-md-offset-2 { margin-left: 16.66666667%; }
    .col-md-offset-3 { margin-left: 25%; }
    .col-md-offset-4 { margin-left: 33.33333333%; }
    .col-md-offset-5 { margin-left: 41.66666667%; }
    .col-md-offset-6 { margin-left: 50%; }
    .col-md-offset-7 { margin-left: 58.33333333%; }
    .col-md-offset-8 { margin-left: 66.66666667%; }
    .col-md-offset-9 { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
}
@media (min-width: 992px) {
    .col-lg-offset-1 { margin-left: 8.33333333%; }
    .col-lg-offset-2 { margin-left: 16.66666667%; }
    .col-lg-offset-3 { margin-left: 25%; }
}

/* --- BS3 btn-block (removed in BS5) --- */
.btn-block {
    display: block;
    width: 100%;
}

/* --- BS3 progress-bar contextual colors (removed in BS5) --- */
.progress-bar-success { background-color: #5cb85c; }
.progress-bar-info    { background-color: #5bc0de; }
.progress-bar-warning { background-color: #f0ad4e; }
.progress-bar-danger  { background-color: #d9534f; }

/* --- BS3 panel → replicate with same classes --- */
/* Panel border/bg comes from main.css - do not override */

.panel-default {
    border-color: #f8d66a;
}

.panel-body {
    padding: 15px;
}

.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

/* --- BS3 page-header --- */
/* Page-header border comes from main.css - do not override */

/* ============================================================
   Original Site Design Overrides
   ============================================================ */

.box1 {
    width: auto;
    border: 4px solid #FFD700;
    box-shadow: inset 0 -1px 0 0 #FFD700, inset 0 1px 0 0 #FFD700, 0 1px 0 0 #FFD700, 0 -1px 0 0 #FFD700;
    height: auto;
    color: #f8d66a !important;
    background: transparent;
    border-radius: 17px;
    margin: 10px !important;
    padding-left: 40px;
    padding-right: 40px;
    font-size: 14px;
}

.navbar-brand {
    width: 286px !important;
}

/* JobDivbox responsive media queries */
@media screen and (min-width:623px) and (max-width:767px) {
    .JobDivbox {
        margin-left: 154px !important;
    }
}

@media screen and (min-width:600px) and (max-width:623px) {
    .JobDivbox {
        margin-left: 139px !important;
    }
}

@media screen and (min-width:562px) and (max-width:600px) {
    .JobDivbox {
        margin-left: 126px !important;
    }
}

@media screen and (max-width:400px) {
    .JobDivbox {
        margin-left: 78px !important;
    }
}

@media screen and (min-width:511px) and (max-width:562px) {
    .JobDivbox {
        margin-left: 116px !important;
    }
}

@media screen and (min-width:400px) and (max-width:511px) {
    .JobDivbox {
        margin-left: 110px !important;
    }
}

/* Navbar responsive font size */
@media (max-width: 1000px) and (min-width: 768px) {
    .navbar-nav {
        margin: 0px !important;
    }

    .navbar-inverse .navbar-nav > li > a,
    .navbar-inverse .navbar-nav > .open ul > a {
        color: #b30af3 !important;
        font-size: 12px !important;
    }
}

.box65 {
    width: 65% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.box50 {
    width: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Validation styles */
.field-validation-error > span {
    color: red;
}

.input-validation-error {
    border: red solid 2px;
}

/* --- Navbar .btn (LOGIN button) - violet text, green on hover --- */
.navbar-inverse .navbar-nav > li > a.btn {
    background: none !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    color: #b30af3 !important;
    margin-left: 5px;
    margin-top: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-inverse .navbar-nav > li > a.btn:hover,
.navbar-inverse .navbar-nav > li > a.btn:focus {
    border-color: rgba(255, 255, 255, .6) !important;
    color: #81d742 !important;
}

/* --- Purple text utility class --- */
.colb30af3 {
    color: #b30af3 !important;
}

/* btn-action / btn-primary: styling comes from bootstrap-theme.css (orange gradient)
   and main.css (color: darkgreen). Only override BS5 defaults that conflict.        */
.btn-action,
.btn-primary {
    background-image: linear-gradient(to bottom, #FF9B22 0%, #FF8C00 100%);
    background-color: #FF9B22;
    border: 0 none;
    font-size: 14px;
}

.btn-action:hover,
.btn-action:focus,
.btn-primary:hover,
.btn-primary:focus {
    background: #FF9B22;
}

/* --- BS3 text-danger (ensure it matches original) --- */
.text-danger {
    color: #a94442 !important;
}

/* --- BS3 form-control in dark theme --- */
.form-control {
    background-color: #fff;
    color: #333;
}

/* --- BS3 select.form-control (BS5 uses .form-select) --- */
select.form-control {
    appearance: auto;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    padding: 6px 12px;
    height: auto;
}

/* --- top-margin spacing used in forms --- */
.top-margin {
    margin-top: 20px;
}

/* --- notDisplay utility class --- */
.notDisplay {
    display: none;
}

/* ============================================================
   Bootstrap 5 Table Reset — site uses dark red backgrounds.
   BS5 forces --bs-table-bg: var(--bs-body-bg) which renders
   as white/grey; override to transparent so parent bg shows.
   ============================================================ */
.table {
    --bs-table-bg:           transparent;
    --bs-table-color:        #f8d66a;
    --bs-table-striped-bg:   rgba(255, 255, 255, 0.05);
    --bs-table-striped-color: #f8d66a;
    --bs-table-hover-bg:     rgba(255, 255, 255, 0.08);
    --bs-table-hover-color:  #f8d66a;
    --bs-table-border-color: rgba(255, 255, 255, 0.15);
    color: #f8d66a;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: #f8d66a;
    box-shadow: none;
}

/* --- Modal loading overlay --- */
.modal-loader {
    display: none;
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(110, 2, 2, 0.9);
    z-index: 10;
    text-align: center;
    padding-top: 30%;
    font-family: 'Patrick Hand', cursive;
    font-size: 22px;
    color: #81d742;
}
.modal-loader.active { display: block; }
.modal-body { position: relative; }

/* --- BS3 .form-group had margin-bottom:15px; BS5 removed it --- */
.form-group {
    margin-bottom: 15px;
}

/* --- v1 spacing: buttons after form elements need margin --- */
.widget-foot .btn,
.form-group + .btn {
    margin-top: 10px;
}

/* --- v1 spacing: general element spacing --- */
.panel-body .btn + .btn {
    margin-left: 5px;
}

/* --- Faster modal transitions (v1 BS3 was snappier than BS5 default 300ms) --- */
.modal.fade .modal-dialog {
    transition: transform 0.15s ease-out !important;
}
.modal.fade {
    transition: opacity 0.15s linear !important;
}
.modal-backdrop.fade {
    transition: opacity 0.15s linear !important;
}

/* --- v1 utility classes used in layouts --- */
.hgt {
    height: 500px;
    min-height: 500px !important;
}

.customhr {
    margin-top: 10px;
    margin-bottom: 7px;
}

/* --- Radio/checkbox: restore v1 native appearance in BS5 --- */
input[type=radio] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
}

input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    appearance: checkbox;
}

.table > thead {
    border-top: 1px solid white;
}