@keyframes showElement {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes hideElement {
from {
opacity: 1; }
to {
opacity: 0; } }
@media only screen and (min-width: 1026px) {
.store {
box-sizing: border-box;
width: 1px;
height: 90px; }
.store .track-store {
list-style: none;
margin: 0;
padding: 0;
height: 100%; }
.store .track-store li {
height: 100%;
width: 74px;
display: inline-block;
border-left: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
top: 0; }
.store .track-store li a {
width: 100%;
height: 100%;
display: block;
font-size: 10px;
text-transform: uppercase;
text-align: center;
overflow: hidden;
padding-top: 30px; }
.store .track-store li a i {
display: block;
font-size: 20px; } }
@media only screen and (max-width: 426px) {
#sonaar-player .playlist .tracklist .track-store, #sonaar-player .player .control .previous {
display: none !important; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist button.play, #sonaar-player .player .control .previous {
display: none !important; } }
@media only screen and (min-width: 425px) and (max-width: 1025px) {
#sonaar-player .playlist .tracklist .track-store {
display: none !important; } }
#sonaar-player {
position: fixed;
bottom: 0;
color: #fff;
transform: translate3d(0, 94px, 0);
width: 100%;
height: 90px;
z-index: 8010;
display: block !important; }
@media only screen and (min-width: 540px) {
#sonaar-player {
transition: transform 0.75s ease, height 0.75s ease; } }
@media only screen and (max-width: 539px) {
#sonaar-player {
transition: 100ms ease-in; } }
#sonaar-player.enable {
transition: 500ms ease-out;
transform: translate3d(0, 0, 0); }
@media only screen and (max-width: 1025px) {
#sonaar-player.enable .store {
position: absolute;
bottom: 85px;
right: 4px;
width: auto !important;
min-width: 150px;
border-radius: 3px;
z-index: 10000;
box-shadow: 0 0 5px rgba(138, 138, 138, 0.55); }
#sonaar-player.enable .store .track-store {
font-size: 10px;
list-style: none;
margin: 0;
padding: 0; }
#sonaar-player.enable .store .track-store li {
border: none;
display: block;
padding: 7px; }
#sonaar-player.enable .store .track-store li a {
display: block;
text-align: center;
color: inherit !important;
background-color: inherit !important; }
#sonaar-player.enable .store .track-store li a .fa {
display: inline-block;
padding-right: 10px;
font-size: 1.4em; }
#sonaar-player.enable .store .track-store li + li {
border-top: 1px solid rgba(138, 138, 138, 0.25); } }
@media only screen and (max-width: 1025px) {
#sonaar-player.enable .store.opened {
display: block;
animation: showElement 0.25s ease-in-out both; } }
@media only screen and (max-width: 1025px) {
#sonaar-player.enable .store:not(.opened) {
animation: hideElement 0.25s ease-in-out both;
display: none; } }
#sonaar-player.show-list {
height: 100%;
z-index: 9999; }
#sonaar-player .close {
right: 50px;
top: 45px;
position: absolute;
cursor: pointer; }
#sonaar-player .close.btn_playlist {
width: 30px;
height: 28px; }
#sonaar-player .close.btn_playlist:after, #sonaar-player .close.btn_playlist:before {
margin-left: 14px; }
#sonaar-player .close:after {
content: '';
border: 3px solid #fff;
transform: rotate(-45deg);
width: 0;
height: 25px;
position: absolute;
border-top: none;
border-right: none; }
@media only screen and (max-width: 860px) {
#sonaar-player .close:after {
width: 0;
height: 16px; } }
#sonaar-player .close:before {
content: '';
border: 3px solid #fff;
transform: rotate(45deg);
width: 0;
height: 25px;
position: absolute;
border-top: none;
border-right: none; }
@media only screen and (max-width: 860px) {
#sonaar-player .close:before {
width: 0;
height: 16px; } }
@media only screen and (max-width: 860px) {
#sonaar-player .close {
top: 15px;
right: 30px;
z-index: 9999; } }
#sonaar-player .close.btn-player {
width: 35px;
height: 35px;
right: 0;
bottom: 90px;
top: auto; }
#sonaar-player .close.btn-player:after, #sonaar-player .close.btn-player:before {
display: none; }
#sonaar-player .close.btn-player .audioBar {
display: block;
width: 16px;
height: 16px;
transform: rotate(180deg);
position: absolute;
top: 11px;
left: 9px; }
#sonaar-player .close.btn-player.enable {
width: 27px;
height: 21px;
transition: all .03s ease; }
#sonaar-player .close.btn-player.enable:after {
display: block;
position: absolute;
width: 0px;
height: 15px;
left: 12px;
top: 4px;
border: 1px solid;
border-top: none;
border-right: none; }
#sonaar-player .close.btn-player.enable:before {
display: block;
position: absolute;
width: 0px;
height: 15px;
left: 12px;
top: 4px;
border: 1px solid;
border-top: none;
border-right: none; }
#sonaar-player .close.btn-player.enable .audioBar {
display: none; }
#sonaar-player .playerNowPlaying {
width: 342px; }
#sonaar-player .playerNowPlaying .album-art {
height: 70px;
width: 70px;
position: absolute;
top: 10px;
left: 10px;
background: #222;
transition: all 0.5s ease; }
@media only screen and (max-width: 540px) {
#sonaar-player .playerNowPlaying .album-art {
height: 90px;
width: 90px;
top: 2px;
left: 0; } }
#sonaar-player .playerNowPlaying .album-art .loading-icon {
color: #fff;
position: absolute;
width: 100%;
top: 20px;
opacity: 0;
transition: opacity 0.75s ease; }
#sonaar-player .playerNowPlaying .album-art.loading-enable.loading .loading-icon {
opacity: 1; }
#sonaar-player .playerNowPlaying .album-art img {
width: 100%;
height: auto; }
#sonaar-player .playerNowPlaying .album-art img.hover {
opacity: 0;
position: absolute;
bottom: 82px;
width: 200px;
transition: all 0.5s ease;
transform: translate3d(0, 200px, 0); }
@media only screen and (min-width: 540px) {
#sonaar-player .playerNowPlaying .album-art:hover img.hover {
opacity: 1;
transform: translate3d(0, 0, 0); } }
#sonaar-player .playerNowPlaying .metadata {
position: absolute;
left: 100px;
letter-spacing: 1px;
width: 200px;
overflow: hidden;
white-space: nowrap;
padding: 0 0 5px;
line-height: 1.65em;
top: 50%;
transform: translateY(-50%); }
#sonaar-player .playerNowPlaying .metadata .track-name,
#sonaar-player .playerNowPlaying .metadata .track-artist,
#sonaar-player .playerNowPlaying .metadata .track-album {
float: left;
display: inline;
clear: left; }
#sonaar-player .playerNowPlaying .metadata .track-name.scrolling,
#sonaar-player .playerNowPlaying .metadata .track-artist.scrolling,
#sonaar-player .playerNowPlaying .metadata .track-album.scrolling {
transition: transform 5s linear; }
#sonaar-player .playerNowPlaying .metadata .track-name .duplicate,
#sonaar-player .playerNowPlaying .metadata .track-artist .duplicate,
#sonaar-player .playerNowPlaying .metadata .track-album .duplicate {
padding-left: 10px; }
#sonaar-player .playerNowPlaying .metadata .track-artist,
#sonaar-player .playerNowPlaying .metadata .track-album {
font-size: 0.7em;
line-height: 1em; }
#sonaar-player .playerNowPlaying .metadata.no-image {
left: 20px;
width: 260px; }
@media only screen and (max-width: 860px) {
#sonaar-player .playerNowPlaying .metadata {
width: calc( 100% - 255px); } }
@media only screen and (max-width: 540px) {
#sonaar-player .playerNowPlaying .metadata {
font-size: 12px; } }
@media only screen and (max-width: 860px) {
#sonaar-player .playerNowPlaying {
width: auto;
flex: 1; } }
@media only screen and (max-width: 860px) {
#sonaar-player .no-list .playerNowPlaying .metadata {
width: calc( 100% - 215px); } }
#sonaar-player .playlist {
box-sizing: border-box;
height: calc(100vh - 94px);
position: absolute;
width: 100%; }
#sonaar-player .playlist .scroll {
height: calc(100vh - 320px);
width: 100%;
top: 100px;
position: absolute;
display: flex;
overflow-y: hidden; }
#sonaar-player .playlist .container {
min-height: 0;
width: 100%;
max-width: 1144px;
height: auto;
align-self: center;
margin: auto;
padding: 0 20px;
background-color: transparent; }
#sonaar-player .playlist .container .boxed {
height: auto;
width: 100%; }
#sonaar-player .playlist .title {
margin-bottom: 20px;
display: block;
text-align: center;
font-size: 54px;
line-height: 1.265em; }
@media only screen and (max-width: 860px) {
#sonaar-player .playlist .title {
box-sizing: border-box;
font-size: 18px;
text-transform: uppercase;
position: fixed;
top: 0;
left: 0;
width: 100vw;
margin: 0;
padding: 20px; } }
#sonaar-player .playlist .shuffle {
position: fixed;
top: 60px;
left: 50vw;
transform: translate(-50%, 0); }
@media only screen and (min-width: 541px) {
#sonaar-player .playlist .shuffle {
display: none; } }
#sonaar-player .playlist button.play {
padding: 12px 34px;
border-radius: 50px;
border: none;
font-family: Tahoma, sans-serif;
font-size: 14px;
text-transform: uppercase;
position: relative;
left: 50%;
transform: translate(-50%, 0);
margin: 0 auto 50px auto;
outline: none;
cursor: pointer; }
#sonaar-player .playlist .tracklist {
list-style-type: none;
margin: 0;
padding: 0;
display: table;
width: 100%; }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist {
display: block; } }
#sonaar-player .playlist .tracklist li {
filter: brightness(70%);
font-weight: inherit;
display: table-row;
line-height: 2.4em;
cursor: pointer; }
#sonaar-player .playlist .tracklist li.active {
filter: brightness(100%);
font-weight: 700; }
@media only screen and (max-width: 860px) {
#sonaar-player .playlist .tracklist li {
font-size: 15px; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist li {
display: block;
line-height: 1.265em;
margin-bottom: 1.265em;
position: relative; } }
#sonaar-player .playlist .tracklist span {
display: table-cell; }
@media only screen and (min-width: 540px) {
#sonaar-player .playlist .tracklist span .content {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 90%; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist span {
display: inline-block; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist .track-status {
position: absolute;
font-size: 12px;
font-weight: 300; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist .track-lenght {
font-size: 12px;
font-weight: 300;
position: absolute;
right: 0px;
top: 0; } }
#sonaar-player .playlist .tracklist .track-store {
text-align: right; }
#sonaar-player .playlist .tracklist .track-store a {
font-size: 20px;
padding-left: 15px; }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist .track-title {
display: block;
width: 100%;
padding-left: 30px; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist .track-artist,
#sonaar-player .playlist .tracklist .track-album {
font-size: 12px;
font-weight: 300;
padding-left: 30px; } }
@media only screen and (max-width: 540px) {
#sonaar-player .playlist .tracklist .track-artist + .track-album {
padding-left: 10px; } }
#sonaar-player .player {
width: 100%;
height: 90px;
position: absolute;
left: 0;
bottom: 0;
top: auto;
border-width: 4px;
border-style: solid;
border-left: none;
border-bottom: none;
border-right: none; }
#sonaar-player .player .player-row {
display: flex;
height: 90px; }
#sonaar-player .player .wavesurfer {
width: auto;
height: 90px;
position: relative;
flex: 1; }
#sonaar-player .player .wavesurfer .timing {
width: calc(100% - 100px);
position: absolute;
height: 90px;
left: 25px;
bottom: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
font-size: 0.7em;
line-height: 1em; }
#sonaar-player .player .wavesurfer .sr-progress {
width: calc(100% - 200px);
position: absolute;
height: 90px;
left: 75px;
bottom: 0; }
#sonaar-player .player .wavesurfer .sr-progress .bar {
position: absolute;
height: 1px;
left: 0;
top: 50%; }
#sonaar-player .player .wavesurfer .sr-progress .progress_totalTime {
width: 100%; }
#sonaar-player .player .wavesurfer .sr-progress .progress_currentTime {
height: 3px;
top: calc(50% - 1px); }
#sonaar-player .player .wavesurfer .sr-progress .skip {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0; }
#sonaar-player .player .wavesurfer .volume {
width: 50px;
height: 100%;
position: absolute;
bottom: 0;
right: 0;
z-index: 200; }
#sonaar-player .player .wavesurfer .volume .slider-container {
position: absolute;
width: 30px;
height: 100px;
left: 10px;
bottom: 70px;
background: #fff;
z-index: 200;
border: 1px solid #bbb;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
border-radius: 1px;
display: none; }
#sonaar-player .player .wavesurfer .volume .slider-container .slide {
width: 100%;
height: 70px;
position: absolute;
left: calc(50% - 0.5px);
top: 20px;
cursor: pointer; }
#sonaar-player .player .wavesurfer .volume .slider-container .slide:before {
content: '';
position: absolute;
width: 1px;
height: 100%;
left: 0;
top: -5px;
opacity: 0.5; }
#sonaar-player .player .wavesurfer .volume .slider-container .ui-slider-range {
position: absolute;
width: 2px;
height: 60%;
bottom: 0;
left: -0.5px; }
#sonaar-player .player .wavesurfer .volume .slider-container .ui-slider-handle {
width: 7px;
height: 7px;
border-radius: 100%;
position: absolute;
left: -3px;
cursor: pointer; }
#sonaar-player .player .wavesurfer .volume .slider-container .trigger {
height: calc(100% - 20px);
width: 100%;
top: 10px;
position: absolute; }
#sonaar-player .player .wavesurfer .volume .slider-container:before {
width: 0;
height: 0;
border: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #bbb;
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translate(-50%); }
#sonaar-player .player .wavesurfer .volume .slider-container:after {
width: 0;
height: 0;
border: none;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #fff;
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translate(-50%); }
#sonaar-player .player .wavesurfer .volume .icon {
width: 22px;
height: 22px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
cursor: pointer; }
#sonaar-player .player .wavesurfer .volume:hover .slider-container {
display: block; }
#sonaar-player .player .wavesurfer #sPlayer {
height: 90px;
opacity: 0;
transition: all 3000ms ease;
overflow: hidden;
width: calc( 100% - 200px);
left: 75px; }
#sonaar-player .player .wavesurfer #sPlayer.sr_hide {
display: block;
opacity: 0; }
#sonaar-player .player .wavesurfer #sPlayer.reveal {
opacity: 1; }
@media only screen and (max-width: 860px) {
#sonaar-player .player .wavesurfer {
display: none !important; } }
#sonaar-player .player .progressLoading {
background: rgba(255, 255, 255, 0.25);
width: 0%;
height: 1px;
box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
width: calc( 100% - 562px);
position: absolute;
left: 552px;
top: 45px;
transition: opacity 3000ms ease; }
#sonaar-player .player .wave {
position: absolute;
left: 30px;
top: 28px; }
#sonaar-player .player .wave wave {
position: absolute;
overflow-x: hidden !important; }
#sonaar-player .player .wave.sonaar_fake_wave {
top: 10px; }
#sonaar-player .player .control {
position: relative;
width: 200px;
transition: all 0.5s ease; }
#sonaar-player .player .control.no-list {
width: 125px; }
@media only screen and (max-width: 540px) {
#sonaar-player .player .control.no-list {
width: 120px; } }
@media only screen and (max-width: 860px) {
#sonaar-player .player .control {
margin-right: 20px; } }
@media only screen and (max-width: 767px) {
#sonaar-player .player .control {
margin-right: 15px; } }
@media only screen and (max-width: 540px) {
#sonaar-player .player .control {
width: 110px;
margin-right: 0; } }
#sonaar-player .player .control .play {
position: absolute;
right: 70px;
height: 100%;
width: 50px;
opacity: 1 !important;
display: block;
cursor: pointer;
bottom: 0;
fill: #fff; }
#sonaar-player .player .control .play svg {
height: 25px;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%; }
#sonaar-player .player .control .play path,
#sonaar-player .player .control .play rect {
transition: all 300ms ease; }
#sonaar-player .player .control .play rect {
opacity: 0; }
#sonaar-player .player .control .play.audio-playing path {
opacity: 0; }
#sonaar-player .player .control .play.audio-playing rect {
opacity: 1; }
@media only screen and (max-width: 540px) {
#sonaar-player .player .control .play {
right: 28px; } }
#sonaar-player .player .control .previous {
position: absolute;
right: 125px;
bottom: 0;
opacity: 1 !important;
width: 30px;
height: 100%;
display: block;
cursor: pointer;
fill: #fff; }
#sonaar-player .player .control .previous svg {
height: 20px;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%; }
#sonaar-player .player .control .next {
position: absolute;
right: 35px;
opacity: 1 !important;
bottom: 0;
width: 30px;
height: 100%;
display: block;
cursor: pointer;
fill: #fff; }
#sonaar-player .player .control .next svg {
height: 20px;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%; }
@media only screen and (max-width: 540px) {
#sonaar-player .player .control .next {
right: 0; } }
#sonaar-player .player .control .shuffle {
position: absolute;
right: 0;
bottom: 0;
height: 100%; }
@media only screen and (max-width: 540px) {
#sonaar-player .player .control .shuffle {
display: none; } }
#sonaar-player .player .control .shuffle div {
top: 50%;
transform: translate(0, -50%);
position: relative; }
#sonaar-player .player .control .list {
position: absolute;
left: 0;
opacity: 1 !important;
bottom: 0;
width: 24px;
height: 100%;
display: block;
cursor: pointer;
fill: #fff; }
#sonaar-player .player .control .list svg {
height: 20px;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
left: 50%; }
#sonaar-player .shuffle {
width: 20px; }
#sonaar-player .shuffle svg {
cursor: pointer;
display: block; }
#sonaar-player.hide-track-lenght .playlist .tracklist .track-lenght {
display: none; }
#sonaar-player.hide-track-category .playlist .tracklist .track-album {
display: none; }
#sonaar-player .sonaar-extend-button {
height: 100%;
width: 25px;
font-size: 16px;
line-height: 16px;
text-align: center;
margin-right: 5px;
cursor: pointer; }
@media only screen and (min-width: 1026px) {
#sonaar-player .sonaar-extend-button {
display: none; } }
#sonaar-player .sonaar-extend-button i {
top: 50%;
transform: translate(0, -50%);
position: relative;
display: block; }
#sonaar-player .mobileProgress {
width: 100%;
position: absolute;
top: -6px;
z-index: 10;
cursor: pointer; }
#sonaar-player .mobileProgress .skip {
position: absolute;
width: 100%;
height: 390%;
top: -130%;
z-index: 10; }
@media only screen and (min-width: 861px) {
#sonaar-player .mobileProgress {
display: none; } }
#sonaar-player .mobileProgressing {
height: 6px; }
#sonaar-player .progressDot {
height: 10px;
width: 10px;
border-radius: 5px;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%); }
body:not(.continuousPlayer-enable) #sonaar-player .progressDot {
opacity: 0; }
@media only screen and (min-width: 540px) {
.sonaar-player-slidefade-enter-active {
transition: 1s 0.4s all ease; } }
@media only screen and (min-width: 540px) {
.sonaar-player-slidefade-leave-active {
transition: all .4s ease; } }
@media only screen and (min-width: 540px) {
.sonaar-player-slidefade-enter {
transform: scale(0.8);
opacity: 0; } }
@media only screen and (min-width: 540px) {
.sonaar-player-slidefade-leave-to {
opacity: 0; } }
@media only screen and (max-width: 1025px) {
.sonaar-player-storefade-enter-active {
transition: all .03s ease; } }
@media only screen and (max-width: 1025px) {
.sonaar-player-storefade-leave-active {
transition: all .03s ease; } }
@media only screen and (max-width: 1025px) {
.sonaar-player-storefade-enter {
transform: translateY(70px); } }
@media only screen and (max-width: 1025px) {
.sonaar-player-storefade-leave-to {
transform: translateY(70px); } }
@media only screen and (min-width: 540px) {
#pusher-wrap.sonaar-list-active {
-webkit-animation: blur 0.5s linear forwards;
-moz-animation: blur 0.5s linear forwards;
-ms-animation: blur 0.5s linear forwards;
-o-animation: blur 0.5s linear forwards;
animation: blur 0.5s linear forwards; } }
@-webkit-keyframes blur {
from {
-webkit-filter: blur(0);
filter: blur(0); }
to {
-webkit-filter: blur(20px);
filter: blur(20px); } }
@-moz-keyframes blur {
from {
-webkit-filter: blur(0);
filter: blur(0); }
to {
-moz-filter: blur(20px);
filter: blur(20px); } }
@keyframes blur {
from {
-webkit-filter: blur(0);
filter: blur(0); }
to {
-webkit-filter: blur(20px);
-moz-filter: blur(20px);
filter: blur(20px); } }
.sonaar-list-active #pusher {
overflow-y: hidden;
overflow-x: hidden;
height: 100vh; } .ps {
height: 250px;
overflow: hidden !important;
overflow-anchor: none;
-ms-overflow-style: none;
touch-action: auto;
-ms-touch-action: auto; } .ps__rail-x {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
height: 15px; bottom: 0px; position: absolute; }
.ps__rail-y {
display: none;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
-webkit-transition: background-color .2s linear, opacity .2s linear;
width: 15px; right: 0; position: absolute; }
.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
display: block;
background-color: transparent; }
.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
opacity: 0.6; }
.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
background-color: #eee;
opacity: 0.9; } .ps__thumb-x {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, height .2s ease-in-out;
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
height: 6px; bottom: 2px; position: absolute; }
.ps__thumb-y {
background-color: #aaa;
border-radius: 6px;
transition: background-color .2s linear, width .2s ease-in-out;
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
width: 6px; right: 2px; position: absolute; }
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
background-color: #999;
height: 11px; }
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
background-color: #999;
width: 11px; } @supports (-ms-overflow-style: none) {
.ps {
overflow: auto !important; } }
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.ps {
overflow: auto !important; } }