* {
    box-sizing: border-box;
}


body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    color: #222222;
}


/*
 * ==========================================================
 * Bovenbalk
 * ==========================================================
 */

.topbar {
    height: 50px;

    background-color: #003478;

    display: flex;

    align-items: center;

    justify-content: center;
}


.topbar select {
    padding: 7px 14px;

    border: none;

    border-radius: 8px;

    font-size: 14px;

    outline: none;
}


.topbar-title {
    color: white;

    font-size: 15px;

    font-weight: bold;
}


/*
 * ==========================================================
 * Index.php
 * ==========================================================
 */

.oefeningen {
    width: 90%;

    max-width: 1000px;

    margin: 30px auto;
}


.oefening {
    background-color: white;

    margin-bottom: 15px;

    padding: 20px;

    border-radius: 8px;
}


.oefening-bovenkant {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 30px;
}


.oefening-info {
    flex: 1;

    min-width: 0;
}


.oefening h2 {
    margin: 0 0 10px 0;

    font-size: 20px;
}


.oefening-info p {
    margin: 0;

    line-height: 1.5;
}


.oefening-bediening {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

    flex-shrink: 0;
}


.aantal-instelling {
    display: flex;

    align-items: center;

    gap: 8px;
}


.aantal-instelling label {
    font-size: 14px;

    white-space: nowrap;
}


.aantal-instelling input[type="number"] {
    width: 70px;

    padding: 8px;

    border: 1px solid #cccccc;

    border-radius: 6px;

    font-size: 14px;
}


/*
 * Startknop index
 */

.oefening-start button {
    padding: 9px 16px;

    border: none;

    border-radius: 6px;

    background-color: #003478;

    color: white;

    font-size: 14px;

    cursor: pointer;

    white-space: nowrap;
}


.oefening-start button:hover {
    background-color: #00275a;
}


/*
 * Wetboeken index
 */

.wetboeken {
    margin-top: 20px;
}


.wetboeken-titel {
    margin-bottom: 10px;

    font-size: 14px;

    font-weight: bold;
}


.wetboeken-lijst {
    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}


.wetboek-optie {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    min-height: 34px;

    padding: 7px 10px;

    border: 1px solid #d4d4d4;

    border-radius: 6px;

    background-color: #f8f8f8;

    cursor: pointer;

    white-space: nowrap;
}


.wetboek-optie:hover {
    background-color: #eeeeee;
}


.wetboek-optie input {
    margin: 0;
}


.wetboek-optie span {
    font-size: 14px;
}


.niet-beschikbaar {
    margin-top: 20px;

    color: #777777;

    font-size: 14px;
}


.wetboek-fout {
    display: none;

    margin-top: 10px;

    color: #b00020;

    font-size: 13px;
}


/*
 * ==========================================================
 * Oefening.php
 * ==========================================================
 */

.oefening-pagina {
    width: 90%;

    max-width: 1000px;

    margin: 30px auto;
}


.oefening-paneel {
    padding: 25px;

    border-radius: 8px;

    background-color: white;
}


/*
 * Header
 */

.oefening-header h1 {
    margin: 0 0 10px 0;

    font-size: 24px;
}


.oefening-instructie {
    margin: 0;

    line-height: 1.5;

    color: #555555;
}


/*
 * Meta-informatie
 */

.oefening-meta {
    display: flex;

    align-items: flex-start;

    gap: 30px;

    margin-top: 25px;

    padding: 15px;

    border-radius: 6px;

    background-color: #f7f7f7;
}


.meta-item {
    display: flex;

    flex-direction: column;

    gap: 7px;
}


.meta-label {
    font-size: 12px;

    font-weight: bold;

    text-transform: uppercase;

    color: #777777;
}


.meta-waarde {
    font-size: 15px;

    font-weight: bold;
}


.geselecteerde-wetboeken {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 7px;
}


.wetboek-label {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding: 5px 9px;

    border: 1px solid #d4d4d4;

    border-radius: 6px;

    background-color: white;

    font-size: 13px;
}


/*
 * ==========================================================
 * Werkruimte en vragen
 * ==========================================================
 */

.oefening-werkruimte {
    margin-top: 30px;
}


.vragenlijst {
    display: flex;

    flex-direction: column;

    gap: 12px;
}


.vraag {
    display: flex;

    align-items: center;

    gap: 15px;

    padding: 16px;

    border: 1px solid #e2e2e2;

    border-radius: 8px;

    background-color: #ffffff;
}


.vraag-goed {
    border-color: #58a66a;

    background-color: #f5fbf6;
}


.vraag-fout {
    border-color: #c86a6a;

    background-color: #fff7f7;
}


.vraag-nummer {
    width: 34px;

    height: 34px;

    flex: 0 0 34px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background-color: #003478;

    color: white;

    font-size: 13px;

    font-weight: bold;
}


.vraag-inhoud {
    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 25px;
}


.vraag-kop {
    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 10px;
}


.vraag-wetboek {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    padding: 5px 8px;

    border-radius: 5px;

    background-color: #f0f0f0;

    font-size: 12px;

    font-weight: bold;
}


.vraag-titel {
    line-height: 1.4;

    font-size: 15px;
}


.vraag-rechts {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 7px;

    flex-shrink: 0;
}


.vraag-antwoord {
    display: flex;

    align-items: center;

    gap: 8px;
}


.vraag-antwoord label {
    font-size: 13px;

    white-space: nowrap;

    color: #555555;
}


.vraag-antwoord input {
    width: 115px;

    padding: 8px 10px;

    border: 1px solid #cccccc;

    border-radius: 6px;

    font-size: 14px;

    outline: none;
}


.vraag-antwoord input:focus {
    border-color: #003478;
}


/*
 * Feedback
 */

.vraag-feedback {
    font-size: 12px;

    font-weight: bold;
}


.feedback-goed {
    color: #2f7d3d;
}


.feedback-fout {
    color: #a52e2e;
}


/*
 * ==========================================================
 * Resultaat
 * ==========================================================
 */

.oefening-resultaat {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 20px;

    padding: 15px;

    border-radius: 8px;

    background-color: #f2f6fb;
}


.resultaat-score {
    display: flex;

    align-items: center;

    justify-content: center;

    min-width: 65px;

    min-height: 45px;

    padding: 8px 12px;

    border-radius: 6px;

    background-color: #003478;

    color: white;

    font-size: 18px;

    font-weight: bold;
}


.resultaat-tekst {
    font-size: 14px;
}


/*
 * ==========================================================
 * Actiebalk
 * ==========================================================
 */

.oefening-acties {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;
}


/*
 * Checkbox linksonder
 */

.antwoord-weergave {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 13px;

    color: #555555;

    cursor: pointer;
}


.antwoord-weergave input {
    margin: 0;

    cursor: pointer;
}


/*
 * Knoppen rechts
 */

.oefening-actieknoppen {
    display: flex;

    align-items: center;

    gap: 10px;
}


.nieuwe-set-knop {
    padding: 10px 18px;

    border: 1px solid #003478;

    border-radius: 6px;

    background-color: white;

    color: #003478;

    font-size: 14px;

    cursor: pointer;
}


.nieuwe-set-knop:hover {
    background-color: #eef3f9;
}


.controleer-knop {
    padding: 10px 18px;

    border: 1px solid #003478;

    border-radius: 6px;

    background-color: #003478;

    color: white;

    font-size: 14px;

    cursor: pointer;
}


.controleer-knop:hover {
    background-color: #00275a;

    border-color: #00275a;
}


/*
 * ==========================================================
 * Navigatie en fouten
 * ==========================================================
 */

.oefening-navigatie {
    margin-top: 15px;
}


.terug-link {
    display: inline-block;

    padding: 9px 14px;

    border-radius: 6px;

    background-color: #003478;

    color: white;

    font-size: 14px;

    text-decoration: none;
}


.terug-link:hover {
    background-color: #00275a;
}


.foutmelding {
    margin: 15px 0 20px 0;

    color: #b00020;

    line-height: 1.5;
}


/*
 * ==========================================================
 * Responsive
 * ==========================================================
 */

@media (max-width: 700px) {

    .oefening-bovenkant {
        flex-direction: column;

        align-items: flex-start;

        gap: 20px;
    }


    .oefening-bediening {
        width: 100%;

        align-items: flex-start;
    }


    .oefening-meta {
        flex-direction: column;

        gap: 15px;
    }


    .oefening-paneel {
        padding: 20px;
    }


    .vraag {
        align-items: flex-start;
    }


    .vraag-inhoud {
        flex-direction: column;

        align-items: flex-start;

        gap: 15px;
    }


    .vraag-kop {
        align-items: flex-start;
    }


    .vraag-rechts {
        width: 100%;

        align-items: flex-start;
    }


    .vraag-antwoord {
        width: 100%;
    }


    .vraag-antwoord input {
        flex: 1;

        width: auto;
    }


    .oefening-resultaat {
        align-items: flex-start;
    }


    .oefening-acties {
        flex-direction: column;

        align-items: stretch;
    }


    .antwoord-weergave {
        align-self: flex-start;
    }


    .oefening-actieknoppen {
        width: 100%;

        flex-direction: column;
    }


    .nieuwe-set-knop,
    .controleer-knop {
        width: 100%;
    }

}