/* -------------------------------------------------------------
   De Maakfabriek — merkthema.

   Ligt bovenop Bootstrap 3 (Flask-Bootstrap levert de basis), en
   vertaalt die lichte standaardstijl naar de donkere huisstijl van
   demaakfabriek.be. De kleurtokens en het lettertype komen
   rechtstreeks uit het WordPress-thema van de site, zodat het
   reservatieplatform en de website hetzelfde aanvoelen.

   Lettertype Prompt wordt zelf gehost, bewust niet via
   fonts.googleapis.com: dat stuurt het IP-adres van elke bezoeker
   naar Google, wat in de EU als een AVG-inbreuk geldt.
   ------------------------------------------------------------- */

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/prompt-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/prompt-400-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/prompt-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/prompt-500-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/prompt-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/prompt-600-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/prompt-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/prompt-700-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: dark;

    --mf-turkoois: #2ec4b6;
    --mf-turkoois-licht: #4dd6c9;
    --mf-donker: #08211f;
    --mf-donker-diep: #051614;
    --mf-wit: #ffffff;
    --mf-gedempt: rgba(255, 255, 255, 0.72);
    --mf-lijn: rgba(255, 255, 255, 0.14);
    /* Iets opgelicht vlak voor panelen en tabelrijen: onderscheidt zich
       van de achtergrond zonder een tweede kleur te introduceren. */
    --mf-vlak: #0e2c29;
    --mf-vlak-hover: #133733;
    /* Lichte, turkoois-getinte tint voor "van jou"-kaarten. */
    --mf-kaart-mijn: #e3f6f3;
}

/* --- basis ------------------------------------------------------ */

body {
    background: var(--mf-donker);
    color: var(--mf-wit);
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--mf-turkoois);
}

a:hover,
a:focus {
    color: var(--mf-turkoois-licht);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

hr {
    border-top-color: var(--mf-lijn);
}

.text-muted {
    color: var(--mf-gedempt);
}

/* --- breedte ------------------------------------------------------ */

/* Bootstrap pins the page at 1170px however wide the screen is, which
   leaves half a laptop empty next to a table of payments. Let it use what
   is there, with a cap so a line of text on a very wide screen does not
   run from edge to edge, and with air at the sides on a phone. */
.container {
    width: auto;
    max-width: 1800px;
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 767px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* --- navigatie --------------------------------------------------- */

.navbar-inverse {
    background: var(--mf-donker-diep);
    border: 0;
    border-bottom: 1px solid var(--mf-lijn);
    border-radius: 0;
    margin-bottom: 24px;
}

.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-nav > li > a {
    color: var(--mf-gedempt);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus,
.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--mf-wit);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .open > a:hover,
.navbar-inverse .navbar-nav > .open > a:focus {
    background: var(--mf-vlak);
    color: var(--mf-wit);
}

/* A volunteer sees nine items up there, an administrator ten, and in Dutch
   they are longer words. That only fits on a wide screen, so the bar is one
   flex row that cannot wrap from 1280px up, and folds into its toggle below
   that -- Bootstrap would otherwise drop the right hand group onto a second
   row, or run it off the side. */
@media (min-width: 1280px) {
    .navbar-inverse .navbar-collapse.collapse {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
    }

    /* the menus follow the brand; the profile is pushed to the far end,
       so a member with three menus does not get them floating mid-bar */
    .navbar-inverse .navbar-collapse.collapse > .navbar-nav:last-child {
        margin-left: auto;
    }

    .navbar-inverse .navbar-nav {
        float: none;
        display: flex;
        flex-wrap: nowrap;
        margin-top: 0;
        margin-bottom: 0;
    }

    .navbar-inverse .navbar-nav > li {
        float: none;
        /* squeezing an item makes its own contents wrap instead */
        flex: 0 0 auto;
    }

    .navbar-inverse .navbar-nav > li > a {
        white-space: nowrap;
    }

    .navbar-inverse .navbar-brand,
    .navbar-inverse .navbar-nav > li > a {
        padding-left: 8px;
        padding-right: 8px;
    }
}

@media (min-width: 1280px) and (max-width: 1599px) {
    .navbar-inverse .navbar-brand,
    .navbar-inverse .navbar-nav > li > a {
        font-size: 11px;
        letter-spacing: 0;
    }
}

/* Bootstrap folds the bar at 768px, which is far too narrow for ten items:
   keep the toggle all the way up to the width where they do fit. */
@media (min-width: 768px) and (max-width: 1279px) {
    .navbar-header {
        float: none;
    }

    .navbar-toggle {
        display: block;
    }

    .navbar-inverse .navbar-collapse {
        border-color: var(--mf-lijn);
        border-top: 1px solid var(--mf-lijn);
    }

    .navbar-inverse .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-inverse .navbar-collapse.collapse.in {
        display: block !important;
        overflow-y: auto;
    }

    .navbar-inverse .navbar-nav,
    .navbar-inverse .navbar-nav.navbar-right {
        float: none !important;
        margin: 7.5px -15px;
    }

    .navbar-inverse .navbar-nav > li {
        float: none;
    }

    .navbar-inverse .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* the calendar link is marked up as a brand, and a brand floats */
    .navbar-inverse .navbar-nav > li > a.navbar-brand {
        float: none;
        display: block;
        height: auto;
        padding: 10px 15px;
    }

    /* an open dropdown belongs in the list itself, not floating over it */
    .navbar-inverse .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu > li > a {
        padding: 5px 15px 5px 25px;
    }
}

/* The menus a volunteer gets are the ones that change things, so they are
   set apart from the menus every member has: their own panel, with a word
   above them saying what they are. */
.navbar-inverse .navbar-nav.admin-nav {
    background: var(--mf-vlak);
    border-radius: 6px;
    /* it has to end visibly before the profile menu, or the two read as one */
    margin-right: 14px;
    margin-left: 14px;
}

.navbar-inverse .navbar-nav.admin-nav > li.group-label {
    display: flex;
    align-items: center;
    padding: 0 6px 0 10px;
    color: var(--mf-turkoois);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 1279px) {
    /* stacked in the toggle, a panel around the group reads as a heading */
    .navbar-inverse .navbar-nav.admin-nav {
        padding: 4px 0;
        margin-left: 0;
        margin-right: 0;
    }

    .navbar-inverse .navbar-nav.admin-nav > li.group-label {
        padding: 6px 15px;
    }
}

/* The two languages sit side by side, not one under the other: a direct
   child of a nav item is a block in Bootstrap, and a flex item that is
   allowed to shrink wraps its own contents instead. */
.navbar-inverse .navbar-nav > li.language-switcher {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    white-space: nowrap;
}

.navbar-inverse .navbar-nav > li.language-switcher > a,
.navbar-inverse .navbar-nav > li.language-switcher > span {
    display: inline-block;
    padding: 4px 5px;
    font-size: 11px;
}

.navbar-inverse .navbar-nav > li.language-switcher > span.active {
    color: var(--mf-turkoois);
}

.navbar-inverse .navbar-toggle {
    border-color: var(--mf-lijn);
}

.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
    background: var(--mf-vlak);
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: var(--mf-lijn);
}

.dropdown-menu {
    background: var(--mf-vlak);
    border: 1px solid var(--mf-lijn);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.dropdown-menu > li > a {
    color: var(--mf-gedempt);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--mf-vlak-hover);
    color: var(--mf-wit);
}

.dropdown-menu .divider {
    background-color: var(--mf-lijn);
}

/* --- paginakoppen ------------------------------------------------ */

.page-header {
    border-bottom: 1px solid var(--mf-lijn);
}

.page-header h1 {
    /* Turkooizen streep onder de titel: hetzelfde accent dat de site
       onder de merknaam gebruikt. */
    display: inline-block;
    border-bottom: 2px solid var(--mf-turkoois);
    padding-bottom: 6px;
    margin-bottom: -1px;
}

/* --- panelen ----------------------------------------------------- */

.panel {
    background: var(--mf-vlak);
    border: 1px solid var(--mf-lijn);
    border-radius: 6px;
    box-shadow: none;
}

.panel-heading {
    border-bottom: 1px solid var(--mf-lijn);
    font-weight: 600;
}

.panel-default > .panel-heading {
    background: transparent;
    border-color: var(--mf-lijn);
    color: var(--mf-wit);
}

.panel-success {
    border-color: var(--mf-turkoois);
}

.panel-success > .panel-heading {
    background: var(--mf-turkoois);
    border-color: var(--mf-turkoois);
    color: var(--mf-donker-diep);
}

.panel-danger {
    border-color: #e06055;
}

.panel-danger > .panel-heading {
    background: #e06055;
    border-color: #e06055;
    color: var(--mf-donker-diep);
}

.well {
    background: var(--mf-vlak);
    border-color: var(--mf-lijn);
    box-shadow: none;
}

/* --- tabellen ---------------------------------------------------- */

.table {
    color: var(--mf-wit);
}

.table > thead > tr > th {
    border-bottom: 2px solid var(--mf-lijn);
    color: var(--mf-gedempt);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    border-top: 1px solid var(--mf-lijn);
}

.table-hover > tbody > tr:hover {
    background: var(--mf-vlak-hover);
}

.clickable-row {
    cursor: pointer;
}

/* --- knoppen ----------------------------------------------------- */

.btn {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}

.btn-default {
    background: transparent;
    border-color: var(--mf-lijn);
    color: var(--mf-wit);
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active {
    background: var(--mf-vlak-hover);
    border-color: var(--mf-turkoois);
    color: var(--mf-wit);
}

.btn-primary,
.btn-info,
.btn-success {
    background: var(--mf-turkoois);
    border-color: var(--mf-turkoois);
    color: var(--mf-donker-diep);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-info:hover, .btn-info:focus, .btn-info:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background: var(--mf-turkoois-licht);
    border-color: var(--mf-turkoois-licht);
    color: var(--mf-donker-diep);
}

.btn-danger {
    background: #e06055;
    border-color: #e06055;
    color: var(--mf-donker-diep);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
    background: #ea7268;
    border-color: #ea7268;
    color: var(--mf-donker-diep);
}

.btn.disabled,
.btn[disabled] {
    opacity: 0.4;
}

/* Flask-Bootstrap rendert elke SubmitField als .btn-default, waardoor de
   hoofdactie van een formulier er even terughoudend uitziet als een
   annuleerlink. De verzendknop krijgt daarom de merkkleur. */
.btn[type="submit"],
input[type="submit"].btn {
    background: var(--mf-turkoois);
    border-color: var(--mf-turkoois);
    color: var(--mf-donker-diep);
}

.btn[type="submit"]:hover,
.btn[type="submit"]:focus,
.btn[type="submit"]:active,
input[type="submit"].btn:hover,
input[type="submit"].btn:focus {
    background: var(--mf-turkoois-licht);
    border-color: var(--mf-turkoois-licht);
    color: var(--mf-donker-diep);
}

/* ... behalve wanneer het formulier iets onomkeerbaars doet. */
.btn-danger[type="submit"],
input[type="submit"].btn-danger {
    background: #e06055;
    border-color: #e06055;
}

/* --- formulieren -------------------------------------------------- */

/* Bootstrap's normalize gives form controls "color: inherit", so a bare
   <input> or <select> -- pay.html lays its rows out by hand, without the
   .form-control class -- took the white body text onto the light background
   the browser draws itself, and read as empty. Dress those like a
   .form-control too. Buttons, tickboxes and file pickers keep their own
   look, and the list is written as exclusions on purpose: an input with an
   unknown type (pay.html has type="float") still has to be caught. */
input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]),
select,
textarea {
    background: var(--mf-donker-diep);
    border: 1px solid var(--mf-lijn);
    border-radius: 4px;
    color: var(--mf-wit);
    padding: 3px 8px;
}

input:not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]):focus,
select:focus,
textarea:focus {
    border-color: var(--mf-turkoois);
    box-shadow: 0 0 0 2px rgba(46, 196, 182, 0.25);
    outline: none;
}

/* the list a select drops open is drawn by the platform, not by the page */
option {
    background: var(--mf-donker-diep);
    color: var(--mf-wit);
}

.form-control {
    background: var(--mf-donker-diep);
    border: 1px solid var(--mf-lijn);
    border-radius: 4px;
    box-shadow: none;
    color: var(--mf-wit);
}

.form-control:focus {
    background: var(--mf-donker-diep);
    border-color: var(--mf-turkoois);
    box-shadow: 0 0 0 2px rgba(46, 196, 182, 0.25);
    color: var(--mf-wit);
}

.form-control::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

label,
.control-label {
    color: var(--mf-gedempt);
    font-weight: 500;
}

.help-block {
    color: var(--mf-gedempt);
}

.input-group-addon {
    background: var(--mf-vlak);
    border-color: var(--mf-lijn);
    color: var(--mf-gedempt);
}

.has-error .form-control {
    border-color: #e06055;
}

.has-error .control-label,
.has-error .help-block {
    color: #ea9d96;
}

/* --- meldingen ---------------------------------------------------- */

.alert {
    border-radius: 6px;
    border-width: 1px;
    border-left-width: 4px;
}

.alert-warning {
    background: var(--mf-vlak);
    border-color: var(--mf-lijn);
    border-left-color: var(--mf-turkoois);
    color: var(--mf-wit);
}

.alert-warning a {
    color: var(--mf-turkoois);
}

.alert-danger {
    background: var(--mf-vlak);
    border-color: var(--mf-lijn);
    border-left-color: #e06055;
    color: var(--mf-wit);
}

.alert .close {
    color: var(--mf-wit);
    opacity: 0.5;
    text-shadow: none;
}

.alert .close:hover {
    color: var(--mf-wit);
    opacity: 1;
}

/* --- paginering ---------------------------------------------------- */

.pagination > li > a,
.pagination > li > span {
    background: transparent;
    border-color: var(--mf-lijn);
    color: var(--mf-turkoois);
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background: var(--mf-vlak-hover);
    border-color: var(--mf-turkoois);
    color: var(--mf-wit);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:hover {
    background: var(--mf-turkoois);
    border-color: var(--mf-turkoois);
    color: var(--mf-donker-diep);
}

.pagination > .disabled > a,
.pagination > .disabled > span {
    background: transparent;
    border-color: var(--mf-lijn);
    color: rgba(255, 255, 255, 0.3);
}

/* --- kalender ------------------------------------------------------ */

/* FullCalendar v2.6 komt met een vast licht palet (witte cellen, een
   crèmekleurige "vandaag"-kolom en verlopen op de knoppen). Dat vloekt
   met de donkere huisstijl, dus die kleuren worden hier omgezet. De
   layout van de plugin blijft ongemoeid — alleen vlakken, lijnen en
   tekstkleur. */

.fc {
    color: var(--mf-wit);
}

/* Let op de dubbele klasse (.fc.fc-unthemed) en de .fc-voorvoegsels
   hieronder. fullcalendar.css wordt pas in het scripts-blok ingeladen,
   dus ná dit bestand; bij gelijke specificiteit zou de plugin winnen.
   Eén niveau extra specificiteit maakt de volgorde irrelevant. */

.fc.fc-unthemed td,
.fc.fc-unthemed th,
.fc.fc-unthemed thead,
.fc.fc-unthemed tbody,
.fc.fc-unthemed .fc-divider,
.fc.fc-unthemed .fc-row,
.fc.fc-unthemed .fc-content,
.fc.fc-unthemed .fc-popover,
.fc.fc-unthemed .fc-list-heading td {
    border-color: var(--mf-lijn);
}

.fc.fc-unthemed .fc-divider,
.fc.fc-unthemed .fc-popover .fc-header {
    background: var(--mf-vlak-hover);
}

.fc.fc-unthemed .fc-popover {
    background-color: var(--mf-vlak);
    color: var(--mf-wit);
}

.fc.fc-unthemed .fc-popover .fc-header .fc-close {
    color: var(--mf-gedempt);
}

/* De crèmekleurige "vandaag"-kolom wordt een subtiel turkooizen vlak. */
.fc.fc-unthemed .fc-today {
    background: rgba(46, 196, 182, 0.10);
}

.fc .fc-highlight {
    background: var(--mf-turkoois);
    opacity: 0.25;
}

/* Beschikbare uren (background events) — het enige groene vlak in de
   oude stijl, nu in de merkkleur. */
.fc .fc-bgevent {
    background: var(--mf-turkoois);
    opacity: 0.22;
}

.fc.fc-unthemed .fc-nonbusiness {
    background: rgba(0, 0, 0, 0.25);
}

/* De dag- en tijdkoppen: gedempt wit in plaats van zwart op wit. */
.fc .fc-day-header,
.fc .fc-axis,
.fc .fc-week-number,
.fc .fc-list-heading td {
    color: var(--mf-gedempt);
    font-weight: 500;
}

.fc-toolbar h2 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

/* Knoppenbalk: de verlopen van de plugin vervangen door dezelfde pillen
   als de rest van de app. */
.fc button {
    height: auto;
    padding: 5px 14px;
    text-shadow: none;
    box-shadow: none;
    background-image: none;
    background-color: transparent;
    border: 1px solid var(--mf-lijn);
    border-radius: 999px;
    color: var(--mf-wit);
    font-family: inherit;
    font-weight: 600;
}

.fc button:hover,
.fc .fc-state-hover {
    background-color: var(--mf-vlak-hover);
    background-image: none;
    border-color: var(--mf-turkoois);
    color: var(--mf-wit);
}

.fc .fc-state-active,
.fc .fc-state-down {
    background-color: var(--mf-turkoois);
    background-image: none;
    border-color: var(--mf-turkoois);
    box-shadow: none;
    color: var(--mf-donker-diep);
}

.fc .fc-state-disabled {
    background-color: transparent;
    border-color: var(--mf-lijn);
    color: rgba(255, 255, 255, 0.3);
}

/* De knoppen in een groep mogen hun pilvorm aan de binnenkant verliezen,
   anders overlappen de ronde hoeken elkaar. */
.fc .fc-button-group > * {
    border-radius: 0;
}

.fc .fc-button-group > :first-child {
    border-radius: 999px 0 0 999px;
}

.fc .fc-button-group > :last-child {
    border-radius: 0 999px 999px 0;
}

/* Reservaties. De kalender zet zelf een groene kleur op je eigen
   reservaties (zie get_data_json_response); die van anderen krijgen de
   standaardkleur en worden hier gedempt zodat je eigen blokken opvallen. */
.fc .fc-event {
    border: 0;
    border-left: 3px solid var(--mf-turkoois);
    border-radius: 4px;
    padding: 1px 4px;
    background-color: var(--mf-vlak-hover);
    color: var(--mf-wit);
}

.fc .fc-event .fc-title,
.fc .fc-event .fc-time {
    color: var(--mf-wit);
}

/* Je eigen reservaties: het enige lichte vlak op de pagina, zodat ze
   meteen opvallen tussen de blokken van anderen. Dit is waar de tint
   --mf-kaart-mijn uit de huisstijl voor bedoeld is. */
.fc .fc-event.mf-eigen-reservatie {
    background-color: var(--mf-kaart-mijn);
    border-left-color: var(--mf-turkoois);
    color: var(--mf-donker-diep);
}

.fc .fc-event.mf-eigen-reservatie .fc-title,
.fc .fc-event.mf-eigen-reservatie .fc-time {
    color: var(--mf-donker-diep);
}

/* --- profielfoto's --------------------------------------------------- */

.profile-thumbnail {
    border-radius: 6px;
}

/* --- markdown-voorbeeld ---------------------------------------------- */

div.flask-pagedown-preview {
    border-color: var(--mf-lijn);
}

/* --- modale vensters (bootstrap-dialog) ------------------------------- */

.modal-content {
    background: var(--mf-vlak);
    border: 1px solid var(--mf-lijn);
    color: var(--mf-wit);
}

.modal-header,
.modal-footer {
    border-color: var(--mf-lijn);
}