/*!
 * spinnercss Template
 * Created on date: 2/1/2024
 * Built on date: 2/3/2024
*/
:root {
  --color-white: #ffffff;
  --color-black: #000000;
  --color-green: #1f883d;
  --color-blue: #0e7ff8;
  --color-yellow: #daa520;
  --color-red: #ff0000;
  --color-orange: #ff4500;
  --border-radius-md: 6px;
  --border-radius-mmd: 8px;
  --border-radius-mmmd: 10px;
  --border-radius-lg: 25px;
  --border-radius-full: 9999px;
  --transition-1s-ease: all .1s ease;
  --transition-2s-ease: all .2s ease;
  --transition-3s-ease: all .3s ease;
  --transition-5s-ease: all .5s ease;
  --transition-8s-ease: all .8s ease;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.w-h-30 {
  height: 30px !important;
  width: 30px !important;
}

.w-h-40 {
  height: 40px !important;
  width: 40px !important;
}

.w-h-50 {
  height: 50px !important;
  width: 50px !important;
}

.w-h-60 {
  height: 60px !important;
  width: 60px !important;
}

.w-h-70 {
  height: 70px !important;
  width: 70px !important;
}

.w-h-80 {
  height: 80px !important;
  width: 80px !important;
}

.w-h-90 {
  height: 90px !important;
  width: 90px !important;
}

.w-h-100 {
  height: 100px !important;
  width: 100px !important;
}

.border-width-1 {
  border-width: 1px !important;
}

.border-width-2 {
  border-width: 2px !important;
}

.border-width-3 {
  border-width: 3px !important;
}

.border-width-4 {
  border-width: 4px !important;
}

.border-width-5 {
  border-width: 5px !important;
}

.border-width-6 {
  border-width: 6px !important;
}

.border-width-7 {
  border-width: 7px !important;
}

.border-width-8 {
  border-width: 8px !important;
}

.border-width-9 {
  border-width: 9px !important;
}

.border-width-10 {
  border-width: 10px !important;
}

.spinner-background {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  background-color: #eeeeee;
}

.spinner-background-full {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  background-color: #eeeeee;
  height: 60px;
  width: 60px;
}

.spinner-background-rounded {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  background-color: #eeeeee;
  border-radius: var(--border-radius-mmmd);
  height: 60px;
  width: 60px;
}

.spinner-background-none {
  background-color: transparent !important;
}

.rotate {
  -webkit-animation: circle-1 0.8s linear infinite;
          animation: circle-1 0.8s linear infinite;
}

.rotateY-360 {
  -webkit-animation: r1 0.8s linear infinite;
          animation: r1 0.8s linear infinite;
}

.rotateY-180 {
  -webkit-animation: r2 0.8s linear infinite;
          animation: r2 0.8s linear infinite;
}

.rotateY-90 {
  -webkit-animation: r3 0.8s linear infinite;
          animation: r3 0.8s linear infinite;
}

.rotateX-360 {
  -webkit-animation: r4 0.8s linear infinite;
          animation: r4 0.8s linear infinite;
}

.rotateX-180 {
  -webkit-animation: r5 0.8s linear infinite;
          animation: r5 0.8s linear infinite;
}

.rotateX-90 {
  -webkit-animation: r6 0.8s linear infinite;
          animation: r6 0.8s linear infinite;
}

@-webkit-keyframes r1 {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@keyframes r1 {
  100% {
    -webkit-transform: rotateY(360deg);
            transform: rotateY(360deg);
  }
}

@-webkit-keyframes r2 {
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

@keyframes r2 {
  100% {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
  }
}

@-webkit-keyframes r3 {
  100% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}

@keyframes r3 {
  100% {
    -webkit-transform: rotateY(90deg);
            transform: rotateY(90deg);
  }
}

@-webkit-keyframes r4 {
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

@keyframes r4 {
  100% {
    -webkit-transform: rotateX(360deg);
            transform: rotateX(360deg);
  }
}

@-webkit-keyframes r5 {
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

@keyframes r5 {
  100% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
}

@-webkit-keyframes r6 {
  100% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}

@keyframes r6 {
  100% {
    -webkit-transform: rotateX(90deg);
            transform: rotateX(90deg);
  }
}

@-webkit-keyframes circle-1 {
  100% {
    rotate: 360deg;
  }
}

@keyframes circle-1 {
  100% {
    rotate: 360deg;
  }
}

@-webkit-keyframes circle-6 {
  0% {
    height: 20px;
    width: 20px;
  }
  100% {
    height: 50px;
    width: 50px;
  }
}

@keyframes circle-6 {
  0% {
    height: 20px;
    width: 20px;
  }
  100% {
    height: 50px;
    width: 50px;
  }
}

@-webkit-keyframes circle-7 {
  0% {
    scale: 0.5;
    opacity: 1;
  }
  100% {
    scale: 1.2;
    opacity: 0;
  }
}

@keyframes circle-7 {
  0% {
    scale: 0.5;
    opacity: 1;
  }
  100% {
    scale: 1.2;
    opacity: 0;
  }
}

@-webkit-keyframes circle-14 {
  0% {
    border-bottom: 4px dotted #1e88e5;
  }
}

@keyframes circle-14 {
  0% {
    border-bottom: 4px dotted #1e88e5;
  }
}

.circle-1 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  -webkit-animation: circle-1 0.6s linear infinite;
          animation: circle-1 0.6s linear infinite;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #1e88e5;
  border-right: 4px solid #1e88e5;
  border-top: 4px solid #1e88e5;
}

.circle-2 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 4px solid #eeeeee;
}

.circle-2 .circle-2 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  -webkit-animation: circle-1 0.6s linear infinite;
          animation: circle-1 0.6s linear infinite;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #1e88e5;
  border-top: 4px solid transparent;
}

.circle-3 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  -webkit-animation: circle-1 0.6s linear infinite;
          animation: circle-1 0.6s linear infinite;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-bottom: 4px solid #1e88e5;
  border-top: 4px solid #1e88e5;
}

.circle-4 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 1s infinite;
          animation: circle-1 1s infinite;
  border: 2px solid #eeeeee;
}

.circle-4 .circle-4 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  width: 10px;
  height: 10px;
  bottom: -19px;
  position: relative;
  background-color: #1565c0;
}

.circle-5 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 4px solid #eeeeee;
}

.circle-5 .circle-5 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  -webkit-animation: circle-1 0.6s linear infinite;
          animation: circle-1 0.6s linear infinite;
  border-bottom: 4px solid transparent;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top: 4px dashed #1e88e5;
}

.circle-6 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(144, 202, 249, 0.6);
  height: 50px;
  width: 50px;
}

.circle-6 .circle-6 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  -webkit-animation: circle-6 1s linear infinite;
          animation: circle-6 1s linear infinite;
  background-color: #1e88e5;
}

.circle-7 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-7 0.8s linear infinite;
          animation: circle-7 0.8s linear infinite;
  border: 3px solid #1e88e5;
}

.circle-8 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-7 1.5s linear infinite;
          animation: circle-7 1.5s linear infinite;
  border: 3px solid #1e88e5;
}

.circle-8 .circle-8 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-7 1.5s linear infinite;
          animation: circle-7 1.5s linear infinite;
  -webkit-animation: circle-1 0.4s infinite;
          animation: circle-1 0.4s infinite;
  border-left: 3px solid transparent;
  border-bottom: 3px solid #1e88e5;
  border-right: 3px solid #1e88e5;
  border-top: 3px solid #1e88e5;
  height: 20px;
  width: 20px;
}

.circle-9 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 1.8s linear infinite;
          animation: circle-1 1.8s linear infinite;
  background-color: rgba(144, 202, 249, 0.6);
  border-left: 3px solid transparent;
  border-bottom: 3px solid #1e88e5;
  border-right: 3px solid #1e88e5;
  border-top: 3px solid #1e88e5;
}

.circle-10 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 1.8s linear infinite;
          animation: circle-1 1.8s linear infinite;
  background-color: rgba(144, 202, 249, 0.6);
  border-left: 3px solid transparent;
  border-bottom: 3px dashed #1e88e5;
  border-right: 3px dashed #1e88e5;
  border-top: 3px dashed #1e88e5;
}

.circle-11 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 1.8s linear infinite;
          animation: circle-1 1.8s linear infinite;
  border: 3px dashed #1e88e5;
}

.circle-12 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 3px solid #1e88e5;
}

.circle-12 .circle-12 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-7 1.5s linear infinite;
          animation: circle-7 1.5s linear infinite;
  -webkit-animation: circle-1 0.8s infinite;
          animation: circle-1 0.8s infinite;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  border-bottom: 3px solid #1e88e5;
  border-top: 3px solid transparent;
  height: 20px;
  width: 20px;
}

.circle-13 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 1s infinite;
          animation: circle-1 1s infinite;
  border-right: 3px solid transparent;
  border-bottom: 3px solid #1e88e5;
  border-left: 3px solid transparent;
  border-top: 3px solid transparent;
}

.circle-13 .circle-13 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 3px solid #1e88e5;
  height: 20px;
  width: 20px;
}

.circle-14 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-1 0.8s infinite;
          animation: circle-1 0.8s infinite;
  border: 4px solid #eeeeee;
}

.circle-14 .circle-14 {
  border-radius: var(--border-radius-full);
  height: 40px;
  width: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-animation: circle-14 1s linear infinite;
          animation: circle-14 1s linear infinite;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #1e88e5;
  border-left: 4px solid transparent;
  border-top: 4px solid transparent;
}

@-webkit-keyframes dots-1 {
  0% {
    -webkit-transform: scale(0.8) translate3d(10px, 20px, 30px);
            transform: scale(0.8) translate3d(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}

@keyframes dots-1 {
  0% {
    -webkit-transform: scale(0.8) translate3d(10px, 20px, 30px);
            transform: scale(0.8) translate3d(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
}

@-webkit-keyframes dots-2 {
  100% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
    height: 23px;
    background-color: #90caf9;
  }
}

@keyframes dots-2 {
  100% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
    height: 23px;
    background-color: #90caf9;
  }
}

@-webkit-keyframes dots-3 {
  100% {
    -webkit-transform: scale(0.6) translateY(10px);
            transform: scale(0.6) translateY(10px);
    padding: 0 10px;
    background-color: #90caf9;
  }
}

@keyframes dots-3 {
  100% {
    -webkit-transform: scale(0.6) translateY(10px);
            transform: scale(0.6) translateY(10px);
    padding: 0 10px;
    background-color: #90caf9;
  }
}

@-webkit-keyframes dots-4 {
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #90caf9;
  }
}

@keyframes dots-4 {
  100% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #90caf9;
  }
}

@-webkit-keyframes dots-5 {
  100% {
    -webkit-transform: skew(360deg);
            transform: skew(360deg);
    opacity: 0;
  }
}

@keyframes dots-5 {
  100% {
    -webkit-transform: skew(360deg);
            transform: skew(360deg);
    opacity: 0;
  }
}

@-webkit-keyframes dots-7 {
  100% {
    -webkit-transform: skewY(360deg);
            transform: skewY(360deg);
  }
}

@keyframes dots-7 {
  100% {
    -webkit-transform: skewY(360deg);
            transform: skewY(360deg);
  }
}

@-webkit-keyframes dots-8 {
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    scale: 0.2;
    opacity: 0;
  }
}

@keyframes dots-8 {
  50% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  100% {
    scale: 0.2;
    opacity: 0;
  }
}

@-webkit-keyframes dots-9 {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    scale: 0.2;
    opacity: 0;
  }
}

@keyframes dots-9 {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    scale: 0.2;
    opacity: 0;
  }
}

@-webkit-keyframes dots-10 {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    scale: 1.2;
    opacity: 0;
  }
}

@keyframes dots-10 {
  50% {
    -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
  }
  100% {
    -webkit-transform: translateY(40px);
            transform: translateY(40px);
    scale: 1.2;
    opacity: 0;
  }
}

@-webkit-keyframes dots-11 {
  50% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    scale: 0.4;
    opacity: 0;
  }
}

@keyframes dots-11 {
  50% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: translateX(40px);
            transform: translateX(40px);
    scale: 0.4;
    opacity: 0;
  }
}

@-webkit-keyframes dots-12 {
  50% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    scale: 0.4;
    opacity: 0;
  }
}

@keyframes dots-12 {
  50% {
    -webkit-transform: scale(0.7) matrix(10px, 20px, 30px);
            transform: scale(0.7) matrix(10px, 20px, 30px);
  }
  100% {
    -webkit-transform: translateX(-40px);
            transform: translateX(-40px);
    scale: 0.4;
    opacity: 0;
  }
}

@-webkit-keyframes dots-13 {
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: scale(0.8) translate3d(-5px, -20px, -10px) translateX(-40px);
            transform: scale(0.8) translate3d(-5px, -20px, -10px) translateX(-40px);
  }
}

@keyframes dots-13 {
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: scale(0.8) translate3d(-5px, -20px, -10px) translateX(-40px);
            transform: scale(0.8) translate3d(-5px, -20px, -10px) translateX(-40px);
  }
}

@-webkit-keyframes dots-14 {
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: scale(0.2) translateY(-25px);
            transform: scale(0.2) translateY(-25px);
  }
}

@keyframes dots-14 {
  50% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: scale(0.2) translateY(-25px);
            transform: scale(0.2) translateY(-25px);
  }
}

.dots-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-1 .dots-1:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-1 0.8s infinite;
          animation: dots-1 0.8s infinite;
}

.dots-1 .dots-1:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-1 1s infinite;
          animation: dots-1 1s infinite;
}

.dots-1 .dots-1:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-1 1.5s infinite;
          animation: dots-1 1.5s infinite;
}

.dots-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-2 .dots-2:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-2 0.8s infinite;
          animation: dots-2 0.8s infinite;
  width: 8px;
}

.dots-2 .dots-2:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-2 1s infinite;
          animation: dots-2 1s infinite;
  width: 8px;
}

.dots-2 .dots-2:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-2 1.5s infinite;
          animation: dots-2 1.5s infinite;
  width: 8px;
}

.dots-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-3 .dots-3 {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-3 0.6s infinite;
          animation: dots-3 0.6s infinite;
}

.dots-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-4 .dots-4:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-4 0.5s infinite;
          animation: dots-4 0.5s infinite;
}

.dots-4 .dots-4:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-4 1s infinite;
          animation: dots-4 1s infinite;
}

.dots-4 .dots-4:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-4 1.5s infinite;
          animation: dots-4 1.5s infinite;
}

.dots-4 .dots-4:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-4 2s infinite;
          animation: dots-4 2s infinite;
}

.dots-5 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.dots-5 .dots-5:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1.5s linear infinite;
          animation: dots-5 1.5s linear infinite;
}

.dots-5 .dots-5:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1s linear infinite;
          animation: dots-5 1s linear infinite;
}

.dots-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.dots-6 .dots-6:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1.5s linear infinite;
          animation: dots-5 1.5s linear infinite;
}

.dots-6 .dots-6:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1.5s linear infinite;
          animation: dots-5 1.5s linear infinite;
}

.dots-6 .dots-6:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1s linear infinite;
          animation: dots-5 1s linear infinite;
}

.dots-6 .dots-6:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-5 1s linear infinite;
          animation: dots-5 1s linear infinite;
}

.dots-7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: hidden;
}

.dots-7 .dots-7 {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-7 1s linear infinite;
          animation: dots-7 1s linear infinite;
}

.dots-8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-8 .dots-8:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-8 1s linear infinite;
          animation: dots-8 1s linear infinite;
}

.dots-8 .dots-8:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-8 1.2s linear infinite;
          animation: dots-8 1.2s linear infinite;
}

.dots-8 .dots-8:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-8 1.4s linear infinite;
          animation: dots-8 1.4s linear infinite;
}

.dots-8 .dots-8:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-8 1.6s linear infinite;
          animation: dots-8 1.6s linear infinite;
}

.dots-9 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-9 .dots-9:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-9 1s linear infinite;
          animation: dots-9 1s linear infinite;
}

.dots-9 .dots-9:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-9 1.2s linear infinite;
          animation: dots-9 1.2s linear infinite;
}

.dots-9 .dots-9:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-9 1.4s linear infinite;
          animation: dots-9 1.4s linear infinite;
}

.dots-9 .dots-9:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-9 1.6s linear infinite;
          animation: dots-9 1.6s linear infinite;
}

.dots-10 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-10 .dots-10:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-10 1s linear infinite;
          animation: dots-10 1s linear infinite;
}

.dots-10 .dots-10:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-10 1.2s linear infinite;
          animation: dots-10 1.2s linear infinite;
}

.dots-10 .dots-10:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-10 1.4s linear infinite;
          animation: dots-10 1.4s linear infinite;
}

.dots-10 .dots-10:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-10 1.6s linear infinite;
          animation: dots-10 1.6s linear infinite;
}

.dots-11 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-11 .dots-11:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1s linear infinite;
          animation: dots-11 1s linear infinite;
}

.dots-11 .dots-11:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1.2s linear infinite;
          animation: dots-11 1.2s linear infinite;
}

.dots-11 .dots-11:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1.4s linear infinite;
          animation: dots-11 1.4s linear infinite;
}

.dots-11 .dots-11:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1.6s linear infinite;
          animation: dots-11 1.6s linear infinite;
}

.dots-11 .dots-11:nth-child(5) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1.7s linear infinite;
          animation: dots-11 1.7s linear infinite;
}

.dots-11 .dots-11:nth-child(6) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-11 1.8s linear infinite;
          animation: dots-11 1.8s linear infinite;
}

.dots-12 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-12 .dots-12:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1s linear infinite;
          animation: dots-12 1s linear infinite;
}

.dots-12 .dots-12:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1.2s linear infinite;
          animation: dots-12 1.2s linear infinite;
}

.dots-12 .dots-12:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1.4s linear infinite;
          animation: dots-12 1.4s linear infinite;
}

.dots-12 .dots-12:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1.6s linear infinite;
          animation: dots-12 1.6s linear infinite;
}

.dots-12 .dots-12:nth-child(5) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1.7s linear infinite;
          animation: dots-12 1.7s linear infinite;
}

.dots-12 .dots-12:nth-child(6) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-12 1.8s linear infinite;
          animation: dots-12 1.8s linear infinite;
}

.dots-13 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-13 .dots-13:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1s linear infinite;
          animation: dots-13 1s linear infinite;
}

.dots-13 .dots-13:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1.2s linear infinite;
          animation: dots-13 1.2s linear infinite;
}

.dots-13 .dots-13:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1.4s linear infinite;
          animation: dots-13 1.4s linear infinite;
}

.dots-13 .dots-13:nth-child(4) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1.6s linear infinite;
          animation: dots-13 1.6s linear infinite;
}

.dots-13 .dots-13:nth-child(5) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1.7s linear infinite;
          animation: dots-13 1.7s linear infinite;
}

.dots-13 .dots-13:nth-child(6) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-13 1.8s linear infinite;
          animation: dots-13 1.8s linear infinite;
}

.dots-14 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.dots-14 .dots-14:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-14 1s linear infinite;
          animation: dots-14 1s linear infinite;
}

.dots-14 .dots-14:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-14 1.2s linear infinite;
          animation: dots-14 1.2s linear infinite;
}

.dots-14 .dots-14:nth-child(3) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  margin: 0 3px;
  height: 10px;
  width: 10px;
  -webkit-animation: dots-14 1.4s linear infinite;
          animation: dots-14 1.4s linear infinite;
}

@-webkit-keyframes line-1 {
  100% {
    width: 200px;
  }
}

@keyframes line-1 {
  100% {
    width: 200px;
  }
}

@-webkit-keyframes line-2 {
  100% {
    width: 200px;
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
}

@keyframes line-2 {
  100% {
    width: 200px;
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
}

@-webkit-keyframes line-3 {
  50% {
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    background-color: #bbdefb;
  }
}

@keyframes line-3 {
  50% {
    background-color: #90caf9;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    background-color: #bbdefb;
  }
}

@-webkit-keyframes line-4 {
  50% {
    background-color: #90caf9;
    width: 10px;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    background-color: #bbdefb;
  }
}

@keyframes line-4 {
  50% {
    background-color: #90caf9;
    width: 10px;
  }
  100% {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
    background-color: #bbdefb;
  }
}

.line-1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  background-color: #e3f2fd;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  width: 200px;
}

.line-1 .line-1 {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  -webkit-animation: line-1 1.5s linear infinite;
          animation: line-1 1.5s linear infinite;
  width: 0px;
}

.line-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  background-color: #e3f2fd;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  width: 200px;
}

.line-2 .line-2 {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  -webkit-animation: line-2 2s linear infinite;
          animation: line-2 2s linear infinite;
  width: 0px;
}

.line-3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  background-color: #e3f2fd;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  width: 200px;
}

.line-3 .line-3 {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  -webkit-animation: line-3 1.8s linear infinite;
          animation: line-3 1.8s linear infinite;
}

.line-4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  background-color: #e3f2fd;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  overflow: hidden;
  width: 200px;
}

.line-4 .line-4:nth-child(1) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  -webkit-animation: line-4 1.2s linear infinite;
          animation: line-4 1.2s linear infinite;
}

.line-4 .line-4:nth-child(2) {
  background-color: #2196f3;
  border-radius: var(--border-radius-full);
  height: 8px;
  width: 50px;
  -webkit-animation: line-4 2s linear infinite;
          animation: line-4 2s linear infinite;
  background-color: #1976d2;
}
/*# sourceMappingURL=spinnercss.css.map */