div.main {
    background-color: white;
    padding: 10px;
}

form.updateStatus {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: auto auto 10px;
}

.updateStatus p {
    padding: 10px;
    margin: 0;
    border: 1px solid black;
    background-color: #707B7C;
    color: white;
    width: 25%;
    text-align: center;
    font: normal normal 110% "Calibri Light", sans-serif;
    border-right-style: none;
}

.updateStatus select {
    padding: 10px;
    margin: 0;
    border: 1px solid black;
    width: 50%;
    background: white;
    font: normal normal 110% "Calibri Light", sans-serif;
}

.updateStatus option {
    padding: 10px;
}

input[type=submit].updateStatus {
    vertical-align: middle;
    background-color: dodgerblue;
    color: black;
    border: 1px solid black;
    border-left-style: none;
    padding: 10px 20px;
    width: 25%;
    font: normal normal 110% "Calibri Light", sans-serif;
}

form.load_form {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    margin: auto auto 10px;
}

.load_form label {
    padding: 9px;
    margin: 0;
    border: 1px solid black;
    background-color: #707B7C;
    color: white;
    width: 6%;
    text-align: center;
}

input[type=number].load_form {
    vertical-align: middle;
    margin: 0;
    padding: 10px;
    border: 1px solid black;
    width: 69%;
    background-color: lightgrey;
    border-right-style: none;
    border-left-style: none;
}

input[type=submit].load_form {
    vertical-align: middle;
    background-color: dodgerblue;
    color: black;
    border: 1px solid black;
    padding: 10px 20px;
    width: 25%;
}

input[type=submit].load_form:hover {
    background-color: royalblue;
    color: white;
}

p.formResponse, p.updateformResponse {
    margin: 20px 0;
    font-size: 150%;
    color: white;
    background-color: #E74C3C;
    padding: 10px;
    text-align: center;
    display: none;
}

table.load_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 10px;
    table-layout: fixed;
    background-color: #E5E7E9;
    border: 1px solid black;
}

th.h1, th.h2 {
    height: 80px;
    padding: 16px;
    background-color: #707B7C;
    color: white;
    font-size: 200%;
    font-weight: normal;
    font-family: "Calibri light", sans-serif;
    border: 1px solid black;
}

th.h1 {
    width: 15%;
}

th.h2 {
    width: 95%;
}

td.dynamicText, td.staticText {
    padding: 8px;
    border: 1px solid black;
    font-size: 120%;
}

tr.dynamicRow:nth-child(even) {
    background-color: #CCD1D1;
}

tr.dynamicRow:hover {
    background-color: white;
}

div.dynamicLoad {
    overflow-x: scroll;
}

table.all_users_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 10px;
    table-layout: auto;
    border: 1px solid black;
}

.all_users_table th {
    height: 35px;
    padding: 16px;
    font-size: 120%;
    font-weight: normal;
    font-family: "Calibri light", sans-serif;
    text-align: left;
    border: 1px solid black;
    border-top-style: none;
}

.all_users_table td {
    padding: 8px;
    border: 1px solid black;
    border-top-style: none;
    border-bottom-style: none;
    font-size: 100%;
}

@media (max-width: 800px) {
    .load_form input {
        margin: 10px 0;
    }

    .load_form {
        flex-direction: column;
        align-items: stretch;
    }
}