.xcontainer {
   position: absolute;
}

.canvas {
   background: #0FF;
}
.xcanvascontainer {
   background: rgba(129, 180, 180,0.2);

}

#large-container {
   width: 80vw;
   /*1100px;*/
   height: 75vh;
   /*800px; */
   overflow: hidden;
}

#scroll-container {
   /*width:  calc(75vw); /*calc(100% - 22px); 95vw   /*1000px;*/
   height: calc(70vh);
   /* - 60px); /*22px); 80vh /*600px */
   overflow: auto;
   margin: 2px;
   background-color: rgb(244, 242, 242);
   border: 1px solid rgb(209, 237, 249);
}

xbody {
   /* margin bottom by footer height */
   margin-bottom: 160px;
}

body {
  margin: 0;
  padding: 0;
  overflow: auto; /*hidden; */
  background-color: white;
}


.xfooter {
   position: absolute;
   bottom: 0;
   width: 100%;
   /* Set the fixed height of the footer here */
   height: 60px;
   background: #F37A1D;
  border-top: 3px solid #F37A1D;   
 }

 .form-input {               /* mod of form-select */
   display: block;
   width: 100%;
   padding: 0.375rem 2.25rem 0.375rem 0.75rem;
   -moz-padding-start: calc(0.75rem - 3px);
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
   background-color: rgb(241, 241, 194);  /*#fff; */
   background-repeat: no-repeat;
   background-position: right 0.75rem center;
   background-size: 16px 12px;
   border: 1px solid #ced4da;
   border-radius: 0.375rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
 }