/* =========================================================================
   Faqturo Klantenpaneel
   =========================================================================
   Deze stylesheet is opnieuw opgebouwd om het paneel een moderner uiterlijk te
   geven. Alle bestaande classnamen zijn bewust ongewijzigd gebleven, zodat er
   geen enkele regel PHP aangepast hoefde te worden.

   De belangrijkste wijzigingen:

   1. Kleuren staan nu als variabelen bij elkaar (zie :root hieronder). Wil je
      het paneel een andere tint geven, dan hoef je alleen daar iets te wijzigen.
   2. De rijen werkten met float. Dat is de reden dat alles zo blokkerig oogde en
      dat een rij op een smal scherm door elkaar liep: zwevende elementen kunnen
      niet netjes afbreken. Ze gebruiken nu flexbox, waardoor een rij op de
      telefoon vanzelf op twee regels valt met het bedrag netjes rechts.
   3. Het paneel zat in een vaste laag (position: fixed) met een eigen schuifbalk.
      Op mobiel geeft dat gedoe met de adresbalk van de browser. De pagina schuift
      nu gewoon zoals een normale pagina, en de mobiele kop blijft bovenin staan.
   4. Zachte schaduwen en rondere hoeken in plaats van harde grijze randen.

   Dit bestand wordt ook gebruikt door de betaalpagina (betalen/) en de
   inlogpagina van het klantenpaneel; die onderdelen staan onderaan.
   ========================================================================= */

:root {
    /* Basispalet - deze vier bestonden al en worden elders nog gebruikt. */
    --kleur-1: #F9F7F7;
    --kleur-2: #e5eaf3;
    --kleur-3: #6e88a8;
    --kleur-4: #2c3744;

    /* Accentkleur van het paneel. Afgestemd op het Faqturo-logo. */
    --cp-accent: #17656e;
    --cp-accent-dark: #0f4a51;
    --cp-accent-zacht: #e7f1f2;

    /* Vlakken en tekst */
    --cp-bg: #eceff3;
    --cp-vlak: #ffffff;
    --cp-vlak-zacht: #f6f8fa;
    --cp-rand: #e3e8ee;
    --cp-tekst: #1f2933;
    --cp-tekst-zacht: #66727f;

    /* Vorm */
    --cp-rond: 14px;
    --cp-rond-klein: 10px;
    --cp-schaduw: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .07);
    --cp-schaduw-hoog: 0 2px 4px rgba(16, 24, 40, .06), 0 10px 24px rgba(16, 24, 40, .10);
}

/* Font Laden */
@font-face {
    font-family: 'ubunturegular';
    src: url('../fonts/font-webfont.woff2') format('woff2'),
        url('../fonts/font-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    -webkit-tap-highlight-color: rgba(23, 101, 110, .12);
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: var(--cp-bg);
    text-align: left;
    font-family: 'ubunturegular';
    font-size: 14px;
    line-height: 1.55;
    color: var(--cp-tekst);
    -webkit-font-smoothing: antialiased;
    /* Voorkomt dat een brede tabel of een lange bestandsnaam de hele pagina
       horizontaal laat schuiven op een telefoon. */
    overflow-x: hidden;
}

/* Preloader */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--cp-bg);
    z-index: 9999;
}
#faqturof {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
}
.spinner {
    border: 6px solid var(--cp-rand);
    border-top: 6px solid var(--cp-accent);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Koppen */
h2 {
    display: block;
    box-sizing: border-box;
    font-size: 18px;
    font-family: 'ubunturegular';
    color: var(--cp-tekst);
    margin: 0 0 14px 0;
    padding: 0;
}
h3 {
    /* De paginatitel ("Uw Facturen"). Was een grijze streep over de volle
       tekstbreedte; nu een kort accentstreepje eronder. */
    display: block;
    position: relative;
    box-sizing: border-box;
    font-size: 22px;
    font-family: 'ubunturegular';
    color: var(--cp-tekst);
    margin: 0 0 22px 0;
    padding: 0 0 12px 0;
    letter-spacing: -0.01em;
}
h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--cp-accent);
}
/* Op de inlogpagina staat alles gecentreerd; daar hoort het streepje dus ook
   onder het midden van de kop en niet links uitgelijnd. */
.loginbox h3 {
    text-align: center;
    padding-bottom: 10px;
}
.loginbox h3::after {
    left: 50%;
    transform: translateX(-50%);
}
/* De tussenkop in het inlogvak stond ruim van het invoerveld af doordat er twee
   regeleindes achter stonden. Die zijn uit inloggen.php gehaald; deze marge
   houdt de resterende afstand rustig. */
.loginbox h2 {
    text-align: center;
    margin-bottom: 18px;
}
h4 {
    display: block;
    box-sizing: border-box;
    font-size: 16px;
    font-family: 'ubunturegular';
    color: var(--cp-tekst);
    margin: 0 0 14px 0;
    padding: 0 0 10px 0;
    border-bottom: 1px solid var(--cp-rand);
}

/* Hyperlinks */
a:link,
a:visited,
a:active {
    color: var(--cp-tekst);
    text-decoration: none;
}
a:hover {
    color: var(--cp-accent);
    text-decoration: none;
}

form {
    padding: 0px;
    margin: 0px;
}
input:focus, textarea:focus, select:focus {
    outline: 1px solid transparent;
}

/* =========================================================================
   Opbouw van het paneel
   ========================================================================= */

.main {
    display: block;
    width: 100%;
    min-height: 100vh;
    padding: 28px 24px 60px 24px;
    margin: 0px;
    box-sizing: border-box;
    text-align: center;
}

.headerbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 20px auto;
    box-sizing: border-box;
    text-align: left;
}
.headerbar p {
    margin: 0;
    /* De float in de PHP is met flexbox niet meer nodig, maar hij mag blijven
       staan - op een flex-item heeft float geen effect. */
    float: none !important;
}
.headerbar a {
    color: var(--cp-tekst-zacht);
    transition: color .2s ease;
}
.headerbar a:hover {
    color: var(--cp-accent);
}
.headerimage {
    width: auto;
    max-width: 200px;
    height: auto;
    max-height: 52px;
    display: block;
}

/* Tabbladen */
.topbar {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto 24px auto;
    padding: 6px;
    box-sizing: border-box;
    background-color: var(--cp-vlak);
    border: 1px solid var(--cp-rand);
    border-radius: var(--cp-rond);
    box-shadow: var(--cp-schaduw);
    text-align: left;
    /* Passen de tabbladen net niet, dan schuiven ze horizontaal in plaats van
       dat ze over meerdere regels breken. */
    overflow-x: auto;
    scrollbar-width: none;
}
.topbar::-webkit-scrollbar {
    display: none;
}
.topbar a {
    flex: 0 0 auto;
}

.menubutton,
.menubuttonsel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    padding: 11px 16px;
    box-sizing: border-box;
    border: 0px;
    margin: 0px;
    border-radius: var(--cp-rond-klein);
    transition: background-color .2s ease, color .2s ease;
}
.menubutton {
    background-color: transparent;
    color: var(--cp-tekst-zacht);
}
.menubutton:hover {
    background-color: var(--cp-vlak-zacht);
    color: var(--cp-tekst);
}
.menubuttonsel {
    background-color: var(--cp-accent);
    color: #ffffff;
}
.menubuttonsel:hover {
    background-color: var(--cp-accent-dark);
    color: #ffffff;
}

.content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0px;
    box-sizing: border-box;
    text-align: left;
}
.maincontent {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    text-align: left;
}

/* Zijkolom "Uw Gegevens" */
.subcontent {
    flex: 0 0 275px;
    box-sizing: border-box;
    background-color: var(--cp-vlak);
    border: 1px solid var(--cp-rand);
    border-radius: var(--cp-rond);
    box-shadow: var(--cp-schaduw);
    text-align: left;
    padding: 20px;
    line-height: 1.5;
}
/* De gegevens staan in de PHP als "<b>Label:</b> waarde<br>". Door het label
   als blokje op te maken komt de waarde er netjes onder te staan, zonder dat
   daar iets in de PHP voor hoeft te veranderen. */
.subcontent b {
    display: block;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cp-tekst-zacht);
    margin-top: 12px;
    margin-bottom: 1px;
}
.subcontent br {
    display: none;
}
.subcontent h4 {
    margin-top: 0;
}
.subcontent .form-button {
    width: 100%;
    margin-top: 20px;
}

/* =========================================================================
   Rijen (facturen, offertes, bestellingen, afspraken, reparaties)
   =========================================================================
   Voorheen zweefden het bedrag en de knoppen met float naar rechts. Op een
   smal scherm liepen die over de tekst heen. Met flexbox staat alles op één
   lijn zolang het past, en breekt het daarna netjes af.
   ========================================================================= */

.row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    margin: 0 0 12px 0;
    background-color: var(--cp-vlak);
    box-sizing: border-box;
    text-align: left;
    border: 1px solid var(--cp-rand);
    border-radius: var(--cp-rond);
    box-shadow: var(--cp-schaduw);
    transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.row:hover {
    border-color: #cfd8e2;
    box-shadow: var(--cp-schaduw-hoog);
}

/* BELANGRIJK - waarom hier ".row .row-icon" staat en niet gewoon ".row-icon":
   dit element draagt ook de FontAwesome-classes (fa-solid fa-file-invoice). De
   FontAwesome-kit wordt via een script geladen en zet zijn eigen stijlen PAS NA
   deze stylesheet in de pagina. Daarin staan onder andere "display: inline-block"
   en "line-height: 1". Bij gelijke specificiteit wint dan wie het laatst komt,
   dus FontAwesome - en daardoor stond het pictogram niet gecentreerd maar
   linksboven uit de cirkel te steken.
   Met twee classes in de selector weegt deze regel zwaarder dan de enkele class
   van FontAwesome, ongeacht de volgorde waarin de stijlen binnenkomen. Zowel de
   flex-centrering als de regelhoogte staan er daarom in: welke van de twee de
   browser ook toepast, het pictogram staat midden in de cirkel. */
.row .row-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
    height: 38px;
    width: 38px;
    line-height: 38px;
    font-size: 17px;
    padding: 0;
    margin: 0;
    background-color: var(--cp-accent);
    color: #ffffff;
    border-radius: 50%;
    /* De float uit de oude opmaak is binnen een flexbox zonder effect. */
    float: none;
}

/* Het tekstblok mag alle overgebleven ruimte innemen; daardoor schuiven het
   bedrag en de knoppen vanzelf naar rechts.
   Let op: op sommige pagina's (afspraken, reparaties) zit .row-inner-wrap in
   een <a>, dus die moet net zo goed kunnen groeien. De downloadknop is óók een
   <a> met class form-button en wordt daarom uitgezonderd. */
.row-inner-wrap,
.row > a:not(.form-button) {
    flex: 1 1 220px;
    min-width: 0;
    display: block;
    height: auto;
    margin-left: 0;
    width: auto;
    vertical-align: middle;
}
.row > a:not(.form-button) .row-inner-wrap {
    flex: none;
    display: block;
}
.row-inner-wrap b,
.row-inner-wrap strong,
.row > a:not(.form-button) b,
.row > a:not(.form-button) strong {
    font-size: 15px;
    color: var(--cp-tekst);
}
.subtext-row {
    display: inline-block;
    font-size: 12px;
    color: var(--cp-tekst-zacht);
    box-sizing: border-box;
    margin-top: 2px;
}

.row-bedrag {
    flex: 0 0 auto;
    order: 1;
    /* Breekt de rij op een smal scherm af, dan drukt dit het bedrag alsnog
       naar rechts. */
    margin-left: auto;
    text-align: right;
    height: auto;
    width: max-content;
    font-family: inherit;
    font-size: 17px;
    font-weight: bold;
    color: var(--cp-tekst);
    padding: 0;
    border: 0;
    float: none;
    background-color: transparent;
    /* Cijfers even breed, zodat bedragen onder elkaar netjes uitlijnen. */
    font-variant-numeric: tabular-nums;
    cursor: default;
}

/* De actieknoppen achteraan de rij (downloaden, betalen). */
.row > a.form-button,
.row > form {
    flex: 0 0 auto;
    order: 2;
    float: none !important;
}
/* De downloadknop krijgt in de PHP een vaste maat van 32 bij 32 pixels mee. Zonder
   box-sizing kwam de padding van .form-button daar bovenop en werd het een brede
   pil in plaats van een net vierkantje; vandaar hier geen padding. */
.row > a.form-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    font-size: 14px;
}
/* De Betalen-knop staat in een <form> en krijgt inline "height:32" mee - zonder
   eenheid, dus daar doet de browser niets mee. Hier alsnog even hoog als de
   downloadknop ernaast. */
.row form .form-button {
    box-sizing: border-box;
    height: 32px;
    padding: 0 14px;
}
/* De knop in de aandachtsblokken op de homepagina is een gewone tekstknop en geen
   icoontje van 32 bij 32, dus die heeft zijn padding wél nodig. Deze regel weegt
   zwaarder dan die hierboven doordat er een class bij staat. */
.row > a.form-button.aandacht-knop {
    width: auto;
    height: auto;
    padding: 9px 16px;
    font-size: 14px;
    white-space: nowrap;
    /* Houdt de knop rechts, ook als de rij op een telefoon afbreekt. */
    margin-left: auto;
}

/* Paginering. Deze knoppen werden in de PHP al gebruikt maar hadden nog geen
   opmaak in dit bestand; ze vielen daardoor terug op de standaardknop van de
   browser. */
.pagina-button,
.pagina-button-active {
    display: inline-block;
    min-width: 38px;
    padding: 9px 12px;
    margin: 0 3px;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
    border-radius: var(--cp-rond-klein);
    border: 1px solid var(--cp-rand);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.pagina-button {
    background-color: var(--cp-vlak);
    color: var(--cp-tekst);
}
.pagina-button:hover {
    border-color: var(--cp-accent);
    color: var(--cp-accent);
}
.pagina-button-active {
    background-color: var(--cp-accent);
    border-color: var(--cp-accent);
    color: #ffffff;
}

/* =========================================================================
   Mobiele kop en menu
   ========================================================================= */

.mobhead {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cp-vlak);
    border-bottom: 1px solid var(--cp-rand);
    text-align: left;
}
.menubuttonm {
    font-size: 22px;
    padding: 10px 12px;
    text-align: center;
    color: var(--cp-tekst);
    background: none;
    cursor: pointer;
    border-style: hidden;
    border-radius: var(--cp-rond-klein);
    float: none;
    transition: background-color .2s ease;
}
.menubuttonm:hover {
    background-color: var(--cp-vlak-zacht);
    opacity: 1;
}
.menu_mob {
    display: none;
}

/* =========================================================================
   Knoppen en formulieren
   ========================================================================= */

.form-button,
.form-button-2 {
    display: inline-block;
    text-align: center;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    padding: 10px 18px;
    background-color: var(--cp-accent);
    color: #ffffff;
    cursor: pointer;
    border: 1px solid var(--cp-accent);
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
    border-radius: var(--cp-rond-klein);
}
.form-button-2 {
    font-size: 14px;
    background-color: var(--cp-vlak);
    color: var(--cp-tekst);
    border-color: var(--cp-rand);
}
.form-button:hover {
    background-color: var(--cp-accent-dark);
    border-color: var(--cp-accent-dark);
    color: #ffffff;
    box-shadow: var(--cp-schaduw);
}
.form-button-2:hover {
    background-color: var(--cp-vlak-zacht);
    border-color: #cfd8e2;
    color: var(--cp-tekst);
}
/* De downloadknoppen in het klantenpaneel zijn een <a> met class form-button;
   dat is nodig omdat de download via een ondertekende link gaat en niet via een
   formulier. De a:link / a:hover-regels hierboven wegen zwaarder dan
   .form-button (een element plus een pseudo-class telt zwaarder dan alleen een
   class), waardoor die knoppen de linkkleur kregen in plaats van de witte
   knoptekst. Vandaar deze gerichte regel. */
a.form-button:link,
a.form-button:visited,
a.form-button:hover,
a.form-button:active {
    color: #ffffff;
    text-decoration: none;
}

.form-veld {
    display: inline-block;
    width: 100%;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--cp-tekst);
    background-color: var(--cp-vlak);
    border: 1px solid var(--cp-rand);
    text-align: left;
    box-sizing: border-box;
    border-radius: var(--cp-rond-klein);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-veld:focus {
    border: 1px solid var(--cp-accent);
    box-shadow: 0 0 0 3px var(--cp-accent-zacht);
    outline-style: hidden;
}

.groeneknop,
.groeneknopD,
.rodeknop {
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    width: 100px;
    height: 100px;
    text-align: center;
    padding: 10px;
    color: #ffffff;
    border: 0px;
    border-radius: var(--cp-rond-klein);
    margin-right: 10px;
    cursor: pointer;
    transition: opacity .2s ease;
}
.groeneknop { background-color: #157f3a; }
.groeneknop:hover { opacity: .9; }
.groeneknopD { background-color: #99a3ad; cursor: not-allowed; }
.rodeknop { background-color: #a32020; }
.rodeknop:hover { opacity: .9; }

.groeneknop2,
.rodeknop2,
.disabled {
    font-family: inherit;
    font-size: 20px;
    font-weight: bold;
    width: 49%;
    text-align: center;
    padding: 22px;
    color: #ffffff;
    border-radius: var(--cp-rond-klein);
    cursor: pointer;
    border: 0px;
    box-sizing: border-box;
    transition: opacity .2s ease;
}
.groeneknop2 { background-color: #157f3a; }
.rodeknop2 { background-color: #a32020; }
.disabled { background-color: #99a3ad; cursor: not-allowed; }
.groeneknop2:hover,
.rodeknop2:hover { opacity: .9; }

/* =========================================================================
   Meldingen
   ========================================================================= */

.melding {
    color: var(--cp-tekst);
    border: 1px solid #b8dcc3;
    display: inline-block;
    background-color: #e4f5e9;
    padding: 14px 16px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--cp-rond-klein);
}
.fout {
    color: var(--cp-tekst);
    border: 1px solid #e0b4b4;
    display: inline-block;
    background-color: #fbe9e9;
    padding: 14px 16px;
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--cp-rond-klein);
}
.meldingwrap {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 975;
    pointer-events: none;
}
.meldingwrap > * {
    pointer-events: auto;
}
.melding-sluiten {
    color: var(--cp-tekst);
    float: right;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
    font-size: 16px;
}
.meldingicon {
    font-size: 28px;
    float: left;
    margin-right: 12px;
}
.noticebox,
.errorbox,
.warningbox,
.globalbox {
    color: var(--cp-tekst);
    width: 100%;
    max-width: 350px;
    text-align: left;
    box-sizing: border-box;
    font-size: 14px;
    padding: 14px 16px;
    float: right;
    margin: 15px;
    border-radius: var(--cp-rond-klein);
    box-shadow: var(--cp-schaduw-hoog);
}
.noticebox {
    background-color: #e4f5e9;
    border: 1px solid #b8dcc3;
    border-left: 5px solid #34a05a;
}
.errorbox {
    background-color: #fbe9e9;
    border: 1px solid #e0b4b4;
    border-left: 5px solid #bb2b30;
}
.warningbox {
    background-color: #fdf6d8;
    border: 1px solid #e2d79a;
    border-left: 5px solid #c9ae2e;
}
.globalbox {
    background-color: #e6f2fb;
    border: 1px solid #a9cfe9;
    border-left: 5px solid #1a91db;
}

/* =========================================================================
   Losse onderdelen
   ========================================================================= */

/* Het eigen tekstblok op de homepagina (in te vullen bij Instellingen >
   Klantenpaneel). Krijgt dezelfde witte kaart als de rest van het paneel, zodat
   het niet los op de achtergrond zweeft. De eerste en laatste marge worden
   weggehaald, anders staat er boven- en onderin dubbele witruimte doordat een
   <h3> of <p> zijn eigen marge meebrengt. */
.eigen-tekst {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--cp-vlak);
    border: 1px solid var(--cp-rand);
    border-radius: var(--cp-rond);
    box-shadow: var(--cp-schaduw);
    padding: 22px 24px;
}
.eigen-tekst > :first-child {
    margin-top: 0;
}
.eigen-tekst > :last-child {
    margin-bottom: 0;
}

/* Lege staat: wat de klant ziet als er nog niets is om te tonen.
   Voorheen stond hier per pagina een plaatje (afbeeldingen/geen-*-cp.png). Die
   afbeeldingen zijn vervangen door tekst: dat leest prettiger, schaalt mee op elk
   scherm, is voor iedereen leesbaar (ook met een schermlezer) en scheelt bij elke
   lege pagina een download. */
.geen-data {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 44px 24px;
    background-color: var(--cp-vlak);
    border: 1px dashed #d4dbe4;
    border-radius: var(--cp-rond);
    color: var(--cp-tekst-zacht);
}
.geen-data i {
    display: block;
    font-size: 34px;
    margin-bottom: 14px;
    color: #c2ccd8;
}
.geen-data b {
    display: block;
    font-size: 16px;
    color: var(--cp-tekst);
    margin-bottom: 4px;
}
.empty-page-img {
    display: inline-block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    box-sizing: border-box;
    opacity: .9;
}
.centerdiv {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
    padding-bottom: 15px;
}
.home-image {
    display: inline-block;
    width: 100%;
    max-width: 250px;
    height: auto;
    padding: 0px;
    box-sizing: border-box;
    margin-bottom: 25px;
}
.version_box {
    font-size: 12px;
    position: fixed;
    bottom: 5px;
    z-index: 700;
    color: var(--cp-tekst-zacht);
    text-align: center;
    width: 100%;
    max-width: 1000px;
}
.pro-locked {
    position: relative;
    opacity: 1;
    pointer-events: none;
    height: 100vh;
}
.pro-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: var(--kleur-1);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    font-size: 24px;
}
.pro-span {
    background-color: var(--kleur-4);
    padding: 10px;
    border: 1px dashed var(--kleur-3);
    border-radius: 5px;
}
.setup-wrap {
    display: block;
    background-color: rgba(239, 239, 239, .56);
    position: fixed;
    padding: 50px;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 900px;
    height: 100%;
    z-index: 900;
    box-sizing: border-box;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    backdrop-filter: blur(4px);
}
.setup-box {
    display: block;
    background-color: var(--kleur-1);
    padding: 25px;
    width: 100%;
    box-sizing: border-box;
    border-radius: var(--cp-rond);
}

/* =========================================================================
   Inlogpagina van het klantenpaneel
   ========================================================================= */

.loginpage {
    display: block;
    width: 100%;
    min-height: 100vh;
    color: var(--cp-tekst);
    background: linear-gradient(160deg, var(--kleur-4), var(--cp-accent));
    box-sizing: border-box;
}
.loginbox {
    display: inline-block;
    width: 100%;
    max-width: 340px;
    color: var(--cp-tekst);
    background-color: var(--cp-vlak);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .22);
    border-radius: var(--cp-rond);
    padding: 28px;
    margin-top: 100px;
    box-sizing: border-box;
    vertical-align: middle;
}
.form-veld-login {
    display: inline-block;
    width: 100%;
    padding: 12px;
    font-family: inherit;
    font-size: 15px;
    border-radius: var(--cp-rond-klein);
    margin-bottom: 18px;
    text-align: center;
    color: var(--cp-tekst);
    border: 1px solid var(--cp-rand);
    box-sizing: border-box;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-veld-login:focus {
    border: 1px solid var(--cp-accent);
    box-shadow: 0 0 0 3px var(--cp-accent-zacht);
    outline-style: hidden;
}
.form-button-login {
    margin-right: 10px;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: bold;
    padding: 12px 20px;
    background-color: var(--cp-accent);
    color: #ffffff;
    cursor: pointer;
    border: 0px;
    transition: background-color .2s ease;
    border-radius: var(--cp-rond-klein);
}
.form-button-login:hover {
    background-color: var(--cp-accent-dark);
    color: #ffffff;
}

/* =========================================================================
   Betaalpagina (betalen/)
   ========================================================================= */

.betaalmain {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    margin: 0px;
    box-sizing: border-box;
    overflow-y: auto;
    text-align: center;
    align-content: center;
    /* Bewust het oorspronkelijke, neutrale grijs. Bij het moderniseren stond hier even
       een verloop in de accentkleur, maar op een betaal- of accordeerpagina hoort de
       aandacht naar de knoppen te gaan en niet naar de achtergrond - en het botste met
       een logo in een andere kleur. Deze achtergrond wordt gedeeld door betalen/ en
       accorderen/. */
    background-image: linear-gradient(20deg, #cacaca 0%, #c5c5c5 45%, #888888 45%, #a7a7a7 100%);
}
.betaalbox {
    display: inline-block;
    border-radius: var(--cp-rond);
    background-color: var(--cp-vlak);
    width: 100%;
    max-width: 600px;
    margin-top: 25px;
    padding: 24px;
    box-sizing: border-box;
    border: 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    text-align: left;
}
/* Deze class wordt op de betaalpagina twee keer gebruikt: één keer als echte kop
   (logo links, status rechts) en één keer als omhulsel om de betaalgegevens. De
   scheidingslijn zit daarom op het eerste blok en niet op de class zelf, anders
   zou er ook een streep onder de gegevens verschijnen. */
.betaalboxhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    height: auto;
    padding: 0;
    margin: 0 0 22px 0;
    box-shadow: none;
}
.betaalbox > .betaalboxhead:first-child {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--cp-rand);
}
.betaalimage {
    width: auto;
    max-width: 220px;
    height: auto;
    max-height: 48px;
    float: none;
}
.factuurnummer,
.betaalstatus {
    vertical-align: middle;
    color: var(--cp-tekst);
    float: none;
    font-size: 20px;
    font-weight: bold;
    box-sizing: border-box;
    margin-top: 0;
    padding-bottom: 0px;
}
.betaalinfo {
    display: inline-block;
    line-height: 1.6;
    font-size: 16px;
    text-align: left;
    width: 100%;
}
.betaalknop {
    font-family: inherit;
    font-weight: bold;
    text-align: center;
    background-color: var(--cp-accent);
    color: #ffffff;
    border-radius: var(--cp-rond-klein);
    cursor: pointer;
    border: 1px solid var(--cp-accent);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    font-size: 16px;
    transition: background-color .2s ease;
}
.betaalknop:hover {
    background-color: var(--cp-accent-dark);
    color: #ffffff;
}
.emailbox {
    display: inline-block;
    background-color: var(--cp-vlak-zacht);
    padding: 22px;
    width: max-content;
    border-radius: var(--cp-rond);
    box-sizing: border-box;
    max-width: 100%;
}

/* =========================================================================
   Tablet en telefoon
   =========================================================================
   Onder de 1000px verdwijnt de bovenbalk en neemt de mobiele kop met het
   hamburgermenu het over; dat is hoe de PHP het al opbouwde.
   ========================================================================= */

@media only screen and (max-width: 1000px) {
    .main {
        padding: 0 0 60px 0;
    }
    .topbar,
    .headerbar {
        display: none;
    }
    .mobhead {
        /* Blijft bovenin staan bij het scrollen. */
        display: flex;
        position: sticky;
        top: 0;
        z-index: 680;
        height: 56px;
        padding: 0 12px;
        box-shadow: 0 1px 3px rgba(16, 24, 40, .08);
    }
    .headerimage {
        max-width: 160px;
        max-height: 34px;
    }
    .menu_mob {
        position: fixed;
        top: 56px;
        left: 0;
        width: 100%;
        height: calc(100% - 56px);
        background-color: var(--cp-vlak);
        box-sizing: border-box;
        overflow-y: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
        z-index: 675;
        display: none;
        padding: 8px;
        text-align: left;
    }
    .menu_mob::-webkit-scrollbar {
        display: none;
    }
    .menu_mob a {
        display: block;
    }
    .menubutton,
    .menubuttonsel {
        width: 100%;
        /* Ruime aanraakvlakken op een telefoon. */
        padding: 15px 16px;
        margin-bottom: 4px;
        font-size: 15px;
    }
    .content {
        display: block;
        padding: 16px;
    }
    .maincontent {
        width: 100%;
    }
    .subcontent {
        /* De gegevens zijn op mobiel via het menu bereikbaar (Gegevens). */
        display: none;
    }
    h3 {
        font-size: 20px;
    }
    .row {
        padding: 14px;
        gap: 10px;
    }
    .row-inner-wrap,
    .row > a:not(.form-button) {
        /* Vanaf hier breekt de rij: tekst op de eerste regel, bedrag en
           knoppen daaronder. */
        flex: 1 1 160px;
    }
    .betaalbox {
        padding: 18px;
    }
    .groeneknop2,
    .rodeknop2,
    .disabled {
        font-size: 17px;
        padding: 18px;
    }
    .noticebox,
    .errorbox,
    .warningbox,
    .globalbox {
        float: none;
        margin: 12px auto;
        max-width: calc(100% - 24px);
    }
}

@media only screen and (max-width: 560px) {
    .content {
        padding: 12px;
    }
    .row {
        padding: 12px;
    }
    /* Ook hier twee classes, om dezelfde reden als bij de hoofdregel: anders wint
       FontAwesome en staat het pictogram niet meer gecentreerd. */
    .row .row-icon {
        height: 34px;
        width: 34px;
        line-height: 34px;
        font-size: 15px;
    }
    /* Op een telefoon krijgen het icoon en de tekst de eerste regel, en komen het
       bedrag en de knoppen daar netjes onder.
       Dit lege element dwingt die afbreking af. Het staat in de volgorde direct
       achter de tekst (order 0) en is even breed als de rij, zodat alles daarna
       wel op een nieuwe regel moet beginnen. Zonder deze truc bepaalt de lengte
       van het factuurnummer waar de rij toevallig afbreekt, en dan brak de datum
       middenin af. */
    .row::after {
        content: "";
        flex: 0 0 100%;
        height: 0;
        order: 0;
    }
    .row-bedrag {
        font-size: 16px;
    }
    .groeneknop2,
    .rodeknop2,
    .disabled {
        width: 100%;
        margin-bottom: 8px;
    }
    .loginbox {
        margin-top: 40px;
    }
}