.form-container {
width: 95%;
margin: 0 auto;
transition: visibility 2s ease-in, opacity 2s, max-height 2s;
}
.levelValCnt {
display: none;
margin: 12px auto;
width: 100%;
}
hr {
width: 25%;
margin-left: 5px;
}
.hiddenEl {
display: none;
} 
form {
padding: 10px;
}
.formItem {
width: 75%;
margin: 0 auto;
}
label {
font-weight: 700;
}
.req {
font-weight: bold;
color: #8b0000;
font-style: normal;
}
select, input[type=number], input[type=datetime-local] {
width: 100%;
margin: 8px 3px;
padding: 2px;
border-radius: 4px;
box-shadow: 1px 1px 2px 1px rgba(33,33,33,.5);
border: 1px solid black;
}
#preSubmitInfoOutput {
margin: 0 auto;
padding: 10px;
background-image: linear-gradient(110deg, rgba(78,100,123,.25), rgba(41,59,70,.75)); 
border-radius: 5px;
box-shadow: 1px 1px 3px 2px rgba(33,33,33,.5);
}
#preSubmitInfoOutput span {
font-weight: 700;
}
input[type=submit], #pgReload {
display: block;
font-weight: 800;
background-color: white;
color: black;
margin: 0 auto;
font-size: 1.2em;
text-transform: uppercase;
border-radius: 7px;
padding: 3px 12px;
}
#pgReload {
background: linear-gradient(45deg, #4d7288, #e1eaf4);
}
#pgReload a {
font-family: 'Montserrat';
font-weight: 700;
color: white;
text-shadow: 1px 1px 5px #333;
}
textarea {
max-width: 95%;
}
.helper {
font-style: italic;
color: grey;
size: 10px;
margin: 6px auto;
}
#loaderBox {
display: none;
width: 100px;
height: 100px;
position: relative;
margin: 0 auto;
}
#loaderBox h5 {
text-transform: uppercase;
position: absolute;
z-index: 9;
text-align: center;
top: 50%;
height: auto;
margin: 0 auto;
transform: translateY(-50%); border-radius: 2px;
}
.loader {
position: absolute;
box-sizing: border-box;
width: 100%;
height: 100%;
border: 5px solid #ffffff;
border-top: 5px solid steelblue;
border-bottom: 5px solid steelblue;
border-radius: 50%;
animation: loaderspin 2s linear infinite;
overflow: hidden;
}
.drop {
display: none;
box-sizing: border-box;
position: absolute;
z-index: 8;
width: 10px;
height: 10px;
margin: 0 auto;
margin-left: 45px;
background-color: steelblue;
opacity: 80%;
border-radius: 100%;
animation: drip 2s linear infinite;
animation-direction: alternate;
}
#submit {
animation: pulse 1s linear infinite;
animation-direction: alternate;
}
@keyframes loaderspin {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
@keyframes fading {
0% { opacity: 0;}
100% {opacity: 1;}
}
@keyframes drip {
0% {transform: translateY(5px); }
100%{transform: translateY(85px);}
}
@keyframes pulse {
from {
background-color: white;
border: 3px solid black;}
to {
background-color: #81b1b5a6;
border: 3px solid white;}
} #resultsTable {
overflow-x: scroll;
}
#resultsTable table {
margin: 0 auto;
border-collapse: separate;
border-spacing: 0px;
}
#resultsTable thead {
top: 0px;
background-color: rgb(43,62,73);
z-index: 9999;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
color: white;
}
#resultsTable th, #resultsTable td {
padding: 4px 9px;
text-align: center;
vertical-align: middle;
}
#resultsTable tbody td { border-bottom: 1px solid #9e9e9e;
}
#resultsTable table, .tableData, #resultsTable thead>tr {
border: 2px solid black;
}
.tableData>tr:nth-child(2n) {
background-image: linear-gradient(5deg, rgba(77, 98, 121, .5), transparent);
}
.riverName {
font-weight: 600;
}
.gaugeName {
font-size: .75em;
line-height: 1.5em;
}
#result {
padding: 5px;
margin: 10px auto;
width: 75%; }
.sbmInfLbl {
font-size: 1em;
text-transform: capitalize;
margin-bottom: 5px;
margin-top: 10px;
}
#gaugeOutputContainer {
display: flex;
justify-content: space-evenly;
align-items: top;
}
.gaugeItem {
flex-basis: 45%;
}