﻿.uiHorizontalScroller {
    position: relative;
}
.uiHorizontalScroller .scrollRight,
.uiHorizontalScroller .scrollLeft {
    height: 64px;
    width: 64px;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: -16px;
    top: 135px;
    margin-top: -32px;
    border-radius: 50%;
    background: #fff;
    z-index: 2;
    box-shadow: rgba(0, 0, 0, 0.25) 0 54px 55px, rgba(0, 0, 0, 0.12) 0 -12px 30px, rgba(0, 0, 0, 0.12) 0 4px 6px, rgba(0, 0, 0, 0.17) 0 12px 13px, rgba(0, 0, 0, 0.09) 0 -3px 5px;
    display: none;
    -webkit-user-select: none;
    cursor: not-allowed;
}
.uiHorizontalScroller .scrollRight:hover,
.uiHorizontalScroller .scrollLeft:hover {
    cursor: pointer;
}
.uiHorizontalScroller .scrollLeft {
    right: auto;
    left: -16px;
}
.uiHorizontalScroller .scrollRight img,
.uiHorizontalScroller .scrollLeft img {
    filter: grayscale(100%) brightness(40%);
}
.uiHorizontalScroller:hover .scrollRight,
.uiHorizontalScroller:hover .scrollLeft {
    display: flex;
    -webkit-animation: flipInY 600ms;
    animation: flipInY 600ms;
}
.uiHorizontalScrollerInner {
    overflow-x: scroll;
    position: relative;
    scroll-snap-type: x mandatory;
}
.uiHorizontalScrollerInner::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}
ul.uiHorizontalScrollerItemList {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 0; /* Keep, for some reason needed to shrink to content */
    position: relative;
    left: 0;
    transition: left 400ms ease-out;
    display: flex;
}
    ul.uiHorizontalScrollerItemList > li {
        padding: 0;
        margin: 0;
        scroll-snap-align: start;
    }
.uiHorizontalScrollerItemList > li .uiChartColumnWrapper {
    margin-right: 64px;
}
.uiHorizontalScrollerItemList > li:last-child .uiChartColumnWrapper {
    margin-right: 0;
}