:root {
    --schedule-width-multiplier: 0rem;
    --schedule-today-position: 0rem;
    --schedule-day-marker-width: 0rem;
    --schedule-week-marker-position: 0rem;
    --schedule-week-marker-width: 0rem;
    --schedule-month-marker-position: 0rem;
    --schedule-month-marker-width: 0rem;
    --schedule-year-length: 0rem;
}

.s1 {background-color: var(--secondary-disabled-color);}
.s2 {background-color: var(--success-color-2);}
.s3 {background-color: var(--danger-color);}
.s4 {background-color: var(--warning-color-2);}
.s5 {background-color: var(--success-color);}
.state1 {background-color: var(--secondary-disabled-color);}
.state2 {background-color: var(--success-color-2);}
.state3 {background-color: var(--danger-color);}
.state4 {background-color: var(--warning-color-2);}
.state5 {background-color: var(--success-color);}
.s1, .s2, .s3, .s4, .s5 {
    position: absolute;
    outline-offset: -4px;
    height: 100%;
    text-align: center;
    line-height: 100%;
    font-size: calc( 0.6 * var(--schedule-width-multiplier));
    z-index: 100;
    &[hx-get] {
        cursor: pointer;
    }
}

.r1 {outline: 4px solid var(--primary-color);}
.r2 {outline: 4px solid var(--action-color-3);}
.r3 {outline: 4px solid var(--info-color);}
.r4 {outline: 4px solid var(--success-color-2);}
.r5 {outline: 4px solid var(--info-color-2);}
.recommendation1 {background-color: var(--primary-color);}
.recommendation2 {background-color: var(--action-color-3);}
.recommendation3 {background-color: var(--info-color);}
.recommendation4 {background-color: var(--success-color-2);}
.recommendation5 {background-color: var(--info-color-2);}
.s1, .s2, .s3, .s4, .s5,
.r1, .r2, .r3, .r4, .r5 {
    border-radius: 0.5rem;
}

.status-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    outline: 1px solid var(--primary-color);
}

.schedule-legend,
.schedule-legend > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.schedule-legend > div > div:last-child {
    position: relative;
    width: var(--schedule-width-multiplier);
}

.schedule-marker {
    position: absolute;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.day-marker {
    background-color: var(--schedule-day-marker-color);
    left: var(--schedule-today-position);
    width: var(--schedule-day-marker-width);
}

.week-marker {
    background-color: var(--schedule-week-marker-color);
    left: var(--schedule-week-marker-position);
    width: var(--schedule-week-marker-width);
}

.month-marker {
    background-color: var(--schedule-month-marker-color);
    left: var(--schedule-month-marker-position);
    width: var(--schedule-month-marker-width);
}

#home:has(.schedule-container) {
    overflow: hidden;
}

.schedule-container {
    width: 100%;
    height: calc(100% - 4.5rem) !important;
    margin: 0.5rem !important;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: row;
    text-wrap: nowrap;
    background: var(--secondary-solid-color);
    box-shadow: var(--protruding-element-shadow-box);
    font-size: calc( 0.6 * var(--schedule-width-multiplier));
}

.schedule-list-container {
    overflow: auto;
}

.schedule-list-content {
    width: fit-content;
}

.schedule-legend,
.schedule-list-form {
    position: sticky;
    left: 0;
    width: 100%;
    background: var(--secondary-disabled-color-2);
    border-radius: 0.3rem;
    box-shadow: var(--protruding-element-shadow-box);
    padding: 0.3rem;
}

.schedule-list-form label {
    text-wrap: nowrap;
}

.schedule-subcontainer {
    display: flex;
    flex-direction: column;
    height: fit-content;
    position: relative;
    width: fit-content;
    gap: 0.5rem;
    margin: 1rem 0;
}

.schedule-subcontainer-sticky {
    position: sticky;
    left: 0;
    z-index: 2000;
    background: var(--secondary-solid-color);
}

.schedule-group-header {
    margin-left: 0.5rem;
    height: var(--schedule-width-multiplier);
    background-color: transparent;
    width: fit-content;
}

.schedule-title {
    margin-inline: 1rem;
    background-color: transparent;
    min-width: fit-content;
    max-width: 100%;
}

.schedule-group-content {
    position: relative;
    width: fit-content;
    margin-left: 1rem;
    display: flex;
    flex-direction: column;
}

.schedule-group-row {
    position: relative;
    display: flex;
    flex-direction: row;
    overflow: hidden;
    width: fit-content;
    min-width: var(--schedule-year-length);
    background: var(--schedule-row-background-color);
}

.schedule-group-row,
.schedule-title {
    height: var(--schedule-width-multiplier);
}

.schedule-group {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    width: fit-content;
    gap: 0.5rem;
}

.schedule-group-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    width: fit-content;
    gap: 2px;
}

.schedule-group:has(.schedule-title),
.schedule-group-content:has(.schedule-title) {
    background-color: var(--secondary-solid-color);
    width: 100%;
    padding-right: 0.5rem;
}

.schedule-group-content:has(.schedule-title) > .schedule-title:nth-child(2n+1) {
    background-color: var(--secondary-disabled-color);
}

.schedule-group-content:has(.schedule-title) > .schedule-title:nth-child(2n) {
    background-color: var(--secondary-disabled-color-2);
}

.schedule-subcontainer > .schedule-group:first-child {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: var(--secondary-solid-color);
    padding-bottom: 0.5rem;
    margin-bottom: -0.5rem;
}

.schedule-group-row.day > div {
    width: var(--schedule-width-multiplier);
}

.schedule-group-content.calendar-indicator > div > div  {
    border-radius: 0.5rem;
    font-weight: bold;
    text-align: center;
    background-color: var(--secondary-solid-color);
    box-shadow: var(--schedule-indicator-box-shadow);
}

.select2-dropdown {
    z-index: 10000;
}

.schedule-finish-container .file-form-set input {
    background: transparent;
    margin-left: 0.5rem;
}

.calendar-indicator .schedule-group-row {
    background: transparent;
}

.schedule-finish-container .buttons :is(td, th) > * {
    display: flex;
    justify-content: center;
    align-items: center;
}