/* CSS file for the Javascript Quiz App 2022 version login page */
body {
    font-family: 'Helvetica', 'Arial', 'sans-serif';
    cursor: default;
    box-sizing: border-box;
}

/* The login buttons to go to the modules: */
.cButtonLogin {
    border: 2px solid #606060;
    font-size: 32px;
    width: 30%;
    margin: 4% 4% 4% 4%;
    padding: 1%;
    background-image: linear-gradient(to bottom, #c0c0c0, #e0e0e0);
}

    .cButtonLogin:hover {
        background-image: linear-gradient(to bottom, #c0c0c0, #a0a0a0);
    }

    .cButtonLogin:active {
        background-image: linear-gradient(to bottom, #c0c0c0, #404040);
        color: #ffffff;
    }

/* Used for divs in which contents are centred: */
.cCentreContents {
    text-align: center;
}
.cCentreLoginTitle {
    text-align: center;
    text-decoration: none;
    font-size: 42px;
    color: green;
    margin: 40px auto 10px auto;
}

/* Used to prevent underlines on links: */
.cNoUnderline {
    text-decoration: none;
}

/* The input boxes for username and password: */
.cLoginInput {
    font-size: 32px;
}
.cLoginWarning {
    font-size: 28px;
    font-style: italic;
    color: red;
}

/* The table for spacing the items on the login page: */
.cLoginTable {
    text-align: center;
    font-size: xx-large;
    margin: 5% auto 0 auto;
}

.tableRowThing {
    text-align: right;
    padding: 10px;
}

/* Checkboxes: make them larger and rounded */
input[type='checkbox'] {
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    background: white;
    border-radius: 5px;
    border: 2px solid #555;
}
    input[type='checkbox']:checked {
        background: #cdf;
    }
        input[type='checkbox']:checked:after {
            content: "✔";
            position: relative;
            font-size: 28px;
            left: 0.0625em;
            top: -0.25em;
        }

/* Paragraphs (used for the cookie notice): */
#pCookies {
    width: 90%;
    float: left;
    text-align: left;
    color: darkblue;
    font-size: 24px;
    margin: 2%;
    position: absolute;
    bottom: 30px;
}
#pStatus {
    width: 90%;
    text-align: center;
    color: darkred;
    font-size: 32px;
    margin: 2px;
}