:root {
    --calendar-header-color: var(--main-low-visibility-color);
    --calendar-day-color: var(--main-color);
    --calendar-day-color-hover: var(--button-icon-color-hover);
    --calendar-day-selected-border: none;
    --calendar-day-selected-background-color: var(--icon-grey-color);
}
:root.high-contrast {
    --calendar-header-color: var(--main-color-hover);
    --calendar-day-color: var(--main-color);
    --calendar-day-color-hover: var(--button-icon-color-hover);
    --calendar-day-selected-border: 1px solid var(--main-color);
    --calendar-day-selected-background-color: var(--main-background-color);
}
.sm-time {
    width: min-content;
    display: flex;
    flex-flow: column;
    row-gap: 1em;
    align-items: center;
}
.sm-time .time-container {
    font-family: Montserrat;
    font-weight: 500;
    font-size: 1.2em;
    display: grid;
    grid-template-columns: min-content min-content;
    grid-column-gap: 1.5em;
    width: min-content;
    align-items: center;
    text-align: center;
}
.sm-time .hours-container {
    display: grid;
    grid-template-columns: min-content min-content min-content min-content;
    grid-auto-flow: row;
    width: min-content;
    align-items: center;
    text-align: center;
}
.sm-time .minutes-container {
    display: grid;
    grid-template-columns: min-content min-content;
    grid-auto-flow: row;
    width: min-content;
    align-items: center;
    text-align: center;
}
.sm-time .time-container div.label {
    color: var(--calendar-header-color);
    padding: 0.5em;
    padding-top: 0;
}
.sm-time .time-container div .hour,
.sm-time .time-container div .minute {
    padding: 0.5em;
    color: var(--calendar-day-color);
    cursor: pointer;
}
.sm-time .time-container div .hour.current,
.sm-time .time-container div .minute.current {
    color: var(--main-record-color-purple);
}
.sm-time .time-container div .hour.selected,
.sm-time .time-container div .minute.selected {
    background-color: var(--calendar-day-selected-background-color);
    border: var(--calendar-day-selected-border);
    border-radius: 0.25em;

}
.sm-time .time-container div .hour:hover,
.sm-time .time-container div .minute:hover {
    color: var(--calendar-day-color-hover);
}
.sm-time .buttons-container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    column-gap: 0.5em;
    justify-content: space-evenly;
}
.sm-time .buttons-container .sm-button {
    min-width: var(--button-min-width);
}