.ss-wrapper {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
float: left;
}
.ss-content {
height: 100%;
width: calc(100% + 18px);
padding: 45px 100px 45px 65px;
position: relative;
overflow: auto;
box-sizing: border-box;
}
.ss-wrapper::before {
content: '';
position: absolute;
top: 0;
left: calc(100% - 7px);
width: 7px;
height: 100%;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-content.rtl {
width: calc(100% + 18px);
right: auto;
}
.ss-scroll {
position: relative;
background: linear-gradient(180deg, #CB7108 0%, #E59902 100%);
width: 7px;
top: 0;
left: calc(100% - 7px) !important;
z-index: 2;
cursor: pointer;
opacity: 0;
transition: opacity 0.25s linear;
}
.ss-hidden {
display: none;
}
.ss-container:hover .ss-scroll,
.ss-container:active .ss-scroll,
.ss-container:hover .ss-wrapper::before,
.ss-container:active .ss-wrapper::before {
opacity: 1;
}
.ss-grabbed {
-o-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
}
@media(max-width: 992px) {
.ss-content {
padding: 20px 30px 20px 20px;
}
.ss-scroll,
.ss-wrapper::before {
opacity: 1;
}
}