body {
  min-width: 320px !important;
}

/* videojs theme-ing */
.vjs-theme-sea .vjs-big-play-button {
  width: 103px;
  height: 79px;
  -o-object-fit: contain;
  object-fit: contain;
  background-color: hsl(0deg 0% 0% / 25%);
  border: none;
  line-height: 79px;
  top: 50%;
  left: 50%;
  border-radius: 30px;
  margin: -39.5px 0 0 -51.5px;
}
.vjs-theme-sea .vjs-control-bar {
  height: 4em;
  background-color: hsla(0, 0%, 30%, 0.5);
}
.vjs-theme-sea .vjs-button:hover {
  color: white;
  background: rgba(0, 0, 0, 0.2);
}
.vjs-theme-sea .vjs-button > .vjs-icon-placeholder:before {
  line-height: 2.2;
}
.vjs-theme-sea .vjs-time-control {
  line-height: 4em;
}
.vjs-theme-sea .vjs-picture-in-picture-control,
.vjs-theme-sea .vjs-volume-panel {
  display: initial !important;
}
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-hover, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active, .video-js .vjs-volume-panel.vjs-volume-panel-horizontal:active {
  width: 4em !important;
}
.vjs-theme-sea .vjs-progress-control .vjs-play-progress {
  background-color: rgba(0, 166, 209, 0.8);
}
.vjs-theme-sea .vjs-progress-control .vjs-play-progress:before {
  display: none;
}
.vjs-theme-sea .vjs-progress-control .vjs-slider {
  background-color: hsl(0deg 0% 0% / 5%);
}
.vjs-theme-sea .vjs-progress-control .vjs-load-progress div {
  background: hsla(0, 0%, 100%, 0.5);
}
.vjs-theme-sea .vjs-progress-control .vjs-progress-holder {
  margin: 0;
  height: 100%;
}
.vjs-theme-sea .vjs-progress-control .vjs-time-tooltip {
  background-color: rgba(65, 118, 188, 0.5);
  color: #fff;
}
.vjs-theme-sea .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip {
  background-color: hsla(0, 0%, 100%, 0.7);
  color: #4176bc;
}

.video-js {
  background: transparent !important;
}

@keyframes loading {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

/* loader */
.loading-bar {
  animation: loading 1.5s linear infinite;
}

/* chapter video */
.actalibra-chapter {
  position: absolute;
  top: 0;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.2s ease;
}
.actalibra-chapter:hover {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0)
  );
  border-right: 1px solid rgba(0, 0, 0, 0.25);
}

.chapter-tooltip {
  position: absolute;
  padding: 6px 10px;
  background: #222;
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

/* video details */
.circle-wrapper .checkmark {
  display: none;
}

.completed .circle-wrapper .checkmark {
  display: initial;
}

.circle-wrapper {
  position: relative;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.circle-bg {
  fill: white;
  stroke: #9ca3af;
  stroke-width: 2;
}

.progress-ring__circle {
  fill: transparent;
  stroke-width: 2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.3s ease;
}

.completed {
  color: #22a954;
  .checkmark {
    fill: #ffffff;
    font-weight: bold;
  }
  .progress-ring__circle {
    stroke: rgb(34 197 94);
    fill: rgb(34 197 94);
    color: white;
  }
  .circle-wrapper {
    background-color: color-mix(
      in srgb,
      oklch(0.86 0.11 153.92) 50%,
      transparent
    );
  }
}

.tostart {
  .progress-ring__circle {
    stroke: rgb(179, 179, 179);
  }
}

.playing {
  color: rgba(0, 166, 209, 1);
  font-weight: bold;
  .progress-ring__circle {
    stroke: rgba(0, 166, 209, 0.8);
  }
  .circle-bg {
    stroke: #cfe0ff;
  }
  .circle-wrapper {
    background-color: color-mix(in srgb, rgb(221 221 221 / 80%), transparent);
  }
}

.theater-mode {
  .video-metadata {
    width: 100%;
    margin-top: 40px !important;
  }
  .video-player {
    width: 100%;
  }
  .video-content-wrapper {
    display: block !important;
  }
}

@media (min-width: 768px) {
  .miniplayer-mode .video-player {
    position: sticky;
    top: 195px;
    align-self: flex-start;
    z-index: 10;
  }
}

/* menu & sidebar */

#user-dropdown .acta-academy-lang-picker.active {
  color: #00a6d1 !important;
}

/* Active language in the dropdown */
#acta-academy-langpicker-header .acta-academy-lang-picker.active {
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  color: white;
}

/* Optional: remove hover effect for the active one if needed */
#acta-academy-langpicker-header .acta-academy-lang-picker.active:hover {
  background-color: #374151;
  color: white;
}

[id^="acta-academy-menu"].active {
  color: #00a6d1 !important;
  background-color: var(--color-gray-50);
}

/* SVG inside the button */
[id^="acta-academy-menu"].active svg {
  stroke: #00a6d1 !important; /* for stroke-based icons */
  color: #00a6d1 !important;  /* fallback for fill-based icons */
}

/* Anchor inside the button */
[id^="acta-academy-menu"].active a {
  color: #00a6d1 !important;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
}

.animate-heartbeat {
  animation: heartbeat 0.6s ease forwards;
}

/* splide */
.splide__pagination {
  bottom: -2.5em !important;
}

/* progress bar video */
@keyframes tail-flow {
  0% { left: 25%; }
  100% { left: 100%; }
}

.progress-bar-container {
  position: relative;
  height: 1rem;
  width: 100%;
  display: flex;
}

.progress-bar-fill {
  background: linear-gradient(to right, #f03 80%, #ff2791 100%);
  height: 100%;
  position: relative;
  overflow: hidden;
}

.progress-bar-tail {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(to right, #ffffff00, #0200002e, #ffffff29);
  animation: tail-flow 1s linear infinite;
}

/* Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 12px;                /* width of vertical scrollbar */
    height: 12px;               /* height of horizontal scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;        /* light grey track */
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background-color: #9e9e9e;  /* corporate blue */
    border-radius: 10px;
    border: 3px solid #f1f1f1; /* gives padding effect */
    transition: background 0.3s;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #9e9e9e;  /* darker on hover */
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #9e9e9e #f1f1f1; /* thumb color / track color */
}

#video_detail_description ul {
  padding: 20px;
  list-style: disc;
}