:root {
    --form-lable-color: #154570;
}
input {
    border-radius: 4px;
    border-left: 1px solid #b5c2b8;
    border-bottom: 1px solid #b5c2b8;
    border-top: 1px solid antiquewhite;
    border-right: 1px solid antiquewhite;
    height: 2.8em;
    width: 100%;
    padding-left: 10px;
}
input.input-search {
    border-radius: 30px !important;
}
input:focus {
    outline: none;
}
input.treat-as-display {
    border-top: 0;
    border-right: 0;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
select {
    border-radius: 4px;
    border-left: 1px solid #b5c2b8;
    border-bottom: 1px solid #b5c2b8;
    border-top: 1px solid antiquewhite;
    border-right: 1px solid antiquewhite;
    height: 2.8em;
    width: 100%;
}
textarea {
    border-radius: 4px;
    border-left: 1px solid #b5c2b8;
    border-bottom: 1px solid #b5c2b8;
    border-top: 1px solid antiquewhite;
    border-right: 1px solid antiquewhite;
    height: 3em;
    width: 100%;
}
.button {
    height: 60px; /* same as button-text below for vertical centering */
    border-radius: 5px;
    border: 5px solid;
    font-size: 1.1em;
    text-align: center;
    font-weight: 900;
}
.button-text {
    margin: auto;
    padding-top: 12px;
    vertical-align: middle;
    font-size: inherit;
    height: 60px;
    text-transform: uppercase;
}
.button-noborder {
    background: black;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    font-size: 1.6em;
    width: 100%;
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    border: 0;
    text-align: center;
}
.button-reverse {
    background: #006ca8;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 1.6em;
    width: 100%;
    box-sizing: border-box; /* Opera/IE 8+ */
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    text-align: center;
    border-radius: 4px;

    border: 1px solid #aaa;
    text-shadow: 0px -1px 1px #069;
    border-color: #037bb7 #037cb8 #027bb8 #017bb7;
    color: #ffffff !important;
    border-top-color: #1992da;
    border-left-color: #0c75bb;
    border-right-color: #0c75bb;
    border-bottom-color: #00589c;

    box-shadow: inset 0 1px 1px 0 #6fc5f5;
    -webkit-box-shadow: inset 0 1px 1px 0 #6fc5f5;
    background: #117ed2;
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        from(#37aaea),
        to(#117ed2)
    );
    background: -moz-linear-gradient(top, #37aaea, #117ed2);
    background-image: -o-linear-gradient(top, #37aaea 0, #117ed2 100%);
    background-image: linear-gradient(to bottom, #37aaea 0, #117ed2 100%);
}
.submit-button {
    background: #1f8659;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
    font-size: 28px;
    width: 100%;
    border: 0;
}
.button:hover {
    background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0.05, #dfdfdf),
        color-stop(1, #ededed)
    );
    background: -moz-linear-gradient(center top, #dfdfdf 5%, #ededed 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color: #dfdfdf;
}
.form-inner-field-icon {
    width: 5vw;
    height: 4vh; /* dont use vw as then for wider browser screens it blows the container */
}
.form-value-displayonly {
    height: 2.8em;
    width: 100%;
    /* box-shadow: 0px 3px 2px rgb(0 0 0 / 15%), 2px 1px 3px rgb(0 0 0 / 30%); */
    font-size: 1em;
    border-radius: 5px;
    white-space: nowrap;
    padding: 0.5em;
}
.placeholder {
    color: var(--background-text-color);
}
.form-label {
    padding-top: 1.8em;
    font-size: 0.8em;
    color: var(--form-lable-color);
    text-transform: uppercase;
}