@font-face {
  font-family: 'SegoeUI';
  src: url('/assets/fonts/segoe.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'NotoSans';
  src: url('/assets/fonts/noto.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

video {
  display: grid;
  min-width: 0;
  max-width: 100%;
  height: auto;
  width: 100%;
}

body {
  background: #eee;
  background-image: url("/assets/images/background2.jpg");
  display: grid;
  place-items: center;
}

p {
  margin: 0;
}

.header {
	display: flex;
	flex-wrap: wrap;
    display: row;
}

.content {
  padding: 20px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
}

.header hr {
  margin: 15px;
}

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

#app {
  aspect-ratio: 4 / 3;
  width: min(calc(100vh * 4 / 3), calc(100vh * 4 / 3));
  height: 100%;
  background: #fff;
  display: flex;
}

.sidebar {
  width: 150px;
  flex: 0 0 150px;
  background-color: #111;
  color: #fff;
  padding: 5px 10px;
  box-sizing: border-box;
  background-image: url("/assets/images/sidebar.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.sidebar h1 {
  font-size: 90%;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-align: center;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar p {
  background: linear-gradient(
    to bottom,
    rgb(255, 255, 255) 0%,
    rgba(129, 129, 129, 0.75) 3%,
    rgba(56, 56, 56, 0.75) 50%,
    rgba(27, 27, 27, 0.75) 50%,
    rgba(12, 12, 12, 0.75) 100%
  );
  border: 1px solid #000000;
  color: #f7f4f4;
  width: 93%
  font-size: 13px;
  font-weight: normal;
  text-align: center;
  margin: 0;
}

.sidebar ul li {
  margin: 2px 0;
  width: 100%;
}

.nav-icons {
  height: 18px;
  margin: 1px 3px 0px 4px;
  z-index: 1;
}

.sidebar ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 20px;
  width: 100%;
  text-align: center;
  border: 1px solid #0f0f0f;
  box-sizing: border-box;
  border-radius: 5px;
  color: #eeeeee;
  display: flex;
  font-size: 13px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25) 0%,
    rgba(117, 117, 117, 0.15) 20%,
    rgba(92, 92, 92, 0.15) 60%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(41, 41, 41, 0.3) 100%
  );
}

.sidebar ul li a:hover {
  background-color: #f44;
}

.footer {
  text-align: center;
  font-size: 10pt;
  color: #888;
  padding: 4px;
  margin-top: auto;
}

/*EXTRA OLD SHIT FROM/FOR PTF3*/

      #eqSlidersWrapper {
        display: flex;
        flex-direction: column;
      }

      #eqSliders {
        /* sliders take up 50%? We'll adjust with a wrapper */
        /* limit sliders to 50% */
        font-size: 14px;
        color: #000;
        overflow-y: auto;
        /* scroll if too many sliders */
	display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: center;
        gap: 8px;
	padding: 5px;
	border-color: #000;
      }

      .eq-band {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        flex: 1;
        max-width: 60px;
        height: 100%;
        justify-content: center;
      }

      .eq-band label {
        font-size: 11px;
        color: #000;
        text-align: center;
        writing-mode: horizontal-tb;
      }

      .eq-slider {
        width: 200px;
        height: 20px;
        -webkit-appearance: none;
        appearance: none;
        background: #333;
        outline: none;
        border-radius: 4px;
        transform: rotate(-90deg);
        transform-origin: center;
        margin: 90px 0;
      }

      .eq-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #4CAF50;
        cursor: pointer;
        border-radius: 50%;
      }

      .eq-slider::-moz-range-thumb {
        width: 20px;
        height: 20px;
        background: #4CAF50;
        cursor: pointer;
        border-radius: 50%;
        border: none;
      }

      .eq-slider::-webkit-slider-runnable-track {
        width: 100%;
        height: 8px;
        background: #555;
        border-radius: 4px;
      }

      .eq-slider::-moz-range-track {
        width: 100%;
        height: 8px;
        background: #555;
        border-radius: 4px;
      }

      .eq-value {
        font-size: 10px;
        color: #000;
        min-height: 15px;
      }

      #eqImage {
        flex: 1;
        /* take remaining space */
        align-self: stretch;
        object-fit: fill;
        /* keep aspect ratio */
        margin-top: auto;
        /* push image to bottom if not tall enough */
      }

      .eq {
        display: flex;
	width="100%";
	height="100%";
        flex-direction: column;
      }

      .timestamps {
        color: #000;
        font-size: 12px;
        overflow-y: auto;
      }

      #timestampsList {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px;
        align-content: flex-start;
        overflow-y: auto;
      }

      #timestampsList p {
        display: inline-block;
        padding: 5px 10px;
        margin: 0;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.2s;
      }

      .sections {
        overflow-y: auto;
        color: #000;
      }

.vidimage {
}