body {
    font-family: sans-serif;
}

.thick-hr {
    border: 2px solid black;
}

.person {
    margin: auto;
    width: 25%;
    padding-bottom: 20px;
}

/* Used fields that mustn't be wrapped */
.nowrap {
    white-space: nowrap;
}

.username,.pinumber {
    font-family: 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.mugshotphoto {
    width: 200px;
}

.dotted-underline {
    text-decoration-line: underline;
    text-decoration-style: dotted;
}

input[type="checkbox"].attendance {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-content: center;
    justify-content: center;
    padding: 0.1rem;
    margin-right: 0.1rem;
    border: 0.2rem solid lightslategrey;
    border-radius: 0.2rem;
    opacity: 0.5;
}

/* input[type="checkbox"].attendance_no {
    margin-right: 2px;
}

input[type="checkbox"].attendance_yes {
    margin-right: 3px;
} */

input[type="checkbox"].attendance:checked {
    opacity: 1.0;
}

input[type="checkbox"].attendance::before {
    content: "";
    width: 0.7em;
    height: 0.7em;
    background-color: lightslategrey;
    /* border: 0.25rem solid lightslategrey; */
}

/* No gets a cross */
input[type="checkbox"].attendance_no::before {
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

/* Yes gets a tick */
input[type="checkbox"].attendance_yes::before {
    clip-path: polygon(20% 40%, 0 60%, 40% 100%, 100% 30%, 80% 10%, 40% 60%);
}

input[type="checkbox"].attendance_no:checked::before {
    background-color: red;
}
input[type="checkbox"].attendance_no:checked {
    border: 0.2rem solid red;
}
input[type="checkbox"].attendance_yes:checked::before {
    background-color: green;
}
input[type="checkbox"].attendance_yes:checked {
    border: 0.2rem solid green;
}

/* Put them in a 1x1 grid, but all in the same cell */
.in-same-place {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: start;
    padding: 0;
}
.in-same-place > * {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}

@media print {
    .no-page-break {
        /* break-inside: avoid; */
        display: inline-block;
        vertical-align: top;
        width: 100%;
    }
    /* For printing an HR as a page-break */
    .print-page-break {
        page-break-before: always;
        border: 0px;
    }

    .no-print {
        display: none;
    }
}