/* CSS der Einstellungs-Sektion */


/* ========== Buttons ========== */
.w3-button {
  padding: 0.25rem 1rem;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-size: 1.0rem;
  font-weight: 700;
}
/* ============================= */

/* ========== Input + Dropdown ========== */
input {
  text-align: center;
  margin: 2px 0 2px 0;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-weight: 700;
}

select {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-weight: 700;
  text-align: center;
  height: 32px;
  background-color: rgba(255, 204, 0, 1);
}

option {
  height: 2rem !important;
  padding: 10px;
}

/* Chrome numeric stepper arrows visible */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

/* ====================================== */

/* ========== Range Slider (Länge/Breite) ========== */
.slidecontainer {
  width: 100%;
}
.sliderlabel {
  text-align: center;
  width: 60px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  font-weight: 700;
}
.slider {
  width: 100%;
  height: 22px !important;
  border: 1px solid #000;
  background: rgb(153, 153, 255, 0.3);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 15px; 
  height: 15px; 
  background: #0075FF;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  width: 15px; 
  height: 15px; 
  background: #0075FF;
  cursor: pointer;
}

/* ================================== */


/* ========== Individuelle Styles ========== */
#stickysetters {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #c0f1c2;
  border-bottom: 1px solid cadetblue;
}

.lonlat {
  text-align: center;
  width: 80px;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-weight: 700;
  margin-right: 1rem;
}

#lonval, #latval {
  text-align: center;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace !important;
  font-weight: 700;
  margin-right: 1rem;
}

#yrs, #mth, #dys, #hrs, #mins, #secs, #quickhrs, #tz {
  text-align: center;
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-weight: 700;
  height: 32px;
  border: 1px solid #999;
  padding-top: 2px;
}

#yrs {
  width: 100px;
}
#mth, #dys, #hrs, #mins, #secs {
  width: 60px;
}

#yrs, #mth, #dys {
  background-color: rgba(255, 255, 0, 0.5);
}

#hrs, #mins, #secs {
  background-color: rgba(0, 89, 255, 0.2);
}

#quickhrs {
  background-color: rgba(0, 89, 255, 0.2);
}

#inputDisplay {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 1.2rem;
  border: 1px solid #999;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 5px 12px;
  text-align: center;
}

.setterLabel {
  font-family: 'Courier Prime', 'Courier New', Courier, monospace;
  font-weight: 700;
  font-size: 1rem;
}

#calcBtn,
#nowBtn,
#todayBtn,
#noonBtn,
#zeroBtn,
#resetBtn {
  border: 1px solid #999;
  padding-top: 4px;
} 

#calcBtn {
  width: 200px;
}