/*
⚠️ WARNING ⚠️
Do NOT change anything in this file unless you KNOW EXACTLY what you're doing.
Touching random values WILL break things in creative, mysterious, and annoying ways.
You have been warned. Proceed at your own risk.
*/

.active {
    background-color: var(--mud-palette-primary) !important;
}

.active .mud-nav-link-text {
    color: var(--mud-palette-surface) !important;
}

.active svg {
    fill: var(--mud-palette-surface) !important;
}

.mud-menu-list {
    padding-block: 0px;
}

.mud-menu-list * {
    border-radius: 12px;
}

.mud-drawer--closed .mud-nav-item {
    width: fit-content;
}

.mud-drawer--open .mud-nav-item {
    width: 100%;
}

.mud-nav-link {
    padding-inline: 6px !important;
    padding-block: 6px !important;
    width: 100%;
}

.mud-drawer {
    width: fit-content;
}

.mud-card {
    /* padding-left: 6px; */
}

.mud-chart-legend {
    gap: 16px;
}

.mud-list {
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
}

.mud-menu-list {
    /* margin-top: 8px; */
}

.mud-menu-item .mud-menu-item-icon {
    margin-inline-end: 6px;
}

.mud-menu-item svg {
    width: 18px;
    height: 18px;
}

.mud-input-underline::before,
.mud-input-underline::after {
    content: unset !important;
}

.mud-input.mud-input-filled {
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
}

.mud-input.mud-input-filled:hover {
    background-color: var(--mud-palette-background-gray);
    /* background-color: var(--mud-palette-surface); */
}

.mud-input-root-filled {
    font-size: 14px !important;
    padding-block: 10px !important;
    padding-left: 16px !important;
}

.mud-select {
    border-radius: 12px;
}

.mud-popover:has(.mud-list) {
    /* background-color: transparent !important; */
    overflow: visible;
}

.mud-popover .mud-list {
    /* margin-top: 4px; */
    box-shadow: 0px 5px 15px 0px var(--muted-dark) !important;
}

.mud-switch-span {
    align-items: center !important;
}

.mud-switch-thumb-medium {
    background-color: var(--mud-palette-text-primary) !important;
}

.mud-switch-track {
    opacity: 1 !important;
    height: 20px !important;
    border-radius: 100px;
    background-color: var(--mud-palette-background-gray) !important;
}

.light .mud-switch-track {
    background-color: #0000001a !important;
}

.mud-tooltip-root {
    /* width: fit-content !important; */
}

.mud-drawer .mud-icon-button {
    border-radius: var(--rounded-md);
}

.mud-tooltip {
    color: var(--mud-palette-surface) !important;
    border-radius: 6px !important;
}

.mud-switch-base:hover,
.mud-switch-base:focus-within {
    background-color: transparent !important;
}

.mud-nav-link-text {
    font-weight: 500;
    color: var(--mud-palette-secondary);
}

.mud-chart-legend {
    margin: 0 !important;
    padding: 1rem !important;
}

.selected {
    color: var(--mud-palette-background) !important;
}

.mud-button {
    box-shadow: none !important;
}

.mud-dialog {
    box-shadow: none !important;
}

.mud-overlay-dark {
    backdrop-filter: blur(8px) !important;
}

.mud-pagination button {
    color: var(--mud-palette-surface) !important;
}

.mud-chart-legend-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
}

.mud-nav-link {
    align-items: center !important;
}

.mud-toolbar {
    gap: 10px !important;
}

.mud-divider {
    margin: 8px 0 !important;
    flex-grow: 0 !important;
}

.mud-list .mud-divider {
    margin: 0 !important;
}

.mud-toolbar-appbar {
    height: 100% !important;
}

.mud-icon-button {
    padding: 6px;
}

/* .mud-icon-button svg {
    fill: var(--mud-palette-surface) !important;
} */

.mud-pagination-item:not(.mud-pagination-item-selected) button:not(button[disabled]) svg {
    fill: var(--mud-palette-text-primary) !important;
    opacity: 100%;
}

.mud-pagination-item:not(.mud-pagination-item-selected) .mud-button {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}

.mud-pagination-item:not(.mud-pagination-item-selected) .mud-button:hover {
    background-color: var(--muted-light) !important;
}