@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "flowbite";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite.min";

/* 4.166666499999998 is directly related to the w-11/12 class applied below. */ 
/* This value represents half of the empty space leftover. */

.video-js .vjs-tech{
  @apply flex;
  @apply flex-col;
  @apply mx-auto;
}

.video-js div.vjs-control-bar {
  @apply text-sm;
  @apply bg-black;
  @apply w-screen;
  @apply sm:max-w-[507px];
  @apply left-[-4.166666499999998%];
} 

div > div.vjs-play-progress.vjs-slider-bar {
  @apply bg-frankly-teal;
  @apply border-frankly-teal-200;
  @apply text-frankly-teal;
}

.video-js .vjs-big-play-button {
  border: none;
  background: none;
  font-size: 5rem;
}

.video-js .vjs-current-time.vjs-time-control.vjs-control, .video-js .vjs-remaining-time.vjs-time-control.vjs-control {
  display: inline-block;
}

:not(.vjs-has-started) .vjs-control-bar {
  display: flex;
}

.field_with_errors {
  display: contents;
}