.main-loader-container {
  height: calc(100vh - 51px);
  width: calc(100vw - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Styles from mat-spinner  */

.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] {
  animation: mat-progress-spinner-linear-rotate 2s linear infinite;
}

.mat-progress-spinner {
  display: block;
  position: relative;
}

.mat-progress-spinner svg {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  left: 0;
  transform-origin: center;
  overflow: visible;
}

.mat-progress-spinner circle {
  fill: transparent;
  transform-origin: center;
  transition: stroke-dashoffset 225ms linear;
}

._mat-animation-noopable.mat-progress-spinner circle {
  transition: none;
  animation: none;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] {
  animation: mat-progress-spinner-linear-rotate 2s linear infinite;
}

._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] {
  transition: none;
  animation: none;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] circle {
  transition-property: stroke;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  animation-iteration-count: infinite;
}

._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] circle {
  transition: none;
  animation: none;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode="indeterminate"] {
  animation: mat-progress-spinner-stroke-rotate-fallback 10s cubic-bezier(0.87, 0.03, 0.33, 1) infinite;
}

._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode="indeterminate"] {
  transition: none;
  animation: none;
}

.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode="indeterminate"] circle {
  transition-property: stroke;
}

._mat-animation-noopable.mat-progress-spinner.mat-progress-spinner-indeterminate-fallback-animation[mode="indeterminate"] circle {
  transition: none;
  animation: none;
}

.mat-progress-spinner svg {
  position: absolute;
  transform: rotate(-90deg);
  top: 0;
  left: 0;
  transform-origin: center;
  overflow: visible;
}


.mat-progress-spinner.mat-progress-spinner-indeterminate-animation[mode="indeterminate"] circle {
  transition-property: stroke;
  animation-duration: 4s;
  animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
  animation-iteration-count: infinite;
}

.mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #009688;
}

.mat-progress-spinner circle {
  fill: transparent;
  transform-origin: center;
  transition: stroke-dashoffset 225ms linear;
}

.mat-spinner circle {
  stroke: #0f8edb !important;
}

#main-loader {
  width: 100px;
  height: 100px;
}

#main-loader circle {
  cx: 50%;
  cy: 50%;
  r: 25;
}

@media (max-width: 670px) {
  #main-loader {
    width: 60px;
    height: 60px;
  }
}


@keyframes mat-progress-spinner-stroke-rotate-60 {
  0% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotate(0);
  }

  12.5% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotate(0);
  }

  12.5001% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotateX(180deg) rotate(72.5deg);
  }

  25% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotateX(180deg) rotate(72.5deg);
  }

  25.0001% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotate(270deg);
  }

  37.5% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotate(270deg);
  }

  37.5001% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotateX(180deg) rotate(161.5deg);
  }

  50% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotateX(180deg) rotate(161.5deg);
  }

  50.0001% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotate(180deg);
  }

  62.5% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotate(180deg);
  }

  62.5001% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotateX(180deg) rotate(251.5deg);
  }

  75% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotateX(180deg) rotate(251.5deg);
  }

  75.0001% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotate(90deg);
  }

  87.5% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotate(90deg);
  }

  87.5001% {
    stroke-dashoffset: 31.415926535897935;
    transform: rotateX(180deg) rotate(341.5deg);
  }

  100% {
    stroke-dashoffset: 149.22565104551518;
    transform: rotateX(180deg) rotate(341.5deg);
  }
}

@keyframes mat-progress-spinner-linear-rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes mat-progress-spinner-stroke-rotate-100 {
  0% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(0);
  }

  12.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(0);
  }

  12.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(72.5deg);
  }

  25% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(72.5deg);
  }

  25.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(270deg);
  }

  37.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(270deg);
  }

  37.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(161.5deg);
  }

  50% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(161.5deg);
  }

  50.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(180deg);
  }

  62.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(180deg);
  }

  62.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(251.5deg);
  }

  75% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(251.5deg);
  }

  75.0001% {
    stroke-dashoffset: 268.60617px;
    transform: rotate(90deg);
  }

  87.5% {
    stroke-dashoffset: 56.54867px;
    transform: rotate(90deg);
  }

  87.5001% {
    stroke-dashoffset: 56.54867px;
    transform: rotateX(180deg) rotate(341.5deg);
  }

  100% {
    stroke-dashoffset: 268.60617px;
    transform: rotateX(180deg) rotate(341.5deg);
  }
}

@keyframes mat-progress-spinner-stroke-rotate-fallback {
  0% {
    transform: rotate(0);
  }

  25% {
    transform: rotate(1170deg);
  }

  50% {
    transform: rotate(2340deg);
  }

  75% {
    transform: rotate(3510deg);
  }

  100% {
    transform: rotate(4680deg);
  }
}