.time-slider {
    width: 100%;
    height: 60px;
    overflow: hidden;
    cursor: pointer;
}

.time-slider .pointer {
    height: 60px;
    margin: 0 auto;
    background: rgba(252, 219, 115, 0.5);
}

.time-slider .scale-block {
    height: 35px;
    display: flex;
    flex-direction: row;
    align-items: end;
    webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    width: min-content;
}

.time-slider .scale-block .graduation {
    height: 12px;
    background: #cccccc;
    flex-shrink: 0;
}

.time-slider .scale-block .graduation.hour {
    height: 24px;
    position: relative;
}

.time-slider .scale-block .graduation.hour .hour-wrapper {
    position: absolute;
    top: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
}

.time-slider .scale-block .graduation.hour .hour-wrapper .hour-text {
    flex-shrink: 0;
    font-size: .875rem;
}