@charset "UTF-8";
/* QuizHawk – merged reset.css + mainstyle.css (unused sections removed) */
/* ---- Reset ---- */
html, body, div, span, h1, h2, h3, h4, p, a, small, strong, ul, li, fieldset, form, label, legend, table, tbody, thead, tr, th, td {
    margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent;
}
*, *::before, *::after { box-sizing: border-box; }
ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: 0; }
:focus-visible { outline: 2px solid #04488e; outline-offset: 2px; }
[hidden] { display: none !important; }
/* ---- General ---- */
html { font-family: "Montserrat", arial, sans-serif; line-height: 1.5; font-size: 20px; }
body { margin: 0; background-color: #f3f3f3; min-height: 100vh; display: flex; flex-direction: column; }
#container { flex: 1; min-width: 320px; }
h1, h2, h3, h4 { font-weight: bold; color: #04488e; }
p { line-height: 1.5; }
small { font-size: 75%; }
a { color: #04488e; }
img { max-width: 100%; }
hr { border: 0; border-top: 1px solid #d1d4e8; margin: 10px 0; }
.red { color: #ff0000; }
.left { float: left; }
.right { float: right; }
.center { text-align: center; margin: 0 auto; }
.clear { clear: both; height: 0; margin: 0; font-size: 1px; line-height: 0; }
.error { color: #ff0000; }
.success { color: #009900; }
#content { padding: 10px; margin: 0 auto; max-width: 1600px; }
/* ---- Header ---- */
header {
    width: 100%; padding-bottom: 10px; margin-bottom: 20px;
    border-bottom: 1px solid #5f5f5f; box-shadow: 2px 2px 3px -1px #b5b5b5; background-color: #3b3b3b;
}
#header { padding: 10px; overflow: auto; }
#site-branding { float: left; }
#site-branding img { height: 100px; display: block; }
#login_status { margin: -10px 10px 10px; font-size: 12px; overflow: hidden; }
#login_status a img { width: 12px; margin-right: 3px; vertical-align: middle; }
#login_status p { float: right; }
/* ---- Main content ---- */
#main-content { margin: 10px; }
#main-content h2 { font-size: 22px; margin-bottom: 10px; }
#main-content h3 { margin-bottom: 10px; }
#main-content p { margin-bottom: 15px; }
ul.main-menu, #main-content ul { list-style: square; color: #04488e; margin-left: 25px; margin-bottom: 5px; font-size: 18px; }
li { margin-bottom: 5px; }
.message { margin: 10px 20px 20px; text-align: center; }
.message:empty { display: none; }
form .message { text-align: right; }
div#existing {
    width: 90%; margin: 20px auto; padding: 20px;
    background-color: #ffffff; box-shadow: 2px 2px 3px -1px #b5b5b5;
}
/* ---- Tables ---- */
.table-wrapper { overflow-x: auto; }
table { width: 100%; }
table th { font-weight: bold; }
td, th { border: 2px #d1d4e8 dotted; vertical-align: middle; padding: 9px 10px; line-height: 1.75; text-align: left; }
td.center { text-align: center; }
td.actions { white-space: nowrap; }
td.actions form { display: inline; }
/* ---- Forms ---- */
form {
    width: 90%; margin: 0 auto 20px; padding: 10px;
    background-color: #ffffff; box-shadow: 2px 2px 3px -1px #b5b5b5;
}
form.inline, td form { display: inline; width: auto; margin: 0; padding: 0; background: none; box-shadow: none; }
fieldset { border: 2px #d1d4e8 dotted; padding: 10px; min-width: 0; }
fieldset fieldset { margin-bottom: 15px; }
legend { margin-left: 15px; padding: 0 5px; font-weight: bold; font-size: 18px; color: #04488e; }
label { display: inline-block; width: 25%; vertical-align: top; }
p label { width: auto; }
input, select, textarea {
    font-family: inherit; font-size: 18px; line-height: 1.5;
    width: 72%; padding: 3px 7px; border: none; border-radius: 0;
    background-color: #d1d4e8; color: #222;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
select { width: 73%; }
textarea { vertical-align: top; min-height: 3em; resize: vertical; }
input[type='checkbox'] {
    -webkit-appearance: checkbox; -moz-appearance: checkbox; appearance: checkbox;
    width: auto; vertical-align: middle;
}
button, a.button {
    display: inline-block; font-family: inherit; font-size: 18px; font-weight: bold; line-height: 1.5;
    background-color: #04488e; color: #ffffff; border: 1px solid #d1d4e8;
    padding: 5px 10px; margin: 0 auto; cursor: pointer; text-align: center; text-decoration: none;
    -webkit-appearance: none; appearance: none; border-radius: 0;
}
button.delete, a.button.delete { background: #ff0000; margin-left: 10px; }
button.link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: #04488e; text-decoration: underline; }
fieldset fieldset button { font-size: 14px; }
.field { margin-bottom: 20px; }
.field p { margin: 5px 0 0 25%; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 5px 15px; }
.checks label.check { width: auto; font-size: 18px; }
.checks label.check input { margin-right: 5px; }
.forgot_password_form { max-width: 1000px; margin: 0 auto; }
/* ---- Footer ---- */
footer {
    min-height: 35px; width: 100%; min-width: 320px; font-size: 16px;
    background-color: #131313; color: #ffffff; border-top: 1px solid #5f5f5f;
}
footer a:link, footer a:visited { color: #ffffff; }
#footer-inner { padding: 5px 10px; overflow: hidden; }
#copyright { float: left; }
#made-by { float: right; }
/* ---- Responsive ---- */
@media screen and (max-width: 930px) {
    table { font-size: 80%; }
    button, a.button { font-size: 12px !important; }
}
@media screen and (max-width: 800px) {
    /* Pins the first column while the rest scrolls (replaces responsive-tables.js) */
    table.responsive th, table.responsive td { white-space: nowrap; }
    table.responsive th:first-child, table.responsive td:first-child {
        position: sticky; left: 0; z-index: 1; background: #fff;
        max-width: 40vw; overflow: hidden; text-overflow: ellipsis;
        border-right: 1px solid #ccc;
    }
    div#existing, form { width: 100%; }
}
@media screen and (max-width: 745px) {
    label { width: auto; margin-right: 15px; display: block; }
    input, select, textarea { width: 100%; }
    input[type='checkbox'] { width: auto; }
    #login_status label, .checks label { display: inline-block; }
    .field p { margin-left: 0; }
    #site-branding img { height: 70px; }
}
@media screen and (max-width: 460px) {
    html { font-size: 18px; }
    footer { font-size: 12px; }
    #copyright, #made-by { float: none; }
    #login_status p { float: none; margin-top: 5px; }
    div#existing { padding: 10px; }
    form { padding: 5px; }
    fieldset { padding: 5px; }
    legend { margin-left: 5px; }
    td.actions { white-space: normal; }
    td.actions .button, td.actions button { margin: 2px 0; }
}