:root {
  --menu-text-active: #ffffff;
  --text-primary-color: #3a3a59;
  --text-secondary-color: #4d4949;
  --background-primary-color: #ffffff;
  --background-secondary-color: #e8e6e6;
  --background-tertiary-color: #f2f0f0;
  --accent-color: #f75d4f;
  --neutral-primary-color: #a6a4a3;
  --neutral-secondary-color: #bfbdbb;
  --neutral-background-color: #edebe9;
  --hover-accent-color: #fed7d2;
  --positive-input-background: #d1f1e8;
  --negative-input-background: #ffd7da;
  --positive-color: #4ac5a4;
  --negative-color: #ff5361;
  --chart-color-1: #e1e16c;
  --chart-color-2: #feb56c;
  --chart-color-3: #e06ff9;
  --chart-color-4: #926df5;
  --chart-color-5: #66c6e3;
  --shadow-color: rgba(35, 24, 22, 0.11);
  --radial-background: radial-gradient(
    circle,
    var(--background-secondary-color) 0%,
    var(--neutral-secondary-color) 50%
  );
  --neutral-secondary-color-80: rgb(from var(--neutral-secondary-color) r g b / 80%);
}

.dark {
  --menu-text-active: #ffffff;
  --text-primary-color: #f0e8e7;
  --text-secondary-color: #d8cdcc;
  --background-primary-color: #2f2a2b;
  --background-secondary-color: #565052;
  --background-tertiary-color: #3d3839;
  --accent-color: #e54e40;
  --neutral-primary-color: #91898a;
  --neutral-secondary-color: #787071;
  --neutral-background-color: #3e393b;
  --hover-accent-color: #330a05;
  --positive-input-background: #3e5e57;
  --negative-input-background: #714148;
  --positive-color: #44a690;
  --negative-color: #e54155;
  --chart-color-1: #dbdb41;
  --chart-color-2: #ec9b53;
  --chart-color-3: #ae4bc4;
  --chart-color-4: #6152ce;
  --chart-color-5: #409dce;
  --shadow-color: rgba(35, 24, 22, 0.75);
}

body {
  /* Needed in some browsers (EDGE) to avoid seeing a white background when scrolling on mobile */
  background-color: var(--background-secondary-color);
  font-family: Ubuntu, sans-serif;
  color: var(--text-secondary-color);

  --shadow: rgba(0, 0, 100, 0.5); /* Not sure this is needed */
}

/* Custom scroll */
/* Chrome, Edge scroll */
body ::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
body ::-webkit-scrollbar-thumb {
  background-color: var(--neutral-primary-color);
  border-radius: 5px;
}
body ::-webkit-scrollbar-track,
body ::-webkit-scrollbar-corner {
  background-color: transparent;
  border-radius: 5px;
}
body ::-webkit-scrollbar-track:hover {
  background-color: var(--shadow-color);
}

/* Firefox scroll */
@-moz-document url-prefix() {
  body {
    scrollbar-color: var(--neutral-secondary-color) var(--background-secondary-color);
    scrollbar-width: thin;
  }
}

.mt-symbol-loader {
  --loader-size: 110px;
  --logo-size: 63.9px;
  --shadow-color: rgba(70, 75, 82, 0.34);
  --logo-y: -6px;
  --pulse-duration: 1.24s;

  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: transparent;
  pointer-events: none;
}

.mt-symbol-loader__stage {
  position: relative;
  width: var(--loader-size);
  height: var(--loader-size);
  display: grid;
  place-items: center;
}

.mt-symbol-loader__logo {
  position: relative;
  z-index: 2;
  width: var(--logo-size);
  display: block;
  line-height: 0;
  transform-origin: center center;
  transform: translate3d(0, var(--logo-y), 0) scale(1);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
  opacity: 0;
  animation: manttest-pulse var(--pulse-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite 0.3s;
}

.mt-symbol-loader__shadow {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: calc(50% + 39px);
  width: 96px;
  height: 10px;
  transform: translateX(-50%) scaleX(1);
  transform-origin: center center;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    var(--shadow-color) 0%,
    rgba(70, 75, 82, 0.23) 34%,
    rgba(70, 75, 82, 0.1) 58%,
    rgba(70, 75, 82, 0) 82%
  );
  filter: blur(2.8px);
  will-change: transform, opacity;
  opacity: 0;
  animation: manttest-shadow-pulse var(--pulse-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite
    0.3s;
}

@keyframes manttest-pulse {
  0%,
  100% {
    transform: translate3d(0, var(--logo-y), 0) scale(1);
    opacity: 0.93;
  }

  50% {
    transform: translate3d(0, var(--logo-y), 0) scale(1.048);
    opacity: 1;
  }
}

@keyframes manttest-shadow-pulse {
  0%,
  100% {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.9;
  }

  50% {
    transform: translateX(-50%) scaleX(1.07);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-symbol-loader__logo,
  .mt-symbol-loader__shadow {
    animation: none;
  }

  .mt-symbol-loader__logo {
    transform: translate3d(0, var(--logo-y), 0) scale(1);
    opacity: 1;
  }

  .mt-symbol-loader__shadow {
    transform: translateX(-50%) scaleX(1);
    opacity: 0.92;
  }
}