.just-small-text {
  font-size: .5em;
}

.sub-heading {
  font-size: .7em;
  color: var(--bs-dark-border-subtle);
}

.text-content {
  line-height: 0.8em;
}

.bg-green {
  background-color: #4CAF50;
  color: var(--bs-body-bg);
}

.camBorder{
  max-width: 300px;
  min-width: 100px;
  width: 100%;
  /* --b: 5px;
  --c: #4CAF50;
  --w: 20px;
  border: var(--b) solid #0000;
  --_g: #0000 90deg,var(--c) 0;
  --_p: var(--w) var(--w) border-box no-repeat;
  background: conic-gradient(from 90deg at top var(--b) left var(--b),var(--_g)) 0 0 / var(--_p), 
              conic-gradient(from 180deg at top var(--b) right var(--b),var(--_g)) 100% 0 / var(--_p), 
              conic-gradient(from 0deg at bottom var(--b) left var(--b),var(--_g)) 0 100% / var(--_p), 
              conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--_g)) 100% 100% / var(--_p); */
}
.html5-qrcode-element{
  width: 100%;
  margin: 3px 0;
  height: 45px;

  display: inline-block;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  color: var(--bs-btn-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius);
  
    --bs-btn-color: #fff;
    --bs-btn-bg: #198754;
    --bs-btn-border-color: #198754;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #157347;
    --bs-btn-hover-border-color: #146c43;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #146c43;
    --bs-btn-active-border-color: #13653f;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #198754;
    --bs-btn-disabled-border-color: #198754;
}
#html-select-camera{
  font-size: 0.8em;
  color:black;
  background-color: #f3f7fe;
  border-radius: 0;
  border: solid 1px #dfdfdf;
}
#html-select-camera:disabled{
  font-size: 0.7em;
  color:rgb(121, 121, 121);
  background-color: #E0E0E0;
  border-radius: 0;
  border: solid 1px #dfdfdf;
}
/* Hide text nodes within the span but keep the select element visible */
span#spanCam {
  visibility: hidden;
}
/* 
span#spanCam::before {
  content: '';
  flex: 1;
  visibility: hidden;
} */

span#spanCam select {
  visibility: visible;
}
.html5-qrcode-element:disabled{
  background-color: #f3f7fe;
  color: #000000;
  border: none;
  width: 100%;
  margin: 3px 0;
  height: 45px;
  transition: .3s;
  border: 2px solid #28a745;
}
#my-qr-reader{
  border: 0 !important;
}
.foot{
  position: absolute;
  bottom: 0px;
  left: 30vw;
  text-align: center;

}