@syncfusion/ej2/h-scroll/compatibility/material-dark.css

A modern JavaScript UI toolkit that has been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no external dependencies.

@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");@keyframes hscroll-popup-shadow{0%{border-color:rgba(255,255,255,0.5);box-shadow:0 0 0 0 rgba(255,255,255,0.5)}100%{box-shadow:0 0 0 200px rgba(255,255,255,0.12)}}/*! hscroll icons */.e-lib.e-hscroll.e-rtl.e-scroll-device .e-nav-right-arrow::before{content:'\e904'}.e-lib.e-hscroll.e-rtl.e-scroll-device .e-nav-left-arrow::before{content:'\e913'}.e-lib.e-hscroll.e-rtl .e-nav-left-arrow::before{content:'\e913'}.e-lib.e-hscroll.e-rtl .e-nav-right-arrow::before{content:'\e904'}.e-lib.e-hscroll.e-scroll-device .e-nav-right-arrow::before{content:'\e913'}.e-lib.e-hscroll.e-scroll-device .e-nav-left-arrow::before{content:'\e904'}.e-lib.e-hscroll .e-nav-left-arrow::before{content:'\e904';line-height:normal}.e-lib.e-hscroll .e-nav-right-arrow::before{content:'\e913';line-height:normal}/*! h-scroll layout */.e-bigger .e-lib.e-hscroll,.e-lib.e-hscroll.e-bigger{min-height:56px}.e-bigger .e-lib.e-hscroll:not(.e-scroll-device),.e-lib.e-hscroll.e-bigger:not(.e-scroll-device){padding:0 50px}.e-bigger .e-lib.e-hscroll.e-scroll-device,.e-lib.e-hscroll.e-bigger.e-scroll-device{padding-right:50px}.e-bigger .e-lib.e-hscroll.e-rtl.e-scroll-device,.e-lib.e-hscroll.e-bigger.e-rtl.e-scroll-device{padding-left:50px;padding-right:initial}.e-bigger .e-lib.e-hscroll .e-nav-arrow.e-icons,.e-lib.e-hscroll.e-bigger .e-nav-arrow.e-icons{font-size:14px}.e-bigger .e-lib.e-hscroll.e-rtl .e-scroll-overlay.e-scroll-right-overlay,.e-lib.e-hscroll.e-bigger.e-rtl .e-scroll-overlay.e-scroll-right-overlay{left:50px}.e-bigger .e-lib.e-hscroll .e-scroll-overlay.e-scroll-right-overlay,.e-lib.e-hscroll.e-bigger .e-scroll-overlay.e-scroll-right-overlay{right:50px}.e-bigger .e-lib.e-hscroll .e-scroll-nav,.e-lib.e-hscroll.e-bigger .e-scroll-nav{min-height:56px;width:50px}.e-lib.e-hscroll{display:block;position:relative;width:inherit}.e-lib.e-hscroll.e-rtl.e-scroll-device{padding-left:50px;padding-right:initial}.e-lib.e-hscroll.e-rtl.e-scroll-device .e-scroll-nav{transform:skewX(-16deg) translateX(-6px)}.e-lib.e-hscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-right-overlay{left:50px;right:auto;transform:skewX(-16deg) translateX(-6px)}.e-lib.e-hscroll.e-rtl.e-scroll-device .e-scroll-overlay.e-scroll-left-overlay{left:auto;right:0}.e-lib.e-hscroll:not(.e-scroll-device){padding:0 40px}.e-lib.e-hscroll.e-scroll-device{padding-right:50px}.e-lib.e-hscroll.e-scroll-device .e-scroll-nav{transform:skewX(-16deg) translateX(6px);width:50px}.e-lib.e-hscroll.e-scroll-device .e-scroll-nav .e-nav-arrow{font-size:14px;transform:skewX(16deg)}.e-lib.e-hscroll.e-scroll-device .e-scroll-overlay{opacity:.5;pointer-events:none;position:absolute;top:0;z-index:100}.e-lib.e-hscroll.e-scroll-device .e-scroll-overlay.e-scroll-right-overlay{left:auto;right:50px;transform:skewX(-16deg) translateX(6px)}.e-lib.e-hscroll.e-scroll-device .e-scroll-overlay.e-scroll-left-overlay{left:0;right:auto}.e-lib.e-hscroll.e-overlay .e-hscroll-content>*{pointer-events:none}.e-lib.e-hscroll>*{height:inherit}.e-lib.e-hscroll .e-hscroll-content{display:inline-block;height:inherit;position:relative;-ms-touch-action:none;touch-action:none}.e-lib.e-hscroll .e-hscroll-content>*{pointer-events:auto}.e-lib.e-hscroll.e-rtl .e-scroll-nav.e-scroll-right-nav{left:0;right:auto}.e-lib.e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav{left:auto;right:0}.e-lib.e-hscroll .e-scroll-nav{-ms-flex-align:center;align-items:center;bottom:0;cursor:pointer;display:-ms-flexbox;display:flex;height:100%;min-height:42px;overflow:hidden;position:absolute;top:0;width:40px}.e-lib.e-hscroll .e-scroll-nav.e-scroll-left-nav{left:0}.e-lib.e-hscroll .e-scroll-nav.e-scroll-right-nav{right:0}.e-lib.e-hscroll .e-scroll-nav.e-ie-align{display:table}.e-lib.e-hscroll .e-nav-arrow{position:relative}.e-lib.e-hscroll .e-nav-arrow.e-icons{display:table-cell;text-align:center;vertical-align:middle;width:100%}.e-lib.e-hscroll .e-hscroll-bar .e-hscroll-content .e-overlay{pointer-events:none}/*! h-scroll theme */.e-lib.e-hscroll .e-icons{color:rgba(255,255,255,0.54)}.e-lib.e-hscroll.e-rtl.e-scroll-device .e-scroll-nav.e-scroll-right-nav{border-color:#000;box-shadow:4px 0 8px 0 rgba(0,0,0,0.06)}.e-lib.e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav{background-color:#212121;border-color:#000;border-width:0;box-shadow:-4px 0 8px 0 rgba(0,0,0,0.6)}.e-lib.e-hscroll.e-scroll-device .e-scroll-nav.e-scroll-right-nav .e-nav-arrow{color:#000}.e-lib.e-hscroll .e-scroll-overlay{background-color:transparent;background-repeat:repeat-x}.e-lib.e-hscroll .e-scroll-overlay.e-scroll-left-overlay{background-image:linear-gradient(to right, rgba(33,33,33,0.5) 0, rgba(33,33,33,0.0001) 100%)}.e-lib.e-hscroll .e-scroll-overlay.e-scroll-right-overlay{background-image:linear-gradient(to right, rgba(33,33,33,0.0001) 0, rgba(33,33,33,0.5) 100%)}.e-lib.e-hscroll.e-rtl .e-scroll-nav{background:#212121}.e-lib.e-hscroll.e-rtl .e-scroll-nav.e-scroll-left-nav{border-left:1px solid rgba(255,255,255,0.1);border-right:0}.e-lib.e-hscroll.e-rtl .e-scroll-nav.e-scroll-right-nav{border-left:0;border-right:1px solid rgba(255,255,255,0.1)}.e-lib.e-hscroll.e-rtl .e-scroll-nav:hover{background:rgba(255,255,255,0.1);border:0;color:#000;border-color:rgba(255,255,255,0.1)}.e-lib.e-hscroll:not(.e-scroll-device) .e-scroll-nav:hover{background:rgba(255,255,255,0.1);border:0;color:#000}.e-lib.e-hscroll:not(.e-scroll-device) .e-scroll-nav:focus{background:rgba(255,255,255,0.1);border:0;color:#000;border-color:rgba(255,255,255,0.1)}.e-lib.e-hscroll:not(.e-scroll-device) .e-scroll-nav:active{background:rgba(255,255,255,0.18);border:0;box-shadow:none;color:#000}.e-lib.e-hscroll .e-scroll-nav{background:#212121}.e-lib.e-hscroll .e-scroll-nav.e-scroll-left-nav{border-right:1px solid rgba(255,255,255,0.1)}.e-lib.e-hscroll .e-scroll-nav.e-scroll-right-nav{border-left:1px solid rgba(255,255,255,0.1)}.e-lib.e-hscroll .e-scroll-nav::after{background-color:transparent;border-radius:50%;border-width:1px;box-sizing:border-box;content:'';height:1px;left:50%;position:absolute;top:50%;visibility:hidden;width:1px}.e-lib.e-hscroll .e-scroll-nav:active::after{animation:hscroll-popup-shadow .6s ease-out 0ms;visibility:visible}.e-lib .e-js [class^='e-'],.e-lib .e-js [class*=' e-']{box-sizing:content-box}