/* CSS comes here */
 #video {
     /* border: 1px solid black; */
     width: 320px;
     height: 240px;
     /* margin: 11px;
     margin-bottom: 20px; */
     box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 80%);
     padding: 5px;
 }

 #photo {
     border: 1px solid black;
     width: 320px;
     height: 240px;
 }

 #canvas {
     display: none;
 }

 /* .camera {
     width: 340px;
     display: inline-block;
 } */

 .output {
     width: 340px;
     display: inline-block;
 }

 #startbutton {
     display: block;
     position: relative;
     margin-left: auto;
     margin-right: auto;
     bottom: 36px;
     padding: 5px;
     background-color: #6a67ce;
     border: 1px solid rgba(255, 255, 255, 0.7);
     font-size: 14px;
     color: rgba(255, 255, 255, 1.0);
     cursor: pointer;
 }

 .contentarea {
     font-size: 16px;
     font-family: Arial;
     text-align: center;
 }

 .form-control,
 .select2-container--default .select2-selection--single,
 .select2-container--default .select2-selection--single .select2-search__field,
 .typeahead,
 .tt-query,
 .tt-hint {
     height: 34px !important;
     padding: 6px 12px;
     border: 1px solid #ccc;
     border-radius: 4px;
 }

 .forms-sample {
     background: rgba(204, 204, 204, 0.35);
     padding: 10px;
     color: black;
     /* font-weight: 700; */
 }

 .card-title {
     background: #19aa8d;
     padding: 10px;
     color: white !important;
     font-weight: 100 !important;
 }

 .input_required {
     background-image: linear-gradient(to top, #f44336 2px, rgba(244, 67, 54, 0) 2px), linear-gradient(to top, #d2d2d2 1px, rgba(210, 210, 210, 0) 1px);
 }


 .loadtable {
     width: 100%;
 }

 .loadtable tr td {
     border: 1px solid #c3c3c3;
     text-wrap: nowrap;
 }

 .loadtable tr th {
     font-size: 13px;
     color: #3859a5;
 }

 .loadtable tr td input {
     width: 100%;
     border: 1px solid #c3c3c3;
     padding: 5px;
 }

 .gallery {
     display: inline-block;
 }

 .gallery img {
     height: 170px;
     width: 170px;
     margin: 11px;
     margin-bottom: 20px;
     box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 80%);
     padding: 5px;
 }

 img {
     max-width: 100%;
     border-radius: 3px;
 }

 .subcategorytitle {
     background: rgba(58, 103, 103, 0.67);
     padding: 5px;
     color: white !important;
 }

 .subcath6 {
     font-weight: 100;
     font-size: 1rem;
 }

 #msgBox {
     display: none;
     margin: 0px auto;
     position: fixed;
     transition: all 0.5s ease-in-out 0s;
     z-index: 1060;
     /* top: 20px; */
     left: 0px;
     width: 80%;
     right: 0px;
 }

 .alert.alert-primary {
     background-color: #558284;
 }

 .ImageBox {
     box-shadow: 0px 10px 25px 0px rgb(0 0 0 / 30%);
     margin-top: 10px;
     width: 150px;
     height: 160px;
 }

 .loadtabledata {
     width: 100%;
     border-collapse: collapse;
 }

 .loadtabledata th {
     text-align: left;
     padding: 8px;
     font-size: 12px;
     color: #1885d3;
 }

 tr:nth-child(even) {
     background-color: #dddddd;
 }

 .loadtabledata tr td {
     padding: 8px;
 }

 .hidden {
     display: none;
 }