.z-month-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}

.z-month-selector-container {
    display: flex;
    flex-direction: row;
}

.z-month-scrollable-area {
    overflow-y: scroll;
    height: 174px;
    scroll-snap-type: y mandatory;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    scroll-behavior: smooth;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.z-month-scrollable-area::-webkit-scrollbar {
    display: none;
}


.z-month-scroll-button {
    color: #656565;
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.z-month-scroll-button:hover {

    color: #000000;
}

.z-month-non-selectable-element {
    min-height: 1em;
    padding: 1em;
    text-align: center;
    scroll-snap-align: start;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #000000;
    height: 1.5em;
}
.z-month-selectable-element {
    min-height: 1em;
    padding: 1em;
    text-align: center;
    scroll-snap-align: start;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #000000;
    height: 1.5em;
    user-select: none;
    cursor: pointer;
}

.z-month-selectable-element.active-option {
    color: var(--mdc-theme-primary);
    font-weight: 500;
    background-color: rgb(221, 221, 221);
}

.z-month-selectable-element:hover {
    border: 1px solid #9e9e9e;;
    border-radius: 5px;
    background-color: rgb(235, 235, 235);
}

.z-month-input-column {
    min-height: 15em;
    min-width: 8em;
}