.time-slot-selector {
    display: flex;
    justify-content: center;
}

    .time-slot-selector .command {
        display: flex;
        align-items: flex-start;
    }

        .time-slot-selector .command i {
            /* same size as time-slots-per-day title */
            font-size: 32px;
            /* same as btn-primary */
            color: #00ade9 !important;
        }

    .time-slot-selector > * {
        margin: 3px;
    }

    .time-slot-selector .group-by-day {
        display: flex;
    }

        .time-slot-selector .group-by-day .time-slots-per-day {
            display: flex;
            flex-direction: column;
            min-width: 106px;
        }

            .time-slot-selector .group-by-day .time-slots-per-day.no-choice.col-rev-0,
            .time-slot-selector .group-by-day .time-slots-per-day.no-choice.col-rev-1.next-day-has-no-choice {
                display: none;
            }

            .time-slot-selector .group-by-day .time-slots-per-day > * {
                display: flex;
            }

            .time-slot-selector .group-by-day .time-slots-per-day .title {
                font-weight: bold;
                /* same size as command i */
                height: 32px;
                align-items: center;
                justify-content: center;
            }

            .time-slot-selector .group-by-day .time-slots-per-day .content {
                flex-direction: column;
            }

                .time-slot-selector .group-by-day .time-slots-per-day .content input {
                    justify-content: center;
                    margin: 3px;
                }

    .time-slot-selector.no-more-choice .show-me-more,
    .time-slot-selector .no-more-choice .show-me-more {
        display: none !important;
    }

    .time-slot-selector .show-me-more {
        justify-content: center;
        margin: 5px;
    }

        .time-slot-selector .show-me-more.common-btns-container > .common-btn {
            margin: 0px;
        }

    .time-slot-selector .more-choice {
        display: none;
    }

    .time-slot-selector.more-choices-shown .more-choice {
        display: flex;
    }

    .time-slot-selector.more-choices-shown .show-me-more {
        display: none !important;
    }

input[type="button"].creneaux-prive {
    background-color: #004C6D !important;
}

input[type="button"].creneaux-public {
    background-color: #00ade9 !important;
}



/* 900px is the calendar size in desktop mode */
@media (min-width:901px) {
    .time-slot-selector .desktop-only {
        display: flex;
    }

    .time-slot-selector .mobile-only {
        display: none !important;
    }

    .time-slot-selector .group-by-day {
        border-color: #00ade9;
        border-style: solid;
        border-left-width: 1px;
    }

        .time-slot-selector .group-by-day .time-slots-per-day {
            border-color: #00ade9;
            border-style: solid;
            border-right-width: 1px;
        }
}



/* 900px is the calendar size in desktop mode */
@media (max-width:900px) {
    .time-slot-selector .desktop-only {
        display: none !important;
    }

    .time-slot-selector .mobile-only {
        display: flex;
    }

    .time-slot-selector .command {
        align-items: center;
    }

    .time-slot-selector .group-by-day {
        flex-direction: column;
    }

        /* the same thing as .common-btn.secondary */
        .time-slot-selector .group-by-day .time-slots-per-day .title {
            border: 1px solid #d5d5d5 !important;
            background-color: #f3f3f3 !important;
            color: #1a272b !important;
            cursor: pointer;
            justify-content: space-around;
        }

            .time-slot-selector .group-by-day .time-slots-per-day .title .quantity {
                font-size: smaller;
                font-weight: normal;
            }

        .time-slot-selector .group-by-day .time-slots-per-day > *,
        .time-slot-selector .group-by-day .time-slots-per-day.no-choice {
            display: none;
        }

        .time-slot-selector .group-by-day .time-slots-per-day .title,
        .time-slot-selector .group-by-day .time-slots-per-day.selected > * {
            display: flex;
        }

        .time-slot-selector .group-by-day .time-slots-per-day .content {
            flex-direction: initial;
            flex-wrap: wrap;
            justify-content: center;
            margin: 5px;
        }
}