* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

*::-webkit-scrollbar {
  width: 16px !important;
}

*::-webkit-scrollbar-track {
  background-color: transparent !important;
}

*::-webkit-scrollbar-thumb {
  background-color: #babac0 !important;
  border-radius: 16px !important;
  border: 4px solid transparent !important;
  background-clip: content-box !important;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #acacb1 !important;
}

*::-webkit-scrollbar-button {
  display: none;
}

/* Hide the password reveal button in Edge */
input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
  display: none;
}

#components-reconnect-modal {
  display: none;
}
/*
DOCS: https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/signalr?view=aspnetcore-9.0#reflect-the-server-side-connection-state-in-the-ui*/
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: grid;
  position: fixed;
  z-index: 10001;
}

.cog-wheel-loader {
  width: 90px;
  height: 60px;
  position: relative;
  display: inline-block;
  --base-color: #fff;
}

.cog-wheel-loader::before {
  content: '';
  left: 0;
  top: 0;
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background-color: #767676;
  background-image: radial-gradient(
      circle 12px at 27px 27px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 27px 0px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 0px 27px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 54px 27px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 27px 54px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 45px 7.5px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 45px 7.5px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 45px 45px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 7.5px 45px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 6px at 7.5px 7.5px,
      var(--base-color) 100%,
      transparent 0
    );
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 3s linear infinite;
}

.cog-wheel-loader::after {
  content: '';
  left: 52px;
  top: 22px;
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #767676;
  background-image: radial-gradient(
      circle 7.5px at 18px 18px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 18px 0px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 0px 18px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 36px 18px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 18px 36px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 30px 4.5px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 30px 4.5px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 30px 30px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 4.5px 30px,
      var(--base-color) 100%,
      transparent 0
    ),
    radial-gradient(
      circle 3.75px at 4.5px 4.5px,
      var(--base-color) 100%,
      transparent 0
    );
  background-repeat: no-repeat;
  box-sizing: border-box;
  animation: rotationBack 4s linear infinite reverse;
}

@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}