BODY {font-family:Arial,Helvetica,sans-serif;font-size: 10pt;color: black}

LABEL {display: inline-block; margin: 8 0 0 0; font-weight: bold; font-style: italic;}
INPUT[type=text], INPUT[type=password], INPUT[list], INPUT[type=file], INPUT[type=time], select, textarea, .inputnoentry { display: inline-block; width: 100%;  padding: 5px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; background-color: lightcyan;}
INPUT[type=file]::file-selector-button {height: 30px; width: 70px; font-size: 10pt; font-weight: bold; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
BUTTON:disabled { text-decoration: line-through;}

.inputnoentry { background-color: lightgrey; font-weight: bold; font-style: italic; }
.button_topmenu { height: 25px; width: 125px; font-size: 10pt; text-align: center; margin: 5px 5px 5px 0; border: none; color: white; background-color: blue; font-weight: bold;}
.button_topmenu:hover { height: 25px; width: 125px; font-size: 10pt; text-align: center; margin: 5px 5px 5px 0; border: 1px solid; color: white; background-color: blue;}
.section_hdr { display: block; background-color: lightgreen; padding: 2px;}

/* two column to one column flex */
.flex2row { width: 100%; display: flex; flex-wrap: wrap; flex-direction: row; gap: 20px; justify-content: center; align-content: center;}
.flex2col { flex: 1; max-width: 350px;} 

/* new radio (pushbutton style) with label */
.radio-button input[type="radio"] {     /* Hide Original */
	display: none;
}
.radio-button input[type="radio"]:checked+label,
.radio-button input[type="radio"]:not(:checked)+label {
	display: inline-block;
	width: 75px;
	height: 25px;
	line-height: 25px;
	border: 1pt solid;
	margin: 0 0 5px 0;
}
.radio-button input[type="radio"]:not(:checked)+label {
}
.radio-button input[type="radio"]:not(:checked)+label:hover {
}
.radio-button input[type="radio"]:checked+label {
  background-color: yellow;
}
.radio-button label {
		text-align: center;
        font-weight: bold;
        font-size: 10pt;
}

/* new checkbox (pushbutton style) with label */
.check-button input[type="checkbox"] {     /* Hide Original */
	display: none;
}
.check-button input[type="checkbox"]:checked+label,
.check-button input[type="checkbox"]:not(:checked)+label {
	display: inline-block;
	width: 90%;
	min-height: 25px;
	max-height: 50px;
	line-height: 25px;
	border: 1pt solid;
	margin: 0 0 5px 0;
}
.check-button input[type="checkbox"]:not(:checked)+label {
}
.check-button input[type="checkbox"]:not(:checked)+label:hover {
}
.check-button input[type="checkbox"]:checked+label {
  background-color: lightgreen;
}
.check-button label {
	text-align: center;
	font-weight: bold;
	font-size: 10pt;
}

/* new select drop down */
.select-dropdown select {
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid;
  border-radius: 5px;
  font-size: 14pt;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;

}

.select-dropdown option {
  font-size: 14pt;
}

/* new select drop down */
datalist {
  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid;
  border-radius: 5px;
  font-size: 14pt;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;

}

datalist option {
  font-size: 14pt;
}


.button_touch { height: 40px; width: 225px; font-size: 14pt; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
.button_touch:disabled { color: grey; font-weight: normal; text-align: center; margin: 5px 0 5px 0;}

.button_touch_small { height: 40px; width: 100px; font-size: 14pt; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
.button_touch_small:disabled { color: grey; font-weight: normal; text-align: center; margin: 5px 0 5px 0;}

.button_touch_small_grn { height: 40px; width: 100px; background-color: lightgreen; font-size: 14pt; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
.button_touch_small_grn:disabled { color: grey; font-weight: normal; text-align: center; margin: 5px 0 5px 0;}

.button_touch_tiny { height: 25px; width: 50px; font-size: 10pt; font-weight: bold; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
.button_touch_tiny:disabled { color: grey; font-weight: normal; text-align: center; margin: 5px 0 5px 0;}
.button_touch_tiny_sel { height: 30px; width: 50px; font-size: 10pt; font-weight: bold; text-align: center; margin: 5px 0 5px 0; border: 2px solid;}

.button_touch_tiny_wide { height: 25px; width: 75px; background-color: white; font-size: 10pt; font-weight: bold; text-align: center; margin: 5px 0 5px 0; border: 1px solid;}
.button_touch_tiny_wide:disabled { color: grey; font-weight: normal; text-align: center; margin: 5px 0 5px 0;}
.button_touch_tiny_wide_sel { height: 25px; width: 75px; background-color: lightgreen; font-size: 10pt; font-weight: bold; text-align: center; margin: 5px 0 5px 0; border: 2px solid;}


.checkbox_button { display: none;}
.checkbox_button + label {
  border: 1px solid grey;
  background: ghoswhite;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: 5px;
  font-weight: bold;
 }
  
.checkbox_button + label:active, .checkbox_button:checked + label {
  box-shadow: 0px 0px 3px inset;
  background: #eee;
}


@media only screen and (max-width: 700px) {
  .flex2row { flex-direction: column; }
}