.horizflex-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
}

.vertflex-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    /*width: 100%;*/
    width: 550px;
}

.centertext {
    text-align:center;
}

.gradingbox {
    text-align:center;
    margin: 30px;
}

#menudiv {
    width: 100%;
    text-align: right;
}

.loader {
    margin-left: 45%;
    margin-right: 55%;
    border: 16px solid #f3f3f3; /* Light grey #f3f3f3 */
    border-top: 16px solid black; /* Blue #3498db */
    border-bottom: 16px solid black; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

.ifr {  /* input float right */
    width: 200px;
    /*text-align: right;*/
    float: right;
}

.input1 {
    width: 350px;
    text-align: left;
}

.smallbutton {
    width: 100px;
    font-weight: bold;
}

table {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

tr:hover {
    background-color: lightgrey;
}

.onpaymentsite {
    max-width: 550px;
    min-width: 300px;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    /*margin: 150px auto;*/
}

.redcolour {
    color: red;
}

.greencolour {
    color: green;
}

.inputbox {
    width: 50%;
    max-width: 350px;
}

.logininput {
    font-size: large;
}

.button {
    font-weight: bold;
}

tr.tableformat:nth-child(even) {
    background-color: #D6EEEE;
}