.flexible-date-section {
    overflow: auto;

    .room-name-section {
        flex: 1;

        p {
            width: 8rem;
        }
    }

    .date-content {
        width: 3rem;
    }
}

.date-card {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.date-card:hover {
    background: var(--green-color);
    color: var(--white-color);
}

.legend-square {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 5px;
}

.available {
    background: var(--white-color);
    color: var(--black-color);
    border: 1px solid rgba(187, 187, 187, 1);
}

.unavailable {
    background: rgba(187, 187, 187, 1);
}

.unavailable:hover {
    background: rgba(187, 187, 187, 1) !important;
}

.close-for-arrival {
    background: linear-gradient(135deg, rgba(187, 187, 187, 1) 50%, rgb(255, 255, 255) 50%);
    border: 1px solid rgba(187, 187, 187, 1);
    color: var(--black-color);
}

.close-for-departure {
    background: linear-gradient(135deg, rgb(255, 255, 255) 50%, rgb(187, 187, 187) 50%);
    border: 1px solid rgba(187, 187, 187, 1);
    color: var(--black-color);
}

.check-in {
    background: linear-gradient(135deg, rgba(34, 231, 0, 1) 50%, rgba(57, 186, 35, 1) 50%);
    color: var(--white-color);
}

.check-out {
    background: linear-gradient(135deg, rgba(57, 186, 35, 1) 50%, rgba(34, 231, 0, 1) 50%);
    color: var(--white-color);
}

.selected-date {
    background: var(--green-color);
    color: var(--white-color);
}