:root {
    --bs-primary: #0e7daa;
    --bs-primary-rgb: 14, 125, 170;
    --tf-on-primary: #ffffff;
    --tf-on-primary-rgb: 255, 255, 255;
    --bs-accent: #40b3d8;
    --bs-accent-rgb: 64, 179, 216;
    --tf-on-accent: #212529;
}

:root {
    --tf-primary-hover: color-mix(in srgb, var(--bs-primary) 85%, #000);
    --tf-primary-active: color-mix(in srgb, var(--bs-primary) 80%, #000);
    --tf-primary-ring: rgba(var(--bs-primary-rgb), 0.25);
    --tf-accent-hover: color-mix(in srgb, var(--bs-accent) 85%, #000);
    --tf-accent-active: color-mix(in srgb, var(--bs-accent) 80%, #000);

    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 65%, #000);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 12%, #fff);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 35%, #fff);

    --bs-link-color: var(--bs-primary);
    --bs-link-color-rgb: var(--bs-primary-rgb);
    --bs-link-hover-color: var(--tf-primary-hover);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);

    --bs-focus-ring-color: var(--tf-primary-ring);
}

[data-bs-theme="dark"] {
    --bs-primary-text-emphasis: color-mix(in srgb, var(--bs-primary) 60%, #fff);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--bs-primary) 20%, #000);
    --bs-primary-border-subtle: color-mix(in srgb, var(--bs-primary) 40%, #000);
    --bs-link-color: var(--bs-primary-text-emphasis);
    --bs-link-hover-color: color-mix(in srgb, var(--bs-primary) 75%, #fff);
}

.btn-primary {
    --bs-btn-color: var(--tf-on-primary);
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--tf-on-primary);
    --bs-btn-hover-bg: var(--tf-primary-hover);
    --bs-btn-hover-border-color: var(--tf-primary-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--tf-on-primary);
    --bs-btn-active-bg: var(--tf-primary-active);
    --bs-btn-active-border-color: var(--tf-primary-active);
    --bs-btn-disabled-color: var(--tf-on-primary);
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--tf-on-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-color: var(--tf-on-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-accent {
    --bs-btn-color: var(--tf-on-accent);
    --bs-btn-bg: var(--bs-accent);
    --bs-btn-border-color: var(--bs-accent);
    --bs-btn-hover-color: var(--tf-on-accent);
    --bs-btn-hover-bg: var(--tf-accent-hover);
    --bs-btn-hover-border-color: var(--tf-accent-hover);
    --bs-btn-focus-shadow-rgb: var(--bs-accent-rgb);
    --bs-btn-active-color: var(--tf-on-accent);
    --bs-btn-active-bg: var(--tf-accent-active);
    --bs-btn-active-border-color: var(--tf-accent-active);
    --bs-btn-disabled-color: var(--tf-on-accent);
    --bs-btn-disabled-bg: var(--bs-accent);
    --bs-btn-disabled-border-color: var(--bs-accent);
}

.btn-link {
    --bs-btn-color: var(--bs-link-color);
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-close:focus {
    box-shadow: 0 0 0 0.25rem var(--tf-primary-ring);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-control-color:focus {
    border-color: color-mix(in srgb, var(--bs-primary) 50%, #fff);
    box-shadow: 0 0 0 0.25rem var(--tf-primary-ring);
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}

.form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--tf-primary-ring);
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem var(--tf-primary-ring);
}

.tf-on-primary-dark .form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.tf-on-primary-dark .form-check-input:checked[type="radio"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23212529'/%3e%3c/svg%3e");
}

.tf-on-primary-dark .form-check-input[type="checkbox"]:indeterminate {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
}

.tf-on-primary-dark .form-switch .form-check-input:checked {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23212529'/%3e%3c/svg%3e");
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-nav-pills-link-active-color: var(--tf-on-primary);
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--tf-primary-ring);
}

.nav-tabs .nav-link.active {
    border-bottom-color: var(--bs-body-bg);
}

.pagination {
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem var(--tf-primary-ring);
    --bs-pagination-active-color: var(--tf-on-primary);
    --bs-pagination-active-bg: var(--bs-primary);
    --bs-pagination-active-border-color: var(--bs-primary);
}

.list-group {
    --bs-list-group-active-color: var(--tf-on-primary);
    --bs-list-group-active-bg: var(--bs-primary);
    --bs-list-group-active-border-color: var(--bs-primary);
    --bs-list-group-action-active-bg: var(--bs-primary-bg-subtle);
}

.dropdown-menu {
    --bs-dropdown-link-active-color: var(--tf-on-primary);
    --bs-dropdown-link-active-bg: var(--bs-primary);
}

.accordion {
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem var(--tf-primary-ring);
}

.progress {
    --bs-progress-bar-bg: var(--bs-primary);
}

.table-primary {
    --bs-table-bg: var(--bs-primary-bg-subtle);
    --bs-table-border-color: var(--bs-primary-border-subtle);
    --bs-table-color: var(--bs-primary-text-emphasis);
    --bs-table-striped-color: var(--bs-primary-text-emphasis);
    --bs-table-active-color: var(--bs-primary-text-emphasis);
    --bs-table-hover-color: var(--bs-primary-text-emphasis);
}

.text-bg-primary {
    color: var(--tf-on-primary) !important;
}

.text-bg-accent {
    color: var(--tf-on-accent) !important;
    background-color: RGBA(var(--bs-accent-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-accent {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-accent-rgb), var(--bs-bg-opacity)) !important;
}

.text-accent {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-accent-rgb), var(--bs-text-opacity)) !important;
}

.border-accent {
    --bs-border-opacity: 1;
    border-color: rgba(var(--bs-accent-rgb), var(--bs-border-opacity)) !important;
}

.tf-brandbar {
    --bs-navbar-color: rgba(var(--tf-on-primary-rgb), 0.75);
    --bs-navbar-hover-color: var(--tf-on-primary);
    --bs-navbar-active-color: var(--tf-on-primary);
    --bs-navbar-brand-color: var(--tf-on-primary);
    --bs-navbar-brand-hover-color: var(--tf-on-primary);
    --bs-navbar-toggler-border-color: rgba(var(--tf-on-primary-rgb), 0.25);
    --bs-navbar-disabled-color: rgba(var(--tf-on-primary-rgb), 0.5);
    background-color: var(--bs-primary);
    color: var(--tf-on-primary);
}

.tf-brandbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.tf-on-primary-dark .tf-brandbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (min-width: 768px) {
    .tf-sidebar {
        position: sticky;
        top: var(--tf-navbar-height, 3.5rem);
        height: calc(100vh - var(--tf-navbar-height, 3.5rem));
        overflow-y: auto;
    }
}

.tf-sidebar .nav-link {
    --bs-nav-link-color: var(--bs-body-color);
    --bs-nav-link-hover-color: var(--bs-primary);
}

.tf-sidebar .nav-link:not(.active):hover {
    background-color: var(--bs-primary-bg-subtle);
}

.table > thead {
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-color: var(--bs-secondary-color);
}

.warden {
    --bs-success: #0a7d3c;
    --bs-success-rgb: 10, 125, 60;
    --bs-danger: #b00020;
    --bs-danger-rgb: 176, 0, 32;
    --bs-warning: #d98a00;
    --bs-warning-rgb: 217, 138, 0;
}

.warden-wrap {
    max-width: 560px;
    margin-inline: auto;
}

.btn-warden {
    --bs-btn-padding-y: 1.25rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.4rem;
    --bs-btn-font-weight: 700;
    --bs-btn-border-width: 3px;
    --bs-btn-border-radius: 1rem;
    min-height: 6.5rem;
}

.warden-headline {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
}

.warden-data dd {
    font-size: 1.5rem;
    font-weight: 700;
    word-break: break-word;
}

.tf-rich > :last-child {
    margin-bottom: 0;
}

.tf-rich ul,
.tf-rich ol {
    padding-left: 1.25rem;
}

.tf-rich h4,
.tf-rich h5 {
    font-size: 1rem;
    font-weight: 600;
}

.tf-rich blockquote {
    padding-left: .75rem;
    border-left: 3px solid var(--bs-border-color);
    color: var(--bs-secondary-color);
}

.tf-image-preview {
    max-height: 120px;
    max-width: 100%;
    object-fit: contain;
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius);
}

.tf-image-preview-wide {
    max-height: 180px;
    width: 100%;
    object-fit: cover;
}