body {
  overscroll-behavior : contain; 
  background-color    :#E4E4E4;
  background-image    :linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
  font-family         : 'Roboto', sans-serif !important;
  -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
  -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
  -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
}

.no_margin{
  margin-right: none;
  margin-left: none;
}

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

.quotephotos {
  width  : 225px !important;
}

.center-div
{
  width: 100%;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;top: 50%;
}

.alert-mod{
  margin-bottom: 0 !important;
  margin-top:    0 !important;
}

.modal-size{
  width:  800px;
  height: 800px;
}

.mypanel{
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
  background-color: #fff;
  padding: 1.25rem;
}

.uploadbutton{
  background-color: darkred; 
}

.titleheader {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Font Awesome 5 Free';
}

.modal.modal-fullscreen .modal-dialog {
  padding : 0;
  max-width : none;
}

.modal.modal-fullscreen .modal-content {
  height: auto;
  min-height: 100%;
  border-radius:10px;
  border: skyblue;
}

th.dt-center { text-align: center;  }
td.dt-center { text-align: center; }

.navtopright{
  display: flex;
}

.navtopmiddle{
  display        : flex;
  flex-direction : row;
  align-items    : baseline;
}

#customers > tbody > tr > td.text-center.dtr-control.sorting_1::before{
  margin-left: 40%;
}

#customers > tbody > tr > td.control {
  width: 40px !important;
}

#autocomplete {
  max-width: 400px;
  margin: 0 auto;
}
.autocomplete-input{
  background-color: unset !important;
}

.baselineflex{
  display: flex;
  align-items: baseline;
}

#customForm {
  display: flex;
  flex-flow: row wrap;
}

#customForm fieldset {
  flex: 1;
  border: 1px solid #aaa;
  margin: 0.6em;
}

#customForm fieldset legenda {
  padding: 5px 20px;
  border: 1px solid #aaa;
  position: relative;
  font-weight: 400;
  border: 1px solid transparent;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: .25rem;
  top: -10px;
  left: 10px;
  color: #fff;
}

#customForm fieldset.name {
  flex: 2 100%;
}

#customForm fieldset.name legenda {
  background:rgb(40,66,100);
}

#customForm fieldset.office legenda {
  background: rgb(40,66,100);
}

#customForm fieldset.hr legenda {
  background: rgb(40,66,100);
}

#customForm div.DTE_Field {
  padding: 5px;
}

.DTED_Lightbox_Close{
  box-sizing: unset;
}

.custom_form_button {
  background-image: unset !important;
}

.btnFormSubmit{
  color: white !important;
  background-color : #007bff !important;
  background-image : none !important;
  min-width        : 108px;
}

.btnFormExit{
  color            : white !important;
  background-color :  #dc3545 !important;
  background-image : none !important;
  min-width        : 108px;
}


.Aligner {
  display: flex;
  flex-direction: column;
}

.Aligner > div {
  flex: 1;
}


#brandForm > div {
padding : 5px !important;
}


@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  
  #theCamera > video {
    border-style  : solid;
    border-color  : coral;
    width         : 985px !important;
    object-fit    : cover;
  }
    
}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
  
    #theCamera > video {
     border-style  : solid;
     border-color  : coral;
     width         : 731px !important;
     object-fit    : cover;
  }

}

#cameraModal > div > div > div.modal-footer{
  justify-content: center;
}


.labelicon {
  display: inline-block;
  line-height: 30px;
  padding-left: 30px;
  background: url("icon.png") no-repeat scroll 0 0 transparent;
}

tr.quotepending {
  color: blue;
}

tr.quotedeclined {
  color: red;
}

tr.quoteaccepted {
  color: green
}

.hidden{
  display: none;
}

.autocombo{
  width : 100% !important;
}


.logo_container {
  text-align: center;
}

.logo_image {
  width: 80%;
  border-style: groove;
}

.top caption {
  caption-side: top;
}

.mynav{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.width90max {
  max-width: 90% !important;
}
#page-content-wrapper { min-width: 0; width: 100%; }


.DTED_Lightbox_Content{
   margin: 1.0rem !important;
}


.quotepending {
  color: orange !important;
}

.quoteaccepted {
  color: green !important;
}

.quotecompleted {
  color: blue !important;
}

.quotedeclined {
  color: red !important;
}