/* *** INPUTS AND INPUT RELATED ELEMENTS *** */
input, textarea, select, div.checkbox {
 border: 1px solid gray;
 font-family: arial;
 font-size: 14px;
 color: black;
 background: white;
 margin: 1px 2px 1px 2px;
 vertical-align: middle;
 text-decoration: none;
}
input, textarea, div.checkbox {
 padding: 5px 5px 5px 5px;
}
select {
 padding: 4px 0px 4px 0px;
}
select:invalid {
 background: pink;
 color: #666;
}
input:disabled, textarea:disabled, select:disabled, input[readonly] {
 background-color: ButtonFace;
}
input.stale, select.stale {
 background-color: ButtonFace;
}

option[value=""][disabled] {
 display: none;
}
option {
 color: black;
}
option {
 padding-left: 1px;
 padding-right: 7px;
}
div.full, input.full, select.full, textarea.full {
 width: 100%;
}
div.half {
 width: 50%;
 float: left;
}
input.half, select.half {
 width: 90%;
}
span.multi {
 margin-right: 25px;
}
input.multi {
 margin-top: 5px;
 margin-bottom: 5px;
}
input:required, textarea:required, select:required {
 border: 1px solid red;
}

/* Replacement for standard checkbox */
span.check input[type="checkbox"],
span.check input[type="radio"] {
 opacity: 0;
}
span.check label::before {
 content: "";
 display: inline-block;
 height: 14px;
 width: 14px;
 border: 1px solid;
}
span.check input[type="radio"] + label::before {
 border-radius: 50%;
}
span.check label::after {
 content: "";
 display: inline-block;
 height: 4px;
 width: 9px;
 border-left: 2px solid #F40000;
 border-bottom: 2px solid #F40000;
 transform: rotate(-45deg);
}
span.check label {
 position: relative;
 padding-left: 20px;
}
span.check label::before,
span.check label::after {
 position: absolute;
}
span.check label::before {
 top: 1px;
 left: -10px;
}
span.check label::after {
 top: 5px;
 left: -7px;
}
/* This hides the checkmark by default. */
span.check input[type="checkbox"] + label::after,
span.check input[type="radio"] + label::after {
 content: none;
}
/* This unhides the checkmark when the input is checked. */
span.check input[type="checkbox"]:checked + label::after,
span.check input[type="radio"]:checked + label::after {
 content: "";
}
span.check input[type="checkbox"]:focus + label::before,
span.check input[type="radio"]:focus + label::before {
 background-color: #FFFFB0;
}
input[type="checkbox"].solo:focus {
    outline: 3px solid #FFFFB0;
}
span.check input[type="checkbox"]:required + label::before,
span.check input[type="radio"]:required + label::before {
 outline: rgb(244, 0, 0) auto 5px;
}
span.check input[type="checkbox"]:disabled + label::before,
span.check input[type="radio"]:disabled + label::before {
 background-color: ButtonFace;
}
input[type="checkbox"]:disabled + label,
input[type="radio"]:disabled + label {
 color: #8F8F8F;
}

input.val:valid:not(:placeholder-shown), textarea.val:valid:not(:placeholder-shown) {
  background: url(https://www.lonestarlending.com/images/Icons/icon_check.png);
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: 1px;
}
input:invalid:not(:focus):not(:placeholder-shown) {
 background: pink;
}
input:invalid:focus:not(:placeholder-shown) ~ div.val_error {
 max-height: 200px;
 padding: 2px 5px 10px 18px;
}

select.val {
 padding: 10px 5px 4px 13px;
}
input.val, textarea.val,
input.val_nocheck, textarea.val_nocheck {
 padding: 10px 5px 4px 18px;
}