body {
    padding: 0;
    margin: 0;
    border: 1px solid #e8e8e8;
    height: 100vh;
    overflow: hidden;
    background: #f5f5f5;
}

.topbar {
    text-align: center;
    width: 100%;
    flex: 0 1 100%;
    overflow-y: hidden;
    background: #c73636;
    /* text-shadow: 1px 1px 3px #100d0d; */
    color: white;
    /* font-stretch: expanded; */
    /* font-style: italic; */
    /* border-bottom: 2px solid #e8e8e8; */
}

div#app {
    padding: 0;
    display: inherit;
    width: 100%;
    /* flex: auto; */
    height: 80vh;
    position: relative;
    border-bottom: 1px solid #888888;
    justify-content: space-evenly;
    flex-wrap: wrap;
    flex-direction: column;
}

.sidebar h2 {
    text-transform: uppercase;
    font-size: 16px;
    color: #3f88bb;
}

.sidebar {
    /* column-count: 1; */
    /* width: 100%; */
    /* padding: 0px; */
    /* display: flex; */
    /* grid-auto-flow: column; */
    /* flex: 0 1 100%; */
    /* padding-top: 15px; */
    /* overflow-y: hidden; */
    /* background: #1616ff; */
    /* flex-wrap: wrap; */
    /* text-align: center; */
    /* align-content: center; */
    /* flex-direction: column-reverse; */
    /* justify-content: center; */
}

.preview-container {
    display: inline-block;
    width: 100%;
    border-top: 2px solid #e8e8e8;
    border-bottom: 2px solid #e8e8e8;
}

video#preview {
    width: 100%;
    height: auto;
    max-height: 50%;
    flex: 0 1 100%;
    background: #1d1d1d;
}

section.info {}

.sidebar > section {display: inline-block;padding: 5px 10px;background: whitesmoke;border-right: 1px solid #969696;}

.sidebar > section > ul {
    display: contents;
    padding: 0;
    list-style: none;
    width: 100%;
}


#preview{
   width:500px;
   height: 500px;
   margin:0px auto;
}


span.active {
    color: #45cc00;
}

.sidebar section {
    /* width: 100%; */
    /* display: inline-flex; */
    /* flex-direction: column-reverse; */
    /* flex-wrap: wrap; */
    /* align-content: space-around; */
    /* justify-content: space-between; */
    /* align-items: center; */
}

.sidebar section h2 {
    flex: auto;
    text-align: center;
    width: 100%;
    /* margin-top: 15px; */
    line-height: 28px;
    background: white;
}

.sidebar li {
    line-height: 26px;
    color: #333333;
    text-align: center;
}



ul#log {overflow-y: scroll;height: 20vh;}

ul#log_manager {
    height: 100%;
    /* position: absolute; */
    left: 0;
    text-align: left !important;
    right: 0;
    list-style: none !important;
    padding-inline-start: 0 !important;
    text-indent: 0px;
    list-style-type: none;
    text-indent: 0;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
}

div#log {
    /* display: table; */
    height: 20vh;
    width: 100%;
    padding: 0px;
    text-indent: 0px;
    text-align: left !important;
    margin: 0;
    /* overflow: auto; */
    background: #f2fbff;
    overflow-y: scroll;
    overflow-x: hidden;
}

ul#log_manager  li {
    background: #ffffffd9;
    list-style: none !important;
    text-indent: 0px;
    text-indent: 15px;
    word-break: break-all;
    list-style-type: none;
    margin-block-start: 0px !important;
    margin-block-end: 0px !important;
    border-bottom: 1px dotted #969696;
}

#log li:hover {
    background: #f5ffbe !important;
    cursor: help;
}

.topbar >h3 {
    margin-top: 0;
    padding-top: 15px;
}

.topbar > h5 {
    padding-bottom: 15px;
    text-transform: uppercase;
    font-size: 18px;
    color: #fdff5f;
}

form input {
  /* font-size: 30px; */
  /* padding: 0 20px; */
  /* border: 2px solid #ccc; */
  /* width: max-content; */
  /* color: #666; */
  /* line-height: 3; */
  text-align: justify;
  /* display: inline-block; */
  /* border-radius: 7px; */
  /* font-family: 'PT Sans', sans-serif; */
  /* font-weight: bold; */
}
form input:focus {
  outline: 0;
}
form input.error {
  border-color: #ff0000;  
}
form label.error {
  background-color: #ff0000;
  color: #fff;
  padding: 6px;
  font-size: 11px;
}

label {
  /* color: #999; */
  /* display: block; */
  /* margin-bottom: 10px; */
  /* text-transform: uppercase; */
  /* font-size: 18px; */
  /* font-weight: bold; */
  /* letter-spacing: 0.05em; */
}

form small {
  color: #888;
  font-size: 1em;
  margin-top: 10px;
  display: block;
  align-self: ;
}


section.col-sm-12 {
    width: 100%;
    /* overflow: hidden; */
    /* display: table-column-group; */
    /* flex-wrap: wrap; */
    /* text-align: center; */
    /* overflow-y: hidden; */
}

section {
    display: block;
}
:where([autocomplete="one-time-code"]) {
  --otp-digits: 12;
  --otp-ls: 3ch;
  text-transform: uppercase;--otp-gap: 1.25;

  /* private consts */
  --_otp-bgsz: calc(var(
  --otp-ls) + 1ch);
  --_otp-digit: 0;
  all: unset;
  background: linear-gradient(
      90deg,
      var(--otp-bg, #bbb) calc(var(--otp-gap) * var(--otp-ls)),
      transparent 0
    ),
    linear-gradient(
      90deg,
      var(--otp-bg, #eee) calc(var(--otp-gap) * var(--otp-ls)),
      transparent 0
    );
  background-position: calc(var(--_otp-digit) * var(--_otp-bgsz)) 0, 0 0;
  background-repeat: no-repeat, repeat-x;
  background-size: var(--_otp-bgsz) 100%;
  caret-color: var(--otp-cc, #222);
  caret-shape: block;
  clip-path: inset(0% calc(var(--otp-ls) / 2) 0% 0%);
  font-family: ui-monospace, monospace;
  font-size: var(--otp-fz, 2.5em);
  inline-size: calc(var(--otp-digits) * var(--_otp-bgsz));
  letter-spacing: var(--otp-ls);
  padding-block: var(--otp-pb, 1ch);
  padding-inline-start: calc(((var(--otp-ls) - 1ch) / 2) * var(--otp-gap));
}

/* For this demo */
label span {
  display: block;
  /* font-family: ui-sans-serif, system-ui, sans-serif; */
  /* font-weight: 500; */
  color: red;
  color: #e7ff33;
  line-height: 34px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 12px;
}
form#form {
    border: 1px solid #312121;
    width: max-content;
    background: #141414;
    margin: 0 auo;
    width: 100%;
    text-align: -webkit-center;
    position: relatibve;
}