html页面滚动条-scrollbar样式（MDB风格）

.scrollbar {
　　background: #fff;
　　overflow: auto;
　　overflow-x: auto;
　　overflow-y: auto;
}

.scrollbar-primary::-webkit-scrollbar {
　　 12px;/*滚动条宽度*/
　　background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
　　border-radius: 10px;
　　-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
　　background-color: #4285F4;
}

/********************************MDB************************/

/* 滚动条样式 start*/
.scrollbar {
background: #fff;
overflow: auto;
overflow-x: auto;
overflow-y: auto;
}

.force-overflow {
min-height: 450px;
}

.scrollbar-primary::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-primary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #4285F4;
}

.scrollbar-danger::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-danger::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-danger::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #ff3547;
}

.scrollbar-warning::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-warning::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-warning::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #FF8800;
}

.scrollbar-success::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-success::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-success::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #00C851;
}

.scrollbar-info::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-info::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-info::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #33b5e5;
}

.scrollbar-default::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-default::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-default::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #2BBBAD;
}

.scrollbar-secondary::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-secondary::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-secondary::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #aa66cc;
}

.scrollbar-juicy-peach::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-juicy-peach::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-juicy-peach::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left top, right top, from(#ffecd2), to(#fcb69f));
background-image: -webkit-linear-gradient(left, #ffecd2 0%, #fcb69f 100%);
background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 100%);
}

.scrollbar-young-passion::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-young-passion::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-young-passion::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left top, right top, from(#ff8177), color-stop(0%, #ff867a), color-stop(21%, #ff8c7f), color-stop(52%, #f99185), color-stop(78%, #cf556c),
to(#b12a5b));
background-image: -webkit-linear-gradient(left, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef), to(#fecfef));
background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-sunny-morning::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-sunny-morning::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-sunny-morning::-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, #f6d365 0%, #fda085 100%);
background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

.scrollbar-rainy-ashville::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-rainy-ashville::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-rainy-ashville::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a6c1ee));
background-image: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a6c1ee 100%);
background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

.scrollbar-frozen-dreams::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-frozen-dreams::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-frozen-dreams::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fdcbf1), color-stop(1%, #fdcbf1), to(#e6dee9));
background-image: -webkit-linear-gradient(bottom, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
background-image: linear-gradient(to top, #fdcbf1 0%, #fdcbf1 1%, #e6dee9 100%);
}

.scrollbar-warm-flame::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-warm-flame::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-warm-flame::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

.scrollbar-night-fade::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-night-fade::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-night-fade::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
background-image: -webkit-linear-gradient(bottom, #a18cd1 0%, #fbc2eb 100%);
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.scrollbar-spring-warmth::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-spring-warmth::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-spring-warmth::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
background-image: -webkit-linear-gradient(bottom, #fad0c4 0%, #ffd1ff 100%);
background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
}

.scrollbar-winter-neva::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-winter-neva::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-winter-neva::-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, #a1c4fd 0%, #c2e9fb 100%);
background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
}

.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 {
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-tempting-azure::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-tempting-azure::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-tempting-azure::-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, #84fab0 0%, #8fd3f4 100%);
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}

.scrollbar-heavy-rain::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-heavy-rain::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-heavy-rain::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#cfd9df), to(#e2ebf0));
background-image: -webkit-linear-gradient(bottom, #cfd9df 0%, #e2ebf0 100%);
background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
}

.scrollbar-amy-crisp::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-amy-crisp::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-amy-crisp::-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, #a6c0fe 0%, #f68084 100%);
background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
}

.scrollbar-mean-fruit::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-mean-fruit::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-mean-fruit::-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, #fccb90 0%, #d57eeb 100%);
background-image: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);
}

.scrollbar-deep-blue::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-deep-blue::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-deep-blue::-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, #e0c3fc 0%, #8ec5fc 100%);
background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 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 {
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%);
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-cloudy-knoxville::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-cloudy-knoxville::-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, #fdfbfb 0%, #ebedee 100%);
background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
}

.scrollbar-morpheus-den::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-morpheus-den::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.scrollbar-rare-wind::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-rare-wind::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-rare-wind::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#a8edea), to(#fed6e3));
background-image: -webkit-linear-gradient(bottom, #a8edea 0%, #fed6e3 100%);
background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);
}

.scrollbar-near-moon::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.scrollbar-pink::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-pink::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-pink::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #ec407a;
}

.scrollbar-indigo::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-indigo::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-indigo::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #3f51b5;
}

.scrollbar-black::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-black::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-black::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #000;
}

.scrollbar-lady-lips::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-lady-lips::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-lady-lips::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#ff9a9e), color-stop(99%, #fecfef), to(#fecfef));
background-image: -webkit-linear-gradient(bottom, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
background-image: linear-gradient(to top, #ff9a9e 0%, #fecfef 99%, #fecfef 100%);
}

.scrollbar-near-moon::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}

.scrollbar-near-moon::-webkit-scrollbar {
12px;
background-color: #F5F5F5;
}

.scrollbar-near-moon::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-image: -webkit-gradient(linear, left bottom, left top, from(#5ee7df), to(#b490ca));
background-image: -webkit-linear-gradient(bottom, #5ee7df 0%, #b490ca 100%);
background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
}

.bordered-pink::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #ec407a;
}

.bordered-pink::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.bordered-indigo::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #3f51b5;
}

.bordered-indigo::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.bordered-black::-webkit-scrollbar-track {
-webkit-box-shadow: none;
border: 1px solid #000;
}

.bordered-black::-webkit-scrollbar-thumb {
-webkit-box-shadow: none;
}

.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 {
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 {
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 {
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 {
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 {
6px;
}

.thin::-webkit-scrollbar:horizontal{
height: 6px;
}
/* 滚动条样式 end */