:root {
  --lighter-grey: rgb(235, 235, 235);
  --light-grey: rgb(210, 210, 210);
  --med-light-grey: rgb(160, 160, 160);
  --med-grey: rgb(110, 110, 110);
  --med-dark-grey: rgb(90, 90, 90);
  --dark-grey: rgb(40, 40, 40);
  --darker-grey: rgb(10, 10, 10);
  --bright-red: rgb(255, 0, 0);
  --dark-red: rgb(50, 0, 0);
  --marker-pair-editor-accent: rgb(245, 118, 0);
  --global-editor-accent: rgb(245, 0, 0);
  --inherited-accent: dimgrey;
}

@keyframes valid-input {
  0% {
    background-color: tomato;
  }
  100% {
    background-color: lightgreen;
  }
}

@keyframes invalid-input {
  0% {
    background-color: lightgreen;
  }
  100% {
    background-color: tomato;
  }
}

@keyframes flash {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.msg-div,
.long-msg-div,
.long-msg-div input:not([type='file']) {
  display: inline-block;
  margin: 4px;
  padding: 4px;
  color: var(--light-grey);
  background: var(--dark-grey);
  box-shadow: 2px 2px 3px 0px var(--darker-grey);
  border-radius: 2px;
  border-color: var(--med-grey);
  border-width: 1px 0px 0px 1px;
  font-size: 10pt;
  font-weight: 500;
}

.long-msg-div {
  display: block;
}

.flash-div {
  animation-name: flash;
  animation-duration: 5s;
  animation-fill-mode: forwards;
}

.marker {
  width: 1px;
  height: 14px;
}

.start-marker {
  fill: lime;
  pointer-events: none;
}

.end-marker {
  fill: gold;
  pointer-events: visibleFill;
}

.end-marker:hover {
  fill: var(--bright-red);
}

.selected-marker-overlay {
  fill: black;
  width: 1px;
  height: 8px;
  pointer-events: none;
}
.selected-marker-overlay-hidden {
  fill-opacity: 0.3;
}

#settings-editor-div {
  display: flex;
}

.settings-editor-panel {
  display: inline;
  flex-grow: 1;
  color: var(--med-grey);
  font-size: 12pt;
  margin: 3px;
  padding: 2px 6px 0px 4px;
  border: 2px solid var(--med-grey);
  border-radius: 5px;
  background: var(--dark-red);
}

.settings-editor-panel > legend {
  display: block;
  width: fit-content;
  font-size: 12pt;
  text-shadow:
    -1px -1px 0 black,
    1px -1px black,
    -1px 1px 0 black,
    1px 1px 0 black,
    -1px 0px 0px black,
    0px -1px 0px black,
    1px 0px 0px black,
    0px 1px 0px black;
  padding: 0px 4px 0px 4px;
  margin-left: 12px;
}

.settings-editor-input-div {
  display: inline-block;
  color: grey;
  font-size: 11.5pt;
  margin: 0px 0px 6px 2px;
  padding: 4px 10px 4px 4px;
  background: var(--dark-grey);
  box-shadow: 2px 2px 3px 0px var(--darker-grey);
  border-radius: 2px;
  border-color: var(--med-grey);
  border-style: solid;
  border-width: 1px 0px 0px 1px;
  vertical-align: top;
}

.settings-editor-input-div span {
  display: block;
  color: var(--light-grey);
  margin-bottom: 2px;
}

.settings-editor-input-div select option {
  color: black;
}

.settings-editor-input-div select option:first-child {
  color: dimgrey;
}

.multi-input-div {
  display: inline-flex;
  width: fit-content;
}

.settings-editor-input-div > div {
  display: inline-block;
  margin-right: 6px;
}
.settings-editor-input-div > div:last-of-type {
  margin-right: -4px;
}

.settings-editor-input-div select,
.settings-editor-input-div input:not([type='radio']),
#marker-pair-number-input {
  display: block;
  font-weight: bold;
  background: var(--lighter-grey);
  width: 100%;
  border: none;
  box-shadow: #151515 2px 2px 2px 0px;
}

.settings-editor-input-div input:not([type='radio']),
#marker-pair-number-input {
  border-radius: 5px;
  padding-right: 4px;
  padding-left: 2px;
}

.settings-info-display span,
#global-settings-rotate label,
#merge-list-div input,
#global-settings-rotate input,
#marker-pair-number-input {
  display: inline;
  width: auto;
}

#marker-pair-number-input {
  vertical-align: top;
  border: 1px solid black;
}

.settings-editor-input-div input:valid,
#marker-pair-number-input:valid {
  animation-name: valid-input;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.settings-editor-input-div input:invalid,
#marker-pair-number-input:invalid {
  animation-name: invalid-input;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.marker-pair-settings-editor-highlighted-div {
  border: 2px solid var(--marker-pair-editor-accent) !important;
}

.global-settings-editor-highlighted-div {
  border: 2px solid var(--global-editor-accent) !important;
}

.marker-pair-settings-editor-highlighted-label {
  color: var(--marker-pair-editor-accent) !important;
}

.global-settings-editor-highlighted-label {
  color: var(--global-editor-accent) !important;
}

.inherited-settings-highlighted-label {
  color: var(--inherited-accent);
}

#markers-svg,
#selected-marker-pair-overlay,
#start-marker-numberings,
#end-marker-numberings {
  font-size: 6.5pt;
  width: 100%;
  height: 300%;
  top: -5px;
  position: absolute;
  z-index: 99;
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.25);
  stroke-width: 2px;
}

#selected-marker-pair-overlay {
  pointer-events: none;
}

#start-marker-numberings {
  top: -19px;
}

#end-marker-numberings {
  top: 5px;
}

.markerNumbering {
  pointer-events: visibleFill;
  user-select: none;
}
.markerNumbering:hover {
  fill: var(--bright-red);
  cursor: pointer;
}

.startMarkerNumbering {
  fill: lime;
}

.endMarkerNumbering {
  fill: gold;
}

#crop-div {
  pointer-events: none;
  z-index: 10;
}

#begin-crop-preview-div {
  pointer-events: none;
  z-index: 11;
}

#crop-svg,
#begin-crop-preview-svg {
  width: 100%;
  height: 100%;
  top: 0px;
  position: absolute;
}

#cropChartCanvas {
  background-color: rgb(24, 24, 24);
}

#shortcutsTableToggleButton {
  cursor: help;
  position: relative;
  float: left;
}

.ytc-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.ytc-modal.hidden {
  display: none;
}

.ytc-modal-content {
  position: relative;
  width: 90vw;
  height: 90vh;
  background: black;
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ytc-canvas-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#ytc-zoom-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Maintain aspect ratio */
  background: black; /* Letterboxing */
}
