/* Global styling to prevent tap highlight */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Global body styling */
body {
  -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
  -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
  height: 100%;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

/* UNUSED - Can be removed */
.topBar * {
  color: white;
}

/* Used in: TermsPopup - Message box modal overlay */
.messageBox {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0, 0, 0); /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Used in: TermsPopup - Message box content styling */
.messageBoxContent {
  background-color: #23233c;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Could be more or less, depending on screen size */
  color: #ffffff;
}

/* Hide video UI controls on iOS */
video::-webkit-media-controls {
  display: none !important;
}

*::-webkit-media-controls-panel {
  display: none !important;
  -webkit-appearance: none;
}

*::--webkit-media-controls-play-button {
  display: none !important;
  -webkit-appearance: none;
}

*::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

video::-webkit-media-controls-play-button {
}

video::-webkit-media-controls-volume-slider {
}

video::-webkit-media-controls-mute-button {
}

video::-webkit-media-controls-timeline {
}

video::-webkit-media-controls-current-time-display {
}

video {
  pointer-events: none;
}

/* UNUSED - Can be removed (duplicate of pulseAnim in VizTrainerVideo.css) */
.pulseAnim {
  animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite;
  border-radius: 22px;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 1);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 1);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(255, 255, 255, 1);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

/* UNUSED - Can be removed */
.pulseImage {
  border-radius: 5px;
  background: #00000050;
  cursor: pointer;
  animation: pulse 2s infinite;
  -webkit-animation: pulse 2s infinite;
}
.pulseImage:hover {
  background: #00000050;
}

@-webkit-keyframes pulseImage {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  70% {
    -webkit-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}
@keyframes pulseImage {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
  }
  70% {
    -moz-box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 10px rgba(204, 169, 44, 0);
  }
  100% {
    -moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
    box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
  }
}

/* Used in: QMSVideo, TrainerVideo - Pulse animation version 2 */
.pulse2 {
  display: inline-block;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: "red";
  cursor: pointer;
  /* box-shadow: 0 0 0 rgba(255, 255, 255, 0.4);
  -webkit-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1); */
}
.pulse2:hover {
  background: #00000050;
}
@-webkit-keyframes pulse2 {
  to {
    box-shadow: 0 0 0 45px rgba(255, 0, 0, 0);
  }
}
@-moz-keyframes pulse2 {
  to {
    box-shadow: 0 0 0 45px rgba(255, 0, 0, 0);
  }
}
@-ms-keyframes pulse2 {
  to {
    box-shadow: 0 0 0 45px rgba(255, 0, 0, 0);
  }
}
@keyframes pulse2 {
  to {
    box-shadow: 0 0 0 45px rgba(255, 0, 0, 0);
  }
}

/* UNUSED - Can be removed */
.i {
  height: 2px;
  width: 1px;
  position: relative;
  background: transparent;
  margin-left: 42px;
  margin-top: 42px;
  border-radius: 50%;
  display: inline-block;
  padding: 5px;
  z-index: 99999999999;
  box-shadow: 0 0 0 rgba(255, 145, 0, 1);
  -webkit-animation: pulse2 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
  -moz-animation: pulse2 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse2 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse2 1.95s infinite cubic-bezier(0.66, 0, 0, 1);
}

/* Used in: Notices - Opacity variations for notices */
.opacy08 {
  opacity: 0.8;
}
.opacy1 {
  opacity: 1;
}

/* UNUSED - Can be removed */
.i2 {
  height: 2px;
  width: 1px;
  position: relative;
  background: transparent;
  margin-left: 42px;
  margin-top: 42px;
  border-radius: 50%;
  display: inline-block;
  padding: 5px;
  box-shadow: 0 0 0 rgb(255, 0, 0);
  -webkit-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0.5, 0.5, 1);
  -moz-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  -ms-animation: pulse2 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
  animation: pulse2 1.25s infinite cubic-bezier(0.66, 0.5, 0.5, 1);
}

/* Used in: Notices - Visual indicator for seen items */
.iseen {
  height: 2px;
  width: 1px;
  position: relative;
  background: transparent;
  margin-left: 42px;
  margin-top: 42px;
  border-radius: 50%;
  display: inline-block;
  padding: 5px;
  filter: drop-shadow(0 0 2px rgb(58, 255, 84, 1))
    drop-shadow(0 0 2px rgb(58, 255, 84, 1));
  -webkit-filter: drop-shadow(0 0 2px rgb(58, 255, 84, 1))
    drop-shadow(0 0 2px rgb(58, 255, 84, 1));
  -ms-filter: drop-shadow(0 0 2px rgb(58, 255, 84, 1))
    drop-shadow(0 0 2px rgb(58, 255, 84, 1));
  -moz-filter: drop-shadow(0 0 2px rgb(58, 255, 84, 1))
    drop-shadow(0 0 2px rgb(58, 255, 84, 1));
}

/* UNUSED - Can be removed */
.track-horizontal {
  background-color: blue;
}

/* Used in: LineCard, ProjectCard, Sequence, VariantCard - Card focus styling */
.cardFocus:focus-visible {
  outline: 1px solid #199fff;
}
.cardFocus button:focus-visible {
  border: 1px solid #199fff;
}

/* SurveyJS styling fixes - Used for survey components throughout the application */

/* SurveyJS Dropdown Background Fix */
.sv-dropdown-popup,
.sv-list,
.sv-list__container,
.sv-dropdown-popup .sv-list,
.sv-popup .sv-list,
.sv-selectbase__list {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.sv-list__item,
.sv-selectbase__item {
  background-color: #ffffff !important;
}

.sv-list__item:hover,
.sv-selectbase__item:hover {
  background-color: #f5f5f5 !important;
}

.sv-list__item--selected,
.sv-selectbase__item--selected {
  background-color: #e3f2fd !important;
}

.sv-dropdown-popup {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px !important;
}

/* SurveyJS Clear Button Fix */
.sd-dropdown_clean-button {
  display: none !important;
}