/* src/viewer/viewer.module.css */
:root {
  font-family:
    Arial,
    Helvetica,
    sans-serif;
}
body {
  padding: 0;
  margin: 0;
  --sidebar-width: 2.1em;
  --controlpanel-width: 10em;
  position: fixed;
}
kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
  position: relative;
}
kbd + kbd {
  margin-left: 1em;
  &::before {
    content: "+";
    position: absolute;
    left: -.5em;
    transform: translateX(-50%);
  }
}
.viewer_viewer {
  display: grid;
  grid: "sidebar videoplayer controlpanel" 1fr "sidebar detectionbar detectionbar" var(--force-detectionbar-height, var(--detectionbar-height)) "sidebar behaviour behaviour" var(--force-behaviour-height, var(--behaviourbar-height)) / var(--sidebar-width) 1fr var(--force-controlpanel-width, var(--controlpanel-width));
  &.viewer_no_controlpanel {
    --force-controlpanel-width: 0;
  }
  &.viewer_no_detectionbar {
    --force-detectionbar-height: 0;
  }
  &.viewer_no_behaviourbar {
    --force-behaviour-height: 0;
  }
  height: 100vh;
  width: 100vw;
}
.viewer_sidebar {
  grid-area: sidebar;
}
.viewer_videoplayer {
  grid-area: videoplayer;
  overflow: hidden;
}
.viewer_controlpanel {
  grid-area: controlpanel;
  display: flex;
  flex-flow: column nowrap;
  overflow-y: scroll;
}
.viewer_detectionbar {
  grid-area: detectionbar;
}
.viewer_behaviour {
  grid-area: behaviour;
  background-color: hsl(140, 50%, 95%);
  overflow: scroll;
}
.viewer_popup_sizer {
  margin-left: calc(max(var(--sidebar-width) + 1em, 3em));
  max-width: fit-content;
}

/* src/viewer/sidebar.module.css */
.sidebar_sidebar {
  position: relative;
  .sidebar_top_bottom_buttons {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    box-sizing: border-box;
    padding: .8em 0;
    .sidebar_sidebar_buttons {
      font-size: 22px;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch;
      gap: .3em;
      & > button {
        width: unset;
      }
    }
  }
}

/* src/lib/icon.module.css */
.icon_icon3 {
  font-family: "Material Symbols Outlined";
  height: 1.6125em;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "liga";
}
.icon_iconWrapper3 {
  position: relative;
  top: .1em;
  display: inline-block;
  height: calc(1em - 1px);
  overflow-y: hidden;
}

/* node_modules/@material-symbols/font-400/index.css */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../material-symbols-outlined-OUZOYCEU.woff2") format("woff2");
}
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../material-symbols-rounded-A7L3AOO7.woff2") format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
@font-face {
  font-family: "Material Symbols Sharp";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../material-symbols-sharp-ZGYJMROL.woff2") format("woff2");
}
.material-symbols-sharp {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}

/* src/viewer/button.module.css */
.button_control {
  font: unset;
  --button-padding-left-right: 0.1875em;
  --button-padding-top-bottom: 0.03125em;
  --button-border-width: 2px;
  --button-size: calc(1em + var(--button-padding-left-right) * 2 + var(--button-border-width) * 2);
  width: calc(var(--button-size) - var(--button-padding-left-right) * 2 - var(--button-border-width) * 2);
  height: calc(var(--button-size) - var(--button-padding-top-bottom) * 2 - var(--button-border-width) * 2);
  padding: var(--button-padding-top-bottom) var(--button-padding-left-right);
  box-sizing: content-box;
  text-align: center;
  &.button_activated {
    background-color: hsl(0, 0%, 70%);
  }
  position: relative;
  .button_subIcon.button_topRight {
    position: absolute;
    top: 0;
    right: 0;
    font-size: .4em;
  }
  &.button_press_animation {
    background-color: hsl(0, 0%, 60%);
  }
}

/* src/viewer/videoplayer.module.css */
.videoplayer_canvas {
  width: 100%;
  height: 100%;
  background-color: blue;
  &.videoplayer_dummy {
    background-color: grey;
    aspect-ratio: 16 / 9;
    padding: 1em;
  }
}
.videoplayer_container {
  .videoplayer_canvas {
    width: var(--video-width);
    height: var(--video-height);
  }
  width: calc(var(--zoom) * 100%);
  height: calc(var(--zoom) * 100%);
  transition: width .3s, height .3s;
  position: relative;
  left: calc(var(--focus-x) * (1 - var(--video-zoom)));
  top: calc(var(--focus-y) * (1 - var(--video-zoom)));
}
.videoplayer_overlay {
  position: absolute;
  --box-stroke-width: 3px;
  --text-width: 2.1em;
  --text-height: 1lh;
  --text-size: .8em;
  font-size: var(--text-size);
  font-variant-numeric: tabular-nums;
  .videoplayer_detection {
    &.videoplayer_hide {
    }
    &.videoplayer_hide_confidence {
      .videoplayer_confidence_background,
      .videoplayer_confidence_text {
        display: none;
      }
    }
    &.videoplayer_outer {
      --vertical_shift: calc(var(--box-stroke-width) + var(--text-height));
      --horizontal_shift: var(--box-stroke-width);
    }
    &.videoplayer_inner {
      --vertical_shift: 0px;
      --horizontal_shift: 0px;
    }
    &.videoplayer_bottom {
      --preferred_y: calc((var(--cy) + var(--height) / 2) * var(--video-height) - var(--text-height) + var(--vertical_shift));
    }
    &.videoplayer_top {
      --preferred_y: calc((var(--cy) - var(--height) / 2) * var(--video-height) - var(--vertical_shift));
    }
    &.videoplayer_left {
      --preferred_x: calc((var(--cx) - var(--width) / 2) * var(--video-width) - var(--horizontal_shift)) ;
    }
    &.videoplayer_center {
      --preferred_x: calc(var(--cx) * var(--video-width) - var(--text-width) / 2);
    }
    &.videoplayer_right {
      --preferred_x: calc((var(--cx) + var(--width) / 2) * var(--video-width) - var(--text-width) + var(--horizontal_shift));
    }
    --textbox-x: calc(clamp(0%, var(--preferred_x), var(--video-width) - var(--text-width)));
    --textbox-y: calc(clamp(0%, var(--preferred_y), var(--video-height) - var(--text-height)));
    opacity: calc(var(--box-alpha) * 100%);
    .videoplayer_box {
      fill: none;
      stroke: var(--box-colour);
      stroke-width: var(--box-stroke-width);
      x: calc((var(--cx) - var(--width) / 2) * var(--video-width) - var(--box-stroke-width) / 2);
      y: calc((var(--cy) - var(--height) / 2) * var(--video-height) - var(--box-stroke-width) / 2);
      width: calc(var(--width) * var(--video-width) + var(--box-stroke-width));
      height: calc(var(--height) * var(--video-height) + var(--box-stroke-width));
    }
    .videoplayer_confidence_background {
      stroke: none;
      fill: var(--box-colour);
      x: var(--textbox-x);
      y: var(--textbox-y);
      width: var(--text-width);
      height: var(--text-height);
    }
    .videoplayer_confidence_text {
      stroke: none;
      fill: var(--text-colour);
      transform: translate(calc(var(--textbox-x) + 1px), calc(var(--textbox-y) + var(--text-height) - .2lh));
    }
  }
}

/* src/viewer/detectionbardetections.module.css */
.detectionbardetections_detectionBanner {
  width: 100%;
  height: 100%;
  position: relative;
  & > .detectionbardetections_progress_bar {
    position: absolute;
    border: 1px solid hsl(210, 90%, 30%);
    top: 0px;
    width: 100%;
    box-sizing: border-box;
    height: 1.2em;
    background:
      linear-gradient(
        to right,
        hsl(210, 90%, 80%) 50%,
        transparent 50%);
    background-size: 200%;
    background-position-x: calc((1 - var(--progress)) * 100%);
    pointer-events: none;
    & > .detectionbardetections_cursorSpan {
      position: absolute;
      pointer-events: none;
      left: calc(var(--progress) * 100%);
      color: hsl(210, 90%, 60%);
      transform: translateX(-50%);
    }
  }
  & > svg {
    width: 100%;
    height: 100%;
    --top-and-bottom-view-height: calc( (var(--svgHeight) - var(--between-layers-height)) / 2);
    --top-view-y: var(--top-and-bottom-view-height);
    --transition-layer-y: calc(var(--top-view-y) + var(--between-layers-height));
    --bottom-view-y: var(--svgHeight);
  }
  .detectionbardetections_detectionsTop {
    transform: translateX(calc((var(--svgWidth) / 2) * 1px)) translateY(calc(var(--top-view-y) * 1px)) scaleX(var(--top-scaling-factor)) translateX(calc(var(--currentFrame) * -1px)) scaleY(calc(-1 * var(--top-and-bottom-view-height) / var(--maxCount)));
  }
  .detectionbardetections_detectionsBottom {
    transform: translateY(calc(var(--bottom-view-y) * 1px)) scaleX(calc(var(--svgWidth) / var(--totalNumberOfFrames))) scaleY(calc(-1 * var(--top-and-bottom-view-height) / var(--maxCount)));
  }
  .detectionbardetections_detections {
    stroke: var(--line-colour);
    fill: var(--line-colour);
  }
  .detectionbardetections_cursor {
    stroke: hsl(0 0% 30%);
    fill: hsl(0 0% 30%);
    transform: scaleY(var(--top-and-bottom-view-height));
    path {
      vector-effect: non-scaling-stroke;
    }
  }
  .detectionbardetections_cursorTop {
    transform: translateX(calc((var(--svgWidth) / 2) * 1px));
  }
  .detectionbardetections_cursorBottom {
    transform: translateX(calc(var(--currentFrame) / var(--totalNumberOfFrames) * 100%)) translateY(calc(var(--transition-layer-y) * 1px));
    & > rect {
      fill: hsl(0 0% 70% / 30%);
      stroke: hsl(0 0% 30% / 40%);
      stroke-dasharray: 2 4;
      vector-effect: non-scaling-stroke;
      --itemWidth: calc( var(--svgWidth) * var(--svgWidth) / (var(--totalNumberOfFrames) * var(--top-scaling-factor)));
      x: calc(-1 * var(--itemWidth) / 2 * 1px);
      width: calc(var(--itemWidth) * 1px);
      height: calc(var(--top-and-bottom-view-height) * 1px);
    }
  }
  .detectionbardetections_detectionLines > path {
    vector-effect: non-scaling-stroke;
  }
  .detectionbardetections_horizontalRulers {
    line {
      vector-effect: non-scaling-stroke;
      stroke: hsl(0 0% 30% / 40%);
    }
    text {
      fill: hsl(0 0% 20% / 80%);
      font-family: monospace;
      font-size: .7em;
    }
  }
}
.detectionbardetections_hoverInfo {
  position: absolute;
  z-index: 1;
  &:not(.detectionbardetections_active) {
    display: none;
  }
  &.detectionbardetections_active {
    bottom: calc(100% - var(--y) + 1.3em);
    &:not(.detectionbardetections_rightside) {
      left: calc(var(--x) + 1.3em);
    }
    &.detectionbardetections_rightside {
      right: calc(100% - var(--x) + 1.3em);
    }
    background-color: hsl(140, 60%, 90%);
    padding: .3em;
    border: 1px solid hsl(140, 60%, 30%);
    transform: translateX(sign(var(--x) - 100px));
  }
}

/* src/viewer/behaviour.module.css */
.behaviour_table {
  border-collapse: collapse;
  font-size: 0.8em;
  width: 100%;
  tr.behaviour_aboutToBeInserted {
    background-color: hsl(140, 50%, 90%);
    color: hsl(140, 50%, 30%);
  }
  td {
    border: 1px solid black;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 0.3em;
    & > span {
      display: flex;
      align-content: stretch;
      flex-flow: row nowrap;
      width: 100%;
      & > input {
        width: 100%;
      }
      & > span,
      & > input {
        border: 0;
        height: 1lh;
        box-sizing: border-box;
        flex: 1;
        &.behaviour_dropdown {
          cursor: pointer;
          flex: 0;
        }
      }
    }
  }
  td:nth-of-type(1) {
    width: var(--width_1);
  }
  td:nth-of-type(2) {
    width: var(--width_2);
  }
  td:nth-of-type(3) {
    width: var(--width_3);
  }
  td:nth-of-type(4) {
    width: var(--width_4);
  }
  td:nth-of-type(5) {
    width: var(--width_5);
  }
  td:nth-of-type(6) {
    width: var(--width_6);
  }
  td:nth-of-type(7) {
    width: var(--width_7);
  }
  td:nth-of-type(8) {
    width: var(--width_8);
  }
  td:nth-of-type(9) {
    width: var(--width_9);
  }
  td:nth-of-type(10) {
    width: var(--width_10);
  }
  tr.behaviour_selectedLine {
    background-color: hsl(140, 50%, 90%);
    border-top: 2px solid hsl(140, 50%, 30%);
    border-bottom: 2px solid hsl(140, 50%, 30%);
  }
  tr.behaviour_selectedLineAfter {
    border-bottom: 3px solid hsl(140, 50%, 30%);
  }
}
.behaviour_subject_behaviour_picker {
  max-width: fit-content;
  min-width: 20em;
  display: flex;
  flex-flow: column nowrap;
  align-content: stretch;
  button {
    max-width: 80vw;
    overflow: ellipsis;
  }
}

/* src/lib/dialog.module.css */
.dialog_dialog {
  box-shadow: 0 0 1em black;
  background-color: hsl(195, 53%, 79%);
  border-radius: 1em;
  width: calc(100vw - 6em);
  box-sizing: border-box;
  padding: .3em 1.5em 2.5em;
  z-index: 2;
  &.dialog_blur::backdrop {
    backdrop-filter: blur(5px) grayscale(60%);
  }
  &.dialog_error {
    box-shadow: 0 0 1em red;
    width: fit-content;
  }
  &.dialog_suppress_shortcuts {
  }
}

/* src/viewer/controlpanel.module.css */
.controlpanel_general_controls {
  --button-size: calc(1em + 16px);
  display: grid;
  grid-template-columns: var(--button-size) var(--button-size) var(--button-size);
  font-size: 2rem;
  align-self: end;
}
.controlpanel_other_controls {
  display: flex;
  flex-flow: column nowrap;
  h2 {
    font-size: 1.3em;
    margin-bottom: .2em;
  }
}
.controlpanel_active_explain {
  display: block;
}
.controlpanel_playback_speed,
.controlpanel_zoom_level {
  overflow: hidden;
  font-size: .6em;
  font-variant: tabular-nums;
  color: hsl(0, 0, 50%);
  height: 100%;
  padding-top: 15%;
  text-align: center;
}

/* src/lib/general.module.css */
.general_show_on_hover_buttons3 {
  display: flex;
  & > :not(.general_show_on_hover3) {
    flex-grow: 1;
    flex-shrink: 1;
  }
  & > .general_show_on_hover3 {
    flex: 0 0 2em;
    opacity: 0;
    transition: background-color .2s, opacity .2s;
    border: none;
    background-color: hsl(0, 0%, 0%, 0);
    &:hover:not(:disabled) {
      background-color: hsl(0, 0%, 0%, .2);
    }
  }
  &:hover > .general_show_on_hover3 {
    opacity: 1;
  }
}
.general_button_row3 {
  margin-top: 1.5em;
  display: flex;
  column-gap: 0.7em;
  justify-content: center;
}
.general_button_row_left3 {
  margin-top: 1.5em;
  display: flex;
  column-gap: 0.7em;
  justify-content: left;
}
.general_spinner3 {
  display: inline-block;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-top: 5px solid #3498db;
  border-radius: 50%;
  box-sizing: border-box;
  width: .8em;
  height: .8em;
  animation: general_spin3 1s linear infinite;
}
@keyframes general_spin3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.general_header_version3 {
  font-size: .6em;
  &::before {
    content: " \2014";
    margin-right: .5em;
    margin-left: .5em;
  }
}
:root {
  --button-border-width: 1px;
  --button-border-style: solid;
  --button-border-color: hsl(210, 0%, 50%);
  --button-border-radius: .7rem;
  --button-font-size: 1.1rem;
  --button-padding-top: .4rem;
  --button-padding-bottom: .4rem;
  --button-padding-left: 1rem;
  --button-padding-right: 1rem;
  --button-cursor: pointer;
  --button-cursor-disabled: not-allowed;
}
.general_buttonBlack3 {
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  padding-top: var(--button-padding-top);
  padding-bottom: var(--button-padding-bottom);
  padding-left: var(--button-padding-left);
  padding-right: var(--button-padding-right);
  cursor: var(--button-cursor);
  color: hsl(210, 0%, 85%);
  background-color: hsl(210, 0%, 1%);
  &:disabled {
    color: hsl(210, 0%, 90%);
    background-color: hsl(210, 0%, 65%);
    cursor: var(--button-cursor-disabled);
  }
  &:active {
    color: hsl(210, 0%, 15%);
    background-color: hsl(210, 0%, 99%);
  }
}
.general_buttonWhite3 {
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-border-radius);
  font-size: var(--button-font-size);
  padding-top: var(--button-padding-top);
  padding-bottom: var(--button-padding-bottom);
  padding-left: var(--button-padding-left);
  padding-right: var(--button-padding-right);
  cursor: var(--button-cursor);
  color: hsl(210, 0%, 15%);
  background-color: hsl(210, 0%, 99%);
  &:disabled {
    color: hsl(210, 0%, 20%);
    background-color: hsl(210, 0%, 65%);
    cursor: var(--button-cursor-disabled);
  }
  &:active {
    color: hsl(210, 0%, 85%);
    background-color: hsl(210, 0%, 1%);
  }
}
.general_files_dropper3 {
  border: .2rem dashed hsl(210, 60%, 50%);
  border-radius: .7rem;
  position: relative;
  left: 0;
  padding: 1.3em;
}
.general_select_files_message3 {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  color: hsl(210, 10%, 30%);
  & > * {
    margin: .7rem;
  }
  & > *:nth-child(1) {
    font-size: 4em;
  }
  & > *:nth-child(2) {
  }
}
.general_ios_switch3 {
  appearance: none;
  width: 2.5em;
  height: 1.3em;
  background: #ccc;
  border-radius: 1.3em;
  position: relative;
  top: .5em;
  transition: background 0.3s ease-in-out;
  cursor: pointer;
  display: inline-block;
}
.general_ios_switch3::before {
  content: "";
  position: absolute;
  width: 1.1em;
  height: 1.1em;
  background: white;
  border-radius: 50%;
  top: 0.1em;
  left: 0.1em;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.general_ios_switch3:checked {
  background: #4cd964;
}
.general_ios_switch3:checked::before {
  transform: translateX(1.2em);
}

/* src/viewer/keyshortcuts.module.css */
.keyshortcuts_intro {
  margin: .9em 3em;
  opacity: 0.5;
  font-size: .9em;
}
.keyshortcuts_shortcut_list {
  padding: 0 2em;
  --column-gap: .7em;
  column-gap: var(--column-gap);
  column-width: 20em;
  .keyshortcuts_item {
    display: flex;
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
    .keyshortcuts_button {
      &.keyshortcuts_activated {
        background-color: hsl(0, 0%, 70%);
      }
      &.keyshortcuts_has_duplicate {
        background-color: hsl(0, 70%, 70%);
      }
      display: flex;
      flex-wrap: nowrap;
      overflow: hidden;
      height: 1.5lh;
      .keyshortcuts_keys {
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        flex: fit-content 0 0;
        max-width: 50%;
        display: inline-block;
        .keyshortcuts_key {
          display: inline-block;
          margin-left: .7em;
          &:not(:last-child)::after {
            content: ", ";
          }
        }
      }
      .keyshortcuts_title {
        margin-left: .7em;
        display: inline-block;
        flex-grow: 2;
        flex-shrink: 2;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
      }
    }
  }
}
.keyshortcuts_title {
  &:not(input):empty,
  &:is(input:placeholder-shown) {
    color: hsl(195, 20%, 50%, .5);
    &::after {
      content: "<empty>";
    }
  }
}
.keyshortcuts_current_preset_select {
  margin: 1.5em;
  & > div {
    display: flex;
    column-gap: 0.7em;
    & > select {
      flex: 1 1 auto;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      min-width: 5em;
    }
  }
}
.keyshortcuts_edit_dialog {
  max-width: 50vw;
  h2 {
    display: flex;
    align-items: center;
    font-size: 1.5em;
    column-gap: 1.3em;
    .keyshortcuts_icon {
      font-size: 2em;
      flex: 0 0 fit-content;
    }
    .keyshortcuts_title {
      flex: 1;
      &.keyshortcuts_invalid_title {
        background-color: hsl(0, 70%, 70%);
      }
    }
  }
  h3 {
  }
  .keyshortcuts_duplicate_keys_explain {
    color: hsl(0, 70%, 20%);
  }
  .keyshortcuts_shortcuts {
    padding: 1.5em;
    width: 100%;
    box-sizing: border-box;
    .keyshortcuts_add_button_small {
      border: none;
      background-color: unset;
      &:hover {
        background-color: hsl(0, 0%, 0%, .2);
      }
    }
    .keyshortcuts_key_list {
      display: flex;
      flex-flow: column nowrap;
      align-items: stretch;
      width: 100%;
      .keyshortcuts_shortcut_row {
        display: flex;
        flex-flow: row nowrap;
        &:hover {
          background-color: hsl(0, 0%, 0%, .1);
        }
        button {
          flex: 0 0 2em;
          border: none;
          background-color: unset;
          &:hover:not(:disabled) {
            background-color: hsl(0, 0%, 0%, .2);
          }
        }
        .keyshortcuts_shortcut_key {
          height: 1.3lh;
          box-sizing: border-box;
          flex-grow: 1;
        }
        &.keyshortcuts_shortcut_is_duplicate {
          background-color: hsl(0, 70%, 70%);
        }
        &.keyshortcuts_editing_key .keyshortcuts_shortcut_key {
          background-color: hsl(0, 0%, 100%, .8);
          border: 2px solid hsl(240, 100%, 40%, .8);
          &:empty {
            color: silver;
            &::after {
              content: "<recording keystroke> (press key now)";
            }
          }
        }
      }
    }
  }
}
.keyshortcuts_error_popup {
  max-width: 50vw;
  div {
    margin: 1.5em 0;
  }
}
.keyshortcuts_confirm_box {
  max-width: 40vw;
}

/* src/lib/popups.module.css */
.popups_prompt,
.popups_confirm,
.popups_alert {
  width: 30vw;
  text-align: center;
  .popups_validation_error {
    color: hsl(0, 70%, 30%);
  }
  input[type=text] {
    width: 80%;
    &.popups_text_valid {
    }
    &.popups_text_invalid {
      color: hsl(0, 70%, 30%);
    }
  }
}

/* src/lib/picker.module.css */
.picker_picker {
  display: inline-block;
}
.picker_dialog {
  width: min-content;
}
.picker_closed2 {
  border-width: 2px;
}
.picker_open {
  display: grid;
  grid-template-columns: repeat(var(--number-of-columns), minmax(min-content, 1fr));
  gap: 2px;
  width: min-content;
  z-index: 2;
  > button {
    background-color: hsl(0, 0%, 85%);
    border-width: 1px;
    &:hover:not(.picker_selected) {
      background-color: hsl(0, 0%, 75%);
    }
    &.picker_selected {
      background-color: hsl(0, 0%, 65%);
      border-width: 2px;
    }
  }
}

/* src/viewer/classsliders.module.css */
.classsliders_class_sliders_dialog {
  & > div {
    margin: .2em 0;
  }
  .picker_closed > * {
    & > .classsliders_confidence_location_box {
      width: 2.7em;
      height: 2.7em;
      position: unset;
    }
    & > .classsliders_confidence_location_name {
      display: block;
      font-size: .6em;
      white-space: nowrap;
    }
  }
  .picker_opened > * {
    & > .classsliders_confidence_location_box {
      width: 5em;
      height: 5em;
      position: unset;
    }
    & > .classsliders_confidence_location_name {
      display: block;
      font-size: .8em;
      white-space: nowrap;
    }
  }
  .classsliders_class_sliders {
    margin-top: 1.3em;
    tr.classsliders_hidden {
    }
    th {
      vertical-align: top;
      .classsliders_counts {
        font-size: 0.7em;
      }
    }
    td {
      padding: .2em .3em;
      position: relative;
      .classsliders_hidebox {
        cursor: pointer;
      }
      .classsliders_range_value {
        font-size: .7em;
        font-variant: tabular-nums;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      &:nth-child(4) {
        font-variant: tabular-nums;
        .classsliders_counts {
          display: block;
          font-size: 0.7em;
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
        }
      }
      input[type=range] {
        margin: .7em 0;
        width: 100px;
        display: block;
      }
    }
    td:not(:first-child) {
      text-align: center;
    }
    .classsliders_class_colour_box {
      width: 2.5em;
      height: 1.3lh;
      display: inline-block;
      background-color: var(--class-colour);
      color: var(--class-text-colour);
      overflow: hidden;
      border: 1px solid black;
      box-sizing: border-box;
      font-size: .8em;
      font-variant: tabular-nums;
      padding: .1em;
    }
  }
}

/* src/viewer/uploader.module.css */
.uploader_uploader {
  width: calc(100vw - 6em);
  height: calc(100vh - 6em);
  div {
    margin: .7em;
  }
  .uploader_warning {
    border-left: .4em solid red;
    padding-left: 1.2em;
    margin: .8em;
  }
  dd {
    --dd-margin-left: 3em;
    margin-left: var(--dd-margin-left);
    .uploader_file_list {
      padding-left: 0;
      width: calc(100% - var(--dd-margin-left) - 2em);
      &:empty::after {
        content: "<no files>";
        opacity: .6;
      }
      li:hover {
        background-color: hsl(0, 0%, 0%, .1);
      }
    }
  }
  .uploader_video_error {
    color: red;
  }
}

/* src/viewer/info.module.css */
.info_model_klass_list {
  margin: 0;
  padding: 0;
  > li {
    margin-left: 0;
    display: block;
  }
  .info_colour_block {
    display: inline-block;
    margin: 0 .2em;
    width: .8em;
    height: .8em;
    border: 1px solid black;
    box-sizing: border-box;
    background-color: var(--colour);
  }
}
.info_info_list {
  dd {
    margin-bottom: .7em;
  }
}

/* src/viewer/error.module.css */
.error_action_already_in_use,
.error_shortcut_preset_export_error,
.error_shortcut_preset_import_error {
  width: 50vw;
}
.error_multiple_actions_assigned_to_pressed_key_exception {
  width: 40vw;
  .error_multiple_action_choices {
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    > button {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.error_activated {
        background-color: hsl(0, 0%, 70%);
      }
    }
  }
}
.error_behaviour_file_write_error {
  width: 50vw;
  div,
  details {
    margin: 1.3em;
  }
}

/* src/viewer/sizer.module.css */
.sizer_on_off {
  cursor: pointer;
}
.sizer_slider {
  width: 10em;
}

/* src/viewer/index.css */
.page_header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  display: none;
}
.page_content {
  margin: 0;
  display: block;
}
.toc_menu {
  display: none;
}
.page_footer {
  display: none;
}
/*# sourceMappingURL=index.css.map */