<div class="container">
<div class="row my-5 justify-content-center">
<div class="col-lg-6">
<h2>With Scrollbar</h2>
<!--Main card-->
<div class="card custom-height scrollspy-example">
<!--Card Body -->
<div class="card-body">
<h5 class="card-title">October</h5>
<!--Card-->
<div class="row">
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1 ">
<img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dessert</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: user12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs fa-xs fa-xs"></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Taco</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: guest312</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Cookies</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: agnieszka19</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dinner</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: L33T</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Meat</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: anonymous12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Burger</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: John99</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Ice Scream</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: lucy22</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Pancakes</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: destroyer00</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Card Body -->
</div>
<!--Main card-->
</div>
</div>
<!-- Without scrollbar -->
<div class="row justify-content-center">
<div class="col-lg-6">
<h2>Without Scrollbar</h2>
<!--Main card-->
<div class="card">
<!--Card Body -->
<div class="card-body">
<h5 class="card-title">October</h5>
<!--Card-->
<div class="row">
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1 ">
<img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dessert</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: user12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs fa-xs fa-xs"></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Taco</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: guest312</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Cookies</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: agnieszka19</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dinner</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: L33T</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Meat</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: anonymous12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Burger</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: John99</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Ice Scream</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: lucy22</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Pancakes</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: destroyer00</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Card Body -->
</div>
<!--Main card-->
</div>
</div>
<!-- Grid row -->
<div class="row my-5 justify-content-center">
<!-- Grid column -->
<div class="col-md-6 mb-4">
<h2>With SmoothScroll</h2>
<div class="card custom-height example-1 scrollbar-ripe-malinka">
<!--Card Body -->
<div class="card-body ">
<h5 class="card-title">October</h5>
<!--Card-->
<div class="row">
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1 ">
<img class="img-fluid" src="https://i.ibb.co/RjRC3TV/img02.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dessert</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: user12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs fa-xs fa-xs"></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/M9cGsCb/img03.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Taco</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: guest312</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/Wc2K6W5/img04.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Cookies</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: agnieszka19</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/zhLRGc8/img05.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Dinner</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: L33T</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/cTRw8Q6/img06.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Meat</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: anonymous12</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs"></i>
<i class="far fa-star fa-xs"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/XDS1xkk/img01.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Burger</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: John99</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/q1nmdV8/img07.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Ice Scream</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: lucy22</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 my-1">
<div class="view overlay z-depth-1">
<img class="img-fluid" src="https://i.ibb.co/LdfDNZc/img08.jpg" alt="">
<a>
<div class="mask waves-effect waves-light rgba-white-slight"></div>
</a>
<div class="description rgba-stylish-light text-white">
<div class="title ml-2">
<h5 class="m-0">Pancakes</h5>
</div>
<div class="subtitle ml-2">
<h6 class="m-0">by: destroyer00</h6>
</div>
<div class="more yellow-text ">
<div class="stars text-center mr-2 justify-content-center">
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star fa-xs "></i>
<i class="fas fa-star-half-alt fa-xs "></i>
<i class="far fa-star fa-xs "></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card-->
</div>
<!--Card Body -->
</div>
<!-- Exaple 1 -->
</div>
<!-- Grid column -->
</div>
</div>
.description
{
position: absolute;
height: auto;
bottom: 0;
width: 100%;
}
.more
{
position: absolute;
right: 0;
top: 0;
}
.custom-height
{
height: 420px;
}
.scrollbar-deep-purple::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px; }
.scrollbar-deep-purple::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5; }
.scrollbar-deep-purple::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #512da8; }
.scrollbar-cyan::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px; }
.scrollbar-cyan::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5; }
.scrollbar-cyan::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #00bcd4; }
.scrollbar-dusty-grass::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px; }
.scrollbar-dusty-grass::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5; }
.scrollbar-dusty-grass::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #d4fc79 0%, #96e6a1 100%);
background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); }
.scrollbar-ripe-malinka::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px; }
.scrollbar-ripe-malinka::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5; }
.scrollbar-ripe-malinka::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%); }
.bordered-deep-purple::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #512da8; }
.bordered-deep-purple::-webkit-scrollbar-thumb {
-webkit-box-shadow: none; }
.bordered-cyan::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #00bcd4; }
.bordered-cyan::-webkit-scrollbar-thumb {
-webkit-box-shadow: none; }
.square::-webkit-scrollbar-track {
border-radius: 0 !important; }
.square::-webkit-scrollbar-thumb {
border-radius: 0 !important; }
.thin::-webkit-scrollbar {
width: 6px; }
.example-1 {
position: relative;
overflow-y: scroll;
height: 420px;}