#transportControls .record-icon {
  color: #e53935;
}
/* Fancy merged header styles */
.fancyHeaderContainer {
  height: 4vh;
  min-height: 32px;
  padding: 0.6em 1.2em;
  font-size: 1.1em;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 20, 20, 0.85);
  box-shadow: 0 4px 24px 0 rgba(229, 57, 53, 0.12),
    0 1.5px 6px 0 rgba(229, 57, 53, 0.18);
  border-bottom: 2px solid #e53935;
  backdrop-filter: blur(8px);
}

.fancyHeaderTitle {
  display: flex;
  align-items: center;
}

.fancyHeaderTitleText {
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 0;
}

.fancyCameraSelectBar {
  display: flex;
  align-items: center;
  gap: 0.7em;
  background: rgba(40, 40, 40, 0.7);
  padding: 0.3em 1em;
  border-radius: 1em;
  box-shadow: 0.3em 0.3em 0.5em #e5393533;
}

.imageSmall {
  width: 1.4em;
  height: 1.4em;
}
/* Optimized for a modern black layout. -DS */

/* ============= WHOLE PAGE STYLES ================== */

/* Handle vertical screens */
@media screen and (max-width: 1400px) and (orientation: portrait) {
  #cameraControlsContainer {
    width: 100vw !important;
  }
  #cameraControlsContainerExpanded {
    display: none !important;
  }
  body {
    font-size: 125%;
    background: #000 !important;
    color: #fff !important;
  }
}

@media screen and (max-width: 1400px) and (orientation: landscape) {
  #cameraControlsContainer {
    width: 30vw !important;
  }
  #headerContainer {
    height: 5vh !important;
  }
  body {
    font-size: 70%;
    background: #000 !important;
    color: #fff !important;
  }
}

/* Load NotoSansDisplay Font from resources */
@font-face {
  font-family: "NotoSansDisplay";
  src: url("resources/NotoSansDisplay-VariableFont_wdth\,wght.woff")
      format("woff"),
    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
      url("resources/NotoSansDisplay-VariableFont_wdth\,wght.ttf")
      format("truetype"); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

.dNone {
  display: none;
}

body {
  font-family: "NotoSansDisplay", sans-serif;
  font-weight: 100;
  margin: 0;
  overflow: hidden;
  background: #000;
  color: #fff;
}

/* Page Body Flexboxes */
.flexContainerH {
  display: flex;
}
.flexContainerV {
  display: inline-flex;
}

/* Inputs */

input[type="text"] {
  border-radius: 0.5vh;
  background: #111;
  color: #fff;
  height: 2em;
  width: 10vw;
  border: 1px solid #222;
  text-align: center;
  font-family: "NotoSansDisplay", sans-serif;
  outline: none;
  margin: 0 0.5vw;
}

input[type="text"]:focus {
  border: 1px solid #e53935;
  outline: none;
}

input[type="number"] {
  border-radius: 0.5vh;
  background: #111;
  color: #fff;
  height: 2em;
  width: 4.666vw;
  border: 1px solid #222;
  text-align: center;
  font-family: "NotoSansDisplay", sans-serif;
  outline: none;
}

input[type="number"]:focus {
  border: 1px solid #e53935;
  outline: none;
}

input[type="range"][orient="vertical"] {
  writing-mode: vertical-lr;
  direction: rtl;
  width: 2vw;
  height: 80%;
}

input[type="range"] {
  accent-color: #e53935;
}
input[type="range"]:focus {
  outline: none;
  border-color: #e53935;
}

select {
  border-radius: 0.5vh;
  background: #111;
  color: #fff;
  height: 2em;
  width: 5vw;
  border: 1px solid #222;
  text-align: center;
  font-family: "NotoSansDisplay", sans-serif;
  outline: none;
}

select:focus {
  border: 1px solid #e53935;
  outline: none;
}

button {
  font-family: "NotoSansDisplay", sans-serif;
  background: #000;
  border: 1px solid #e53935;
  color: #fff;
  height: fit-content;
  width: fit-content;
  border-radius: 0.4em;
  padding: 0.5vh 1vw;
  margin: 1vh;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
button:hover {
  background: #e53935;
  color: #fff;
  border-color: #fff;
}
button:active {
  background: #111;
  color: #e53935;
  box-shadow: inset 0 0 1em #090909;
}

input[type="file"]:focus {
  border: 1px solid #e53935;
  outline: none;
}

#secureCheckboxLabel {
  margin-right: 1vw;
}

/* Horizontal Container Styles */
#headerContainer {
  background: #000;
  border-bottom: 1px solid #222;
  width: 100%;
  height: 3.5vh;
  min-height: 28px;
  padding: 0.3em 0.8em;
  font-size: 1em;
  border-radius: 1em 1em 0 0;
  flex-wrap: wrap;
  align-content: center;
}

#headerContainer h1 {
  color: white;
  font-size: 1em;
  margin-left: 0.5em;
  font-weight: 700;
  letter-spacing: 0.04em;
}

#cameraSelectContainer {
  background: #111;
  border: 1px solid #222;
  width: 100%;
  height: 3.53vh;
  color: #474747;
  font-size: 1em;
  align-items: center;
  justify-content: center;
}

#cameraSelectContainer span {
  height: fit-content;
}

#cameraSelectContainer .camSelectSeparator {
  margin: 0px 0.5em;
}

.cameraSwitchLabel a {
  text-decoration: none;
  color: #474747;
}

.cameraSwitchLabel.selectedCam a {
  color: #e53935;
}

#allCamerasContainer {
  width: 100%;
  height: 96vh;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-color: #222 #000;
}

#formatDisplay span {
  margin: 0px 1em;
}

#footerContainer {
  display: none !important;
}

/* Camera Controls Container */
#cameraControlsContainer {
  width: 15vw;
  height: 100%;
  background: #000;
  flex-direction: column;
  border: 1px solid #222;
  flex-shrink: 0;
}

.liveCam {
  background: #e53935;
  color: #fff;
}

#cameraControlHeadContainer {
  width: 100%;
  height: 5vh;
  border-bottom: 2px solid black;
  align-items: center;
  color: white;
}

h2 {
  margin-inline-start: 0.6em;
  margin-inline-end: 0.6em;
  font-weight: 100;
}

#cameraName {
}

/* Color Correction Section */
#cameraControlColorCorrectionContainer {
  width: 100%;
  height: 33vh;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

#cameraControlLGGTabs {
  margin-top: 2vh;
  border: 1px solid #101010;
  border-radius: 2.5vh;
  overflow: hidden;
}

#cameraControlLGGTabs a {
  background: #181818;
  background: linear-gradient(0deg, #181818 0%, #303030 100%);

  padding: 0.1vh 1.25vw 0.25vh 1.25vw;

  border-left: 1px solid #101010;

  text-decoration: none;
  color: #474747;
}

#cameraControlLGGTabs a.selectedTab {
  color: #e53935;
}

.ccExposureSettingValueContainer .expAdjArr {
  text-decoration: none;
  color: #60606000;
}

.ccExposureSettingValueContainer:hover .expAdjArr {
  color: #606060ff;
}

.ccExposureSettingValueContainer:hover .expAdjArr:hover {
  color: #474747;
}

.ccExposureSettingValueContainer:hover .expAdjArr:active {
  color: #e53935;
}

#cameraControlColorCorrectionBottomContainer {
  margin-bottom: 1em;
  display: inline-flex;
  align-items: center;
}

#cameraControlColorCorrectionBottomContainer button {
  margin: 0px 0.5em;
}

#cameraControlColorCorrectionNumbersContainer span {
  margin: 0px 0.5em;
  text-decoration: underline 3px;
}

/* Exposure Section */
#cameraControlExposureContainer {
  width: 100%;
  height: 4.7vh;
  background-color: #171717;
  border-top: 1px solid #2d2d2d;
  border-bottom: 1px solid #2d2d2d;
  display: inline-flex;
  justify-content: space-evenly;
  overflow: hidden;
}

.ccExposureSettingContainer {
  display: flex;
  color: white;
  font-size: 0.86em;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.5vh;
  padding-top: 0.25vh;
}

.exposureControlLabel {
  color: #6e6e6e;
  font-size: 0.666em;
  display: block;
}

/* Lens Stuff */
#cameraControlLensContainer {
  width: 100%;
  height: 41.9vh;
  border-bottom: 1px solid black;
  justify-content: space-evenly;
}

.lensSliderContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lensSliderContainer span {
  margin-top: 1em;
  margin-bottom: 1em;
}

.circleButton {
  width: 2em;
  height: 2em;
  border-radius: 1em;
  padding: 0;
  margin: 1em 0;
}

.activated {
  background: #181818;
  box-shadow: inset 0 0 1em #090909;
}

.borderNone {
  border: none;
}

#transportControls .circleButton {
  margin: 0 0.5em;
}

/* Right side (expanded) */
#cameraControlsContainerExpanded {
  width: 84.75vw;
  height: 100%;
  background: #000;
  flex-direction: column;
  border: 1px solid #222;
  flex-shrink: 0;
}

#cameraControlExpandedHeadContainer {
  width: 100%;
  height: 5vh;
  border-bottom: 2px solid #222;
  align-items: center;
  justify-content: space-between;
}

#cameraControlExpandedBodyContainer {
  flex-direction: column;
  display: inline-flex;
  height: inherit;
  justify-content: flex-start;
}

#timecodeLabel {
}

#connectionErrorSpan {
  color: #e53935;
}

#manualRequestResponseP {
  color: #e53935;
}

/* Table Controls */

.tableControl {
  margin-left: 2vw;
  margin-bottom: 1.5vh;
}

.tableControl h3 {
  font-weight: 100;
  margin: 0vh 0vw;
}

table,
td {
  margin-left: 0.5vw;
  /* border: 1px solid white; */
  border-collapse: collapse;
  padding: 0.1vw 1vw;
}

td,
tr {
  align-items: center;
}