dropin-minimal-css/src/preface.css

/* PrefaceCSS <https://github.com/cluzier/PrefaceCSS> , Copyright 2019, Conner Luzier */
/* Imports */
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap");
/* Define some variables we will need (colors) */
/* Do the imports for other scss */
* {
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  color: #212121;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  word-wrap: break-word; }

nav {
  margin: 20px auto;
  max-width: 960px;
  width: 95%; }
  nav label {
    font-weight: bold; }
  nav ul {
    list-style: none;
    float: right; }
    nav ul li {
      margin: 0 15px; }
  nav * {
    display: inline-block; }
  @media screen and (max-width: 640px) {
    nav {
      text-align: center; }
      nav > * {
        display: block; }
      nav ul {
        float: none;
        margin-top: 15px; } }

.container {
  max-width: 960px;
  width: 95%;
  margin: 0 auto; }

.grid-flex {
  display: flex; }

.grid-flex-wrap {
  display: flex;
  flex-wrap: wrap; }

.row:after {
  content: '';
  display: table;
  clear: both; }

.flex-1 {
  flex: 1; }

.flex-2 {
  flex: 2; }

.flex-3 {
  flex: 3; }

.flex-4 {
  flex: 4; }

.flex-5 {
  flex: 5; }

.flex-6 {
  flex: 6; }

.flex-7 {
  flex: 7; }

.flex-8 {
  flex: 8; }

.flex-9 {
  flex: 9; }

.flex-10 {
  flex: 10; }

/* Old grid system */
.one.column, .one.columns {
  width: 7.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.two.columns {
  width: 15.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.three.columns {
  width: 24%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.four.columns {
  width: 32.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.five.columns {
  width: 40.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.six.columns {
  width: 49%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.seven.columns {
  width: 57.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.eight.columns {
  width: 65.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.nine.columns {
  width: 74%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.ten.columns {
  width: 82.33333%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.eleven.columns {
  width: 90.66667%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

.twelve.columns {
  width: 99%;
  display: inline-block;
  margin: 0 .5%;
  float: left; }

@media screen and (max-width: 750px) {
  .columns.desktop, .column.desktop {
    display: block !important;
    width: 99% !important; } }

@media screen and (min-width: 750px) {
  .columns.mobile, .column.mobile {
    display: block !important;
    width: 99% !important; } }

button {
  display: inline-block;
  padding: 8px 30px;
  margin: 5px 0;
  text-align: center;
  text-transform: uppercase;
  border: none;
  outline: none;
  border-radius: 2px;
  color: #413a3a;
  cursor: pointer;
  background-color: #212121;
  transition: 0.2s ease-in-out; }
  button:hover, button:disabled {
    background-color: #878787; }
  button:active {
    background-color: black; }
  button.success {
    background-color: #66cdaa;
    transition: 0.2s ease-in-out; }
    button.success:hover, button.success:disabled {
      background-color: #a0e0ca; }
    button.success:active {
      background-color: #39ae86; }
  button.error {
    background-color: #f08080;
    transition: 0.2s ease-in-out; }
    button.error:hover, button.error:disabled {
      background-color: #f8c4c4; }
    button.error:active {
      background-color: #e83c3c; }
  button.warning {
    background-color: #fef65b;
    transition: 0.2s ease-in-out; }
    button.warning:hover, button.warning:disabled {
      background-color: #fefaa7; }
    button.warning:active {
      background-color: #fef20f; }
  button.btn-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
    button.btn-shadow:hover {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
    button.btn-shadow:active {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }

input, textarea, select {
  display: block;
  width: 100%;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #c0c0c0;
  outline: none;
  border-radius: 2px;
  background-color: #ffffff; }
  input:hover, textarea:hover, select:hover {
    border-color: #6e6e6e; }
  input:focus, textarea:focus, select:focus {
    border-color: #212121; }

textarea {
  resize: vertical;
  min-height: 60px; }

b, strong {
  font-weight: 700; }

a {
  text-decoration: underline;
  cursor: pointer; }
  a:hover {
    color: #6e6e6e; }
  a.none {
    text-decoration: none; }

h1 {
  font-size: 3rem; }

h2 {
  font-size: 2.6rem; }

h3 {
  font-size: 2.2rem; }

h4 {
  font-size: 1.8rem; }

h5 {
  font-size: 1.6rem; }

h6 {
  font-size: 1.4rem; }

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold; }

small {
  font-size: .8rem; }

p {
  margin: 15px 0; }

.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.text-muted, .text-muted * {
  color: #616161; }

.text-success, .text-success * {
  color: #66cdaa; }

.text-error, .text-error * {
  color: #f08080; }

.text-warning, .text-warning * {
  color: #fef65b; }

.text-inverted, .text-inverted * {
  color: #413a3a; }

table {
  border-collapse: collapse;
  width: 100%;
  margin-top: .5em; }
  @media screen and (max-width: 750px) {
    table {
      overflow-x: auto;
      display: block; } }
  table td, table th {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #c0c0c0; }

ul ul {
  margin-left: 15px; }

ul.inner, ul .inner {
  list-style-position: inside; }

ul.outer, ul .outer {
  list-style-position: outside; }

/**
 * Thanks to Chris Bracco for this tooltip from https://codepen.io/cbracco/pen/qzukg
 */
/* Add this attribute to the element that needs a tooltip */
[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer; }

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  opacity: 0;
  pointer-events: none; }

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  border-radius: 3px;
  background-color: #000;
  background-color: rgba(51, 51, 51, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2; }

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid rgba(51, 51, 51, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0; }

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  opacity: 1; }

.card {
  margin: 15px;
  border-radius: 1px;
  border: 0.5px solid #c0c0c0; }
  .card img {
    width: 100%;
    display: block;
    border-radius: 1px 1px 0 0; }
  .card .content {
    padding: 10px; }
  .card .footer {
    border-top: 1px solid #c0c0c0;
    padding: 5px 15px;
    text-align: right; }
  .card.card-shadow {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    border: none; }

hr {
  border: none;
  outline: none;
  height: 1px;
  width: 60%;
  background-color: #c0c0c0; }

.bg-success {
  background-color: #66cdaa; }

.bg-warning {
  background-color: #fef65b; }

.bg-error {
  background-color: #f08080; }

.bg-success-bright {
  background-color: #66cdaa; }

.bg-warning-bright {
  background-color: #fef65b; }

.bg-error-bright {
  background-color: #f08080; }

code {
  background-color: #c0c0c0;
  display: inline-block;
  padding: 4px 8px;
  font-family: monospace;
  overflow-x: auto; }

pre > code {
  display: block;
  white-space: pre; }

.cover {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center; }
  .cover > div {
    flex: 1; }

.progress {
  display: block;
  width: 100%;
  height: 3px;
  margin: 5px;
  background-color: #c0c0c0; }
  .progress .bar {
    transition: width .5s ease-in-out;
    display: block;
    height: 100%;
    width: 100%;
    max-width: 100%; }

img {
  display: block;
  width: 100%; }

.pagination {
  display: flex;
  width: 100%;
  text-align: center;
  padding: 15px; }
  .pagination * {
    text-decoration: none; }
  .pagination > * {
    flex: 1;
    padding: 3px; }
    .pagination > *:hover {
      background-color: #cdcdcd;
      transition: .3s background-color ease-in-out; }
      .pagination > *:hover, .pagination > *:hover * {
        color: #212121; }
  .pagination .action {
    flex: .5; }
  .pagination.no-flex {
    display: block; }
    .pagination.no-flex > * {
      display: inline-block;
      margin: 0 10px; }

.lds-facebook {
  display: inline-block;
  position: relative;
  margin: 25px;
  width: 64px;
  height: 64px; }

.lds-facebook div {
  display: inline-block;
  position: absolute;
  left: 6px;
  width: 13px;
  background: #413a3a;
  animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite; }

.lds-facebook div:nth-child(1) {
  left: 6px;
  animation-delay: -0.24s; }

.lds-facebook div:nth-child(2) {
  left: 26px;
  animation-delay: -0.12s; }

.lds-facebook div:nth-child(3) {
  left: 45px;
  animation-delay: 0; }

@keyframes lds-facebook {
  0% {
    top: 6px;
    height: 51px; }
  50%, 100% {
    top: 19px;
    height: 26px; } }

.lds-roller {
  display: inline-block;
  position: relative;
  margin: 25px;
  width: 64px;
  height: 64px; }

.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transform-origin: 32px 32px; }

.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #413a3a;
  margin: -3px 0 0 -3px; }

.lds-roller div:nth-child(1) {
  animation-delay: -0.036s; }

.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px; }

.lds-roller div:nth-child(2) {
  animation-delay: -0.072s; }

.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px; }

.lds-roller div:nth-child(3) {
  animation-delay: -0.108s; }

.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px; }

.lds-roller div:nth-child(4) {
  animation-delay: -0.144s; }

.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px; }

.lds-roller div:nth-child(5) {
  animation-delay: -0.18s; }

.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px; }

.lds-roller div:nth-child(6) {
  animation-delay: -0.216s; }

.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px; }

.lds-roller div:nth-child(7) {
  animation-delay: -0.252s; }

.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px; }

.lds-roller div:nth-child(8) {
  animation-delay: -0.288s; }

.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px; }

@keyframes lds-roller {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(360deg); } }

.lds-ripple {
  display: inline-block;
  position: relative;
  margin: 25px;
  width: 64px;
  height: 64px; }

.lds-ripple div {
  position: absolute;
  border: 4px solid #413a3a;
  opacity: 1;
  border-radius: 50%;
  animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

.lds-ripple div:nth-child(2) {
  animation-delay: -0.5s; }

@keyframes lds-ripple {
  0% {
    top: 28px;
    left: 28px;
    width: 0;
    height: 0;
    opacity: 1; }
  100% {
    top: -1px;
    left: -1px;
    width: 58px;
    height: 58px;
    opacity: 0; } }

.lds-ellipsis {
  display: inline-block;
  position: relative;
  margin: 25px;
  width: 64px;
  height: 64px; }

.lds-ellipsis div {
  position: absolute;
  top: 27px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #413a3a;
  animation-timing-function: cubic-bezier(0, 1, 1, 0); }

.lds-ellipsis div:nth-child(1) {
  left: 6px;
  animation: lds-ellipsis1 0.6s infinite; }

.lds-ellipsis div:nth-child(2) {
  left: 6px;
  animation: lds-ellipsis2 0.6s infinite; }

.lds-ellipsis div:nth-child(3) {
  left: 26px;
  animation: lds-ellipsis2 0.6s infinite; }

.lds-ellipsis div:nth-child(4) {
  left: 45px;
  animation: lds-ellipsis3 0.6s infinite; }

@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0); }
  100% {
    transform: scale(1); } }

@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1); }
  100% {
    transform: scale(0); } }

@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0); }
  100% {
    transform: translate(19px, 0); } }

.lds-circle {
  display: inline-block;
  margin: 25px;
  transform: translateZ(1px); }

.lds-circle > div {
  display: inline-block;
  width: 51px;
  height: 51px;
  margin: 6px;
  border-radius: 50%;
  background: #413a3a;
  animation: lds-circle 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite; }

@keyframes lds-circle {
  0%, 100% {
    animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  0% {
    transform: rotateY(0deg); }
  50% {
    transform: rotateY(1800deg);
    animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  100% {
    transform: rotateY(3600deg); } }

.lds-hourglass {
  display: inline-block;
  position: relative;
  margin: 25px;
  width: 64px;
  height: 64px; }

.lds-hourglass:after {
  content: " ";
  display: block;
  border-radius: 50%;
  width: 0;
  height: 0;
  margin: 6px;
  box-sizing: border-box;
  border: 26px solid #413a3a;
  border-color: #413a3a transparent #413a3a transparent;
  animation: lds-hourglass 1.2s infinite; }

@keyframes lds-hourglass {
  0% {
    transform: rotate(0);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  50% {
    transform: rotate(900deg);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  100% {
    transform: rotate(1800deg); } }

.spinner {
  position: relative;
  display: inline-block;
  margin: 25px;
  width: 64px;
  height: 64px; }

.cube1, .cube2 {
  background-color: #413a3a;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  animation: sk-cubemove 1.8s infinite ease-in-out; }

.cube2 {
  animation-delay: -0.9s; }

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5); }
  50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg); }
  50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg); }
  75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
  100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg); } }

.box-spinner {
  position: relative;
  display: inline-block;
  margin: 25px;
  width: 64px;
  height: 64px;
  background-color: #413a3a;
  animation: sk-rotateplane 1.2s infinite ease-in-out; }

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }

.sk-cube-grid {
  position: relative;
  display: inline-block;
  margin: 25px;
  width: 64px;
  height: 64px; }

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #413a3a;
  float: left;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }

.sk-cube-grid .sk-cube1 {
  animation-delay: 0.2s; }

.sk-cube-grid .sk-cube2 {
  animation-delay: 0.3s; }

.sk-cube-grid .sk-cube3 {
  animation-delay: 0.4s; }

.sk-cube-grid .sk-cube4 {
  animation-delay: 0.1s; }

.sk-cube-grid .sk-cube5 {
  animation-delay: 0.2s; }

.sk-cube-grid .sk-cube6 {
  animation-delay: 0.3s; }

.sk-cube-grid .sk-cube7 {
  animation-delay: 0s; }

.sk-cube-grid .sk-cube8 {
  animation-delay: 0.1s; }

.sk-cube-grid .sk-cube9 {
  animation-delay: 0.2s; }

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    transform: scale3D(1, 1, 1); }
  35% {
    transform: scale3D(0, 0, 1); } }

.sk-folding-cube {
  margin: 25px;
  width: 40px;
  height: 40px;
  position: relative;
  display: inline-block;
  transform: rotateZ(45deg); }

.sk-folding-cube .sk-cube {
  float: left;
  width: 50%;
  height: 50%;
  position: relative;
  transform: scale(1.1); }

.sk-folding-cube .sk-cube:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #413a3a;
  animation: sk-foldCubeAngle 2.4s infinite linear both;
  transform-origin: 100% 100%; }

.sk-folding-cube .sk-cube2 {
  transform: scale(1.1) rotateZ(90deg); }

.sk-folding-cube .sk-cube3 {
  transform: scale(1.1) rotateZ(180deg); }

.sk-folding-cube .sk-cube4 {
  transform: scale(1.1) rotateZ(270deg); }

.sk-folding-cube .sk-cube2:before {
  animation-delay: 0.3s; }

.sk-folding-cube .sk-cube3:before {
  animation-delay: 0.6s; }

.sk-folding-cube .sk-cube4:before {
  animation-delay: 0.9s; }

@keyframes sk-foldCubeAngle {
  0%, 10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0; }
  25%, 75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1; }
  90%, 100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0; } }

.scrollbar {
  margin-left: 30px;
  float: left;
  height: 300px;
  width: 65px;
  background: #F5F5F5;
  overflow-y: scroll;
  margin-bottom: 25px; }

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

#wrapper {
  text-align: center;
  width: 500px;
  margin: auto; }

/*
 *  STYLE 1
 */
#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5; }

#style-1::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #555; }

/*
 *  STYLE 2
 */
#style-2::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5; }

#style-2::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

#style-2::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #D62929; }

/*
 *  STYLE 3
 */
#style-3::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

#style-3::-webkit-scrollbar {
  width: 6px;
  background-color: #F5F5F5; }

#style-3::-webkit-scrollbar-thumb {
  background-color: #000000; }

/*
 *  STYLE 4
 */
#style-4::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

#style-4::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-4::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555; }

/*
 *  STYLE 5
 */
#style-5::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

#style-5::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-5::-webkit-scrollbar-thumb {
  background-color: #0ae;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent)); }

/*
 *  STYLE 6
 */
#style-6::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

#style-6::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-6::-webkit-scrollbar-thumb {
  background-color: #F90;
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }

/*
 *  STYLE 7
 */
#style-7::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 10px; }

#style-7::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-7::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, #7a99d9), color-stop(0.72, #497dbd), color-stop(0.86, #1c3a94)); }

/*
 *  STYLE 8
 */
#style-8::-webkit-scrollbar-track {
  border: 1px solid black;
  background-color: #F5F5F5; }

#style-8::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-8::-webkit-scrollbar-thumb {
  background-color: #000000; }

/*
 *  STYLE 9
 */
#style-9::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5; }

#style-9::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-9::-webkit-scrollbar-thumb {
  background-color: #F90;
  background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent); }

/*
 *  STYLE 10
 */
#style-10::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 10px; }

#style-10::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-10::-webkit-scrollbar-thumb {
  background-color: #AAA;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.2) 75%, transparent 75%, transparent); }

/*
 *  STYLE 11
 */
#style-11::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
  border-radius: 10px; }

#style-11::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-11::-webkit-scrollbar-thumb {
  background-color: #3366FF;
  border-radius: 10px;
  background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); }

/*
 *  STYLE 12
 */
#style-12::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #444444; }

#style-12::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

#style-12::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #D62929;
  background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }

/*
 *  STYLE 13
 */
#style-13::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
  border-radius: 10px;
  background-color: #CCCCCC; }

#style-13::-webkit-scrollbar {
  width: 12px;
  background-color: #F5F5F5; }

#style-13::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #D62929;
  background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent); }

/*
 *  STYLE 14
 */
#style-14::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  background-color: #CCCCCC; }

#style-14::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-14::-webkit-scrollbar-thumb {
  background-color: #FFF;
  background-image: -webkit-linear-gradient(90deg, black 0%, black 25%, transparent 100%, black 75%, transparent); }

/*
 *  STYLE 15
 */
#style-15::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px; }

#style-15::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-15::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(0.6, #54DE5D)); }

/*
 *  STYLE 16
 */
#style-16::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #F5F5F5;
  border-radius: 10px; }

#style-16::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5; }

#style-16::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #FFF;
  background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%); }