:root {
    --primary-color: var(--bs-orange);
    --link-hover-color: var(--gray-400);
    --form-switch-checked-bg: var(--blue-500);
    --form-type-check-input-checked-bg: var(--blue-500);
    --link-color: var(--blue-500);
}

:root, [data-bs-theme=light] {
    --color-primary: var(--primary-color);
    --sidebar-menu-badge-bg: var(--blue-100);
    --sidebar-menu-badge-color: #333;
    --subtle-background: var(--gray-200)
}

:root, [data-bs-theme=dark] {
    --pagination-active-bg: var(--primary-color);
    --button-primary-bg: var(--primary-color);
    --color-primary: var(--primary-color);
    --sidebar-menu-badge-bg: var(--blue-100);
    --sidebar-menu-badge-active-bg: var(--primary-color);
    --sidebar-menu-badge-active-color: #333;
    --sidebar-menu-badge-color: #333;
    --subtle-background: var(--gray-700);
}

[data-bs-theme=dark] .table-hover>tbody>tr:hover>* {
    --bs-table-bg-state: var(--orange-500);
}

[data-bs-theme=dark] .ts-wrapper.multi .ts-control > div {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-dark-text-emphasis);
}

[data-bs-theme=dark] .dark-visible {
    display: initial;
}

[data-bs-theme=light] .light-visible {
    display: initial;
}

[data-bs-theme=dark] .dark-hidden {
    display: none;
}

[data-bs-theme=light] .light-hidden {
    display: none;
}

.dashboard-logo {
    display: block;
    max-width: 80%;
    max-height: 35px;
}

.sub-table th, .sub-table td {
    background-color: var(--subtle-background)
}

.payable-status > td, .payable-status > th {
    background-color: var(--green-100);
}

.capped-status > td, .capped-status > th {
    background-color: var(--orange-100);
}

.plugin-clear_button.ts-wrapper .clear-button, .plugin-clear_button.ts-wrapper.multi .clear-button {
    line-height: 0.50;
    top: 50%;
    padding-right: 0.62px;
}

#feedback-entry-toggle {
    position: fixed;
    right: -5px;
    top: 100px;
}

.feedback-entry-container {
    position: relative;
    height: 100%;
}

.feedback-entry-list {
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    height: calc(100vh - 335px);
    overflow-y: auto;
}

.feedback-entry-new {
    height: 275px;
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 5px var(--bs-offcanvas-padding-x) var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x);
    box-shadow: 2px -2px 5px rgba(0, 0, 0, 0.2);
    background-color: var(--body-bg);
}

.offcanvas-body {
    padding: 0 0;
}

.feedback-entry {
    border-radius: 4px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    background: var(--body-bg);
    margin-bottom: 0.5em;
    padding: 0.5em 1em;
    display: flex;
    flex-direction: column;
}

.feedback-entry .author {
    font-weight: bold;
}

.feedback-entry .content {
    font-weight: normal;
    font-size: 0.9em;
}

.feedback-entry .timestamp {
    font-size: 0.75em;
    align-self: flex-end;
    font-style: italic;
}

.feedback-entry-new textarea {
    border-radius: 4px;
    border-color: var(--gray-400);
    outline-color: var(--primary-color);
    width: 100%;
    resize: none;
}

.table-card {
    width: 100%;
    max-width: calc(100vw - 300px);
}

@media (max-width: 991px) {
    .table-card {
        max-width: 100%;
    }
}

.schedule-details-area {
    margin-top: -5px;
    padding: 5px 10px;
    border-radius: 0 0 4px 4px;
}

.schedule-details-area, .schedule-details-area td, .schedule-details-area th {
    color: #555;
    background-color: #ddd;
}

.schedule-details-area h5 {
    color: #555;
}

.toggle-icon {
    will-change: transform;
    display: inline-block;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.toggle-icon.expanded {
    transform: rotate(180deg);
}

.rotate-0 {
    transform: rotate(0deg);
}

.rotate-90 {
    transform: rotate(90deg);
}

.rotate-180 {
    transform: rotate(180deg);
}

.rotate-270 {
    transform: rotate(270deg);
}

.ts-dropdown, .ts-control, .ts-control input {
    color: var(--bs-secondary-text-emphasis) !important;
}