/* Set CSS Variables */
:root {
  --kai-green: #00586e;
  --kai-hover: #3aafa9;
  --kai-container-border: #dbdbdb;
  --kai-img-panels: #f7f7f7;
  --kai-table-border: #f3f2f1;
  --nav-background: #fff;
  --menu-card-border: #fff;
  --kai-navbar-text: #000;
  --z-9999: 9999;
  --z-9995: 9995;
}

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

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

/* width */
::-webkit-scrollbar {
  width: 0.8rem;
  height: 0.8rem;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--kai-green);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--kai-hover);
}

html {
  background-color: #fff;
  font-size: min(1.3vh, 14px);
}

.base {
  background-color: #fff;
  font-size: min(1.3vh, 14px);
}

a {
  text-decoration: none;
}

.table td,
.table th {
  padding: 5px;
}

table {
  max-width: 100%;
}

select:invalid {
  border: 1px dashed red;
}

.main {
  width: 75vw;
  height: 10000vh;
  right: 2.5vw;
  position: absolute;
}

.wrapper {
  display: flex;
  justify-content: center;
}

/* This is above the one zindex higher than bootstrap 5s offcanvas zindex */
.z-above-offcanvas {
  z-index: 1046;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(5deg);
  }
  95% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

span.wiggle {
  display: inline-block;
  animation: wiggle 2s infinite;
}

span.wiggle:hover {
  animation: none;
}