.title-page {
    color: white;
    font-size: 1.5rem;
    font-weight: normal;
}

.shift-box {
    width: 100%;
    height: 40px;
    background: rgba(102, 181, 255, 0.8);
    border: 1.8px solid #2491FF;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4px;
    user-select: none;
}


.tooltip-text {
    visibility: hidden;
    background-color: black;
    color: #fff;
    transform: translateX(100px);
/*    text-align: center;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.75rem;*/
}

.tooltip-container {
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
}


.holiday-box {
    width: 100%;
    height: 100%;
    background: rgb(186, 185, 201);
    border: 1.8px solid rgb(50, 50, 54);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border-radius: 4px;
    user-select: none;
}

.btnShiftAssignCustom {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    /*background: none;*/
    border: 1px solid #418ac7;
    height: 26px;
    /*border-radius: 5px;*/
    background-color: #5496cd;
    /*border-color: #418ac7;*/
}

.shift-box.two-day {
    transform: translateX(50%);
}

.main-container {
    max-height: 70vh;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border-bottom: 0.5px solid #8fb4d3;
    border-right: 0.5px solid #8fb4d3;
    border-top: 0.5px solid #8fb4d3;
}

.info-container {
    flex: 0 0 auto;
    background: white;
    overflow-y: auto;
    scrollbar-width: none;
}

.time-container {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: auto;
/*    scroll-snap-type: x proximity;*/
}

.time-container table th,
.time-container table td {
/*    min-width: 100px;*/
    max-height: 40px;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.time-container table td {
    scroll-snap-align: center;
}

.info-container table th,
.info-container table td {
    /*    min-width: 100px;*/
    text-align: center;
}

.time-container table thead th,
.info-container table thead th {
    position: sticky;
    top: 1px;
    background: rgba(228, 236, 242);
    z-index: 1;
    height: 40px;
}

.time-container table thead th::before,
.info-container table thead th::before {
    content: "";
    background: #8fb4d3;
    position: absolute;
    width: 100%;
    height: 2px;
    top: 0;
    left: 0;
    transform: translateY(-2px);
}

.time-container table thead th::after,
.info-container table thead th::after {
    content: "";
    background: #8fb4d3;
    position: absolute;
    width: 100%;
    height: 1px;
    top: 100%;
    left: 0;
    transform: translateY(0px);
}