/* base */
/* defining fonts */
@font-face {
  font-family: "Rubik Variable";
  src: url(../fonts/Rubik/Rubik-VariableFont_wght.ttf) format("truetype");
}
@font-face {
  font-family: "Roboto";
  src: url(../fonts/Roboto/Roboto-Regular.ttf) format("truetype");
}
/* defining css variables */
/* $color-background: #3a3f4a; */
/* $color-codec-prores: #07ac3e; */
/* $color-codec-ar: #119dee; */
/* $cam-select: #324355; */
html {
  font-size: 16px;
  width: 100dvw;
  height: 100dvh;
}

body {
  background-color: #30343D;
  padding: 0px;
  font: 400 normal 0.635rem Helvetica, Arial, sans-serif;
  color: #ffffff;
  width: 100%;
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(340px, 60vw) minmax(340px, 4fr) minmax(90px, 1fr);
  justify-items: stretch;
  align-items: stretch;
  overflow: hidden;
}

a {
  text-decoration: none;
  color: #aad5ff;
  font-weight: 600;
}

.nav-prev-version a {
  color: #ffffff;
}

/* basic page elements */
button {
  border: none;
  background: none;
  /* height: inherit; */
}

/* header */
header h2 {
  font: 300 normal 1.079rem "Rubik Variable", Helvetica, Arial, sans-serif;
  color: #ffffff;
  padding: 0;
  margin: 10px 0 3px 0;
}

header h2 span.high {
  color: #ffaa00;
}

.text {
  width: inherit;
  font: 330 normal 0.9rem/1.6em "Rubik Variable", Arial, sans-serif;
  color: #ffffff;
  padding: 0;
  box-sizing: border-box;
}

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

.text ul {
  padding-left: 10px;
}

.right_panel h4 {
  padding: 0;
  margin: 0;
  width: inherit;
}

input.warn {
  color: #ffffff;
  background-color: #ff0000;
}

.input_box {
  padding: 0;
  margin: 0;
}

select {
  font-size: 0.668rem !important;
  height: 25px;
  width: 35%;
  min-width: 75px;
}

.input_select {
  padding: 0;
  margin: 2px 0;
  background: none;
}

/* sets the space between the camera selection items (and also lens etc.): */
.input_radio {
  padding: 2px 0px;
}

input[type=radio] {
  display: none;
}

.input_radio > label {
  display: block;
  font: 500 normal 1.3em "Rubik Variable", Arial, sans-serif;
  color: #ffffff;
  padding: 10px;
  border-radius: 2px;
  background-color: rgba(64, 128, 184, 0.12);
}

.input_radio input[type=radio]:checked {
  color: #ffaa00;
  border-radius: 2px;
}

input[type=radio]:checked + label {
  color: #ffffff;
  background-color: #4080b8;
}

.inactive .input_radio label,
.inactive .input_radio input[type=radio]:checked,
.inactive input[type=radio]:checked + label {
  color: rgb(111, 110, 110);
  background-color: rgba(64, 128, 184, 0.12);
  pointer-events: none;
}

#lens_type label,
.cam_mode label {
  display: block;
  cursor: pointer;
  margin: 0px;
  padding: 0px;
}

.input_radio img {
  width: 19px;
  height: 14px;
  margin: 0;
  padding: 3px 12px;
}

label img {
  vertical-align: middle;
}

label {
  font: 400 normal 1.2em "Rubik Variable", Arial, sans-serif;
  color: #ffffff;
  display: inline-block;
  padding: 0;
  margin: 0;
  background: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.column label {
  text-align: center;
}

label.unit {
  color: #ffffff;
  vertical-align: middle;
  padding: 3px;
}

label.aspect {
  color: #fff;
  line-height: 23px;
  text-align: center;
  padding: 0;
  margin-left: -2px;
  width: 8px;
  height: 22px;
  background-color: #000;
  border-right: none;
}

input[type=text],
input[type=email] {
  color: #ffaa00;
  font-weight: 600;
  border: none;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  /* to get rid of input fields with rounded corners in iOS Safari */
}

.small input[type=text] {
  width: 25px;
}

input[type=radio] {
  border: none;
  padding: 0;
  margin: 0 7px 0 0;
}

input:invalid {
  box-shadow: none;
  -moz-box-shadow: none;
  /* to get rid of input fields with red borders in Firefox */
}

/* colors of lens coverage indicator */
#lensoutside {
  fill: rgba(222, 6, 6, 0.5);
}

#lenscircle {
  /* stroke: rgba(80, 212, 80, 1); */
  stroke: rgb(222, 6, 6);
  fill: rgba(80, 212, 80, 0.1);
}

/* this is to remove the red glow around a input box whose content fails to validate according to the input's type setting */
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

/* small devices */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) {
  header h2 {
    font-size: 0.8rem;
    margin: 5px 0 3px 0;
  }
}
/* small devices LANDSCAPE */
@media only screen and (min-device-width: 375px) and (max-device-width: 926px) and (orientation: landscape) {
  html {
    font-size: 12px;
    height: -webkit-fill-available;
    -webkit-text-size-adjust: none;
  }
  body {
    width: 100dvw;
    height: 100dvh;
    min-height: 100dvh;
    /* mobile viewport bug fix */
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    grid-template-columns: 40vw 50vw 10vw;
  }
  header h2 {
    font-size: 0.8rem;
    margin: 5px 0 3px 0;
  }
  label {
    font-size: 1rem;
  }
  .panel_content[name=style_content] .dash_entry label,
  .panel_content[name=style_content] .size_entry label,
  .panel_content[name=style_content] .mm_entry label,
  .panel_content[name=style_content] .pix_entry label {
    font-size: 0.8rem;
  }
  .panel_content[name=style_content] .size_entry label:not(.unit),
  .panel_content[name=style_content] .mm_entry label:not(.unit),
  .panel_content[name=style_content] .pix_entry label:not(.unit) {
    position: relative;
    top: 16px;
    right: -24px;
  }
  .panel_content[name=style_content] .dash_entry label:not(.unit) {
    position: relative;
    top: 23px;
    right: -30px;
  }
  input[type=text],
  input[type=email],
  .small input[type=text] {
    color: #ffaa00;
    font-weight: 600;
    border: 1px solid #666666;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    /* background-color: #838383; */
  }
  .input_radio > label {
    display: block;
    font: 500 normal 1.3em "Rubik Variable", Arial, sans-serif;
    color: #ffffff;
    padding: 15px 10px;
    border-radius: 2px;
    background-color: rgba(64, 128, 184, 0.12);
  }
  .input_radio input[type=radio]:checked {
    color: #ffaa00;
    border-radius: 2px;
  }
  input[type=radio]:checked + label {
    color: #ffffff;
    background-color: #4080b8;
  }
  .input_radio img {
    width: 22px;
    height: 15px;
    margin: 0;
    padding: 0px;
    padding-right: 10px;
  }
}
/* small devices PORTRAIT */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) and (orientation: portrait) {
  body {
    width: 100dvw;
    height: 100dvh;
    min-height: 100dvh;
    /* mobile viewport bug fix */
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    grid-auto-flow: column;
    grid-template-columns: 80dvw 20dvw;
    grid-template-rows: 55dvh 45dvh;
  }
}
/* iPad Portrait and Landscape */
/* iPad Portrait */
/* iPad Landscape */
/* main */
main {
  height: inherit;
  padding: 0 20px;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(300px, 60vw);
  grid-template-rows: 60px min-content 30px max-content 80px 50px;
  justify-self: start;
  overflow-y: scroll;
}

header {
  margin: 5px 0 0 0;
}

.status {
  font: 370 normal 0.75rem/1.8em "Rubik Variable", Arial, sans-serif;
  padding: 0;
  margin: 0;
}

.status#image_cover {
  padding: 10px 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  /* justify-items: stretch; */
}

.status#image_cover .segment {
  padding: 0;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.status#image_cover .segmentRight {
  justify-content: flex-end;
  column-gap: 15%;
}

.sensor_lens {
  display: grid;
  grid-template-columns: 1fr;
}

.preview {
  /* aspect-ratio: 1.45 / 1; */
  object-fit: contain;
  padding: 0;
  margin: 0;
  display: grid;
  justify-items: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.2);
}

.preview svg {
  width: 100%;
  height: auto;
}

.preview svg.frameleader {
  background-color: #ffffff;
}

.status_format {
  font: 400 normal 1.1em/1.4em "Rubik Variable", Arial, sans-serif;
  width: 100%;
  margin: 0;
  padding-bottom: 10px;
  display: grid;
  grid-template-rows: 1fr 1fr;
  /* grid-template-rows: 30px auto; */
  row-gap: 20px;
}

/* left: preview area */
.status_lens {
  justify-self: end;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.status_format .gui_user {
  align-self: start;
}

.spher,
.scope {
  font: 500 normal 1em/1.4em "Rubik Variable", Arial, sans-serif;
  margin: 0px;
  display: grid;
  align-items: center;
  justify-items: center;
  width: 40px;
  height: 20px;
  border-radius: 2px;
  color: #ffffff;
}

.status .label,
.status.user_values_toggle,
.status_format .label {
  padding-top: 5px;
  color: #aad5ff;
}

.user_values_toggle {
  display: grid;
  grid-template-columns: 20px max-content;
  font: 400 normal 1rem/166% "Rubik Variable", Arial, sans-serif;
  cursor: pointer;
}

section.user .status.user_values_toggle .icon::after {
  font-size: 1.3rem;
  line-height: 100%;
  content: "+";
  color: #ffaa00;
}

section.user.active .status.user_values_toggle .icon::after {
  content: "-";
}

#status_cam,
#status_mode {
  font-family: "Rubik Variable", Arial, sans-serif;
  font-size: 1.75rem;
  font-weight: 340;
  white-space: nowrap;
}

#status_cam {
  color: #b0b0b0;
}

#status_mode {
  color: #ffffff;
  font-weight: 300;
  padding-left: 5px;
}

/* .custom {
    font-family: 'helvetica';
    font-weight: normal;
    fill: #ff0099;
} */
@media only screen and (max-width: 1020px) {
  #status_cam,
  #status_mode {
    font-size: 1.438rem;
  }
}
/* small devices */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) {
  header h2 {
    font-size: 1rem;
    margin: 5px 0 3px 0;
  }
  .status {
    font-size: 0.75rem;
    padding: 0;
    margin: 0;
    white-space: nowrap;
  }
  #status_cam,
  #status_mode {
    font-size: 1.02rem;
    line-height: 160%;
  }
  .status#image_cover {
    position: sticky;
    bottom: 30px;
    padding: 0;
    height: 10dvh;
    width: inherit;
  }
  .status#image_cover svg {
    width: 80px;
    height: 30px;
  }
  header {
    margin: 0px 0 0 0;
  }
  /* .preview {
      aspect-ratio: unset;
  } */
}
/* small devices LANDSCAPE */
@media only screen and (min-device-width: 375px) and (max-device-width: 926px) and (orientation: landscape) {
  main {
    padding: 0 2dvw;
    grid-template-columns: 36dvw;
    grid-template-rows: 20px 25px 20px max-content 80px 50px;
    overflow-y: hidden;
  }
  svg rect#format1,
  svg rect#format2 {
    stroke-width: 2em;
  }
  .status#image_cover .segment {
    flex-flow: row nowrap;
    column-gap: 0px;
  }
  .status#image_cover .segmentRight {
    justify-content: flex-end;
  }
}
/* small devices PORTRAIT */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) and (orientation: portrait) {
  main {
    padding: 0 2dvw;
    grid-template-columns: 76dvw;
    grid-template-rows: 20px 25px 20px max-content 80px;
    overflow-y: hidden;
  }
  header h2 {
    font-size: 0.8rem;
  }
}
/* nav */
nav {
  font: 400 normal 0.813rem/130% "Rubik Variable", Arial, sans-serif;
  padding-left: 0px;
  display: grid;
  grid-template-columns: minmax(90px, 1fr);
  grid-auto-rows: minmax(40px, 1fr);
  row-gap: 2px;
  overflow-y: scroll;
  z-index: 400;
}

nav button {
  display: grid;
  height: auto;
  color: #ffffff;
  text-align: left;
  align-content: start;
  cursor: pointer;
  padding: 5%;
  padding-left: 1dvw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: #3A3F49;
}

nav button.info {
  padding-left: 1dvw;
  background-color: #254c6d;
}

nav button.feedback {
  padding-left: 1dvw;
  background-color: #075500;
}

nav button.nav-prev-version {
  background-color: #ca8802;
}

nav button.tab_active {
  border-left: 2px solid #ffaa00;
  padding-left: calc(1vw - 2px);
  background-color: rgba(33, 36, 41, 0.9);
}

nav button.info.tab_active {
  border-left: 2px solid #55acf9;
  padding-left: calc(1vw - 2px);
  background-color: #254c6d;
}

nav button.feedback.tab_active {
  border-left: 2px solid #13CE02;
  padding-left: calc(1vw - 2px);
  background-color: #075500;
}

nav button:disabled {
  color: rgb(111, 110, 110);
}

.right_panel .message {
  font-size: 0.8rem;
  line-height: 1.1rem;
  position: sticky;
  bottom: 0;
  padding: 10px 10px;
  margin: 0;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 40px auto 40px;
  column-gap: 10px;
}

.right_panel .message div.icon {
  align-self: start;
}

.right_panel .message div:not(.icon) {
  align-self: center;
}

.right_panel .message button.message_confirm {
  align-self: end;
}

.right_panel .icon {
  width: 40px;
  height: 40px;
}

/* message kind (info, warn, ok, etc.) */
.right_panel .message.ok {
  color: #000000;
  background-color: #36B600;
}

.right_panel .message.info {
  color: #ffffff;
  background-color: #254c6d;
}

.right_panel .message.warn {
  color: #000000;
  background-color: #FFAA00;
}

.right_panel .message.error {
  color: #ffffff;
  background-color: #FF0012;
}

.right_panel .ok .icon {
  background: no-repeat url(../img/pass.svg);
  background-size: contain;
}

.right_panel .warn .icon {
  background: no-repeat url(../img/warn.svg);
  background-size: contain;
}

.right_panel .info .icon {
  background: no-repeat url(../img/info.svg);
  background-size: contain;
}

.right_panel .error .icon {
  background: no-repeat url(../img/fail.svg);
  background-size: contain;
}

.right_panel .message button.message_confirm {
  text-align: center;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 3px 0px;
  cursor: pointer;
}

.right_panel .info button.message_confirm {
  color: #ffffff;
}

button.info_active::after {
  content: "";
  font-size: 2rem;
  font-weight: 600;
  height: 4px;
  width: 100%;
  border-radius: 2px;
  background-color: rgb(0, 200, 255);
}

/* section.message {
    position: relative;
    top: 0px;
    width: inherit;
    padding: 10px;
    border-radius: 0 4px 4px 0;
    z-index: 200;
    animation: 0.6s 1 alternate fadeOut;
    animation-name: fadeOut;
    transform: translateY(0%);
    font-size: 1.4em;
    line-height: 1.4em;
    opacity: 0.5;
    cursor: pointer;
    backdrop-filter: blur(2px);
} */
/* section.message.active {
    animation: 0.3s 1 alternate fadeIn;
    animation-name: fadeIn;
    transform: translateY(100%);
    opacity: 1;
} */
/* section.message img {
    width: 60px;
    height: 60px;
} */
.message div.message_dontshow {
  grid-column: span 3;
  font-size: 0.5rem;
  height: 10px;
  padding-top: 5px;
  margin-left: 50px;
  justify-self: start;
}

.message div.message_dontshow label {
  padding-right: 5px;
}

.message div.message_dontshow input[type=checkbox] {
  font-size: 0.6rem;
  border: none;
  padding-right: 143px;
}

/* @keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

    to {
        opacity: 1;
        transform: translateY(0%);
    }
} */
/* @keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0%);
    }

    to {
        opacity: 0;
        transform: translateY(100%);
    }
} */
/* @media only screen and (max-width: 500px) {

    section.message {
        grid-template-columns: 60px calc(100vw - 120px);
    }
} */
/* small devices ALL */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) {
  button.nav-prev-version {
    display: none;
  }
  .right_panel .message {
    top: 0px;
  }
}
/* small devices LANDSCAPE */
@media only screen and (min-device-width: 375px) and (max-device-width: 926px) and (orientation: landscape) {
  nav {
    width: 10dvw;
    /* mobile viewport bug fix */
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    grid-template-columns: 10dvw;
    grid-auto-rows: minmax(30px, 1fr);
    overflow-y: hidden;
  }
  nav button#nav_info,
  nav button#nav_feedback,
  nav button#nav_download,
  nav button#nav_pdf {
    position: absolute;
    bottom: 0;
    width: 10vw;
    height: 30px;
    text-align: center;
    margin: 0;
    padding: 5px;
    background: none;
  }
  nav button#nav_info {
    left: 0;
  }
  nav button#nav_feedback {
    left: 10vw;
  }
  nav button#nav_download {
    left: 20vw;
  }
  nav button#nav_pdf {
    left: 30vw;
  }
  nav button#nav_feedback,
  nav button#nav_info,
  nav button#nav_download,
  nav button#nav_pdf {
    border-left: unset;
    padding-top: 2px;
    padding-bottom: 8px;
    display: grid;
    align-content: center;
  }
  nav button.tab_active {
    border-left: 2px solid #ffaa00;
    padding-left: calc(1vw - 2px);
    background-color: rgba(33, 36, 41, 0.9);
  }
  nav button#nav_feedback.tab_active,
  nav button#nav_info.tab_active,
  nav button#nav_download.tab_active,
  nav button#nav_pdf.tab_active {
    border-left: unset;
    padding-top: 0;
    border-top: 2px solid #ffaa00;
  }
  nav button#nav_info.tab_active {
    border-color: #55acf9;
    background-color: #254c6d;
  }
  nav button#nav_feedback.tab_active {
    border-color: #13CE02;
    background-color: #075500;
  }
  nav button#nav_download.tab_active {
    background-color: rgba(33, 36, 41, 0.9);
  }
  nav button#nav_pdf.tab_active {
    background-color: rgba(33, 36, 41, 0.9);
  }
}
/* small devices PORTRAIT */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) and (orientation: portrait) {
  nav {
    font-size: 0.6rem;
    padding-left: 0px;
    display: grid;
    grid-template-rows: 9.0909090909svh;
    grid-template-columns: 20vw;
    row-gap: 2px;
    overflow-y: scroll;
    z-index: 400;
    grid-row-end: span 2;
    height: 100dvh;
  }
  nav button {
    padding-left: 5px;
  }
  nav button.tab_active {
    padding-left: 3px;
  }
}
/* panel right */
.right_panel {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(200px, 3fr);
  row-gap: 10px;
  align-content: start;
  justify-content: start;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  background-color: rgba(33, 36, 41, 0.9);
}

fieldset {
  border: 1px solid #3A3F49;
  margin: 15px 0;
  padding: 5px;
  border-radius: 3px;
}

legend {
  color: #ffffff;
  font-size: 1.1em;
}

.panel_header {
  display: block;
  position: absolute;
  font: 300 normal 1.063rem/294% "Rubik Variable", Arial, sans-serif;
  margin: 0;
  width: inherit;
  height: 60px;
  padding: 0px;
  border-left: 2px solid #ffaa00;
  box-sizing: border-box;
  z-index: 50;
  padding-left: 1.2vw;
  background: linear-gradient(180deg, rgba(33, 36, 41, 0.9), rgba(33, 36, 41, 0));
}

.panel_header[name=info_header] {
  border-left: 2px solid #55acf9;
}

.panel_header[name=feedback_header] {
  border-left: 2px solid #13CE02;
}

.panel_content {
  font-size: 0.9rem;
  line-height: 1.3rem;
  padding: 10px 20px;
  margin-top: 60px;
  overflow-x: hidden;
}

.panel_content#feedback {
  margin-top: 0;
}

.panel_content:not(#info_content) {
  font: 400 normal 0.563rem "Rubik Variable", Arial, sans-serif;
}

.panel_content ul {
  list-style-type: disc;
  padding-left: 20px;
}

.panel_content p {
  padding-top: 1px;
  font-size: 0.75rem;
  font-weight: 300;
  line-height: 1.1rem;
}

.sticky-bottom {
  height: max-content;
  position: sticky;
  bottom: 0px;
  background: linear-gradient(rgba(34, 37, 42, 0) 15%, rgb(34, 37, 42));
}

.status_aspect,
.panel_subheader {
  font: 400 normal 2em "Rubik Variable", Arial, sans-serif;
  padding: 0;
  margin-top: 20px;
  padding-bottom: 0;
  color: #aad5ff;
}

.status_aspect span {
  color: #ffffff;
}

.panel_subheader.first {
  margin-top: 70px;
}

.content_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: stretch;
  align-items: start;
  column-gap: 10px;
}

.content_grid_1col {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: stretch;
  align-items: start;
  row-gap: 10px;
}

.content_grid_2col {
  display: grid;
  grid-template-columns: minmax(145px, 1fr) minmax(180px, 1fr);
  justify-items: stretch;
  align-items: start;
}

.content_grid .content_area {
  width: 100%;
}

.content_area#lens_type {
  /* min-width: 195px; */
}

#right_subheader {
  padding: 0px;
  border: none;
}

.twocol {
  grid-column: 1/span 2;
}

div.input_radio#opacity {
  display: grid;
  grid-template-columns: 2fr repeat(4, 50px);
  column-gap: 4px;
}

div[name=shade_content] div.input_radio#opacity span label {
  margin: 0px;
  padding: 13px 5px;
  text-align: center;
}

div[name=shade_content] div.input_radio#opacity span label img {
  padding: 3px 7px;
  display: block;
}

div[name=shade_content] div.disabled#opacity h4 {
  color: rgba(255, 255, 255, 0.4);
}

div[name=shade_content] div.disabled#opacity span label {
  color: rgba(255, 255, 255, 0.2);
  background: none;
}

#shade div.input_radio.inactive label {
  color: rgb(111, 110, 110);
  pointer-events: none;
}

.checkboxbutton {
  display: none;
}

.checkboxbutton + label {
  color: #ffffff;
  display: inline-block;
  text-align: center;
  line-height: 22px;
  width: inherit;
  height: 22px;
  padding: 0px 10px;
  margin: 0;
  white-space: nowrap;
  border-radius: 11px;
  background-color: rgba(64, 128, 184, 0.2);
  box-sizing: border-box;
  cursor: pointer;
}

.checkboxbutton:checked + label {
  background-color: hwb(208 25% 28%);
}

.checkboxbutton:disabled + label {
  color: rgb(111, 110, 110);
  background-color: rgba(64, 128, 184, 0.2);
  pointer-events: none;
}

.dash_entry {
  position: absolute;
  top: 2px;
  right: 0px;
  padding: 0px;
  height: 40px;
  display: grid;
  grid-template-columns: min-content 0.8fr;
  grid-template-rows: 1fr;
  align-items: center;
  justify-items: end;
}

.dash_entry input {
  height: inherit;
}

.size_entry {
  position: absolute;
  top: 2px;
  right: 0px;
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.5fr;
  grid-template-rows: repeat(2, 1fr);
  align-items: center;
}

.size_entry label:first-child {
  grid-row-start: span 2;
}

.dot_entry {
  position: absolute;
  top: 2px;
  right: 0px;
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.5fr;
  align-items: center;
  height: 40px;
}

.dot_entry input {
  height: inherit;
}

.line_entry,
.pix_entry,
.mm_entry,
.text_entry {
  font-size: 1.3em;
  text-align: right;
  height: 20px;
  padding: 0px 7px;
  margin: 0;
  margin-left: 4px;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.2);
}

.line_entry {
  width: 15px;
}

.pix_entry {
  width: 35px;
}

.mm_entry {
  width: 35px;
}

.text_entry {
  width: 100%;
}

.aspect_format {
  width: 50px;
  padding: 0px 3px;
}

.align_left {
  text-align: left;
}

.pix_format {
  width: 50px;
  text-align: left;
  padding: 0px 3px;
}

.mm_format {
  width: 50px;
  text-align: left;
  padding: 0px 3px;
}

.size_entry label {
  display: inline;
}

.size_entry label.unit {
  padding-right: 14px;
}

/* style specific for "save" */
#save, #pdf {
  font: 400 normal 1.2em/1.2em "Rubik Variable", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}

#save .form, #pdf .form {
  height: 100%;
  margin: 0;
  padding: 0;
}

#pdf .form {
  display: grid;
  grid-auto-rows: auto;
  row-gap: 30px;
}

.form-section {
  width: 100%;
  height: 100%;
  margin: 0;
}

#save .form input, #pdf .form input {
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: 400;
  width: calc(100% - 10px);
  margin: 5px 0 10px 0;
  padding: 5px;
}

input[type=range] {
  cursor: pointer;
  margin: 0 !important;
  padding: 0 !important;
}

/* style specific for "frameleader" */
#feedback button,
#save button, #pdf button {
  font-size: 1.2em;
  line-height: 1.2em;
  font-weight: 474;
  width: 100%;
  height: 39px;
  margin: 2px 0;
  padding: 1px 0px;
  color: #ffffff;
  background-color: hwb(208 25% 28%);
  border-radius: 2px;
  box-sizing: border-box;
  cursor: pointer;
}

#save .button-group, #pdf .button-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 5px;
  background-color: rgba(33, 36, 41, 0.9);
  position: sticky;
  top: 0px;
  z-index: 50;
}

.button-group.save_frameleader {
  margin-bottom: 20px;
}

#save button.dimmed, #pdf button.dimmed {
  background-color: rgba(80, 161, 232, 0.3);
}

#save button:disabled, #pdf button:disabled {
  color: #d8d8d8;
  background-color: rgba(64, 128, 184, 0.2);
  cursor: not-allowed;
}

#pdf fieldset.text-input-set button.text_show_button {
  font-size: 1em;
  font-weight: 400;
  margin: 10px 0;
  margin-right: 0px;
  padding: 0 10px;
  text-align: center;
  width: 40%;
  height: 22px;
  line-height: 20px;
  margin-right: 10px;
  white-space: nowrap;
  border-radius: 11px;
}

.selection-group {
  width: inherit;
  display: grid;
  grid-template-rows: repeat(2, auto);
  row-gap: 4px;
  margin: 8px 0;
}

.selection-group.disabled {
  pointer-events: none;
}

#pdf .selection-group.disabled .caption,
#pdf .selection-group.disabled .radio_small label {
  color: rgb(111, 110, 110);
}

#pdf .toggle-group {
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-rows: 20px;
  column-gap: 10px;
  margin: 10px 0 30px 0;
}

#pdf .toggle-group.disabled {
  pointer-events: none;
}

#pdf .toggle-group.disabled .caption,
#pdf .toggle-group.disabled .toggle label,
#pdf .toggle-group.disabled .toggle.active label {
  color: rgb(111, 110, 110);
}

#pdf .selection-group .toggle label {
  width: 38px;
  height: 22px;
  border-radius: 11px;
  background-color: rgba(64, 128, 184, 0.2);
  cursor: pointer;
}

#pdf .toggle-group.disabled .toggle.active label {
  background-color: rgba(64, 128, 184, 0.2);
}

#pdf .selection-group .toggle.active label {
  background-color: hwb(208 25% 28%);
}

#pdf .selection-group .toggle label span.switch {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  background-color: #8f8f8f;
  transform: translate(-8px);
  margin-top: 2px;
}

#pdf .selection-group .toggle.active label span.switch {
  display: inline-block;
  background-color: #ffffff;
  transform: translate(8px);
}

#save .caption, #pdf .caption {
  font-size: 1.1em;
  line-height: 1.7em;
  font-weight: 300;
  padding-left: 3px;
  width: 100%;
}

#save .caption.info {
  color: #8f8f8f;
}

#pdf .caption.slider {
  transform: translateY(10px);
}

#pdf .selection-group.disabled .caption span {
  background: no-repeat left center/6px url("../img/dot_6a6969.svg");
}

#pdf .grid {
  display: grid;
  grid-template-columns: max-content 40px;
  column-gap: 10px;
}
#pdf .grid span.single {
  background: none;
}

#pdf .selection-group .toggle label span.switch.single {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0;
  background-color: #8f8f8f;
  transform: translate(-1px);
}

#pdf .selection-group .toggle.active label span.switch.single {
  width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0;
  background-color: #ffffff;
  transform: translate(15px);
}

.caption span {
  margin-left: 3px;
  padding-left: 12px;
  text-align: end;
  background: no-repeat left center/6px url("../img/dot_4080b8.svg");
}

#save .radio_small, #pdf .radio_small {
  height: min-content;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 8px;
  margin: 0;
  margin-left: 12px;
}

#pdf .radio_5 {
  height: auto;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  column-gap: 5px;
}

#pdf input[type=checkbox],
#feedback input[type=checkbox] {
  display: none;
}

#feedback button[type=button] {
  font-size: 1.4em;
  cursor: pointer;
}

#feedback input[type=checkbox] + label,
#pdf input[type=checkbox] + label,
#save .radio_small div label, #pdf .radio_small div label {
  font-size: 0.9em;
  display: inline-block;
  text-align: center;
  line-height: 22px;
  width: 100%;
  height: 22px;
  padding: 0px 10px;
  margin: 0;
  white-space: nowrap;
  border-radius: 11px;
  background-color: rgba(64, 128, 184, 0.2);
  box-sizing: border-box;
  cursor: pointer;
}

#feedback input[type=checkbox] + label {
  text-align: left;
  padding-left: 20px;
  font-size: 1.3em;
}

#feedback input[type=checkbox]:checked + label,
#save .radio_small div input[type=radio]:checked + label,
#pdf .radio_small div input[type=radio]:checked + label,
#pdf .radio_small div input[type=checkbox]:checked + label {
  color: #ffffff;
  background-color: hwb(208 25% 28%);
}

#pdf .selection-group.disabled input[type=radio]:checked + label,
#pdf .selection-group.disabled input[type=checkbox]:checked + label,
#save .radio_small div input[type=radio]:disabled + label,
#pdf .radio_small div input[type=radio]:disabled + label,
#pdf .radio_small div input[type=checkbox]:disabled + label {
  color: rgb(111, 110, 110);
  background-color: rgba(64, 128, 184, 0.12);
}

#pdf .radio_small div input[type=checkbox]:disabled + label,
#pdf .radio_small div input[type=radio]:disabled + label {
  pointer-events: none;
}

#feedback div {
  margin-bottom: 10px;
}

#info_content div.text,
#feedback div.text {
  font-size: 1.6em;
  color: #E0E0E0;
  margin-left: 3px;
}

.version-info {
  margin-top: 0px;
}

.version-news {
  font-size: 0.9em;
  margin-top: 15px;
}

h2.version-info,
.version-news h2 {
  color: #aad5ff;
  font-size: 1.1rem;
  font-weight: 400;
  padding-top: 10px;
}

.version-news ul {
  width: 90%;
  padding-top: 0px;
  padding-bottom: 20px;
}

.version-news ul li {
  line-height: 1.4em;
  padding: 6px 0px;
}

#feedback fieldset {
  border: none;
  padding: 10px 0 20px 0;
}

#feedback textarea {
  width: 94%;
  padding: 10px;
  border: none;
  background-color: #d8d8d8;
  font-size: 1.6em;
}

#feedback fieldset legend {
  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.4em;
  padding: 15px 0 5px 0;
  width: 80%;
}

#feedback fieldset input[type=email] {
  font-size: 1.4em;
  line-height: 1.4em;
  padding: 5px 15px;
  width: 88%;
}

.content_area .input_radio {
  position: relative;
}

.input_radio_inline label {
  display: inline;
  width: unset;
  white-space: nowrap;
}

.panel_content .column {
  width: inherit;
  display: grid;
  grid-template-columns: minmax(90px, 1fr) minmax(140px, 2fr);
  grid-auto-rows: 1fr;
  row-gap: 10px;
  align-items: center;
  margin-bottom: 40px;
}

.content_area h4 {
  font: 400 normal 2.3em "Rubik Variable", Arial, sans-serif;
  color: #aad5ff;
}

.content_area h4.disabled {
  font: 400 normal 2.3em "Rubik Variable", Arial, sans-serif;
  color: rgba(255, 255, 255, 0.4);
}

.prop {
  font-size: 1.2em;
  padding-left: 5px;
}

/* lens panel */
.panel_content_item input#lens_set {
  font: 350 normal 1.6em "Rubik Variable", Arial, sans-serif;
  color: #ffffff;
  width: 75px;
  height: 20px;
  margin: 6px 0;
  padding: 7px;
  border-radius: 2px;
  background-color: #254c6d;
}

.panel_content_item label#lens_set_label {
  width: 25px;
  font-size: 1em;
  transform: translate(-28px, 3px);
}

.panel_content_item input#lens_set:focus {
  background-color: #30343D;
}

.panel_content_item .frame_dia {
  font: 350 normal 1.5em "Rubik Variable", Arial, sans-serif;
  display: block;
}

#lensCoverInput {
  white-space: nowrap;
}

.content_grid {
  font-size: 0.7rem;
  display: grid;
  grid-template-columns: 100px auto;
}
.content_grid p {
  margin: 2px 0;
}

#lens.subform_content {
  justify-content: flex-start;
}

.flex_item {
  padding: 0px 0px;
  display: flex;
  flex-flow: row wrap;
  column-gap: 10px;
  row-gap: 5px;
}

.panel_content_item[name=lens_content] .lens_family {
  height: 100%;
  overflow-y: scroll;
}

.panel_content_item[name=lens_content] #lens_type {
  height: 100%;
  overflow-y: scroll;
}

.lens-squeeze,
.lens-squeeze-active,
.panel_content_item[name=lens_content] div.input_radio label {
  font: 400 normal 1.3em/22px "Rubik Variable", Arial, sans-serif;
  width: 50px;
  height: 22px;
  border-radius: 11px;
  margin: 4px 0;
  padding: 0px;
  text-align: center;
  align-self: end;
}

.lens-squeeze,
.lens-squeeze-active {
  font: 400 normal 0.6rem/19px "Rubik Variable", Arial, sans-serif;
  width: 40px;
  height: 18px;
  border-radius: 9px;
  text-align: center;
  justify-self: end;
}

.lens-squeeze-active {
  background-color: #4080b8;
}

#lens svg text {
  font: 500 normal 1.3em/22px "Rubik Variable", Arial, sans-serif;
}

/* camera-sensor mode panel */
.cam_type {
  border-right: 1px solid #4080b8;
}

.cam_type h4,
.lens_family h4 {
  font: 400 normal 1.5em/20px "Rubik Variable", Arial, sans-serif;
  width: inherit;
  height: 20px;
  margin: 6px 0;
  padding: 7px 0;
  padding-left: 7px;
  cursor: pointer;
  color: #ffffff;
}

.cam_type h4.selected {
  background-color: #4080b8;
  border-radius: 2px 0 0 2px;
}

.lens_family h4.selected {
  background-color: #4080b8;
  border-radius: 2px;
}

#lens_type input[type=radio] + label,
.cam_mode input[type=radio] + label {
  color: #ffffff;
  padding: 10px;
}

#lens_type ul,
.cam_mode ul {
  margin: 0;
  padding: 4px 0;
}

#lens_type ul li,
.cam_mode ul li {
  color: #ffffff;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.cam_mode ul li.codec {
  font-size: 0.6rem;
  font-weight: 300;
  display: grid;
  grid-template-columns: auto min-content;
  justify-items: end;
  column-gap: 7px;
}

.cam_mode ul li.codec .ar {
  color: #FFB600;
}

.cam_mode ul li.codec .pro {
  color: #13CE02;
}

.cam_mode input[type=radio] + label.ar {
  background: right 38px center/7px no-repeat url("../img/dot_arriraw.svg");
}

.cam_mode input[type=radio] + label.pro {
  background: right 22px center/7px no-repeat url("../img/dot_prores.svg");
}

.cam_mode input[type=radio] + label.pro.ar {
  background: right 38px center/7px no-repeat url("../img/dot_arriraw.svg"), right 22px center/7px no-repeat url("../img/dot_prores.svg");
}

.cam_mode input[type=radio]:checked + label,
.cam_mode input[type=radio]:checked + label.pro.ar {
  border-radius: 0 2px 2px 0;
  background-color: #4080b8;
}

/* #pdf .form input[type="file"]#logo_upload {
    padding: 20px 0;
    margin: 20px 0;
    display: none;
} */
#logo_input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 5px;
}

#logo_input input {
  grid-column: 1/span 2;
}

input[type=file]#logo_upload::file-selector-button {
  width: 0;
  height: 0;
  opacity: 0;
}

button#logo_show_button,
#logo_input label.fake-button {
  font-size: 1em;
  margin: 10px 0;
  padding: 0 10px;
  text-align: center;
  /* width: 80%; */
  height: 22px;
  line-height: 20px;
  margin-right: 10px;
  white-space: nowrap;
  border-radius: 11px;
  color: #ffffff;
  background-color: hwb(208 25% 28%);
  border: none;
  transform: translateY(-3px);
  cursor: pointer;
}

#logo_input label.fake-button.disabled {
  color: #d8d8d8;
  background-color: rgba(64, 128, 184, 0.2);
  cursor: not-allowed;
}

/* input[type="range"] {
    appearance: none;
    color: #ff9900;
    background: none;
} */
/* small devices ALL */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) {
  .panel_header {
    display: none !important;
    height: 0;
  }
  .panel_subheader {
    padding: 0px;
  }
  .panel_subheader.first {
    margin: 0;
  }
  .panel_content {
    margin: 0;
  }
  .panel_content_item input#lens_set {
    font-size: 1.6em;
    padding: 3px 1px;
    text-align: center;
    border: 1px solid #666666;
  }
  .sticky-bottom {
    bottom: -10px;
  }
}
/* small devices LANDSCAPE */
@media only screen and (min-device-width: 375px) and (max-device-width: 926px) and (orientation: landscape) {
  .right_panel {
    width: 50dvw;
    grid-template-columns: 50dvw;
    height: 100dvh;
    min-height: 100dvh;
    /* mobile viewport bug fix */
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
    overflow-y: scroll;
    row-gap: 0px;
  }
  .content_grid_1col[name=style_content] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    align-items: start;
    row-gap: 10px;
    column-gap: 10px;
  }
  .content_grid_1col[name=style_content] .content_area {
    height: 96vh;
    overflow-y: scroll;
    padding: 2vh 0;
  }
  .content_grid_2col {
    grid-template-columns: 20vw 26vw;
  }
  .cam_type,
  .cam_mode {
    height: 100%;
    overflow-y: scroll;
  }
  .panel_content[name=frame_content],
  .panel_content[name=offset_content] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
  }
  .panel_content {
    height: calc(100dvh - 20px);
    overflow-y: scroll;
    padding: 10px;
  }
  .panel_content[name=frame_content],
  .panel_content[name=offset_content],
  .panel_content[name=style_content] {
    height: 96dvh;
    overflow: hidden;
    padding: 2dvh 10px;
  }
  .panel_content[name=lens_content] {
    height: auto;
  }
  .panel_content.sticky-bottom p {
    font-size: 1.5em;
    line-height: 1.5em;
  }
  .panel_content[name=frame_content] .content_area.column {
    grid-template-columns: 40% 60%;
    row-gap: 10px;
  }
  .panel_content[name=offset_content] .content_area.column {
    grid-template-columns: 35% 65%;
    row-gap: 20px;
  }
  .panel_content[name=offset_content] .mm_format,
  .panel_content[name=offset_content] .pix_format {
    margin-bottom: 5px;
  }
  /* .panel_content[name="frame_content"] .pix_entry, */
  .panel_content[name=frame_content] .pix_format,
  .panel_content[name=frame_content] .mm_format {
    width: 42px;
    padding-right: 3px;
    text-align: right;
  }
  .panel_content[name=frame_content] .aspect_format {
    width: 30px;
  }
  .panel_content[name=style_content].content_area {
    overflow-y: scroll;
    padding: 2dvh 0;
  }
  .panel_content[name=style_content] .dash_entry,
  .panel_content[name=style_content] .size_entry,
  .panel_content[name=style_content] .mm_entry,
  .panel_content[name=style_content] .pix_entry {
    font-size: 0.8rem;
    height: 20px;
  }
  .content_area.column {
    height: 96dvh;
    overflow-y: scroll;
    padding: 2dvh 0;
  }
  .content_area h4 {
    font-size: 2em;
  }
  /* nav button {
      height: inherit;
  } */
  .lens-squeeze,
  .lens-squeeze-active {
    font: 400 normal 0.7rem/4dvh "Rubik Variable", Arial, sans-serif;
    width: 40px;
    height: 4dvh;
    border-radius: 4dvh;
    text-align: center;
  }
  #save .form,
  #pdf .form {
    row-gap: 15px;
  }
}
/* small devices PORTRAIT */
@media only screen and (min-device-width: 300px) and (max-device-width: 926px) and (orientation: portrait) {
  .right_panel {
    grid-template-columns: 80dvw;
    height: 45dvh;
    min-height: 45dvh;
    padding: 0;
    overflow: hidden;
  }
  .panel_content {
    height: calc(45dvh - 20px);
    overflow-y: scroll;
    padding: 10px;
  }
  .panel_content[name=mode_content] {
    height: 45dvh;
    margin-top: 0;
    padding: 0 10px;
  }
  .panel_content[name=frame_content] {
    padding-bottom: 1px;
  }
  .panel_content .lenscoverinput {
    padding: 0 2vw;
  }
  .cam_type,
  .cam_mode {
    height: 45dvh;
    overflow-y: scroll;
    margin-bottom: 15px;
  }
  #pdf .form .form-section {
    width: 76dvw;
  }
  #save .radio_small, #pdf .radio_small {
    margin-left: 0;
  }
  #feedback input[type=checkbox] + label, #pdf input[type=checkbox] + label, #save .radio_small div label, #pdf .radio_small div label {
    /* width: 14dvw; */
    padding: 0px 3px;
  }
  .content_grid_2col {
    grid-template-columns: 31dvw 45dvw;
    grid-template-rows: auto;
    overflow: hidden;
  }
  h2.version-info, .version-news h2,
  .panel_content p {
    font-size: 0.8rem;
  }
  .panel_content ul,
  .panel_content p {
    font-size: 0.7rem;
    line-height: 1.1rem;
  }
}
/* simulation of camera gui for entering user values */
.gui_user {
  background-color: rgba(0, 0, 0, 0.2);
  height: 170px;
  margin-top: 10px;
}

.gui {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  min-width: min-content;
  white-space: nowrap;
}

.gui-venice {
  height: 170px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 0.6rem;
  color: #FFFFFF;
  background-color: #0D0D0E;
}

.gui-venice-header {
  font-size: 0.8rem;
  color: #D8D8D8;
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  margin: 1px;
  background-color: #454545;
  height: 20px;
}

.gui-venice-header-left {
  border: 2px solid #454545;
  background-color: #0D0D0E;
  padding: 0px 6px;
}

.gui-venice-header-right {
  padding: 1px;
  background-color: #454545;
  padding: 2px 6px;
}

.gui-venice-content {
  padding: 10px;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  grid-template-rows: repeat(7, 1fr);
  row-gap: 3px;
  column-gap: 3px;
}

.accent {
  color: #FBC553;
}

.gui-minilf,
.gui-amira,
.gui-alexa {
  height: 170px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0.8rem;
  color: #000000;
  background-color: #FFFFFF;
}

.gui-minilf-header,
.gui-amira-header {
  display: grid;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: #FFFFFF;
  margin: 0px;
  padding-left: 8px;
  background-color: #014080;
  height: 20px;
  align-content: center;
}

.gui-minilf-header {
  background-color: #000000;
}

.gui-amira-content,
.gui-alexa-content {
  padding: 13px 10px;
  display: grid;
  grid-template-columns: 1.7fr 0.3fr;
  grid-template-rows: repeat(4, 1fr);
  row-gap: 10px;
  column-gap: 10px;
}

.gui-amira-content div.values,
.gui-alexa-content div.values {
  justify-self: right;
}

.gui-alexa-header {
  white-space: nowrap;
  font-size: 0.8rem;
  line-height: 1.6em;
  text-transform: uppercase;
  color: #000000;
  margin: 0px;
  padding-left: 8px;
  background-color: #62ABFF;
  height: 20px;
}

.gui-minilf-content {
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(4, 1fr);
  row-gap: 2px;
}

.gui-minilf-content div {
  white-space: nowrap;
  padding: 5px;
  display: grid;
  grid-template-columns: 5fr 3fr 0.5fr;
}

.gui-minilf-content div.first {
  color: #ffffff;
  background-color: #005CA5;
}

/* @media only screen and (max-width: 960px) {

    .gui_user {
        height: 110px;
    }

    .full {
        display: none;
    }

    .gui-venice-header {
        grid-template-columns: 1fr;
    }

    .gui-minilf,
    .gui-venice,
    .gui-alexa,
    .gui-amira {
        height: 110px;
    }

    .gui-minilf-content {
        row-gap: 1px;
    }

    .gui-minilf-content div {
        padding: 3px 5px;
    }

    .gui-alexa-content,
    .gui-amira-content {
        padding: 10px 10px;
        row-gap: 3px;
    } */

/*# sourceMappingURL=frame6.css.map */
