:root {
  --dot-pulse-color: white;
  --dot-pulse-color-invert: invert(100%) sepia(0%) saturate(7493%) hue-rotate(233deg) brightness(101%) contrast(102%);
  /* 1-color: #68cce3;*/
  --a-color: invert(77%) sepia(55%) saturate(530%) hue-rotate(157deg) brightness(92%) contrast(93%);
  /* 2-color: #5D0BB8;*/
  --b-color: invert(16%) sepia(93%) saturate(7204%) hue-rotate(271deg) brightness(71%) contrast(107%);
  /* 3-color #029346 */
  --c-color: invert(41%) sepia(26%) saturate(1565%) hue-rotate(98deg) brightness(97%) contrast(98%);
  /* 4-color: #F4D549;*/
  --d-color: invert(93%) sepia(51%) saturate(7275%) hue-rotate(321deg) brightness(108%) contrast(91%);
  /* 7-color: #1c80ff;*/
  --g-color: invert(43%) sepia(51%) saturate(4403%) hue-rotate(200deg) brightness(99%) contrast(105%);
  /* 8-color: #F49C43;*/
  --h-color: invert(69%) sepia(51%) saturate(818%) hue-rotate(330deg) brightness(102%) contrast(91%);
  /* 9-color: #f47821;*/
  --i-color: invert(50%) sepia(74%) saturate(981%) hue-rotate(346deg) brightness(97%) contrast(97%);
  /* 10-color: #E2BF41;*/
  --j-color: invert(100%) sepia(71%) saturate(6015%) hue-rotate(320deg) brightness(91%) contrast(94%);
  /* 15-color: #18AE62;*/
  --p-color: invert(48%) sepia(58%) saturate(6017%) hue-rotate(131deg) brightness(108%) contrast(81%);

  --p-bg-color: #1C1E26;
}

.dot-pulse-wrapper {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;

  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: -1;
  opacity: 0;
  display: none;
  transition: all 0.5s ease;
}

.dot-pulse-wrapper.visible {
  opacity: 1;
  display: flex;
}

img#app-loader-logo {
  max-width: 200px;
}

.dot-pulse {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--dot-pulse-color);
  color: var(--dot-pulse-color);
  box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
  animation: dotPulse 1.5s infinite linear;
  animation-delay: .25s;
}

.dot-pulse::before, .dot-pulse::after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: var(--dot-pulse-color);
  color: var(--dot-pulse-color);
}

.dot-pulse::before {
  box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
  animation: dotPulseBefore 1.5s infinite linear;
  animation-delay: 0s;
}

.dot-pulse::after {
  box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
  animation: dotPulseAfter 1.5s infinite linear;
  animation-delay: .5s;
}

@keyframes dotPulseBefore {
  0% {
    box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
  }
  30% {
    box-shadow: 9984px 0 0 2px var(--dot-pulse-color);
  }
  60%,
  100% {
    box-shadow: 9984px 0 0 -5px var(--dot-pulse-color);
  }
}

@keyframes dotPulse {
  0% {
    box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
  }
  30% {
    box-shadow: 9999px 0 0 2px var(--dot-pulse-color);
  }
  60%,
  100% {
    box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
  }
}

@keyframes dotPulseAfter {
  0% {
    box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
  }
  30% {
    box-shadow: 10014px 0 0 2px var(--dot-pulse-color);
  }
  60%,
  100% {
    box-shadow: 10014px 0 0 -5px var(--dot-pulse-color);
  }
}

.dot-pulse.brand_1 {
  color: var(--a-color);
  background-color: var(--a-color);
  filter: var(--a-color);
  box-shadow: 9999px 0 0 -5px var(--a-color);
}

.dot-pulse.brand_2 {
  color: var(--b-color);
  background-color: var(--b-color);
  filter: var(--b-color);
  box-shadow: 9999px 0 0 -5px var(--b-color);
}

.dot-pulse.brand_3 {
  color: var(--c-color);
  background-color: var(--c-color);
  filter: var(--c-color);
  box-shadow: 9999px 0 0 -5px var(--c-color);
}

.dot-pulse.brand_4 {
  color: var(--d-color);
  background-color: var(--d-color);
  filter: var(--d-color);
  box-shadow: 9999px 0 0 -5px var(--d-color);
}

.dot-pulse.brand_7 {
  color: var(--g-color);
  background-color: var(--g-color);
  filter: var(--g-color);
  box-shadow: 9999px 0 0 -5px var(--g-color);
}

.dot-pulse-wrapper.brand_7 {
  background-color: #000f2d;
}

.dot-pulse.brand_8 {
  color: var(--h-color);
  background-color: var(--h-color);
  filter: var(--h-color);
  box-shadow: 9999px 0 0 -5px var(--h-color);
}

.dot-pulse.brand_9 {
  color: var(--i-color);
  background-color: var(--i-color);
  filter: var(--i-color);
  box-shadow: 9999px 0 0 -5px var(--i-color);
}

.dot-pulse.brand_10 {
  color: var(--j-color);
  background-color: var(--j-color);
  filter: var(--j-color);
  box-shadow: 9999px 0 0 -5px var(--j-color);
}

.dot-pulse.white {
  color: var(--dot-pulse-color);
  background-color: var(--dot-pulse-color);
  filter: var(--dot-pulse-color);
  box-shadow: 9999px 0 0 -5px var(--dot-pulse-color);
}

.dot-pulse-wrapper.brand_13 {
  --dot-pulse-color: #D1AA41;
  background: #1B1B1F;
  gap: 25px;
}

.dot-pulse-wrapper.brand_15 {
  --dot-pulse-color: #36E1B9;
  background: #051214;
  gap: 25px;
}

.dot-pulse.brand_16 {
  color: var(--p-color);
  background-color: var(--j-color);
  filter: var(--p-color);
  box-shadow: 9999px 0 0 -5px var(--p-color);
}

.dot-pulse-wrapper.brand_16 {
  gap: 25px;
  background-color: var(--p-bg-color);
}

.dot-pulse-wrapper.brand_18 {
  background-color: #1b2339
}