html, body {   }
body { overflow-y: scroll }

a { text-decoration: none }

.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.cursor-not-allowed { cursor: not-allowed }

.btn-xs { --bs-btn-padding-y: 0.2rem; --bs-btn-padding-x: 0.4rem; --bs-btn-font-size: 0.775rem; --bs-btn-border-radius: var(--bs-border-radius-sm); }

.form-select:invalid { color: #6c757d; }
.form-select option { color: var(--bs-light); }

.hidden { display: none }

.bg-hover:hover { opacity: .5  }
.text-hover:hover { opacity: .7  }

.hover-expand { transition: transform 0.2s ease, box-shadow 0.2s ease; transform-origin: center center; }
.hover-expand:hover { transform: scale(1.05); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15); z-index: 5; }
.bg-expanded { transform: scale(1.05); box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.15); z-index: 5; }

textarea { height: 50px }

.square::before { content: ""; float: left; padding-top: 100%; }
.square { position: relative; }

.spinner-border-xs { --bs-spinner-width: 1rem; --bs-spinner-height: 1rem }
.btn-xs .spinner-border-xs, .btn-xs .form-spinner-check { --bs-spinner-width: .7rem; --bs-spinner-height: .7rem }

.layout {}
.content { width: 80%; float: right }
.page { margin-bottom: 125px; }

.navigation-container { height: 100vh; position: relative }
.navigation { position: fixed; left: 0; top: 0; bottom: 0; width: 20%; z-index: 99; height: 100vh; border-right: 1px solid var(--bs-border-color) }
.navigation-link { display: block; width: auto; float: none; text-align: left; color: var(--bs-light); font-size: .9rem; margin: 15px 15px 0 15px; padding: 10px 15px; border-radius: 8px;  }
.navigation-link > span { padding-left: 15px  }
.navigation-link:not(.navigation-link-disabled):hover { background: var(--bs-light-bg-subtle) }
.navigation-link:focus { background: var(--bs-light-bg-subtle) }
.navigation-link.active { background: #123937; padding: 10px 15px; color: #4ade80; border-left: 4px solid #4ade80; }
.navigation-bottom { display: block; position: fixed; bottom: 0; left: 0; padding: 0; width: 20%  }
.navigation-link .fa , .navigation-bottom .fa { display: inline }
.navigation-link-sub {}
.navigation-mobile { display: none }
.navigation-mobile .navigation-link .fa { font-size: 1.2rem }
.navigation-mobile .navigation-link { font-size: 1.2rem }

@media (max-width: 991px) {
    .content { width: 100%; margin: 75px 0 20px }
    .navigation { position: fixed; bottom: 0; left: 0; right: 0; z-index: 101; top: auto; padding: 0 10px; height: 80px; width: 100%; background: var(--bs-dark-bg-subtle); border-top: 1px solid var(--bs-border-color); border-right: none !important  }
    .navigation .navigation-link { display: block; float: left; text-align: center; margin: 5px 7px; width: calc(25% - 14px) !important; padding: 15px 0 !important; font-size: .9rem; border: none !important; }
    .navigation .toggle-mobile-navigation { width: calc(16% - 14px) !important; padding: 20px 0 !important  }
    .navigation .navigation-link-config { width: 12%; height: 74px; padding-top: 25px }
    .navigation .navigation-link .fal { display: block; margin: 0 auto }
    .navigation .navigation-bottom { display: none; }
    .navigation .navigation-link > span { padding-left: 0 !important; }
    .navigation .navigation-link.active { padding: 15px 0 !important; }
    .navigation-mobile { display: block }
}

.form-switch.form-switch-md .form-check-input { transform: scale(1.3); margin-top: 10px; margin-right:  1.2rem; margin-bottom: 15px }
.form-switch.form-switch-md .form-check-label { font-size: 1rem; }

.form-switch.form-switch-lg .form-check-input { transform: scale(1.6); margin-top: 10px; margin-right:  1.2rem; margin-bottom: 15px }
.form-switch.form-switch-lg .form-check-label { font-size: 1.1rem; }

.tour-highlight {
    position: relative !important;
    z-index: 1061 !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 0 0 8px rgba(13, 110, 253, .35) !important;
    border-radius: .5rem !important;
}

.popover {
    background-color: var(--bs-white);
    border-color: var(--bs-border-color);
    color: var(--bs-dark);
    --bs-popover-arrow-color: var(--bs-white);
    --bs-popover-arrow-border: #FFFFFF00;
    --bs-popover-bg: var(--bs-white);
}

.popover.bs-popover-auto[data-popper-placement^="bottom"] {
    --bs-popover-border-width: 0;
}

.popover.bs-popover-auto[data-popper-placement^="bottom"] .popover-arrow {
    --bs-popover-arrow-color: var(--bs-success);
    --bs-popover-bg: var(--bs-success);
    top: -7px
}

.popover-header {
    background-color: var(--bs-success);
    color: var(--bs-white);
    border-bottom: 1px solid var(--bs-border-color);
}

.popover-body {
    color: var(--bs-dark);
}

.feedback-hidden .invalid-feedback { display: none }

.table-fixed { table-layout: fixed }

.border-dashed { border-style: dashed !important; }

.ps-6 { padding-left: 4rem !important; }

.fs-2rem { font-size: 2rem !important; }
.fs-25rem { font-size: 2.5rem !important; }
.fs-3rem { font-size: 3rem !important; }

@media (min-width: 576px) {
    .w-sm-auto { width: auto !important; }
}

@media (min-width: 992px) {
    .mw-md-500 { min-width: 500px; }
    .mw-md-750 { min-width: 750px; }
    .mw-md-900 { min-width: 900px; }
    .fs-md-3rem { font-size: 3rem !important; }
}

.w-5 { width: 5% !important; }
.w-10 { width: 10% !important; }
.w-15 { width: 15% !important; }
.w-17 { width: 17% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-35 { width: 35% !important; }
.w-40 { width: 40% !important; }
.w-45 { width: 45% !important; }
.w-55 { width: 55% !important; }
.w-60 { width: 60% !important; }
.w-65 { width: 65% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-85 { width: 85% !important; }
.w-90 { width: 90% !important; }
.w-95 { width: 95% !important; }

.w-16-6 { width: 16.66% !important; }

.w-50px { width: 50px !important; }
.w-75px { width: 75px !important; }
.w-100px { width: 100px !important; }
.w-120px { width: 120px !important; }
.w-200px { width: 200px !important; }

.mh-200 { min-height: 200px }

.h-25px { height: 25px }
.h-100px { height: 100px }
.h-400px { height: 400px }

.bg-none { background: none !important; }

.add-hours { margin-top: 44px; }
.remove-hours { margin-top: 20px; }
.operation-hours-item label { margin-bottom: 0 }
.operation-hours-item input { margin-top: 10px }
.operational-hour-closed { transform: scale(1.25) }

.dropdown-toggle-ellipsis::after {
    font: normal 900 0.9em/1 "Font Awesome 6 Pro";
    content: "\f142";    /* fa-ellipsis-vertical */
    border: 0;
    vertical-align: initial;
}

.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    margin-top: .25rem;
    background: var(--bs-body-bg, #212529);
    color: var(--bs-body-color, #f8f9fa);
    border: 1px solid var(--bs-border-color, #444);
    border-radius: var(--bs-border-radius, .375rem);
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
    max-height: 320px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: .5rem .75rem;
    cursor: pointer;
}

.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--bs-secondary-bg, #343a40);
}

.autocomplete-muted {
    opacity: .7;
    font-size: .9em;
    margin-left: .25rem;
}

.half-arch {
    --size: 100%;              /* overall width of the arch */
    --track: 10;               /* stroke thickness */
    position: relative;
    width: var(--size);
    height: calc(var(--size) / 2);
    display: inline-block;
}
.half-arch svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;          /* needed so stroke isn’t clipped */
}
.half-arch .label {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font: 700 1.6rem/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    color: currentColor;        /* inherits page text color */
    pointer-events: none;
    user-select: none;
}
.half-arch .sub-label {
    position: absolute;
    left: 50%;
    top: 75%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    font-weight: 500;
    color: currentColor;
    pointer-events: none;
    user-select: none;
}

.daterangepicker td.off { visibility: hidden; }
.daterangepicker .calendar-table thead th { color: #000; font-weight: 600; cursor: default; }
.daterangepicker .calendar-table td.available { color: #333; }
.daterangepicker .calendar-table td.available:hover { color: #000; }
.daterangepicker .calendar-table td.active, .daterangepicker .calendar-table td.active:hover { color: #fff; }
.daterangepicker .calendar-table td.in-range { color: #212529; }
.daterangepicker .calendar-table td.disabled { color: #bbb; }
.daterangepicker.auto-apply .drp-buttons { display: flex !important; justify-content: flex-end; gap: .5rem; }
.daterangepicker.auto-apply .applyBtn { display: none !important; }
.daterangepicker.auto-apply .cancelBtn { display: inline-block !important; }
.daterangepicker .drp-selected { display: none !important; }