.schedule-controls-container {
    justify-content: flex-start;
    gap: 2rem;
}

.field {
    &.day-pickers {
        justify-content: space-between;
    }
    &.small {
        width: unset;
    }
}

.circle {
    background-color: var(--pure-white);
    border: 1px solid var(--light-gray);
    box-shadow: 1px 1px 4px rgba(238, 238, 238, 0.75);
    padding: 0.5rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    cursor: pointer;
    color: var(--brand-turquoise-darker);

    &.selected {
        --highlight-color-light: color-mix(in srgb, var(--display-select-color), transparent 90%);
        --highlight-color-dark: var(--display-select-color);
        background-clip: padding-box;
        background: var(--blue-background-grad);

        h5 {
            color: var(--lightest-gray)
        }
    }

    input {
        visibility: hidden;
        position: absolute;
        bottom: -30px
    }
}