:root {
    --mad-calc-height: calc(100vh - 107px);
    --bg-yellow: rgb(255, 224, 147);
}

html {
    font-size: 14px;
}

.bg-yellow {
    background-color: var(--bg-yellow) !important;
}

.validation-message {
    color: var(--mud-palette-error);
}

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

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}

.w-50 {
    width: 50% !important;
}

button {
    white-space: nowrap;
}

.fixed {
    position: fixed !important;
}

/*tooltip*/
.entry-accent > .mud-tooltip-root {
    width: 100%;
}
/*navigation*/
.mud-nav-group-disabled, .mud-nav-link-disabled {
    display: none !important;
}

.mud-nav-group > .mud-nav-link > .mud-nav-link-text{
    font-weight: 400 !important;
}

/*widget*/
.home-end {
    min-height: var(--mad-calc-height);
}

.home-start {
    min-height: calc(100vh - 265px);
}

@media (max-width: 1920px) {
    .home-start {
        min-height: calc(calc(100vh - 280px) / 2);
    }
}

.sound-card-shell {
    height: 100%;
}

    .sound-card-shell .card,
    .sound-card-shell .mud-card {
        height: 100%;
    }

    .sound-card-shell .mud-card {
        transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
        border: 1px solid rgba(255, 152, 0, 0.12);
    }

    .sound-card-shell:hover .mud-card,
    .sound-card-shell:focus-within .mud-card {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
        border-color: rgba(255, 152, 0, 0.35);
    }

    .sound-card-shell .mud-card-content {
        cursor: pointer;
    }

.sound-card-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
}

/*DataGrid*/
.inactive-row, .no-token-row {
    background-color: color-mix(in srgb, var(--mud-palette-error-lighten) 25%, transparent) !important;
    transition: background-color 150ms ease-in-out !important;
}

    .inactive-row:hover, .no-token-row:hover {
        background-color: color-mix(in srgb, var(--mud-palette-error-darken) 35%, transparent) !important;
    }

.weekend {
    background-color: var(--mud-palette-error-lighten) !important;
    transition: background-color 150ms ease-in-out !important;
}

.today {
    background-color: var(--bg-yellow) !important;
}

.entry-accent {
    box-shadow: inset 4px 0px 0px 0px var(--accent) !important;
    border: 1px solid var(--accent);
    cursor: pointer;
}

    .entry-accent:hover {
        background-color: color-mix(in srgb, var(--background) 25%, transparent) !important;
        transition: background-color 150ms ease-in-out !important;
    }


/*Calendar*/

.calendarWidget .calendarContainer {
    width: 100%;
    height: 100%
}

.calendarWidget .mud-cal-week-cell-holder .event:not(.event-outofoffice) {
    background-color: var(--mud-palette-primary);
}

.calendarWidget .mud-cal-week-cell-holder .event-outofoffice {
    background-color: rgba(253,207,89, 0);
}

.calendarWidget .mud-cal-drop-item:has(.mud-cal-week-template-holder .event) {
    background-color: transparent;
    height: 100% !important;
    bottom: auto;
    width: 1% !important;
    z-index: 20;
}

.calendarWidget .mud-drop-zone:has(.mud-cal-week-template-holder .event) {
    width: fit-content;
    height: auto !important;
    position: sticky;
    top: 0;
}

.calendarWidget .mud-cal-week-template-holder .calendar-event-icon {
    display: flex;
    padding: 0.5rem 2rem 0.5rem 1rem;
    border-radius: 0 1rem 0 1rem;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-event-icon .mud-icon-root {
    margin-right: 8px;
}

.calendarWidget .mud-cal-toolbar {
    flex-wrap: wrap;
    gap: 8px;
}

    .calendarWidget .mud-cal-toolbar > div:first-child {
        flex-wrap: wrap;
        gap: 8px;
    }

.calendarWidget .mud-cal-current-time {
    border: var(--mud-palette-primary) 2px solid !important;
}

.calendarWidget .mud-calendar .mud-cal-grid-header {
    text-align: start;
}

.calendarWidget .mud-cal-week-cell-holder:has(.event-outofoffice),
.calendarWidget .mud-cal-month-cell:has(.event-outofoffice) {
    background-color: rgba(253,207,89, 0.5);
}

.calendarWidget .mud-cal-drop-item {
    height: 100%;
}


.calendarWidget .mud-cal-week-view .mud-chip-content {
    width: 100%;
}

.calendarWidget .context-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}



  

/*form*/
.MadForm {
    padding: 32px;
}

    .MadForm > * {
        margin-bottom: 2rem !important;
    }

.mud-button-group-outlined.mud-button-group-override-styles .mud-button-root {
    padding: 0.5rem 1rem !important;
}


.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: #C95E52;
}

/*table*/
.truncate-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 96.5vw;
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 1280px) and (max-width: 1920px) {
    .truncate-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
}

@media (min-width: 1920px) {
    .truncate-cell {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 20vw;
        display: block;
    }
}

td:has(.cancelled-reason) {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text) !important;
    justify-content: start !important;
}

.statusChip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 120px;
    padding: 0 8px;
}

.disabled-status {
    filter: saturate(90%) opacity(50%);
    -webkit-filter: saturate(90%) opacity(50%);
    -moz-filter: saturate(90%) opacity(50%);
    cursor: default !important;
}

.madTable .mud-table-container {
    max-height: calc(100vh - 228px);
    overflow-y: auto;
}

.madTable .mud-grid-item.my-2 {
    margin: 0 !important;
}

.madTable .mud-table-cell button {
    padding: 0 !important;
    margin: 0 !important;
}

.mud-table-cell button:not(.custom-cell-button) {
    color: var(--mud-palette-primary) !important;
}

    .mud-table-cell button:not(.custom-cell-button):disabled {
        color: transparent !important;
    }

/* This is a temporary fix for this problem: https://github.com/MudBlazor/MudBlazor/pull/11997 */
.sticky-left {
    background-color: transparent !important;
}

/* This is a temporary fix for this problem: https://github.com/MudBlazor/MudBlazor/pull/11997 */
.sticky-right {
    background-color: transparent !important;
}

/*Mud dialog*/

.mud-dialog-content {
    padding: 8px 24px 36px 24px !important;
}
.mud-dialog-title h6{
    font-size: 1.5em;
}

/*Sensitive text*/
.sensitive-container {
    min-width: 220px;
}

.sensitive-text {
    transition: opacity 0.15s ease;
}

.soundboard-shell {
    gap: 1rem;
}

.soundboard-toolbar {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.02);
}

:is(.soundboard-import, .soundboard-empty-state) {
    border: 1px solid rgba(255, 152, 0, 0.18);
    border-radius: 20px;
}

.soundboard-import {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mud-palette-warning) 16%, var(--mud-palette-surface) 84%), color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface) 92%));
}

.soundboard-empty-state {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(18, 18, 18, 0.92));
}

.soundboard-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.soundboard-grid {
    width: 100%;
}

.soundboard-import-action {
    display: flex;
    flex-direction: column;
}

@media (min-width: 960px) {
    .soundboard-import-action {
        padding-top: 16px !important;
    }
}

.soundboard-import-button {
    width: 100%;
    height: 56px;
}

.soundboard-empty-state {
    text-align: center;
}

.devops-task-autocomplete-popover,
.timetracking-task-autocomplete-popover {
    width: auto !important;
    min-width: 420px !important;
}