body {
  margin: 0;
  background-color: #FAFAD2;  /* lightgoldenrodyellow */
  color: black;
  position: relative;
} 

div.txt {
  line-height: 1.6; 
  margin: 5px;
}

.form-control, .form-control:hover {
  background-color: lightgray;
  border: 1px solid black;
  color: black;
}

.btn, .btn:hover {
  border: 1px solid black;
  background-color: khaki;
}

.labelfont {
  font-size: 120%;
}

.inputcolor, .inputcolor:hover {
  background-color: #FFE4B5;   /* moccasin */ 
}

table {
  border-collapse: collapse;
  border: 1px solid black;
  background-color: mistyrose;
  font-size: 120%;
}

table td, table th {
  border: 1px solid black;
  max-width: 100%;
}

.img {   
  max-width: 100%;
  height: auto;
  position: absolute;
}

.img-chart {   
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
}

#product-title {
  font-size: 150%; 
}

#CloseX {
  position: absolute;
  right: 15px;
  top: 15px;
  display: none;
  pointer-events: none;   /* Don't collect any clicks with X because elements need them. */
}

#Production, #History, #Home-Storage-Centers, #Durum-Wheat, 
  #Product-Code, #Orientation, #About, #Details {
  display: none;
}

.two-col {        
  column-count: 2;
  column-gap: 1px; 
}

.dropdown-item {
  background-color: #FFE4B5;   /* moccasin */ 
  color: black;
  font-size: 130%;
  padding: 1px; 
} 

.dropdown-menu {  /* overload bootstrap white top & bottom bars. */
  padding: 1px;
  background-color: black;
}

#doy {
  color: black;
  background-color: #FAFAD2;
}

/* No number spin wheels on inputs in Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* No number spin wheels on inputs in Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.myclass .ZebraDialog_Title {  /* Background of title bar is blue. */
  background: #3575EA;
  font-size: 25px;
}

.myclass .ZebraDialog_Body {   /* Message is this font size. */
  font-size: 25px;
}