html {
  scrollbar-color: var(--scroll-thumb-color, grey) var(--scroll-track, transparent);
  scrollbar-width: thin;
}
html::-webkit-scrollbar {
  width: var(--scroll-size, 10px);
  height: var(--scroll-size, 10px);
}
html::-webkit-scrollbar-track {
  background-color: var(--scroll-track, transparent);
  border-radius: var(--scroll-track-radius, var(--scroll-radius));
}
html::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb-color, grey);
  background-image: var(--scroll-thumb, none);
  border-radius: var(--scroll-thumb-radius, var(--scroll-radius));
}
.scroll-1 {
  --scroll-size: 10px;
  --scroll-radius: 10px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb-color: #dfdfdf;
}
.scroll-2 {
  --scroll-size: 8px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: rgb(0 0 0 / 80%);
}
html {
  --scroll-size: 5px;
  --scroll-radius: 10px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb-color: #fff;
}
.scroll-4 {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(45deg,
      rgba(255, 255, 255, 0.25) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.25) 40%,
      rgba(255, 255, 255, 0.25) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.25) 80%);
  --scroll-thumb-color: #f97316;
}
.scroll-5 {
  --scroll-size: 15px;
  --scroll-radius: 20px;
  --scroll-track: rgb(255 255 255 / 10%);
  --scroll-thumb: linear-gradient(45deg, #00aeff, #a68eff);
}
.scroll-6 {
  --scroll-size: 12px;
  --scroll-radius: 20px;
  --scroll-track: rgb(0 0 0 / 40%);
  --scroll-thumb: linear-gradient(
      rgba(255, 255, 255, 0.3) 20%, transparent 20%,
      transparent 40%, rgba(255, 255, 255, 0.3) 40%,
      rgba(255, 255, 255, 0.3) 60%, transparent 60%,
      transparent 80%, rgba(255, 255, 255, 0.3) 80%);
  --scroll-thumb-color: #10b981;
}

.liquid-slider{
    background: transparent;
}
.panel-wrapper{
    padding: 0;
}

input:checked + span{
    background: #1b2da2;
}

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
.lds-ellipsis div {
  position: absolute;
  top: 33px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .25);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  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(24px, 0);
  }
}


.shake {
  border-color:red;
  animation: shake 1.64s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  animation-iteration-count:infinite;
}

@keyframes  shake {
  5%, 45% {
    transform: translate3d(-1px, 0, 0);
  }
  
  10%, 40% {
    transform: translate3d(2px, 0, 0);
  }

  15%, 25%, 35% {
    transform: translate3d(-4px, 0, 0);
  }

  20%, 30% {
    transform: translate3d(4px, 0, 0);
  }
  50%, 100%{
    transform: translate3d(0, 0, 0);  
  }
}