@tailwind base;
@tailwind components;
@tailwind utilities;

.activityindicator {
  border-top-color: currentColor;
  -webkit-animation: spinner 0.75s linear infinite;
  animation: spinner 0.75s linear infinite;
}

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

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

.jsmpeg canvas {
  position: static !important;
}

/*
Event.js
Maintain aspect ratio and scale down the video container
Could not find a proper tailwind css.
*/
.outer-max-width {
  max-width: 60%;
}
.aspect-ratio-box {
  padding-top: calc(9 / 16 * 100%);
  padding-bottom: 20%;
}