@charset "UTF-8";.certificate-modal > .modal-dialog {
  margin: auto;
  max-width: 90%;
  width: fit-content;
}.pwa-install-banner {
  background: #003366;
  top: 0;
  left: 0;
  z-index: 999;
}
@media (min-width: 992px) {
  .pwa-install-banner.pwa-install-banner-offset {
    padding-left: 250px;
  }
}.gmetrix-toast-container.toast-container {
  position: fixed;
  top: 5rem;
  left: 0;
  right: 0;
  width: auto;
  max-width: none;
  z-index: 1090;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
}
.gmetrix-toast-container.toast-container .toast {
  pointer-events: auto;
  min-width: min(320px, 100%);
  max-width: 560px;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(13, 34, 56, 0.18);
  animation: gmetrix-toast-in 220ms ease-out;
}
.gmetrix-toast-container.toast-container .toast .toast-body {
  padding: 0.875rem 1rem;
  font-weight: 500;
}

@keyframes gmetrix-toast-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}.stackable-modal.stack-height-0 {
  z-index: 1041;
}
.stackable-modal.stack-height-1 {
  z-index: 1051;
}
.stackable-modal.stack-height-2 {
  z-index: 1061;
}
.stackable-modal.stack-height-3 {
  z-index: 1071;
}
.stackable-modal.stack-height-4 {
  z-index: 1081;
}
.stackable-modal.remove-title-divider .modal-dialog .modal-content .modal-header::after {
  display: none;
}
.stackable-modal.remove-footer-divider .modal-dialog .modal-content .modal-footer {
  border: none;
}

.stackable-modal-backdrop.stack-height-0 {
  z-index: 1040;
}
.stackable-modal-backdrop.stack-height-1 {
  z-index: 1050;
}
.stackable-modal-backdrop.stack-height-2 {
  z-index: 1060;
}
.stackable-modal-backdrop.stack-height-3 {
  z-index: 1070;
}
.stackable-modal-backdrop.stack-height-4 {
  z-index: 1080;
}

.dialog-action-button {
  min-width: 82px;
}.error-fallback {
  min-height: calc(100vh - 300px);
}
.error-fallback .error-boundary-icon {
  font-size: 4rem;
}
.error-fallback .error-boundary-details {
  max-width: 900px;
}
.error-fallback .error-boundary-details summary {
  cursor: pointer;
}
.error-fallback .error-boundary-stacktrace {
  font-size: 0.75rem;
  max-height: 300px;
  white-space: pre-wrap;
  word-break: break-word;
}.resource-list-item-shadow {
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
}

.resource-list-item-right-border {
  border-right: 1px solid #e9ecef !important;
}

.test-results-header {
  color: #fff !important;
  background-color: #036 !important;
}

@media (max-width: 768px) {
  .resource-list-item-right-border {
    border-right: none !important;
  }
  .resource-list-item-top-border {
    border-top: 1px solid #e9ecef !important;
  }
}.publisher-logo {
  height: 20px;
}

.mobile-tabbar-bars,
.mobile-tabbar-refMats {
  width: 40px;
  height: 40px;
  color: #fff;
}

.mobile-tabbar-bars {
  background-color: #2A898F;
}

.mobile-tabbar-refMats {
  background-color: #D34400;
}

.hourglass-spin {
  color: white;
  font-size: 21px;
  margin-left: -6px;
  margin-top: -7px;
}
.hourglass-spin > [class*=fa-hourglass] {
  animation: showhide 2s steps(1) infinite;
  opacity: 0;
}
.hourglass-spin > .fa-hourglass-end {
  animation-delay: 1s;
  margin-top: -4px;
}
.hourglass-spin > .fa-hourglass-half {
  animation-delay: 0.5s;
  margin-top: -4px;
}
.hourglass-spin > .fa-hourglass-start {
  animation-delay: 0s;
  margin-top: -4px;
}
.hourglass-spin > .fa-hourglass-end.spin {
  animation: showhidespin 2s linear infinite;
  margin-top: -4px;
}.sideNav {
  min-width: 350px;
  max-width: 350px;
}

.navlist-wrapper::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
}

.navlist-wrapper::-webkit-scrollbar {
  width: 6px;
  background-color: #fff;
}

.navlist-wrapper::-webkit-scrollbar-thumb {
  background-color: #909090;
}

.course-title-wrapper {
  height: 70px;
}

.progress-meter {
  height: 8px;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #CCCCCC;
}

progress::-webkit-progress-bar {
  background-color: #CCCCCC;
}

progress::-webkit-progress-value,
progress::-moz-progress-bar,
progress::-ms-fill {
  background-color: #4BAA68;
}

.navLock i:hover {
  animation: shake 250ms infinite;
  animation-timing-function: linear;
}

.navLock-wrapper {
  background: #ddd;
  opacity: 0.7;
}

.icon-complete {
  color: #4baa68;
}

.icon-incomplete,
.nav-section-icon {
  color: #CCCCCC;
}

.bars-btn-wrapper {
  position: absolute;
  top: 20px;
  left: 350px;
}

.bars-btn-wrapper.sidenav-btn-closed {
  position: fixed;
  left: 0px;
  top: 80px;
}

.bars-btn:active, .bars-btn:focus, .bars-btn:hover {
  box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #343A40 !important;
  outline: none !important;
}.web-content-iframe {
  height: 900px;
}.speechLeft {
  position: relative;
  bottom: 1500px;
  font-family: arial;
  font-size: 1.1em;
  background: white;
  color: black;
  border-radius: 10px;
  padding: 20px;
  max-width: 210px;
  left: 39%;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}

.speechRight {
  position: relative;
  bottom: 1500px;
  font-family: arial;
  font-size: 1.1em;
  background: white;
  color: black;
  border-radius: 10px;
  padding: 20px;
  max-width: 210px;
  left: 45%;
  opacity: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.6);
}

.leftBubble::after {
  content: "";
  border: 20px solid transparent;
  border-right-color: white;
  border-left: 0;
  position: absolute;
  left: -20px;
  top: 50%;
  margin-top: -20px;
}

.rightBubble::after {
  content: "";
  border: 20px solid transparent;
  border-left-color: white;
  border-right: 0;
  position: absolute;
  right: -20px;
  top: 50%;
  margin-top: -20px;
}.glossary-checkbox:not(:checked) {
  border-color: #444 !important;
  border-width: 2px !important;
  border-style: solid !important;
}

.flash-card {
  width: 300px;
  margin: auto;
  height: 350px;
  text-align: center;
}

.front-of-card {
  background: #d0f0c0;
}

.back-of-card {
  background: #ddd;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  max-width: 815px;
  gap: 5px;
  margin: auto;
}

.face-down {
  background: #6CB8AB;
}

.percent-container {
  font-size: 100px;
}/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Player
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

[data-media-player] {
  width: 100%;
  display: inline-flex;
  align-items: center;
  position: relative;
  contain: style;
  box-sizing: border-box;
  user-select: none;
}

[data-media-player] * {
  box-sizing: border-box;
}

:where([data-media-player][data-view-type='video']) {
  aspect-ratio: 16 / 9;
}

[data-media-player]:focus,
[data-media-player]:focus-visible {
  outline: none;
}

[data-media-player][data-view-type='video'][data-started]:not([data-controls]) {
  pointer-events: auto;
  cursor: none;
}

[data-media-player] slot {
  display: contents;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Provider
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

[data-media-provider] {
  display: flex;
  position: relative;
  box-sizing: border-box;
  align-items: center;
  border-radius: inherit;
  width: 100%;
  aspect-ratio: inherit;
  overflow: hidden;
}

[data-media-player]:not([data-view-type='audio']) [data-media-provider],
[data-media-player][data-fullscreen] [data-media-provider] {
  height: 100%;
}

[data-media-player][data-view-type='audio'] [data-media-provider] {
  display: contents;
  background-color: unset;
}

[data-media-provider] audio {
  width: 100%;
}

:where(video:not([width]):not([height]), iframe:not([width]):not([height])) {
  width: 100%;
  aspect-ratio: 16 / 9;
}

:where([data-media-provider] video),
:where([data-media-provider] iframe) {
  aspect-ratio: inherit;
  display: inline-block;
  height: auto;
  object-fit: contain;
  touch-action: manipulation;
  border-radius: inherit;
  width: 100%;
}

[data-media-provider] iframe {
  height: 100%;
}

[data-media-player][data-view-type='audio'] video,
[data-media-player][data-view-type='audio'] iframe {
  display: none;
}

[data-media-player][data-fullscreen] video {
  height: 100%;
}

[data-media-provider] iframe:not([src]) {
  display: none;
}

iframe.vds-youtube[data-no-controls] {
  height: 1000%;
}

.vds-blocker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: auto;
  aspect-ratio: inherit;
  pointer-events: auto;
  border-radius: inherit;
  z-index: 1;
}

[data-ended] .vds-blocker {
  background-color: black;
}

.vds-icon:focus {
  outline: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Google Cast
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

.vds-google-cast {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #dedede;
  font-family: sans-serif;
  font-weight: 500;
}

.vds-google-cast svg {
  --size: max(18%, 40px);
  width: var(--size);
  height: var(--size);
  margin-bottom: 8px;
}

.vds-google-cast-info {
  font-size: calc(var(--media-height) / 100 * 6);
}

:where(.vds-buffering-indicator) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}

:where(.vds-buffering-indicator) :where(.vds-buffering-icon, .vds-buffering-spinner) {
  opacity: 0;
  pointer-events: none;
  transition: var(--media-buffering-transition, opacity 200ms ease);
}

:where(.vds-buffering-indicator)
  :where(.vds-buffering-icon, svg.vds-buffering-spinner, .vds-buffering-spinner svg) {
  width: var(--media-buffering-size, 96px);
  height: var(--media-buffering-size, 96px);
}

:where(.vds-buffering-indicator) :where(.vds-buffering-track, circle[data-part='track']) {
  color: var(--media-buffering-track-color, #f5f5f5);
  opacity: var(--media-buffering-track-opacity, 0.25);
  stroke-width: var(--media-buffering-track-width, 8);
}

:where(.vds-buffering-indicator) :where(.vds-buffering-track-fill, circle[data-part='track-fill']) {
  color: var(--media-buffering-track-fill-color, var(--media-brand));
  opacity: var(--media-buffering-track-fill-opacity, 0.75);
  stroke-width: var(--media-buffering-track-fill-width, 9);
  stroke-dasharray: 100;
  stroke-dashoffset: var(--media-buffering-track-fill-offset, 50);
}

:where([data-buffering]) :where(.vds-buffering-icon, .vds-buffering-spinner) {
  opacity: 1;
  animation: var(--media-buffering-animation, vds-buffering-spin 1s linear infinite);
}

@keyframes vds-buffering-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion) {
  :where([data-buffering]) :where(.vds-buffering-icon, .vds-buffering-spinner) {
    animation-duration: 8s;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Buttons
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-button) {
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  appearance: none;
  background: none;
  outline: none;
  border: none;
  border-radius: var(--media-button-border-radius, 9999%);
  width: var(--media-button-size, 38px);
  height: var(--media-button-size, 38px);
  transition: transform 0.2s ease-out;
  contain: layout style;
  cursor: pointer;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
}

.vds-button {
  border: var(--media-button-border);
  color: var(--media-button-color, var(--media-controls-color, #f5f5f5));
  padding: var(--media-button-padding, 0px);
}

:where([data-fullscreen] .vds-button) {
  width: var(--media-fullscreen-button-size, 42px);
  height: var(--media-fullscreen-button-size, 42px);
}

@media screen and (max-width: 599px) {
  :where([data-fullscreen] .vds-button) {
    width: var(--media-sm-fullscreen-button-size, 42px);
    height: var(--media-sm-fullscreen-button-size, 42px);
  }
}

:where(.vds-button .vds-icon) {
  width: var(--media-button-icon-size, 70%);
  height: var(--media-button-icon-size, 70%);
  border-radius: var(--media-button-border-radius, 8px);
}

:where(.vds-menu-button .vds-icon) {
  display: flex !important;
}

:where(.vds-button[aria-hidden="true"]) {
  display: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .vds-button:hover {
    background-color: var(--media-button-hover-bg, rgb(255 255 255 / 0.2));
  }

  .vds-button:hover {
    transform: var(--media-button-hover-transform, scale(1.05));
    transition: var(--media-button-hover-transition, transform 0.2s ease-in);
  }

  .vds-button[aria-expanded="true"] {
    transform: unset;
  }
}

@media (pointer: coarse) {
  .vds-button:hover {
    border-radius: var(--media-button-touch-hover-border-radius, 100%);
    background-color: var(
      --media-button-touch-hover-bg,
      rgb(255 255 255 / 0.2)
    );
  }
}

:where(.vds-button:focus) {
  outline: none;
}

:where(.vds-button[data-focus], .vds-button:focus-visible) {
  box-shadow: var(--media-focus-ring);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Live Button
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-live-button) {
  min-width: auto;
  min-height: auto;
  width: var(--media-live-button-width, 40px);
  height: var(--media-live-button-height, 40px);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  appearance: none;
  background: none;
  outline: none;
  border: none;
}

:where(.vds-live-button-text) {
  font-family: var(--media-font-family, sans-serif);
  font-size: var(--media-live-button-font-size, 12px);
  font-weight: var(--media-live-button-font-weight, 600);
  letter-spacing: var(--media-live-button-letter-spacing, 1.5px);
  transition: color 0.3s ease;
}

.vds-live-button-text {
  background-color: var(--media-live-button-bg, #8a8a8a);
  border-radius: var(--media-live-button-border-radius, 2px);
  color: var(--media-live-button-color, #161616);
  padding: var(--media-live-button-padding, 1px 4px);
}

:where(.vds-live-button[data-focus] .vds-live-button-text) {
  box-shadow: var(--media-focus-ring);
}

:where(.vds-live-button[data-edge]) {
  cursor: unset;
}

.vds-live-button[data-edge] .vds-live-button-text {
  background-color: var(--media-live-button-edge-bg, #dc2626);
  color: var(--media-live-button-edge-color, #f5f5f5);
}

@media (pointer: fine) {
  :where(.vds-live-button:hover) {
    background-color: unset;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * States
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

/* Play Button */
.vds-button:not([data-paused]) .vds-play-icon,
.vds-button[data-ended] .vds-play-icon,
.vds-button[data-paused] .vds-pause-icon,
.vds-button[data-ended] .vds-pause-icon,
.vds-button:not([data-ended]) .vds-replay-icon,
/* PIP Button */
.vds-button[data-active] .vds-pip-enter-icon,
.vds-button:not([data-active]) .vds-pip-exit-icon,
/* Fullscreen Button */
.vds-button[data-active] .vds-fs-enter-icon,
.vds-button:not([data-active]) .vds-fs-exit-icon,
/* Caption Button */
.vds-button:not([data-active]) .vds-cc-on-icon,
.vds-button[data-active] .vds-cc-off-icon,
/* Mute Button */
.vds-button:not([data-muted]) .vds-mute-icon,
.vds-button:not([data-state='low']) .vds-volume-low-icon,
.vds-button:not([data-state='high']) .vds-volume-high-icon {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Captions
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-captions) {
  /* Recommended settings in the WebVTT spec (https://www.w3.org/TR/webvtt1). */
  --overlay-padding: var(--media-captions-padding, 1%);
  --cue-color: var(--media-user-text-color, var(--media-cue-color, white));
  --cue-bg-color: var(--media-user-text-bg, var(--media-cue-bg, rgba(0, 0, 0, 0.7)));
  --cue-default-font-size: var(--media-cue-font-size, calc(var(--overlay-height) / 100 * 4.5));
  --cue-font-size: calc(var(--cue-default-font-size) * var(--media-user-font-size, 1));
  --cue-line-height: var(--media-cue-line-height, calc(var(--cue-font-size) * 1.2));
  --cue-padding-x: var(--media-cue-padding-x, calc(var(--cue-font-size) * 0.6));
  --cue-padding-y: var(--media-cue-padding-x, calc(var(--cue-font-size) * 0.4));
  --cue-padding: var(--cue-padding-y) var(--cue-padding-x);
  position: absolute;
  inset: 0;
  z-index: 1;
  contain: layout style;
  margin: var(--overlay-padding);
  font-size: var(--cue-font-size);
  font-family: var(--media-user-font-family, sans-serif);
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
  word-spacing: normal;
  word-break: break-word;
}

:where([data-fullscreen][data-orientation='portrait'] .vds-captions) {
  --cue-default-font-size: var(--media-cue-font-size, calc(var(--overlay-width) / 100 * 4.5));
}

:where([data-view-type='audio'] .vds-captions) {
  position: relative;
  margin: 0;
}

:where(.vds-captions[aria-hidden='true']) {
  opacity: 0;
  visibility: hidden;
}

.vds-captions[data-example] {
  opacity: 1 !important;
  visibility: visible !important;
}

:where([data-view-type='video'] .vds-captions [data-part='cue-display'][data-example]) {
  --cue-text-align: center;
  --cue-width: 100%;
  --cue-top: 90%;
  --cue-left: 0%;
}

:where([data-view-type='audio'] .vds-captions [data-part='cue-display']) {
  --cue-width: 100%;
  position: relative !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * VTT Cues
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-captions [data-part='cue-display']) {
  position: absolute;
  direction: ltr;
  overflow: visible;
  contain: content;
  top: var(--cue-top);
  left: var(--cue-left);
  right: var(--cue-right);
  bottom: var(--cue-bottom);
  width: var(--cue-width, auto);
  height: var(--cue-height, auto);
  box-sizing: border-box;
  transform: var(--cue-transform);
  text-align: var(--cue-text-align);
  writing-mode: var(--cue-writing-mode, unset);
  white-space: pre-line;
  unicode-bidi: plaintext;
  min-width: min-content;
  min-height: min-content;
  background-color: var(--media-user-display-bg, var(--media-cue-display-bg));
  border-radius: var(--media-cue-display-border-radius);
}

.vds-captions [data-part='cue-display'] {
  padding: var(--media-cue-display-padding);
}

:where(.vds-captions[data-dir='rtl'] [data-part='cue-display']) {
  direction: rtl;
}

:where(.vds-captions [data-part='cue']) {
  display: inline-block;
  contain: content;
  font-variant: var(--media-user-font-variant);
  border: var(--media-cue-border, unset);
  border-radius: var(--media-cue-border-radius, 2px);
  backdrop-filter: var(--media-cue-backdrop, blur(8px));
  line-height: var(--cue-line-height);
  box-sizing: border-box;
  box-shadow: var(--media-cue-box-shadow, var(--cue-box-shadow));
  white-space: var(--cue-white-space, pre-wrap);
  outline: var(--cue-outline);
  text-shadow: var(--media-user-text-shadow, var(--cue-text-shadow));
}

.vds-captions [data-part='cue'] {
  background-color: var(--cue-bg-color);
  color: var(--cue-color);
  padding: var(--cue-padding);
}

:where(.vds-captions [data-part='cue-display'][data-vertical] [data-part='cue']) {
  --cue-padding: var(--cue-padding-x) var(--cue-padding-y);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * VTT Regions
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-captions [data-part='region']) {
  --anchor-x-percent: calc(var(--region-anchor-x) / 100);
  --anchor-x: calc(var(--region-width) * var(--anchor-x-percent));
  --anchor-y-percent: calc(var(--region-anchor-y) / 100);
  --anchor-y: calc(var(--region-height) * var(--anchor-y-percent));
  --vp-anchor-x: calc(var(--region-viewport-anchor-x) * 1%);
  --vp-anchor-y-percent: calc(var(--region-viewport-anchor-y) / 100);
  --vp-anchor-y: calc(var(--overlay-height) * var(--vp-anchor-y-percent));
  position: absolute;
  display: inline-flex;
  flex-flow: column;
  justify-content: flex-start;
  width: var(--region-width);
  height: var(--region-height);
  min-height: 0px;
  max-height: var(--region-height);
  writing-mode: horizontal-tb;
  top: var(--region-top, calc(var(--vp-anchor-y) - var(--anchor-y)));
  left: var(--region-left, calc(var(--vp-anchor-x) - var(--anchor-x)));
  right: var(--region-right);
  bottom: var(--region-bottom);
  overflow: hidden;
  overflow-wrap: break-word;
  box-sizing: border-box;
}

:where(.vds-captions [data-part='region'][data-active]) {
}

:where(.vds-captions [data-part='region'][data-scroll='up']) {
  justify-content: end;
}

:where(.vds-captions [data-part='region'][data-active][data-scroll='up']) {
  transition: top 0.433s;
}

:where(.vds-captions [data-part='region'] > [data-part='cue-display']) {
  position: relative;
  width: auto;
  left: var(--cue-offset);
  height: var(--cue-height, auto);
  text-align: var(--cue-text-align);
  unicode-bidi: plaintext;
  margin-top: 2px;
}

:where(.vds-captions [data-part='region'] [data-part='cue']) {
  position: relative;
  border-radius: 0px;
}

:where(.vds-chapter-title) {
  --color: var(--media-chapter-title-color, rgba(255 255 255 / 0.64));
  display: inline-block;
  font-family: var(--media-font-family, sans-serif);
  font-size: var(--media-chapter-title-font-size, 16px);
  font-weight: var(--media-chapter-title-font-weight, 400);
  color: var(--color);
  flex: 1 1 0%;
  padding-inline: 6px;
  overflow: hidden;
  text-align: start;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.vds-chapter-title::before {
  content: var(--media-chapter-title-separator, '\2022');
  display: inline-block;
  margin-right: var(--media-chapter-title-separator-gap, 6px);
  color: var(--media-chapter-title-separator-color, var(--color));
}

.vds-chapter-title:empty::before {
  content: '';
  margin: 0;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Controls
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-controls),
:where(.vds-controls-group) {
  position: relative;
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Audio Controls
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-view-type='audio'] .vds-controls) {
  display: inline-block;
  max-width: 100%;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Video Controls
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-view-type='video'] .vds-controls) {
  display: flex;
  position: absolute;
  flex-direction: column;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: var(--media-controls-padding, 0px);
  transition: var(--media-controls-out-transition, opacity 0.2s ease-out);
}

:where([data-view-type='video'] .vds-controls[data-visible]) {
  opacity: 1;
  visibility: visible;
  transition: var(--media-controls-in-transition, opacity 0.2s ease-in);
}

:where(.vds-controls-spacer) {
  flex: 1 1 0%;
  pointer-events: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Gesture
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-gestures) {
  display: contents;
}

:where(.vds-gesture) {
  position: absolute;
  display: block;
  contain: content;
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}

:where(.vds-icon svg) {
  display: block;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Keyboard Action
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-kb-action.hidden) {
  opacity: 0;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Keyboard Text
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-kb-text-wrapper) {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: var(--media-kb-text-top, 10%);
  z-index: 20;
  pointer-events: none;
}

:where(.vds-kb-text) {
  display: inline-block;
  font-size: var(--media-kb-text-size, 150%);
  font-family: var(--media-font-family, sans-serif);
  backdrop-filter: blur(2px);
  border-radius: var(--media-kb-border-radius, 2.5px);
  pointer-events: none;
}

.vds-kb-text {
  color: var(--media-kb-text-color, var(--default-color));
  background-color: var(--media-kb-text-bg, var(--default-bg));
  padding: var(--media-kb-text-padding, 10px 20px);
}

.light .vds-kb-text {
  --default-color: #1a1a1a;
  --default-bg: rgb(240 240 240 / 0.6);
}

.dark .vds-kb-text {
  --default-color: #f5f5f5;
  --default-bg: rgb(10 10 10 / 0.6);
}

:where(.vds-kb-text:empty) {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Keyboard Bezel
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-kb-bezel) {
  --size: var(--media-kb-bezel-size, 52px);
  position: absolute;
  left: 50%;
  top: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  margin-left: calc(-1 * calc(var(--size) / 2));
  margin-right: calc(-1 * calc(var(--size) / 2));
  z-index: 20;
  backdrop-filter: blur(2px);
  background-color: var(--media-kb-bezel-bg, var(--default-bg));
  animation: var(--media-kb-bezel-animation, vds-bezel-fade 0.35s linear 1 normal forwards);
  border-radius: var(--media-kb-bezel-border-radius, calc(var(--size) / 2));
  pointer-events: none;
}

.vds-kb-bezel:not(:has(svg)) {
  display: none !important;
}

.light .vds-kb-bezel {
  --default-bg: rgb(255 255 255 / 0.6);
}

.dark .vds-kb-bezel {
  --default-bg: rgb(10 10 10 / 0.6);
}

@media (prefers-reduced-motion) {
  :where(.vds-kb-bezel) {
    animation: none;
  }
}

:where(.vds-kb-bezel:has(slot:empty)) {
  opacity: 0;
}

:where(.vds-kb-action[data-action='seek-forward'] .vds-kb-bezel) {
  top: 45%;
  left: unset;
  right: 10%;
}

:where(.vds-kb-action[data-action='seek-backward'] .vds-kb-bezel) {
  top: 45%;
  left: 10%;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Keyboard Icon
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-kb-icon) {
  --size: var(--media-kb-icon-size, 38px);
  width: var(--size);
  height: var(--size);
}

.vds-kb-icon {
  color: var(--media-kb-icon-color, var(--default-color));
}

.light .vds-kb-icon {
  --default-color: #1a1a1a;
}

.dark .vds-kb-icon {
  --default-color: #f5f5f5;
}

@keyframes vds-bezel-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Theme
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-items) {
  --color-inverse: var(--media-menu-color-inverse, var(--default-inverse));
  --color-gray-50: var(--media-menu-color-gray-50, var(--default-gray-50));
  --color-gray-100: var(--media-menu-color-gray-100, var(--default-gray-100));
  --color-gray-200: var(--media-menu-color-gray-200, var(--default-gray-200));
  --color-gray-300: var(--media-menu-color-gray-300, var(--default-gray-300));
  --color-gray-400: var(--media-menu-color-gray-400, var(--default-gray-400));

  --text-color: var(--media-menu-text-color, var(--default-text));
  --text-secondary-color: var(--media-menu-text-secondary-color, var(--default-text-secondary));

  --root-border: var(--media-menu-border, var(--default-root-border));
}

.light .vds-menu-items {
  --default-inverse: black;
  --default-gray-50: rgb(80 80 80 / 0.15);
  --default-gray-100: rgb(80 80 80 / 0.45);
  --default-gray-200: rgb(235 235 235 / 0.6);
  --default-gray-300: rgb(238 238 238);
  --default-gray-400: rgb(250 250 250);

  --default-text: #1a1a1a;
  --default-text-secondary: #6b6b6b;

  --default-root-border: 1px solid rgb(10 10 10 / 0.1);
}

.dark .vds-menu-items {
  --default-inverse: white;
  --default-gray-50: rgb(245 245 245 / 0.1);
  --default-gray-100: rgb(245 245 245 / 0.45);
  --default-gray-200: rgb(10 10 10 / 0.6);
  --default-gray-300: rgb(27 27 27);
  --default-gray-400: rgb(10 10 10);

  --default-text: #f5f5f5;
  --default-text-secondary: #8a8a8a;

  --default-root-border: 1px solid rgb(255 255 255 / 0.1);
}

:where(.vds-menu-items) {
  --font-family: var(--media-font-family, sans-serif);
  --font-size: var(--media-menu-font-size, 14px);
  --font-weight: var(--media-menu-font-weight, 500);

  --root-bg: var(--media-menu-bg, var(--color-gray-400));
  --root-padding: var(--media-menu-padding, 12px);
  --root-border-radius: var(--media-menu-border-radius, 4px);

  --divider: var(--media-menu-divider, 1px solid var(--color-gray-50));

  --section-bg: var(--media-menu-section-bg, var(--color-gray-300));
  --section-border: var(--media-menu-section-border);
  --section-divider: var(--media-menu-section-divider, var(--divider));

  --top-bar-bg: var(--media-menu-top-bar-bg, var(--color-gray-200));
  --top-bar-divider: var(--media-menu-divider, transparent);

  --text-hint-color: var(--media-menu-hint-color, var(--text-secondary-color));

  --chapter-divider: var(--media-chapters-divider, var(--divider));
  --chapter-active-bg: var(--media-chapters-item-active-bg, var(--color-gray-50));
  --chapter-active-border-left: var(--media-chapters-item-active-border-left);

  --chapter-progress-bg: var(--media-chapters-progress-bg, var(--color-inverse));

  --chapter-time-font-size: var(--media-chapters-time-font-size, 12px);
  --chapter-time-font-weight: var(--media-chapters-time-font-weight, 500);
  --chapter-time-gap: var(--media-chapters-time-gap, 6px);

  --chapter-duration-bg: var(--media-chapters-duration-bg);

  --item-border: var(--media-menu-item-border, 0);
  --item-bg: var(--media-menu-item-bg, transparent);
  --item-hover-bg: var(--media-menu-item-hover-bg, var(--color-gray-50));
  --item-icon-size: var(--media-menu-item-icon-size, 18px);
  --item-padding: var(--media-menu-item-padding, 10px);
  --item-min-height: var(--media-menu-item-height, 40px);
  --item-border-radius: var(--media-menu-item-border-radius, 2px);

  --scrollbar-track-bg: var(--media-menu-scrollbar-track-bg, transparent);
  --scrollbar-thumb-bg: var(--media-menu-scrollbar-thumb-bg, var(--color-gray-50));
  --webkit-scrollbar-bg: var(--color-gray-400);
  --webkit-scrollbar-track-bg: var(--media-menu-scrollbar-track-bg, var(--color-gray-50));

  --checkbox-bg: var(--media-menu-checkbox-bg, var(--color-gray-100));
  --checkbox-active-bg: var(--media-menu-checkbox-bg-active, #1ba13f);
  --checkbox-handle-bg: var(--media-menu-checkbox-handle-bg, #f5f5f5);
  --checkbox-handle-border: var(--media-menu-checkbox-handle-border);

  --radio-icon-color: var(--media-menu-radio-icon-color, var(--text-color));
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu[data-root] media-menu[data-root]) {
  display: contents;
}

:where(.vds-menu) {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
}

:where(.vds-menu[data-disabled][data-root]) {
  display: none;
}

:where(.vds-menu[data-submenu]) {
  display: inline-block;
}

:where(.vds-menu-items:focus) {
  outline: none;
}

:where(.vds-menu-item:focus, .vds-radio:focus) {
  outline: none;
}

:where(
  .vds-menu-item:focus-visible,
  .vds-menu-item[data-focus],
  .vds-radio:focus-visible,
  .vds-radio[data-focus]
) {
  outline: none;
  box-shadow: var(--media-focus-ring);
}

:where(.vds-menu[data-open] .vds-tooltip-content) {
  display: none !important;
}

.vds-menu-items [data-hidden] {
  display: none !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Scroll
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

@media (prefers-reduced-motion: no-preference) {
  :where(.vds-menu-items) {
    scroll-behavior: smooth;
  }
}

:where(.vds-menu-items) {
  box-sizing: border-box;
  min-width: var(--media-menu-min-width, 280px);
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-track-bg);
  transform: translate3d(0, 0, 0);
}

:where(.vds-menu-items)::-webkit-scrollbar {
  background-color: var(--webkit-scrollbar-bg);
  border-radius: var(--root-border-radius);
  height: 6px;
  width: 5px;
}

:where(.vds-menu-items)::-webkit-scrollbar-track {
  background-color: var(--webkit-scrollbar-track-bg);
  border-radius: 4px;
}

:where(.vds-menu-items)::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb-bg);
  border-radius: 4px;
}

:where(.vds-menu-items)::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-thumb-bg);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Button
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-button) {
  outline: none;
  box-sizing: border-box;
}

:where(.vds-menu-button .vds-rotate-icon) {
  transition: transform 0.2s ease-out;
}

:where(.vds-menu-button[aria-expanded='true'] .vds-rotate-icon) {
  transform: rotate(var(--media-menu-icon-rotate-deg, 90deg));
  transition: transform 0.2s ease-in;
}

:where(.vds-menu-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion) {
  :where(.vds-menu-button .vds-rotate-icon) {
    transition: unset;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Items
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-items) {
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion) {
  :where(.vds-menu-items) {
    transition: unset;
  }
}

:where(.vds-menu-items[data-root]) {
  background-color: var(--root-bg);
  border-radius: var(--root-border-radius);
  box-shadow: var(--media-menu-box-shadow);
  backdrop-filter: blur(4px);
  height: var(--menu-height, auto);
  will-change: width, height;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  z-index: 9999999;
  box-sizing: border-box;
  max-height: var(--media-menu-max-height, 250px);
  filter: var(
    --media-menu-filter,
    drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))
  );
}

@-moz-document url-prefix() {
  :where(.vds-menu-items[data-root]) {
    backdrop-filter: none;
  }
}

.vds-menu-items[data-root] {
  border: var(--root-border);
  padding: var(--root-padding);
}

:where([data-view-type='video']) :where(.vds-menu-items[data-root]) {
  max-height: var(--media-menu-video-max-height, calc(var(--player-height) * 0.7));
}

:where(.vds-menu-items[data-transition='height']) {
  --scrollbar-thumb-bg: rgba(0, 0, 0, 0);
  pointer-events: none;
  overflow: hidden;
}

.vds-menu-button[aria-disabled='true'],
.vds-menu-item[aria-disabled='true'],
.vds-menu-item[data-disabled] {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Items Animation
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-items[data-root]) {
  --enter-transform: translateY(0px);
  --exit-transform: translateY(12px);
}

/* Mobile Popup */
:where(.vds-menu-items[data-root]:not([data-placement])) {
  --enter-transform: translateY(-24px);
}

:where(.vds-menu-items[data-root][aria-hidden='true']) {
  animation: var(--media-menu-exit-animation, vds-menu-exit 0.2s ease-out);
}

:where(.vds-menu-items[data-root][aria-hidden='false']) {
  animation: var(--media-menu-enter-animation, vds-menu-enter 0.3s ease-out);
  animation-fill-mode: forwards;
}

/* Bottom */
:where(.vds-menu-items[data-placement~='bottom']) {
  --enter-transform: translateY(0);
  --exit-transform: translateY(-12px);
}

@keyframes vds-menu-enter {
  from {
    opacity: 0;
    transform: var(--exit-transform);
  }
  to {
    opacity: 1;
    transform: var(--enter-transform);
  }
}

@keyframes vds-menu-exit {
  from {
    opacity: 1;
    transform: var(--enter-transform);
  }
  to {
    opacity: 0;
    transform: var(--exit-transform);
  }
}

@media (prefers-reduced-motion) {
  :where(.vds-menu-items) {
    animation: none;
    opacity: 1;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Portal
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(media-menu-portal) {
  display: contents;
}

:where(.vds-menu-items[data-root]:not([data-placement])) {
  position: fixed;
  left: 16px;
  right: 16px;
  top: unset;
  bottom: 0;
  max-height: var(--media-sm-menu-portrait-max-height, 40vh);
  max-height: var(--media-sm-menu-portrait-max-height, 40dvh);
}

:where(.vds-menu-items[data-root]:not([data-placement])) {
  max-width: 480px;
  margin: 0 auto;
}

@media (orientation: landscape) and (pointer: coarse) {
  :where(.vds-menu-items[data-root]:not([data-placement])) {
    max-height: var(--media-sm-menu-landscape-max-height, min(70vh, 400px));
    max-height: var(--media-sm-menu-landscape-max-height, min(70dvh, 400px));
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Submenu
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu[data-submenu] .vds-menu-button) {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

:where(.vds-menu-items[data-submenu]) {
  width: 100%;
}

:where(.vds-menu[aria-hidden='true']),
:where(.vds-menu-items[data-submenu][aria-hidden='true']) {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Item
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-item, .vds-radio) {
  position: relative;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: left;
  width: 100%;
  appearance: none;
  border: 0;
  border-radius: var(--item-border-radius);
  box-sizing: border-box;
  min-height: var(--item-min-height);
  font-size: var(--font-size);
  outline: none;
}

.vds-menu-item,
.vds-radio {
  color: var(--text-color);
  background-color: var(--item-bg);
  padding: var(--item-padding);
}

.vds-menu-item:focus-visible,
.vds-menu-item[data-focus],
.vds-radio:focus-visible,
.vds-radio[data-focus] {
  cursor: pointer;
  background-color: var(--item-hover-bg);
}

@media (hover: hover) and (pointer: fine) {
  .vds-menu-item[role]:hover,
  .vds-radio:hover {
    cursor: pointer;
    background-color: var(--item-hover-bg);
  }
}

:where(.vds-menu-items[data-submenu]) {
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
}

:where(.vds-menu-item[aria-expanded='true']) {
  font-weight: bold;
  border-radius: 0;
  border-top-left-radius: var(--item-border-radius);
  border-top-right-radius: var(--item-border-radius);
}

.vds-menu-item[aria-expanded='true'] {
  border-bottom: var(--top-bar-divider);
}

:where(.vds-menu-item[aria-expanded='true']) {
  position: sticky;
  top: calc(-1 * var(--root-padding));
  left: 0;
  width: 100%;
  z-index: 10;
  backdrop-filter: blur(4px);
  margin-bottom: 4px;
}

.vds-menu-item[aria-expanded='true'] {
  background-color: var(--top-bar-bg);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Item Parts
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-item-label) {
  flex: 1 0 0%;
  text-align: start;
}

:where(.vds-menu-item .vds-icon, .vds-radio .vds-icon) {
  --size: var(--item-icon-size);
  width: var(--size);
  height: var(--size);
  margin-right: var(--media-menu-item-icon-spacing, 6px);
}

:where(.vds-menu-open-icon, .vds-menu-close-icon) {
  --size: var(--media-menu-arrow-icon-size, 18px);
  width: var(--size);
  height: var(--size);
}

:where(.vds-menu-item-hint, .vds-menu-open-icon, .vds-radio-hint) {
  color: var(--text-hint-color);
  font-size: var(--media-menu-hint-font-size, 13px);
  font-weight: var(--media-menu-hint-font-weight, 400);
}

:where(.vds-menu-items .vds-menu-open-icon) {
  margin-right: 0;
}

:where(.vds-menu-items) :where(.vds-menu-item-hint, .vds-menu-open-icon) {
  margin-left: auto;
}

:where(.vds-menu-items) :where(.vds-menu-item-hint + .vds-menu-open-icon),
:where(.vds-menu-item-hint + media-icon .vds-menu-open-icon),
:where(.vds-menu-item-hint + slot > .vds-menu-open-icon) {
  margin-left: 2px;
}

:where(.vds-menu-item[aria-hidden='true']),
:where(.vds-menu-item[aria-expanded='true'] .vds-menu-open-icon) {
  display: none !important;
}

:where(.vds-menu-items)
  :where(.vds-menu-item[aria-disabled='true'], .vds-menu-item[data-disabled])
  :where(.vds-menu-open-icon) {
  opacity: 0;
}

:where(.vds-menu-close-icon),
:where(.vds-menu-item[aria-expanded='true'] > .vds-icon) {
  display: none !important;
}

:where(.vds-menu-item[aria-expanded='true'] .vds-menu-close-icon) {
  display: inline !important;
  margin-left: calc(-1 * var(--item-padding) / 2);
}
/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Checkbox
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-checkbox) {
  --checkbox-width: var(--media-menu-checkbox-width, 40px);
  --checkbox-height: var(--media-menu-checkbox-height, 18px);
  --checkbox-top: calc((var(--checkbox-height) - var(--checkbox-diameter)) / 2);
  --checkbox-diameter: var(
    --media-menu-checkbox-handle-diameter,
    calc(var(--checkbox-height) - 2px)
  );
  --checkbox-gap: var(--media-menu-checkbox-gap, 2.5px);
  position: relative;
  display: inline-block;
  width: var(--checkbox-width);
  height: var(--checkbox-height);
  border-radius: calc(var(--checkbox-height) / 2);
  transition: 0.3s all ease-in-out;
  box-sizing: border-box;
  cursor: pointer;
  pointer-events: auto;
}

.vds-menu-checkbox {
  background-color: var(--checkbox-bg);
}

:where(.vds-menu-checkbox:focus-visible) {
  outline: none;
  box-shadow: var(--media-focus-ring);
}

.vds-menu-checkbox[aria-checked='true'] {
  background-color: var(--checkbox-active-bg);
}

:where(.vds-menu-checkbox)::after {
  content: '';
  display: inline-block;
  width: var(--checkbox-diameter);
  height: var(--checkbox-diameter);
  border-radius: calc(var(--checkbox-diameter) / 2);
  position: absolute;
  top: var(--checkbox-top);
  transform: translateX(var(--checkbox-gap));
  transition: 0.3s all ease-in-out;
  border: var(--checkbox-handle-border);
  box-sizing: border-box;
}

.vds-menu-checkbox::after {
  background-color: var(--checkbox-handle-bg);
}

:where(.vds-menu-checkbox[aria-checked='true'])::after {
  transform: translateX(
    calc(var(--checkbox-width) - var(--checkbox-diameter) - var(--checkbox-gap))
  );
}

@media (prefers-reduced-motion: no-preference) {
  :where(.vds-menu-checkbox[data-active])::after {
    width: calc(var(--checkbox-width) - calc(var(--checkbox-gap) * 2));
  }
}

:where(.vds-menu-checkbox[aria-checked='true'][data-active])::after {
  transform: translateX(var(--checkbox-gap));
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-items .vds-slider) {
  --media-slider-track-bg: var(--media-menu-slider-track-bg, var(--color-gray-50));
  --media-slider-track-fill-bg: var(--media-menu-slider-track-fill-bg, var(--color-inverse));
  --media-slider-height: var(--media-menu-slider-height, 32px);
  --track-focus-height: var(--track-height) !important;
}

:where(.vds-menu-items .vds-slider-thumb) {
  opacity: 1 !important;
}

:where(.vds-menu-slider-item.group) {
  flex-direction: column;
}

:where(.vds-menu-slider-title) {
  margin-top: 4px;
}

:where(.vds-menu-slider-body) {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 6px;
}

:where(.vds-menu-slider-item .vds-icon) {
  margin: 0;
  color: var(--text-hint-color);
}

:where(
  .vds-menu-slider-item[data-min] .vds-icon.down,
  .vds-menu-slider-item[data-max] .vds-icon.up
) {
  color: var(--text-color);
  animation: 0.6s ease-in-out vds-slider-icon;
  transition: all 1.2s ease;
}

@keyframes vds-slider-icon {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

:where(.vds-menu-items .vds-slider-track-fill) {
  transition: opacity 0.3s ease;
}

:where(.vds-menu-items .vds-slider[data-active] .vds-slider-track-fill) {
  opacity: 0;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Radio
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-radio-group) {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.vds-radio {
  cursor: pointer;
  contain: content;
  padding-left: calc(var(--item-icon-size) + var(--item-padding));
}

.vds-radio[aria-checked='true'] {
  padding-left: 0;
}

.vds-radio .vds-icon {
  display: none;
  color: var(--radio-icon-color);
}

.vds-radio[aria-checked='true'] .vds-icon {
  display: inline-block;
  margin-left: 6px;
}

:where(.vds-radio-hint) {
  margin-left: auto;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Color Picker
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

.vds-color-picker {
  width: 32px;
  height: 32px;
  border: 0;
  background-color: transparent;
  outline: none;
}

.vds-color-picker::-webkit-color-swatch {
  border-radius: 2px;
}

.vds-color-picker::-moz-color-swatch {
  border-radius: 2px;
}

.vds-color-picker:focus-visible::-webkit-color-swatch {
  box-shadow: var(--media-focus-ring);
}

.vds-color-picker:focus-visible::-moz-color-swatch {
  box-shadow: var(--media-focus-ring);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Menu Section
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-menu-section) {
  width: 100%;
}

:where(.vds-menu-item + .vds-menu-section) {
  margin-top: 8px;
}

:where(.vds-menu-section + .vds-menu-section) {
  margin-top: 24px;
}

:where(.vds-menu-section:first-child) {
  margin-top: 8px;
}

:where(.vds-menu-section:last-child) {
  margin-bottom: 8px;
}

:where(.vds-menu-section-title),
:where(.vds-menu-slider-title) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-secondary-color);
  font-size: var(--media-menu-section-header-font-size, 12px);
  font-weight: var(--media-menu-section-header-font-weight, 500);
  padding-inline: 2px;
}

:where(.vds-menu-section-body) {
  width: 100%;
}

:where(.vds-menu-section-title + .vds-menu-section-body) {
  margin-top: var(--media-menu-section-gap, 8px);
}

.vds-menu-section-body {
  background-color: var(--section-bg);
  border: var(--section-border);
  border-radius: var(--media-menu-section-border-radius, 2px);
}

:where(.vds-menu-section:not([data-open]) .vds-menu-item:not(:last-child)) {
  border-bottom: var(--section-divider);
}

:where(.vds-menu-section-body .vds-menu:last-child > .vds-menu-item) {
  border-bottom: unset;
}

.vds-menu-section[data-open],
.vds-menu-section[data-open] > .vds-menu-section-body {
  display: contents !important;
  background-color: transparent !important;
}

.vds-menu-section[data-open] > .vds-menu-section-title,
.vds-menu-section[data-open] > .vds-menu-section-body > :not([data-open]) {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Chapters Menu
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-chapters-menu-items) {
  min-width: var(--media-chapters-min-width, var(--media-menu-min-width, 220px));
}

.vds-chapters-menu-items {
  padding: var(--media-chapters-padding, 0);
}

:where(.vds-menu-items:has(.vds-chapters-radio-group[data-thumbnails])) {
  min-width: var(--media-chapters-with-thumbnails-min-width, 300px);
}

:where(.vds-chapter-radio) {
  border-radius: 0;
}

.vds-chapter-radio {
  border-bottom: var(--chapter-divider);
  padding: var(--item-padding);
}

.vds-chapter-radio[aria-checked='true'] {
  padding-left: var(--item-padding);
}

:where(.vds-chapter-radio:last-child) {
  border-bottom: 0;
}

.vds-chapter-radio[aria-checked='true'] {
  background-color: var(--chapter-active-bg);
  border-left: var(--chapter-active-border-left);
}

:where(.vds-chapter-radio[aria-checked='true']):after {
  content: ' ';
  width: var(--progress);
  height: var(--media-chapters-progress-height, 4px);
  position: absolute;
  bottom: 0;
  left: 0;
}

.vds-chapter-radio[aria-checked='true']:after {
  border-radius: var(--media-chapters-progress-border-radius, 0);
  background-color: var(--chapter-progress-bg);
}

.vds-chapters-radio-group :where(.vds-thumbnail) {
  margin-right: var(--media-chapters-thumbnail-gap, 12px);
  flex-shrink: 0;
  min-width: var(--media-chapters-thumbnail-min-width, 100px);
  min-height: var(--media-chapters-thumbnail-min-height, 56px);
  max-width: var(--media-chapters-thumbnail-max-width, 120px);
  max-height: var(--media-chapters-thumbnail-max-height, 68px);
}

.vds-chapters-radio-group .vds-thumbnail {
  border: var(--media-chapters-thumbnail-border, 0);
}

:where(.vds-chapters-radio-group .vds-chapter-radio-label) {
  color: var(--text-secondary-color);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  white-space: nowrap;
}

:where(.vds-chapter-radio[aria-checked='true'] .vds-chapter-radio-label) {
  color: var(--text-color);
}

:where(.vds-chapters-radio-group .vds-chapter-radio-start-time) {
  display: inline-block;
  letter-spacing: var(--media-chapters-start-time-letter-spacing, 0.4px);
  border-radius: var(--media-chapters-start-time-border-radius, 2px);
  font-size: var(--chapter-time-font-size);
  font-weight: var(--chapter-time-font-weight);
  margin-top: var(--chapter-time-gap);
}

.vds-chapters-radio-group .vds-chapter-radio-start-time {
  color: var(--text-secondary-color);
  background-color: var(--section-bg);
  padding: var(--media-chapters-start-time-padding, 1px 4px);
}

:where(.vds-chapters-radio-group .vds-chapter-radio-duration) {
  color: var(--text-hint-color);
  font-size: var(--chapter-time-font-size);
  font-weight: var(--chapter-time-font-weight);
  margin-top: var(--chapter-time-gap);
}

.vds-chapters-radio-group .vds-chapter-radio-duration {
  background-color: var(--chapter-duration-bg);
  border-radius: var(--media-chapters-duration-border-radius, 2px);
}

.vds-chapters-radio-group:not([data-thumbnails]) :where(.vds-thumbnail, media-thumbnail) {
  display: none;
}

:where(.vds-chapter-radio-content) {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
}

:where(.vds-chapters-radio-group:not([data-thumbnails]) .vds-chapter-radio-content) {
  width: 100%;
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

:where(.vds-chapters-radio-group:not([data-thumbnails]) .vds-chapter-radio-start-time) {
  margin-top: 0;
  margin-left: auto;
}

:where(.vds-chapters-radio-group:not([data-thumbnails]) .vds-chapter-radio-duration) {
  margin-top: 4px;
  flex-basis: 100%;
}

.vds-menu-items[data-keyboard] .vds-chapters-radio-group:focus-within {
  padding: var(--media-chapters-focus-padding, 4px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Poster
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-poster) {
  display: block;
  contain: content;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  border: 0;
  pointer-events: none;
  box-sizing: border-box;
  transition: opacity 0.2s ease-out;
  background-color: var(--media-poster-bg, black);
}

:where(.vds-poster img) {
  object-fit: inherit;
  object-position: inherit;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}

.vds-poster :where(img) {
  border: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:where(.vds-poster[data-hidden]) {
  display: none;
}

:where(.vds-poster[data-visible]) {
  opacity: 1;
}

.vds-poster:not(:defined),
.vds-poster img:not([src]) {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Sliders
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider) {
  --width: var(--media-slider-width, 100%);
  --height: var(--media-slider-height, 48px);

  --thumb-size: var(--media-slider-thumb-size, 15px);
  --thumb-focus-size: var(--media-slider-focused-thumb-size, calc(var(--thumb-size) * 1.1));

  --track-width: var(--media-slider-track-width, 100%);
  --track-height: var(--media-slider-track-height, 5px);
  --track-focus-width: var(--media-slider-focused-track-width, var(--track-width));
  --track-focus-height: var(--media-slider-focused-track-height, calc(var(--track-height) * 1.25));

  display: inline-flex;
  align-items: center;
  width: var(--width);
  height: var(--height);
  /** Prevent thumb flowing out of slider. */
  margin: 0 calc(var(--thumb-size) / 2);
  position: relative;
  contain: layout style;
  outline: none;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:where(.vds-slider[aria-hidden='true']) {
  display: none !important;
}

:where(.vds-slider[aria-disabled='true']) {
  cursor: unset;
}

:where(.vds-slider:focus) {
  outline: none;
}

:where(.vds-slider:not([data-chapters])[data-focus], .vds-slider:not([data-chapters]):focus-visible)
  :where(.vds-slider-track) {
  box-shadow: var(--media-focus-ring);
}

:where(.vds-slider .vds-slider-track) {
  z-index: 0;
  position: absolute;
  width: var(--track-width);
  height: var(--track-height);
  top: 50%;
  left: 0;
  border-radius: var(--media-slider-track-border-radius, 2px);
  transform: translateY(-50%) translateZ(0);
  background-color: var(--media-slider-track-bg, rgb(255 255 255 / 0.3));
  contain: strict;
}

:where(.vds-slider[data-focus], .vds-slider:focus-visible) :where(.vds-slider-track) {
  outline-offset: var(--thumb-size);
}

:where(.vds-slider:not([data-chapters])[data-active] .vds-slider-track) {
  width: var(--track-focus-width);
  height: var(--track-focus-height);
}

:where(.vds-slider .vds-slider-track-fill) {
  z-index: 2; /** above track and track progress. */
  background-color: var(--media-slider-track-fill-bg, var(--media-brand));
  width: var(--slider-fill, 0%);
  will-change: width;
}

:where(.vds-slider .vds-slider-thumb) {
  position: absolute;
  top: 50%;
  left: var(--slider-fill);
  opacity: 0;
  contain: layout size style;
  width: var(--thumb-size);
  height: var(--thumb-size);
  border: var(--media-slider-thumb-border, 1px solid #cacaca);
  border-radius: var(--media-slider-thumb-border-radius, 9999px);
  background-color: var(--media-slider-thumb-bg, #fff);
  transform: translate(-50%, -50%) translateZ(0);
  transition: opacity 0.15s ease-in;
  pointer-events: none;
  will-change: left;
  z-index: 2; /** above track fill. */
}

:where(.vds-slider[data-dragging], .vds-slider[data-focus], .vds-slider:focus-visible)
  :where(.vds-slider-thumb) {
  box-shadow: var(--media-slider-focused-thumb-shadow, 0 0 0 4px hsla(0, 0%, 100%, 0.4));
}

:where(.vds-slider[data-active] .vds-slider-thumb) {
  opacity: 1;
  transition: var(--media-slider-thumb-transition, opacity 0.2s ease-in, box-shadow 0.2s ease);
}

:where(.vds-slider[data-dragging] .vds-slider-thumb) {
  width: var(--thumb-focus-size);
  height: var(--thumb-focus-size);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider Value
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider-value) {
  display: inline-block;
  contain: content;
  font-size: 14px;
  font-family: var(--media-font-family, sans-serif);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider Thumbnail
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider-thumbnail) {
  display: block;
  contain: content;
  box-sizing: border-box;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider Video
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider-video) {
  background-color: black;
  box-sizing: border-box;
  contain: content;
  display: inline-block;
  border: var(--media-thumbnail-border, 1px solid white);
}

:where(.vds-slider-video video) {
  display: block;
  height: auto;
  width: 156px;
}

/* Temporarily hide video while loading. */
:where(.vds-slider-video[data-loading]) {
  opacity: 0;
}

/* Hide video if it fails to load. */
:where(.vds-slider-video[data-hidden], .vds-slider-video[data-hidden] video) {
  display: none;
  width: 0px;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Previews
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider .vds-slider-preview) {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  background-color: var(--media-slider-preview-bg);
  border-radius: var(--media-slider-preview-border-radius, 2px);
  pointer-events: none;
  transition: opacity 0.2s ease-out;
  will-change: left, opacity;
  contain: layout paint style;
}

:where(.vds-slider-preview[data-visible]) {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.vds-slider-value {
  background-color: var(--media-slider-value-bg, black);
  border-radius: var(--media-slider-value-border-radius, 2px);
  border: var(--media-slider-value-border);
  color: var(--media-slider-value-color, white);
  padding: var(--media-slider-value-padding, 1px 10px);
}

:where(
    .vds-slider-video:not([data-hidden]) + .vds-slider-chapter-title,
    .vds-slider-thumbnail:not([data-hidden]) + .vds-slider-chapter-title
  ) {
  margin-top: var(--media-slider-chapter-title-gap, 6px);
}

:where(
    .vds-slider-video:not([data-hidden]) + .vds-slider-value,
    .vds-slider-thumbnail:not([data-hidden]) + .vds-slider-value,
    .vds-slider-chapter-title + .vds-slider-value
  ) {
  margin-top: var(--media-slider-value-gap, 2px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Vertical Sliders
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider[aria-orientation='vertical']) {
  --width: var(--media-slider-width, 48px);
  --height: var(--media-slider-height, 100%);

  --track-width: var(--media-slider-track-width, 4px);
  --track-height: var(--media-slider-track-height, 100%);
  --track-focus-width: var(--media-slider-focused-track-width, calc(var(--track-width) * 1.25));
  --track-focus-height: var(--media-slider-focused-track-height, var(--track-height));

  /** Prevent thumb flowing out of slider. */
  margin: calc(var(--thumb-size) / 2) 0;
}

:where(.vds-slider[aria-orientation='vertical'] .vds-slider-track) {
  top: unset;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
}

:where(.vds-slider[aria-orientation='vertical'] .vds-slider-track-fill) {
  width: var(--track-width);
  height: var(--slider-fill);
  will-change: height;
  transform: translateX(-50%) translateZ(0);
}

:where(.vds-slider[aria-orientation='vertical'] .vds-slider-progress) {
  top: unset;
  bottom: 0;
  width: var(--track-width);
  height: var(--slider-progress, 0%);
  will-change: height;
}

:where(.vds-slider[aria-orientation='vertical'] .vds-slider-thumb) {
  top: unset;
  bottom: var(--slider-fill);
  left: 50%;
  will-change: bottom;
  transform: translate(-50%, 50%) translateZ(0);
}

:where(.vds-slider[aria-orientation='vertical'] .vds-slider-preview) {
  will-change: bottom, opacity;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Time Slider
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-live] .vds-time-slider .vds-slider-track-fill) {
  background-color: var(--media-slider-track-fill-live-bg, #dc2626);
}

:where(.vds-time-slider .vds-slider-progress) {
  z-index: 1; /** above track. */
  left: 0;
  width: var(--slider-progress, 0%);
  will-change: width;
  background-color: var(--media-slider-track-progress-bg, rgb(255 255 255 / 0.5));
}

:where([data-media-player]:not([data-can-play]) .vds-time-slider .vds-slider-value) {
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider Steps
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-slider-steps) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:where(.vds-slider-step) {
  width: var(--media-slider-step-width, 2.5px);
  height: calc(var(--track-height) + 1px);
  background-color: var(--media-slider-step-color, rgb(124, 124, 124));
  opacity: 0;
  transition: opacity 0.3s ease;
}

:where(.vds-slider[data-active] .vds-slider-step) {
  opacity: 1;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Slider Chapters
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-time-slider .vds-slider-chapters) {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  contain: layout style;
  border-radius: var(--media-slider-track-border-radius, 1px);
}

:where(.vds-slider[data-focus], .vds-slider:focus-visible) :where(.vds-slider-chapters) {
  box-shadow: var(--media-focus-ring);
  height: var(--track-height);
}

:where(.vds-time-slider .vds-slider-chapter) {
  margin-right: 2px;
}

:where(.vds-time-slider .vds-slider-chapter:last-child) {
  margin-right: 0;
}

:where(.vds-time-slider .vds-slider-chapter) {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  will-change: height, transform;
  contain: layout style;
  border-radius: var(--media-slider-track-border-radius, 1px);
}

:where(.vds-time-slider .vds-slider-chapter .vds-slider-track-fill) {
  width: var(--chapter-fill, 0%);
  will-change: width;
}

:where(.vds-time-slider .vds-slider-chapter .vds-slider-progress) {
  width: var(--chapter-progress, 0%);
  will-change: width;
}

@media (hover: hover) and (pointer: fine) {
  :where(.vds-time-slider:hover .vds-slider-chapters) {
    contain: strict;
  }

  :where(.vds-time-slider .vds-slider-chapter:hover:not(:only-of-type)) {
    transform: var(--media-slider-chapter-hover-transform, scaleY(2));
    transition: var(
      --media-slider-chapter-hover-transition,
      transform 0.1s cubic-bezier(0.4, 0, 1, 1)
    );
  }
}

:where(.vds-time-slider .vds-slider-chapter-title) {
  font-family: var(--media-font-family, sans-serif);
  font-size: var(--media-slider-chapter-title-font-size, 14px);
  color: var(--media-slider-chapter-title-color, #f5f5f5);
  background-color: var(--media-slider-chapter-title-bg);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Thumbnail
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-thumbnail) {
  --min-width: var(--media-thumbnail-min-width, 140px);
  --max-width: var(--media-thumbnail-max-width, 180px);
  --aspect-ratio: var(--media-thumbnail-aspect-ratio, var(--thumbnail-aspect-ratio));
  display: block;
  width: var(--thumbnail-width);
  height: var(--thumbnail-height);
  background-color: var(--media-thumbnail-bg, black);
  contain: strict;
  overflow: hidden;
  box-sizing: border-box;
  min-width: var(--min-width);
  min-height: var(--media-thumbnail-min-height, calc(var(--min-width) / var(--aspect-ratio)));
  max-width: var(--max-width);
  max-height: var(--media-thumbnail-max-height, calc(var(--max-width) / var(--aspect-ratio)));
}

.vds-thumbnail {
  border: var(--media-thumbnail-border, 1px solid white);
}

:where(.vds-thumbnail img) {
  min-width: unset !important;
  max-width: unset !important;
  will-change: width, height, transform;
}

:where(.vds-thumbnail[data-loading] img) {
  opacity: 0;
}

:where(.vds-thumbnail[aria-hidden='true']) {
  display: none !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Time
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-time-group) {
  display: flex;
  align-items: center;
}

.vds-time-divider {
  margin: 0 var(--media-time-divider-gap, 2.5px);
  color: var(--media-time-divider-color, #e0e0e0);
}

:where(.vds-time) {
  display: inline-block;
  contain: content;
  font-size: var(--media-time-font-size, 15px);
  font-weight: var(--media-time-font-weight, 400);
  font-family: var(--media-font-family, sans-serif);
  border-radius: var(--media-time-border-radius, 2px);
  letter-spacing: var(--media-time-letter-spacing, 0.025em);
}

.vds-time {
  outline: 0;
  color: var(--media-time-color, var(--default-color));
  background-color: var(--media-time-bg);
  border: var(--media-time-border);
  padding: var(--media-time-padding, 2px);
}

:where(.vds-time:focus-visible) {
  box-shadow: var(--media-focus-ring);
}

.light .vds-time {
  --default-color: rgb(10 10 10);
}

.dark .vds-time {
  --default-color: #f5f5f5;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Tooltips
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-tooltip, media-tooltip) {
  display: contents;
}

:where(.vds-tooltip-content) {
  display: inline-block;
  box-sizing: border-box;
  font-family: var(--media-font-family, sans-serif);
  font-size: var(--media-tooltip-font-size, 13px);
  font-weight: var(--media-tooltip-font-weight, 500);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  will-change: transform, opacity;
}

.vds-tooltip-content {
  border-radius: var(--media-tooltip-border-radius, 4px);
  background-color: var(--media-tooltip-bg-color, var(--default-bg));
  border: var(--media-tooltip-border, var(--default-border));
  color: var(--media-tooltip-color, var(--default-color));
  padding: var(--media-tooltip-padding, 4px 8px);
}

.light .vds-tooltip-content {
  --default-color: #1a1a1a;
  --default-bg: white;
  --default-border: 1px solid rgb(0 0 0 / 0.2);
}

.dark .vds-tooltip-content {
  --default-color: #f5f5f5;
  --default-bg: black;
  --default-border: 1px solid rgb(255 255 255 / 0.1);
}

:where(
  .vds-menu .vds-menu-button[role="button"][data-pressed] .vds-tooltip-content
) {
  opacity: 0;
  display: none;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Tooltip Animation
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-tooltip-content) {
  --enter-transform: translateY(0px) scale(1);
  --exit-transform: translateY(12px) scale(0.8);
}

:where(.vds-tooltip-content:not([data-visible])) {
  animation: var(
    --media-tooltip-exit-animation,
    vds-tooltip-exit 0.2s ease-out
  );
}

:where(.vds-tooltip-content[data-visible]) {
  animation: var(
    --media-tooltip-enter-animation,
    vds-tooltip-enter 0.2s ease-in
  );
  animation-fill-mode: forwards;
}

/* Bottom */
:where(.vds-tooltip-content[data-placement~="bottom"]) {
  --enter-transform: translateY(0) scale(1);
  --exit-transform: translateY(-12px) scale(0.8);
}

/* Left */
:where(.vds-tooltip-content[data-placement~="left"]) {
  --enter-transform: translateX(0) scale(1);
  --exit-transform: translateX(12px) scale(0.8);
}

/* Right */
:where(.vds-tooltip-content[data-placement~="right"]) {
  --enter-transform: translateX(0) scale(1);
  --exit-transform: translateX(-12px) scale(0.8);
}

@keyframes vds-tooltip-enter {
  from {
    opacity: 0;
    transform: var(--exit-transform);
  }
  to {
    opacity: 1;
    transform: var(--enter-transform);
  }
}

@keyframes vds-tooltip-exit {
  from {
    opacity: 1;
    transform: var(--enter-transform);
  }
  to {
    opacity: 0;
    transform: var(--exit-transform);
  }
}

@media (prefers-reduced-motion) {
  :where(.vds-tooltip-content) {
    animation: none;
  }

  :where(.vds-tooltip-content[data-visible]) {
    opacity: 1;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * States
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

/* Play Button */
[data-media-player]:not([data-paused]) .vds-play-tooltip-text,
[data-media-player][data-paused] .vds-pause-tooltip-text,
/* PIP Button */
[data-media-player][data-pip] .vds-pip-enter-tooltip-text,
[data-media-player]:not([data-pip]) .vds-pip-exit-tooltip-text,
/* Fullscreen Button */
[data-media-player][data-fullscreen] .vds-fs-enter-tooltip-text,
[data-media-player]:not([data-fullscreen]) .vds-fs-exit-tooltip-text,
/* Caption Button */
[data-media-player]:not([data-captions]) .vds-cc-on-tooltip-text,
[data-media-player][data-captions] .vds-cc-off-tooltip-text,
/* Mute Button */
[data-media-player]:not([data-muted]) .vds-mute-tooltip-text,
[data-media-player][data-muted] .vds-unmute-tooltip-text {
  display: none;
}
/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Video Layout
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

[data-media-player] .vds-video-layout:not([data-match]) {
  display: none !important;
}

[data-media-player][data-layout='video'] {
  background-color: var(--video-bg, black);
}

[data-media-player][data-layout='video']:not([data-fullscreen]) {
  border-radius: var(--video-border-radius, 6px);
  border: var(--video-border, 1px solid rgb(255 255 255 / 0.1));
}

:where(.vds-video-layout) {
  --media-brand: var(--video-brand, #f5f5f5);
  --media-font-family: var(--video-font-family, sans-serif);
  --media-controls-color: var(--video-controls-color, #f5f5f5);
  --media-tooltip-y-offset: 6px;
  --media-menu-y-offset: 6px;
  --media-focus-ring-color: var(--video-focus-ring-color, rgb(78 156 246));
  --media-focus-ring: var(--video-focus-ring, 0 0 0 3px var(--media-focus-ring-color));
  color: var(--video-controls-color, #f5f5f5);
  display: contents;
}

:where([data-media-player][data-focus]:not([data-playing]) .vds-video-layout .vds-controls) {
  border-radius: var(--video-border-radius, 6px);
  box-shadow: var(--media-focus-ring);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Controls
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-controls[data-visible]) {
  border-radius: var(--video-border-radius, 6px);
  background-image: linear-gradient(
    to top,
    rgb(0 0 0 / 0.6),
    10%,
    transparent,
    95%,
    rgb(0 0 0 / 0.3)
  );
}

.vds-video-layout .vds-controls-group {
  align-items: center;
  display: flex;
  pointer-events: auto;
  z-index: 0;
  padding: 4px 6px;
}

.vds-video-layout .vds-controls-group:first-child {
  z-index: 50;
}

/* second last group */
.vds-video-layout .vds-controls-group:nth-last-child(2) {
  padding: 0 12px;
  z-index: 11;
  margin-bottom: -16px;
}

.vds-video-layout:not([data-sm]) .vds-controls-group:last-child {
  --media-menu-y-offset: 26px;
  --media-tooltip-y-offset: 26px;
  --media-slider-preview-offset: 26px;
  z-index: 10;
}

:where(.vds-video-layout .vds-button) {
  margin-right: 2.5px;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Title
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout[data-sm] .vds-chapter-title) {
  font-size: var(--video-sm-chapter-title-font-size, 15px);
}

:where([data-fullscreen] .vds-video-layout .vds-chapter-title) {
  font-size: var(--video-fullscreen-chapter-title-font-size, 16px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Buttons
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout:not([data-sm]) .vds-mute-button) {
  margin-left: -2.5px;
  margin-right: -5px;
}

:where(.vds-video-layout[data-sm]) {
  --media-button-size: var(--video-sm-button-size, 36px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Sliders
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-time-slider) {
  --media-slider-height: 45px;
  flex-grow: 0;
}

:where(.vds-video-layout .vds-slider-thumbnail) {
  --media-thumbnail-border: var(--video-slider-thumbnail-border, 1px solid #f5f5f5);
  border-radius: var(--video-slider-thumbnail-border-radius, 2px);
}

.vds-video-layout .vds-time-slider .vds-slider-value {
  background-color: var(--video-time-bg, unset);
  text-shadow:
    -1px -1px 0 #333333,
    1px -1px 0 #333333,
    -1px 1px 0 #333333,
    1px 1px 0 #333333;
}

:where(.vds-video-layout[data-sm] .vds-time) {
  text-shadow: unset;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Large Layout Volume Slider
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout[data-lg] .vds-volume) {
  --gap: var(--video-volume-gap, 10px);
  display: contents;
}

:where(.vds-video-layout[data-lg] .vds-volume-popup) {
  display: contents;
}

:where(.vds-video-layout[data-lg] .vds-volume-slider) {
  margin: 0;
  max-width: 0;
  transition: all 0.15s ease;
}

:where(.vds-video-layout[data-lg] .vds-volume[data-active] .vds-volume-slider),
:where(.vds-video-layout[data-lg] .vds-volume:has([data-active]) .vds-volume-slider) {
  margin-left: var(--gap);
  opacity: 1;
  visibility: visible;
  max-width: var(--video-volume-slider-max-width, 72px);
}

/* safe area. */
.vds-video-layout[data-lg] .vds-volume-slider::after {
  content: '';
  position: fixed;
  top: 0;
  left: calc(-1 * var(--gap));
  width: var(--gap);
  height: 100%;
  z-index: 1;
  pointer-events: auto;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Small Layout Volume Slider
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout[data-sm] .vds-volume) {
  --media-slider-height: var(--video-volume-height, 96px);
  --media-slider-preview-offset: calc(-200% - 6px);
  --gap: var(--video-volume-gap, 10px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

:where(.vds-video-layout[data-sm] .vds-volume-popup) {
  display: block;
  position: absolute;
  top: calc(100% + var(--gap));
  left: 50%;
  opacity: 0;
  transform: translateX(-50%);
  transition:
    opacity 150ms ease-out,
    visibility 150ms ease-out;
  border-radius: var(--video-volume-border-radius, 8px);
  filter: var(--media-volume-filter, drop-shadow(0 1px 1px rgb(0 0 0 / 0.05)));
  visibility: hidden;
}

/* safe area. */
.vds-video-layout[data-sm] .vds-mute-button::after {
  content: '';
  position: fixed;
  bottom: calc(-1 * var(--gap));
  right: 0;
  width: 100%;
  height: var(--gap);
  z-index: 1;
  pointer-events: auto;
}

.vds-video-layout .vds-volume-popup {
  background-color: var(--video-volume-bg, var(--media-menu-bg, var(--default-bg)));
  border: var(--video-volume-border, var(--default-border));
}

.light .vds-video-layout .vds-volume-popup,
.vds-video-layout.light .vds-volume-popup {
  --default-bg: rgb(250 250 250);
  --default-border: 1px solid rgb(10 10 10 / 0.1);
}

.dark .vds-video-layout .vds-volume-popup,
.vds-video-layout.dark .vds-volume-popup {
  --default-bg: rgb(10 10 10);
  --default-border: 1px solid rgb(255 255 255 / 0.1);
}

:where(.vds-video-layout[data-sm] .vds-volume[data-active] .vds-volume-popup),
:where(.vds-video-layout[data-sm] .vds-volume:has([data-active]) .vds-volume-popup) {
  transition:
    opacity 150ms ease-in,
    visibility 150ms ease-in;
  opacity: 1;
  visibility: visible;
}

:where(.vds-video-layout[data-sm] .vds-volume[data-active] .vds-tooltip-content) {
  display: none !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Time
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-time[data-type='current']) {
  margin-right: 2px;
}

:where(.vds-video-layout .vds-time[data-type='current'][remainder]) {
  margin-left: 2px;
}

.vds-video-layout .vds-time {
  --default-color: #f5f5f5 !important;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Captions
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-preview] .vds-video-layout .vds-captions) {
  opacity: 0;
}

:where(.vds-video-layout .vds-captions) {
  z-index: 10;
  transition: var(--video-captions-transition, bottom 0.3s ease-in-out);
}

@media (min-width: 980px) {
  :where([data-fullscreen] .vds-video-layout .vds-captions) {
    bottom: var(--video-lg-fullscreen-captions-offset, 54px);
  }
}

:where([data-media-player][data-controls] .vds-video-layout .vds-captions) {
  bottom: var(--video-captions-offset, 78px);
}

:where([data-media-player][data-controls] .vds-video-layout[data-sm] .vds-captions) {
  bottom: var(--video-sm-captions-offset, 48px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Chapters
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-time-slider .vds-slider-chapter-title) {
  width: 100%;
  text-align: center;
  text-shadow:
    -1px -1px 0 #212121,
    1px -1px 0 #212121,
    -1px 1px 0 #212121,
    1px 1px 0 #212121;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Gestures
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-gesture) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

:where(.vds-video-layout .vds-gesture[action='seek:-10']) {
  width: var(--video-gesture-seek-width, 20%);
  z-index: 1;
}

:where(.vds-video-layout .vds-gesture[action='seek:10']) {
  left: unset;
  right: 0;
  width: var(--video-gesture-seek-width, 20%);
  z-index: 1;
}

@media (pointer: coarse) {
  :where(.vds-video-layout .vds-gesture[action='toggle:paused']) {
    display: none;
  }
}

@media not (pointer: coarse) {
  :where([data-media-player] .vds-video-layout .vds-gesture[action='toggle:controls']) {
    display: none;
  }
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Live Button
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-live-button) {
  margin-left: 12px;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Time Group
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout:not([data-sm]) .vds-time-group) {
  margin-left: 10px;
}

:where(.vds-video-layout[data-sm] .vds-time) {
  font-size: var(--video-sm-time-font-size, 14px);
}

:where([data-fullscreen] .vds-video-layout .vds-time) {
  font-size: var(--video-fullscreen-time-font-size, 16px);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Load Container
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout .vds-load-container) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 99;
}

:where(
    [data-media-player][data-load='play']:not([data-started])
      .vds-video-layout[data-match]
      .vds-load-container
  ) {
  display: flex;
}

:where(.vds-video-layout .vds-load-container .vds-play-button) {
  --size: var(--video-load-button-size, 56px);
  --color: var(--video-load-button-color, rgb(0 0 0 / 0.8));
  --bg-color: var(--video-load-button-bg, var(--media-brand));

  --media-button-hover-transform: 0;
  --media-button-border: var(--video-load-button-border, var(--color));
  --media-button-hover-bg: var(--video-load-button-bg, var(--media-brand));

  width: var(--size);
  height: var(--size);
  pointer-events: auto;
  margin-bottom: 2px;
  overflow: hidden;
}

.vds-video-layout .vds-load-container .vds-play-button {
  border-radius: var(--video-load-button-border-radius, 100%);
  color: var(--color);
}

.vds-video-layout .vds-load-container .vds-play-button {
  background-color: var(--bg-color);
}

:where(.vds-video-layout[data-sm] .vds-load-container .vds-play-button) {
  --size: var(--video-sm-load-button-size, 48px);
  --media-button-hover-transform: translateY(0%);
  width: var(--size);
  height: var(--size);
  transform: translateY(0%);
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Small Layout
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where(.vds-video-layout[data-sm] .vds-controls-group:nth-last-child(2)) {
  pointer-events: none;
}

:where(.vds-video-layout[data-sm] .vds-controls-group:last-child) {
  z-index: 2;
  margin-top: -2.5px;
  margin-bottom: -6px;
}

:where([data-fullscreen] .vds-video-layout[data-sm] .vds-controls-group:last-child) {
  margin-bottom: 0;
}

.vds-video-layout[data-sm] .vds-controls-group {
  padding: 2px;
}

:where(.vds-video-layout[data-sm])
  :where(
    .vds-button,
    .vds-slider:not(.vds-time-slider),
    .vds-time,
    .vds-time-divider,
    .vds-chapter-title
  ) {
  transition: opacity 0.15s ease;
}

:where([data-media-player]:not([data-started]) .vds-video-layout[data-sm])
  :where(.vds-button .vds-slider, .vds-time-group) {
  opacity: 0;
  visibility: hidden;
}

:where(.vds-video-layout[data-sm] .vds-time-slider) {
  transition: transform 0.1s linear;
}

@media (pointer: coarse) {
  :where([data-preview] .vds-video-layout:not([data-no-scrub-gesture]))
    :where(
      .vds-button,
      .vds-slider:not(.vds-time-slider),
      .vds-time,
      .vds-chapter-title,
      .vds-time-divider,
      .vds-captions,
      .vds-live-button
    ) {
    opacity: 0;
  }

  :where([data-preview] .vds-video-layout:not([data-no-scrub-gesture]) .vds-time-slider) {
    --track-height: var(--video-sm-slider-focus-track-height, 12px);
    transform: translateY(-6px);
    transition: transform 0.1s linear;
  }
}

:where(.vds-video-layout[data-sm] .vds-controls .vds-play-button) {
  --size: var(--video-sm-play-button-size, 45px);
  --media-button-hover-transform: translateY(25%);
  width: var(--size);
  height: var(--size);
  transform: translateY(25%);
  border-radius: 100%;
  pointer-events: auto;
  margin-bottom: 2px;
  overflow: hidden;
}

.vds-video-layout[data-sm] .vds-controls .vds-play-button {
  background-color: var(--video-sm-play-button-bg, rgba(0 0 0 / 0.6));
}

:where(
    [data-media-player]:not([data-started])
      .vds-video-layout[data-sm]
      .vds-controls-group:not(:nth-child(3))
  ) {
  opacity: 0;
  visibility: hidden;
}

/* center big play button inside buffering indicator. */
:where(.vds-video-layout[data-sm] .vds-buffering-indicator) {
  --media-buffering-size: 64px;
  transform: translate(-2px, -4px);
}

:where(.vds-video-layout .vds-start-duration .vds-time) {
  position: absolute;
  right: 8px;
  bottom: 8px;
  margin-right: 8px;
  margin-bottom: 8px;
  z-index: 10;
}

.vds-video-layout .vds-start-duration .vds-time {
  padding: var(--video-sm-start-duration-padding, 3px 6px);
  color: var(--video-sm-start-duration-color, var(--video-controls-color));
  background-color: var(--video-sm-start-duration-bg, rgba(0 0 0 / 0.64));
}

:where([data-started] .vds-video-layout .vds-start-duration .vds-time) {
  display: none;
}

:where([data-media-player]:not([data-can-play]) .vds-video-layout .vds-start-duration .vds-time) {
  opacity: 0;
}

:where(.vds-video-layout[data-sm] .vds-time[data-type='current']) {
  margin-left: 8px;
}

/*
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * Fullscreen
 * ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */

:where([data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) {
  margin-bottom: -16px;
}

@media (orientation: portrait) {
  :where([data-fullscreen] .vds-video-layout .vds-captions) {
    bottom: 30lvh;
    bottom: 10dvh;
  }
}

@media (orientation: landscape) {
  :where([data-fullscreen] .vds-video-layout .vds-controls-group:nth-last-child(2)) {
    margin-bottom: -12px;
  }
}
.video-nav-container {
  max-height: 65vh;
  overflow-y: auto;
}

.video-nav-container::-webkit-scrollbar {
  width: 1em;
}

.video-nav-container::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: var(--bs-border-color, rgba(0, 0, 0, 0.05));
}

.video-nav-container::-webkit-scrollbar-track {
  border-radius: 10px;
}

.iframe-h5p {
  border: none;
  min-height: 600px;
  width: 100%;
}
@media (min-width: 2000px) {
  .iframe-h5p {
    min-height: 1000px;
  }
}

[data-preview] .vds-video-layout .vds-captions {
  opacity: 1 !important;
}

.vds-video-layout[data-sm] .vds-controls .gm-video-nav-button {
  --size: var(--video-sm-play-button-size, 45px);
  width: var(--size);
  height: var(--size);
  margin-inline: 16px;
  transform: translateY(25%);
  overflow: hidden;
  pointer-events: auto;
  background-color: var(--video-sm-play-button-bg, rgba(0, 0, 0, 0.6));
}@media screen {
  #p-incorrect,
  #p-correct {
    display: none;
  }
  .test-runner-container {
    min-height: 500px;
  }
  .gauge-container {
    width: 150px;
    height: 150px;
  }
  .gauge #svg circle {
    stroke-dashoffset: 0;
    stroke: #ddd;
    stroke-width: 6px;
  }
  .high-score {
    transform: translateX(20px);
    color: goldenrod;
  }
  .results-passing-icon {
    color: #4baa68;
    transform: translateX(-20px);
  }
  .test-tab-row .test-tab {
    background: #ddd;
    width: 125px;
  }
  .test-tab-row {
    /* width */
  }
  .test-tab-row ::-webkit-scrollbar {
    width: 10px;
  }
  .test-tab-row {
    /* Track */
  }
  .test-tab-row ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  .test-tab-row {
    /* Handle */
  }
  .test-tab-row ::-webkit-scrollbar-thumb {
    background: #888;
  }
  .test-tab-row {
    /* Handle on hover */
  }
  .test-tab-row ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  .test-tab-row .test-tab:hover {
    cursor: pointer;
  }
  .test-tab-row .selected.test-tab {
    background: white;
    border: 1px solid #ddd;
    border-bottom: none;
  }
  .test-tab-row .test-tab-buffer {
    border-bottom: 1px solid #ddd;
    width: 100%;
  }
  .test-questions-table {
    border: 1px solid rgb(32, 60, 81);
  }
  .test-questions-table td,
  .test-questions-table th {
    padding: 8px 10px;
  }
  .test-help-text {
    padding: 50px;
    padding-top: 200px;
  }
  .modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
    opacity: 0.4;
  }
  .button-wrap {
    margin-top: 25%;
    float: right;
  }
}.image-viewer-trigger {
  background: none;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: inline-block;
}
.image-viewer-trigger > img {
  display: block;
  max-width: 100%;
}

.image-viewer-dialog {
  max-width: 90vw;
  width: fit-content;
}
.image-viewer-dialog .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.image-viewer-body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-viewer-img {
  max-width: 90vw;
  max-height: 90vh;
  transition: transform 0.1s ease-out;
  cursor: zoom-in;
}

.image-viewer-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  background: rgba(var(--bs-black-rgb), 0.6);
  color: var(--bs-white);
  border: 0;
  border-radius: 50%;
  width: 2.25rem;
  height: 2.25rem;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-viewer-close:focus-visible {
  outline: 2px solid var(--bs-white);
  outline-offset: 2px;
}.grid-item-div {
  padding: 0px 0.5px;
  background: #060606;
  overflow: auto;
}

i.fa-play {
  color: #000000;
}

.ide-sidebar {
  min-width: 0;
}

.icons-container {
  display: none;
  flex: 0 0 44px;
  width: 44px;
  padding-top: 6px !important;
  text-align: center;
  background-color: var(--bg-theme-item-secondary, rgba(0, 0, 0, 0.03));
}
.icons-container.no-padding {
  padding: 0px;
}
.icons-container > .no-border {
  border: none !important;
  padding: 6px 0px;
  width: 100%;
}
.icons-container > .no-border:hover {
  background-color: transparent !important;
  color: unset !important;
}
.icons-container > .no-border > .ide-icon {
  font-size: 1.2em;
}

i.ide-icon {
  color: var(--text-strong) !important;
}

.explorer-container {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  padding: 10px 0px 10px 8px;
  overflow-x: hidden;
  border-right: 1px solid var(--text-weak, rgba(0, 0, 0, 0.1));
}
.explorer-container .explorer-title {
  display: block;
  padding-left: 8px;
  color: var(--text-weak, #6c757d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.explorer-container .project-folder {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-left: 4px;
}
.explorer-container .project-folder > i {
  margin-right: 6px;
  color: var(--text-strong);
  font-size: 11px;
}
.explorer-container .project-folder > span {
  color: var(--text-strong);
  font-size: 13px;
  font-weight: 600;
}

.explorer-container .file-tree {
  margin-top: 4px;
  user-select: none;
}
.explorer-container .file-tree .tree-folder,
.explorer-container .file-tree .tree-file {
  align-items: center;
  border-left: 2px solid transparent;
  color: var(--text-strong);
  cursor: pointer;
  display: flex;
  height: 24px;
  padding-right: 4px;
}
.explorer-container .file-tree .tree-folder:hover,
.explorer-container .file-tree .tree-file:hover {
  background-color: var(--bg-theme-item-secondary, rgba(0, 0, 0, 0.05));
}
.explorer-container .file-tree .tree-folder > i,
.explorer-container .file-tree .tree-file > i {
  flex: 0 0 16px;
  width: 16px;
  font-size: 10px;
  text-align: center;
}
.explorer-container .file-tree .tree-folder .tree-label,
.explorer-container .file-tree .tree-file .tree-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.explorer-container .file-tree .tree-file {
  padding-left: 16px;
}
.explorer-container .file-tree .tree-chevron {
  color: var(--text-weak, #6c757d);
  font-size: 10px !important;
}
.explorer-container .file-tree .tree-folder-icon {
  color: #dcb67a;
  margin-right: 3px;
}
.explorer-container .file-tree .tree-file-icon {
  margin-right: 3px;
}
.explorer-container .file-tree .tree-file.active-file {
  border-left-color: #0060c0;
  background-color: var(--bg-theme-item-secondary, rgba(0, 0, 0, 0.08));
  font-weight: 600;
}
.explorer-container .file-tree .tree-children {
  margin-left: 15px;
  border-left: 1px solid var(--text-weak, rgba(0, 0, 0, 0.12));
}

.code-container {
  padding: 5px 0px 0px 0px;
}
.code-container .nav-tabs {
  padding-right: 52px;
}
.code-container .nav-item > button {
  border-radius: 0px;
  font-size: 14px;
}
.code-container .nav-item > button.active {
  border-top: 2px solid #0060c0;
  background-color: transparent !important;
  border-left: 1px solid var(--text-weak, #dcdcdc);
  border-right: 1px solid var(--text-weak, #dcdcdc);
}
.code-container .nav-item > button > span {
  color: var(--text-strong);
}
.code-container .nav-item > button i {
  margin-right: 5px;
}
.code-container .no-border {
  border: none !important;
}
.code-container .no-border:hover {
  background-color: transparent;
}
.code-container .run-code {
  font-size: 1.2em;
  position: absolute;
  top: -6px;
  right: 15px;
  z-index: 5;
  color: #6c757d;
}
.code-container .run-code > i.fa-play {
  color: #6c757d;
}
.code-container .editor-border {
  border-color: var(--text-weak) !important;
}
.code-container .read-only-lock {
  margin-left: 4px;
  font-size: 0.75em;
  opacity: 0.7;
}

.editor-reset-overlay {
  align-items: center;
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 20;
}
.editor-reset-overlay.light {
  background-color: rgba(247, 247, 247, 0.7);
}
.editor-reset-overlay.dark {
  background-color: rgba(30, 30, 30, 0.7);
}

.tab-pane.active {
  background-color: transparent;
}

.iframe-render.light {
  background-color: #F7F7F7;
  border-left: 1px solid #dcdcdc;
  border-top: 0px;
}

.iframe-render.dark {
  background-color: #000000;
  border: 1px solid #667080;
  border-top: 0px;
}

@media only screen and (min-width: 430px) {
  .language-tab {
    padding: 7px 14px;
  }
  .editor-handler {
    height: 287px;
  }
  .render-tab-background {
    margin-top: 38px;
  }
}
@media only screen and (min-width: 576px) {
  .icons-container {
    display: block;
  }
}
@media only screen and (min-width: 768px) {
  .explorer-container {
    display: block;
  }
}
@media only screen and (min-width: 1280px) {
  .render-tab-background {
    max-width: 1236px;
  }
  .iframe-render {
    max-width: 1232px;
  }
}
/*Hiding Monaco Editor features*/
div.hover-row.status-bar {
  display: none !important;
}

/* Web question output: a render window and a console, stacked under the editor tabs to mirror the
   code IDE layout. */
.web-output {
  margin-top: 12px;
}
.web-output .web-output-pane {
  margin-bottom: 12px;
  border: 1px solid var(--text-weak, #dcdcdc);
}
.web-output .web-output-header {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  color: var(--text-weak, #6c757d);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background-color: var(--bg-theme-item-secondary, #f7f7f7);
  border-bottom: 1px solid var(--text-weak, #dcdcdc);
}
.web-output .web-output-header > i {
  margin-right: 6px;
  font-size: 12px;
}
.web-output .web-render-frame {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  background-color: #ffffff;
}
.web-output .web-render-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
}
.web-output .web-console {
  height: 150px;
  margin: 0;
  padding: 6px 12px;
  overflow: auto;
  font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 12px;
}
.web-output .web-console.light {
  color: #1e1e1e;
  background-color: #ffffff;
}
.web-output .web-console.dark {
  color: #d4d4d4;
  background-color: #1e1e1e;
}
.web-output .web-console .web-console-line {
  margin: 0;
  padding: 2px 0;
  color: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  border-bottom: 1px solid rgba(127, 127, 127, 0.15);
}
.web-output .web-console .web-console-line.error {
  color: #e45649;
}
.web-output .web-console .web-console-line.warn {
  color: #b58900;
}
.web-output .web-console .web-console-line.info {
  color: #4078f2;
}
.web-output .web-console .web-console-line.debug {
  opacity: 0.75;
}.feedbackCorrect {
  font-size: 26px;
  transform: translate(-115%, 6%);
  color: var(--bs-light);
  margin-right: -25px;
  display: none;
}

.feedbackIncorrect {
  font-size: 26px;
  transform: translate(-118%, 6%);
  color: var(--bs-light);
  margin-right: -26px;
  display: none;
}

.placeHolderColor::-webkit-input-placeholder {
  color: var(--bs-light);
}

.placeHolderColor:-moz-placeholder {
  color: var(--bs-light);
}

.placeHolderColorDark::-webkit-input-placeholder {
  color: var(--bs-black);
}

.placeHolderColorDark:-moz-placeholder {
  color: var(--bs-black);
}

.acceptedAnswersTitle {
  display: none;
}

.acceptedAnswers {
  display: none;
  border: 1px solid var(--bs-black);
  width: 35%;
}

.feedbackList {
  font-size: 18px;
  margin: 5px;
}

.intIcon {
  display: inline-block;
  color: var(--bs-light);
  font-size: 22px;
  transform: translate(15px, 2px);
  margin-left: -10px;
}

.form-floating label {
  transform: scale(0.85) translateY(-1rem) translateX(0.15rem) !important;
}div.table-responsive > table.table {
  border-color: var(--text-strong);
}
div.table-responsive > table.table td {
  color: var(--text-strong) !important;
}

div.table-responsive .form-check-input[type=radio] {
  border-color: var(--text-strong) !important;
}

div.table-responsive .form-check-input[type=radio]:focus,
div.table-responsive .form-check-input[type=radio]:focus-visible {
  border-color: var(--bs-primary) !important;
  box-shadow: 0 0 0 0.25rem var(--bs-primary) !important;
}.question-container__html-content {
  width: 100%;
  display: block;
  overflow-x: auto;
}
.question-container__html-content img, .question-container__html-content iframe, .question-container__html-content video, .question-container__html-content object, .question-container__html-content embed {
  max-width: 100%;
  height: auto;
  margin: 0 auto 1rem auto;
  border: 0;
}
.question-container__html-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.question-container__html-content td, .question-container__html-content th {
  border: 1px solid #dee2e6;
  padding: 0.5rem;
  vertical-align: top;
}
.question-container__html-content pre, .question-container__html-content code {
  white-space: pre-wrap;
  word-wrap: break-word;
}
.question-container__scenario-content img, .question-container__scenario-content iframe, .question-container__scenario-content video, .question-container__scenario-content object, .question-container__scenario-content embed {
  width: 100%;
}
.question-container {
  /* On tablet and smaller (<=768px) cap server-authored images so a tall image
     can't push the answer options off-screen. Only images are constrained (not
     iframes/video/embeds). width: auto + object-fit: contain lets the image
     shrink proportionally to fit the 250px cap without distortion, while
     max-width: 100% still keeps wide images inside the card. !important guards
     against inline width/height/style attributes that authors may put on <img>. */
}
@media (max-width: 768px) {
  .question-container__html-content img, .question-container__scenario-content img {
    max-height: 300px !important;
  }
}
.question-container__question-row td {
  background-color: transparent;
  transition: background-color 0.2s;
}
.question-container__question-row:hover td {
  background-color: var(--bs-secondary-bg);
}
.question-container__question-row.active-row td {
  background-color: var(--bs-secondary-bg);
}
.question-container__question-row.active-row:hover td {
  background-color: var(--bs-secondary-bg);
}
.question-container__drag-area-width {
  min-height: 50px;
  min-width: 250px;
}
.question-container__drag-paragraph {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--bs-font-monospace);
  line-height: 2.2;
}
.question-container__drag-paragraph-slot {
  min-width: 120px;
  min-height: 1.75rem;
  padding: 0.1rem 0.5rem;
  margin: 0 0.15rem;
  vertical-align: middle;
  white-space: normal;
}
.question-container__draggable-area {
  border: 2px dashed var(--bs-gray-500);
  padding: 10px;
  transition: background 0.2s;
}
.question-container__badge_icon img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
  max-width: 100%;
  display: block;
}
@media (max-width: 575.98px) {
  .question-container__badge_icon img {
    max-height: 60px;
  }
}

.min-h-25rem {
  min-height: 25rem;
}

.form-select-chevron {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
}.homeImageLogo {
  content: url(https://content.gmetrix.net/images/GMetrix/GMetrix-Logo-Reverse.png);
  max-width: 180px;
  max-height: 60px;
}.course-stage-active {
  overflow-y: hidden;
}.auth-page {
  background-color: #293F54;
  background-image: var(--auth-bg-image);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.auth-page::before {
  background: linear-gradient(160deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.55) 100%);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.auth-page-body {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: safe center;
  min-height: 0;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.auth-card {
  background-color: #fff;
  border-radius: 0.875rem;
  box-shadow: 0 0.5rem 2.25rem rgba(0, 0, 0, 0.22);
  padding: 2.5rem 2.25rem 2rem;
  position: relative;
  width: 100%;
  z-index: 1;
}

.auth-logo {
  display: block;
  height: auto;
  margin: 0 auto 0.375rem;
  max-width: 100%;
  width: 185px;
}

.auth-divider {
  align-items: center;
  display: flex;
  font-size: 0.825rem;
  gap: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-divider::before, .auth-divider::after {
  background-color: #e2e9f4;
  content: "";
  flex: 1 1 auto;
  height: 0.0625em;
}

.auth-strength-rule {
  font-size: 0.825rem;
  transition: color 120ms ease;
}
.auth-strength-rule.is-passed {
  color: #0ABA94;
}

.auth-oauth-btn {
  background-color: #fff;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: 0.25rem;
  color: #293F54;
  font-size: 0.825rem;
  padding: 0.3rem 0.75rem;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.auth-oauth-btn:hover, .auth-oauth-btn:focus-visible {
  background-color: #f2f5fa;
  border-color: #007AC9;
  color: #293F54;
}
.auth-oauth-btn i {
  font-size: 0.95rem;
}
.auth-oauth-btn svg {
  flex-shrink: 0;
}

.auth-oauth-grid {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  justify-content: center;
}
.auth-oauth-grid > * {
  flex: 1 1 0;
  min-width: 0;
}
.auth-oauth-grid .auth-oauth-btn {
  width: 100%;
}
@media (max-width: 379.98px) {
  .auth-oauth-grid {
    flex-direction: column;
  }
  .auth-oauth-grid > * {
    flex: 0 0 auto;
  }
}

.login-form-link {
  color: var(--auth-link, var(--auth-primary, #007AC9));
  font-size: 0.78rem;
  text-decoration: underline;
}
.login-form-link:hover, .login-form-link:focus-visible {
  color: var(--auth-link-hover, var(--auth-primary, rgb(0%, 38.1316944688%, 62.8235294118%)));
  text-decoration: underline;
}

.auth-tagline {
  letter-spacing: 0.04em;
}

.auth-footer {
  font-size: 0.8rem;
}

.auth-footer-nav {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-footer-icons {
  align-items: center;
  display: flex;
  gap: 0.625rem;
  justify-content: center;
}

.auth-footer-icon-link {
  align-items: center;
  color: #293F54;
  display: inline-flex;
  font-size: 0.8rem;
  gap: 0.3rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.auth-footer-icon-link i {
  font-size: 0.9rem;
}
.auth-footer-icon-link:hover, .auth-footer-icon-link:focus-visible {
  color: #667080;
  text-decoration: none;
}

.auth-footer-portal-link {
  color: #293F54;
  font-size: 0.8rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.auth-footer-portal-link:hover, .auth-footer-portal-link:focus-visible {
  color: #667080;
  text-decoration: none;
}

.login-policy-note {
  font-size: 0.7rem;
  margin-top: 0.75rem;
}
.login-policy-note a {
  color: var(--auth-link, var(--auth-primary, #007AC9));
  display: block;
  text-decoration: underline;
}
.login-policy-note a:hover, .login-policy-note a:focus-visible {
  color: var(--auth-link-hover, var(--auth-primary, rgb(0%, 38.1316944688%, 62.8235294118%)));
  text-decoration: underline;
}

.auth-page-footer {
  background: var(--auth-primary, #007AC9);
  color: rgba(255, 255, 255, 0.9);
  flex: 0 0 auto;
  font-size: 0.7rem;
  padding: 0.5rem 1.25rem;
  position: relative;
  width: 100%;
  z-index: 1;
}
.auth-page-footer a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}
.auth-page-footer a:hover, .auth-page-footer a:focus-visible {
  color: #fff;
  text-decoration: underline;
}

@media (max-width: 575.98px) {
  .auth-page-footer {
    flex-direction: column;
    gap: 0.15rem;
    text-align: center;
  }
}
.auth-form-container {
  max-width: 27.5em;
}

.auth-card .input-group-text,
.auth-card .btn {
  font-size: 0.825rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.auth-card .form-control,
.auth-card .form-select {
  font-size: 0.825rem;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}
.auth-card .form-select-lg {
  min-height: calc(1.5em + 1rem + 2px);
}
.auth-card .form-label {
  color: #293F54;
  font-size: 0.8125rem;
  margin-bottom: 0.2rem;
}
.auth-card .form-control,
.auth-card .form-select {
  border-color: #7983b3;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.auth-card .form-control:focus,
.auth-card .form-select:focus {
  border-color: var(--auth-primary, #007AC9);
  box-shadow: 0 0 0 0.18rem rgba(0, 122, 201, 0.18);
}
.auth-card .form-control.is-invalid, .auth-card .form-control.is-invalid:focus,
.auth-card .form-select.is-invalid,
.auth-card .form-select.is-invalid:focus {
  border-color: #B22222;
}
.auth-card .form-check-label,
.auth-card .form-check-input {
  font-size: 0.8rem;
}
.auth-card a {
  color: var(--auth-link, var(--auth-primary, #007AC9));
}
.auth-card a:hover, .auth-card a:focus-visible {
  color: var(--auth-link-hover, var(--auth-primary, rgb(0%, 38.1316944688%, 62.8235294118%)));
}
.auth-card .btn-primary {
  background-color: var(--auth-primary, #007AC9);
  border-color: var(--auth-primary, #007AC9);
  color: #fff;
}
.auth-card .btn-primary:hover, .auth-card .btn-primary:focus-visible, .auth-card .btn-primary:active, .auth-card .btn-primary.active {
  background-color: var(--auth-primary, rgb(0%, 40.5595551653%, 66.8235294118%));
  border-color: var(--auth-primary, rgb(0%, 40.5595551653%, 66.8235294118%));
  color: #fff;
  filter: brightness(0.94);
}
.auth-card .btn-primary:disabled {
  background-color: var(--auth-primary, #007AC9);
  border-color: var(--auth-primary, #007AC9);
  color: #fff;
}
.auth-card .auth-submit {
  border-radius: 0.5rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 122, 201, 0.25);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5625rem 1rem;
}
.auth-card .auth-submit:hover:not(:disabled):not(.auth-busy) {
  box-shadow: 0 0.25rem 0.875rem rgba(0, 122, 201, 0.38);
}

.auth-password-wrapper .auth-password-input {
  padding-right: 2.25rem;
}
.auth-password-wrapper .auth-password-input.is-invalid,
.auth-password-wrapper .auth-password-input.is-valid {
  background-image: none;
  padding-right: 2.25rem;
}
.auth-password-wrapper .auth-password-toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0 0.6rem;
  position: absolute;
  right: 0;
  text-decoration: none;
  top: 0;
}
.auth-password-wrapper .auth-password-toggle:hover, .auth-password-wrapper .auth-password-toggle:focus-visible {
  color: #293F54;
  text-decoration: none;
}
.auth-password-wrapper .auth-password-toggle:focus-visible {
  outline: 0.125em solid rgba(0, 122, 201, 0.4);
  outline-offset: -0.125em;
  border-radius: 0.25rem;
}
.auth-password-wrapper .auth-password-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.auth-password-wrapper--lg .auth-password-toggle {
  height: calc(1.5em + 1rem + 2px);
}

.auth-submit {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-busy {
  pointer-events: none;
  cursor: progress;
  user-select: none;
}

.auth-submit.auth-busy {
  opacity: 1;
}

.auth-turnstile-frame {
  border: 1px solid var(--bs-border-color-translucent, rgba(0, 0, 0, 0.1));
  border-radius: 0.5rem;
  padding: 0.25rem;
  min-height: 0;
  overflow: hidden;
  transition: min-height 120ms ease;
}
.auth-turnstile-frame:empty, .auth-turnstile-frame:has(iframe[style*="height: 0"]) {
  border-color: transparent;
  padding: 0;
}

@media (max-width: 767.98px) {
  .auth-page-body {
    padding: 1rem 0.75rem;
  }
  .auth-card {
    border-radius: 0.75rem;
    padding: 1.75rem 1.25rem 1.5rem;
  }
  .auth-logo {
    width: 150px;
  }
}
@media (max-height: 720px) {
  .auth-page-body {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .auth-card {
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
  }
}
.auth-policy-banner {
  background: #fff;
  border: 1px solid #e2e9f4;
  border-radius: 0.25rem;
  bottom: 1rem;
  max-width: 320px;
  padding: 1rem 2.5rem 1rem 1rem;
  position: fixed;
  right: 1rem;
  z-index: 1050;
}
.auth-policy-banner__body {
  font-size: 0.8rem;
  line-height: 1.4;
}
.auth-policy-banner__body a {
  color: #007AC9;
}
.auth-policy-banner__close {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0 0.5rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  text-decoration: none;
}.eula-modal-body {
  max-height: 70vh;
  overflow-y: auto;
  font-size: 12px;
}
.eula-modal-body .eula-content .eula-list {
  padding-left: 1.25rem;
}
.eula-modal-body .eula-content .eula-list li {
  margin-bottom: 10px;
}.language-btn:hover {
  background-color: #E9ECEF !important;
}

.language-list {
  column-count: 2;
  column-gap: 16px;
}

@media (min-width: 768px) {
  .language-list {
    column-count: 3;
  }
}
.language-list > * {
  break-inside: avoid;
  display: block;
  width: 100%;
}.mobile-nav-menu .nav-item a,
.mobile-nav-menu .nav-item button {
  height: 55px;
  width: 55px;
  color: #fff !important;
  font-size: 10px;
  font-weight: 400;
}.dashboard-menu {
  width: 250px;
}
.dashboard-menu-nav {
  min-height: 0;
}
.dashboard-menu-nav::-webkit-scrollbar {
  width: 0.375rem;
}
.dashboard-menu-nav::-webkit-scrollbar-thumb {
  background: #e1e6ed;
  border-radius: 2px;
}
.dashboard-menu-list-item:not(.menu-item-active):hover {
  border-radius: 6px;
  font-weight: 700 !important;
}

.dashboard-menu-content,
.dashboard-menu-list-item {
  letter-spacing: 1px !important;
}

.nav-logo {
  max-height: 3rem;
  object-fit: contain;
}

.menu-item-active {
  border-radius: 6px;
  font-weight: 700;
}

.bulb-logo {
  width: 30px;
  transform: translateY(-3px);
}

.theme-span {
  display: inline-block;
  vertical-align: super;
}

.theme-toggle-container {
  width: 25px;
  height: 25px;
  position: relative;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  background-color: transparent; /* day by default */
  transition: background-color 2s ease; /* <== slower transition */
  overflow: hidden;
  display: inline-block;
  transform: translateY(2px);
}
.theme-toggle-container div {
  margin: 0 !important;
}

.theme-toggle-container.dark {
  background-color: transparent; /* night */
}

.arc-path {
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  left: 0;
  border-radius: 50%;
  z-index: 0;
}

.orbiter {
  width: 100%;
  height: 60px;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s ease-in-out;
  transform-origin: center center;
}

.icon-theme {
  position: absolute;
  left: 50%;
  z-index: 2;
  transition: transform 1s ease-in-out;
}

.icon-theme.sun {
  top: 0;
}

.icon-theme.moon {
  bottom: 0;
}

.icon-theme i {
  color: #fff;
  transition: color 1s ease-in-out;
}.transcript__assignment-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.25rem 1.5rem;
}
.transcript__product-table {
  min-width: 700px;
  --bs-table-bg: var(--bg-theme) !important;
  --bs-table-color: inherit;
  --bs-table-border-color: transparent;
  --bs-table-striped-bg: var(--bg-theme-item, var(--bg-theme));
  --bs-table-striped-color: inherit;
  --bs-table-hover-bg: var(--bg-theme-item, var(--bg-theme));
  --bs-table-hover-color: inherit;
}
.transcript__product-table > thead > tr > th {
  font-weight: 600;
}

.action-icon {
  height: 32px;
  width: 32px;
}

@media print {
  @page {
    size: A4, letter;
  }
  .fa-memo,
  .fa-folders {
    color: #000 !important;
  }
}.sms-undock-drag-bar {
  -webkit-app-region: drag;
  align-items: center;
  cursor: move;
  display: flex;
  height: 28px;
  justify-content: center;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1080;
}
.sms-undock-drag-bar i {
  opacity: 0.6;
  pointer-events: none;
}

.sms-undocked {
  padding-top: 28px;
}.sms-test-runner-error-details {
  max-width: min(90vw, 800px);
  max-height: 240px;
  overflow: auto;
  font-size: 0.75rem;
  color: #0d2238;
  background-color: #f2f5fa;
  border: 1px solid #c2cee2;
  white-space: pre-wrap;
  word-break: break-word;
}
.word {
  background-color: #2B579A;
}

.excel {
  background-color: #217346;
}

.powerpoint {
  background-color: #B7472A;
}

.access {
  background-color: #A4373A;
}

.outlook {
  background-color: #0072C6;
}

.autodesk {
  background-color: #0072C6;
}

.acrobat {
  background-color: rgb(56, 56, 56);
}

.responsive-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.responsive-stack {
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 946px) {
  .responsive-stack {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 495px) {
  .hide-text-xs {
    display: none !important;
  }
  .responsive-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
}
.responsive-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.responsive-nav-next {
  order: 0;
}

@media (min-width: 576px) {
  .responsive-nav-next {
    order: 10;
    margin-left: auto;
  }
}
.loading-logo--sm {
  width: 200px;
}

.loading-logo--md {
  width: 250px;
}

.loading-logo--lg {
  width: 300px;
}

.loading-message {
  color: var(--primary-strong-active);
}

.loading-message--dark {
  color: var(--bs-white);
}

.loading-spinner {
  color: var(--primary-strong-active);
}

.loading-spinner--dark {
  color: var(--bs-white);
}

.status-icon-box {
  align-items: center;
  background-color: var(--bs-gray-600);
  border-radius: 4px;
  color: transparent;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.status-icon-box--sm {
  font-size: 0.75rem;
  height: 1.4rem;
  width: 1.4rem;
}
.status-icon-box--answered {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--answered > i {
  color: var(--bs-white);
}
.status-icon-box--answered-alt {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.status-icon-box--answered-alt > i {
  color: var(--bs-white);
}
.status-icon-box--viewed {
  background-color: var(--bs-border-color-translucent);
  color: var(--bs-secondary-color);
}
.status-icon-box--viewed > i {
  color: var(--bs-secondary-color);
}
.status-icon-box--review {
  background-color: var(--bs-warning);
  color: var(--bs-black);
}
.status-icon-box--review > i {
  color: var(--bs-black);
}
.status-icon-box--complete {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--complete > i {
  color: var(--bs-white);
}
.status-icon-box--incorrect {
  background-color: var(--bs-danger);
  color: var(--bs-white);
}
.status-icon-box--incorrect > i {
  color: var(--bs-white);
}

/* Active task-row highlight for the summary list. Mirrors the WebRunner rules in
   question_container/styles/QuestionContainer.scss, which aren't loaded on the
   MultiProject page (that runner doesn't render QuestionContainer). */
.question-container__question-row td {
  background-color: transparent;
  transition: background-color 0.2s;
}
.question-container__question-row:hover td {
  background-color: var(--bs-secondary-bg);
}
.question-container__question-row.active-row td {
  background-color: var(--bs-secondary-bg);
}
.question-container__question-row.active-row:hover td {
  background-color: var(--bs-secondary-bg);
}

/* Training-mode scenario feedback screen (reuses the summary shell). The donut
   scales down with the viewport so it stays usable on phones, and the stat list
   flows to a row under the donut on small screens. */
.mp-feedback-donut {
  width: 200px;
  max-width: 55vw;
}
@media (max-width: 575.98px) {
  .mp-feedback-donut {
    width: 150px;
  }
}

.mp-feedback-stat {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.multi-project-test-runner .dock-button {
  height: 40px !important;
}
.multi-project-test-runner .task-tab:focus,
.multi-project-test-runner .task-tab:focus-visible {
  box-shadow: none !important;
}
.multi-project-test-runner .tab-row {
  width: 100%;
  padding: 6px;
}
.multi-project-test-runner .tab-row .nav, .multi-project-test-runner .tab-row .nav-tabs {
  border-bottom: none !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item {
  flex: 0 0 160px;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background-color: var(--bs-gray-300, #dee2e6);
  color: var(--bs-black, #000) !important;
  text-align: center;
  border: 1px solid var(--bs-gray-400, #ced4da);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link.active, .multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-tabs .nav-item.show .nav-link {
  color: var(--bs-black, #000) !important;
  background-color: var(--bs-gray-300, #dee2e6);
  border-color: var(--bs-gray-400, #ced4da);
  font-weight: 600;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link.active .task-name, .multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-tabs .nav-item.show .nav-link .task-name {
  background-color: var(--bs-primary, #0d6efd);
  color: #fff !important;
  border-radius: 4px;
  padding: 2px 8px;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link:hover:not(.active) {
  background-color: var(--bs-gray-400, #ced4da);
  color: var(--bs-black, #000) !important;
  border-color: var(--bs-gray-500, #adb5bd);
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link:focus {
  box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.35);
  z-index: 1;
}
.multi-project-test-runner .tab-row .nav-tabs .nav-item .nav-link:disabled {
  opacity: 1;
}
.multi-project-test-runner .tab-sync-bar {
  height: 3px;
  background: transparent;
}
.multi-project-test-runner .tab-sync-bar.active {
  background: linear-gradient(90deg, transparent, var(--bs-primary, #0d6efd), transparent);
  background-size: 200% 100%;
  animation: sync-slide 1.2s ease-in-out infinite;
}
@keyframes sync-slide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.multi-project-test-runner .multi-project-timer--centered {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.multi-project-test-runner {
  /* Left/Right/Top-stacked docks: keep the "Project X of Y" label centered in the
     toolbar and the timer pinned to the far right at EVERY width (not just the old
     <576px breakpoint, which is where this layout used to break). The top group
     spans the full row so the timer's ms-auto can reach the right edge, and the
     label is absolutely centered against the position-relative toolbar row. */
}
.multi-project-test-runner .multi-project-actions-top--side {
  flex: 1 0 100%;
}
.multi-project-test-runner .multi-project-actions-top--side .multi-project-actions-project-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
@media (max-width: 575.98px) {
  .multi-project-test-runner .multi-project-actions-top {
    flex: 1 0 100%;
  }
}
.multi-project-test-runner .test-runner-top {
  flex-shrink: 0;
  padding: 0px;
  margin: 0px;
  font-weight: 200;
  font-size: 18px;
}
.multi-project-test-runner .test-runner-top button {
  background-color: transparent;
  color: white;
  border: 0;
}
.multi-project-test-runner .test-runner-top button:hover {
  background-color: rgba(0, 0, 0, 0.486);
}
.multi-project-test-runner .test-runner-top button:disabled {
  background-color: transparent;
}
.multi-project-test-runner .test-runner-top {
  /* The top bar's 18px / weight-200 typography would inflate the stacked
     Text/Dock buttons; reset just those to the WebRunner's base button
     sizing (1rem / 400) so they match the WebRunner row-2 buttons. The
     transparent background from the `button` rule above is preserved. */
}
.multi-project-test-runner .test-runner-top .multi-project-actions-top .responsive-btn {
  font-size: 1rem;
  font-weight: 400;
}
.multi-project-test-runner .test-runner-top {
  /* Summary / Restart Project / Save Project / Submit Project must always sit
     on ONE line: never wrap the text, and step the text size (and padding)
     down as the docked window narrows so all four keep fitting — the dock
     min width is 450px (see dockConstraints.ts). */
}
.multi-project-test-runner .test-runner-top .multi-project-actions-buttons {
  min-width: 0;
}
.multi-project-test-runner .test-runner-top .multi-project-actions-buttons .btn {
  white-space: nowrap;
}
@media (max-width: 649.98px) {
  .multi-project-test-runner .test-runner-top .multi-project-actions-buttons .btn {
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
  }
}
@media (max-width: 499.98px) {
  .multi-project-test-runner .test-runner-top .multi-project-actions-buttons .btn {
    font-size: 0.78rem;
    padding: 0.25rem 0.4rem;
  }
}
.multi-project-test-runner .test-runner-top span {
  vertical-align: middle;
  text-align: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.multi-project-test-runner .test-runner-top .adjust-right {
  transform: translateX(-50%);
  -webkit-transform: translateX(-20%);
}

.status-icon {
  padding: 2px;
}

.status-icon--answered {
  padding: 2px;
  background-color: var(--bs-success, #0ABA94);
}

.status-icon--unanswered {
  padding: 2px;
  border-color: var(--text-strong) !important;
  color: transparent;
}

.text-strong {
  color: var(--text-strong);
}.task-tab {
  overflow: visible;
}

.task-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 13px;
  color: white;
  flex-shrink: 0;
}

.task-marker--complete {
  background-color: var(--bs-success);
  order: 1;
}

.task-marker--review {
  background-color: var(--bs-warning);
  order: -1;
}.blackout-period-alert__title {
  color: var(--bs-primary-text-emphasis);
  font-size: 24px;
  font-weight: 600;
}
.blackout-period-alert__title h2 {
  margin-bottom: 0px;
}
.blackout-period-alert p {
  margin-bottom: 1rem;
}
.blackout-period-alert p:last-child {
  margin-bottom: 0;
}@keyframes skeleton-loading {
  0% {
    background-color: hsl(200, 20%, 70%);
  }
  100% {
    background-color: hsl(200, 20%, 95%);
  }
}
.skeleton {
  animation: skeleton-loading 1s linear infinite alternate;
}
.skeleton__section-title {
  width: 250px;
  height: 25px;
  border-radius: 0.25rem;
}
.skeleton__section-length {
  width: 150px;
  height: 18px;
  border-radius: 0.25rem;
}
.skeleton__description {
  width: 100%;
  height: 45px;
  border-radius: 0.25rem;
}
.skeleton__section-detail {
  width: 100%;
  height: 50px;
  border-radius: 0.25rem;
}
.skeleton__button {
  width: 90px;
  min-height: 30px;
  border-radius: 0.25rem;
}.section-pane__section-title {
  color: var(--bs-primary-text-emphasis);
  font-size: 24px;
  font-weight: 600;
}
.section-pane__section-title h2 {
  margin-bottom: 0px;
}
.section-pane__section-count {
  margin-top: 5px;
  font-size: 11px;
}
.section-pane__section-detail {
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary);
}
.section-pane__section-detail-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 22px;
}
.section-pane__start-resume-test {
  padding-left: 30px;
  padding-right: 30px;
  min-width: 12px;
  min-height: 30px;
  border-radius: 6px;
  background-color: var(--bs-primary);
  border: none;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
}
.section-pane__lock-container {
  background-color: var(--bs-warning-bg-subtle);
  border: 2px solid var(--bs-warning);
  display: flex;
  align-items: center;
  color: var(--bs-secondary);
}
.section-pane__progress-bar {
  color: var(--bs-success);
}
.section-pane__lock-icon {
  font-size: 20px;
}
.section-pane .btn.disabled, .section-pane .btn:disabled {
  opacity: 0.35;
}
.section-pane__footer {
  background: var(--bs-white);
  border-top: 1px solid var(--bs-border-color);
  border-radius: 0 0 10px 10px;
}

.underline {
  border-bottom: 1px solid var(--bs-border-color);
}#runSectionTest-react-container {
  width: 100vw;
  padding: 0 20px;
}

.loader-container {
  width: 100vw;
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.runSectionTest-main {
  color: var(--bs-secondary);
  font-size: 13px;
}
.runSectionTest-main__title {
  color: var(--bs-primary-text-emphasis);
}
.runSectionTest-main__pane {
  border-radius: 10px;
  background: var(--bs-white);
  box-shadow: 0px 4px 4px 0px var(--bs-border-color-translucent);
}

@media only screen and (min-width: 1200px) {
  #runSectionTest-react-container {
    padding: 40px 30px;
    width: calc(100vw - 270px);
    top: 0;
  }
}.word {
  background-color: #2B579A;
}

.excel {
  background-color: #217346;
}

.powerpoint {
  background-color: #B7472A;
}

.access {
  background-color: #A4373A;
}

.outlook {
  background-color: #0072C6;
}

.autodesk {
  background-color: #0072C6;
}

.acrobat {
  background-color: rgb(56, 56, 56);
}

.responsive-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.responsive-stack {
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 946px) {
  .responsive-stack {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 495px) {
  .hide-text-xs {
    display: none !important;
  }
  .responsive-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
}
.responsive-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.responsive-nav-next {
  order: 0;
}

@media (min-width: 576px) {
  .responsive-nav-next {
    order: 10;
    margin-left: auto;
  }
}
.loading-logo--sm {
  width: 200px;
}

.loading-logo--md {
  width: 250px;
}

.loading-logo--lg {
  width: 300px;
}

.loading-message {
  color: var(--primary-strong-active);
}

.loading-message--dark {
  color: var(--bs-white);
}

.loading-spinner {
  color: var(--primary-strong-active);
}

.loading-spinner--dark {
  color: var(--bs-white);
}

.status-icon-box {
  align-items: center;
  background-color: var(--bs-gray-600);
  border-radius: 4px;
  color: transparent;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.status-icon-box--sm {
  font-size: 0.75rem;
  height: 1.4rem;
  width: 1.4rem;
}
.status-icon-box--answered {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--answered > i {
  color: var(--bs-white);
}
.status-icon-box--answered-alt {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.status-icon-box--answered-alt > i {
  color: var(--bs-white);
}
.status-icon-box--viewed {
  background-color: var(--bs-border-color-translucent);
  color: var(--bs-secondary-color);
}
.status-icon-box--viewed > i {
  color: var(--bs-secondary-color);
}
.status-icon-box--review {
  background-color: var(--bs-warning);
  color: var(--bs-black);
}
.status-icon-box--review > i {
  color: var(--bs-black);
}
.status-icon-box--complete {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--complete > i {
  color: var(--bs-white);
}
.status-icon-box--incorrect {
  background-color: var(--bs-danger);
  color: var(--bs-white);
}
.status-icon-box--incorrect > i {
  color: var(--bs-white);
}

.project-test-runner {
  overflow: hidden;
}

.project-feedback-donut {
  width: 12.5rem;
  max-width: 55vw;
}
@media (max-width: 575.98px) {
  .project-feedback-donut {
    width: 9.375rem;
  }
}

.project-runner-layout,
.project-runner-layout__split,
.project-runner-layout__instructions,
.project-runner-layout__tasks,
.project-runner-body {
  min-height: 0;
}

@media (max-width: 767.98px) {
  .project-runner-layout__split {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .project-runner-layout__split > .project-runner-layout__instructions {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 55%;
    min-height: 0;
    overflow: hidden;
  }
  .project-runner-layout__split > .project-runner-layout__tasks {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 45%;
    min-height: 0;
    max-height: 45%;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: var(--bg-theme-item-secondary);
  }
}
@media (min-width: 768px) {
  .project-runner-layout__instructions,
  .project-runner-layout__tasks {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
.project-task-list__header {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--bs-white) !important;
}
.project-task-list__header:hover, .project-task-list__header:focus, .project-task-list__header:focus-visible, .project-task-list__header:active, .project-task-list__header.active {
  background-color: var(--bs-white) !important;
  color: inherit;
}

.project-top-tabs .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  white-space: nowrap;
}
.project-top-tabs .nav-tabs::-webkit-scrollbar {
  height: 4px;
}

.project-top-tab {
  white-space: nowrap;
}

.project-task-list .list-group-item.list-group-item-action.active {
  background-color: var(--bs-gray-200) !important;
  border-color: transparent;
  color: inherit;
  font-weight: 600;
}

.project-task-nav .responsive-btn {
  min-width: 0;
}

.project-footer .project-footer-group {
  flex: 0 1 auto;
}

@media (max-width: 575.98px) {
  .project-task-nav .responsive-btn {
    flex: 1 1 0;
    min-width: 6rem;
  }
  .project-footer .project-footer-group {
    flex: 1 0 100%;
    justify-content: center;
  }
}
@media (max-width: 495px) {
  .project-footer .responsive-btn {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
}
.project-footer--side .pf-dock,
.project-footer--side .pf-dock .dropdown-toggle {
  width: 100%;
}

.project-footer--side .responsive-btn {
  min-width: 0;
}.stat-circle {
  width: 150px;
  height: 150px;
  margin: calc(5px + 0.5vw);
  position: relative;
}
.stat-circle-background {
  fill: #d8dce2;
}
.stat-circle-percentage {
  fill: #007AC9;
  transform: rotate(-90deg);
}
.stat-circle-caption {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 12px;
}
.stat-circle-label {
  font-size: 12px !important;
}
.stat-circle-value {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-circle-value-text {
  font-size: 24px;
  font-weight: bold;
}.sg-progress-meter {
  display: flex;
  flex-direction: column;
}
.sg-progress-meter-label {
  margin-bottom: 5px;
}
.sg-progress-meter-left-back {
  fill: white;
}
.sg-progress-meter-left-front {
  fill: #007AC9;
}
.sg-progress-meter-right-back {
  fill: #686F82;
}
.sg-progress-meter-right-front {
  fill: #F3F5F9;
}
.sg-progress-meter-inner-text {
  font-weight: 500;
}

@-moz-document url-prefix() {
  .sg-progress-meter-inner-text {
    transform: translateY(4px);
  }
}.overview-circle {
  width: 300px;
  height: 300px;
}
.overview-description img {
  margin: 10px 0px;
  border-radius: 5px;
  max-width: 100%;
  box-shadow: 0px 0px 4px 0px black;
}.flash-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px 0px;
}
.flash-cards-holder {
  width: 200px;
  height: 250px;
  position: relative;
}
.flash-cards-card {
  position: absolute;
  width: 200px;
  height: 250px;
  cursor: pointer;
  border: none;
  padding: 0px;
  background: transparent;
  transition: all 200ms linear;
  inset: 0px;
  opacity: 0;
}
.flash-cards-card.previous {
  transform: translateX(-120%);
}
.flash-cards-card.next {
  transform: translateX(120%);
}
.flash-cards-card.showing {
  opacity: 1;
}
.flash-cards-card-face {
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  transition: all 200ms linear;
  inset: 0px;
  padding: 10px;
  overflow-y: auto;
  transform: scaleX(0);
}
.flash-cards-card-face.showing {
  transition: all 200ms 200ms linear;
  transform: scaleX(1);
}
.flash-cards-card-face.front {
  background: #d0f0c0;
}
.flash-cards-card-face.back {
  background: #ddd;
}
.flash-cards-actions {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  width: 200px;
}
.flash-cards-action {
  width: 75px;
}.glossary {
  width: 100%;
  height: 100%;
  padding: 20px;
}
.glossary-table {
  margin: 20px 0px;
  border: 1px solid #00A38D;
  height: fit-content;
}
.glossary-header-cell {
  padding: 10px;
  font-weight: 500;
  background-color: #00A38D;
  color: white;
}
.glossary-body-cell {
  font-size: 13px;
  text-align: left;
  padding: 10px;
}.note-adder-popup {
  transform-origin: top center;
  transition: all 200ms;
  transform: scaleY(0);
  z-index: 1;
}
.note-adder-popup.open {
  transform: scaleY(1);
}

.note-item-popover {
  right: calc(100% + 5px);
  top: 50%;
  transform-origin: right center;
  transform: translateY(-50%) scaleX(0);
  transition: all 200ms;
}
.note-item-popover.open {
  transform: translateY(-50%) scaleX(1);
}.feature-ring-banner .feature-ring-banner-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  opacity: 0.85;
}
.feature-ring-banner .feature-ring-banner-ring {
  font-size: 1rem;
}
.feature-ring-banner .feature-ring-banner-description {
  opacity: 0.9;
}
/*
 * The headline tiles line their bars up on a single row, so the bar height is shared rather than
 * repeated. .sgv2-tile-data-line reuses it to sit text on the same centreline.
 */
/*
 * The strip's fade must be WIDER than its 1rem inline gutter, and the snap inset must match the
 * fade rather than the gutter. scroll-snap-type is mandatory, so the strip always comes to rest on
 * a clean tile boundary: with a 1rem fade over a 1rem gutter the mask sat entirely over the empty
 * gap between two tiles and was never visible at all. Insetting scroll-padding-inline to the fade
 * width instead parks the outgoing tile's edge underneath the mask, so the cue has real content to
 * act on and actually renders.
 */
/*
 * The breakdown legend positions each label against its own wedge, so it has to reserve exactly
 * the pie's height to work in. One variable drives both, because a drift between them would move
 * every bullet off the slice it points at.
 */
/*
 * The swatch holds a glyph as well as a colour, so it has to be big enough for one to read. A 10px
 * dot -- what it was before -- is too small for any glyph to survive, and the measured palette
 * cannot keep four categories apart under deuteranopia on colour alone, so the glyph is load
 * bearing rather than decorative.
 */
.study-guide-v2 {
  /*
   * 9.5rem clears the two 9rem-tall visuals (the gauge renders 144px at its 200x150 viewBox,
   * the exam circle is 9rem) with a little margin. Every tile reserves the same height here,
   * which is what keeps the data rows and messages on a shared line.
   */
}
.study-guide-v2 .sgv2-tile-visual {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 9.5rem;
  flex-direction: column;
}
.study-guide-v2 {
  /*
   * Bottom-aligned, not centred: the bars are the last thing in this row, so anchoring to the
   * bottom lands them on one line across all three tiles no matter how much sits above them
   * (the readiness tile stacks band labels over its bars, the others have nothing).
   */
}
.study-guide-v2 .sgv2-tile-data {
  align-items: flex-end;
  display: flex;
  justify-content: center;
  min-height: 2.75rem;
  width: 100%;
}
.study-guide-v2 .sgv2-gauge-track {
  stroke: var(--bs-gray-300);
}
.study-guide-v2 .sgv2-gauge-fill {
  stroke: var(--bs-success);
  transition: stroke-dasharray 0.4s ease;
}
.study-guide-v2 {
  /*
   * The viewBox is 200x150, so this renders a ~160px ring in 144px of height -- the same ring
   * size as before, close to the 9rem .sgv2-exam-circle beside it (which is how the two read in
   * the mockup), and short enough that the headline tiles stay aligned.
   */
}
.study-guide-v2 .sgv2-readiness-gauge {
  max-width: 12rem;
  width: 100%;
}
.study-guide-v2 .sgv2-readiness-band {
  height: 0.6rem;
}
.study-guide-v2 .sgv2-readiness-band-off {
  background-color: var(--bs-gray-400);
}
.study-guide-v2 {
  /* GMetrixProgressBar sets its height inline, so slimming it down has to win on specificity. */
}
.study-guide-v2 .sgv2-thin-progress {
  border-radius: 50rem;
  height: 0.6rem !important;
}
.study-guide-v2 .sgv2-thin-progress .progress-bar {
  background-color: var(--bs-success);
  border-radius: inherit;
}
.study-guide-v2 .sgv2-exam-circle {
  aspect-ratio: 1;
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  width: 9rem;
}
.study-guide-v2 .sgv2-step-number {
  height: 1.75rem;
  width: 1.75rem;
}
.study-guide-v2 {
  /*
   * A completed plan task stays in the row rather than being replaced, so it needs to read as
   * finished without disappearing. The accent is a border, not a fill, so the tile keeps the
   * same contrast as its unfinished neighbours -- and it sits alongside a "Completed" badge and
   * a check glyph, so colour is never the only cue.
   */
}
.study-guide-v2 .sgv2-study-plan-step-complete {
  border-color: var(--bs-success) !important;
}
.study-guide-v2 .sgv2-objective-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.study-guide-v2 .sgv2-objective-card:hover, .study-guide-v2 .sgv2-objective-card:focus-within {
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}
.study-guide-v2 {
  /*
   * Every objective tile on the page is as tall as the tallest one, not just the tallest in its
   * own section. Titles are deliberately not clamped, so a four-line title would otherwise make
   * its own section noticeably taller than the three beside it and the four headings would stop
   * lining up down the page.
   *
   * The height is measured in ObjectiveBuckets and published as a custom property on the section
   * container, because the four strips are separate flex containers and no CSS mechanism sizes
   * one against another. It falls back to auto, so tiles are still equal within a section if the
   * measurement never runs.
   */
}
.study-guide-v2 .sgv2-objective-card {
  min-height: var(--sgv2-tile-height, auto);
}
.study-guide-v2 .sgv2-objective-search {
  max-width: 24rem;
}
.study-guide-v2 {
  /*
   * One bucket, one row. Tiles are a fixed width rather than grid columns, so a section holding
   * more objectives than fit scrolls sideways instead of wrapping onto a second row and pushing
   * the next heading down the page.
   *
   * The inline padding / negative margin pair lets tiles bleed to the section's edges while the
   * first one still lines up under the heading. scroll-padding-inline matches it so a snapped
   * tile lands exactly where the first tile sits at rest; without that, scroll offset 0 would not
   * be a snap position and `mandatory` could refuse to settle there.
   *
   * The block pair solves a different problem: overflow-x: auto forces overflow-y to compute to
   * auto, so the card's hover / :focus-within lift and its shadow would be clipped and the
   * clipped overflow would raise a stray vertical scrollbar. The padding gives the shadow room
   * and the negative margin gives the space back, so nothing moves.
   */
}
.study-guide-v2 .sgv2-objective-strip {
  display: flex;
  gap: 1rem;
  margin-block: -1rem;
  margin-inline: -1rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 1rem;
  padding-inline: 1rem;
  scroll-padding-inline: 2rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.study-guide-v2 .sgv2-objective-strip::-webkit-scrollbar {
  height: 0.5rem;
}
.study-guide-v2 .sgv2-objective-strip::-webkit-scrollbar-track {
  background-color: transparent;
}
.study-guide-v2 .sgv2-objective-strip::-webkit-scrollbar-thumb {
  background-color: var(--bs-border-color);
  border-radius: 0.25rem;
}
.study-guide-v2 .sgv2-objective-strip::-webkit-scrollbar-thumb:hover {
  background-color: var(--bs-secondary-color);
}
.study-guide-v2 {
  /*
   * min() rather than a media query: 17rem puts about four tiles in a desktop panel, and on a
   * phone the tile shrinks just enough that the next one peeks past the edge — the clearest
   * signal available on touch that the row scrolls at all.
   */
}
.study-guide-v2 .sgv2-objective-strip-item {
  flex: 0 0 min(17rem, 85%);
  scroll-snap-align: start;
}
.study-guide-v2 {
  /*
   * The fade is a mask, not a gradient overlay, on purpose: an overlay has to paint the panel's
   * own background colour, which differs between the light and dark themes and is inherited
   * several levels up. Masking the content is background-independent, so it is correct in both
   * themes by construction. Where mask-image is unsupported it simply does not apply and the
   * strip still scrolls.
   *
   * See $sgv2-strip-fade for why the width deliberately exceeds the strip's inline gutter.
   */
}
.study-guide-v2 .sgv2-objective-strip-fade-start {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem);
}
.study-guide-v2 .sgv2-objective-strip-fade-end {
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 2rem);
  mask-image: linear-gradient(to left, transparent 0, #000 2rem);
}
.study-guide-v2 .sgv2-objective-strip-fade-start.sgv2-objective-strip-fade-end {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 2rem, #000 calc(100% - 2rem), transparent 100%);
}
.study-guide-v2 .sgv2-bucket:last-of-type {
  margin-bottom: 0 !important;
}

/*
 * Objective descriptions are authored lesson content — most carry markup and the longest runs to
 * ~12,000 characters — so they are flattened to text in TS and clamped here. Without the clamp a
 * single verbose objective would set the height of every card in its grid row.
 *
 * Top level, not nested: this is used both on the page and inside the review modal, which is
 * portalled to <body>.
 */
.sgv2-objective-description {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/*
 * The maintenance status pill, shown on Maintain Mastery tiles and in the details drawer.
 *
 * Top level, not nested: the tile lives inside .study-guide-v2 while the drawer is portalled to
 * <body>, so nesting these under either one would silently leave the pill unstyled in the other.
 */
.sgv2-maintenance-pill-attention {
  background-color: var(--bs-danger);
  color: #fff;
}

.sgv2-maintenance-pill-confirmed {
  background-color: #04644f;
  background-color: color-mix(in srgb, var(--bs-success) 55%, #000);
  color: #fff;
}

/*
 * These two keep a fixed bright background in both themes, so their text has to be fixed dark as
 * well. `--text-strong` would flip to near-white in the dark theme and leave white-on-teal at
 * roughly 2.3:1.
 */
.sgv2-maintenance-pill-ready {
  background-color: var(--bs-success);
  color: #000;
}

.sgv2-maintenance-pill-refresh {
  background-color: var(--bs-warning);
  color: #000;
}

/*
 * The review modal is portalled to <body>, so it sits outside .study-guide-v2 and its rules have
 * to live at the top level rather than nested with the rest of the page.
 */
.sgv2-review-modal {
  /*
   * Fixed overall height, so paging never moves the pager.
   *
   * The `scrollable` prop already stretches the *dialog* to the viewport
   * (`.modal-dialog-scrollable { height: calc(100% - var(--bs-modal-margin) * 2) }`), but
   * Bootstrap leaves `.modal-content` at `max-height: 100%`. The content box therefore still
   * shrinks to fit whichever question is on screen, and the footer rides up and down with it.
   * Pinning the content to the dialog's height makes the body the only thing that changes, and it
   * changes by scrolling rather than by resizing.
   *
   * Applied through a modifier because the empty states are a couple of lines of text, and
   * stretching those to the full viewport would read as broken rather than deliberate.
   */
}
.sgv2-review-modal.sgv2-review-modal-fill .modal-content {
  height: 100%;
}
.sgv2-review-modal {
  /*
   * Host for the test runner's own QuestionPreview, so every question type looks exactly as it
   * does during a test.
   *
   * WebRunner's preview branch renders `flex-grow-1 ... overflow-y-auto`, which only behaves if
   * its parent is a flex column. The min-height stops the preview's own loading spinner
   * collapsing the pane while the question is being fetched -- the modal's height is fixed by the
   * rule above, so this is only about the content settling inside it.
   */
}
.sgv2-review-modal .sgv2-review-question {
  display: flex;
  flex-direction: column;
  min-height: 26rem;
}
.sgv2-review-modal {
  /*
   * Simulation questions are performed in the host application and have no answer a browser can
   * disclose, so they get a message instead of a preview. It grows to fill the same box the
   * runner would have occupied, otherwise paging onto one would collapse the fixed-height modal.
   */
}
.sgv2-review-modal .sgv2-review-in-app {
  flex: 1 1 auto;
}
.sgv2-review-modal .sgv2-review-meta {
  background-color: var(--bs-tertiary-bg);
}
.sgv2-review-modal {
  /* Square-ish so a row of numbers reads as a single control strip. */
}
.sgv2-review-modal .sgv2-review-page {
  min-width: 2.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.sgv2-review-modal {
  /*
   * Viewed and current share the same filled green; the question on screen is singled out by a
   * ring rather than a different fill, so "where I am" and "where I have been" stay readable at
   * a glance without introducing a third colour.
   *
   * `outline` rather than a border, so the current button does not grow by 2px and knock the
   * rest of the row out of alignment, and so it never fights Bootstrap's focus box-shadow.
   */
}
.sgv2-review-modal .sgv2-review-page-current {
  outline: 2px solid var(--bs-body-color);
  outline-offset: -2px;
}

/*
 * The details drawer, like the review modal, is portalled to <body> and therefore cannot be
 * nested inside `.study-guide-v2` -- those rules would never match.
 */
.sgv2-detail-drawer {
  /* Capped so the drawer can never exceed the viewport on a phone. */
  --bs-offcanvas-width: min(34rem, 100vw);
  /*
   * Chart colours come from the brand scale, which is defined identically in both themes, rather
   * than from the semantic aliases or from alpha over the card.
   *
   * Both of the earlier tricks measured badly. `--bs-danger` is not the brand red -- it is
   * firebrick #B22222 in light and #E51435 in dark -- so a wrong answer changed hue with the
   * theme. Worse, deriving the softer shades inverted them: 50% green over a dark card is darker
   * than full green, so "correct with hint" outranked "correct without", and mixing toward
   * `--bs-emphasis-color` turned "no evidence" into pale pink on dark, lighter than the ageing
   * evidence it is meant to outweigh.
   *
   * The shades carry distinct meaning and are not interchangeable: `miss` is "answered and got
   * it wrong", `faded` is "nothing recorded", and `none` is the stronger form of the latter,
   * used when a mastered objective has lost its evidence entirely.
   *
   * Every value here is chosen by measurement, not by eye -- see `files\cvd-check` in the
   * session folder, which simulates protanopia, deuteranopia and tritanopia and scores every
   * pair that can share a pie with CIEDE2000. Two rules drive the choices:
   *
   *   - a pair that crosses between "you are fine" and "do something" must stay far apart, since
   *     confusing those two inverts the meaning. `faded` against `full` was the worst case in
   *     the original palette at dE 8.7 under deuteranopia -- indistinguishable, and backwards.
   *   - every swatch must stay visible against the card it sits on in *both* themes, which is
   *     why the palest greens cannot be used and why `none` is no longer `--red-900`: at #5b000e
   *     it was only dE 11.4 from the dark theme's card and effectively disappeared.
   *
   * `faded` and `none` are literals because the brand scale has no step that satisfies either.
   * Re-run the checker after touching any of these.
   */
  --sgv2-swatch-full: var(--green-700);
  --sgv2-swatch-partial: var(--bs-green);
  --sgv2-swatch-warn: var(--bs-yellow);
  --sgv2-swatch-miss: var(--bs-red);
  --sgv2-swatch-faded: #fd698b;
  --sgv2-swatch-none: #9a0a02;
  /*
   * Each swatch carries a glyph as well as a colour, so the categories are still told apart when
   * the colours are not. The ink is whichever of black or white measures further from its own
   * swatch; all six clear 4.5:1, the lowest being white on `miss` at 4.68:1.
   */
  --sgv2-swatch-full-ink: #000;
  --sgv2-swatch-partial-ink: #000;
  --sgv2-swatch-warn-ink: #000;
  --sgv2-swatch-miss-ink: #fff;
  --sgv2-swatch-faded-ink: #000;
  --sgv2-swatch-none-ink: #fff;
}
.sgv2-detail-drawer .offcanvas-body {
  background-color: var(--bs-tertiary-bg);
}
.sgv2-detail-drawer {
  /* Each section is a plain card on the tinted drawer background. */
}
.sgv2-detail-drawer .sgv2-detail-card {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}
.sgv2-detail-drawer .sgv2-detail-card-title {
  border-bottom: 1px solid var(--bs-border-color);
}
.sgv2-detail-drawer {
  /*
   * The "exclude completed questions" switch, in a pill that reads as one control rather than a
   * stray checkbox under the launch buttons.
   *
   * Tinted with `--bs-tertiary-bg`, which is the drawer's own background, so the pill reads as a
   * recess in the card rather than a second raised surface competing with the buttons above it.
   * Both tokens flip with the theme, so this needs no dark-mode branch.
   */
}
.sgv2-detail-drawer .sgv2-exclude-toggle {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
}
.sgv2-detail-drawer {
  /*
   * Bootstrap's switch is already a pill; this only enlarges it so the track reads as a control
   * at the drawer's small type size.
   *
   * Laid out with flex rather than Bootstrap's float + negative-margin arrangement, because that
   * arrangement aligns the input to the text's line box -- and once the track is taller than the
   * label's line height, the knob sits visibly above the words.
   */
}
.sgv2-detail-drawer .sgv2-exclude-switch {
  align-items: center;
  display: flex;
  margin-bottom: 0;
  min-height: 0;
  padding-left: 0;
}
.sgv2-detail-drawer .sgv2-exclude-switch .form-check-input {
  flex: 0 0 auto;
  float: none;
  height: 1.25rem;
  margin: 0;
  width: 2.25rem;
}
.sgv2-detail-drawer .sgv2-exclude-switch .form-check-label {
  font-size: 0.875rem;
  padding-left: 0.5rem;
}
.sgv2-detail-drawer .sgv2-exclude-switch {
  /* The label is part of the control, so it must not look like inert text. */
}
.sgv2-detail-drawer .sgv2-exclude-switch .form-check-input:not(:disabled),
.sgv2-detail-drawer .sgv2-exclude-switch .form-check-input:not(:disabled) + .form-check-label {
  cursor: pointer;
}
.sgv2-detail-drawer {
  /*
   * Status stepper. The connector is drawn by the step to its right, spanning from the previous
   * dot's centre to its own, so the steps stay equal-width flex children and the line never
   * overhangs either end of the row.
   */
}
.sgv2-detail-drawer .sgv2-stepper-step {
  position: relative;
}
.sgv2-detail-drawer .sgv2-stepper-step + .sgv2-stepper-step::before {
  background-color: var(--bs-border-color);
  content: "";
  height: 2px;
  left: -50%;
  position: absolute;
  right: 50%;
  top: 1rem;
}
.sgv2-detail-drawer .sgv2-stepper-step-reached + .sgv2-stepper-step-reached::before {
  background-color: var(--bs-success);
}
.sgv2-detail-drawer .sgv2-stepper-dot {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  position: relative;
  width: 2rem;
  z-index: 1;
}
.sgv2-detail-drawer .sgv2-stepper-dot-complete {
  background-color: var(--bs-success);
}
.sgv2-detail-drawer .sgv2-stepper-dot-upcoming {
  background-color: var(--bs-secondary-color);
}
.sgv2-detail-drawer {
  /*
   * The current step is the only outlined dot. Drawn on the body background rather than left
   * transparent so the connector cannot show through the middle of the ring.
   */
}
.sgv2-detail-drawer .sgv2-stepper-dot-current {
  background-color: var(--bs-body-bg);
  box-shadow: inset 0 0 0 2px var(--bs-success);
  color: var(--bs-success);
}
.sgv2-detail-drawer .sgv2-maintenance-bar {
  background-color: var(--bs-tertiary-bg);
}
.sgv2-detail-drawer .sgv2-breakdown-pie {
  height: 8rem;
  width: 8rem;
  /* The swatch classes carry a stroke for the leader lines; a wedge wants fill only. */
}
.sgv2-detail-drawer .sgv2-breakdown-pie circle,
.sgv2-detail-drawer .sgv2-breakdown-pie path {
  stroke: none;
}
.sgv2-detail-drawer {
  /**
   * Leader lines are drawn across the whole chart row rather than inside the pie, because each
   * one has to reach a label living in a sibling flex column. They are what make the legend
   * readable without matching colours at all -- the association is geometric, so it survives any
   * form of colour blindness, and survives two categories whose colours the palette could not
   * pull far enough apart.
   */
}
.sgv2-detail-drawer .sgv2-breakdown-row {
  position: relative;
}
.sgv2-detail-drawer .sgv2-breakdown-leaders {
  height: 100%;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
}
.sgv2-detail-drawer .sgv2-breakdown-leaders polyline {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.sgv2-detail-drawer {
  /**
   * Each label is nudged onto its own wedge by a transform from a layout effect. A transform is
   * used rather than absolute positioning so the labels stay in flow: the column then still sizes
   * itself from its content, which is what lets a long label claim the width it needs instead of
   * being forced into an even split and wrapping. `position: relative` makes this column the
   * offset parent, so each label's natural position reads back in the pie's own coordinates.
   * The min-height keeps the row the right shape for the one frame before the first measurement
   * lands.
   */
}
.sgv2-detail-drawer .sgv2-breakdown-legend {
  min-height: 8rem;
  position: relative;
}
.sgv2-detail-drawer {
  /**
   * The swatch carries a glyph as well as a colour. The palette is chosen by measurement to keep
   * categories apart under colour blindness, but at this size it cannot manage it on colour
   * alone -- so the glyph is the thing that actually identifies the category, and the colour
   * reinforces it rather than the other way round.
   */
}
.sgv2-detail-drawer .sgv2-swatch {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  height: 0.95rem;
  justify-content: center;
  width: 0.95rem;
}
.sgv2-detail-drawer .sgv2-swatch > i {
  color: var(--sgv2-swatch-ink);
  font-size: 0.589rem;
  line-height: 1;
}
.sgv2-detail-drawer {
  /* Puts the dot on the outside of the left-hand legend column, mirroring the right. */
}
.sgv2-detail-drawer .sgv2-legend-reversed > span {
  flex-direction: row-reverse;
}
.sgv2-detail-drawer {
  /**
   * One class drives all three appearances of a category: the legend bullet's fill, the pie
   * wedge's fill, and the leader line's stroke. Keeping them on one rule is what stops a wedge
   * and the line pointing at it from ever disagreeing.
   */
}
.sgv2-detail-drawer .sgv2-swatch-full {
  --sgv2-swatch-ink: var(--sgv2-swatch-full-ink);
  background-color: var(--sgv2-swatch-full);
  fill: var(--sgv2-swatch-full);
  stroke: var(--sgv2-swatch-full);
}
.sgv2-detail-drawer .sgv2-swatch-partial {
  --sgv2-swatch-ink: var(--sgv2-swatch-partial-ink);
  background-color: var(--sgv2-swatch-partial);
  fill: var(--sgv2-swatch-partial);
  stroke: var(--sgv2-swatch-partial);
}
.sgv2-detail-drawer .sgv2-swatch-warn {
  --sgv2-swatch-ink: var(--sgv2-swatch-warn-ink);
  background-color: var(--sgv2-swatch-warn);
  fill: var(--sgv2-swatch-warn);
  stroke: var(--sgv2-swatch-warn);
}
.sgv2-detail-drawer .sgv2-swatch-miss {
  --sgv2-swatch-ink: var(--sgv2-swatch-miss-ink);
  background-color: var(--sgv2-swatch-miss);
  fill: var(--sgv2-swatch-miss);
  stroke: var(--sgv2-swatch-miss);
}
.sgv2-detail-drawer .sgv2-swatch-faded {
  --sgv2-swatch-ink: var(--sgv2-swatch-faded-ink);
  background-color: var(--sgv2-swatch-faded);
  fill: var(--sgv2-swatch-faded);
  stroke: var(--sgv2-swatch-faded);
}
.sgv2-detail-drawer .sgv2-swatch-none {
  --sgv2-swatch-ink: var(--sgv2-swatch-none-ink);
  background-color: var(--sgv2-swatch-none);
  fill: var(--sgv2-swatch-none);
  stroke: var(--sgv2-swatch-none);
}
.sgv2-detail-drawer .sgv2-breakdown-toggle {
  color: var(--bs-body-color);
}
.sgv2-detail-drawer .sgv2-breakdown-questions {
  margin-left: 2.5rem;
  padding-left: 1rem;
}
.sgv2-detail-drawer .sgv2-breakdown-questions li {
  margin-bottom: 0.35rem;
}

.sgv2-primary-border {
  border: 1px solid #C2CEE2 !important;
}

.quick-review-card-header {
  background-color: #7ac2f2;
}

.quick-review-v2-custom-input {
  width: 56px;
}

.quick-review-v2-start {
  min-width: 9rem;
}.question-list {
  height: 250px;
}
.question-list-theme-title {
  background: #F5F5F5;
  top: -1px;
  left: 0px;
  z-index: 1;
}
.question-list-inner-wrapper {
  position: absolute;
  top: calc(70px + 0.5vw);
  left: calc(0px + 0.5vw);
  right: calc(5px + 0.5vw);
  bottom: calc(5px + 0.5vw);
}

.fa-square-check {
  color: #007a33;
}

.green {
  color: #007a33;
}

.yellow {
  color: #DAA520;
}

.red {
  color: #B22222;
}

.orange {
  color: #D97706;
}

@media (max-width: 576px) {
  .question-list-theme-title {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
    padding-bottom: 0 !important;
  }
  .question-list-objective-title {
    display: -webkit-box !important;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    white-space: normal;
    padding-bottom: 0 !important;
  }
}@media (min-width: 576px) {
  .quick-review-select,
  .quick-review-input {
    max-width: 170px;
  }
}
.btn-width {
  max-width: 250px;
}.sg-sub-table-body {
  max-height: calc(100vh - 500px);
}.topic-section-mobile-progress-circle {
  width: 45px;
  min-width: 45px;
  height: 45px;
  min-height: 45px;
}

.green-list {
  background-color: #75B050;
}

.yellow-list {
  background-color: #F0A92D;
}

.red-list {
  background-color: #E51435;
}

.grey-list {
  background-color: #BEC7CB;
}@media (min-width: 768px) {
  .sg-topic-section-progress {
    max-width: 180px;
  }
}.resources-runner-body {
  min-height: 600px;
}
.resources-runner-inner-button {
  position: relative;
}
.resources-runner-inner-button.resource-active::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 3px;
  background-color: #007AC9;
}
.resources-runner-inner-button.resource-tab:hover {
  color: #667080 !important;
  background-color: #F3F5F9 !important;
}

.accordion {
  --bs-accordion-bg: #E7EAEC !important;
  --bs-accordion-bg-secondary: $primary !important;
  --bs-accordion-btn-icon-width: .875rem !important;
  --bs-accordion-btn-focus-box-shadow: none !important;
  --bs-accordion-active-bg: #E7EAEC !important;
  --bs-accordion-body-padding-x: 0 !important;
  --bs-accordion-body-padding-y: 0 !important;
  border: none !important;
}

.accordion-item {
  border: none !important;
}

.accordion-mobile {
  --bs-accordion-bg: #fff !important;
  --bs-accordion-active-bg: #fff !important;
  --bs-accordion-btn-padding-y: 0 !important;
  --bs-accordion-btn-padding-x: 0 !important;
}

.resources-runner-sidenav {
  transform: translateX(100%);
  width: 250px;
  transition: transform 0.3s ease;
}

.resources-runner-sidenav.open {
  transform: translateX(0);
}

@media screen and (max-width: 992px) {
  .resources-runner-sidenav {
    box-shadow: -6px 0px 6px 0px rgba(0, 0, 0, 0.2);
  }
}
@media (min-width: 992px) {
  .resources-runner-content {
    padding-right: 250px;
  }
  .resources-runner-sidenav {
    position: static !important;
    transform: none !important;
  }
}@media print {
  @page {
    size: A4, letter;
  }
  .sg-topic-section {
    background: none;
  }
  .sg-topic-section-header {
    margin-left: -1.5rem;
  }
}
.resources-runner-sidenav {
  min-height: 600px;
}

.mx-auto.d-print-none.mw-50 {
  max-width: 250px;
}

button.w-75.btn-width.m-center {
  margin: 0 auto;
}
/* Darker shade of the brand/check-mark green (--bs-success #0ABA94, which only
   reaches ~1.9:1) so the filled progress area keeps a >=3:1 contrast ratio
   (WCAG 1.4.11) against the gray-300 (#DEE2E6) track. #0a7a5b gives ~4.1:1. */
.question-progress {
  height: 20px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.question-progress .progress-bar {
  background-color: #0a7a5b !important;
}
.question-progress .progress {
  background-color: var(--bs-gray-300);
}

.question-progress-container {
  display: flex;
  width: 100%;
  min-height: 20px;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  gap: 2px;
}

.question-segment {
  flex: 1;
  color: var(--bs-black);
}

.question-segment.last {
  margin-right: 0;
}

/* Colors */
.question-segment.markedForReview {
  background-color: var(--bs-warning);
}

.question-segment.filled {
  background-color: #0a7a5b;
}

.question-segment.empty {
  background-color: var(--bs-gray-300);
}

thead.sticky-top > tr > th {
  background-color: transparent;
}

.form-check-input[type=checkbox] {
  border-color: #444;
}

/* Keep the test navigation (buttons + progress) pinned to the top of the
   scrollable runner panel while the user scrolls the question body. Sticky is
   applied only on mobile (< lg / 992px) — on desktop there's enough vertical
   room that the nav can scroll away with the rest of the content.
   The opaque fill + 1rem top padding live on the inner <nav> (not this wrapper)
   so the progress bar below keeps its rounded corners without a solid rectangle
   showing white squares behind them. The fill uses var(--neutral-50) (#f2f5fa)
   to match the off-white page backdrop, so the strip above the header looks
   like the same padding as the side/bottom gutters. */
.web-test-runner__nav > nav {
  padding-top: 1rem;
  background-color: var(--neutral-50);
}
[data-bs-theme=dark] .web-test-runner__nav > nav {
  background-color: var(--bg-theme);
}
@media (max-width: 991.98px) {
  .web-test-runner__nav {
    position: sticky;
    top: 0;
    z-index: 1020;
  }
}

/* The sticky nav fill and the progress strip below it are two separate opaque
   blocks with no background on the transparent wrapper (kept transparent so the
   progress bar's rounded bottom corners show the page, not a solid rectangle).
   While scrolling, their edges can round to different sub-pixels and leave a 1px
   transparent seam that reveals the question body text behind them. Pulling the
   strip up 1px so it always overlaps the nav's bottom edge closes that slit. */
.web-test-runner__progress {
  margin-top: -1px;
}.responsive-btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

.responsive-stack {
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 946px) {
  .responsive-stack {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 495px) {
  .hide-text-xs {
    display: none !important;
  }
  .responsive-btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
  }
}
.responsive-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.responsive-nav-next {
  order: 0;
}

@media (min-width: 576px) {
  .responsive-nav-next {
    order: 10;
    margin-left: auto;
  }
}
.loading-logo--sm {
  width: 200px;
}

.loading-logo--md {
  width: 250px;
}

.loading-logo--lg {
  width: 300px;
}

.loading-message {
  color: var(--primary-strong-active);
}

.loading-message--dark {
  color: var(--bs-white);
}

.loading-spinner {
  color: var(--primary-strong-active);
}

.loading-spinner--dark {
  color: var(--bs-white);
}

.status-icon-box {
  align-items: center;
  background-color: var(--bs-gray-600);
  border-radius: 4px;
  color: transparent;
  display: inline-flex;
  font-size: 1rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.status-icon-box--sm {
  font-size: 0.75rem;
  height: 1.4rem;
  width: 1.4rem;
}
.status-icon-box--answered {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--answered > i {
  color: var(--bs-white);
}
.status-icon-box--answered-alt {
  background-color: var(--bs-primary);
  color: var(--bs-white);
}
.status-icon-box--answered-alt > i {
  color: var(--bs-white);
}
.status-icon-box--viewed {
  background-color: var(--bs-border-color-translucent);
  color: var(--bs-secondary-color);
}
.status-icon-box--viewed > i {
  color: var(--bs-secondary-color);
}
.status-icon-box--review {
  background-color: var(--bs-warning);
  color: var(--bs-black);
}
.status-icon-box--review > i {
  color: var(--bs-black);
}
.status-icon-box--complete {
  background-color: #0a7a5b;
  color: var(--bs-white);
}
.status-icon-box--complete > i {
  color: var(--bs-white);
}
.status-icon-box--incorrect {
  background-color: var(--bs-danger);
  color: var(--bs-white);
}
.status-icon-box--incorrect > i {
  color: var(--bs-white);
}.web-test-runner {
  background-color: var(--neutral-50);
}
[data-bs-theme=dark] .web-test-runner {
  background-color: var(--bg-theme);
}
.web-test-runner__cursor-grab {
  cursor: grab !important;
}
.web-test-runner__wrap-text {
  white-space: normal;
  word-break: break-word;
}
.web-test-runner__dropzone-area {
  min-width: 250px;
  max-width: 300px;
}
.web-test-runner__choice-btn {
  min-width: 300px;
  max-width: 800px;
  padding-left: 2.5rem !important;
  padding-right: 2.5rem !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.web-test-runner__no-click {
  pointer-events: none;
  transition: none !important;
}
.web-test-runner__no-click:hover, .web-test-runner__no-click:focus {
  filter: none !important;
  box-shadow: none !important;
}
.web-test-runner__left-icon {
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bs-white);
  font-size: 1em;
}
.web-test-runner__right-icon {
  right: 12px;
  top: 50%;
  color: var(--bs-white);
  transform: translateY(-50%);
  font-size: 1em;
}
.web-test-runner__pulse {
  animation: pulse 1s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.web-test-runner__helpText-card {
  touch-action: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1030;
}
.web-test-runner__helpText-card img {
  max-width: none;
  height: auto;
}
.web-test-runner .min-h-0 {
  min-height: 0;
}
.web-test-runner__helpText-header {
  cursor: grab;
  user-select: none;
}
.web-test-runner__helpText-header > *:not(.btn-close) {
  cursor: inherit;
}
.web-test-runner__helpText-header .web-test-runner__helpText-reset-btn {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3e%3cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3e%3c/svg%3e");
  background-size: 1.25em;
}
.web-test-runner__helpText-header .web-test-runner__helpText-move-btn {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath fill-rule='evenodd' d='M7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10M.146 8.354a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L1.707 7.5H5.5a.5.5 0 0 1 0 1H1.707l1.147 1.146a.5.5 0 0 1-.708.708zM10 8a.5.5 0 0 1 .5-.5h3.793l-1.147-1.146a.5.5 0 0 1 .708-.708l2 2a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708L14.293 8.5H10.5A.5.5 0 0 1 10 8'/%3e%3c/svg%3e");
  background-size: 1.25em;
}
.web-test-runner__helpText-header .web-test-runner__helpText-move-btn[aria-pressed=true] {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 1px;
}
.web-test-runner__helpText-header:active {
  cursor: grabbing;
}
.web-test-runner__helpText-resize-handle {
  position: absolute;
  z-index: 10;
}
.web-test-runner__helpText-resize-left, .web-test-runner__helpText-resize-right {
  top: 0;
  height: 100%;
  width: 6px;
  cursor: ew-resize;
}
.web-test-runner__helpText-resize-left {
  left: 0;
}
.web-test-runner__helpText-resize-right {
  right: 0;
}
.web-test-runner__helpText-resize-corner {
  width: 12px;
  height: 12px;
}
.web-test-runner__helpText-resize-tl {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}
.web-test-runner__helpText-resize-tr {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}
.web-test-runner__helpText-resize-bl {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}
.web-test-runner__helpText-resize-br {
  bottom: 0;
  right: 0;
  cursor: nwse-resize;
}:root {
  --top-nav-height: 60px;
}

.navbar {
  height: var(--top-nav-height);
}
.navbar .navbar-brand i {
  transform: rotate(180deg);
}
.navbar .navbar-brand img {
  width: 180px;
}.top-nav-layout-content {
  margin-top: var(--top-nav-height);
}.sms-launcher .sms-launcher-loading-img {
  width: 180px;
}
.sms-launcher .sms-launcher-download-btn {
  background-color: #259053;
  border-radius: 6px;
  color: var(--bs-white);
  font-size: 1.5625rem;
  padding: 0.625rem;
  text-decoration: none;
  width: 300px;
}
.sms-launcher .sms-launcher-download-btn:hover, .sms-launcher .sms-launcher-download-btn:focus {
  color: var(--bs-white);
  cursor: pointer;
}
.sms-launcher .sms-launcher-mac-fallback-p {
  max-width: 500px;
}.content-icon {
  color: #7d609c;
}

.study-guide-icon {
  color: #0ABA94;
}

.title-wrapper {
  max-width: 430px;
}

.vendor-logo {
  width: 80px;
}

.vendor-logo-mobile {
  max-height: 30px;
}

.complete-status,
.due-date,
.last-activity,
.author {
  min-width: 6.625rem;
}

.last-activity-date::first-letter {
  text-transform: capitalize;
}

.content-start-button button,
.loading-button {
  min-width: 114px;
}

.content-tile-kebab {
  height: 32px;
  width: 32px;
}

.study-guide-start-align {
  margin-right: 50px;
}

.dropdown-toggle::after {
  display: none !important;
}.new-test-card {
  max-width: 50rem;
}
.new-test-card-setting {
  display: grid;
  grid-template-columns: 8.125rem 1fr;
}
.new-test-card-setting select {
  min-width: 11.75rem;
  width: fit-content;
  border-radius: 4px;
}
.new-test-card-setting select:focus, .new-test-card-setting select:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--bs-primary);
}
@media only screen and (max-width: 768px) {
  .new-test-card-setting select {
    width: 100%;
    min-width: 0;
  }
}
.new-test-card-info-box-inner {
  min-width: 6.25rem;
  height: 6.25rem;
}
.new-test-card-info-box-inner div:nth-of-type(1) {
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 3.125rem;
}
.new-test-card-info-box-inner div:nth-of-type(2) {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 0.875rem;
}
.new-test-card-info-box-outer {
  font-size: 1.125rem;
}
.new-test-card-footer-button {
  width: 10rem;
  height: 2.188rem;
  height: 2.5rem;
}

.mode-description {
  grid-column-start: 2;
}

@media only screen and (max-width: 576px) {
  .new-test-card-info-box-inner {
    min-width: 5rem;
    height: 5rem;
  }
  .new-test-card-info-box-inner div:nth-of-type(1) {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
  .new-test-card-info-box-inner div:nth-of-type(2) {
    white-space: nowrap;
  }
  .new-test-card-info-box-outer {
    font-size: 0.938rem;
  }
}.program {
  min-height: 100%;
}

.program-header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 3.75rem;
  background-color: var(--bg-theme);
}.content-loader {
  height: 8.75rem;
  width: 18.75rem;
}.skill-tree {
  --parent-tile-passed-color: #007a33;
}
[data-bs-theme=dark] .skill-tree {
  --parent-tile-passed-color: var(--success);
}
.skill-tree .parent-tile-passed {
  border-left: 5px solid var(--parent-tile-passed-color);
}
.skill-tree .parent-tile-not-passed {
  border-left: 5px solid #B22222;
}
.skill-tree .parent-tile-not-taken {
  border-left: 5px solid #667080;
}
.skill-tree .skill-tree-leaf-text:hover {
  background-color: var(--bg-theme);
}

.skill-tree,
.score-report-table {
  height: 70vh;
  overflow-y: auto;
}

.score-report-table .table thead th.bg-theme-item {
  background-color: var(--bg-theme-item) !important;
}

.actionItem {
  cursor: pointer;
  border: 2px solid transparent !important;
  transition: border-color 0.15s ease;
}
.actionItem:focus-within {
  border-color: var(--primary-strong-hover) !important;
}
.actionItem > button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
.actionItem.bg-theme {
  border: 2px solid var(--primary-strong-hover) !important;
  font-weight: 700;
  background-color: rgba(0, 121, 201, 0.2588235294) !important;
}

.actionMobile {
  max-height: 90dvh;
}

.arc-gauge {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.arc-gauge-center {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, -50%);
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .actionMobile {
    max-height: 70dvh !important;
  }
}
@media print {
  body,
  .bg-theme-item-secondary {
    background-color: #fff !important;
  }
  *:not(.print-keep-color):not(i) {
    color: #000 !important;
  }
  .program-header {
    margin-bottom: 0 !important;
  }
  .card,
  .card-body {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .print-only {
    flex-wrap: wrap !important;
  }
  .print-only > .print-only-column {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    padding: 0 !important;
  }
  .skill-tree .skill-tree-leaf-text > div {
    border-left: none !important;
  }
  .arcGauge-wrapper {
    position: relative !important;
    width: fit-content !important;
    margin: 0 auto !important;
  }
  .arc-gauge-center {
    position: absolute !important;
    left: 50% !important;
    top: 70% !important;
    transform: translate(-50%, -60%) !important;
    width: fit-content !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .skill-tree,
  .score-report-table {
    overflow-y: hidden;
    height: 100%;
  }
  .skill-tree .data-item {
    padding: 0;
    min-height: 0;
  }
  .skill-tree .parent-tile {
    border: none !important;
  }
}
.question-stem-truncate {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.nested-tab-strip.nav-tabs .nav-item .nav-link.active {
  border-bottom-color: var(--bg-theme-item) !important;
}

[data-bs-theme=dark] .nested-tab-strip.nav-tabs .nav-item .nav-link:not(.active),
[data-bs-theme=dark] .nested-tab-strip.nav-tabs .nav-item .nav-link[aria-selected=false] {
  color: #fff !important;
}
[data-bs-theme=light] .nested-tab-strip.nav-tabs .nav-item .nav-link:not(.active),
[data-bs-theme=light] .nested-tab-strip.nav-tabs .nav-item .nav-link[aria-selected=false] {
  color: #565E6B !important;
}.cloud-testing-header {
  background-color: #003366;
}

.remote-test-exit-btn {
  color: #ffffff;
  cursor: pointer;
  margin-right: 20px;
}
.remote-test-exit-btn i {
  font-weight: 300;
}

.remote-test-feedback-btn {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}

.remote-test-logo {
  max-height: 40px;
  max-width: 180px;
}

.remote-test-iframe {
  border: 0;
  width: 100%;
  aspect-ratio: auto !important;
}

.remote-test-feedback-textarea {
  resize: none;
}

.star-rating-star {
  color: #007AC9;
  cursor: pointer;
  transition: color 0.15s;
}
.star-rating-star.active {
  color: #007AC9;
}.quick-access-button,
.recent-activity-button {
  height: 100px;
}

.quick-access-button .profile {
  color: #7d609c;
}
.quick-access-button .redeemAccessCode {
  color: #0d676d;
}
.quick-access-button .transcript {
  color: #126cb6;
}
.quick-access-button .support {
  color: #D34400;
}

.warning-icon-wrapper {
  width: 2.813rem;
  height: 1.563rem;
  border-bottom-left-radius: 6px;
}.filter-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg-theme);
  padding: 0.5rem 0;
  margin-inline-start: -24px;
  margin-inline-end: -24px;
}
.filter-bar-section {
  width: 100%;
}
@media only screen and (min-width: 992px) {
  .filter-bar-section {
    width: 248px;
  }
}.content-card-inner {
  height: 9.688rem;
  border: 2px solid transparent;
}
.content-card-icon {
  max-height: 6rem;
  max-width: 12.5rem;
}
.content-card-due-date {
  color: #FFF;
  background: #f2b907;
  top: -2px;
  right: -2px;
  height: 2.25rem;
  width: 5.625rem;
  border-radius: 0 6px 0 6px;
  font-size: 0.75rem;
  line-height: 1;
}
@media (max-width: 576px) {
  .content-card-due-date {
    font-size: 0.625rem;
    width: 4.5rem;
    height: 1.75rem;
  }
}

.content-card:hover .content-card-inner {
  border: 2px solid #003366;
}.banner-caption {
  width: 38%;
  left: 4%;
  max-width: 440px;
  color: #003366;
}

@media (min-width: 576px) {
  .banner-caption h1 {
    font-size: 22px;
    line-height: 22px;
  }
}
@media (min-width: 768px) {
  .banner-caption h1 {
    font-size: 32px;
    line-height: 32px;
  }
}
@media (min-width: 1200px) {
  .banner-caption h1 {
    font-size: 42px;
    line-height: 42px;
  }
}
@media (min-width: 1400px) {
  .banner-caption h1 {
    font-size: 48px;
    line-height: 48px;
  }
}

@media (min-width: 576px) {
  .banner-logo {
    max-width: 82px;
  }
}
@media (min-width: 768px) {
  .banner-logo {
    max-width: 120px;
  }
}
@media (min-width: 1200px) {
  .banner-logo {
    max-width: 158px;
  }
}
@media (min-width: 1400px) {
  .banner-logo {
    max-width: 180px;
  }
}.custom-text-overflow {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}

@media (min-width: 992px) {
  .dashboard-main {
    margin-left: 250px;
  }
}
/*
 * iOS zooms the page when a text field or select is below 16px.
 * Desktop and Android keep their compact sizes. Inline font-size still wins,
 * so the test-runner text-size control is unchanged. The :not() list raises
 * specificity above .auth-card .form-control and .input-group-sm > .form-control.
 */
html.ios :is(input:not([type=button]):not([type=checkbox]):not([type=color]):not([type=file]):not([type=hidden]):not([type=image]):not([type=radio]):not([type=range]):not([type=reset]):not([type=submit]),
select,
textarea) {
  font-size: 16px;
}

/* EVERYTHING BELOW CAN BE DELETED WHEN SMS6 IS GONE! */
/*
 * Global accessible-hide floor. Bootstrap's `.visually-hidden` is served from an
 * externally injected <link> (/Stylesheets/bootstrap.min.css via bootstrapTheme.ts),
 * not bundled. In the legacy SMS6 embedded browser that sheet's rule isn't applied
 * (stale cache), so screen-reader-only text (question count/ID, question-list status,
 * etc.) renders visibly. Defining it here in the always-loaded app bundle guarantees
 * these spans stay hidden in every host while remaining available to screen readers
 * (off-screen clip, not display: none).
 */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * The question-list off-canvas is a flex column: a scrollable list followed by a
 * fixed action footer (Save & Exit / Finish). Old Chromium (legacy SMS6) defaults
 * flex items to min-height: auto, so the tall list refuses to shrink and squishes
 * the footer buttons to an unusable sliver. Pin the scroll area to min-height: 0 so
 * it shrinks and scrolls internally, and stop the footer from shrinking.
 */
.question-list__scroll {
  min-height: 0;
}

.question-list__footer {
  flex-shrink: 0;
}

/*
 * LEGACY SMS6 (Chrome 52) - remove this whole block once SMS6 is deprecated.
 * Chrome < 65 has no `display: contents`, so `@supports not` only matches old Chromium.
 *
 * 1. The FocusTrap wrapper (inline `display: contents`) is ignored and becomes a real
 *    block flex item, so the offcanvas header/body/footer are no longer direct flex
 *    children and the body never gets a scrollbar. Re-create the offcanvas column layout
 *    on the wrapper itself.
 * 2. Chrome < 56 ignores `position: relative` on <tr>, so each row's
 *    `.stretched-link::after` uses the fixed .offcanvas as its containing block and
 *    covers the whole panel (the last row in DOM order wins every click). Confine the
 *    overlay to its own <td> instead.
 */
@supports not (display: contents) {
  .question-list__focus-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }
  .question-list__focus-wrap > .offcanvas-header {
    flex-shrink: 0;
  }
  .question-list__focus-wrap > .offcanvas-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  .question-container__question-row td {
    position: relative;
  }
}.electron-drag, .root {
  -webkit-app-region: drag;
}

.electron-no-drag {
  -webkit-app-region: no-drag;
}

.root {
  background-color: transparent;
  width: 100%;
}

.form-check-input:checked {
  background-color: var(--bs-primary);
}

.nav-pills .nav-link:hover {
  color: var(--bs-nav-link-hover-color) !important;
}
.nav-pills .nav-link:active {
  color: var(--bs-nav-pills-link-active-color) !important;
  background: var(--bs-nav-pills-link-active-bg) !important;
}
.nav-pills .nav-link.active {
  color: var(--bs-nav-pills-link-active-color) !important;
}

.main-nav, .plugin-nav {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.16));
}

.main-nav {
  z-index: 3;
}

.plugin-nav {
  z-index: 2;
}.launch-wizard {
  width: 800px;
}
.launch-wizard form .form-group {
  display: flex;
  margin-bottom: 0;
}
.launch-wizard form .form-group .form-label {
  margin-bottom: 0;
}
.launch-wizard form .form-group input {
  margin-right: 1rem;
}
.launch-wizard form .form-group.disabled .form-label {
  opacity: 0.75;
  text-decoration-line: line-through;
}
.launch-wizard .compatibility-link {
  margin-top: 2rem;
}
.launch-wizard .compatibility-link a {
  color: var(--bs-link-color);
}
.launch-wizard .compatibility-link a:hover, .launch-wizard .compatibility-link a:focus {
  color: var(--bs-link-hover-color);
}
.launch-wizard .app-details {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.launch-wizard .app-details small {
  opacity: 0.75;
}.protocol-launcher .logo {
  width: 300px;
  height: auto;
}
.protocol-launcher .spinner-border {
  border-width: 8px;
  width: 75px;
  height: 75px;
}/*$vite$:1*/