#main {
    display        : flex;
    flex           : 1 1 100%;
    flex-direction : row;

    &:not(.b-side-by-side) {
        flex-direction : column;

        .b-scheduler-pro {
            order : 0;
        }

        .b-splitter {
            order : 1;
        }

        .b-unplanned-grid {
            order : 2;
        }
    }

    &.b-side-by-side {
        .b-grid-header {
            height : 5em;
        }

        .b-unplanned-grid {
            flex : 0 1 200px;
        }
    }
}

.b-toolbar:not(.b-outer) {
    height : 6em;
}

.b-filter-bar-compact {
    .b-filter-bar-field {
        .b-field-inner input {
            &:not(:focus)::placeholder {
                color : var(--b-neutral-70);
            }
        }

        .b-field-trigger.fa-filter {
            display : flex !important;
            margin  : 0 0.5em;
            order   : -1;
        }
    }
}

div.b-resource-info {
    --b-avatar-size : 3em;
}

.b-unplanned-grid {
    --b-toolbar-gap : 0;

    .fa-clock {
        margin-inline-end : 0 !important;
    }

    .name-container {
        display             : flex;
        flex-direction      : column;
        margin-inline-start : 0.3em;
    }
}

.patient-name {
    font-size  : 0.8em;
    margin-top : 0.2em;
}

.b-drag-proxy {
    opacity : 1;

    .b-unassigned-class {
        pointer-events : none;
        transform      : none !important;

        &:first-child {
            z-index : 100;
        }

        .b-sch-event {
            opacity : 1;
            margin  : 5px 0;
        }
    }

    &.b-drag-invalid {
        --b-primary : var(--b-color-red);
    }
}

.b-aborting.b-unassigned-class {
    transition     : transform 0.3s !important;
    position       : absolute !important;
    z-index        : 10000;
    pointer-events : none;
    opacity        : 0.8;
    box-sizing     : border-box;

    --b-primary    : var(--b-color-red);
}

.b-sch-event {
    --b-sch-event-box-shadow : var(--b-elevation-1);

    .patient-name {
        font-weight : 400;
    }
}

.b-sch-highlighted-calendar-range {
    animation : fadein 0.5s;
}

[data-assignment-id*="_generated"] .sch-event {
    opacity : 0.4;
    filter  : grayscale(1);
}

@keyframes fadein {
    0% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}

.b-exceeds-axis-width {
    clip-path: polygon(0% 0%, calc(100% - 2em) 0%, 100% 50%, calc(100% - 2em) 100%, 0% 100%);
}