.flex-spacer {
    flex-grow: 1;
}

.opus-std-gap {
    gap: var(--oo-std-gap);
}

.container-grid-weekly {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.container-grid-weekly-with-detail-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

.container-flex-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
}

    .container-flex-row.flex-wrap {
        flex-wrap: wrap;
    }

.container-flex-column {
    display: flex;
    flex-direction: column;
    width: 100%;
}
    .container-flex-column.flex-centered {
        align-items: center;
        justify-content: center;
    }

    .container-flex-column.flex-wrap {
        flex-wrap: wrap;
    }

.container-flex-column-full-height {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.container-flex-row-full-height {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.reporter-details-calendar .Available > .visual-container {
    background-color: var(--success);
}

.reporter-details-calendar .Holiday > .visual-container {
    background-color: var(--error);
}

.reporter-details-calendar .Pending > .visual-container {
    background-color: var(--oo-reporter-pending);
}

.reporter-details-calendar .Pending .day-text,
.reporter-details-calendar .Available.Holiday .day-text {
    color: white;
}

.reporter-details-calendar .Available.Holiday:not(.Pending) > .visual-container {
    background: repeating-linear-gradient(45deg, var(--success), var(--success) 5px, var(--error) 5px, var(--error) 10px);
}

.reporter-details-calendar .Available.Pending:not(.Holiday) > .visual-container {
    background: repeating-linear-gradient(45deg, var(--success), var(--success) 5px, var(--oo-reporter-pending) 5px, var(--oo-reporter-pending) 10px);
}

.reporter-details-calendar .Holiday.Pending:not(.Available) > .visual-container {
    background: repeating-linear-gradient(45deg, var(--error), var(--error) 5px, var(--oo-reporter-pending) 5px, var(--oo-reporter-pending) 10px);
}

.reporter-details-calendar .Available.Holiday.Pending > .visual-container {
    background: repeating-linear-gradient(45deg, var(--success), var(--success) 5px, var(--error) 5px, var(--error) 10px, var(--oo-reporter-pending) 10px, var(--oo-reporter-pending) 15px);
}