/* Y SCROLLERS - CONTAINERS AND SIZES */

.scroll-container {
    overflow: hidden !important;
}
.scroll-y-100vh {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-90vh {
    height: 90vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-75vh {
    height: 75vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-50vh {
    height: 50vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-25vh {
    height: 25vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-20vh {
    height: 20vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-15vh {
    height: 15vh;
    overflow-x: hidden;
    overflow-y: scroll;
}
.scroll-y-100 {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.scroll-y-75 {
    height: 75%;
    overflow-y: scroll;
    overflow-x: hidden;
}
.scroll-y-50 {
    height: 50%;
    overflow-y: scroll;
    overflow-x: hidden;
}
/* SCROLLBAR BUTTONS */


/* Base style for all scrollbar buttons */
scroll-y-bluish::-webkit-scrollbar-button:single-button {
  background-color: #f1f1f1;
  display: block;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Up Arrow */
scroll-y-bluish::-webkit-scrollbar-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='100' height='100' fill='%23555555'><polygon points='50,20 20,80 80,80'/></svg>");
}

/* Down Arrow */
scroll-y-bluish::-webkit-scrollbar-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='100' height='100' fill='%23555555'><polygon points='50,80 20,20 80,20'/></svg>");
}

/* Left Arrow */
scroll-y-bluish::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='100' height='100' fill='%23555555'><polygon points='20,50 80,20 80,80'/></svg>");
}

/* Right Arrow */
scroll-y-bluish::-webkit-scrollbar-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='100' height='100' fill='%23555555'><polygon points='80,50 20,20 20,80'/></svg>");
}

/* Optional: Hover states */
scroll-y-bluish::-webkit-scrollbar-button:single-button:hover {
  background-color: #d0cbcb;
}

/* Y SCROLLERS - STYLES */

.scroll-y-invisible {
    overflow-y: scroll !important;
    overflow-x: hidden;
    scroll-padding: 2em;
    background: transparent;
    scrollbar-color: transparent;
}

.scroll-y-invisible::-webkit-scrollbar {
    width: 20px;
}
.scroll-y-invisible::-webkit-scrollbar-track {
    background: transparent;
    scroll-padding: 2em;
}
.scroll-y-invisible::-webkit-scrollbar-thumb {
    background: transparent;
    padding: 5px;
    margin: 2em;
}
.scroll-y-invisible::-webkit-scrollbar-thumb:hover {
    background: transparent;
}
.scroll-y-invisible::-webkit-scrollbar-button {
    display: block;
    background: transparent;
    scrollbar-color: transparent;
}

.scroll-y-bluish::-webkit-scrollbar {
    width: 20px;
}
.scroll-y-bluish::-webkit-scrollbar-track {
    background: transparent;
    scroll-padding: 2em;
}
.scroll-y-bluish::-webkit-scrollbar-thumb {
    background: rgba(39, 183, 245, 0.5);
    padding: 5px;
    margin: 2em;
    border-radius: 20px;
}
.scroll-y-bluish::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 172, 242, 0.8);
}
.scroll-y-bluish::-webkit-scrollbar-button {
    display: none;
}



/* X SCROLLERS - CONTAINERS AND SIZES */

.scroll-x-100vh {
    height: 100vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-90vh {
    height: 90vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-75vh {
    height: 75vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-50vh {
    height: 50vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-25vh {
    height: 25vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-20vh {
    height: 20vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-15vh {
    height: 15vh;
    overflow-y: hidden;
    overflow-x: scroll;
}
.scroll-x-100 {
    height: 100%;
    overflow-y: hidden;
    overflow-x: scroll;
}

/* Y SCROLLERS - STYLES */

.scroll-x-invisible {
    overflow-y: hidden;
    overflow-x: scroll;
    scroll-padding: 2em;
    background: transparent;
    scrollbar-color: transparent;
}
.scroll-x-invisible::-webkit-scrollbar {
    width: 20px;
}
.scroll-x-invisible::-webkit-scrollbar-track {
    background: transparent;
    scroll-padding: 2em;
}
.scroll-x-invisible::-webkit-scrollbar-thumb {
    background: transparent;
    padding: 5px;
    margin: 2em;
}
.scroll-x-invisible::-webkit-scrollbar-thumb:hover {
    background: transparent;
}
.scroll-x-invisible::-webkit-scrollbar-button {
    display: block;
    background: transparent;
    scrollbar-color: transparent;
}
.scroll-x-bluish::-webkit-scrollbar {
    width: 20px;
}
.scroll-x-bluish::-webkit-scrollbar-track {
    background: transparent;
    scroll-padding: 2em;
}
.scroll-x-bluish::-webkit-scrollbar-thumb {
    background: rgba(39, 183, 245, 0.5);
    padding: 5px;
    margin: 2em;
    border-radius: 20px;
}
.scroll-x-bluish::-webkit-scrollbar-thumb:hover {
    background: rgba(10, 172, 242, 0.8);
}
.scroll-x-bluish::-webkit-scrollbar-button {
    display: block;
    background: transparent;
    scrollbar-color: transparent;
}