/* Absolute URLs preserve the original font origin when this CSS is on br.qcg.nl. */
@font-face {
    font-family: "Open Sans";
    src: url("https://www.bendyroad.com/assets/fonts/OpenSans-VariableFont_wdth,wght.ttf") format("truetype");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Manrope;
    src: url("https://www.bendyroad.com/assets/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Roboto;
    src: url("https://www.bendyroad.com/assets/fonts/Roboto-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Roboto;
    src: url("https://www.bendyroad.com/assets/fonts/Roboto-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --surface: #fff;
    --surface-muted: #f1f5f9;
    --text: #243247;
    --text-muted: #64748b;
    --border: #cbd5e1;
    --primary: #155eab;
    --on-primary: #fff;
    --danger: #b91c1c;
    --on-danger: #fff;
    --focus-ring: #3385d6;
    --selected-surface: #e8f1fb;
    --table-heading: #e2e8f0;
    --table-stripe: #f8fafc;

    --error-surface: #fef2f2;
    --error-border: #fca5a5;
    --error-text: #991b1b;
}

body {
    margin: 0;
    font-family: Roboto, sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--text);
    background: var(--surface);
}
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    background: var(--surface);
    min-height: 60vh;
}

/* Retain centered layout for the standalone sign-in dialog. */
.main-single {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "content-left content-center content-right";
}
.main-single .main-center {
    grid-area: content-center;
}

#page > .main-single {
    flex: 1;
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: auto;
    align-items: start;
    gap: 2rem;
    padding: 2rem 1rem;
}
#page > .main-single > .main-left {
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0;
}
#page > .main-single > .main-left:empty {
    display: none;
}
#page > .main-single:has(> .main-left:empty) {
    grid-template-columns: minmax(0, 1fr);
}
#page > .main-single > .main-center {
    grid-area: auto;
    min-width: 0;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
#page .main-center #contentzone {
    width: 100%;
    max-width: 45rem;
    margin: 0;
}
#page .main-center #contentzone > h1:first-child {
    margin-top: 0;
}
#page .main-left ul.submenu {
    width: 100%;
    max-width: none;
    margin: 0;
}
@media (max-width: 45rem) {
    #page > .main-single {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1.25rem 1rem;
    }
}

.content-style {
    font-weight: 500;
}
.content-style :is(h1, h2, h3, .hfont) {
    font-family: Manrope, sans-serif;
    color: #565757;
}
.content-style p {
    line-height: 1.5;
}
/* Low specificity lets button and table components own their link colors. */
:where(.content-style) a {
    color: var(--primary);
}
:where(.content-style) a:visited {
    color: var(--primary);
}
.content-style blockquote {
    background: var(--selected-surface);
    padding: 1em;
}
.content-style blockquote p {
    margin: 0;
}
.content-style :is(input, select) {
    font-family: inherit;
    font-size: inherit;
}

/*HEADER*/

.header2 {
    background: var(--surface);
    color: var(--text);
    border-bottom: 1px solid var(--border);

    .hdr-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: .5rem 1rem;
    }

    .hdr-brand {
        display: inline-flex;
        align-items: center;
        gap: .65rem;
        color: inherit;
        text-decoration: none;
    }

    .hdr-logo {
        display: block;
        width: 2rem;
        height: 2rem;
        padding: 0;
    }

    .hdr-name {
        font-size: 1.1rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .mainmenu {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        background: var(--surface-muted);
        color: var(--text);

        ul {
            display: flex;
            flex-wrap: wrap;
            list-style: none;
            margin: 0;
            padding: 0;
            font-weight: 700;
        }
        a {
            display: inline-block;
            padding: 1rem;
            font-size: 13pt;
            color: var(--text);
            text-decoration: none;
        }

        a:hover {
            background: var(--table-heading);
            color: var(--primary);
        }

        a:focus-visible {
            outline: 3px solid var(--focus-ring);
            outline-offset: -3px;
        }
    }
}

/*footer*/

.footer2 {
    padding: .75rem 1rem;
    background: var(--surface-muted);
    color: var(--text-muted);
    border-top: 1px solid var(--border);
    font-size: .875rem;
    line-height: 1.5;

    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover {
        color: var(--primary);
        text-decoration: underline;
    }

    a:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

}

/*SUBMENU*/

ul.submenu {
    list-style: none;
    margin: .75rem 0 0;
    padding: 0;
    width: 11rem;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--surface);
}

ul.submenu > li {
    margin: 0;
    padding: 0;
}

ul.submenu > li + li {
    border-top: 1px solid var(--border);
}

ul.submenu > li > a,
ul.submenu > li > a:visited {
    display: block;
    padding: .7rem 1rem;
    color: var(--primary);
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border-radius: .25rem;
}

ul.submenu > li > a:hover {
    background: var(--surface-muted);
}

ul.submenu > li > a[aria-current="page"] {
    background: var(--selected-surface);
    font-weight: 600;
    box-shadow: inset 3px 0 var(--primary);
}

ul.submenu > li > a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
}

/*actionbar2*/

.actionbar2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.actionbar2 form {
    display: block;
    margin: 0;
}

.actionbar2 > .primary,
.actionbar2 > .primary-action {
    margin-left: auto;
}

/* The input selector wins against legacy form.css/form3.css submit rules. */
.action-button,
input.action-button[type="submit"],
.actionbar2 :is(button, input[type="submit"], a) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: .65rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

.action-button.primary,
input.action-button.primary[type="submit"],
.actionbar2 :is(button, input[type="submit"], a).primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.action-button.danger,
input.action-button.danger[type="submit"] {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--on-danger);
}

.action-button:hover,
.actionbar2 :is(button, input[type="submit"], a):hover {
    filter: brightness(.95);
}

.action-button:focus-visible,
.actionbar2 :is(button, input[type="submit"], a):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

.action-button:disabled,
.actionbar2 :is(button, input[type="submit"]):disabled {
    opacity: .5;
    cursor: default;
    filter: none;
}

/*TABLE2*/

.table2 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    line-height: 1.5;

    th,
    td {
        padding: .65rem .85rem;
        text-align: left;
        vertical-align: top;
    }

    thead th {
        background: var(--table-heading);
        font-weight: 700;
        border-bottom: 2px solid var(--border);
    }

    thead th:first-child {
        border-top-left-radius: .4rem;
    }

    thead th:last-child {
        border-top-right-radius: .4rem;
    }
    tbody tr + tr :is(td, th) {
        border-top: 1px solid var(--border);
    }

    tbody tr:nth-child(even) {
        background: var(--table-stripe);
    }

    tbody tr:hover {
        background: var(--selected-surface);
    }

    a,
    a:visited {
        color: var(--primary);
        text-underline-offset: .2em;
    }

    a:focus-visible {
        outline: 3px solid var(--focus-ring);
        outline-offset: 3px;
    }

    /* Amounts and dates */
    .amount {
        text-align: right;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }

    .date {
        white-space: nowrap;
    }
}

/* Optional wrapper for wide tables */
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
}

/*LICENSE BOX*/

div.licensetext {
    height: 300px;
    overflow-y: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid #ccc;
    padding: 12px;
}

/*FORM*/

.form2 .form-note {
    grid-column: 1 / -1;
}

/*feedback*/

.feedback {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: .4rem;
    font-size: .95rem;
    line-height: 1.5;
}

.feedback-error {
    background: var(--error-surface);
    border-color: var(--error-border);
    color: var(--error-text);
}

/* Span both columns when placed inside a form2 grid. */
.form2 > .feedback {
    grid-column: 1 / -1;
}


/*LEGACY STUFF*/

.hfont-bold {
    font-family: Manrope, sans-serif;
    font-weight: bold;
}

.horiflex {
    display: flex;
    column-gap: 1em;
    margin: 1em 0;
}
a.link {
    color: black;
}
div.error {
    border: 1px solid darkred;
    padding: 0 1em;
    color: darkred;
    background: lavender;
    margin: 1em 0;
    font-size: large;
    font-weight: bold;
}
div.messages {
    border: 1px solid black;
    padding: 0 1em;
    background: lavender;
    margin: 1em 0;
}
div.messages .error {
    font-size: large;
    font-weight: bold;
    color: darkred;
}
div.messages .message {
    font-size: large;
    font-weight: bold;
    color: black;
}
.roundcell {
    border: 5px solid #00000020;
    border-radius: 1em;
    padding: 0 1em;
}
.paybar {
    display: flex;
    align-items: center;
    margin-top: 1em;
}
.paylogocontainer {
    display: flex;
    align-items: center;
    column-gap: 1em;
    margin-left: 2em;
}
img.paylogo {
    height: 3em;
}
img.visa {
    height: 2em;
}