/*!
 * Start Bootstrap - SB Admin 2 (https://startbootstrap.com/themes/sb-admin-2)
 * Copyright 2013-2020 Start Bootstrap
 * Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-sb-admin-2/blob/master/LICENSE)
 */
/*!
 * Copyright 2011-2020 The Bootstrap Authors
 * Copyright 2011-2020 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/* DIT BESTAND IS EEN MENGSEL, en dat is de reden dat hieronder niet alles wat een linter meldt ook
   gerepareerd is. Boven staat de licentiekop van Bootstrap + SB Admin 2 (vendored, MIT), en daar is
   ISTA-eigen CSS DOORHEEN gezet: de :root-variabelen en @font-face hieronder, .searchfield, de
   #table1-regels, en losse blokken met Nederlands commentaar verderop. Wie hier iets wijzigt moet
   dus eerst vaststellen of hij in geleende of in eigen code staat. Een theme-update van SB Admin 2
   overschrijft de vendored regels en gooit elke reparatie daarin weg; een reparatie in eigen code
   blijft staan. GEMETEN: dit bestand wordt ook rechtstreeks geladen (de views doen
   href="~/css/site.css"), er is geen site.min.css en geen CSS-buildstap - wat hier staat is dus wat
   de browser krijgt, zonder tussenstap.

   WAT DAT BETEKENT VOOR DE SONARCLOUD-MELDINGEN OP DIT BESTAND, zodat niemand ze nog eens opnieuw
   uitzoekt. Alleen de melding op .searchfield (css:S4657) zat in eigen CSS en is opgelost; zie het
   commentaar bij die regel. De overige meldingen zitten in vendored code en zijn met opzet NIET
   aangeraakt:
     - css:S4649 op de vijf `font-family: 'Font Awesome 5 Free'`-regels (de ::after-pijltjes van
       sidebar, dropdowns en card-headers). Dit is een ICON-font en de content is een private-use
       codepoint als '\f107'. Een generieke fallback erachter maakt het juist SLECHTER: valt Font
       Awesome weg, dan rendert sans-serif dat codepoint als tofu-blokje in plaats van niets.
     - css:S4649 op `.text-hide { font: 0/0 a }` (Bootstrap-utility). Dezelfde text-hide-hack als in
       BussyIndicator.css, maar hier in geleende code, dus hij blijft zoals upstream hem levert.
     - css:S4656 dubbele `text-decoration` bij abbr[title]. Dat is de bewuste autoprefixer-fallback
       van Bootstrap: eerst `underline`, dan `underline dotted`. Browsers die de meerwaarde-shorthand
       niet kennen houden de gewone underline. De eerste weghalen SLOOPT die fallback.
     - css:S4656 dubbele `width` in `.sidebar .nav-item .nav-link` binnen de 768px-mediaquery. De
       tweede (14rem) wint, de eerste (100%) is inderdaad dood - maar het is upstream-code en de
       verwijdering zou bij de eerstvolgende theme-update terugkomen.
   De juiste hendel voor deze vier is dus NIET dit bestand. Twee opties, in deze volgorde: markeer ze
   in SonarCloud als "Won't Fix" met deze reden, of - structureel - trek de ISTA-eigen CSS uit dit
   bestand naar een eigen bestand en zet het vendored deel op sonar.exclusions in .gitlab-ci.yml,
   naast de bestaande regel voor wwwroot/lib (let op: een glob met sterretje-slash kan hier niet in
   een CSS-comment, die sluit het commentaar). Zolang eigen en geleende CSS in één bestand
   staan, kan zo'n uitsluiting niet zonder ook de eigen regels blind te maken.
   AANNAME (niet geverifieerd tegen upstream, want er staat in dit repo geen ongewijzigde kopie van
   sb-admin-2.css en dit bestand heeft maar één commit): dat die vier blokken letterlijk upstream
   zijn. De onderbouwing is structureel - selectors, waarden en buurregels zijn onveranderd
   theme-CSS zonder Nederlands commentaar in de buurt. */
:root {
    --istaColorOffWhite: #F4F7F9;
    --istaColorPeriod1: #0071FF;
    --istaColorPeriod2: #00003C;
    --istaColorPeriod1Light: rgba(0, 113, 255, 0.05);
    --istaColorPeriod2Light: rgba(0, 0, 60, 0.05);
    --istaColorSidebarBack: #FFFFFF;
    --istaColorOceanBlue: #00003C;
    --istaColorSkyBlue: #0071FF;
    --istaDarkGray: #C3C6D0;
    --istaGray: #e3e6f0;
    --istaLime: #1beb83;
    --blue: #0a2864;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #e74a3b;
    --orange: #fd7e14;
    --yellow: #f6c23e;
    --green: #1cc88a;
    --teal: #20c9a6;
    --cyan: #36b9cc;
    --white: #fff;
    --gray: #858796;
    --gray-dark: #5a5c69;
    --primary: #4e73df;
    --secondary: #858796;
    --success: #1cc88a;
    --info: #36b9cc;
    --warning: #f6c23e;
    --danger: #e74a3b;
    --light: #f8f9fc;
    --dark: #5a5c69;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --font-family-sans-serif: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

@font-face {
    font-family: 'istaFont';
    src: url('TheSansforIsta-Plain.woff2');
}

/* DE VOLGORDE VAN DEZE TWEE BORDER-REGELS IS DRAGEND, en ze lijken redundant terwijl ze dat niet
   zijn. .searchfield staat in de views ALTIJD samen met .form-control (GEMETEN:
   Views/Debtors/Index.cshtml r50/r55, Views/Properties/Index.cshtml r52/r57/r62). Verderop in dit
   zelfde bestand staat de vendored Bootstrap-regel `.form-control:focus { border-color: #bac8f3 }`,
   en die weegt met specificiteit (0,2,0) zwaarder dan de (0,1,0) van .searchfield. Haal je het
   !important hieronder weg, dan springt de rand van een zoekveld bij focus stil van ista-grijs naar
   Bootstrap-blauw - een verschil dat je alleen ziet als je daadwerkelijk in het veld klikt, dus het
   sneuvelt ongemerkt. Het !important is hier dus geen luiheid maar de enige manier om die
   focuskleur te overrulen zonder in vendored Bootstrap-CSS te snijden.
   De shorthand `border` staat BEWUST BOVEN de longhand `border-color` en niet eronder: een longhand
   die VOOR een shorthand staat wordt door die shorthand platgeslagen, en dat is precies wat
   SonarCloud met css:S4657 meldde. In deze volgorde zet de shorthand breedte en stijl (en reset
   border-image) en zet de longhand daarna alleen de kleur, met !important. De berekende waarden
   zijn identiek aan de oude situatie - het !important won die strijd toch al. Draai je ze om, dan
   komt de Sonar-melding terug; gooi je de longhand weg, dan verlies je de grijze focus-rand. */
.searchfield {
    background-clip: border-box;
    border: 1px solid var(--istaDarkGray);
    border-color: var(--istaDarkGray) !important;
    border-radius: 0.35rem;
    background-color: white;
}

    .searchfield::placeholder {
        color: var(--istaDarkGray) !important;
        opacity: 1;
    }

#table1 tbody tr {
    cursor: pointer;
    transition: background-color 120ms ease-in-out;
}

#table1 tbody tr:hover {
    background-color: rgba(0, 113, 255, 0.08);
}

#table1 tbody tr:hover td {
    background-color: transparent;
}

#table1 tbody tr.debtor-row-selected,
#table1 tbody tr.property-row-selected {
    background-color: var(--istaColorPeriod1Light);
}

#table1 tbody tr.debtor-row-selected td,
#table1 tbody tr.property-row-selected td {
    background-color: transparent;
    color: var(--istaColorPeriod2);
    font-weight: 700;
}

#table1 tbody tr.debtor-row-selected:hover,
#table1 tbody tr.property-row-selected:hover {
    background-color: var(--istaColorPeriod1Light);
}

#table1 tbody tr.debtor-row-selected:hover td,
#table1 tbody tr.property-row-selected:hover td {
    background-color: transparent;
}

/* Dark mode: the light selection background + dark-blue text is unreadable on the
   dark surface. Use a translucent accent tint with the normal light text. */
html[data-theme="dark"] #table1 tbody tr.debtor-row-selected,
html[data-theme="dark"] #table1 tbody tr.property-row-selected,
html[data-theme="dark"] #table1 tbody tr.debtor-row-selected:hover,
html[data-theme="dark"] #table1 tbody tr.property-row-selected:hover {
    background-color: rgba(28, 126, 214, 0.32);
}
html[data-theme="dark"] #table1 tbody tr.debtor-row-selected td,
html[data-theme="dark"] #table1 tbody tr.property-row-selected td {
    color: var(--ista-text);
}

.upload-area {
    border: 2px dashed #007bff;
    border-radius: 5px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
}

.bg-light {
    background-color: #f8f9fa !important;
}



.bg-red {
    background-color: red;
}

.istaOffWhite {
    color: var(--istaColorOffWhite);
}

.istaLime {
    color: var(--istaLime);
}

.logo {
    padding: 16px 0px 0px 0px;
}

.footer-left {
    margin-top: 0px;
    margin-bottom: 2px;
    padding: 4px 0px 4px 18px;
}

.footer-right {
    margin-top: 0px;
    margin-bottom: 2px;
    padding: 4px 18px 4px 0px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-family: 'istaFont', sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.z-index-100 {
    z-index: 100;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}

@media (max-width: 425px) {
    body {
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        background-color: var(--istaColorOffWhite);
        zoom: 75%;
        font-family: 'istaFont', sans-serif;
        min-width: 350px;
    }

    .tableHeaderBlue {
        font-size: 0.8em;
        color: white;
        font-weight: bold;
        background-color: var(--istaColorPeriod2);
    }

    .tableHeaderGreen {
        font-size: 0.8em;
        color: white;
        font-weight: bold;
        background-color: var(--istaColorPeriod1);
    }

    .selectorDescription {
        font-size: 0.8em;
        white-space: nowrap;
    }

    .selectorTableTextLeft {
        text-align: right;
        padding-top: 3px;
        padding-right: 7px;
        padding-left: 10px;
    }
}

@media (min-width: 426px) {
    body {
        margin: 0;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        text-align: left;
        background-color: var(--istaColorOffWhite);
        font-family: 'istaFont', sans-serif;
    }

    .tableHeaderBlue {
        color: white;
        font-weight: bold;
        background-color: var(--istaColorPeriod2);
    }

    .tableHeaderGreen {
        color: white;
        font-weight: bold;
        background-color: var(--istaColorPeriod1);
    }

    .selectorDescription {
        font-size: 1.0em;
        white-space: nowrap;
    }

    .selectorTableTextLeft {
        padding-top: 3px;
        padding-right: 7px;
        padding-left: 40px;
        text-align: right;
    }
}

.dashCardCol1 {
    width: 10%;
    vertical-align: top;
}

.dashCardCol2 {
    width: 50%;
}

.dashCardCol3 {
    text-align: right;
}

.boldAvgChk {
    font-weight: bold;
}

.opacityAvgChk {
    opacity: 0.7;
}

.hidden {
    display: none;
}

.floatDiv {
    width: 100%;
    overflow-x: hidden;
    vertical-align: top;
}

.floatDiv1 {
    width: 25%;
    min-width: 150px;
    float: left;
}

.floatDiv9 {
    width: 9.09091%;
    float: left;
}

.floatDiv45 {
    width: 45.45454%;
    float: left;
    min-width: 220px;
}

.floatDiv50 {
    width: 50%;
    min-width: 300px;
    float: left;
}

.floatDiv54 {
    width: 54.54545%;
    min-width: 220px;
    float: left;
}

.floatDiv2 {
    width: 450px;
    float: left;
    overflow-x: hidden;
}

.valign-top {
    vertical-align: top;
}

.debug {
    max-width: 100%;
    overflow: auto;
    display: inline-block;
}

.istaGreen {
    color: var(--istaColorPeriod1);
}

.istaBlue {
    color: var(--istaColorPeriod2);
}

.weightBold {
    font-weight: bold;
}

.defaultColor {
    color: #858796;
}

.cardTitle {
    font-size: 1.4rem;
    font-weight: bold;
}

.divCenteredContent {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.divCenteredContent2 {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

.hand {
    cursor: pointer;
}

.textBlack {
    color: black;
}

.textWhite {
    color: white;
}

.width-28 {
    width: 28%;
}

.width-30 {
    width: 30%;
}

.width-33 {
    width: 33%;
}

.width-50 {
    width: 50%;
}

.width-100 {
    width: 100%;
}

.width-10px {
    width: 10px;
}

.width-15px {
    width: 15px;
}

.width-25px {
    width: 25px;
}

.width-75px {
    width: 75px;
}

.width-100px {
    width: 100px;
}

.width-125px {
    width: 125px;
}

.width-350px {
    width: 350px;
}

.align-right {
    text-align: right !important;
}

.align-center {
    text-align: center !important;
}

.backGreen {
    background-color: var(--istaColorPeriod1);
}

.backBlue {
    background-color: var(--istaColorPeriod2);
}

.backWhite {
    background-color: #FFFFFF;
}

.backBlack {
    background-color: #000000;
}

.backGray {
    background-color: #9fa2b0;
}

@media (max-width: 400px) {
    .valueTable {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
        zoom: 85%;
    }
}

@media (min-width: 401px) {
    .valueTable {
        width: 100%;
        max-width: 330px;
        margin: 0 auto;
    }
}

.nowrap {
    white-space: nowrap;
}

.color-red {
    color: red;
}

.tableTotal {
    color: #111111;
}

.tableRowAlternator1 {
    color: #111111;
    background-color: #F6F6F6;
    white-space: nowrap;
}

.tableRowAlternator2 {
    color: #111111;
    background-color: #F0F0F0;
    white-space: nowrap;
}

.nobreak {
    white-space: nowrap;
}

.dot {
    width: 20px;
}

.hiddenDetailRow {
    display: none;
}

.showDetailRow {
    display: normal;
}

[tabindex="-1"]:focus:not(:focus-visible) {
    outline: 0 !important;
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    cursor: help;
    border-bottom: 0;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none;
}

address {
    margin-bottom: 1rem;
    font-style: normal;
    line-height: inherit;
}

ol,
ul,
dl {
    margin-top: 0;
    margin-bottom: 1rem;
}

    ol ol,
    ul ul,
    ol ul,
    ul ol {
        margin-bottom: 0;
    }

dt {
    font-weight: 700;
}

dd {
    margin-bottom: .5rem;
    margin-left: 0;
}

blockquote {
    margin: 0 0 1rem;
}

b,
strong {
    font-weight: bolder;
}

small {
    font-size: 80%;
}

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -.25em;
}

sup {
    top: -.5em;
}

a {
    color: #4e73df;
    text-decoration: none;
    background-color: transparent;
}

    a:hover {
        color: #224abe;
        text-decoration: underline;
    }

    a:not([href]) {
        color: inherit;
        text-decoration: none;
    }

        a:not([href]):hover {
            color: inherit;
            text-decoration: none;
        }

pre,
code,
kbd,
samp {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 1em;
}

pre {
    margin-top: 0;
    margin-bottom: 1rem;
    overflow: auto;
    -ms-overflow-style: scrollbar;
}

figure {
    margin: 0 0 1rem;
}

img {
    vertical-align: middle;
    border-style: none;
}

svg {
    overflow: hidden;
    vertical-align: middle;
}

table {
    border-collapse: collapse;
}

caption {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #858796;
    text-align: left;
    caption-side: bottom;
}

th {
    text-align: inherit;
}
/*was 0.5*/
label {
    display: inline-block;
    margin-bottom: 0.25rem;
}

button {
    border-radius: 0;
}

    button:focus {
        outline: 1px dotted;
        outline: 5px auto -webkit-focus-ring-color;
    }

input,
button,
select,
optgroup,
textarea {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button,
input {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

[role="button"] {
    cursor: pointer;
}

select {
    word-wrap: normal;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}

    button:not(:disabled),
    [type="button"]:not(:disabled),
    [type="reset"]:not(:disabled),
    [type="submit"]:not(:disabled) {
        cursor: pointer;
    }

    button::-moz-focus-inner,
    [type="button"]::-moz-focus-inner,
    [type="reset"]::-moz-focus-inner,
    [type="submit"]::-moz-focus-inner {
        padding: 0;
        border-style: none;
    }

input[type="radio"],
input[type="checkbox"] {
    box-sizing: border-box;
    padding: 0;
}

textarea {
    overflow: auto;
    resize: vertical;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin-bottom: .5rem;
    font-size: 1.5rem;
    line-height: inherit;
    color: inherit;
    white-space: normal;
}

progress {
    vertical-align: baseline;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

[type="search"] {
    outline-offset: -2px;
    -webkit-appearance: none;
}

    [type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

::-webkit-file-upload-button {
    font: inherit;
    -webkit-appearance: button;
}

output {
    display: inline-block;
}

summary {
    display: list-item;
    cursor: pointer;
}

template {
    display: none;
}

[hidden] {
    display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin-bottom: 0.5rem;
    font-weight: 400;
    line-height: 1.2;
}

h1, .h1 {
    font-size: 2.5rem;
}

h2, .h2 {
    font-size: 2rem;
}

h3, .h3 {
    font-size: 1.75rem;
}

h4, .h4 {
    font-size: 1.5rem;
}

h5, .h5 {
    font-size: 1.25rem;
}

h6, .h6 {
    font-size: 1rem;
}

.stackContainer {
    position: relative;
}

.stackMember {
    position: absolute;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.display-1 {
    font-size: 6rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-2 {
    font-size: 5.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-3 {
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1.2;
}

.display-4 {
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 1.2;
}

hr {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
    font-size: 80%;
    font-weight: 400;
}

mark,
.mark {
    padding: 0.2em;
    background-color: #fcf8e3;
}

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.list-inline {
    padding-left: 0;
    list-style: none;
}

.list-inline-item {
    display: inline-block;
}

    .list-inline-item:not(:last-child) {
        margin-right: 0.5rem;
    }

.initialism {
    font-size: 90%;
    text-transform: uppercase;
}

.blockquote {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}

.blockquote-footer {
    display: block;
    font-size: 80%;
    color: #858796;
}

    .blockquote-footer::before {
        content: "\2014\00A0";
    }

.img-fluid {
    max-width: 100%;
    height: auto;
}

.img-thumbnail {
    padding: 0.25rem;
    background-color: #fff;
    border: 1px solid #dddfeb;
    border-radius: 0.35rem;
    max-width: 100%;
    height: auto;
}

.figure {
    display: inline-block;
}

.figure-img {
    margin-bottom: 0.5rem;
    line-height: 1;
}

.figure-caption {
    font-size: 90%;
    color: #858796;
}

code {
    font-size: 87.5%;
    color: #e83e8c;
    word-wrap: break-word;
}

a > code {
    color: inherit;
}

kbd {
    padding: 0.2rem 0.4rem;
    font-size: 87.5%;
    color: #fff;
    background-color: #3a3b45;
    border-radius: 0.2rem;
}

    kbd kbd {
        padding: 0;
        font-size: 100%;
        font-weight: 700;
    }

pre {
    display: block;
    font-size: 87.5%;
    color: #3a3b45;
}

    pre code {
        font-size: inherit;
        color: inherit;
        word-break: normal;
    }

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll;
}
/* was 0.75*/
.container {
    width: 100%;
    padding-right: 0.50rem;
    padding-left: 0.50rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}
/* was 0.75*/
.container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    width: 100%;
    padding-right: 0.50rem;
    padding-left: 0.50rem;
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 576px) {
    .loginLeftCardTopPadding {
        display: none;
    }
}

@media (min-width: 576px) {
    .container, .container-sm {
        max-width: 540px;
    }

    .loginLeftCardMargin {
        display: block;
    }
}

@media (min-width: 768px) {
    .container, .container-sm, .container-md {
        max-width: 720px;
    }

    .loginLeftCardMargin {
        display: block;
    }
}

@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg {
        max-width: 960px;
    }

    .loginLeftCardMargin {
        display: block;
        padding: 55px 10px 10px 10px;
    }
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1140px;
    }

    .loginLeftCardMargin {
        display: block;
        padding: 55px 10px 10px 10px;
    }
}

/* was -0.75*/
.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.50rem;
    margin-left: -0.50rem;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

    .no-gutters > .col,
    .no-gutters > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
    }
/* was 0.75*/
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 0.50rem;
    padding-left: 0.50rem;
}

.col {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100%;
}

.row-cols-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
}

.row-cols-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
}

.row-cols-3 > * {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

.row-cols-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
}

.row-cols-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
}

.row-cols-6 > * {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}

.col-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}

.col-1 {
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
}

.col-2 {
    flex: 0 0 16.66667%;
    max-width: 16.66667%;
}

.col-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-4 {
    flex: 0 0 33.33333%;
    max-width: 33.33333%;
}

.col-5 {
    flex: 0 0 41.66667%;
    max-width: 41.66667%;
}

.col-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-7 {
    flex: 0 0 58.33333%;
    max-width: 58.33333%;
}

.col-8 {
    flex: 0 0 66.66667%;
    max-width: 66.66667%;
}

.col-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-10 {
    flex: 0 0 83.33333%;
    max-width: 83.33333%;
}

.col-11 {
    flex: 0 0 91.66667%;
    max-width: 91.66667%;
}

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.order-first {
    order: -1;
}

.order-last {
    order: 13;
}

.order-0 {
    order: 0;
}

.order-1 {
    order: 1;
}

.order-2 {
    order: 2;
}

.order-3 {
    order: 3;
}

.order-4 {
    order: 4;
}

.order-5 {
    order: 5;
}

.order-6 {
    order: 6;
}

.order-7 {
    order: 7;
}

.order-8 {
    order: 8;
}

.order-9 {
    order: 9;
}

.order-10 {
    order: 10;
}

.order-11 {
    order: 11;
}

.order-12 {
    order: 12;
}

.offset-1 {
    margin-left: 8.33333%;
}

.offset-2 {
    margin-left: 16.66667%;
}

.offset-3 {
    margin-left: 25%;
}

.offset-4 {
    margin-left: 33.33333%;
}

.offset-5 {
    margin-left: 41.66667%;
}

.offset-6 {
    margin-left: 50%;
}

.offset-7 {
    margin-left: 58.33333%;
}

.offset-8 {
    margin-left: 66.66667%;
}

.offset-9 {
    margin-left: 75%;
}

.offset-10 {
    margin-left: 83.33333%;
}

.offset-11 {
    margin-left: 91.66667%;
}

@media (min-width: 576px) {
    .col-sm {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .row-cols-sm-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-sm-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-sm-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .row-cols-sm-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-sm-5 > * {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-sm-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-sm-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .col-sm-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-sm-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .col-sm-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .col-sm-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .col-sm-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .col-sm-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .col-sm-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-sm-first {
        order: -1;
    }

    .order-sm-last {
        order: 13;
    }

    .order-sm-0 {
        order: 0;
    }

    .order-sm-1 {
        order: 1;
    }

    .order-sm-2 {
        order: 2;
    }

    .order-sm-3 {
        order: 3;
    }

    .order-sm-4 {
        order: 4;
    }

    .order-sm-5 {
        order: 5;
    }

    .order-sm-6 {
        order: 6;
    }

    .order-sm-7 {
        order: 7;
    }

    .order-sm-8 {
        order: 8;
    }

    .order-sm-9 {
        order: 9;
    }

    .order-sm-10 {
        order: 10;
    }

    .order-sm-11 {
        order: 11;
    }

    .order-sm-12 {
        order: 12;
    }

    .offset-sm-0 {
        margin-left: 0;
    }

    .offset-sm-1 {
        margin-left: 8.33333%;
    }

    .offset-sm-2 {
        margin-left: 16.66667%;
    }

    .offset-sm-3 {
        margin-left: 25%;
    }

    .offset-sm-4 {
        margin-left: 33.33333%;
    }

    .offset-sm-5 {
        margin-left: 41.66667%;
    }

    .offset-sm-6 {
        margin-left: 50%;
    }

    .offset-sm-7 {
        margin-left: 58.33333%;
    }

    .offset-sm-8 {
        margin-left: 66.66667%;
    }

    .offset-sm-9 {
        margin-left: 75%;
    }

    .offset-sm-10 {
        margin-left: 83.33333%;
    }

    .offset-sm-11 {
        margin-left: 91.66667%;
    }
}

@media (min-width: 768px) {
    .col-md {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .row-cols-md-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-md-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-md-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .row-cols-md-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-md-5 > * {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-md-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-md-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .col-md-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-md-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .col-md-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .col-md-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .col-md-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .col-md-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-md-first {
        order: -1;
    }

    .order-md-last {
        order: 13;
    }

    .order-md-0 {
        order: 0;
    }

    .order-md-1 {
        order: 1;
    }

    .order-md-2 {
        order: 2;
    }

    .order-md-3 {
        order: 3;
    }

    .order-md-4 {
        order: 4;
    }

    .order-md-5 {
        order: 5;
    }

    .order-md-6 {
        order: 6;
    }

    .order-md-7 {
        order: 7;
    }

    .order-md-8 {
        order: 8;
    }

    .order-md-9 {
        order: 9;
    }

    .order-md-10 {
        order: 10;
    }

    .order-md-11 {
        order: 11;
    }

    .order-md-12 {
        order: 12;
    }

    .offset-md-0 {
        margin-left: 0;
    }

    .offset-md-1 {
        margin-left: 8.33333%;
    }

    .offset-md-2 {
        margin-left: 16.66667%;
    }

    .offset-md-3 {
        margin-left: 25%;
    }

    .offset-md-4 {
        margin-left: 33.33333%;
    }

    .offset-md-5 {
        margin-left: 41.66667%;
    }

    .offset-md-6 {
        margin-left: 50%;
    }

    .offset-md-7 {
        margin-left: 58.33333%;
    }

    .offset-md-8 {
        margin-left: 66.66667%;
    }

    .offset-md-9 {
        margin-left: 75%;
    }

    .offset-md-10 {
        margin-left: 83.33333%;
    }

    .offset-md-11 {
        margin-left: 91.66667%;
    }
}

@media (min-width: 992px) {
    .col-lg {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .row-cols-lg-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-lg-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-lg-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .row-cols-lg-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-lg-5 > * {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-lg-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-lg-1 {
        flex: 0 0 4.09091%;
        max-width: 3.09091%;
    }

    .col-lg-2 {
        flex: 0 0 18.18182%;
        max-width: 18.18182%;
    }

    .col-lg-3 {
        flex: 0 0 27.27273%;
        max-width: 27.27273%;
    }

    .col-lg-4 {
        flex: 0 0 36.36364%;
        max-width: 36.36364%;
    }

    .col-lg-5 {
        flex: 0 0 48.45454%;
        max-width: 48.45454%;
    }

    .col-lg-6 {
        flex: 0 0 54.54545%;
        max-width: 54.54545%;
    }

    .col-lg-7 {
        flex: 0 0 63.63636%;
        max-width: 63.63636%;
    }

    .col-lg-8 {
        flex: 0 0 72.72727%;
        max-width: 72.72727%;
    }

    .col-lg-9 {
        flex: 0 0 81.81818%;
        max-width: 81.81818%;
    }

    .col-lg-10 {
        flex: 0 0 90.90909%;
        max-width: 90.90909%;
    }

    .col-lg-11 {
        flex: 0 0 100%;
        max-width: 100%;
    }


    .order-lg-first {
        order: -1;
    }

    .order-lg-last {
        order: 13;
    }

    .order-lg-0 {
        order: 0;
    }

    .order-lg-1 {
        order: 1;
    }

    .order-lg-2 {
        order: 2;
    }

    .order-lg-3 {
        order: 3;
    }

    .order-lg-4 {
        order: 4;
    }

    .order-lg-5 {
        order: 5;
    }

    .order-lg-6 {
        order: 6;
    }

    .order-lg-7 {
        order: 7;
    }

    .order-lg-8 {
        order: 8;
    }

    .order-lg-9 {
        order: 9;
    }

    .order-lg-10 {
        order: 10;
    }

    .order-lg-11 {
        order: 11;
    }

    .order-lg-12 {
        order: 12;
    }

    .offset-lg-0 {
        margin-left: 0;
    }

    .offset-lg-1 {
        margin-left: 8.33333%;
    }

    .offset-lg-2 {
        margin-left: 16.66667%;
    }

    .offset-lg-3 {
        margin-left: 25%;
    }

    .offset-lg-4 {
        margin-left: 33.33333%;
    }

    .offset-lg-5 {
        margin-left: 41.66667%;
    }

    .offset-lg-6 {
        margin-left: 50%;
    }

    .offset-lg-7 {
        margin-left: 58.33333%;
    }

    .offset-lg-8 {
        margin-left: 66.66667%;
    }

    .offset-lg-9 {
        margin-left: 75%;
    }

    .offset-lg-10 {
        margin-left: 83.33333%;
    }

    .offset-lg-11 {
        margin-left: 91.66667%;
    }
}

@media (min-width: 1200px) {
    .col-xl {
        flex-basis: 0;
        flex-grow: 1;
        min-width: 0;
        max-width: 100%;
    }

    .row-cols-xl-1 > * {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .row-cols-xl-2 > * {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .row-cols-xl-3 > * {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .row-cols-xl-4 > * {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .row-cols-xl-5 > * {
        flex: 0 0 20%;
        max-width: 20%;
    }

    .row-cols-xl-6 > * {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    .col-xl-1 {
        flex: 0 0 8.33333%;
        max-width: 8.33333%;
    }

    .col-xl-2 {
        flex: 0 0 16.66667%;
        max-width: 16.66667%;
    }

    .col-xl-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xl-4 {
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }

    .col-xl-5 {
        flex: 0 0 41.66667%;
        max-width: 41.66667%;
    }

    .col-xl-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xl-7 {
        flex: 0 0 58.33333%;
        max-width: 58.33333%;
    }

    .col-xl-8 {
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }

    .col-xl-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xl-10 {
        flex: 0 0 83.33333%;
        max-width: 83.33333%;
    }

    .col-xl-11 {
        flex: 0 0 91.66667%;
        max-width: 91.66667%;
    }

    .col-xl-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .order-xl-first {
        order: -1;
    }

    .order-xl-last {
        order: 13;
    }

    .order-xl-0 {
        order: 0;
    }

    .order-xl-1 {
        order: 1;
    }

    .order-xl-2 {
        order: 2;
    }

    .order-xl-3 {
        order: 3;
    }

    .order-xl-4 {
        order: 4;
    }

    .order-xl-5 {
        order: 5;
    }

    .order-xl-6 {
        order: 6;
    }

    .order-xl-7 {
        order: 7;
    }

    .order-xl-8 {
        order: 8;
    }

    .order-xl-9 {
        order: 9;
    }

    .order-xl-10 {
        order: 10;
    }

    .order-xl-11 {
        order: 11;
    }

    .order-xl-12 {
        order: 12;
    }

    .offset-xl-0 {
        margin-left: 0;
    }

    .offset-xl-1 {
        margin-left: 8.33333%;
    }

    .offset-xl-2 {
        margin-left: 16.66667%;
    }

    .offset-xl-3 {
        margin-left: 25%;
    }

    .offset-xl-4 {
        margin-left: 33.33333%;
    }

    .offset-xl-5 {
        margin-left: 41.66667%;
    }

    .offset-xl-6 {
        margin-left: 50%;
    }

    .offset-xl-7 {
        margin-left: 58.33333%;
    }

    .offset-xl-8 {
        margin-left: 66.66667%;
    }

    .offset-xl-9 {
        margin-left: 75%;
    }

    .offset-xl-10 {
        margin-left: 83.33333%;
    }

    .offset-xl-11 {
        margin-left: 91.66667%;
    }
}

.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #858796;
}

    .table th,
    .table td {
        padding: 0.75rem;
        vertical-align: top;
        border-top: 1px solid var(--istaGray);
    }

    .table thead th {
        vertical-align: bottom;
        border-bottom: 2px solid var(--istaGray);
    }

    .table tbody + tbody {
        border-top: 2px solid var(--istaGray);
    }

.table-sm th,
.table-sm td {
    padding: 0.3rem;
}

.table-bordered {
    border: 1px solid var(--istaGray);
}

    .table-bordered th,
    .table-bordered td {
        border: 1px solid var(--istaGray);
    }

    .table-bordered thead th,
    .table-bordered thead td {
        border-bottom-width: 2px;
    }

.table-borderless th,
.table-borderless td,
.table-borderless thead th,
.table-borderless tbody + tbody {
    border: 0;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
    color: #858796;
    background-color: rgba(0, 0, 0, 0.075);
}

.table-primary,
.table-primary > th,
.table-primary > td {
    background-color: #cdd8f6;
}

    .table-primary th,
    .table-primary td,
    .table-primary thead th,
    .table-primary tbody + tbody {
        border-color: #a3b6ee;
    }

.table-hover .table-primary:hover {
    background-color: #b7c7f2;
}

    .table-hover .table-primary:hover > td,
    .table-hover .table-primary:hover > th {
        background-color: #b7c7f2;
    }

.table-secondary,
.table-secondary > th,
.table-secondary > td {
    background-color: #dddde2;
}

    .table-secondary th,
    .table-secondary td,
    .table-secondary thead th,
    .table-secondary tbody + tbody {
        border-color: #c0c1c8;
    }

.table-hover .table-secondary:hover {
    background-color: #cfcfd6;
}

    .table-hover .table-secondary:hover > td,
    .table-hover .table-secondary:hover > th {
        background-color: #cfcfd6;
    }

.table-success,
.table-success > th,
.table-success > td {
    background-color: #bff0de;
}

    .table-success th,
    .table-success td,
    .table-success thead th,
    .table-success tbody + tbody {
        border-color: #89e2c2;
    }

.table-hover .table-success:hover {
    background-color: #aaebd3;
}

    .table-hover .table-success:hover > td,
    .table-hover .table-success:hover > th {
        background-color: #aaebd3;
    }

.table-info,
.table-info > th,
.table-info > td {
    background-color: #c7ebf1;
}

    .table-info th,
    .table-info td,
    .table-info thead th,
    .table-info tbody + tbody {
        border-color: #96dbe4;
    }

.table-hover .table-info:hover {
    background-color: #b3e4ec;
}

    .table-hover .table-info:hover > td,
    .table-hover .table-info:hover > th {
        background-color: #b3e4ec;
    }

.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: #fceec9;
}

    .table-warning th,
    .table-warning td,
    .table-warning thead th,
    .table-warning tbody + tbody {
        border-color: #fadf9b;
    }

.table-hover .table-warning:hover {
    background-color: #fbe6b1;
}

    .table-hover .table-warning:hover > td,
    .table-hover .table-warning:hover > th {
        background-color: #fbe6b1;
    }

.table-danger,
.table-danger > th,
.table-danger > td {
    background-color: #f8ccc8;
}

    .table-danger th,
    .table-danger td,
    .table-danger thead th,
    .table-danger tbody + tbody {
        border-color: #f3a199;
    }

.table-hover .table-danger:hover {
    background-color: #f5b7b1;
}

    .table-hover .table-danger:hover > td,
    .table-hover .table-danger:hover > th {
        background-color: #f5b7b1;
    }

.table-light,
.table-light > th,
.table-light > td {
    background-color: #fdfdfe;
}

    .table-light th,
    .table-light td,
    .table-light thead th,
    .table-light tbody + tbody {
        border-color: #fbfcfd;
    }

.table-hover .table-light:hover {
    background-color: #ececf6;
}

    .table-hover .table-light:hover > td,
    .table-hover .table-light:hover > th {
        background-color: #ececf6;
    }

.table-dark,
.table-dark > th,
.table-dark > td {
    background-color: #d1d1d5;
}

    .table-dark th,
    .table-dark td,
    .table-dark thead th,
    .table-dark tbody + tbody {
        border-color: #a9aab1;
    }

.table-hover .table-dark:hover {
    background-color: #c4c4c9;
}

    .table-hover .table-dark:hover > td,
    .table-hover .table-dark:hover > th {
        background-color: #c4c4c9;
    }

.table-active,
.table-active > th,
.table-active > td {
    background-color: rgba(0, 0, 0, 0.075);
}

.table-hover .table-active:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

    .table-hover .table-active:hover > td,
    .table-hover .table-active:hover > th {
        background-color: rgba(0, 0, 0, 0.075);
    }

.table .thead-dark th {
    color: #fff;
    background-color: #5a5c69;
    border-color: #6c6e7e;
}

.table .thead-light th {
    /* Was #6e707e op #eaecf4: 4,16:1, net onder de 4,5:1 van WCAG 2.2 1.4.3.
       #5a5c69 is de bestaande sb-admin gray-dark (--gray-dark) en haalt 5,62:1.
       Gemeten met scripts/check-contrast.mjs. */
    color: #5a5c69;
    background-color: #eaecf4;
    border-color: var(--istaGray);
}

.table-dark {
    color: #fff;
    background-color: #5a5c69;
}

    .table-dark th,
    .table-dark td,
    .table-dark thead th {
        border-color: #6c6e7e;
    }

    .table-dark.table-bordered {
        border: 0;
    }

    .table-dark.table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(255, 255, 255, 0.05);
    }

@media (max-width: 575.98px) {
    .table-responsive-sm {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-responsive-sm > .table-bordered {
            border: 0;
        }
}

@media (max-width: 767.98px) {
    .table-responsive-md {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-responsive-md > .table-bordered {
            border: 0;
        }
}

@media (max-width: 991.98px) {
    .table-responsive-lg {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-responsive-lg > .table-bordered {
            border: 0;
        }
}

@media (max-width: 1199.98px) {
    .table-responsive-xl {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

        .table-responsive-xl > .table-bordered {
            border: 0;
        }
}

.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

    .table-responsive > .table-bordered {
        border: 0;
    }

.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}

.form-control::-ms-expand {
    background-color: transparent;
    border: 0;
}

.form-control:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #6e707e;
}

.form-control:focus {
    color: #6e707e;
    background-color: #fff;
    border-color: #bac8f3;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.form-control::-webkit-input-placeholder {
    color: #858796;
    opacity: 1;
}

.form-control::-moz-placeholder {
    color: #858796;
    opacity: 1;
}

.form-control:-ms-input-placeholder {
    color: #858796;
    opacity: 1;
}

.form-control::-ms-input-placeholder {
    color: #858796;
    opacity: 1;
}

.form-control::placeholder {
    color: #858796;
    opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
    background-color: #eaecf4;
    opacity: 1;
}

input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control,
input[type="month"].form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.form-control:focus::-ms-value {
    color: #6e707e;
    background-color: #fff;
}

.form-control-file,
.form-control-range {
    display: block;
    width: 100%;
}

.col-form-label {
    padding-top: calc(0.375rem + 1px);
    padding-bottom: calc(0.375rem + 1px);
    margin-bottom: 0;
    font-size: inherit;
    line-height: 1.5;
}

.col-form-label-lg {
    padding-top: calc(0.5rem + 1px);
    padding-bottom: calc(0.5rem + 1px);
    font-size: 1.25rem;
    line-height: 1.5;
}

.col-form-label-sm {
    padding-top: calc(0.25rem + 1px);
    padding-bottom: calc(0.25rem + 1px);
    font-size: 0.875rem;
    line-height: 1.5;
}

.form-control-plaintext {
    display: block;
    width: 100%;
    padding: 0.375rem 0;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #858796;
    background-color: transparent;
    border: solid transparent;
    border-width: 1px 0;
}

    .form-control-plaintext.form-control-sm, .form-control-plaintext.form-control-lg {
        padding-right: 0;
        padding-left: 0;
    }

.form-control-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}
/*Pwas 0.5 en 1*/
.form-control-lg {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

select.form-control[size], select.form-control[multiple] {
    height: auto;
}

textarea.form-control {
    height: auto;
}
/*was 1*/
.form-group {
    margin-bottom: 0.25rem;
}

.form-text {
    display: block;
    margin-top: 0.25rem;
}

.form-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -5px;
    margin-left: -5px;
}

    .form-row > .col,
    .form-row > [class*="col-"] {
        padding-right: 5px;
        padding-left: 5px;
    }

.form-check {
    position: relative;
    display: block;
    padding-left: 0rem;
    padding-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

.selectorTable {
    border: 0px;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}

.selectorTableText {
    padding-top: 3px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: center;
}

.selectorTableTextRight {
    padding-top: 3px;
    padding-left: 7px;
    padding-right: 7px;
    text-align: left;
}

.selectorTableCell1 {
    width: 75px;
}

.selectorDescText {
    padding-top: 3px;
}

.form-switch .form-check-input {
    position: static;
    margin-top: 0rem;
    margin-left: 0rem;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e");
}

    .form-switch .form-check-input:focus {
        border-color: transparent;
        box-shadow: none;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.5%29'/%3e%3c/svg%3e");
    }

    .form-switch .form-check-input:checked {
        background-color: #fff;
        border-color: #fff;
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 1%29'/%3e%3c/svg%3e");
    }

.form-check-input[disabled] ~ .form-check-label,
.form-check-input:disabled ~ .form-check-label {
    color: #858796;
}

.form-check-label {
    margin-bottom: 0;
}

.form-check-inline {
    display: inline-flex;
    align-items: center;
    padding-left: 0;
    margin-right: 0.75rem;
}

    .form-check-inline .form-check-input {
        position: static;
        margin-top: 0;
        margin-right: 0.3125rem;
        margin-left: 0;
    }

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #1cc88a;
}

.was-validated :valid ~ .valid-feedback,
.was-validated :valid ~ .valid-tooltip,
.is-valid ~ .valid-feedback,
.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .form-control:valid, .form-control.is-valid {
    border-color: #1cc88a;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .form-control:valid:focus, .form-control.is-valid:focus {
        border-color: #1cc88a;
        box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    }

.was-validated textarea.form-control:valid, textarea.form-control.is-valid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:valid, .custom-select.is-valid {
    border-color: #1cc88a;
    padding-right: calc(0.75em + 2.3125rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%231cc88a' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .custom-select:valid:focus, .custom-select.is-valid:focus {
        border-color: #1cc88a;
        box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
    }

.was-validated .form-check-input:valid ~ .form-check-label, .form-check-input.is-valid ~ .form-check-label {
    color: #1cc88a;
}

.was-validated .form-check-input:valid ~ .valid-feedback,
.was-validated .form-check-input:valid ~ .valid-tooltip, .form-check-input.is-valid ~ .valid-feedback,
.form-check-input.is-valid ~ .valid-tooltip {
    display: block;
}

.was-validated .custom-control-input:valid ~ .custom-control-label, .custom-control-input.is-valid ~ .custom-control-label {
    color: #1cc88a;
}

    .was-validated .custom-control-input:valid ~ .custom-control-label::before, .custom-control-input.is-valid ~ .custom-control-label::before {
        border-color: #1cc88a;
    }

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before, .custom-control-input.is-valid:checked ~ .custom-control-label::before {
    border-color: #34e3a4;
    background-color: #34e3a4;
}

.was-validated .custom-control-input:valid:focus ~ .custom-control-label::before, .custom-control-input.is-valid:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.was-validated .custom-control-input:valid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-valid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #1cc88a;
}

.was-validated .custom-file-input:valid ~ .custom-file-label, .custom-file-input.is-valid ~ .custom-file-label {
    border-color: #1cc88a;
}

.was-validated .custom-file-input:valid:focus ~ .custom-file-label, .custom-file-input.is-valid:focus ~ .custom-file-label {
    border-color: #1cc88a;
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.25);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #e74a3b;
}

.was-validated :invalid ~ .invalid-feedback,
.was-validated :invalid ~ .invalid-tooltip,
.is-invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .form-control:invalid, .form-control.is-invalid {
    border-color: #e74a3b;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74a3b' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus {
        border-color: #e74a3b;
        box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    }

.was-validated textarea.form-control:invalid, textarea.form-control.is-invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
}

.was-validated .custom-select:invalid, .custom-select.is-invalid {
    border-color: #e74a3b;
    padding-right: calc(0.75em + 2.3125rem);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px, url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23e74a3b' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23e74a3b' stroke='none'/%3e%3c/svg%3e") #fff no-repeat center right 1.75rem/calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

    .was-validated .custom-select:invalid:focus, .custom-select.is-invalid:focus {
        border-color: #e74a3b;
        box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
    }

.was-validated .form-check-input:invalid ~ .form-check-label, .form-check-input.is-invalid ~ .form-check-label {
    color: #e74a3b;
}

.was-validated .form-check-input:invalid ~ .invalid-feedback,
.was-validated .form-check-input:invalid ~ .invalid-tooltip, .form-check-input.is-invalid ~ .invalid-feedback,
.form-check-input.is-invalid ~ .invalid-tooltip {
    display: block;
}

.was-validated .custom-control-input:invalid ~ .custom-control-label, .custom-control-input.is-invalid ~ .custom-control-label {
    color: #e74a3b;
}

    .was-validated .custom-control-input:invalid ~ .custom-control-label::before, .custom-control-input.is-invalid ~ .custom-control-label::before {
        border-color: #e74a3b;
    }

.was-validated .custom-control-input:invalid:checked ~ .custom-control-label::before, .custom-control-input.is-invalid:checked ~ .custom-control-label::before {
    border-color: #ed7468;
    background-color: #ed7468;
}

.was-validated .custom-control-input:invalid:focus ~ .custom-control-label::before, .custom-control-input.is-invalid:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.was-validated .custom-control-input:invalid:focus:not(:checked) ~ .custom-control-label::before, .custom-control-input.is-invalid:focus:not(:checked) ~ .custom-control-label::before {
    border-color: #e74a3b;
}

.was-validated .custom-file-input:invalid ~ .custom-file-label, .custom-file-input.is-invalid ~ .custom-file-label {
    border-color: #e74a3b;
}

.was-validated .custom-file-input:invalid:focus ~ .custom-file-label, .custom-file-input.is-invalid:focus ~ .custom-file-label {
    border-color: #e74a3b;
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.25);
}

.form-inline {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

    .form-inline .form-check {
        width: 100%;
    }

@media (min-width: 576px) {
    .form-inline label {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
    }

    .form-inline .form-group {
        display: flex;
        flex: 0 0 auto;
        flex-flow: row wrap;
        align-items: center;
        margin-bottom: 0;
    }

    .form-inline .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    .form-inline .form-control-plaintext {
        display: inline-block;
    }

    .form-inline .input-group,
    .form-inline .custom-select {
        width: auto;
    }

    .form-inline .form-check {
        display: flex;
        align-items: center;
        justify-content: center;
        width: auto;
        padding-left: 0;
    }

    .form-inline .form-check-input {
        position: relative;
        flex-shrink: 0;
        margin-top: 0;
        margin-right: 0.25rem;
        margin-left: 0;
    }

    .form-inline .custom-control {
        align-items: center;
        justify-content: center;
    }

    .form-inline .custom-control-label {
        margin-bottom: 0;
    }
}

.btn {
    display: inline-block;
    font-weight: 400;
    color: #858796;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.35rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn2 {
    display: inline-block;
    font-weight: 400;
    color: #858796;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.35rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}


@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }
}

.btn:hover {
    color: #858796;
    text-decoration: none;
}

.btn:focus, .btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
}

.btn.disabled, .btn:disabled {
    opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
    pointer-events: none;
}

.btn-uploadmain {
    width: 125px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.btn-primary {
    color: #fff;
    background-color: #0071F0;
    border-color: #0071F0;
}

.btn-gray {
    color: #FFFFFF;
    background-color: #00003C;
    border-color: #00003C;
}

.btn-primaryOld {
    color: #fff;
    background-color: var(--istaColorPeriod1);
    border-color: #0071F0;
}

.btn-primary:hover {
    color: #fff;
    background-color: #2e59d9;
    border-color: #0071F0;
}

.btn-primary:focus, .btn-primary.focus {
    color: #fff;
    background-color: #2e59d9;
    border-color: #0071F0;
    box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: #4e73df;
    border-color: #4e73df;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0071F0;
    border-color: #244ec9;
}

    .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
    .show > .btn-primary.dropdown-toggle:focus {
        box-shadow: 0 0 0 0.2rem rgba(105, 136, 228, 0.5);
    }

.btn-secondary {
    color: #fff;
    background-color: #747582;
    border-color: #747582;
}

    .btn-secondary:hover {
        color: #fff;
        background-color: #626473;
        border-color: #5d5f6d;
    }

    .btn-secondary:focus, .btn-secondary.focus {
        color: #fff;
        background-color: #626473;
        border-color: #5d5f6d;
        box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
    }

    .btn-secondary.disabled, .btn-secondary:disabled {
        color: #fff;
        background-color: #858796;
        border-color: #858796;
    }

    .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-secondary.dropdown-toggle {
        color: #fff;
        background-color: #5d5f6d;
        border-color: #585a67;
    }

        .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(151, 153, 166, 0.5);
        }

        .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(62, 208, 156, 0.5);
        }

        .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
        .show > .btn-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(84, 196, 212, 0.5);
        }

        .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
        .show > .btn-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(247, 203, 91, 0.5);
        }

.btn-danger {
    color: #fff;
    background-color: #d24336;
    border-color: #d24336;
}

    .btn-danger:hover {
        color: #fff;
        background-color: #cc2919;
        border-color: #c22618;
    }

    .btn-danger:focus, .btn-danger.focus {
        color: #fff;
        background-color: #cc2919;
        border-color: #c22618;
        box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
    }

    .btn-danger.disabled, .btn-danger:disabled {
        color: #fff;
        background-color: #e74a3b;
        border-color: #e74a3b;
    }

    .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
    .show > .btn-danger.dropdown-toggle {
        color: #fff;
        background-color: #c22618;
        border-color: #b82417;
    }

        .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(235, 101, 88, 0.5);
        }

.btn-light {
    color: #3a3b45;
    background-color: #f8f9fc;
    border-color: #f8f9fc;
}

    .btn-light:hover {
        color: #3a3b45;
        background-color: #dde2f1;
        border-color: #d4daed;
    }

    .btn-light:focus, .btn-light.focus {
        color: #3a3b45;
        background-color: #dde2f1;
        border-color: #d4daed;
        box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
    }

    .btn-light.disabled, .btn-light:disabled {
        color: #3a3b45;
        background-color: #f8f9fc;
        border-color: #f8f9fc;
    }

    .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
    .show > .btn-light.dropdown-toggle {
        color: #3a3b45;
        background-color: #d4daed;
        border-color: #cbd3e9;
    }

        .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(220, 221, 225, 0.5);
        }

.btn-dark {
    color: #fff;
    background-color: #5a5c69;
    border-color: #5a5c69;
}

    .btn-dark:hover {
        color: #fff;
        background-color: #484a54;
        border-color: #42444e;
    }

    .btn-dark:focus, .btn-dark.focus {
        color: #fff;
        background-color: #484a54;
        border-color: #42444e;
        box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
    }

    .btn-dark.disabled, .btn-dark:disabled {
        color: #fff;
        background-color: #5a5c69;
        border-color: #5a5c69;
    }

    .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active,
    .show > .btn-dark.dropdown-toggle {
        color: #fff;
        background-color: #42444e;
        border-color: #3d3e47;
    }

        .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(115, 116, 128, 0.5);
        }

.btn-outline-primary {
    color: #4e73df;
    border-color: #4e73df;
}

    .btn-outline-primary:focus, .btn-outline-primary.focus {
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
    }

    .btn-outline-primary.disabled, .btn-outline-primary:disabled {
        color: #4e73df;
        background-color: transparent;
    }

        .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-primary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
        }

.btn-outline-secondary {
    color: #747582;
    border-color: #747582;
}

    .btn-outline-secondary:hover {
        color: #fff;
        background-color: #747582;
        border-color: #747582;
    }

    .btn-outline-secondary:focus, .btn-outline-secondary.focus {
        box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
    }

    .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
        color: #858796;
        background-color: transparent;
    }

    .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
    .show > .btn-outline-secondary.dropdown-toggle {
        color: #fff;
        background-color: #747582;
        border-color: #747582;
    }

        .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-secondary.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
        }

.btn-outline-success {
    color: #1cc88a;
    border-color: #1cc88a;
}

    .btn-outline-success:focus, .btn-outline-success.focus {
        box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
    }

    .btn-outline-success.disabled, .btn-outline-success:disabled {
        color: #1cc88a;
        background-color: transparent;
    }

        .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-success.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
        }

.btn-outline-info {
    color: #36b9cc;
    border-color: #36b9cc;
}

    .btn-outline-info:focus, .btn-outline-info.focus {
        box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
    }

    .btn-outline-info.disabled, .btn-outline-info:disabled {
        color: #36b9cc;
        background-color: transparent;
    }

        .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-info.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
        }

.btn-outline-warning {
    color: #f6c23e;
    border-color: #f6c23e;
}

    .btn-outline-warning:focus, .btn-outline-warning.focus {
        box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
    }

    .btn-outline-warning.disabled, .btn-outline-warning:disabled {
        color: #f6c23e;
        background-color: transparent;
    }

        .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-warning.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
        }

.btn-outline-danger {
    color: #e74a3b;
    border-color: #e74a3b;
}

    .btn-outline-danger:focus, .btn-outline-danger.focus {
        box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
    }

    .btn-outline-danger.disabled, .btn-outline-danger:disabled {
        color: #e74a3b;
        background-color: transparent;
    }

        .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-danger.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
        }

.btn-outline-light {
    color: #f8f9fc;
    border-color: #f8f9fc;
}

    .btn-outline-light:hover {
        color: #3a3b45;
        background-color: #f8f9fc;
        border-color: #f8f9fc;
    }

    .btn-outline-light:focus, .btn-outline-light.focus {
        box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
    }

    .btn-outline-light.disabled, .btn-outline-light:disabled {
        color: #f8f9fc;
        background-color: transparent;
    }

    .btn-outline-light:not(:disabled):not(.disabled):active, .btn-outline-light:not(:disabled):not(.disabled).active,
    .show > .btn-outline-light.dropdown-toggle {
        color: #3a3b45;
        background-color: #f8f9fc;
        border-color: #f8f9fc;
    }

        .btn-outline-light:not(:disabled):not(.disabled):active:focus, .btn-outline-light:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-light.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
        }

.btn-outline-dark {
    color: #5a5c69;
    border-color: #5a5c69;
}

    .btn-outline-dark:hover {
        color: #fff;
        background-color: #5a5c69;
        border-color: #5a5c69;
    }

    .btn-outline-dark:focus, .btn-outline-dark.focus {
        box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
    }

    .btn-outline-dark.disabled, .btn-outline-dark:disabled {
        color: #5a5c69;
        background-color: transparent;
    }

    .btn-outline-dark:not(:disabled):not(.disabled):active, .btn-outline-dark:not(:disabled):not(.disabled).active,
    .show > .btn-outline-dark.dropdown-toggle {
        color: #fff;
        background-color: #5a5c69;
        border-color: #5a5c69;
    }

        .btn-outline-dark:not(:disabled):not(.disabled):active:focus, .btn-outline-dark:not(:disabled):not(.disabled).active:focus,
        .show > .btn-outline-dark.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
        }

.btn-link {
    font-weight: 400;
    color: #4e73df;
    text-decoration: none;
}

    .btn-link:hover {
        color: #224abe;
        text-decoration: underline;
    }

    .btn-link:focus, .btn-link.focus {
        text-decoration: underline;
    }

    .btn-link:disabled, .btn-link.disabled {
        color: #858796;
        pointer-events: none;
    }

.btn-lg, .btn-group-lg > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.btn-sm, .btn-group-sm > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-block {
    display: block;
    width: 100%;
}

    .btn-block + .btn-block {
        margin-top: 0.5rem;
    }

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

.fade {
    transition: opacity 0.5s linear;
}

@media (prefers-reduced-motion: reduce) {
    .fade {
        transition: none;
    }
}

.fade:not(.show) {
    opacity: 0;
}

.collapse:not(.show) {
    display: none;
}

.collapsing {
    position: relative;
    height: 0;
    overflow: hidden;
    transition: height 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .collapsing {
        transition: none;
    }
}

.dropup,
.dropright,
.dropdown,
.dropleft {
    position: relative;
}

.dropdown-toggle {
    white-space: nowrap;
}

    .dropdown-toggle::after {
        display: inline-block;
        margin-left: 0.255em;
        vertical-align: 0.255em;
        content: "";
        border-top: 0.3em solid;
        border-right: 0.3em solid transparent;
        border-bottom: 0;
        border-left: 0.3em solid transparent;
    }

    .dropdown-toggle:empty::after {
        margin-left: 0;
    }

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 0.85rem;
    /* Was de vaste grijstint #858796: op wit 3,56:1, onder de 4,5:1 van WCAG 2.2
       1.4.3. Zelfde ingreep als bij .text-muted verderop - via de thema-variabele
       (4,69:1), en dan volgt de dropdown meteen het donkere thema. */
    color: var(--ista-text-muted);
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--istaGray);
    border-radius: 0.35rem;
}

.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-menu-right {
    right: 0;
    left: auto;
}

@media (min-width: 576px) {
    .dropdown-menu-sm-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-sm-right {
        right: 0;
        left: auto;
    }
}

@media (min-width: 768px) {
    .dropdown-menu-md-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-md-right {
        right: 0;
        left: auto;
    }
}

@media (min-width: 992px) {
    .dropdown-menu-lg-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-lg-right {
        right: 0;
        left: auto;
    }
}

@media (min-width: 1200px) {
    .dropdown-menu-xl-left {
        right: auto;
        left: 0;
    }

    .dropdown-menu-xl-right {
        right: 0;
        left: auto;
    }
}

.dropup .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.125rem;
}

.dropup .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0;
    border-right: 0.3em solid transparent;
    border-bottom: 0.3em solid;
    border-left: 0.3em solid transparent;
}

.dropup .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropright .dropdown-menu {
    top: 0;
    right: auto;
    left: 100%;
    margin-top: 0;
    margin-left: 0.125rem;
}

.dropright .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0;
    border-bottom: 0.3em solid transparent;
    border-left: 0.3em solid;
}

.dropright .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropleft .dropdown-menu {
    top: 0;
    right: 100%;
    left: auto;
    margin-top: 0;
    margin-right: 0.125rem;
}

.dropleft .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
}

.dropleft .dropdown-toggle::before {
    display: inline-block;
    margin-right: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid transparent;
    border-right: 0.3em solid;
    border-bottom: 0.3em solid transparent;
}

.dropleft .dropdown-toggle:empty::after {
    margin-left: 0;
}

.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
    right: auto;
    bottom: auto;
}

.dropdown-divider {
    height: 0;
    margin: 0.5rem 0;
    overflow: hidden;
    border-top: 1px solid #eaecf4;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #3a3b45;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

    .dropdown-item:hover, .dropdown-item:focus {
        color: #2e2f37;
        text-decoration: none;
        background-color: #f8f9fc;
    }

    .dropdown-item.active, .dropdown-item:active {
        color: #fff;
        text-decoration: none;
        background-color: #4b6fd7;
    }

    .dropdown-item.disabled, .dropdown-item:disabled {
        color: #858796;
        pointer-events: none;
        background-color: transparent;
    }

.dropdown-menu.show {
    display: block;
}

.dropdown-header {
    display: block;
    padding: 0.5rem 1.5rem;
    margin-bottom: 0;
    font-size: 0.875rem;
    color: #858796;
    white-space: nowrap;
}

.dropdown-item-text {
    display: block;
    padding: 0.25rem 1.5rem;
    color: #3a3b45;
}

.btn-group,
.btn-group-vertical {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
}

    .btn-group > .btn,
    .btn-group-vertical > .btn {
        position: relative;
        flex: 1 1 auto;
    }

        .btn-group > .btn:hover,
        .btn-group-vertical > .btn:hover {
            z-index: 1;
        }

        .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active,
        .btn-group-vertical > .btn:focus,
        .btn-group-vertical > .btn:active,
        .btn-group-vertical > .btn.active {
            z-index: 1;
        }

.btn-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

    .btn-toolbar .input-group {
        width: auto;
    }

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) {
    margin-left: -1px;
}

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.dropdown-toggle-split {
    padding-right: 0.5625rem;
    padding-left: 0.5625rem;
}

    .dropdown-toggle-split::after,
    .dropup .dropdown-toggle-split::after,
    .dropright .dropdown-toggle-split::after {
        margin-left: 0;
    }

.dropleft .dropdown-toggle-split::before {
    margin-right: 0;
}

.btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
    padding-right: 0.375rem;
    padding-left: 0.375rem;
}

.btn-lg + .dropdown-toggle-split, .btn-group-lg > .btn + .dropdown-toggle-split {
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.btn-group-vertical {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

    .btn-group-vertical > .btn,
    .btn-group-vertical > .btn-group {
        width: 100%;
    }

        .btn-group-vertical > .btn:not(:first-child),
        .btn-group-vertical > .btn-group:not(:first-child) {
            margin-top: -1px;
        }

        .btn-group-vertical > .btn:not(:last-child):not(.dropdown-toggle),
        .btn-group-vertical > .btn-group:not(:last-child) > .btn {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        .btn-group-vertical > .btn:not(:first-child),
        .btn-group-vertical > .btn-group:not(:first-child) > .btn {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }

.btn-group-toggle > .btn,
.btn-group-toggle > .btn-group > .btn {
    margin-bottom: 0;
}

    .btn-group-toggle > .btn input[type="radio"],
    .btn-group-toggle > .btn input[type="checkbox"],
    .btn-group-toggle > .btn-group > .btn input[type="radio"],
    .btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        pointer-events: none;
    }

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%;
}

    .input-group > .form-control,
    .input-group > .form-control-plaintext,
    .input-group > .custom-select,
    .input-group > .custom-file {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        margin-bottom: 0;
    }

        .input-group > .form-control + .form-control,
        .input-group > .form-control + .custom-select,
        .input-group > .form-control + .custom-file,
        .input-group > .form-control-plaintext + .form-control,
        .input-group > .form-control-plaintext + .custom-select,
        .input-group > .form-control-plaintext + .custom-file,
        .input-group > .custom-select + .form-control,
        .input-group > .custom-select + .custom-select,
        .input-group > .custom-select + .custom-file,
        .input-group > .custom-file + .form-control,
        .input-group > .custom-file + .custom-select,
        .input-group > .custom-file + .custom-file {
            margin-left: -1px;
        }

        .input-group > .form-control:focus,
        .input-group > .custom-select:focus,
        .input-group > .custom-file .custom-file-input:focus ~ .custom-file-label {
            z-index: 3;
        }

        .input-group > .custom-file .custom-file-input:focus {
            z-index: 4;
        }

        .input-group > .form-control:not(:last-child),
        .input-group > .custom-select:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .input-group > .form-control:not(:first-child),
        .input-group > .custom-select:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

    .input-group > .custom-file {
        display: flex;
        align-items: center;
    }

        .input-group > .custom-file:not(:last-child) .custom-file-label,
        .input-group > .custom-file:not(:last-child) .custom-file-label::after {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

        .input-group > .custom-file:not(:first-child) .custom-file-label {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

.input-group-prepend,
.input-group-append {
    display: flex;
}

    .input-group-prepend .btn,
    .input-group-append .btn {
        position: relative;
        z-index: 2;
    }

        .input-group-prepend .btn:focus,
        .input-group-append .btn:focus {
            z-index: 3;
        }

        .input-group-prepend .btn + .btn,
        .input-group-prepend .btn + .input-group-text,
        .input-group-prepend .input-group-text + .input-group-text,
        .input-group-prepend .input-group-text + .btn,
        .input-group-append .btn + .btn,
        .input-group-append .btn + .input-group-text,
        .input-group-append .input-group-text + .input-group-text,
        .input-group-append .input-group-text + .btn {
            margin-left: -1px;
        }

.input-group-prepend {
    margin-right: -1px;
}

.input-group-append {
    margin-left: -1px;
}

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #676976;
    text-align: center;
    white-space: nowrap;
    background-color: #eaecf4;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
}

    .input-group-text input[type="radio"],
    .input-group-text input[type="checkbox"] {
        margin-top: 0;
    }

.input-group-lg > .form-control:not(textarea),
.input-group-lg > .custom-select {
    height: calc(1.5em + 1rem + 2px);
}

.input-group-lg > .form-control,
.input-group-lg > .custom-select,
.input-group-lg > .input-group-prepend > .input-group-text,
.input-group-lg > .input-group-append > .input-group-text,
.input-group-lg > .input-group-prepend > .btn,
.input-group-lg > .input-group-append > .btn {
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.input-group-sm > .form-control:not(textarea),
.input-group-sm > .custom-select {
    height: calc(1.5em + 0.5rem + 2px);
}

.input-group-sm > .form-control,
.input-group-sm > .custom-select,
.input-group-sm > .input-group-prepend > .input-group-text,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .btn,
.input-group-sm > .input-group-append > .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.input-group-lg > .custom-select,
.input-group-sm > .custom-select {
    padding-right: 1.75rem;
}

.input-group > .input-group-prepend > .btn,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append:not(:last-child) > .btn,
.input-group > .input-group-append:not(:last-child) > .input-group-text,
.input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle),
.input-group > .input-group-append:last-child > .input-group-text:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group > .input-group-append > .btn,
.input-group > .input-group-append > .input-group-text,
.input-group > .input-group-prepend:not(:first-child) > .btn,
.input-group > .input-group-prepend:not(:first-child) > .input-group-text,
.input-group > .input-group-prepend:first-child > .btn:not(:first-child),
.input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.custom-control {
    position: relative;
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem;
}

.custom-control-inline {
    display: inline-flex;
    margin-right: 1rem;
}

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.25rem;
    opacity: 0;
}

    .custom-control-input:checked ~ .custom-control-label::before {
        color: #fff;
        border-color: #4e73df;
        background-color: #4e73df;
    }

    .custom-control-input:focus ~ .custom-control-label::before {
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
        border-color: #bac8f3;
    }

    .custom-control-input:not(:disabled):active ~ .custom-control-label::before {
        color: #fff;
        background-color: #e5ebfa;
        border-color: #e5ebfa;
    }

    .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
        color: #858796;
    }

        .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
            background-color: #eaecf4;
        }

.custom-control-label {
    position: relative;
    margin-bottom: 0;
    vertical-align: top;
}

    .custom-control-label::before {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        pointer-events: none;
        content: "";
        background-color: #fff;
        border: #b7b9cc solid 1px;
    }

    .custom-control-label::after {
        position: absolute;
        top: 0.25rem;
        left: -1.5rem;
        display: block;
        width: 1rem;
        height: 1rem;
        content: "";
        background: no-repeat 50% / 50% 50%;
    }

.custom-checkbox .custom-control-label::before {
    border-radius: 0.35rem;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    border-color: #4e73df;
    background-color: #4e73df;
}

.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3e%3cpath stroke='%23fff' d='M0 2h4'/%3e%3c/svg%3e");
}

.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(78, 115, 223, 0.5);
}

.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before {
    background-color: rgba(78, 115, 223, 0.5);
}

.custom-radio .custom-control-label::before {
    border-radius: 50%;
}

.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(78, 115, 223, 0.5);
}

.custom-switch {
    padding-left: 2.25rem;
}

    .custom-switch .custom-control-label::before {
        left: -2.25rem;
        width: 1.75rem;
        pointer-events: all;
        border-radius: 0.5rem;
    }

    .custom-switch .custom-control-label::after {
        top: calc(0.25rem + 2px);
        left: calc(-2.25rem + 2px);
        width: calc(1rem - 4px);
        height: calc(1rem - 4px);
        background-color: #b7b9cc;
        border-radius: 0.5rem;
        transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    }

@media (prefers-reduced-motion: reduce) {
    .custom-switch .custom-control-label::after {
        transition: none;
    }
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #fff;
    transform: translateX(0.75rem);
}

.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(78, 115, 223, 0.5);
}

.custom-select {
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 1.75rem 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    vertical-align: middle;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%235a5c69' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .custom-select:focus {
        border-color: #bac8f3;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

        .custom-select:focus::-ms-value {
            color: #6e707e;
            background-color: #fff;
        }

    .custom-select[multiple], .custom-select[size]:not([size="1"]) {
        height: auto;
        padding-right: 0.75rem;
        background-image: none;
    }

    .custom-select::-ms-expand {
        display: none;
    }

    .custom-select:-moz-focusring {
        color: transparent;
        text-shadow: 0 0 0 #6e707e;
    }

.custom-select-sm {
    height: calc(1.5em + 0.5rem + 2px);
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    padding-left: 0.5rem;
    font-size: 0.875rem;
}

.custom-select-lg {
    height: calc(1.5em + 1rem + 2px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    font-size: 1.25rem;
}

.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin-bottom: 0;
}

.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    margin: 0;
    opacity: 0;
}

    .custom-file-input:focus ~ .custom-file-label {
        border-color: #bac8f3;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

    .custom-file-input[disabled] ~ .custom-file-label,
    .custom-file-input:disabled ~ .custom-file-label {
        background-color: #eaecf4;
    }

    .custom-file-input:lang(en) ~ .custom-file-label::after {
        content: "Browse";
    }

    .custom-file-input ~ .custom-file-label[data-browse]::after {
        content: attr(data-browse);
    }

.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-weight: 400;
    line-height: 1.5;
    color: #6e707e;
    background-color: #fff;
    border: 1px solid #d1d3e2;
    border-radius: 0.35rem;
}

.custom-range {
    width: 100%;
    height: 1.4rem;
    padding: 0;
    background-color: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

    .custom-range:focus {
        outline: none;
    }

        .custom-range:focus::-webkit-slider-thumb {
            box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .custom-range:focus::-moz-range-thumb {
            box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

        .custom-range:focus::-ms-thumb {
            box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
        }

    .custom-range::-moz-focus-outer {
        border: 0;
    }

    .custom-range::-webkit-slider-thumb {
        width: 1rem;
        height: 1rem;
        margin-top: -0.25rem;
        background-color: #4e73df;
        border: 0;
        border-radius: 1rem;
        -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
        -webkit-appearance: none;
        appearance: none;
    }

@media (prefers-reduced-motion: reduce) {
    .custom-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none;
    }
}

.custom-range::-webkit-slider-thumb:active {
    background-color: #e5ebfa;
}

.custom-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dddfeb;
    border-color: transparent;
    border-radius: 1rem;
}

.custom-range::-moz-range-thumb {
    width: 1rem;
    height: 1rem;
    background-color: #4e73df;
    border: 0;
    border-radius: 1rem;
    -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    -moz-appearance: none;
    appearance: none;
}

@media (prefers-reduced-motion: reduce) {
    .custom-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none;
    }
}

.custom-range::-moz-range-thumb:active {
    background-color: #e5ebfa;
}

.custom-range::-moz-range-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: #dddfeb;
    border-color: transparent;
    border-radius: 1rem;
}

.custom-range::-ms-thumb {
    width: 1rem;
    height: 1rem;
    margin-top: 0;
    margin-right: 0.2rem;
    margin-left: 0.2rem;
    background-color: #4e73df;
    border: 0;
    border-radius: 1rem;
    -ms-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    appearance: none;
}

@media (prefers-reduced-motion: reduce) {
    .custom-range::-ms-thumb {
        -ms-transition: none;
        transition: none;
    }
}

.custom-range::-ms-thumb:active {
    background-color: #e5ebfa;
}

.custom-range::-ms-track {
    width: 100%;
    height: 0.5rem;
    color: transparent;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 0.5rem;
}

.custom-range::-ms-fill-lower {
    background-color: #dddfeb;
    border-radius: 1rem;
}

.custom-range::-ms-fill-upper {
    margin-right: 15px;
    background-color: #dddfeb;
    border-radius: 1rem;
}

.custom-range:disabled::-webkit-slider-thumb {
    background-color: #b7b9cc;
}

.custom-range:disabled::-webkit-slider-runnable-track {
    cursor: default;
}

.custom-range:disabled::-moz-range-thumb {
    background-color: #b7b9cc;
}

.custom-range:disabled::-moz-range-track {
    cursor: default;
}

.custom-range:disabled::-ms-thumb {
    background-color: #b7b9cc;
}

.custom-control-label::before,
.custom-file-label,
.custom-select {
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .custom-control-label::before,
    .custom-file-label,
    .custom-select {
        transition: none;
    }
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
}

    .nav-link:hover, .nav-link:focus {
        text-decoration: none;
    }

    .nav-link.disabled {
        color: #858796;
        pointer-events: none;
        cursor: default;
    }

.nav-tabs {
    border-bottom: 1px solid #dddfeb;
}

    .nav-tabs .nav-item {
        margin-bottom: -1px;
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-top-left-radius: 0.35rem;
        border-top-right-radius: 0.35rem;
    }

        .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
            border-color: #eaecf4 #eaecf4 #dddfeb;
        }

        .nav-tabs .nav-link.disabled {
            color: #858796;
            background-color: transparent;
            border-color: transparent;
        }

        .nav-tabs .nav-link.active,
        .nav-tabs .nav-item.show .nav-link {
            color: #6e707e;
            background-color: #fff;
            border-color: #dddfeb #dddfeb #fff;
        }

    .nav-tabs .dropdown-menu {
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

.nav-pills .nav-link {
    border-radius: 0.35rem;
}

.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center;
}

.nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

.navbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

    .navbar .container,
    .navbar .container-fluid, .navbar .container-sm, .navbar .container-md, .navbar .container-lg, .navbar .container-xl {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }

.navbar-brand {
    display: inline-block;
    padding-top: 0.3125rem;
    padding-bottom: 0.3125rem;
    margin-right: 1rem;
    font-size: 1.25rem;
    line-height: inherit;
    white-space: nowrap;
}

    .navbar-brand:hover, .navbar-brand:focus {
        text-decoration: none;
    }

.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

    .navbar-nav .nav-link {
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-nav .dropdown-menu {
        position: static;
        float: none;
    }

.navbar-text {
    display: inline-block;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.35rem;
}

    .navbar-toggler:hover, .navbar-toggler:focus {
        text-decoration: none;
    }

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

@media (max-width: 575.98px) {
    .navbar-expand-sm > .container,
    .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-sm .navbar-nav {
            flex-direction: row;
        }

            .navbar-expand-sm .navbar-nav .dropdown-menu {
                position: absolute;
            }

            .navbar-expand-sm .navbar-nav .nav-link {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }

        .navbar-expand-sm > .container,
        .navbar-expand-sm > .container-fluid, .navbar-expand-sm > .container-sm, .navbar-expand-sm > .container-md, .navbar-expand-sm > .container-lg, .navbar-expand-sm > .container-xl {
            flex-wrap: nowrap;
        }

        .navbar-expand-sm .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
        }

        .navbar-expand-sm .navbar-toggler {
            display: none;
        }
}

@media (max-width: 767.98px) {
    .navbar-expand-md > .container,
    .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 768px) {
    .navbar-expand-md {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-md .navbar-nav {
            flex-direction: row;
        }

            .navbar-expand-md .navbar-nav .dropdown-menu {
                position: absolute;
            }

            .navbar-expand-md .navbar-nav .nav-link {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }

        .navbar-expand-md > .container,
        .navbar-expand-md > .container-fluid, .navbar-expand-md > .container-sm, .navbar-expand-md > .container-md, .navbar-expand-md > .container-lg, .navbar-expand-md > .container-xl {
            flex-wrap: nowrap;
        }

        .navbar-expand-md .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
        }

        .navbar-expand-md .navbar-toggler {
            display: none;
        }
}

@media (max-width: 991.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-lg .navbar-nav {
            flex-direction: row;
        }

            .navbar-expand-lg .navbar-nav .dropdown-menu {
                position: absolute;
            }

            .navbar-expand-lg .navbar-nav .nav-link {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }

        .navbar-expand-lg > .container,
        .navbar-expand-lg > .container-fluid, .navbar-expand-lg > .container-sm, .navbar-expand-lg > .container-md, .navbar-expand-lg > .container-lg, .navbar-expand-lg > .container-xl {
            flex-wrap: nowrap;
        }

        .navbar-expand-lg .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
        }

        .navbar-expand-lg .navbar-toggler {
            display: none;
        }
}

@media (max-width: 1199.98px) {
    .navbar-expand-xl > .container,
    .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-flow: row nowrap;
        justify-content: flex-start;
    }

        .navbar-expand-xl .navbar-nav {
            flex-direction: row;
        }

            .navbar-expand-xl .navbar-nav .dropdown-menu {
                position: absolute;
            }

            .navbar-expand-xl .navbar-nav .nav-link {
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }

        .navbar-expand-xl > .container,
        .navbar-expand-xl > .container-fluid, .navbar-expand-xl > .container-sm, .navbar-expand-xl > .container-md, .navbar-expand-xl > .container-lg, .navbar-expand-xl > .container-xl {
            flex-wrap: nowrap;
        }

        .navbar-expand-xl .navbar-collapse {
            display: flex !important;
            flex-basis: auto;
        }

        .navbar-expand-xl .navbar-toggler {
            display: none;
        }
}

.navbar-expand {
    flex-flow: row nowrap;
    justify-content: flex-start;
}

    .navbar-expand > .container,
    .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
        padding-right: 0;
        padding-left: 0;
    }

    .navbar-expand .navbar-nav {
        flex-direction: row;
    }

        .navbar-expand .navbar-nav .dropdown-menu {
            position: absolute;
        }

        .navbar-expand .navbar-nav .nav-link {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }

    .navbar-expand > .container,
    .navbar-expand > .container-fluid, .navbar-expand > .container-sm, .navbar-expand > .container-md, .navbar-expand > .container-lg, .navbar-expand > .container-xl {
        flex-wrap: nowrap;
    }

    .navbar-expand .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .navbar-expand .navbar-toggler {
        display: none;
    }

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, 0.9);
}

    .navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
        color: rgba(0, 0, 0, 0.9);
    }

.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.5);
}

    .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
        color: rgba(0, 0, 0, 0.7);
    }

    .navbar-light .navbar-nav .nav-link.disabled {
        color: rgba(0, 0, 0, 0.3);
    }

    .navbar-light .navbar-nav .show > .nav-link,
    .navbar-light .navbar-nav .active > .nav-link,
    .navbar-light .navbar-nav .nav-link.show,
    .navbar-light .navbar-nav .nav-link.active {
        color: rgba(0, 0, 0, 0.9);
    }

.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.5);
    border-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-text {
    color: rgba(0, 0, 0, 0.5);
}

    .navbar-light .navbar-text a {
        color: rgba(0, 0, 0, 0.9);
    }

        .navbar-light .navbar-text a:hover, .navbar-light .navbar-text a:focus {
            color: rgba(0, 0, 0, 0.9);
        }

.navbar-dark .navbar-brand {
    color: #fff;
}

    .navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
        color: #fff;
    }

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.5);
}

    .navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-dark .navbar-nav .nav-link.disabled {
        color: rgba(255, 255, 255, 0.25);
    }

    .navbar-dark .navbar-nav .show > .nav-link,
    .navbar-dark .navbar-nav .active > .nav-link,
    .navbar-dark .navbar-nav .nav-link.show,
    .navbar-dark .navbar-nav .nav-link.active {
        color: #fff;
    }

.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}

.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.5);
}

    .navbar-dark .navbar-text a {
        color: #fff;
    }

        .navbar-dark .navbar-text a:hover, .navbar-dark .navbar-text a:focus {
            color: #fff;
        }

.cardOld {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 400;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid var(--istaGray);
    border-radius: 0.35rem;
    background-color: white;
    padding: 20px 20px 20px 20px;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 400;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid var(--istaGray);
    border-radius: 0.35rem;
}

    .card > hr {
        margin-right: 0;
        margin-left: 0;
    }

    .card > .list-group {
        border-top: inherit;
        border-bottom: inherit;
    }

        .card > .list-group:first-child {
            border-top-width: 0;
            border-top-left-radius: calc(0.35rem - 1px);
            border-top-right-radius: calc(0.35rem - 1px);
        }

        .card > .list-group:last-child {
            border-bottom-width: 0;
            border-bottom-right-radius: calc(0.35rem - 1px);
            border-bottom-left-radius: calc(0.35rem - 1px);
        }

.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}

.card-title {
    margin-bottom: 0.75rem;
}

.card-subtitle {
    margin-top: -0.375rem;
    margin-bottom: 0;
}

.card-text:last-child {
    margin-bottom: 0;
}

.card-link:hover {
    text-decoration: none;
}

.card-link + .card-link {
    margin-left: 1.25rem;
}

.card-header {
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: #f8f9fc;
    border-bottom: 1px solid var(--istaGray);
}

    .card-header:first-child {
        border-radius: calc(0.35rem - 1px) calc(0.35rem - 1px) 0 0;
    }

    .card-header + .list-group .list-group-item:first-child {
        border-top: 0;
    }

.card-footer {
    padding: 0.75rem 1.25rem;
    background-color: #f8f9fc;
    border-top: 1px solid var(--istaGray);
}

    .card-footer:last-child {
        border-radius: 0 0 calc(0.35rem - 1px) calc(0.35rem - 1px);
    }

.card-header-tabs {
    margin-right: -0.625rem;
    margin-bottom: -0.75rem;
    margin-left: -0.625rem;
    border-bottom: 0;
}

.card-header-pills {
    margin-right: -0.625rem;
    margin-left: -0.625rem;
}

.card-img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
}

.card-img,
.card-img-top,
.card-img-bottom {
    flex-shrink: 0;
    width: 100%;
}

.card-img,
.card-img-top {
    border-top-left-radius: calc(0.35rem - 1px);
    border-top-right-radius: calc(0.35rem - 1px);
}

.card-img,
.card-img-bottom {
    border-bottom-right-radius: calc(0.35rem - 1px);
    border-bottom-left-radius: calc(0.35rem - 1px);
}

.card-deck .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-deck {
        display: flex;
        flex-flow: row wrap;
        margin-right: -0.75rem;
        margin-left: -0.75rem;
    }

        .card-deck .card {
            flex: 1 0 0%;
            margin-right: 0.75rem;
            margin-bottom: 0;
            margin-left: 0.75rem;
        }
}

.card-group > .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap;
    }

        .card-group > .card {
            flex: 1 0 0%;
            margin-bottom: 0;
        }

            .card-group > .card + .card {
                margin-left: 0;
                border-left: 0;
            }

            .card-group > .card:not(:last-child) {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

                .card-group > .card:not(:last-child) .card-img-top,
                .card-group > .card:not(:last-child) .card-header {
                    border-top-right-radius: 0;
                }

                .card-group > .card:not(:last-child) .card-img-bottom,
                .card-group > .card:not(:last-child) .card-footer {
                    border-bottom-right-radius: 0;
                }

            .card-group > .card:not(:first-child) {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

                .card-group > .card:not(:first-child) .card-img-top,
                .card-group > .card:not(:first-child) .card-header {
                    border-top-left-radius: 0;
                }

                .card-group > .card:not(:first-child) .card-img-bottom,
                .card-group > .card:not(:first-child) .card-footer {
                    border-bottom-left-radius: 0;
                }
}

.card-columns .card {
    margin-bottom: 0.75rem;
}

@media (min-width: 576px) {
    .card-columns {
        -moz-column-count: 3;
        column-count: 3;
        -moz-column-gap: 1.25rem;
        column-gap: 1.25rem;
        orphans: 1;
        widows: 1;
    }

        .card-columns .card {
            display: inline-block;
            width: 100%;
        }
}

.accordion > .card {
    overflow: hidden;
}

    .accordion > .card:not(:last-of-type) {
        border-bottom: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    .accordion > .card:not(:first-of-type) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .accordion > .card > .card-header {
        border-radius: 0;
        margin-bottom: -1px;
    }

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: #eaecf4;
    border-radius: 0.35rem;
}

.breadcrumb-item {
    display: flex;
}

    .breadcrumb-item + .breadcrumb-item {
        padding-left: 0.5rem;
    }

        .breadcrumb-item + .breadcrumb-item::before {
            display: inline-block;
            padding-right: 0.5rem;
            color: #858796;
            content: "/";
        }

        .breadcrumb-item + .breadcrumb-item:hover::before {
            text-decoration: underline;
        }

    .breadcrumb-item.active {
        color: #858796;
    }

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.35rem;
}

    .page-link:hover {
        z-index: 2;
        color: #224abe;
        text-decoration: none;
        background-color: #eaecf4;
        border-color: #dddfeb;
    }

    .page-link:focus {
        z-index: 3;
        outline: 0;
        box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25);
    }

.page-item:first-child .page-link {
    margin-left: 0;
    border-top-left-radius: 0.35rem;
    border-bottom-left-radius: 0.35rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.35rem;
    border-bottom-right-radius: 0.35rem;
}

.pagination-lg .page-link {
    padding: 0.75rem 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
    border-top-left-radius: 0.2rem;
    border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
    border-top-right-radius: 0.2rem;
    border-bottom-right-radius: 0.2rem;
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.35rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .badge {
        transition: none;
    }
}

a.badge:hover, a.badge:focus {
    text-decoration: none;
}

.badge:empty {
    display: none;
}

.btn .badge {
    position: relative;
    top: -1px;
}

.badge-pill {
    padding-right: 0.6em;
    padding-left: 0.6em;
    border-radius: 10rem;
}

a.badge-primary:hover, a.badge-primary:focus {
    color: #fff;
    background-color: #0071F0;
}

a.badge-primary:focus, a.badge-primary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.5);
}

a.badge-secondary:hover, a.badge-secondary:focus {
    color: #fff;
    background-color: #6b6d7d;
}

a.badge-secondary:focus, a.badge-secondary.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(133, 135, 150, 0.5);
}

a.badge-success:focus, a.badge-success.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(28, 200, 138, 0.5);
}

a.badge-info:focus, a.badge-info.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(54, 185, 204, 0.5);
}

a.badge-warning:focus, a.badge-warning.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(246, 194, 62, 0.5);
}

a.badge-danger:hover, a.badge-danger:focus {
    color: #fff;
    background-color: #d52a1a;
}

a.badge-danger:focus, a.badge-danger.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(231, 74, 59, 0.5);
}

.badge-light {
    color: #3a3b45;
    background-color: #f8f9fc;
}

a.badge-light:hover, a.badge-light:focus {
    color: #3a3b45;
    background-color: #d4daed;
}

a.badge-light:focus, a.badge-light.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(248, 249, 252, 0.5);
}

.badge-dark {
    color: #fff;
    background-color: #5a5c69;
}

a.badge-dark:hover, a.badge-dark:focus {
    color: #fff;
    background-color: #42444e;
}

a.badge-dark:focus, a.badge-dark.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(90, 92, 105, 0.5);
}

.jumbotron {
    padding: 2rem 1rem;
    margin-bottom: 2rem;
    background-color: #eaecf4;
    border-radius: 0.3rem;
}

@media (min-width: 576px) {
    .jumbotron {
        padding: 4rem 2rem;
    }
}

.jumbotron-fluid {
    padding-right: 0;
    padding-left: 0;
    border-radius: 0;
}

.alert {
    position: relative;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 0.35rem;
}

.alert-heading {
    color: inherit;
}

.alert-link {
    font-weight: 700;
}

.alert-dismissible {
    padding-right: 4rem;
}

    .alert-dismissible .close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 0.75rem 1.25rem;
        color: inherit;
    }

.alert-primary {
    color: #293c74;
    background-color: #dce3f9;
    border-color: #cdd8f6;
}

    .alert-primary hr {
        border-top-color: #b7c7f2;
    }

    .alert-primary .alert-link {
        color: #1c294e;
    }

.alert-secondary {
    color: #45464e;
    background-color: #e7e7ea;
    border-color: #dddde2;
}

    .alert-secondary hr {
        border-top-color: #cfcfd6;
    }

    .alert-secondary .alert-link {
        color: #2d2e33;
    }

.alert-success {
    color: #0f6848;
    background-color: #d2f4e8;
    border-color: #bff0de;
}

    .alert-success hr {
        border-top-color: #aaebd3;
    }

    .alert-success .alert-link {
        color: #093b29;
    }

.alert-info {
    color: #1c606a;
    background-color: #d7f1f5;
    border-color: #c7ebf1;
}

    .alert-info hr {
        border-top-color: #b3e4ec;
    }

    .alert-info .alert-link {
        color: #113b42;
    }

.alert-warning {
    color: #806520;
    background-color: #fdf3d8;
    border-color: #fceec9;
}

    .alert-warning hr {
        border-top-color: #fbe6b1;
    }

    .alert-warning .alert-link {
        color: #574516;
    }

.alert-danger {
    color: #78261f;
    background-color: #fadbd8;
    border-color: #f8ccc8;
}

    .alert-danger hr {
        border-top-color: #f5b7b1;
    }

    .alert-danger .alert-link {
        color: #4f1915;
    }

    .alert-light hr {
        border-top-color: #ececf6;
    }

    .alert-light .alert-link {
        color: #686869;
    }

.alert-dark {
    color: #2f3037;
    background-color: #dedee1;
    border-color: #d1d1d5;
}

    .alert-dark hr {
        border-top-color: #c4c4c9;
    }

    .alert-dark .alert-link {
        color: #18181c;
    }

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 1rem 0;
    }

    to {
        background-position: 0 0;
    }
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    line-height: 0;
    font-size: 0.75rem;
    background-color: #eaecf4;
    border-radius: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar {
        transition: none;
    }
}

.progress-bar-striped {
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-size: 1rem 1rem;
}

.progress-bar-animated {
    -webkit-animation: progress-bar-stripes 1s linear infinite;
    animation: progress-bar-stripes 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar-animated {
        -webkit-animation: none;
        animation: none;
    }
}

.media {
    display: flex;
    align-items: flex-start;
}

.media-body {
    flex: 1;
}

.list-group {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    border-radius: 0.35rem;
}

.list-group-item-action {
    width: 100%;
    color: #6e707e;
    text-align: inherit;
}

    .list-group-item-action:hover, .list-group-item-action:focus {
        z-index: 1;
        color: #6e707e;
        text-decoration: none;
        background-color: #f8f9fc;
    }

.list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.125);
}

    .list-group-item:first-child {
        border-top-left-radius: inherit;
        border-top-right-radius: inherit;
    }

    .list-group-item:last-child {
        border-bottom-right-radius: inherit;
        border-bottom-left-radius: inherit;
    }

    .list-group-item + .list-group-item {
        border-top-width: 0;
    }

        .list-group-item + .list-group-item.active {
            margin-top: -1px;
            border-top-width: 1px;
        }

.list-group-horizontal {
    flex-direction: row;
}

    .list-group-horizontal > .list-group-item:first-child {
        border-bottom-left-radius: 0.35rem;
        border-top-right-radius: 0;
    }

    .list-group-horizontal > .list-group-item:last-child {
        border-top-right-radius: 0.35rem;
        border-bottom-left-radius: 0;
    }

    .list-group-horizontal > .list-group-item.active {
        margin-top: 0;
    }

    .list-group-horizontal > .list-group-item + .list-group-item {
        border-top-width: 1px;
        border-left-width: 0;
    }

        .list-group-horizontal > .list-group-item + .list-group-item.active {
            margin-left: -1px;
            border-left-width: 1px;
        }

@media (min-width: 576px) {
    .list-group-horizontal-sm {
        flex-direction: row;
    }

        .list-group-horizontal-sm > .list-group-item:first-child {
            border-bottom-left-radius: 0.35rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-sm > .list-group-item:last-child {
            border-top-right-radius: 0.35rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-sm > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-sm > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-sm > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media (min-width: 768px) {
    .list-group-horizontal-md {
        flex-direction: row;
    }

        .list-group-horizontal-md > .list-group-item:first-child {
            border-bottom-left-radius: 0.35rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-md > .list-group-item:last-child {
            border-top-right-radius: 0.35rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-md > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-md > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-md > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media (min-width: 992px) {
    .list-group-horizontal-lg {
        flex-direction: row;
    }

        .list-group-horizontal-lg > .list-group-item:first-child {
            border-bottom-left-radius: 0.35rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-lg > .list-group-item:last-child {
            border-top-right-radius: 0.35rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-lg > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-lg > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-lg > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

@media (min-width: 1200px) {
    .list-group-horizontal-xl {
        flex-direction: row;
    }

        .list-group-horizontal-xl > .list-group-item:first-child {
            border-bottom-left-radius: 0.35rem;
            border-top-right-radius: 0;
        }

        .list-group-horizontal-xl > .list-group-item:last-child {
            border-top-right-radius: 0.35rem;
            border-bottom-left-radius: 0;
        }

        .list-group-horizontal-xl > .list-group-item.active {
            margin-top: 0;
        }

        .list-group-horizontal-xl > .list-group-item + .list-group-item {
            border-top-width: 1px;
            border-left-width: 0;
        }

            .list-group-horizontal-xl > .list-group-item + .list-group-item.active {
                margin-left: -1px;
                border-left-width: 1px;
            }
}

.list-group-flush {
    border-radius: 0;
}

    .list-group-flush > .list-group-item {
        border-width: 0 0 1px;
    }

        .list-group-flush > .list-group-item:last-child {
            border-bottom-width: 0;
        }

.list-group-item-primary {
    color: #293c74;
    background-color: #cdd8f6;
}

    .list-group-item-primary.list-group-item-action:hover, .list-group-item-primary.list-group-item-action:focus {
        color: #293c74;
        background-color: #b7c7f2;
    }

    .list-group-item-primary.list-group-item-action.active {
        color: #fff;
        background-color: #293c74;
        border-color: #293c74;
    }

.list-group-item-secondary {
    color: #45464e;
    background-color: #dddde2;
}

    .list-group-item-secondary.list-group-item-action:hover, .list-group-item-secondary.list-group-item-action:focus {
        color: #45464e;
        background-color: #cfcfd6;
    }

    .list-group-item-secondary.list-group-item-action.active {
        color: #fff;
        background-color: #45464e;
        border-color: #45464e;
    }

.list-group-item-success {
    color: #0f6848;
    background-color: #bff0de;
}

    .list-group-item-success.list-group-item-action:hover, .list-group-item-success.list-group-item-action:focus {
        color: #0f6848;
        background-color: #aaebd3;
    }

    .list-group-item-success.list-group-item-action.active {
        color: #fff;
        background-color: #0f6848;
        border-color: #0f6848;
    }

.list-group-item-info {
    color: #1c606a;
    background-color: #c7ebf1;
}

    .list-group-item-info.list-group-item-action:hover, .list-group-item-info.list-group-item-action:focus {
        color: #1c606a;
        background-color: #b3e4ec;
    }

    .list-group-item-info.list-group-item-action.active {
        color: #fff;
        background-color: #1c606a;
        border-color: #1c606a;
    }

.list-group-item-warning {
    color: #806520;
    background-color: #fceec9;
}

    .list-group-item-warning.list-group-item-action.active {
        color: #fff;
        background-color: #806520;
        border-color: #806520;
    }

.list-group-item-danger {
    color: #78261f;
    background-color: #f8ccc8;
}

    .list-group-item-danger.list-group-item-action:hover, .list-group-item-danger.list-group-item-action:focus {
        color: #78261f;
        background-color: #f5b7b1;
    }

    .list-group-item-danger.list-group-item-action.active {
        color: #fff;
        background-color: #78261f;
        border-color: #78261f;
    }

.list-group-item-dark {
    color: #2f3037;
    background-color: #d1d1d5;
}

    .list-group-item-dark.list-group-item-action:hover, .list-group-item-dark.list-group-item-action:focus {
        color: #2f3037;
        background-color: #c4c4c9;
    }

    .list-group-item-dark.list-group-item-action.active {
        color: #fff;
        background-color: #2f3037;
        border-color: #2f3037;
    }

.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
}

    .close:hover {
        color: #000;
        text-decoration: none;
    }

    .close:not(:disabled):not(.disabled):hover, .close:not(:disabled):not(.disabled):focus {
        opacity: .75;
    }

button.close {
    padding: 0;
    background-color: transparent;
    border: 0;
}

a.close.disabled {
    pointer-events: none;
}

.toast {
    max-width: 350px;
    overflow: hidden;
    font-size: 0.875rem;
    background-color: rgba(255, 255, 255, 0.85);
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 0;
    border-radius: 0.25rem;
}

    .toast:not(:last-child) {
        margin-bottom: 0.75rem;
    }

    .toast.showing {
        opacity: 1;
    }

    .toast.show {
        display: block;
        opacity: 1;
    }

    .toast.hide {
        display: none;
    }

.toast-body {
    padding: 0.75rem;
}

.modal-open {
    overflow: hidden;
}

    .modal-open .modal {
        overflow-x: hidden;
        overflow-y: auto;
    }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 0.5rem;
    pointer-events: none;
}

.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out;
    transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none;
    }
}

.modal.show .modal-dialog {
    transform: none;
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02);
}

.modal-dialog-scrollable {
    display: flex;
    max-height: calc(100% - 1rem);
}

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100vh - 1rem);
        overflow: hidden;
    }

    .modal-dialog-scrollable .modal-header,
    .modal-dialog-scrollable .modal-footer {
        flex-shrink: 0;
    }

    .modal-dialog-scrollable .modal-body {
        overflow-y: auto;
    }

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

    .modal-dialog-centered::before {
        display: block;
        height: calc(100vh - 1rem);
        height: -webkit-min-content;
        height: -moz-min-content;
        height: min-content;
        content: "";
    }

    .modal-dialog-centered.modal-dialog-scrollable {
        flex-direction: column;
        justify-content: center;
        height: 100%;
    }

        .modal-dialog-centered.modal-dialog-scrollable .modal-content {
            max-height: none;
        }

        .modal-dialog-centered.modal-dialog-scrollable::before {
            content: none;
        }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
    outline: 0;
}


.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100vw;
    width: 100dvw;                 /* mobiel: volg de zichtbare viewport (adresbalk in/uit) */
    height: 100vh;                 /* fallback voor browsers zonder dvh */
    height: 100dvh;                /* voorkomt de intermitterend halve backdrop op telefoons */
    background-color: #000;
}

    .modal-backdrop.fade {
        opacity: 0;
    }

    .modal-backdrop.show {
        opacity: 0.5;
    }

.modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 1px solid var(--istaGray);
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

    .modal-header .close {
        padding: 1rem 1rem;
        margin: -1rem -1rem -1rem auto;
    }

.modal-title {
    margin-bottom: 0;
    line-height: 1.5;
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1rem;
    max-height: calc(70vh);
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 0.75rem;
    border-top: 1px solid var(--istaGray);
    border-bottom-right-radius: calc(0.3rem - 1px);
    border-bottom-left-radius: calc(0.3rem - 1px);
}

    .modal-footer > * {
        margin: 0.25rem;
    }

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll;
}

@media (min-width: 576px) {
    .modal-dialog {
        /* Bootstraps eigen max-width van 500px staat hier bewust niet: de dialogen
           in deze app schalen mee met de viewport. */
        margin: 1.75rem auto;
    }

    .modal-dialog-scrollable {
        max-height: calc(100% - 3.5rem);
    }

        .modal-dialog-scrollable .modal-content {
            max-height: calc(100vh - 3.5rem);
        }

    .modal-dialog-centered {
        min-height: calc(100% - 3.5rem);
    }

        .modal-dialog-centered::before {
            height: calc(100vh - 3.5rem);
            height: -webkit-min-content;
            height: -moz-min-content;
            height: min-content;
        }

    .modal-sm {
        max-width: 300px;
    }
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        max-width: 800px;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        max-width: 1140px;
    }
}

.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    margin: 0;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    opacity: 0;
}

    .tooltip.show {
        opacity: 0.9;
    }

    .tooltip .arrow {
        position: absolute;
        display: block;
        width: 0.8rem;
        height: 0.4rem;
    }

        .tooltip .arrow::before {
            position: absolute;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.bs-tooltip-top, .bs-tooltip-auto[x-placement^="top"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-top .arrow, .bs-tooltip-auto[x-placement^="top"] .arrow {
        bottom: 0;
    }

        .bs-tooltip-top .arrow::before, .bs-tooltip-auto[x-placement^="top"] .arrow::before {
            top: 0;
            border-width: 0.4rem 0.4rem 0;
            border-top-color: #000;
        }

.bs-tooltip-right, .bs-tooltip-auto[x-placement^="right"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-right .arrow, .bs-tooltip-auto[x-placement^="right"] .arrow {
        left: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-right .arrow::before, .bs-tooltip-auto[x-placement^="right"] .arrow::before {
            right: 0;
            border-width: 0.4rem 0.4rem 0.4rem 0;
            border-right-color: #000;
        }

.bs-tooltip-bottom, .bs-tooltip-auto[x-placement^="bottom"] {
    padding: 0.4rem 0;
}

    .bs-tooltip-bottom .arrow, .bs-tooltip-auto[x-placement^="bottom"] .arrow {
        top: 0;
    }

        .bs-tooltip-bottom .arrow::before, .bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
            bottom: 0;
            border-width: 0 0.4rem 0.4rem;
            border-bottom-color: #000;
        }

.bs-tooltip-left, .bs-tooltip-auto[x-placement^="left"] {
    padding: 0 0.4rem;
}

    .bs-tooltip-left .arrow, .bs-tooltip-auto[x-placement^="left"] .arrow {
        right: 0;
        width: 0.4rem;
        height: 0.8rem;
    }

        .bs-tooltip-left .arrow::before, .bs-tooltip-auto[x-placement^="left"] .arrow::before {
            left: 0;
            border-width: 0.4rem 0 0.4rem 0.4rem;
            border-left-color: #000;
        }

.tooltip-inner {
    max-width: 200px;
    padding: 0.25rem 0.5rem;
    color: #fff;
    text-align: center;
    background-color: #000;
    border-radius: 0.35rem;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    word-spacing: normal;
    white-space: normal;
    line-break: auto;
    font-size: 0.875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0.3rem;
}

    .popover .arrow {
        position: absolute;
        display: block;
        width: 1rem;
        height: 0.5rem;
        margin: 0 0.3rem;
    }

        .popover .arrow::before, .popover .arrow::after {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
        }

.bs-popover-top, .bs-popover-auto[x-placement^="top"] {
    margin-bottom: 0.5rem;
}

    .bs-popover-top > .arrow, .bs-popover-auto[x-placement^="top"] > .arrow {
        bottom: calc(-0.5rem - 1px);
    }

        .bs-popover-top > .arrow::before, .bs-popover-auto[x-placement^="top"] > .arrow::before {
            bottom: 0;
            border-width: 0.5rem 0.5rem 0;
            border-top-color: rgba(0, 0, 0, 0.25);
        }

        .bs-popover-top > .arrow::after, .bs-popover-auto[x-placement^="top"] > .arrow::after {
            bottom: 1px;
            border-width: 0.5rem 0.5rem 0;
            border-top-color: #fff;
        }

.bs-popover-right, .bs-popover-auto[x-placement^="right"] {
    margin-left: 0.5rem;
}

    .bs-popover-right > .arrow, .bs-popover-auto[x-placement^="right"] > .arrow {
        left: calc(-0.5rem - 1px);
        width: 0.5rem;
        height: 1rem;
        margin: 0.3rem 0;
    }

        .bs-popover-right > .arrow::before, .bs-popover-auto[x-placement^="right"] > .arrow::before {
            left: 0;
            border-width: 0.5rem 0.5rem 0.5rem 0;
            border-right-color: rgba(0, 0, 0, 0.25);
        }

        .bs-popover-right > .arrow::after, .bs-popover-auto[x-placement^="right"] > .arrow::after {
            left: 1px;
            border-width: 0.5rem 0.5rem 0.5rem 0;
            border-right-color: #fff;
        }

.bs-popover-bottom, .bs-popover-auto[x-placement^="bottom"] {
    margin-top: 0.5rem;
}

    .bs-popover-bottom > .arrow, .bs-popover-auto[x-placement^="bottom"] > .arrow {
        top: calc(-0.5rem - 1px);
    }

        .bs-popover-bottom > .arrow::before, .bs-popover-auto[x-placement^="bottom"] > .arrow::before {
            top: 0;
            border-width: 0 0.5rem 0.5rem 0.5rem;
            border-bottom-color: rgba(0, 0, 0, 0.25);
        }

        .bs-popover-bottom > .arrow::after, .bs-popover-auto[x-placement^="bottom"] > .arrow::after {
            top: 1px;
            border-width: 0 0.5rem 0.5rem 0.5rem;
            border-bottom-color: #fff;
        }

    .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
        position: absolute;
        top: 0;
        left: 50%;
        display: block;
        width: 1rem;
        margin-left: -0.5rem;
        content: "";
        border-bottom: 1px solid #f7f7f7;
    }

.bs-popover-left, .bs-popover-auto[x-placement^="left"] {
    margin-right: 0.5rem;
}

    .bs-popover-left > .arrow, .bs-popover-auto[x-placement^="left"] > .arrow {
        right: calc(-0.5rem - 1px);
        width: 0.5rem;
        height: 1rem;
        margin: 0.3rem 0;
    }

        .bs-popover-left > .arrow::before, .bs-popover-auto[x-placement^="left"] > .arrow::before {
            right: 0;
            border-width: 0.5rem 0 0.5rem 0.5rem;
            border-left-color: rgba(0, 0, 0, 0.25);
        }

        .bs-popover-left > .arrow::after, .bs-popover-auto[x-placement^="left"] > .arrow::after {
            right: 1px;
            border-width: 0.5rem 0 0.5rem 0.5rem;
            border-left-color: #fff;
        }

.popover-header {
    padding: 0.5rem 0.75rem;
    margin-bottom: 0;
    font-size: 1rem;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(0.3rem - 1px);
    border-top-right-radius: calc(0.3rem - 1px);
}

    .popover-header:empty {
        display: none;
    }

.popover-body {
    padding: 0.5rem 0.75rem;
    color: #858796;
}

img.carouselKader {
    width: 250px;
}

.bgRed {
    background-color: red;
}

.carouselWH {
    width: 250px;
    height: 250px;
}

.carousel {
    position: relative;
}

    .carousel.pointer-event {
        touch-action: pan-y;
    }

.carousel-inner {
    position: relative;
    width: 250px;
    overflow: hidden;
}

    .carousel-inner::after {
        display: block;
        clear: both;
        content: "";
    }

.carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item {
        transition: none;
    }
}

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
    display: block;
}

    .carousel-item-next:not(.carousel-item-left),
    .active.carousel-item-right {
        transform: translateX(100%);
    }

    .carousel-item-prev:not(.carousel-item-right),
    .active.carousel-item-left {
        transform: translateX(-100%);
    }

.carousel-fade .carousel-item {
    opacity: 0;
    transition-property: opacity;
    transform: none;
}

    .carousel-fade .carousel-item.active,
    .carousel-fade .carousel-item-next.carousel-item-left,
    .carousel-fade .carousel-item-prev.carousel-item-right {
        z-index: 1;
        opacity: 1;
    }

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
    z-index: 0;
    opacity: 0;
    transition: opacity 0s 0.6s;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-fade .active.carousel-item-left,
    .carousel-fade .active.carousel-item-right {
        transition: none;
    }
}

.carousel-control-prev,
.carousel-control-next {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15%;
    color: #fff;
    text-align: center;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-control-prev,
    .carousel-control-next {
        transition: none;
    }
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 0.9;
}

.carousel-control-prev {
    left: 0;
}

.carousel-control-next {
    right: 0;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: no-repeat 50% / 100% 100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
}

.carousel-indicators {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: flex;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}

    .carousel-indicators li {
        box-sizing: content-box;
        flex: 0 1 auto;
        width: 30px;
        height: 3px;
        margin-right: 3px;
        margin-left: 3px;
        text-indent: -999px;
        cursor: pointer;
        background-color: #fff;
        background-clip: padding-box;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        opacity: .5;
        transition: opacity 0.6s ease;
    }

@media (prefers-reduced-motion: reduce) {
    .carousel-indicators li {
        transition: none;
    }
}

.carousel-indicators .active {
    opacity: 1;
}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

@-webkit-keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    -webkit-animation: spinner-border .75s linear infinite;
    animation: spinner-border .75s linear infinite;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

@keyframes spinner-grow {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

.spinner-grow {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: text-bottom;
    background-color: currentColor;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: spinner-grow .75s linear infinite;
    animation: spinner-grow .75s linear infinite;
}

.spinner-grow-sm {
    width: 1rem;
    height: 1rem;
}

.align-baseline {
    vertical-align: baseline !important;
}

.align-top {
    vertical-align: top !important;
}

.align-middle {
    vertical-align: middle !important;
}

.align-bottom {
    vertical-align: bottom !important;
}

.align-text-bottom {
    vertical-align: text-bottom !important;
}

.align-text-top {
    vertical-align: text-top !important;
}

.align-text-right {
    text-align: right;
    float: right;
}

.zoom_50 {
    transform: scale(0.5);
    transform-origin: 0 0;
}

.bg-primary {
    background-color: var(--istaColorPeriod2) !important;
}

a.bg-primary:hover, a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: #0071F0 !important;
}

.bg-secondary {
    background-color: #858796 !important;
}

a.bg-secondary:hover, a.bg-secondary:focus,
button.bg-secondary:hover,
button.bg-secondary:focus {
    background-color: #6b6d7d !important;
}

.bg-success {
    background-color: #1cc88a !important;
}

a.bg-success:hover, a.bg-success:focus,
button.bg-success:hover,
button.bg-success:focus {
    background-color: #169b6b !important;
}

.bg-info {
    background-color: #36b9cc !important;
}

a.bg-info:hover, a.bg-info:focus,
button.bg-info:hover,
button.bg-info:focus {
    background-color: #2a96a5 !important;
}

.bg-warning {
    background-color: #f6c23e !important;
}

a.bg-warning:hover, a.bg-warning:focus,
button.bg-warning:hover,
button.bg-warning:focus {
    background-color: #f4b30d !important;
}

.bg-danger {
    background-color: #e74a3b !important;
}

a.bg-danger:hover, a.bg-danger:focus,
button.bg-danger:hover,
button.bg-danger:focus {
    background-color: #d52a1a !important;
}

a.bg-light:hover, a.bg-light:focus,
button.bg-light:hover,
button.bg-light:focus {
    background-color: #d4daed !important;
}

a.bg-dark:hover, a.bg-dark:focus,
button.bg-dark:hover,
button.bg-dark:focus {
    background-color: #42444e !important;
}

.bg-white {
    background-color: #fff !important;
}

.bg-dark {
    background-color: var(--istaColorOffBlack);
}

.bg-istaOceanBlue {
    background-color: var(--istaColorOceanBlue);
}

.bg-light-grey {
    background-color: #F9F9F9 !important;
}

.bg-transparent {
    background-color: transparent !important;
}

.border {
    border: 1px solid var(--istaGray) !important;
}

.border-top {
    border-top: 1px solid var(--istaGray) !important;
}

.border-right {
    border-right: 1px solid var(--istaGray) !important;
}

.border-bottom {
    border-bottom: 1px solid var(--istaGray) !important;
}

.border-left {
    border-left: 1px solid var(--istaGray) !important;
}

.border-0 {
    border: 0 !important;
}

.border-top-0 {
    border-top: 0 !important;
}

.border-right-0 {
    border-right: 0 !important;
}

.border-bottom-0 {
    border-bottom: 0 !important;
}

.border-left-0 {
    border-left: 0 !important;
}

.border-primary {
    border-color: #4e73df !important;
}

.border-secondary {
    border-color: #858796 !important;
}

.border-success {
    border-color: #1cc88a !important;
}

.border-info {
    border-color: #36b9cc !important;
}

.border-warning {
    border-color: #f6c23e !important;
}

.border-danger {
    border-color: #e74a3b !important;
}

.border-light {
    border-color: #f8f9fc !important;
}

.border-dark {
    border-color: #5a5c69 !important;
}

.border-white {
    border-color: #fff !important;
}

.rounded-sm {
    border-radius: 0.2rem !important;
}

.rounded {
    border-radius: 0.35rem !important;
}

.rounded-top {
    border-top-left-radius: 0.35rem !important;
    border-top-right-radius: 0.35rem !important;
}

.rounded-right {
    border-top-right-radius: 0.35rem !important;
    border-bottom-right-radius: 0.35rem !important;
}

.rounded-bottom {
    border-bottom-right-radius: 0.35rem !important;
    border-bottom-left-radius: 0.35rem !important;
}

.rounded-left {
    border-top-left-radius: 0.35rem !important;
    border-bottom-left-radius: 0.35rem !important;
}

.rounded-lg {
    border-radius: 0.3rem !important;
}

.rounded-circle {
    border-radius: 50% !important;
}

.rounded-pill {
    border-radius: 50rem !important;
}

.rounded-0 {
    border-radius: 0 !important;
}

.clearfix::after {
    display: block;
    clear: both;
    content: "";
}

.d-none {
    display: none !important;
}

.d-inline {
    display: inline !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-block {
    display: block !important;
}

.d-table {
    display: table !important;
}

.d-table-row {
    display: table-row !important;
}

.d-table-cell {
    display: table-cell !important;
}

.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

@media (min-width: 576px) {
    .d-sm-none {
        display: none !important;
    }

    .d-sm-inline {
        display: inline !important;
    }

    .d-sm-inline-block {
        display: inline-block !important;
    }

    .d-sm-block {
        display: block !important;
    }

    .d-sm-table {
        display: table !important;
    }

    .d-sm-table-row {
        display: table-row !important;
    }

    .d-sm-table-cell {
        display: table-cell !important;
    }

    .d-sm-flex {
        display: flex !important;
    }

    .d-sm-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 768px) {
    .d-md-none {
        display: none !important;
    }

    .d-md-inline {
        display: inline !important;
    }

    .d-md-inline-block {
        display: inline-block !important;
    }

    .d-md-block {
        display: block !important;
    }

    .d-md-table {
        display: table !important;
    }

    .d-md-table-row {
        display: table-row !important;
    }

    .d-md-table-cell {
        display: table-cell !important;
    }

    .d-md-flex {
        display: flex !important;
    }

    .d-md-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 992px) {
    .d-lg-none {
        display: none !important;
    }

    .d-lg-inline {
        display: inline !important;
    }

    .d-lg-inline-block {
        display: inline-block !important;
    }

    .d-lg-block {
        display: block !important;
    }

    .d-lg-table {
        display: table !important;
    }

    .d-lg-table-row {
        display: table-row !important;
    }

    .d-lg-table-cell {
        display: table-cell !important;
    }

    .d-lg-flex {
        display: flex !important;
    }

    .d-lg-inline-flex {
        display: inline-flex !important;
    }
}

@media (min-width: 1200px) {
    .d-xl-none {
        display: none !important;
    }

    .d-xl-inline {
        display: inline !important;
    }

    .d-xl-inline-block {
        display: inline-block !important;
    }

    .d-xl-block {
        display: block !important;
    }

    .d-xl-table {
        display: table !important;
    }

    .d-xl-table-row {
        display: table-row !important;
    }

    .d-xl-table-cell {
        display: table-cell !important;
    }

    .d-xl-flex {
        display: flex !important;
    }

    .d-xl-inline-flex {
        display: inline-flex !important;
    }
}

@media print {
    .d-print-none {
        display: none !important;
    }

    .d-print-inline {
        display: inline !important;
    }

    .d-print-inline-block {
        display: inline-block !important;
    }

    .d-print-block {
        display: block !important;
    }

    .d-print-table {
        display: table !important;
    }

    .d-print-table-row {
        display: table-row !important;
    }

    .d-print-table-cell {
        display: table-cell !important;
    }

    .d-print-flex {
        display: flex !important;
    }

    .d-print-inline-flex {
        display: inline-flex !important;
    }
}

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .embed-responsive::before {
        display: block;
        content: "";
    }

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.embed-responsive-21by9::before {
    padding-top: 42.85714%;
}

.embed-responsive-16by9::before {
    padding-top: 56.25%;
}

.embed-responsive-4by3::before {
    padding-top: 75%;
}

.embed-responsive-1by1::before {
    padding-top: 100%;
}

.flex-row {
    flex-direction: row !important;
}

.flex-column {
    flex-direction: column !important;
}

.flex-row-reverse {
    flex-direction: row-reverse !important;
}

.flex-column-reverse {
    flex-direction: column-reverse !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
    flex-wrap: wrap-reverse !important;
}

.flex-fill {
    flex: 1 1 auto !important;
}

.flex-grow-0 {
    flex-grow: 0 !important;
}

.flex-grow-1 {
    flex-grow: 1 !important;
}

.flex-shrink-0 {
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    flex-shrink: 1 !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-around {
    justify-content: space-around !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.align-items-center {
    align-items: center !important;
    display: flex;
}

.align-items-baseline {
    align-items: baseline !important;
}

.align-items-stretch {
    align-items: stretch !important;
}

.align-content-start {
    align-content: flex-start !important;
}

.align-content-end {
    align-content: flex-end !important;
}

.align-content-center {
    align-content: center !important;
}

.align-content-between {
    align-content: space-between !important;
}

.align-content-around {
    align-content: space-around !important;
}

.align-content-stretch {
    align-content: stretch !important;
}

.align-self-auto {
    align-self: auto !important;
}

.align-self-start {
    align-self: flex-start !important;
}

.align-self-end {
    align-self: flex-end !important;
}

.align-self-center {
    align-self: center !important;
}

.align-self-baseline {
    align-self: baseline !important;
}

.align-self-stretch {
    align-self: stretch !important;
}

@media (min-width: 576px) {
    .flex-sm-row {
        flex-direction: row !important;
    }

    .flex-sm-column {
        flex-direction: column !important;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-sm-wrap {
        flex-wrap: wrap !important;
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .flex-sm-fill {
        flex: 1 1 auto !important;
    }

    .flex-sm-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-sm-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-sm-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-sm-shrink-1 {
        flex-shrink: 1 !important;
    }

    .justify-content-sm-start {
        justify-content: flex-start !important;
    }

    .justify-content-sm-end {
        justify-content: flex-end !important;
    }

    .justify-content-sm-center {
        justify-content: center !important;
    }

    .justify-content-sm-between {
        justify-content: space-between !important;
    }

    .justify-content-sm-around {
        justify-content: space-around !important;
    }

    .align-items-sm-start {
        align-items: flex-start !important;
    }

    .align-items-sm-end {
        align-items: flex-end !important;
    }

    .align-items-sm-center {
        align-items: center !important;
    }

    .align-items-sm-baseline {
        align-items: baseline !important;
    }

    .align-items-sm-stretch {
        align-items: stretch !important;
    }

    .align-content-sm-start {
        align-content: flex-start !important;
    }

    .align-content-sm-end {
        align-content: flex-end !important;
    }

    .align-content-sm-center {
        align-content: center !important;
    }

    .align-content-sm-between {
        align-content: space-between !important;
    }

    .align-content-sm-around {
        align-content: space-around !important;
    }

    .align-content-sm-stretch {
        align-content: stretch !important;
    }

    .align-self-sm-auto {
        align-self: auto !important;
    }

    .align-self-sm-start {
        align-self: flex-start !important;
    }

    .align-self-sm-end {
        align-self: flex-end !important;
    }

    .align-self-sm-center {
        align-self: center !important;
    }

    .align-self-sm-baseline {
        align-self: baseline !important;
    }

    .align-self-sm-stretch {
        align-self: stretch !important;
    }
}

@media (min-width: 768px) {
    .flex-md-row {
        flex-direction: row !important;
    }

    .flex-md-column {
        flex-direction: column !important;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-md-wrap {
        flex-wrap: wrap !important;
    }

    .flex-md-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .flex-md-fill {
        flex: 1 1 auto !important;
    }

    .flex-md-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-md-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-md-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-md-shrink-1 {
        flex-shrink: 1 !important;
    }

    .justify-content-md-start {
        justify-content: flex-start !important;
    }

    .justify-content-md-end {
        justify-content: flex-end !important;
    }

    .justify-content-md-center {
        justify-content: center !important;
    }

    .justify-content-md-between {
        justify-content: space-between !important;
    }

    .justify-content-md-around {
        justify-content: space-around !important;
    }

    .align-items-md-start {
        align-items: flex-start !important;
    }

    .align-items-md-end {
        align-items: flex-end !important;
    }

    .align-items-md-center {
        align-items: center !important;
    }

    .align-items-md-baseline {
        align-items: baseline !important;
    }

    .align-items-md-stretch {
        align-items: stretch !important;
    }

    .align-content-md-start {
        align-content: flex-start !important;
    }

    .align-content-md-end {
        align-content: flex-end !important;
    }

    .align-content-md-center {
        align-content: center !important;
    }

    .align-content-md-between {
        align-content: space-between !important;
    }

    .align-content-md-around {
        align-content: space-around !important;
    }

    .align-content-md-stretch {
        align-content: stretch !important;
    }

    .align-self-md-auto {
        align-self: auto !important;
    }

    .align-self-md-start {
        align-self: flex-start !important;
    }

    .align-self-md-end {
        align-self: flex-end !important;
    }

    .align-self-md-center {
        align-self: center !important;
    }

    .align-self-md-baseline {
        align-self: baseline !important;
    }

    .align-self-md-stretch {
        align-self: stretch !important;
    }
}

@media (min-width: 992px) {
    .flex-lg-row {
        flex-direction: row !important;
    }

    .flex-lg-column {
        flex-direction: column !important;
    }

    .flex-lg-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-lg-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-lg-wrap {
        flex-wrap: wrap !important;
    }

    .flex-lg-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .flex-lg-fill {
        flex: 1 1 auto !important;
    }

    .flex-lg-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-lg-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-lg-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-lg-shrink-1 {
        flex-shrink: 1 !important;
    }

    .justify-content-lg-start {
        justify-content: flex-start !important;
    }

    .justify-content-lg-end {
        justify-content: flex-end !important;
    }

    .justify-content-lg-center {
        justify-content: center !important;
    }

    .justify-content-lg-between {
        justify-content: space-between !important;
    }

    .justify-content-lg-around {
        justify-content: space-around !important;
    }

    .align-items-lg-start {
        align-items: flex-start !important;
    }

    .align-items-lg-end {
        align-items: flex-end !important;
    }

    .align-items-lg-center {
        align-items: center !important;
    }

    .align-items-lg-baseline {
        align-items: baseline !important;
    }

    .align-items-lg-stretch {
        align-items: stretch !important;
    }

    .align-content-lg-start {
        align-content: flex-start !important;
    }

    .align-content-lg-end {
        align-content: flex-end !important;
    }

    .align-content-lg-center {
        align-content: center !important;
    }

    .align-content-lg-between {
        align-content: space-between !important;
    }

    .align-content-lg-around {
        align-content: space-around !important;
    }

    .align-content-lg-stretch {
        align-content: stretch !important;
    }

    .align-self-lg-auto {
        align-self: auto !important;
    }

    .align-self-lg-start {
        align-self: flex-start !important;
    }

    .align-self-lg-end {
        align-self: flex-end !important;
    }

    .align-self-lg-center {
        align-self: center !important;
    }

    .align-self-lg-baseline {
        align-self: baseline !important;
    }

    .align-self-lg-stretch {
        align-self: stretch !important;
    }
}

@media (min-width: 1200px) {
    .flex-xl-row {
        flex-direction: row !important;
    }

    .flex-xl-column {
        flex-direction: column !important;
    }

    .flex-xl-row-reverse {
        flex-direction: row-reverse !important;
    }

    .flex-xl-column-reverse {
        flex-direction: column-reverse !important;
    }

    .flex-xl-wrap {
        flex-wrap: wrap !important;
    }

    .flex-xl-nowrap {
        flex-wrap: nowrap !important;
    }

    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important;
    }

    .flex-xl-fill {
        flex: 1 1 auto !important;
    }

    .flex-xl-grow-0 {
        flex-grow: 0 !important;
    }

    .flex-xl-grow-1 {
        flex-grow: 1 !important;
    }

    .flex-xl-shrink-0 {
        flex-shrink: 0 !important;
    }

    .flex-xl-shrink-1 {
        flex-shrink: 1 !important;
    }

    .justify-content-xl-start {
        justify-content: flex-start !important;
    }

    .justify-content-xl-end {
        justify-content: flex-end !important;
    }

    .justify-content-xl-center {
        justify-content: center !important;
    }

    .justify-content-xl-between {
        justify-content: space-between !important;
    }

    .justify-content-xl-around {
        justify-content: space-around !important;
    }

    .align-items-xl-start {
        align-items: flex-start !important;
    }

    .align-items-xl-end {
        align-items: flex-end !important;
    }

    .align-items-xl-center {
        align-items: center !important;
    }

    .align-items-xl-baseline {
        align-items: baseline !important;
    }

    .align-items-xl-stretch {
        align-items: stretch !important;
    }

    .align-content-xl-start {
        align-content: flex-start !important;
    }

    .align-content-xl-end {
        align-content: flex-end !important;
    }

    .align-content-xl-center {
        align-content: center !important;
    }

    .align-content-xl-between {
        align-content: space-between !important;
    }

    .align-content-xl-around {
        align-content: space-around !important;
    }

    .align-content-xl-stretch {
        align-content: stretch !important;
    }

    .align-self-xl-auto {
        align-self: auto !important;
    }

    .align-self-xl-start {
        align-self: flex-start !important;
    }

    .align-self-xl-end {
        align-self: flex-end !important;
    }

    .align-self-xl-center {
        align-self: center !important;
    }

    .align-self-xl-baseline {
        align-self: baseline !important;
    }

    .align-self-xl-stretch {
        align-self: stretch !important;
    }
}

.float-left {
    float: left !important;
}

.float-right {
    float: right !important;
}

.float-none {
    float: none !important;
}

.containerFlex {
    display: flex;
    justify-content: space-between;
}

@media (min-width: 576px) {
    .float-sm-left {
        float: left !important;
    }

    .float-sm-right {
        float: right !important;
    }

    .float-sm-none {
        float: none !important;
    }
}

@media (min-width: 768px) {
    .float-md-left {
        float: left !important;
    }

    .float-md-right {
        float: right !important;
    }

    .float-md-none {
        float: none !important;
    }
}

@media (min-width: 992px) {
    .float-lg-left {
        float: left !important;
    }

    .float-lg-right {
        float: right !important;
    }

    .float-lg-none {
        float: none !important;
    }
}

@media (min-width: 1200px) {
    .float-xl-left {
        float: left !important;
    }

    .float-xl-right {
        float: right !important;
    }

    .float-xl-none {
        float: none !important;
    }
}

.user-select-all {
    -webkit-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    user-select: all !important;
}

.user-select-auto {
    -webkit-user-select: auto !important;
    -moz-user-select: auto !important;
    -ms-user-select: auto !important;
    user-select: auto !important;
}

.user-select-none {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.overflow-auto {
    overflow: auto !important;
}

.overflow-hidden {
    overflow: hidden !important;
}

.position-static {
    position: static !important;
}

.position-relative {
    position: relative !important;
}

.position-absolute {
    position: absolute !important;
}

.position-fixed {
    position: fixed !important;
}

.position-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
}

.fixed-top {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}

.fixed-bottom {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
    .sticky-top {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1020;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2) !important;
}

.shadow {
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15) !important;
}

@media (min-width: 992px) {
    .shadow-lg {
        box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
    }
}

.shadow-none {
    box-shadow: none !important;
}

.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

.w-100 {
    width: 100% !important;
}

.w-auto {
    width: auto !important;
}

.h-25 {
    height: 25% !important;
}

.h-50 {
    height: 50% !important;
}

.h-75 {
    height: 75% !important;
}

.h-100 {
    height: 100% !important;
}

.h-auto {
    height: auto !important;
}

.mw-100 {
    max-width: 100% !important;
}

.mh-100 {
    max-height: 100% !important;
}

.min-vw-100 {
    min-width: 100vw !important;
}

.min-vh-100 {
    min-height: 100vh !important;
}

.vw-100 {
    width: 100vw !important;
}

.vh-100 {
    height: 100vh !important;
}

.m-0 {
    margin: 0 !important;
}

.mt-0,
.my-0 {
    margin-top: 0 !important;
}

.mr-0,
.mx-0 {
    margin-right: 0 !important;
}

.mb-0,
.my-0 {
    margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
    margin-left: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.mt-1,
.my-1 {
    margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
    margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
    margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
    margin-left: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-2,
.my-2 {
    margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
    margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
    margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
    margin-left: 0.5rem !important;
}

.m-3 {
    margin: 1rem !important;
}

.mt-3,
.my-3 {
    margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
    margin-right: 1rem !important;
}

.mb-3,
.my-3 {
    margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
    margin-left: 1rem !important;
}

.m-4 {
    margin: 1.5rem !important;
}

.mt-4,
.my-4 {
    margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
    margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
    margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
    margin-left: 1.5rem !important;
}

.m-5 {
    margin: 3rem !important;
}

.mt-5,
.my-5 {
    margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
    margin-right: 3rem !important;
}

.mb-5,
.my-5 {
    margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
    margin-left: 3rem !important;
}

.p-0 {
    padding: 0 !important;
}

.pt-0,
.py-0 {
    padding-top: 0 !important;
}

.pr-0,
.px-0 {
    padding-right: 0 !important;
}

.pb-0,
.py-0 {
    padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
    padding-left: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.pt-1,
.py-1 {
    padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
    padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
    padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
    padding-left: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.pt-2,
.py-2 {
    padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
    padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
    padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
    padding-left: 0.5rem !important;
}

.p-3 {
    padding: 1rem !important;
}

.pt-3,
.py-3 {
    padding-top: 1rem !important;
}

.pr-3,
.px-3 {
    padding-right: 1rem !important;
}

.pb-3,
.py-3 {
    padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
    padding-left: 1rem !important;
}

.p-4 {
    padding: 1.5rem !important;
}

.pt-4,
.py-4 {
    padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
    padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
    padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
    padding-left: 1.5rem !important;
}

.p-5 {
    padding: 2rem !important;
}

.pt-5,
.py-5 {
    padding-top: 3rem !important;
}

.pr-5,
.px-5 {
    padding-right: 3rem !important;
}

.pb-5,
.py-5 {
    padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
    padding-left: 3rem !important;
}

.m-n1 {
    margin: -0.25rem !important;
}

.mt-n1,
.my-n1 {
    margin-top: -0.25rem !important;
}

.mr-n1,
.mx-n1 {
    margin-right: -0.25rem !important;
}

.mb-n1,
.my-n1 {
    margin-bottom: -0.25rem !important;
}

.ml-n1,
.mx-n1 {
    margin-left: -0.25rem !important;
}

.m-n2 {
    margin: -0.5rem !important;
}

.mt-n2,
.my-n2 {
    margin-top: -0.5rem !important;
}

.mr-n2,
.mx-n2 {
    margin-right: -0.5rem !important;
}

.mb-n2,
.my-n2 {
    margin-bottom: -0.5rem !important;
}

.ml-n2,
.mx-n2 {
    margin-left: -0.5rem !important;
}

.m-n3 {
    margin: -1rem !important;
}

.mt-n3,
.my-n3 {
    margin-top: -1rem !important;
}

.mr-n3,
.mx-n3 {
    margin-right: -1rem !important;
}

.mb-n3,
.my-n3 {
    margin-bottom: -1rem !important;
}

.ml-n3,
.mx-n3 {
    margin-left: -1rem !important;
}

.m-n4 {
    margin: -1.5rem !important;
}

.mt-n4,
.my-n4 {
    margin-top: -1.5rem !important;
}

.mr-n4,
.mx-n4 {
    margin-right: -1.5rem !important;
}

.mb-n4,
.my-n4 {
    margin-bottom: -1.5rem !important;
}

.ml-n4,
.mx-n4 {
    margin-left: -1.5rem !important;
}

.m-n5 {
    margin: -3rem !important;
}

.mt-n5,
.my-n5 {
    margin-top: -3rem !important;
}

.mr-n5,
.mx-n5 {
    margin-right: -3rem !important;
}

.mb-n5,
.my-n5 {
    margin-bottom: -3rem !important;
}

.ml-n5,
.mx-n5 {
    margin-left: -3rem !important;
}

.m-auto {
    margin: auto !important;
}

.mt-auto,
.my-auto {
    margin-top: auto !important;
}

.mr-auto,
.mx-auto {
    margin-right: auto !important;
}

.mb-auto,
.my-auto {
    margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
    margin-left: auto !important;
}

@media (min-width: 576px) {
    .m-sm-0 {
        margin: 0 !important;
    }

    .mt-sm-0,
    .my-sm-0 {
        margin-top: 0 !important;
    }

    .mr-sm-0,
    .mx-sm-0 {
        margin-right: 0 !important;
    }

    .mb-sm-0,
    .my-sm-0 {
        margin-bottom: 0 !important;
    }

    .ml-sm-0,
    .mx-sm-0 {
        margin-left: 0 !important;
    }

    .m-sm-1 {
        margin: 0.25rem !important;
    }

    .mt-sm-1,
    .my-sm-1 {
        margin-top: 0.25rem !important;
    }

    .mr-sm-1,
    .mx-sm-1 {
        margin-right: 0.25rem !important;
    }

    .mb-sm-1,
    .my-sm-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-sm-1,
    .mx-sm-1 {
        margin-left: 0.25rem !important;
    }

    .m-sm-2 {
        margin: 0.5rem !important;
    }

    .mt-sm-2,
    .my-sm-2 {
        margin-top: 0.5rem !important;
    }

    .mr-sm-2,
    .mx-sm-2 {
        margin-right: 0.5rem !important;
    }

    .mb-sm-2,
    .my-sm-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-sm-2,
    .mx-sm-2 {
        margin-left: 0.5rem !important;
    }

    .m-sm-3 {
        margin: 1rem !important;
    }

    .mt-sm-3,
    .my-sm-3 {
        margin-top: 1rem !important;
    }

    .mr-sm-3,
    .mx-sm-3 {
        margin-right: 1rem !important;
    }

    .mb-sm-3,
    .my-sm-3 {
        margin-bottom: 1rem !important;
    }

    .ml-sm-3,
    .mx-sm-3 {
        margin-left: 1rem !important;
    }

    .m-sm-4 {
        margin: 1.5rem !important;
    }

    .mt-sm-4,
    .my-sm-4 {
        margin-top: 1.5rem !important;
    }

    .mr-sm-4,
    .mx-sm-4 {
        margin-right: 1.5rem !important;
    }

    .mb-sm-4,
    .my-sm-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-sm-4,
    .mx-sm-4 {
        margin-left: 1.5rem !important;
    }

    .m-sm-5 {
        margin: 3rem !important;
    }

    .mt-sm-5,
    .my-sm-5 {
        margin-top: 3rem !important;
    }

    .mr-sm-5,
    .mx-sm-5 {
        margin-right: 3rem !important;
    }

    .mb-sm-5,
    .my-sm-5 {
        margin-bottom: 3rem !important;
    }

    .ml-sm-5,
    .mx-sm-5 {
        margin-left: 3rem !important;
    }

    .p-sm-0 {
        padding: 0 !important;
    }

    .pt-sm-0,
    .py-sm-0 {
        padding-top: 0 !important;
    }

    .pr-sm-0,
    .px-sm-0 {
        padding-right: 0 !important;
    }

    .pb-sm-0,
    .py-sm-0 {
        padding-bottom: 0 !important;
    }

    .pl-sm-0,
    .px-sm-0 {
        padding-left: 0 !important;
    }

    .p-sm-1 {
        padding: 0.25rem !important;
    }

    .pt-sm-1,
    .py-sm-1 {
        padding-top: 0.25rem !important;
    }

    .pr-sm-1,
    .px-sm-1 {
        padding-right: 0.25rem !important;
    }

    .pb-sm-1,
    .py-sm-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-sm-1,
    .px-sm-1 {
        padding-left: 0.25rem !important;
    }

    .p-sm-2 {
        padding: 0.5rem !important;
    }

    .pt-sm-2,
    .py-sm-2 {
        padding-top: 0.5rem !important;
    }

    .pr-sm-2,
    .px-sm-2 {
        padding-right: 0.5rem !important;
    }

    .pb-sm-2,
    .py-sm-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-sm-2,
    .px-sm-2 {
        padding-left: 0.5rem !important;
    }

    .p-sm-3 {
        padding: 1rem !important;
    }

    .pt-sm-3,
    .py-sm-3 {
        padding-top: 1rem !important;
    }

    .pr-sm-3,
    .px-sm-3 {
        padding-right: 1rem !important;
    }

    .pb-sm-3,
    .py-sm-3 {
        padding-bottom: 1rem !important;
    }

    .pl-sm-3,
    .px-sm-3 {
        padding-left: 1rem !important;
    }

    .p-sm-4 {
        padding: 1.5rem !important;
    }

    .pt-sm-4,
    .py-sm-4 {
        padding-top: 1.5rem !important;
    }

    .pr-sm-4,
    .px-sm-4 {
        padding-right: 1.5rem !important;
    }

    .pb-sm-4,
    .py-sm-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-sm-4,
    .px-sm-4 {
        padding-left: 1.5rem !important;
    }

    .p-sm-5 {
        padding: 3rem !important;
    }

    .pt-sm-5,
    .py-sm-5 {
        padding-top: 3rem !important;
    }

    .pr-sm-5,
    .px-sm-5 {
        padding-right: 3rem !important;
    }

    .pb-sm-5,
    .py-sm-5 {
        padding-bottom: 3rem !important;
    }

    .pl-sm-5,
    .px-sm-5 {
        padding-left: 3rem !important;
    }

    .m-sm-n1 {
        margin: -0.25rem !important;
    }

    .mt-sm-n1,
    .my-sm-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-sm-n1,
    .mx-sm-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-sm-n1,
    .my-sm-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-sm-n1,
    .mx-sm-n1 {
        margin-left: -0.25rem !important;
    }

    .m-sm-n2 {
        margin: -0.5rem !important;
    }

    .mt-sm-n2,
    .my-sm-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-sm-n2,
    .mx-sm-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-sm-n2,
    .my-sm-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-sm-n2,
    .mx-sm-n2 {
        margin-left: -0.5rem !important;
    }

    .m-sm-n3 {
        margin: -1rem !important;
    }

    .mt-sm-n3,
    .my-sm-n3 {
        margin-top: -1rem !important;
    }

    .mr-sm-n3,
    .mx-sm-n3 {
        margin-right: -1rem !important;
    }

    .mb-sm-n3,
    .my-sm-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-sm-n3,
    .mx-sm-n3 {
        margin-left: -1rem !important;
    }

    .m-sm-n4 {
        margin: -1.5rem !important;
    }

    .mt-sm-n4,
    .my-sm-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-sm-n4,
    .mx-sm-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-sm-n4,
    .my-sm-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-sm-n4,
    .mx-sm-n4 {
        margin-left: -1.5rem !important;
    }

    .m-sm-n5 {
        margin: -3rem !important;
    }

    .mt-sm-n5,
    .my-sm-n5 {
        margin-top: -3rem !important;
    }

    .mr-sm-n5,
    .mx-sm-n5 {
        margin-right: -3rem !important;
    }

    .mb-sm-n5,
    .my-sm-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-sm-n5,
    .mx-sm-n5 {
        margin-left: -3rem !important;
    }

    .m-sm-auto {
        margin: auto !important;
    }

    .mt-sm-auto,
    .my-sm-auto {
        margin-top: auto !important;
    }

    .mr-sm-auto,
    .mx-sm-auto {
        margin-right: auto !important;
    }

    .mb-sm-auto,
    .my-sm-auto {
        margin-bottom: auto !important;
    }

    .ml-sm-auto,
    .mx-sm-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 768px) {
    .m-md-0 {
        margin: 0 !important;
    }

    .mt-md-0,
    .my-md-0 {
        margin-top: 0 !important;
    }

    .mr-md-0,
    .mx-md-0 {
        margin-right: 0 !important;
    }

    .mb-md-0,
    .my-md-0 {
        margin-bottom: 0 !important;
    }

    .ml-md-0,
    .mx-md-0 {
        margin-left: 0 !important;
    }

    .m-md-1 {
        margin: 0.25rem !important;
    }

    .mt-md-1,
    .my-md-1 {
        margin-top: 0.25rem !important;
    }

    .mr-md-1,
    .mx-md-1 {
        margin-right: 0.25rem !important;
    }

    .mb-md-1,
    .my-md-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-md-1,
    .mx-md-1 {
        margin-left: 0.25rem !important;
    }

    .m-md-2 {
        margin: 0.5rem !important;
    }

    .mt-md-2,
    .my-md-2 {
        margin-top: 0.5rem !important;
    }

    .mr-md-2,
    .mx-md-2 {
        margin-right: 0.5rem !important;
    }

    .mb-md-2,
    .my-md-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-md-2,
    .mx-md-2 {
        margin-left: 0.5rem !important;
    }

    .m-md-3 {
        margin: 1rem !important;
    }

    .mt-md-3,
    .my-md-3 {
        margin-top: 1rem !important;
    }

    .mr-md-3,
    .mx-md-3 {
        margin-right: 1rem !important;
    }

    .mb-md-3,
    .my-md-3 {
        margin-bottom: 1rem !important;
    }

    .ml-md-3,
    .mx-md-3 {
        margin-left: 1rem !important;
    }

    .m-md-4 {
        margin: 1.5rem !important;
    }

    .mt-md-4,
    .my-md-4 {
        margin-top: 1.5rem !important;
    }

    .mr-md-4,
    .mx-md-4 {
        margin-right: 1.5rem !important;
    }

    .mb-md-4,
    .my-md-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-md-4,
    .mx-md-4 {
        margin-left: 1.5rem !important;
    }

    .m-md-5 {
        margin: 3rem !important;
    }

    .mt-md-5,
    .my-md-5 {
        margin-top: 3rem !important;
    }

    .mr-md-5,
    .mx-md-5 {
        margin-right: 3rem !important;
    }

    .mb-md-5,
    .my-md-5 {
        margin-bottom: 3rem !important;
    }

    .ml-md-5,
    .mx-md-5 {
        margin-left: 3rem !important;
    }

    .p-md-0 {
        padding: 0 !important;
    }

    .pt-md-0,
    .py-md-0 {
        padding-top: 0 !important;
    }

    .pr-md-0,
    .px-md-0 {
        padding-right: 0 !important;
    }

    .pb-md-0,
    .py-md-0 {
        padding-bottom: 0 !important;
    }

    .pl-md-0,
    .px-md-0 {
        padding-left: 0 !important;
    }

    .p-md-1 {
        padding: 0.25rem !important;
    }

    .pt-md-1,
    .py-md-1 {
        padding-top: 0.25rem !important;
    }

    .pr-md-1,
    .px-md-1 {
        padding-right: 0.25rem !important;
    }

    .pb-md-1,
    .py-md-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-md-1,
    .px-md-1 {
        padding-left: 0.25rem !important;
    }

    .p-md-2 {
        padding: 0.5rem !important;
    }

    .pt-md-2,
    .py-md-2 {
        padding-top: 0.5rem !important;
    }

    .pr-md-2,
    .px-md-2 {
        padding-right: 0.5rem !important;
    }

    .pb-md-2,
    .py-md-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-md-2,
    .px-md-2 {
        padding-left: 0.5rem !important;
    }

    .p-md-3 {
        padding: 1rem !important;
    }

    .pt-md-3,
    .py-md-3 {
        padding-top: 1rem !important;
    }

    .pr-md-3,
    .px-md-3 {
        padding-right: 1rem !important;
    }

    .pb-md-3,
    .py-md-3 {
        padding-bottom: 1rem !important;
    }

    .pl-md-3,
    .px-md-3 {
        padding-left: 1rem !important;
    }

    .p-md-4 {
        padding: 1.5rem !important;
    }

    .pt-md-4,
    .py-md-4 {
        padding-top: 1.5rem !important;
    }

    .pr-md-4,
    .px-md-4 {
        padding-right: 1.5rem !important;
    }

    .pb-md-4,
    .py-md-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-md-4,
    .px-md-4 {
        padding-left: 1.5rem !important;
    }

    .p-md-5 {
        padding: 3rem !important;
    }

    .pt-md-5,
    .py-md-5 {
        padding-top: 3rem !important;
    }

    .pr-md-5,
    .px-md-5 {
        padding-right: 3rem !important;
    }

    .pb-md-5,
    .py-md-5 {
        padding-bottom: 3rem !important;
    }

    .pl-md-5,
    .px-md-5 {
        padding-left: 3rem !important;
    }

    .m-md-n1 {
        margin: -0.25rem !important;
    }

    .mt-md-n1,
    .my-md-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-md-n1,
    .mx-md-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-md-n1,
    .my-md-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-md-n1,
    .mx-md-n1 {
        margin-left: -0.25rem !important;
    }

    .m-md-n2 {
        margin: -0.5rem !important;
    }

    .mt-md-n2,
    .my-md-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-md-n2,
    .mx-md-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-md-n2,
    .my-md-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-md-n2,
    .mx-md-n2 {
        margin-left: -0.5rem !important;
    }

    .m-md-n3 {
        margin: -1rem !important;
    }

    .mt-md-n3,
    .my-md-n3 {
        margin-top: -1rem !important;
    }

    .mr-md-n3,
    .mx-md-n3 {
        margin-right: -1rem !important;
    }

    .mb-md-n3,
    .my-md-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-md-n3,
    .mx-md-n3 {
        margin-left: -1rem !important;
    }

    .m-md-n4 {
        margin: -1.5rem !important;
    }

    .mt-md-n4,
    .my-md-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-md-n4,
    .mx-md-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-md-n4,
    .my-md-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-md-n4,
    .mx-md-n4 {
        margin-left: -1.5rem !important;
    }

    .m-md-n5 {
        margin: -3rem !important;
    }

    .mt-md-n5,
    .my-md-n5 {
        margin-top: -3rem !important;
    }

    .mr-md-n5,
    .mx-md-n5 {
        margin-right: -3rem !important;
    }

    .mb-md-n5,
    .my-md-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-md-n5,
    .mx-md-n5 {
        margin-left: -3rem !important;
    }

    .m-md-auto {
        margin: auto !important;
    }

    .mt-md-auto,
    .my-md-auto {
        margin-top: auto !important;
    }

    .mr-md-auto,
    .mx-md-auto {
        margin-right: auto !important;
    }

    .mb-md-auto,
    .my-md-auto {
        margin-bottom: auto !important;
    }

    .ml-md-auto,
    .mx-md-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 992px) {
    .m-lg-0 {
        margin: 0 !important;
    }

    .mt-lg-0,
    .my-lg-0 {
        margin-top: 0 !important;
    }

    .mr-lg-0,
    .mx-lg-0 {
        margin-right: 0 !important;
    }

    .mb-lg-0,
    .my-lg-0 {
        margin-bottom: 0 !important;
    }

    .ml-lg-0,
    .mx-lg-0 {
        margin-left: 0 !important;
    }

    .m-lg-1 {
        margin: 0.25rem !important;
    }

    .mt-lg-1,
    .my-lg-1 {
        margin-top: 0.25rem !important;
    }

    .mr-lg-1,
    .mx-lg-1 {
        margin-right: 0.25rem !important;
    }

    .mb-lg-1,
    .my-lg-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-lg-1,
    .mx-lg-1 {
        margin-left: 0.25rem !important;
    }

    .m-lg-2 {
        margin: 0.5rem !important;
    }

    .mt-lg-2,
    .my-lg-2 {
        margin-top: 0.5rem !important;
    }

    .mr-lg-2,
    .mx-lg-2 {
        margin-right: 0.5rem !important;
    }

    .mb-lg-2,
    .my-lg-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-lg-2,
    .mx-lg-2 {
        margin-left: 0.5rem !important;
    }

    .m-lg-3 {
        margin: 1rem !important;
    }

    .mt-lg-3,
    .my-lg-3 {
        margin-top: 1rem !important;
    }

    .mr-lg-3,
    .mx-lg-3 {
        margin-right: 1rem !important;
    }

    .mb-lg-3,
    .my-lg-3 {
        margin-bottom: 1rem !important;
    }

    .ml-lg-3,
    .mx-lg-3 {
        margin-left: 1rem !important;
    }

    .m-lg-4 {
        margin: 1.5rem !important;
    }

    .mt-lg-4,
    .my-lg-4 {
        margin-top: 1.5rem !important;
    }

    .mr-lg-4,
    .mx-lg-4 {
        margin-right: 1.5rem !important;
    }

    .mb-lg-4,
    .my-lg-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-lg-4,
    .mx-lg-4 {
        margin-left: 1.5rem !important;
    }

    .m-lg-5 {
        margin: 3rem !important;
    }

    .mt-lg-5,
    .my-lg-5 {
        margin-top: 3rem !important;
    }

    .mr-lg-5,
    .mx-lg-5 {
        margin-right: 3rem !important;
    }

    .mb-lg-5,
    .my-lg-5 {
        margin-bottom: 3rem !important;
    }

    .ml-lg-5,
    .mx-lg-5 {
        margin-left: 3rem !important;
    }

    .p-lg-0 {
        padding: 0 !important;
    }

    .pt-lg-0,
    .py-lg-0 {
        padding-top: 0 !important;
    }

    .pr-lg-0,
    .px-lg-0 {
        padding-right: 0 !important;
    }

    .pb-lg-0,
    .py-lg-0 {
        padding-bottom: 0 !important;
    }

    .pl-lg-0,
    .px-lg-0 {
        padding-left: 0 !important;
    }

    .p-lg-1 {
        padding: 0.25rem !important;
    }

    .pt-lg-1,
    .py-lg-1 {
        padding-top: 0.25rem !important;
    }

    .pr-lg-1,
    .px-lg-1 {
        padding-right: 0.25rem !important;
    }

    .pb-lg-1,
    .py-lg-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-lg-1,
    .px-lg-1 {
        padding-left: 0.25rem !important;
    }

    .p-lg-2 {
        padding: 0.5rem !important;
    }

    .pt-lg-2,
    .py-lg-2 {
        padding-top: 0.5rem !important;
    }

    .pr-lg-2,
    .px-lg-2 {
        padding-right: 0.5rem !important;
    }

    .pb-lg-2,
    .py-lg-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-lg-2,
    .px-lg-2 {
        padding-left: 0.5rem !important;
    }

    .p-lg-3 {
        padding: 1rem !important;
    }

    .pt-lg-3,
    .py-lg-3 {
        padding-top: 1rem !important;
    }

    .pr-lg-3,
    .px-lg-3 {
        padding-right: 1rem !important;
    }

    .pb-lg-3,
    .py-lg-3 {
        padding-bottom: 1rem !important;
    }

    .pl-lg-3,
    .px-lg-3 {
        padding-left: 1rem !important;
    }

    .p-lg-4 {
        padding: 1.5rem !important;
    }

    .pt-lg-4,
    .py-lg-4 {
        padding-top: 1.5rem !important;
    }

    .pr-lg-4,
    .px-lg-4 {
        padding-right: 1.5rem !important;
    }

    .pb-lg-4,
    .py-lg-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-lg-4,
    .px-lg-4 {
        padding-left: 1.5rem !important;
    }

    .p-lg-5 {
        padding: 3rem !important;
    }

    .pt-lg-5,
    .py-lg-5 {
        padding-top: 3rem !important;
    }

    .pr-lg-5,
    .px-lg-5 {
        padding-right: 3rem !important;
    }

    .pb-lg-5,
    .py-lg-5 {
        padding-bottom: 3rem !important;
    }

    .pl-lg-5,
    .px-lg-5 {
        padding-left: 3rem !important;
    }

    .m-lg-n1 {
        margin: -0.25rem !important;
    }

    .mt-lg-n1,
    .my-lg-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-lg-n1,
    .mx-lg-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-lg-n1,
    .my-lg-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-lg-n1,
    .mx-lg-n1 {
        margin-left: -0.25rem !important;
    }

    .m-lg-n2 {
        margin: -0.5rem !important;
    }

    .mt-lg-n2,
    .my-lg-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-lg-n2,
    .mx-lg-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-lg-n2,
    .my-lg-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-lg-n2,
    .mx-lg-n2 {
        margin-left: -0.5rem !important;
    }

    .m-lg-n3 {
        margin: -1rem !important;
    }

    .mt-lg-n3,
    .my-lg-n3 {
        margin-top: -1rem !important;
    }

    .mr-lg-n3,
    .mx-lg-n3 {
        margin-right: -1rem !important;
    }

    .mb-lg-n3,
    .my-lg-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-lg-n3,
    .mx-lg-n3 {
        margin-left: -1rem !important;
    }

    .m-lg-n4 {
        margin: -1.5rem !important;
    }

    .mt-lg-n4,
    .my-lg-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-lg-n4,
    .mx-lg-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-lg-n4,
    .my-lg-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-lg-n4,
    .mx-lg-n4 {
        margin-left: -1.5rem !important;
    }

    .m-lg-n5 {
        margin: -3rem !important;
    }

    .mt-lg-n5,
    .my-lg-n5 {
        margin-top: -3rem !important;
    }

    .mr-lg-n5,
    .mx-lg-n5 {
        margin-right: -3rem !important;
    }

    .mb-lg-n5,
    .my-lg-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-lg-n5,
    .mx-lg-n5 {
        margin-left: -3rem !important;
    }

    .m-lg-auto {
        margin: auto !important;
    }

    .mt-lg-auto,
    .my-lg-auto {
        margin-top: auto !important;
    }

    .mr-lg-auto,
    .mx-lg-auto {
        margin-right: auto !important;
    }

    .mb-lg-auto,
    .my-lg-auto {
        margin-bottom: auto !important;
    }

    .ml-lg-auto,
    .mx-lg-auto {
        margin-left: auto !important;
    }
}

@media (min-width: 1200px) {
    .m-xl-0 {
        margin: 0 !important;
    }

    .mt-xl-0,
    .my-xl-0 {
        margin-top: 0 !important;
    }

    .mr-xl-0,
    .mx-xl-0 {
        margin-right: 0 !important;
    }

    .mb-xl-0,
    .my-xl-0 {
        margin-bottom: 0 !important;
    }

    .ml-xl-0,
    .mx-xl-0 {
        margin-left: 0 !important;
    }

    .m-xl-1 {
        margin: 0.25rem !important;
    }

    .mt-xl-1,
    .my-xl-1 {
        margin-top: 0.25rem !important;
    }

    .mr-xl-1,
    .mx-xl-1 {
        margin-right: 0.25rem !important;
    }

    .mb-xl-1,
    .my-xl-1 {
        margin-bottom: 0.25rem !important;
    }

    .ml-xl-1,
    .mx-xl-1 {
        margin-left: 0.25rem !important;
    }

    .m-xl-2 {
        margin: 0.5rem !important;
    }

    .mt-xl-2,
    .my-xl-2 {
        margin-top: 0.5rem !important;
    }

    .mr-xl-2,
    .mx-xl-2 {
        margin-right: 0.5rem !important;
    }

    .mb-xl-2,
    .my-xl-2 {
        margin-bottom: 0.5rem !important;
    }

    .ml-xl-2,
    .mx-xl-2 {
        margin-left: 0.5rem !important;
    }

    .m-xl-3 {
        margin: 1rem !important;
    }

    .mt-xl-3,
    .my-xl-3 {
        margin-top: 1rem !important;
    }

    .mr-xl-3,
    .mx-xl-3 {
        margin-right: 1rem !important;
    }

    .mb-xl-3,
    .my-xl-3 {
        margin-bottom: 1rem !important;
    }

    .ml-xl-3,
    .mx-xl-3 {
        margin-left: 1rem !important;
    }

    .m-xl-4 {
        margin: 1.5rem !important;
    }

    .mt-xl-4,
    .my-xl-4 {
        margin-top: 1.5rem !important;
    }

    .mr-xl-4,
    .mx-xl-4 {
        margin-right: 1.5rem !important;
    }

    .mb-xl-4,
    .my-xl-4 {
        margin-bottom: 1.5rem !important;
    }

    .ml-xl-4,
    .mx-xl-4 {
        margin-left: 1.5rem !important;
    }

    .m-xl-5 {
        margin: 3rem !important;
    }

    .mt-xl-5,
    .my-xl-5 {
        margin-top: 3rem !important;
    }

    .mr-xl-5,
    .mx-xl-5 {
        margin-right: 3rem !important;
    }

    .mb-xl-5,
    .my-xl-5 {
        margin-bottom: 3rem !important;
    }

    .ml-xl-5,
    .mx-xl-5 {
        margin-left: 3rem !important;
    }

    .p-xl-0 {
        padding: 0 !important;
    }

    .pt-xl-0,
    .py-xl-0 {
        padding-top: 0 !important;
    }

    .pr-xl-0,
    .px-xl-0 {
        padding-right: 0 !important;
    }

    .pb-xl-0,
    .py-xl-0 {
        padding-bottom: 0 !important;
    }

    .pl-xl-0,
    .px-xl-0 {
        padding-left: 0 !important;
    }

    .p-xl-1 {
        padding: 0.25rem !important;
    }

    .pt-xl-1,
    .py-xl-1 {
        padding-top: 0.25rem !important;
    }

    .pr-xl-1,
    .px-xl-1 {
        padding-right: 0.25rem !important;
    }

    .pb-xl-1,
    .py-xl-1 {
        padding-bottom: 0.25rem !important;
    }

    .pl-xl-1,
    .px-xl-1 {
        padding-left: 0.25rem !important;
    }

    .p-xl-2 {
        padding: 0.5rem !important;
    }

    .pt-xl-2,
    .py-xl-2 {
        padding-top: 0.5rem !important;
    }

    .pr-xl-2,
    .px-xl-2 {
        padding-right: 0.5rem !important;
    }

    .pb-xl-2,
    .py-xl-2 {
        padding-bottom: 0.5rem !important;
    }

    .pl-xl-2,
    .px-xl-2 {
        padding-left: 0.5rem !important;
    }

    .p-xl-3 {
        padding: 1rem !important;
    }

    .pt-xl-3,
    .py-xl-3 {
        padding-top: 1rem !important;
    }

    .pr-xl-3,
    .px-xl-3 {
        padding-right: 1rem !important;
    }

    .pb-xl-3,
    .py-xl-3 {
        padding-bottom: 1rem !important;
    }

    .pl-xl-3,
    .px-xl-3 {
        padding-left: 1rem !important;
    }

    .p-xl-4 {
        padding: 1.5rem !important;
    }

    .pt-xl-4,
    .py-xl-4 {
        padding-top: 1.5rem !important;
    }

    .pr-xl-4,
    .px-xl-4 {
        padding-right: 1.5rem !important;
    }

    .pb-xl-4,
    .py-xl-4 {
        padding-bottom: 1.5rem !important;
    }

    .pl-xl-4,
    .px-xl-4 {
        padding-left: 1.5rem !important;
    }

    .p-xl-5 {
        padding: 3rem !important;
    }

    .pt-xl-5,
    .py-xl-5 {
        padding-top: 3rem !important;
    }

    .pr-xl-5,
    .px-xl-5 {
        padding-right: 3rem !important;
    }

    .pb-xl-5,
    .py-xl-5 {
        padding-bottom: 3rem !important;
    }

    .pl-xl-5,
    .px-xl-5 {
        padding-left: 3rem !important;
    }

    .m-xl-n1 {
        margin: -0.25rem !important;
    }

    .mt-xl-n1,
    .my-xl-n1 {
        margin-top: -0.25rem !important;
    }

    .mr-xl-n1,
    .mx-xl-n1 {
        margin-right: -0.25rem !important;
    }

    .mb-xl-n1,
    .my-xl-n1 {
        margin-bottom: -0.25rem !important;
    }

    .ml-xl-n1,
    .mx-xl-n1 {
        margin-left: -0.25rem !important;
    }

    .m-xl-n2 {
        margin: -0.5rem !important;
    }

    .mt-xl-n2,
    .my-xl-n2 {
        margin-top: -0.5rem !important;
    }

    .mr-xl-n2,
    .mx-xl-n2 {
        margin-right: -0.5rem !important;
    }

    .mb-xl-n2,
    .my-xl-n2 {
        margin-bottom: -0.5rem !important;
    }

    .ml-xl-n2,
    .mx-xl-n2 {
        margin-left: -0.5rem !important;
    }

    .m-xl-n3 {
        margin: -1rem !important;
    }

    .mt-xl-n3,
    .my-xl-n3 {
        margin-top: -1rem !important;
    }

    .mr-xl-n3,
    .mx-xl-n3 {
        margin-right: -1rem !important;
    }

    .mb-xl-n3,
    .my-xl-n3 {
        margin-bottom: -1rem !important;
    }

    .ml-xl-n3,
    .mx-xl-n3 {
        margin-left: -1rem !important;
    }

    .m-xl-n4 {
        margin: -1.5rem !important;
    }

    .mt-xl-n4,
    .my-xl-n4 {
        margin-top: -1.5rem !important;
    }

    .mr-xl-n4,
    .mx-xl-n4 {
        margin-right: -1.5rem !important;
    }

    .mb-xl-n4,
    .my-xl-n4 {
        margin-bottom: -1.5rem !important;
    }

    .ml-xl-n4,
    .mx-xl-n4 {
        margin-left: -1.5rem !important;
    }

    .m-xl-n5 {
        margin: -3rem !important;
    }

    .mt-xl-n5,
    .my-xl-n5 {
        margin-top: -3rem !important;
    }

    .mr-xl-n5,
    .mx-xl-n5 {
        margin-right: -3rem !important;
    }

    .mb-xl-n5,
    .my-xl-n5 {
        margin-bottom: -3rem !important;
    }

    .ml-xl-n5,
    .mx-xl-n5 {
        margin-left: -3rem !important;
    }

    .m-xl-auto {
        margin: auto !important;
    }

    .mt-xl-auto,
    .my-xl-auto {
        margin-top: auto !important;
    }

    .mr-xl-auto,
    .mx-xl-auto {
        margin-right: auto !important;
    }

    .mb-xl-auto,
    .my-xl-auto {
        margin-bottom: auto !important;
    }

    .ml-xl-auto,
    .mx-xl-auto {
        margin-left: auto !important;
    }
}

.stretched-link::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: rgba(0, 0, 0, 0);
}

.text-monospace {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

.text-justify {
    text-align: justify !important;
}

.text-wrap {
    white-space: normal !important;
}

.text-nowrap {
    white-space: nowrap !important;
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-left {
    text-align: left !important;
}

.img-left {
    display: block;
    margin-left: 0;
}

.text-right {
    text-align: right !important;
}

.text-center {
    text-align: center !important;
}

.div-center {
    margin: 0 auto;
}

.fullwidth {
    width: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}

/* Subtiele zebra-striping voor alle datagrids (grafiek Gegevens/Eigenschappen,
   debiteuren, objecten, alarm-historie, GJ-kosten). --ista-surface-alt is de
   gedocumenteerde zebra-tint en is voor light én dark thema gedefinieerd, dus
   één regel volstaat. Geselecteerde rijen (:not(.selected)) worden overgeslagen
   zodat de alarm-historie-selectie zichtbaar blijft; hover/selectie op #table1
   winnen sowieso op ID-specificiteit. */
table.fullwidth tbody tr:nth-child(even):not(.selected) {
    background-color: var(--ista-surface-alt);
}

.padding {
    padding: 0.5rem;
}

.cardPadding {
    padding: 20px 20px 20px 20px;
}

.size_40px {
    height: 40px;
    width: 40px;
}

.size_50px {
    height: 50px;
    width: 50px;
}

.tr-10 {
    opacity: 10%;
}

.tr-50 {
    opacity: 50%;
}

.tr-90 {
    opacity: 90%;
}

.tr-100 {
    opacity: 100%;
}

@media (min-width: 576px) {
    .text-sm-left {
        text-align: left !important;
    }

    .text-sm-right {
        text-align: right !important;
    }

    .text-sm-center {
        text-align: center !important;
    }
}

@media (min-width: 768px) {
    .text-md-left {
        text-align: left !important;
    }

    .text-md-right {
        text-align: right !important;
    }

    .text-md-center {
        text-align: center !important;
    }
}

@media (min-width: 992px) {
    .text-lg-left {
        text-align: left !important;
    }

    .text-lg-right {
        text-align: right !important;
    }

    .text-lg-center {
        text-align: center !important;
    }
}

@media (min-width: 1200px) {
    .text-xl-left {
        text-align: left !important;
    }

    .text-xl-right {
        text-align: right !important;
    }

    .text-xl-center {
        text-align: center !important;
    }
}

.text-lowercase {
    text-transform: lowercase !important;
}

.text-uppercase, .dropdown .dropdown-menu .dropdown-header, .sidebar .sidebar-heading {
    text-transform: uppercase !important;
}

.text-capitalize {
    text-transform: capitalize !important;
}

.font-weight-light {
    font-weight: 300 !important;
}

.font-weight-lighter {
    font-weight: lighter !important;
}

.font-weight-normal {
    font-weight: 400 !important;
}

.font-weight-bold {
    font-weight: 700 !important;
}

.font-weight-bolder {
    font-weight: bolder !important;
}

.font-italic {
    font-style: italic !important;
}

.text-white {
    color: #fff !important;
}

.text-primary {
    color: #4e73df !important;
}

a.text-primary:hover, a.text-primary:focus {
    color: #224abe !important;
}

.text-secondary {
    color: #858796 !important;
}

a.text-secondary:hover, a.text-secondary:focus {
    color: #60616f !important;
}

.text-success {
    color: var(--istaColorPeriod1) !important;
}

a.text-success:hover, a.text-success:focus {
    color: #13855c !important;
}

.text-info {
    color: #36b9cc !important;
}

a.text-info:hover, a.text-info:focus {
    color: #258391 !important;
}

.text-warning {
    color: #f6c23e !important;
}

a.text-warning:hover, a.text-warning:focus {
    color: #dda20a !important;
}

.text-danger {
    color: #e74a3b !important;
}

a.text-danger:hover, a.text-danger:focus {
    color: #be2617 !important;
}

.text-light {
    color: #f8f9fc !important;
}

a.text-light:hover, a.text-light:focus {
    color: #c2cbe5 !important;
}

.text-dark {
    color: #5a5c69 !important;
}

a.text-dark:hover, a.text-dark:focus {
    color: #373840 !important;
}

.text-body {
    color: #858796 !important;
}

/* Was de vaste grijstint #858796: op wit 3,56:1 (onder de 4,5:1 van WCAG 2.2
   1.4.3) en hij negeerde het thema volledig, dus in het donkere thema stond
   deze tekst als donkergrijs op een donkere kaart. Nu via de thema-variabele:
   4,70:1 in licht, en licht grijs in donker/hoog contrast. Gemeten in fase F4
   (docs/ReduQ-Viewport-Density-Plan.md). */
.text-muted {
    color: var(--ista-text-muted) !important;
}

.text-black-50 {
    color: rgba(0, 0, 0, 0.5) !important;
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

.text-decoration-none {
    text-decoration: none !important;
}

.text-break {
    word-wrap: break-word !important;
}

.text-reset {
    color: inherit !important;
}

.visible {
    visibility: visible !important;
}

.invisible {
    visibility: hidden !important;
}

@media print {
    *,
    *::before,
    *::after {
        text-shadow: none !important;
        box-shadow: none !important;
    }

    a:not(.btn) {
        text-decoration: underline;
    }

    abbr[title]::after {
        content: " (" attr(title) ")";
    }

    pre {
        white-space: pre-wrap !important;
    }

    pre,
    blockquote {
        border: 1px solid #b7b9cc;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }

    @page {
        size: a3;
    }

    body {
        min-width: 992px !important;
    }

    .container {
        min-width: 992px !important;
    }

    .navbar {
        display: none;
    }

    .badge {
        border: 1px solid #000;
    }

    .table {
        border-collapse: collapse !important;
    }

        .table td,
        .table th {
            background-color: #fff !important;
        }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #dddfeb !important;
    }

    .table-dark {
        color: inherit;
    }

        .table-dark th,
        .table-dark td,
        .table-dark thead th,
        .table-dark tbody + tbody {
            border-color: var(--istaGray);
        }

    .table .thead-dark th {
        color: inherit;
        border-color: var(--istaGray);
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    height: 100%;
}

a:focus {
    outline: none;
}

#wrapper {
    display: flex;
}

    #wrapper #content-wrapper {
        background-color: #f8f9fc;
        width: 100%;
        overflow-x: hidden;
    }

        #wrapper #content-wrapper #content {
            flex: 1 0 auto;
        }

.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.scroll-to-top {
    position: fixed;
    right: 1rem;
    bottom: 3rem;
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    text-align: center;
    color: #fff;
    background: rgba(90, 92, 105, 0.5);
    line-height: 46px;
}

    .scroll-to-top:focus, .scroll-to-top:hover {
        color: white;
    }

    .scroll-to-top:hover {
        background: #5a5c69;
    }

    .scroll-to-top i {
        font-weight: 800;
    }

@-webkit-keyframes growIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes growIn {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.animated--grow-in, .sidebar .nav-item .collapse {
    -webkit-animation-name: growIn;
    animation-name: growIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.animated--fade-in {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 200ms;
    animation-duration: 200ms;
    -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
    animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

.bg-gradient-primary {
    background-color: #0a2864;
    background-image: linear-gradient(180deg, #0a2864 10%, #224abe 100%);
    background-size: cover;
}

.bg-gradient-secondary {
    background-color: #858796;
    background-image: linear-gradient(180deg, #858796 10%, #60616f 100%);
    background-size: cover;
}

.bg-gradient-success {
    background-color: #1cc88a;
    background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
    background-size: cover;
}

.bg-gradient-info {
    background-color: #36b9cc;
    background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
    background-size: cover;
}

.bg-gradient-warning {
    background-color: #f6c23e;
    background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
    background-size: cover;
}

.bg-gradient-danger {
    background-color: #e74a3b;
    background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
    background-size: cover;
}

.bg-gradient-light {
    background-color: #f8f9fc;
    background-image: linear-gradient(180deg, #f8f9fc 10%, #c2cbe5 100%);
    background-size: cover;
}

.bg-gradient-dark {
    background-color: #5a5c69;
    background-image: linear-gradient(180deg, #5a5c69 10%, #373840 100%);
    background-size: cover;
}

.bg-gray-100 {
    background-color: #f8f9fc !important;
}

.bg-gray-200 {
    background-color: #eaecf4 !important;
}

.bg-gray-300 {
    background-color: #dddfeb !important;
}

.bg-gray-400 {
    background-color: #d1d3e2 !important;
}

.bg-gray-500 {
    background-color: #b7b9cc !important;
}

.bg-gray-600 {
    background-color: #858796 !important;
}

.bg-gray-700 {
    background-color: #6e707e !important;
}

.bg-gray-800 {
    background-color: #5a5c69 !important;
}

.bg-gray-900 {
    background-color: #3a3b45 !important;
}

.o-hidden {
    overflow: hidden !important;
}

.text-xs {
    font-size: .7rem;
}

.text-lg {
    font-size: 1.2rem;
}

.text-gray-100 {
    color: #f8f9fc !important;
}

.text-gray-200 {
    color: #eaecf4 !important;
}

.text-gray-300 {
    color: #dddfeb !important;
}

.text-gray-400 {
    color: #d1d3e2 !important;
}

.text-gray-500 {
    color: #b7b9cc !important;
}

.text-gray-600 {
    color: #858796 !important;
}

.text-gray-700 {
    color: #6e707e !important;
}

.text-gray-800 {
    color: #5a5c69 !important;
}

.text-gray-900 {
    color: #3a3b45 !important;
}

.icon-circle {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
    border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
    border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
    border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
    border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
    border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
    border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
    border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
    border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
    border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
    border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
    border-bottom: 0.25rem solid #5a5c69 !important;
}

.progress-sm {
    height: .5rem;
}

.rotate-15 {
    transform: rotate(15deg);
}

.rotate-n-15 {
    transform: rotate(-15deg);
}

.dropdown .dropdown-menu {
    font-size: 0.85rem;
}

    .dropdown .dropdown-menu .dropdown-header {
        font-weight: 800;
        font-size: 0.65rem;
        color: #b7b9cc;
    }

.dropdown.no-arrow .dropdown-toggle::after {
    display: none;
}

.sidebar .nav-item.dropdown .dropdown-toggle::after,
.topbar .nav-item.dropdown .dropdown-toggle::after {
    width: 1rem;
    text-align: center;
    float: right;
    vertical-align: 0;
    border: 0;
    font-weight: 900;
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
}

.sidebar .nav-item.dropdown.show .dropdown-toggle::after,
.topbar .nav-item.dropdown.show .dropdown-toggle::after {
    content: '\f107';
}

.sidebar .nav-item .nav-link,
.topbar .nav-item .nav-link {
    position: relative;
}

/* Capability-gated sidebar item (e.g. "Alarmen" when the selected object has no
   alarm-capable meters): greyed and non-interactive. menu.js toggles .disabled. */
.sidebar .nav-item.disabled .nav-link,
.sidebar .nav-item .nav-link.disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Alarm-history rows drill into the alarm detail on click. */
.alarm-history-row { cursor: pointer; }
.alarm-history-row:hover { background: #F5F5FF; }
html[data-theme="dark"] .alarm-history-row:hover { background: var(--ista-surface-alt); }

/* Selected history row (the one whose details are shown). A clear accent tint +
   left accent bar, with a dark-mode variant (the light tint is invisible on the
   dark surface — reuse the same translucent accent as the debtor/property
   selection above). The selected state outranks :hover so it stays visible. */
.alarm-history-row.selected,
.alarm-history-row.selected:hover { background: #e1ecfb; }
.alarm-history-row.selected td:first-child { box-shadow: inset 3px 0 0 var(--ista-accent); }
html[data-theme="dark"] .alarm-history-row.selected,
html[data-theme="dark"] .alarm-history-row.selected:hover { background: rgba(28, 126, 214, 0.32); }
html[data-theme="dark"] .alarm-history-row.selected td { color: var(--ista-text); }

/* While a row's detail is loading: block further row clicks (no stacking up
   multiple selections) and show a busy cursor; the spinner below signals it. */
#tableDiv.is-loading-detail .alarm-history-row { pointer-events: none; cursor: progress; }
.alarm-detail-loading {
    display: flex;
    justify-content: center;
    padding: 16px;
    color: var(--ista-accent);
}

    .sidebar .nav-item .nav-link .badge-counter,
    .topbar .nav-item .nav-link .badge-counter {
        position: absolute;
        transform: scale(0.7);
        transform-origin: top right;
        right: .25rem;
        margin-top: -.25rem;
    }

    .sidebar .nav-item .nav-link .img-profile,
    .topbar .nav-item .nav-link .img-profile {
        height: 2rem;
        width: 2rem;
    }

.topbar {
    height: 4.375rem;
}

    .topbar #sidebarToggleTop {
        height: 2.5rem;
        width: 2.5rem;
    }

        .topbar #sidebarToggleTop:hover {
            background-color: #eaecf4;
        }

        .topbar #sidebarToggleTop:active {
            background-color: #dddfeb;
        }

    .topbar .navbar-search {
        width: 25rem;
    }

        .topbar .navbar-search input {
            font-size: 0.85rem;
            height: auto;
        }

    .topbar .topbar-divider {
        width: 0;
        border-right: 1px solid var(--istaGray);
        height: calc(4.375rem - 2rem);
        margin: auto 1rem;
    }

    .topbar .nav-item .nav-link {
        height: 4.375rem;
        display: flex;
        align-items: center;
        padding: 0 0.75rem;
    }

        .topbar .nav-item .nav-link:focus {
            outline: none;
        }

    .topbar .nav-item:focus {
        outline: none;
    }

    .topbar .dropdown {
        position: static;
    }

        .topbar .dropdown .dropdown-menu {
            width: calc(100% - 1.5rem);
            right: 0.75rem;
        }

    .topbar .dropdown-list {
        padding: 0;
        border: none;
        overflow: hidden;
    }

        .topbar .dropdown-list .dropdown-item {
            white-space: normal;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-left: 1px solid var(--istaGray);
            border-right: 1px solid var(--istaGray);
            border-bottom: 1px solid var(--istaGray);
            line-height: 1.3rem;
        }

            .topbar .dropdown-list .dropdown-item .dropdown-list-image {
                position: relative;
                height: 2.5rem;
                width: 2.5rem;
            }

                .topbar .dropdown-list .dropdown-item .dropdown-list-image img {
                    height: 2.5rem;
                    width: 2.5rem;
                }

                .topbar .dropdown-list .dropdown-item .dropdown-list-image .status-indicator {
                    background-color: #eaecf4;
                    height: 0.75rem;
                    width: 0.75rem;
                    border-radius: 100%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    border: 0.125rem solid #fff;
                }

            .topbar .dropdown-list .dropdown-item .text-truncate {
                max-width: 10rem;
            }

            .topbar .dropdown-list .dropdown-item:active {
                background-color: #eaecf4;
                color: #3a3b45;
            }

@media (min-width: 576px) {
    .topbar .dropdown {
        position: relative;
    }

        .topbar .dropdown .dropdown-menu {
            width: auto;
            right: 0;
        }

    .topbar .dropdown-list {
        width: 20rem !important;
    }

        .topbar .dropdown-list .dropdown-item .text-truncate {
            max-width: 13.375rem;
        }
}

.topbar.navbar-dark .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

    .topbar.navbar-dark .navbar-nav .nav-item .nav-link:hover {
        color: var(--istaColorPeriod1);
    }

    .topbar.navbar-dark .navbar-nav .nav-item .nav-link:active {
        color: var(--istaColorPeriod1);
    }

.topbar.navbar-light .navbar-nav .nav-item .nav-link {
    color: #d1d3e2;
}

    .topbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
        color: #b7b9cc;
    }

    .topbar.navbar-light .navbar-nav .nav-item .nav-link:active {
        color: #858796;
    }

.sidebar {
    width: 6.5rem;
    min-height: 100vh;
    background-color: var(--istaColorSidebarBack);
}

    .sidebar .nav-item {
        position: relative;
    }

        .sidebar .nav-item:last-child {
            margin-bottom: 1rem;
        }

        .sidebar .nav-item .nav-link {
            text-align: center;
            padding: 0.75rem 1rem;
            width: 6.5rem;
        }

            .sidebar .nav-item .nav-link span {
                font-size: 0.65rem;
                display: block;
            }

        .sidebar .nav-item.active .nav-link {
            font-weight: 700;
        }

        .sidebar .nav-item .collapse {
            position: absolute;
            left: calc(6.5rem + 1.5rem / 2);
            z-index: 1;
            top: 2px;
        }

            .sidebar .nav-item .collapse .collapse-inner {
                border-radius: 0.35rem;
                box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            }

        .sidebar .nav-item .collapsing {
            display: none;
            transition: none;
        }

            .sidebar .nav-item .collapse .collapse-inner,
            .sidebar .nav-item .collapsing .collapse-inner {
                padding: .5rem 0;
                min-width: 10rem;
                font-size: 0.85rem;
                margin: 0 0 1rem 0;
            }

                .sidebar .nav-item .collapse .collapse-inner .collapse-header,
                .sidebar .nav-item .collapsing .collapse-inner .collapse-header {
                    margin: 0;
                    white-space: nowrap;
                    padding: .5rem 1.5rem;
                    text-transform: uppercase;
                    font-weight: 800;
                    font-size: 0.65rem;
                    color: #b7b9cc;
                }

                .sidebar .nav-item .collapse .collapse-inner .collapse-item,
                .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
                    padding: 0.5rem 1rem;
                    margin: 0 0.5rem;
                    display: block;
                    color: #3a3b45;
                    text-decoration: none;
                    border-radius: 0.35rem;
                    white-space: nowrap;
                }

                    .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
                    .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
                        background-color: #eaecf4;
                    }

                    .sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
                    .sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
                        background-color: var(--istaColorPeriod1);
                    }

                    .sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
                    .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
                        color: #4e73df;
                        font-weight: 700;
                    }

    .sidebar #sidebarToggle {
        width: 2.5rem;
        height: 2.5rem;
        text-align: center;
        margin-bottom: 1rem;
        cursor: pointer;
    }

        .sidebar #sidebarToggle::after {
            font-weight: 900;
            content: '\f104';
            font-family: 'Font Awesome 5 Free';
            margin-right: 0.1rem;
        }

        .sidebar #sidebarToggle:hover {
            text-decoration: none;
        }

        .sidebar #sidebarToggle:focus {
            outline: none;
        }

    .sidebar.toggled {
        width: 0 !important;
        overflow: hidden;
    }

        .sidebar.toggled #sidebarToggle::after {
            content: '\f105';
            font-family: 'Font Awesome 5 Free';
            margin-left: 0.25rem;
        }

    .sidebar .sidebar-brand {
        height: 4.375rem;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 800;
        padding: 1.5rem 1rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        z-index: 1;
    }

        .sidebar .sidebar-brand .sidebar-brand-icon i {
            font-size: 2rem;
        }

        .sidebar .sidebar-brand .sidebar-brand-text {
            display: none;
        }

    .sidebar hr.sidebar-divider {
        margin: 0 1rem 1rem;
    }

    .sidebar .sidebar-heading {
        text-align: center;
        padding: 0 1rem;
        font-weight: 800;
        font-size: 0.65rem;
    }

@media (min-width: 768px) {
    .sidebar {
        width: 14rem !important;
    }

        .sidebar .nav-item .collapse {
            position: relative;
            left: 0;
            z-index: 1;
            top: 0;
            -webkit-animation: none;
            animation: none;
        }

            .sidebar .nav-item .collapse .collapse-inner {
                border-radius: 0;
                box-shadow: none;
            }

        .sidebar .nav-item .collapsing {
            display: block;
            transition: height 0.15s ease;
        }

        .sidebar .nav-item .collapse,
        .sidebar .nav-item .collapsing {
            margin: 0 1rem;
        }

        .sidebar .nav-item .nav-link {
            display: block;
            width: 100%;
            text-align: left;
            padding: 1rem;
            width: 14rem;
        }

            .sidebar .nav-item .nav-link i {
                font-size: 0.85rem;
                margin-right: 0.25rem;
            }

            .sidebar .nav-item .nav-link span {
                font-size: 0.85rem;
                display: inline;
            }

            .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
                width: 1rem;
                text-align: center;
                float: right;
                vertical-align: 0;
                border: 0;
                font-weight: 900;
                content: '\f107';
                font-family: 'Font Awesome 5 Free';
            }

            .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
                content: '\f105';
            }

        .sidebar .sidebar-brand .sidebar-brand-icon i {
            font-size: 2rem;
        }

        .sidebar .sidebar-brand .sidebar-brand-text {
            display: inline;
        }

        .sidebar .sidebar-heading {
            text-align: left;
        }

        .sidebar.toggled {
            overflow: visible;
            width: 8rem !important;
        }

            .sidebar.toggled .nav-item .collapse {
                position: absolute;
                left: calc(6.5rem + 1.5rem / 2);
                z-index: 1;
                top: 2px;
                -webkit-animation-name: growIn;
                animation-name: growIn;
                -webkit-animation-duration: 200ms;
                animation-duration: 200ms;
                -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
                animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
            }

                .sidebar.toggled .nav-item .collapse .collapse-inner {
                    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
                    border-radius: 0.35rem;
                }

            .sidebar.toggled .nav-item .collapsing {
                display: none;
                transition: none;
            }

            .sidebar.toggled .nav-item .collapse,
            .sidebar.toggled .nav-item .collapsing {
                margin: 0;
            }

            .sidebar.toggled .nav-item:last-child {
                margin-bottom: 1rem;
            }

            .sidebar.toggled .nav-item .nav-link {
                text-align: center;
                padding: 0.75rem 1rem;
                width: 8rem;
            }

                .sidebar.toggled .nav-item .nav-link span {
                    font-size: 0.65rem;
                    display: block;
                }

                .sidebar.toggled .nav-item .nav-link i {
                    margin-right: 0;
                }

                .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after {
                    display: none;
                }

            .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
                font-size: 2rem;
            }

            .sidebar.toggled .sidebar-brand .sidebar-brand-text {
                display: none;
            }

            .sidebar.toggled .sidebar-heading {
                text-align: center;
            }
}

.sidebar-light .sidebar-brand {
    color: #6e707e;
}

.sidebar-light hr.sidebar-divider {
    border-top: 1px solid #eaecf4;
}

.sidebar-light .sidebar-heading {
    color: #b7b9cc;
}

.sidebar-light .nav-item .nav-link {
    color: #858796;
}

    .sidebar-light .nav-item .nav-link i {
        color: #d1d3e2;
    }

    .sidebar-light .nav-item .nav-link:active, .sidebar-light .nav-item .nav-link:focus, .sidebar-light .nav-item .nav-link:hover {
        color: #6e707e;
    }

        .sidebar-light .nav-item .nav-link:active i, .sidebar-light .nav-item .nav-link:focus i, .sidebar-light .nav-item .nav-link:hover i {
            color: #6e707e;
        }

    .sidebar-light .nav-item .nav-link[data-toggle="collapse"]::after {
        color: #b7b9cc;
    }

.sidebar-light .nav-item.active .nav-link {
    color: #6e707e;
}

    .sidebar-light .nav-item.active .nav-link i {
        color: #6e707e;
    }

.sidebar-light #sidebarToggle {
    background-color: #eaecf4;
}

    .sidebar-light #sidebarToggle::after {
        color: #b7b9cc;
    }

    .sidebar-light #sidebarToggle:hover {
        background-color: #dddfeb;
    }

.sidebar-dark .sidebar-brand {
    color: #fff;
}

.sidebar-dark hr.sidebar-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar-dark .sidebar-heading {
    color: rgba(255, 255, 255, 0.4);
}

.sidebar-dark .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.8);
}

    .sidebar-dark .nav-item .nav-link i {
        color: rgba(255, 255, 255, 0.3);
    }

    .sidebar-dark .nav-item .nav-link:active, .sidebar-dark .nav-item .nav-link:focus, .sidebar-dark .nav-item .nav-link:hover {
        color: #fff;
    }

        .sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover {
            color: #fff;
        }

            .sidebar-dark .nav-item .nav-link:active i, .sidebar-dark .nav-item .nav-link:focus i, .sidebar-dark .nav-item .nav-link:hover i {
                color: var(--istaColorPeriod1);
            }

    .sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
        color: rgba(255, 255, 255, 0.5);
    }

.sidebar-dark .nav-item.active .nav-link {
    color: #fff;
}

    .sidebar-dark .nav-item.active .nav-link i {
        color: var(--istaColorPeriod1);
    }


.sidebar-dark #sidebarToggle {
    background-color: rgba(255, 255, 255, 0.2);
}

    .sidebar-dark #sidebarToggle::after {
        color: rgba(255, 255, 255, 0.5);
    }

    .sidebar-dark #sidebarToggle:hover {
        background-color: rgba(255, 255, 255, 0.25);
    }

.sidebar-dark.toggled #sidebarToggle::after {
    color: rgba(255, 255, 255, 0.5);
}

.btn-circle {
    border-radius: 100%;
    height: 2.5rem;
    width: 2.5rem;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-circle.btn-sm, .btn-group-sm > .btn-circle.btn {
        height: 1.8rem;
        width: 1.8rem;
        font-size: 0.75rem;
    }

    .btn-circle.btn-lg, .btn-group-lg > .btn-circle.btn {
        height: 3.5rem;
        width: 3.5rem;
        font-size: 1.35rem;
    }

.btn-icon-split {
    padding: 0;
    overflow: hidden;
    display: inline-flex;
    align-items: stretch;
    justify-content: center;
}

    .btn-icon-split .icon {
        background: rgba(0, 0, 0, 0.15);
        display: inline-block;
        padding: 0.375rem 0.75rem;
    }

    .btn-icon-split .text {
        display: inline-block;
        padding: 0.375rem 0.75rem;
    }

    .btn-icon-split.btn-sm .icon, .btn-group-sm > .btn-icon-split.btn .icon {
        padding: 0.25rem 0.5rem;
    }

    .btn-icon-split.btn-sm .text, .btn-group-sm > .btn-icon-split.btn .text {
        padding: 0.25rem 0.5rem;
    }

    .btn-icon-split.btn-lg .icon, .btn-group-lg > .btn-icon-split.btn .icon {
        padding: 0.5rem 1rem;
    }

    .btn-icon-split.btn-lg .text, .btn-group-lg > .btn-icon-split.btn .text {
        padding: 0.5rem 1rem;
    }

.card .card-header .dropdown {
    line-height: 1;
}

    .card .card-header .dropdown .dropdown-menu {
        line-height: 1.5;
    }

.card .card-header[data-toggle="collapse"] {
    text-decoration: none;
    position: relative;
    padding: 0.75rem 3.25rem 0.75rem 1.25rem;
}

    .card .card-header[data-toggle="collapse"]::after {
        position: absolute;
        right: 0;
        top: 0;
        padding-right: 1.725rem;
        line-height: 51px;
        font-weight: 900;
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        color: #d1d3e2;
    }

    .card .card-header[data-toggle="collapse"].collapsed {
        border-radius: 0.35rem;
    }

        .card .card-header[data-toggle="collapse"].collapsed::after {
            content: '\f105';
        }

.bg-login-image {
    background: url("../img/swimlane-security.svg");
    background-position: center;
    background-size: 100% 100%;
}

.bg-register-image {
    background: url("https://source.unsplash.com/Mv9hjnEUHR4/600x800");
    background-position: center;
    background-size: cover;
}

.bg-password-image {
    background: url("https://source.unsplash.com/oWTW-jNGl9I/600x800");
    background-position: center;
    background-size: cover;
}

form.user .custom-checkbox.small label {
    line-height: 1.5rem;
}

form.user .form-control-user {
    font-size: 0.8rem;
    padding: 1.5rem 1rem;
}

form.user .btn-user {
    font-size: 1rem;
    padding: 0.75rem 1rem;
}

form.user .btn-userOld {
    font-size: 1rem;
    border-radius: 10rem;
    padding: 0.75rem 1rem;
}

    .btn-google:hover {
        color: #fff;
        background-color: #e12717;
        border-color: #e6e6e6;
    }

    .btn-google:focus, .btn-google.focus {
        color: #fff;
        background-color: #e12717;
        border-color: #e6e6e6;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
    }

    .btn-google:not(:disabled):not(.disabled):active, .btn-google:not(:disabled):not(.disabled).active,
    .show > .btn-google.dropdown-toggle {
        color: #fff;
        background-color: #d62516;
        border-color: #dfdfdf;
    }

        .btn-google:not(:disabled):not(.disabled):active:focus, .btn-google:not(:disabled):not(.disabled).active:focus,
        .show > .btn-google.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

.btn-facebook {
    color: #fff;
    background-color: #3b5998;
    border-color: #fff;
}

    .btn-facebook:hover {
        color: #fff;
        background-color: #30497c;
        border-color: #e6e6e6;
    }

    .btn-facebook:focus, .btn-facebook.focus {
        color: #fff;
        background-color: #30497c;
        border-color: #e6e6e6;
        box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
    }

    .btn-facebook.disabled, .btn-facebook:disabled {
        color: #fff;
        background-color: #3b5998;
        border-color: #fff;
    }

    .btn-facebook:not(:disabled):not(.disabled):active, .btn-facebook:not(:disabled):not(.disabled).active,
    .show > .btn-facebook.dropdown-toggle {
        color: #fff;
        background-color: #2d4373;
        border-color: #dfdfdf;
    }

        .btn-facebook:not(:disabled):not(.disabled):active:focus, .btn-facebook:not(:disabled):not(.disabled).active:focus,
        .show > .btn-facebook.dropdown-toggle:focus {
            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
        }

.error {
    color: #5a5c69;
    font-size: 7rem;
    position: relative;
    line-height: 1;
    width: 12.5rem;
}

@keyframes noise-anim {
    0% {
        clip: rect(78px, 9999px, 4px, 0);
    }

    5% {
        clip: rect(87px, 9999px, 70px, 0);
    }

    10% {
        clip: rect(21px, 9999px, 60px, 0);
    }

    15% {
        clip: rect(79px, 9999px, 83px, 0);
    }

    20% {
        clip: rect(20px, 9999px, 28px, 0);
    }

    25% {
        clip: rect(42px, 9999px, 78px, 0);
    }

    30% {
        clip: rect(71px, 9999px, 37px, 0);
    }

    35% {
        clip: rect(89px, 9999px, 49px, 0);
    }

    40% {
        clip: rect(36px, 9999px, 48px, 0);
    }

    45% {
        clip: rect(77px, 9999px, 67px, 0);
    }

    50% {
        clip: rect(7px, 9999px, 94px, 0);
    }

    55% {
        clip: rect(90px, 9999px, 79px, 0);
    }

    60% {
        clip: rect(48px, 9999px, 57px, 0);
    }

    65% {
        clip: rect(64px, 9999px, 35px, 0);
    }

    70% {
        clip: rect(23px, 9999px, 88px, 0);
    }

    75% {
        clip: rect(68px, 9999px, 27px, 0);
    }

    80% {
        clip: rect(39px, 9999px, 98px, 0);
    }

    85% {
        clip: rect(97px, 9999px, 57px, 0);
    }

    90% {
        clip: rect(61px, 9999px, 53px, 0);
    }

    95% {
        clip: rect(79px, 9999px, 44px, 0);
    }

    100% {
        clip: rect(12px, 9999px, 19px, 0);
    }
}

.error:after {
    content: attr(data-text);
    position: absolute;
    left: 2px;
    text-shadow: -1px 0 #e74a3b;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim 2s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
    0% {
        clip: rect(20px, 9999px, 91px, 0);
    }

    5% {
        clip: rect(20px, 9999px, 44px, 0);
    }

    10% {
        clip: rect(84px, 9999px, 55px, 0);
    }

    15% {
        clip: rect(40px, 9999px, 93px, 0);
    }

    20% {
        clip: rect(37px, 9999px, 73px, 0);
    }

    25% {
        clip: rect(75px, 9999px, 57px, 0);
    }

    30% {
        clip: rect(89px, 9999px, 38px, 0);
    }

    35% {
        clip: rect(6px, 9999px, 68px, 0);
    }

    40% {
        clip: rect(63px, 9999px, 17px, 0);
    }

    45% {
        clip: rect(55px, 9999px, 49px, 0);
    }

    50% {
        clip: rect(98px, 9999px, 28px, 0);
    }

    55% {
        clip: rect(18px, 9999px, 57px, 0);
    }

    60% {
        clip: rect(18px, 9999px, 64px, 0);
    }

    65% {
        clip: rect(35px, 9999px, 77px, 0);
    }

    70% {
        clip: rect(31px, 9999px, 59px, 0);
    }

    75% {
        clip: rect(30px, 9999px, 38px, 0);
    }

    80% {
        clip: rect(13px, 9999px, 52px, 0);
    }

    85% {
        clip: rect(63px, 9999px, 91px, 0);
    }

    90% {
        clip: rect(96px, 9999px, 67px, 0);
    }

    95% {
        clip: rect(24px, 9999px, 13px, 0);
    }

    100% {
        clip: rect(5px, 9999px, 29px, 0);
    }
}

.error:before {
    content: attr(data-text);
    position: absolute;
    left: -2px;
    text-shadow: 1px 0 #4e73df;
    top: 0;
    color: #5a5c69;
    background: #f8f9fc;
    overflow: hidden;
    clip: rect(0, 900px, 0, 0);
    animation: noise-anim-2 3s infinite linear alternate-reverse;
}

footer.sticky-footer {
    padding: 2rem 0;
    flex-shrink: 0;
}

    footer.sticky-footer .copyright {
        line-height: 1;
        font-size: 0.8rem;
    }

body.sidebar-toggled footer.sticky-footer {
    width: 100%;
}

.autocomplete {
    position: relative;
    display: inline-block;
}

.autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    min-width: 100px;
    max-width: 150px;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
}

    .autocomplete-items div {
        padding: 10px;
        cursor: pointer;
        background-color: #fff;
        border-bottom: 1px solid #d4d4d4;
    }

        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9;
        }

/* De rij die met de pijltjestoetsen is aangewezen. Was DodgerBlue met witte
   tekst: 3,24:1 en dus onder de 4,5:1 van WCAG 2.2 1.4.3; --ista-accent-strong
   haalt 6,68:1 (gemeten met scripts/check-contrast.mjs).
   Het !important blijft nodig: .autocomplete-items div:hover hierboven heeft
   specificiteit (0,2,1) tegen de (0,1,0) van deze klasse, dus zonder !important
   wint de hover-grijstint zodra de muis ook boven de aangewezen rij staat. */
.autocomplete-active {
    background-color: var(--ista-accent-strong) !important;
    color: #ffffff;
}

.percbox {
    min-width: 100px;
    max-width: 150px;
    margin-top: 8px;
}

.ajax-loader {
    background-color: #f8f8f8;
    display: block;
    height: 100%;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    opacity: 0.9;
    position: absolute;
    top: 0;
    width: 100%;
}

    .ajax-loader img {
        left: 50%;
        margin-left: -33px;
        margin-top: -33px;
        position: absolute;
        top: 50%;
    }






input:invalid {
    border-color: red;
}

input,
input:valid {
    border-color: var(--istaGray);
}

.lowercase-input {
    text-transform: lowercase;
}

.iOSCheckContainer {
    position: relative;
    height: 27px;
    cursor: pointer;
    overflow: hidden;
}

    .iOSCheckContainer input {
        position: absolute;
        top: 5px;
        left: 30px;
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
        opacity: 0;
    }

    .iOSCheckContainer label {
        white-space: nowrap;
        font-size: 17px;
        line-height: 17px;
        font-weight: bold;
        font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
        cursor: pointer;
        display: block;
        height: 27px;
        position: absolute;
        width: auto;
        top: 0;
        padding-top: 5px;
        overflow: hidden;
    }

    .iOSCheckContainer, .iOSCheckContainer label {
        user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
    }

.iOSCheckDisabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5;
}

label.iOSCheckLabelOn {
    color: white;
    background: url('/img/ios-style-checkboxes/on.png?1284697268') no-repeat;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
    left: 0;
    padding-top: 5px;
}

    label.iOSCheckLabelOn span {
        padding-left: 8px;
    }

label.iOSCheckLabelOff {
    color: #8b8b8b;
    background: url('/img/ios-style-checkboxes/off.png?1284697268') no-repeat right 0;
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.6);
    text-align: right;
    right: 0;
}

    label.iOSCheckLabelOff span {
        padding-right: 8px;
    }

.iOSCheckHandle {
    display: block;
    height: 27px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    background: url('/img/ios-style-checkboxes/slider_left.png?1284697268') no-repeat;
    padding-left: 3px;
}

.iOSCheckHandleRight {
    height: 100%;
    width: 100%;
    padding-right: 3px;
    background: url('/img/ios-style-checkboxes/slider_right.png?1284697268') no-repeat right 0;
}

.iOSCheckHandleCenter {
    height: 100%;
    width: 100%;
    background: url('/img/ios-style-checkboxes/slider_center.png?1284697268');
}

.table-container {
    display: grid;
    grid-template-columns: 1fr;
}

.table-rowGroepRights {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.table-rowProfile {
    display: grid;
    grid-template-columns: 150px auto;
    gap: 10px;
    margin-bottom: 10px;
}

.table-rowTopMenuTitle {
    display: grid;
    grid-template-columns: 30px auto;
    gap: 10px;
    margin-bottom: 10px;
}

.table-cell {
    padding: 5px;
    display: flex;
    align-items: left;
}

.voffset-u2 {
    position: relative;
    top: -2px;
}

.voffset-d5 {
    position: relative;
    top: 5px;
}

.hoffset-l2 {
    position: relative;
    left: -2px;
}

.menu-icon {
    background-size: cover;
    width: 25px;
    height: 25px;
    display: block;
    background-repeat: no-repeat;
}

.menu-icon-1 {
    background-image: url('/img/icons/oceanblue/dashboard.svg');
}

    .menu-icon-1.active {
        background-image: url('/img/icons/skyblue/dashboard.svg');
    }

.menu-icon-2 {
    background-image: url('/img/icons/oceanblue/usermgt.svg');
}

    .menu-icon-2.active {
        background-image: url('/img/icons/skyblue/usermgt.svg');
    }

.menu-icon-3 {
    background-image: url('/img/icons/oceanblue/uploads.svg');
}

    .menu-icon-3.active {
        background-image: url('/img/icons/skyblue/uploads.svg');
    }

.menu-icon-4 {
    background-image: url('/img/icons/oceanblue/status.svg');
}

    .menu-icon-4.active {
        background-image: url('/img/icons/skyblue/status.svg');
    }

.menu-icon-5 {
    background-image: url('/img/icons/gray/download.svg');
}

    .menu-icon-5.active {
        background-image: url('/img/icons/gray/download.svg');
    }

.menu-icon-6 {
    background-image: url('/img/icons/oceanblue/contract.svg');
}

    .menu-icon-6.active {
        background-image: url('/img/icons/skyblue/contract.svg');
    }

.menu-icon-7 {
    background-image: url('/img/icons/oceanblue/monitoring.svg');
}

    .menu-icon-7.active {
        background-image: url('/img/icons/skyblue/monitoring.svg');
    }

.menu-icon-8 {
    background-image: url('/img/icons/gray/person.svg');
}

    .menu-icon-8.active {
        background-image: url('/img/icons/gray/person.svg');
    }

.menu-icon-9 {
    background-image: url('/img/icons/gray/work.svg');
}

    .menu-icon-9.active {
        background-image: url('/img/icons/gray/work.svg');
    }

.menu-icon-10 {
    background-image: url('/img/icons/oceanblue/description.svg');
}

    .menu-icon-10.active {
        background-image: url('/img/icons/skyblue/description.svg');
    }


.topMenuTitleMargins {
    margin-top: 30px;
}

.istaMenuText {
    color: var(--istaColorOceanBlue);
}

    .istaMenuText.active {
        color: var(--istaColorSkyBlue);
    }

    .istaMenuText.gray {
        color: #AAAAAA;
    }

.datatable-input {
    background-clip: border-box;
    border: 1px solid var(--istaGray);
    border-radius: 0.35rem;
    background-color: white;
}

.datatable-selector {
    background-clip: border-box;
    border: 1px solid var(--istaGray);
    border-radius: 0.35rem;
    background-color: white;
}

.datatable-table tbody tr td {
    vertical-align: middle !important;
    margin-left: 2px;
    padding-left: 2px;
}

.datatable-table thead tr th {
    vertical-align: bottom;
    border-bottom: 1px solid var(--istaGray);
    margin-left: 2px;
    padding-left: 2px;
}

.datatable-table th button {
    margin-left: 0px;
    padding-left: 0px;
}

.datatable-top {
    padding: 0px 0px 0px 2px;
}

.datatable-bottom {
    padding: 0px 0px 0px 2px;
}

.noBorders {
    border: none;
    width: 325px;
}

.btn-marginLeft {
    margin-left: 10px;
}

.dialog {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}

.dialogFullWidth {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    width: 100%;
}

.dialogWidthMax80 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    max-width: 70vw;
}

.dialogContainer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
}

.subUserListButtons {
    display: flex;
    justify-content: flex-end;
}

.button-with-icon {
    display: inline-flex;
    align-items: center;
}

.inputBorders {
    border: 1px solid var(--istaGray);
    border-radius: 0.25rem;
    box-shadow: none;
    width: 325px;
}

/* ---------------------------------------------------------------------------
   Dashboard: tekst links, illustratie rechts die BOVEN de kaart uitloopt.
   ---------------------------------------------------------------------------
   Die overloop is opzet (zo staat het ook op staging): .dashImg is absoluut
   gepositioneerd op top:-100px binnen de kaart (Bootstrap .card is
   position:relative), en de ruimte erboven kwam van vier <br>'s vóór de kaart.

   Fase F0 haalde die <br>'s weg en maakte de topbalk 48px: de kaart schoof naar
   top 56, dus -100px kwam op -44 en het HOOFD van de figuur viel buiten beeld
   achter de topbalk. De overloop is nu niet weggehaald maar van echte ruimte
   voorzien - een marge in plaats van <br>-vullers. Gemeten tegen staging
   (1536x791): topbalk 70 + 104px ruimte + kaart 250, illustratie 500x322 op
   99px boven de kaart. Met de compacte balk van 48px komt de illustratie
   daarmee op dezelfde plek onder de balk uit.

   Onder 1200px vervalt de overloop: daar staat de illustratie gewoon in de flow
   en wrapt hij onder de tekst (zie de mediaquery onderaan dit blok).
   --------------------------------------------------------------------------- */
.dashContainer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    min-width: 800px;
}

    /* Het tekstblok naast de illustratie. Was `.dashContainer p { flex: 2 }`, wat
       klopte zolang de tekst ÉÉN <p> met <br>'s was. Sinds die in drie losse <p>'s
       is gesplitst (fase F0) moeten ze samen in .dashText zitten: als losse
       flexitems zouden ze in drie smalle kolommen naast elkaar komen - dat was
       het verschil met staging dat opviel bij de live controle. */
    .dashContainer .dashText {
        flex: 2 1 0%;
        min-width: 0;
    }

        .dashContainer .dashText p:last-child {
            margin-bottom: 0;
        }

/* Ruimte voor de overlopende illustratie. Kost hier niets: onder de kaart staat
   op deze pagina toch een leeg vlak. */
@media (min-width: 1200px) {
    #dashboardcardbody {
        margin-top: 104px !important;   /* overschrijft de mt-2 uit de view */
    }
}

.dashImgDiv {
    float: right;
    margin-left: 10px;
    width: 500px;
}

.infoImgDiv {
    float: right;
    margin-left: 10px;
    margin-bottom: 20px;
    width: 300px;
}

/* De overlopende illustratie; de ruimte erboven komt van de marge op
   #dashboardcardbody (zie het blok bij .dashContainer). Onder 1200px valt de
   absolute positionering weg en staat hij gewoon in de flow. */
.dashImg {
    position: absolute;
    top: -100px;
    width: 500px;
    max-width: 100%;
}

/* Onder 1200px kan de min-width van 800px niet meer uit: tekst en illustratie
   werden rechts afgekapt (bij 320px zo'n 392px eraf) zonder schuifmogelijkheid -
   WCAG 2.2 1.4.10. Pre-existent; het viel niet eerder op omdat het Dashboard
   geen deel van de F4-sweep was (inmiddels wel). Hier ook de overloop uitzetten,
   want daar is op een smal scherm geen ruimte voor. */
@media (max-width: 1199.98px) {
    .dashContainer {
        min-width: 0;
        flex-wrap: wrap;
    }

        .dashContainer .dashText {
            flex: 1 1 300px;
        }

    .dashImgDiv {
        float: none;
        margin-left: 0;
    }

    .dashImg {
        position: static;
        top: auto;
    }
}

.infoImg {
    width: 300px;
}

.topMargin {
    margin-top: 25px;
}

.btn-img-marginright {
    margin-right: 5px;
}

.infoBlockContainer {
    display: flex;
    justify-content: space-between;
}

.editCellInput {
    box-sizing: border-box;
    border: none;
    padding: 0;
    font: inherit;
    background-color: transparent;
}

.noPadding tr td {
    border-collapse: collapse;
    padding: 1px;
}

.editableCell {
    background-color: var(--istaColorOffWhite);
}

.costsHeaderCell {
    padding: 3px 5px !important;
}

.costsCell {
    padding: 3px 5px !important;
    border: 1px solid var(--istaGray);
}

.deelnemerCell {
    padding: 3px 5px !important;
    border: 1px solid var(--istaGray) !important;
}

.ODOKStatusCell {
    padding: 3px 5px !important;
    border: 1px solid var(--istaGray) !important;
}

.MonitoringCell {
    padding: 3px 5px !important;
    border: 1px solid var(--istaGray) !important;
    font-size: 9pt;
}

.infoBlockCosts {
    border-radius: 0.35rem;
    border: 1px solid var(--istaGray);
    padding: 16px;
    width: 32%;
    box-sizing: border-box;
}

.infoBlockParticipants {
    border-radius: 0.35rem;
    border: 1px solid var(--istaGray);
    padding: 16px;
    width: 24%;
    box-sizing: border-box;
}

.cardInformation {
    border-radius: 0.35rem;
    border: 1px solid #CBD5E1;
    background: #F4F7F9;
    color: #192131;
    display: flex;
    padding: 16px;
    max-width: 100%;
    margin-bottom: 5px;
}

.cardWarning {
    border-radius: 0.35rem;
    border: 1px solid #F6C955;
    background: #FEF7E7;
    color: #664B00;
    display: flex;
    padding: 16px;
    max-width: 100%;
    margin-bottom: 5px;
}

.cardError {
    border-radius: 0.35rem;
    border: 1px solid #EE7F5D;
    background: #FDECE7;
    color: #611B05;
    display: flex;
    padding: 16px;
    max-width: 100%;
    margin-bottom: 5px;
}

#tableparticipants td:nth-child(9),
#tableparticipants td:nth-child(10),
#tableparticipants td:nth-child(11) {
    text-align: right;
}

#tableparticipants td:nth-child(12) {
    text-align: center;
}

#tableparticipants th:nth-child(9),
#tableparticipants th:nth-child(10),
#tableparticipants th:nth-child(11) {
    text-align: right !important;
}

.partColRight {
    width: 71px;
}

.partColLeft {
    width: 25px;
}

.partColPadding {
    padding: 3px 6px !important;
}

.partStatusCol {
    width: 20px;
}

.partColRightDiv {
    width: 80px;
    text-align: left;
}

.messageContainer {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.messageBlock {
    width: 49.3%;
    box-sizing: border-box;
    margin-bottom: 15px;
}

.part-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.part-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.part-label {
    width: 120px;
}

.partDienst {
    min-width: 130px;
}

.inputBordersBedrag {
    border: 1px solid var(--istaGray);
    border-radius: 0.25rem;
    box-shadow: none;
    width: 137px;
    text-align: right;
    padding-right: 10px;
}

.pRight {
    padding-right: 10px;
}

.bol {
    height: 16px;
    width: 16px;
    margin-right: 5px;
}

.vscroll {
    overflow-y: auto;
}

.Monitoring_Heat1 {
    border: 1px solid #FF8888;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Heat2 {
    border: 1px solid #FF8888;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Heat3 {
    border: 1px solid #FF8888;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Cold {
    border: 1px solid #8888FF;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Electric {
    border: 1px solid #AAAA88;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Gas {
    border: 1px solid #FF88FF;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_Water {
    border: 1px solid #8888FF;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.Monitoring_HotWater {
    border: 1px solid #FF8888;
    border-radius: 6px;
    padding-left: 2px;
    text-align: center;
}

.visualBarMain {
    background-color: var(--istaColorPeriod1);
}

.visualBarComp {
    background-color: var(--istaColorPeriod2);
}

.mouseHand {
    cursor: pointer;
}

.barRect {
    height: 18px;
    transform-origin: center left;
}

.pulse {
    animation: pulseWidth 0.25s ease;
}

@keyframes pulseWidth {
    0% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(1.1);
    }

    100% {
        transform: scaleX(1);
    }
}

.highlight-meet {
    background-color: var(--istaColorPeriod1Light);
}

.highlight-comp {
    background-color: var(--istaColorPeriod2Light);
}

.tab-buttons {
    display: flex;
    border-bottom: 1px solid var(--istaGray);
}

    .tab-buttons button {
        background-color: white;
        color: black;
        border: 2px solid var(--istaGray);
        border-bottom: none;
        border-radius: 9px 9px 0 0;
        padding: 0.1rem 1rem;
        margin-right: 0.2rem;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

        .tab-buttons button:hover {
            background-color: var(--istaColorSkyBlue);
            color: white;
        }

        .tab-buttons button.active {
            background-color: var(--istaColorSkyBlue);
            color: white;
            border-color: var(--istaColorSkyBlue);
            position: relative;
            z-index: 1;
        }

.contract-tab-content {
    display: none;
    padding: 1rem;
}

    .contract-tab-content.active {
        width: 100%;
        display: block;
        border: 1px solid var(--istaGray);
        overflow: auto;
    }

.contractInfo {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.relative {
    position: relative;
}

/* Adjust reCAPTCHA v3 badge position so it clears the sticky footer */
.grecaptcha-badge {
    bottom: 40px !important; /* tweak this value to your footer height */
    right: 16px !important; /* keep it on the right */
    z-index: 1100; /* ensure it stays on top */
}

/* Optional: a bit more space on small screens */
@media (max-width: 576px) {
    .grecaptcha-badge {
        bottom: 96px !important;
    }
}

/* Culture selector on the Settings page. */
.settings-culture-select {
    max-width: 320px;
}

/* Service-level package descriptions on the Versions page. */
.version-package {
    background-color: #F5F5FF;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
}

.version-package-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.version-package-title {
    color: #84B400;
    font-size: 16pt;
    font-weight: bold;
}

.version-opentherm-logo {
    width: 290px;
    margin-top: 12px;
}

/* Dark theme: the version packages use a light surface in light mode; give them
   the dark surface so text stays readable. The lime title colour works in both. */
html[data-theme="dark"] .version-package {
    background-color: var(--ista-surface-alt);
}

/* Entry-point buttons on the Graph topbar: push the group to the right. The
   first (alarm) takes the auto margin; the GJ-calc button sits next to it. */
.graph-alarm-btn {
    margin-left: auto;
}
.graph-gjcalc-btn {
    margin-left: 8px;
}

/* Dark mode: Bootstrap's .btn-outline-secondary uses the same grey (#858796)
   for its ENABLED and its DISABLED state, so on the dark surface the working
   navigation buttons (Alarminstellingen / Alarmgeschiedenis / GJ-Prijs Berekening
   / Terug naar grafiek) looked disabled. Give the enabled state readable theme
   colours, and make the disabled state visibly dimmer so the two are clearly
   distinguishable. (Alarm-status colour classes have higher specificity and keep
   overriding this for the alarm button once its status is known.) */
html[data-theme="dark"] .btn-outline-secondary {
    color: var(--ista-text);
    border-color: var(--ista-accent);
}
html[data-theme="dark"] .btn-outline-secondary:hover {
    color: #fff;
    background-color: var(--ista-accent);
    border-color: var(--ista-accent);
}
html[data-theme="dark"] .btn-outline-secondary.disabled,
html[data-theme="dark"] .btn-outline-secondary:disabled {
    color: var(--ista-text-muted);
    border-color: var(--ista-border);
    background-color: transparent;
    opacity: .55;
}

/* "Alarmgeschiedenis" entry button: alarms.js adds .alarm-history-has only when
   the object actually has alarm history, so it turns red to stand out (no
   history → it stays the dimmed/disabled outline above). The dark-mode selector
   is repeated so it outranks the dark .btn-outline-secondary override above. */
.btn.alarm-history-has,
html[data-theme="dark"] .btn.alarm-history-has {
    color: #fff;
    background-color: var(--alarm-alarm);
    border-color: var(--alarm-alarm);
}
.btn.alarm-history-has:hover,
html[data-theme="dark"] .btn.alarm-history-has:hover {
    color: #fff;
    filter: brightness(0.93);
}

/* Dark-theme overrides for Bootstrap alerts (used for the alarm pages' message
   and error toasts) — the light defaults are unreadable on the dark surface. */
html[data-theme="dark"] .alert-warning {
    background-color: #3a3000;
    border-color: #5a4a00;
    color: var(--ista-text);
}
html[data-theme="dark"] .alert-danger {
    background-color: #3a1115;
    border-color: #5a1a1f;
    color: var(--ista-text);
}

/* Bootstrap .border draws a near-white line in dark mode (the alarm config rule
   panels use it); retint it to the theme border colour. Bootstrap sets the
   border with !important, so the override needs it too. */
html[data-theme="dark"] .border {
    border-color: var(--ista-border) !important;
}

/* GJ Calculator page. */
.backLight {
    background-color: #F5F5FF;
}

.gjcalc-header,
.gjcalc-summary,
.gjcalc-result {
    width: 100%;
    max-width: 540px;
}

.gjcalc-header td:first-child,
.gjcalc-summary td:first-child,
.gjcalc-result td:first-child {
    color: #666;
    padding-right: 12px;
    white-space: nowrap;
    width: 240px;
}

.gjcalc-summary td:nth-child(2),
.gjcalc-result td:nth-child(2) {
    font-weight: bold;
    text-align: right;
}

/* ===========================================================================
   Date-range picker (wwwroot/js/Base/daterange.js). No <style> injection — all
   rules live here so the picker stays within the strict CSP style-src 'nonce'.
   =========================================================================== */

.dr-anchor {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    user-select: none;
}

.dr-anchor .dr-caret {
    border-top: 5px solid #555;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.dr-popup {
    position: fixed;          /* body-portalled; coords gezet in daterange.js */
    z-index: 4000;            /* boven topbar/chrome zodat de kalender ervoor valt */
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.dr-body {
    display: flex;
    flex-wrap: nowrap;
}

.dr-presets {
    display: flex;
    flex-direction: column;
    min-width: 150px;
    border-right: 1px solid #EEEEEE;
    padding: 8px;
    gap: 2px;
    max-height: min(75vh, 560px);   /* jaar- en kwartaalknoppen maken de kolom hoger dan de kalenders */
    overflow-y: auto;
}

.dr-preset {
    text-align: left;
    background: none;
    border: none;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
    color: #0A2864;
}

.dr-preset:hover {
    background: #F0F4FF;
}

.dr-preset-active {
    background: var(--istaColorSkyBlue);
    color: #FFFFFF;
}

/* Jaar- en kwartaalknoppen onder de voorinstellingen (NLDO-692). Het max-height/overflow-paar
   staat in het .dr-presets-blok hierboven: de kolom wordt hoger dan de kalenders en scrolt op een
   laag scherm in plaats van onder de rand van het venster te vallen. */
.dr-chip-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EEEEEE;
}

.dr-chip-title {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: #5A6B8C;
}

.dr-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 180px;
}

.dr-chip {
    background: none;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 13px;
    color: #0A2864;
}

.dr-chip:hover:not(:disabled) {
    background: #F0F4FF;
}

.dr-chip:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.dr-chip-active {
    background: var(--istaColorSkyBlue);
    border-color: var(--istaColorSkyBlue);
    color: #FFFFFF;
}

.dr-calendars {
    padding: 8px 10px 10px;
    position: relative;
}

.dr-nav {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.dr-nav-btn {
    pointer-events: auto;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #555;
    padding: 0 6px;
}

.dr-nav-btn:hover {
    color: #000;
}

.dr-grids {
    display: flex;
    gap: 16px;
}

.dr-grid {
    border-collapse: collapse;
}

.dr-cal-header {
    text-align: center;
    font-weight: bold;
    color: #0A2864;
    margin-bottom: 4px;
}

.dr-grid th {
    font-size: 11px;
    font-weight: normal;
    color: #888;
    padding: 4px 0;
    text-align: center;
    width: 30px;
}

.dr-grid td {
    text-align: center;
    padding: 0;
}

.dr-day {
    width: 30px;
    height: 28px;
    cursor: pointer;
    border-radius: 3px;
    font-size: 13px;
}

.dr-day:hover {
    background: #F0F4FF;
}

.dr-wk {
    font-size: 10px;
    color: #BBB;
    width: 24px;
}

.dr-other-month {
    color: #CCCCCC;
}

.dr-disabled {
    color: #DDDDDD;
    cursor: default;
}

.dr-disabled:hover {
    background: none;
}

.dr-in-range {
    background: #EAF1FF;
}

.dr-start,
.dr-end {
    background: var(--istaColorSkyBlue);
    color: #FFFFFF;
}

.dr-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.dr-btn {
    padding: 5px 14px;
    border-radius: 3px;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    font-size: 13px;
}

.dr-apply {
    background: var(--istaColorSkyBlue);
    color: #FFFFFF;
    border-color: var(--istaColorSkyBlue);
}

.dr-apply:disabled {
    opacity: 0.5;
    cursor: default;
}

.dr-cancel {
    background: #FFFFFF;
}

/* ===========================================================================
   Graph page (Views/Graph/Index.cshtml + wwwroot/js/graph.js)
   =========================================================================== */

/* De grafiekpagina draait in de fill-layout (zie "Viewport & density layer"
   onderaan dit bestand): .graph-root is een flexkolom waarin toolbar,
   contextregel en tabs een vaste hoogte hebben en het paneel de rest krijgt. */
.graph-root {
    background-color: transparent;
    padding: 0;
}

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .graph-root {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

.graph-daterange {
    display: flex;
    align-items: center;
    gap: 8px;
}

.graph-refresh {
    background: none;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 3px;
    color: #0A2864;
}

.graph-refresh:hover {
    background-color: #F0F4FF;
}

.graph-meta.error,
.graph-error {
    color: #FF0000;
}

.graph-radio {
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}

.graph-details {
    margin-bottom: 16px;
}

.graph-details-table td {
    font-size: 13px;
    padding: 2px 0;
    white-space: nowrap;
}

.graph-details-key {
    color: #666;
    padding-right: 12px !important;
}

.graph-weather-icon {
    width: 25px;
    vertical-align: middle;
}

.graph-tabs {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ista-gap);
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #CCCCCC;
    flex: 0 0 auto;
}

.graph-tab {
    cursor: pointer;
    padding: 5px 14px;
    background: #F0F0F4;
    border: 1px solid #CCCCCC;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    font-size: 13px;
    color: #0A2864;
    margin-bottom: -1px;
}

.graph-tab.selected {
    background: #FFFFFF;
    border-bottom: 1px solid #FFFFFF;
    font-weight: bold;
}

.graph-panels {
    position: relative;
    min-height: 260px;
}

.graph-panel {
    display: none;
}

.graph-panel.active {
    display: block;
}

/* Buiten de fill-layout (smal/kort scherm, 200% zoom) houdt de grafiek een
   vaste, redelijke hoogte; in de fill-layout groeit hij mee met de viewport. */
.graph-chart-container {
    position: relative;
    width: 100%;
    height: 420px;
}

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .graph-panels {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
    }

    body#page-top.page-fill .graph-panel.active {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    /* Panelen met een tabel/lijst krijgen hun eigen scrollgebied. */
    body#page-top.page-fill #panelMeters,
    body#page-top.page-fill #panelData,
    body#page-top.page-fill #panelCustom,
    body#page-top.page-fill #panelProperties,
    body#page-top.page-fill #panelCompare {
        overflow: auto;
    }

    body#page-top.page-fill .graph-chart-container {
        flex: 1 1 auto;
        height: auto;
        min-height: 240px;
    }
}

.graph-empty {
    text-align: center;
    padding: 80px 0;
    color: #888;
}

/* Segmentknoppen (Bootstrap btn-check) i.p.v. twee rijen radio's: dezelfde
   input[name="grouping"|"energy"] + data-attributen, dus graph.js blijft
   ongewijzigd werken - alleen het label eromheen is nu een knop. */
.graph-seg .btn {
    --bs-btn-padding-y: 0.15rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.78rem;
}

.graph-unit-select {
    width: auto;
    min-width: 6.5rem;
}

/* Knop die de contextregel van één regel naar volledig uitklapt. */
.graph-meta-toggle.is-open {
    background-color: var(--ista-surface-alt);
}

/* Graph page — Chart.js canvas + external HTML tooltip + custom context menu.
   Chart.js paints series colours straight from JS (SERIES_PALETTE / seriesColor
   in graph.js), so no per-series colour CSS is needed here (unlike the former
   legacy styled mode). These rules only cover the DOM chrome around the
   canvas: the shared tooltip and the "Grafiekmenu" button + menu, in both themes. */
.graph-canvas { display: block; }

/* Shared tooltip (built in JS as .chart-tooltip): floats over the canvas and
   follows the caret; the date header is fixed-colour, each value line is coloured
   inline with its series' brand colour. */
.chart-tooltip {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
    /* Match the former tooltip: 0.85-opacity white box, no border in
       light, small radius, subtle shadow, that font stack, bold text. */
    background: rgba(255, 255, 255, 0.85);
    border: 0;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
    padding: 8px 10px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.5;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.1s ease;
}
.chart-tt-date { color: #0A2864; margin-bottom: 2px; }
.chart-tt-line { font-weight: bold; }

/* Context-menu button (hamburger) + dropdown, pinned top-right of the container. */
.chart-menu-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 6;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}
.chart-menu-btn:hover { background: #f2f2f2; }
.chart-menu {
    position: absolute;
    top: 38px;
    right: 6px;
    z-index: 7;
    min-width: 210px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    padding: 4px 0;
    /* De grafiek groeit/krimpt nu mee met de viewport en de pagina scrollt niet
       meer: op een lage viewport moet het menu binnen de grafiek blijven passen
       (anders zou het buiten het niet-scrollende datagebied vallen). */
    max-height: calc(100% - 44px);
    overflow-y: auto;
}
.chart-menu-header {
    padding: 6px 12px 2px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #888;
}
.chart-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 6px 12px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    white-space: nowrap;
}
.chart-menu-item:hover { background: #f2f2f2; }
.chart-menu-item.active { font-weight: 700; }
.chart-menu-sep { height: 1px; margin: 4px 0; background: rgba(0, 0, 0, 0.1); }

/* ---- Compare (year-over-year) tab ---------------------------------------- */
.compare-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
    margin-bottom: 12px;
}
.compare-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.compare-field-label {
    font-size: 12px;
    color: #6c757d;
}
.compare-years {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.compare-year-chip {
    border: 1px solid #c9c9d6;
    background: transparent;
    color: inherit;
    border-radius: 999px;
    padding: 4px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.12s, color 0.12s, border-color 0.12s;
}
.compare-year-chip:hover { border-color: #84B400; }
.compare-year-chip.active {
    background: #84B400;
    border-color: #84B400;
    /* Wit op #84B400 haalt 2,47:1 - de tekst is op dat lime praktisch weg.
       De ista-navy erop haalt 7,99:1. Gemeten met scripts/check-contrast.mjs. */
    color: var(--istaColorPeriod2);
    font-weight: 600;
}
.compare-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}
.compare-kpi {
    background: #F5F5FF;
    border-radius: 8px;
    padding: 10px 16px;
    min-width: 140px;
}
.compare-kpi-year { font-size: 12px; color: #6c757d; }
.compare-kpi-value { font-size: 20px; font-weight: 700; }
.compare-kpi-label { font-size: 11px; color: #6c757d; }
/* Good/bad colouring (not by sign): less consumption = green, more = orange/red;
   for efficiency it's the other way around (see deltaIsGood in graph.js). */
.compare-kpi-delta.good .compare-kpi-value { color: #84B400; }
.compare-kpi-delta.bad .compare-kpi-value { color: #DA471F; }
.compare-table-wrap { margin-top: 16px; }
.compare-delta-good { color: #84B400; font-weight: 600; }
.compare-delta-bad { color: #DA471F; font-weight: 600; }

/* Temperature toggle: keep the checkbox+label tidy and bottom-aligned with the
   other controls (Bootstrap's .form-check float/padding otherwise overlapped). */
.compare-field-check { min-width: auto; }
.compare-field-check .form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    min-height: auto;
    margin-bottom: 0;
}
.compare-field-check .form-check-input { margin: 0; float: none; }
.compare-field-check .form-check-label { margin: 0; }

html[data-theme="dark"] .compare-field-label,
html[data-theme="dark"] .compare-kpi-year,
html[data-theme="dark"] .compare-kpi-label { color: var(--ista-text-muted); }
html[data-theme="dark"] .compare-year-chip { border-color: var(--ista-border); }
html[data-theme="dark"] .compare-kpi { background: var(--ista-surface-alt); }

/* Advanced panel: alignment + custom (meter/period) series. */
.compare-advanced { margin: 10px 0 6px; }
.compare-advanced > summary {
    cursor: pointer;
    font-weight: 600;
    padding: 6px 0;
}
.compare-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 10px 0 4px;
}
.compare-align { display: flex; gap: 18px; }
.compare-align-hint { display: block; margin-top: 2px; }
.compare-custom-head { font-weight: 600; font-size: 13px; }
.compare-custom-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
    padding: 10px;
    border: 1px solid #e3e3ec;
    border-radius: 6px;
    margin-bottom: 8px;
}
.compare-custom-field { display: flex; flex-direction: column; gap: 3px; }
.compare-custom-field .dr-anchor { min-width: 260px; }
.compare-custom-field .form-select,
.compare-custom-field .form-control { min-width: 130px; }
html[data-theme="dark"] .compare-custom-row { border-color: var(--ista-border); }

/* ---- Alarm page ---------------------------------------------------------- */
.alarm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.alarm-recalc { margin-bottom: 14px; }
.alarm-recalc-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* PADIN switch group: tidy inline checkbox+label pairs. Bootstrap's .form-check
   float/padding made the IN1-IN4 boxes overlap the meter column. */
.rule-row .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-left: 0;
    margin: 0;
    min-height: auto;
}
.rule-row .rule-switch { margin: 0; float: none; position: static; }

/* Threshold slider row: min label · slider · max label + measured/current info. */
.rule-slider-wrap { padding-top: 4px; }
.rule-slider-track {
    display: flex;
    align-items: center;
    gap: 10px;
}
.rule-slider-track .rule-slider { flex: 1; margin: 0; }
.rule-slider-min,
.rule-slider-max {
    font-size: 12px;
    color: #6c757d;
    min-width: 2.5ch;
    text-align: center;
}
html[data-theme="dark"] .rule-slider-min,
html[data-theme="dark"] .rule-slider-max { color: var(--ista-text-muted); }

/* Object context header (reuses .graph-details table styling). */
.alarm-object { margin-bottom: 8px; }

/* Notifications: e-mail and SMS blocks. */
.alarm-notify-block { margin-bottom: 18px; }
.alarm-notify-block:last-child { margin-bottom: 0; }
.alarm-recipient-list { margin-top: 8px; }
.alarm-recipient { max-width: 520px; }

/* One card per monitor: enable toggle + rules + delay + time filter together. */
/* ista corporate CI forbids cards-within-cards. Each monitor is rendered as a
   flat SECTION inside the page card — separated by a divider + its own heading
   (the .alarm-monitor-head h5), not as a nested card (no border box / radius /
   background). */
.alarm-monitor-card {
    padding: 16px 0;
    margin-bottom: 4px;
    border-top: 1px solid #e3e6ea;
}
.alarm-monitor-card:first-child {
    border-top: 0;
    padding-top: 4px;
}
.alarm-monitor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.alarm-monitor-body { transition: opacity .15s ease; }
.alarm-monitor-off { opacity: .55; }
.alarm-monitor-options {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed #e3e6ea;
}
.alarm-option-block { min-width: 240px; }
.alarm-option-track {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}
.alarm-option-track .form-range { flex: 1; margin: 0; min-width: 120px; }
.alarm-option-readout {
    font-size: 12px;
    color: #6c757d;
    min-width: 9ch;
}
.alarm-hour { width: 64px; }
.alarm-actions { margin-top: 8px; }

html[data-theme="dark"] .alarm-monitor-card {
    border-top-color: var(--ista-border);
    background-color: transparent;
}
html[data-theme="dark"] .alarm-monitor-options { border-top-color: var(--ista-border); }
html[data-theme="dark"] .alarm-option-readout { color: var(--ista-text-muted); }

/* ---- Alarm status colours (Graph button + property-overview dot) ---------- */
/* Status palette: blue = can configure, green = ok/confirmed, orange = awaiting
   modem confirmation, red = active alarm, grey = upsell (locked behind a tier). */
:root {
    /* Was #1c7ed6. Die kleur draagt witte tekst (.info-step::before) en staat
       zelf als tekst op wit (.btn.graph-alarm-btn.alarm-status-can); allebei
       4,20:1 en dus onder de 4,5:1 van WCAG 2.2 1.4.3. #1971c2 is dezelfde
       blauwtint een stap donker en haalt 5,02:1. Gemeten met
       scripts/check-contrast.mjs. */
    --alarm-can: #1971c2;
    --alarm-ok: #2f9e44;
    --alarm-awaiting: #e8870c;
    --alarm-alarm: #e03131;
    --alarm-upsell: #868e96;
}

/* Graph entry-point button — outline coloured by state (red is filled to alert). */
.btn.graph-alarm-btn.alarm-status-can { color: var(--alarm-can); border-color: var(--alarm-can); }
.btn.graph-alarm-btn.alarm-status-ok { color: var(--alarm-ok); border-color: var(--alarm-ok); }
.btn.graph-alarm-btn.alarm-status-awaiting { color: var(--alarm-awaiting); border-color: var(--alarm-awaiting); }
.btn.graph-alarm-btn.alarm-status-alarm { color: #fff; background-color: var(--alarm-alarm); border-color: var(--alarm-alarm); }
.btn.graph-alarm-btn.alarm-status-alarm:hover { color: #fff; }

/* Property-overview indicator: a small coloured dot. */
.alarm-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}
.alarm-dot.alarm-status-can { background-color: var(--alarm-can); }
.alarm-dot.alarm-status-ok { background-color: var(--alarm-ok); }
.alarm-dot.alarm-status-awaiting { background-color: var(--alarm-awaiting); }
.alarm-dot.alarm-status-alarm { background-color: var(--alarm-alarm); }
.alarm-dot.alarm-status-upsell { background-color: var(--alarm-upsell); }
a:has(> .alarm-dot) { cursor: pointer; }

/* Active-alarm attention: a short ripple pulse that runs a few times then stops
   (not continuous), to draw the eye to a red alarm. Fires when the
   alarm-status-alarm class is applied (Graph button) or rendered (overview dot).
   Honours reduced-motion. */
@keyframes alarm-attention-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(224, 49, 49, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(224, 49, 49, 0); }
    100% { box-shadow: 0 0 0 0 rgba(224, 49, 49, 0); }
}
.btn.graph-alarm-btn.alarm-status-alarm,
.alarm-dot.alarm-status-alarm {
    animation: alarm-attention-pulse 0.7s ease-out 4;
}
@media (prefers-reduced-motion: reduce) {
    .btn.graph-alarm-btn.alarm-status-alarm,
    .alarm-dot.alarm-status-alarm { animation: none; }
}

/* ---- GJ-Prijs Berekening --------------------------------------------------- */
.gj-energy-layout {
    display: flex;
    gap: 28px;
    align-items: center;
    flex-wrap: wrap;
}
.gj-gauge-wrap { min-width: 0; flex: 1 1 260px; }
.gj-gauge {
    position: relative;
    width: 100%;
    max-width: 260px;
    height: 16px;
    background: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}
.gj-gauge-fill {
    height: 100%;
    width: 0;
    border-radius: 8px;
    background: #adb5bd;
    transition: width .25s ease;
}
.gj-gauge-good { background: var(--alarm-ok, #2f9e44); }
.gj-gauge-mid { background: var(--alarm-awaiting, #e8870c); }
.gj-gauge-bad { background: var(--alarm-alarm, #e03131); }
.gj-gauge-readout {
    font-size: 22px;
    font-weight: 700;
    margin-top: 8px;
}
.gj-energy-figures { font-size: 14px; line-height: 1.8; }
.gj-fig-label { color: #6c757d; }
.gj-unit { color: #6c757d; }

.gj-table th, .gj-table td { padding: 6px 8px; }
.gj-table tfoot .gj-cost-total td { font-weight: 700; border-top: 2px solid #dee2e6; }

.gj-summary { max-width: 540px; }
.gj-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 5px 0;
}
.gj-summary-total {
    font-weight: 700;
    border-top: 1px solid #dee2e6;
    margin-top: 2px;
    padding-top: 8px;
}
.gj-verdict {
    padding: 10px 14px;
    border-radius: 8px;
    font-weight: 600;
    max-width: 720px;
}
.gj-verdict-ok { background: #e7f6ec; color: #1b6b34; }
.gj-verdict-bad { background: #fdecec; color: #b32020; }
.gj-split { max-width: 540px; }

html[data-theme="dark"] .gj-gauge { background: var(--ista-border); }
/* In hoog contrast is --ista-border wit, en dan werd de LEGE baan van de meter
   een volle witte balk - die leest als 100%. Daar dus een donkere baan met een
   witte omlijning, zodat alleen de gekleurde vulling de waarde aangeeft. */
html[data-contrast="on"] .gj-gauge {
    background: var(--ista-surface-alt);
    border: 1px solid var(--ista-border);
}
html[data-theme="dark"] .gj-fig-label,
html[data-theme="dark"] .gj-unit { color: var(--ista-text-muted); }
html[data-theme="dark"] .gj-table tfoot .gj-cost-total td,
html[data-theme="dark"] .gj-summary-total { border-color: var(--ista-border); }
html[data-theme="dark"] .gj-verdict-ok { background: rgba(47,158,68,.18); color: #5fd98a; }
html[data-theme="dark"] .gj-verdict-bad { background: rgba(224,49,49,.18); color: #ff8585; }

/* Object-overview context line: which debtor these objects belong to. */
.properties-context {
    font-size: 15px;
    font-weight: 600;
    padding: 8px 12px;
    border-left: 3px solid var(--alarm-can, #1971c2);
    background: #f3f7fc;
    border-radius: 4px;
}
.properties-context:empty { display: none; }
html[data-theme="dark"] .properties-context { background: var(--ista-surface); color: var(--ista-text); }

/* Uitleg ReduQ — numbered flow steps. */
.info-flow { padding-left: 0; margin-top: 8px; counter-reset: info-step; list-style: none; }
.info-step { position: relative; margin: 0 0 20px; padding-left: 48px; }
.info-step::before {
    counter-increment: info-step;
    content: counter(info-step);
    position: absolute;
    left: 0;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--alarm-can, #1971c2);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.info-step h4 { margin: 4px 0 4px; }
.info-step p { margin: 0; color: #495057; max-width: 820px; }
html[data-theme="dark"] .info-step p { color: var(--ista-text-muted); }

/* Versie-informatie — "Over deze versie" block. */
.version-about-line { font-size: 15px; margin-bottom: 6px; }
.version-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0;
    margin: 6px 0 0;
}
.version-links a { font-weight: 600; }

/* Versie-informatie — Security/Beveiliging showcase. */
.version-security { margin-top: 22px; }
.security-badges { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 16px; }
.security-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 160px;
    padding: 14px 16px;
    border: 1px solid #e3e6ea;
    border-radius: 10px;
    background: #f7faf7;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
}
.security-badge:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; }
.security-grade { font-size: 26px; font-weight: 800; color: var(--alarm-ok, #2f9e44); line-height: 1; }
.security-badge-name { font-weight: 700; margin-top: 6px; font-size: 14px; }
.security-badge-desc { font-size: 12px; color: #6c757d; margin-top: 2px; }
.security-measures { margin: 4px 0 0; padding-left: 18px; }
.security-measures li { margin-bottom: 4px; color: #495057; }
.security-motto { margin-top: 14px; font-weight: 700; font-size: 16px; color: var(--alarm-ok, #2f9e44); }
html[data-theme="dark"] .security-badge { background: var(--ista-surface); border-color: var(--ista-border); }
html[data-theme="dark"] .security-badge-desc,
html[data-theme="dark"] .security-measures li { color: var(--ista-text-muted); }

.graph-meters-layout {
    display: flex;
    gap: 16px;
}

.graph-meters-list {
    flex: 0 0 320px;
    max-height: 420px;
    overflow-y: auto;
    border-right: 1px solid #CCCCCC;
}

.graph-meter-row {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px 6px;
    cursor: pointer;
}

.graph-meter-row:hover {
    background: #F5F5FF;
}

/* Read-only/disabled meter row (e.g. an efficiency meter with no values in the
   selected period): greyed out and not clickable. */
.graph-meter-row.disabled {
    cursor: default;
    opacity: 0.5;
    pointer-events: none;
}

.graph-meter-row.disabled:hover {
    background: transparent;
}

.graph-meter-row .graph-meter-name {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.graph-meter-row .graph-meter-group {
    font-size: 11px;
    color: inherit;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.graph-meter-side {
    flex: 1;
    display: flex;
    gap: 16px;
}

.graph-meter-img img {
    max-width: 180px;
    max-height: 180px;
}

.graph-meter-details table td {
    font-size: 12px;
    padding: 2px 8px 2px 0;
    vertical-align: top;
}

.graph-meter-details .graph-detail-key {
    color: #666;
    white-space: nowrap;
}

.custom-meter-section {
    margin-bottom: 14px;
}

.custom-meter-header {
    font-weight: bold;
    color: #0A2864;
    margin-bottom: 4px;
}

.custom-meter-point {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 2px 16px 2px 0;
    cursor: pointer;
    font-size: 13px;
}

.graph-spinner {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.graph-spinner-circle {
    width: 48px;
    height: 48px;
    border: 5px solid #DDDDDD;
    border-top-color: var(--istaColorPeriod1Light, #84B400);
    border-radius: 50%;
    animation: graph-spin 0.9s linear infinite;
}

@keyframes graph-spin {
    to { transform: rotate(360deg); }
}

/* =====================================================================
   ista UI – layout (vaste chrome + scroll), thema (light/dark/systeem)
   en meter-selectie. Bewust achteraan zodat bestaande regels onaangeroerd
   blijven en dit via de cascade/specificiteit overschrijft.
   ===================================================================== */

/* ---- 1. Semantische thema-variabelen (light = defaults) ------------- */
:root {
    --ista-bg: #f8f9fc;                 /* app-achtergrond            */
    --ista-surface: #ffffff;            /* kaarten, topbar, sidebar   */
    --ista-surface-alt: #f4f7f9;        /* subtiele tint / zebra      */
    --ista-text: #3a3b45;               /* hoofdtekst                 */
    /* Secundaire tekst. Was #858796, maar dat haalt op wit maar 3,56:1 en dus
       niet de 4,5:1 van WCAG 2.2 1.4.3 (AA). #6c757d haalt 4,70:1. Deze kleur
       draagt de filterlabels, de topbalk-subtitel en de contextregel, dus hij
       moet leesbaar zijn. Gemeten in fase F4. */
    --ista-text-muted: #6c757d;         /* secundaire tekst, 4,70:1   */
    --ista-border: var(--istaGray);     /* randen (#e3e6f0)           */
    --ista-accent: var(--istaColorSkyBlue);  /* #0071FF              */
    --ista-accent-contrast: #ffffff;
    /* Het accent als VLAK onder witte tekst. --ista-accent zelf haalt daar maar
       4,37:1 (licht) en 3,31:1 (donker). Bewust GEEN dark-variant: de kleur is
       dekkend, dus het cijfer is in beide thema's gelijk, en hij is helderder
       dan --ista-surface in dark (#0a1a3a) en dus ook daar een zichtbare
       selectie. */
    --ista-accent-strong: #0057c2;      /* wit erop: 6,68:1           */
    --ista-shadow: rgba(58, 59, 69, 0.15);
}

/* ---- Dark overrides (ista ocean-blue palet) ------------------------- */
html[data-theme="dark"] {
    --ista-bg: #001026;
    --ista-surface: #0a1a3a;
    --ista-surface-alt: #122544;
    --ista-text: #e6ecf5;
    --ista-text-muted: #9fb0c8;
    --ista-border: #1f3358;
    --ista-accent: #3d8bff;            /* iets lichter sky-blue voor contrast */
    --ista-accent-contrast: #ffffff;
    --ista-shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
}

/* ---- 2. Vaste topbar / sidebar / footer, scrollende content --------- */
html, body { height: 100%; }

/* Alleen de ingelogde shell (body.app-shell) krijgt de vaste-chrome layout;
   de login/beheer-layout deelt site.css maar heeft geen #wrapper en blijft
   gewoon scrollen. */
body.app-shell {
    height: 100vh;
    overflow: hidden;                  /* geen page-scroll; alleen content */
}

body.app-shell #wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    align-items: stretch;
}

    /* sidebar blijft vast, met eigen scroll als hij te hoog is */
    #wrapper > .sidebar {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        flex: 0 0 auto;
    }

    #wrapper > .fullwidth {
        display: flex;
        flex-direction: column;
        height: 100vh;
        min-width: 0;
        overflow: hidden;
    }

        /* content-kolom: topbar bovenaan, container-fluid scrollt */
        #wrapper > .fullwidth > #content {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
        }

            #content > .topbar {
                flex: 0 0 auto;        /* topbar blijft staan */
            }

            #content > .container-fluid {
                flex: 1 1 auto;
                min-height: 0;
                overflow-y: auto;      /* <-- het enige dat scrollt */
                overflow-x: hidden;
            }

/* footer: in-flow onderaan de content-kolom (blijft staan). De view rendert hem
   als <footer class="app-footer">; de oude fixed-bottom-variant bestaat niet
   meer (zie de sectie "Viewport & density layer" onderaan dit bestand). */
body.app-shell footer.app-footer {
    position: static;
    flex: 0 0 auto;
}

/* ---- 3. Thema toegepast op chrome + hoofdoppervlakken --------------- */
body.app-shell,
body.app-shell #wrapper {
    background-color: var(--ista-bg);
    color: var(--ista-text);
    transition: background-color .2s ease, color .2s ease;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar.bg-white,
html[data-theme="dark"] footer.bg-white,
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light-grey,
html[data-theme="dark"] .backWhite {
    background-color: var(--ista-surface) !important;
}

html[data-theme="dark"] .card {
    background-color: var(--ista-surface);
    border-color: var(--ista-border);
    color: var(--ista-text);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .textBlack,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
    color: var(--ista-text) !important;
}

html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .small,
html[data-theme="dark"] small {
    color: var(--ista-text-muted) !important;
}

html[data-theme="dark"] hr,
html[data-theme="dark"] .sidebar-divider {
    border-color: var(--ista-border);
    background-color: var(--ista-border);
}

/* Tabellen */
html[data-theme="dark"] .table { color: var(--ista-text); }
html[data-theme="dark"] .table th,
html[data-theme="dark"] .table td,
html[data-theme="dark"] .table thead th {
    border-color: var(--ista-border) !important;
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--ista-surface-alt);
}
html[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--ista-surface-alt);
    color: var(--ista-text);
}

/* Dropdowns / menu's */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--ista-surface);
    border-color: var(--ista-border);
    box-shadow: 0 0.15rem 1.75rem 0 var(--ista-shadow);
}
html[data-theme="dark"] .dropdown-item { color: var(--ista-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--ista-surface-alt);
    color: var(--ista-text);
}
html[data-theme="dark"] .dropdown-divider { border-color: var(--ista-border); }

/* Formulieren */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: var(--ista-surface-alt);
    color: var(--ista-text);
    border-color: var(--ista-border);
}
html[data-theme="dark"] .form-control::placeholder { color: var(--ista-text-muted); }

/* Modals */
html[data-theme="dark"] .modal-content {
    background-color: var(--ista-surface);
    color: var(--ista-text);
    border-color: var(--ista-border);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--ista-border); }

/* Bootstrap tekent .btn-close als een zwarte SVG en keert die zelf alleen om op
   [data-bs-theme="dark"]; dit thema loopt via data-theme, dus doen we het hier.
   Zonder dit is het kruisje zwart-op-donker (nagenoeg onzichtbaar). */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Graph-pagina specifiek */
html[data-theme="dark"] .graph-meters-list { border-right-color: var(--ista-border); }
html[data-theme="dark"] .graph-meter-row { border-bottom-color: var(--ista-border); }
html[data-theme="dark"] .graph-meter-row:hover { background: var(--ista-surface-alt); }
html[data-theme="dark"] .graph-meter-details .graph-detail-key,
html[data-theme="dark"] .graph-details-key { color: var(--ista-text-muted); }
html[data-theme="dark"] .custom-meter-header { color: var(--ista-accent); }
html[data-theme="dark"] .graph-spinner { background: rgba(0, 16, 38, 0.7); }
html[data-theme="dark"] .graph-spinner-circle { border-color: var(--ista-border); border-top-color: var(--ista-accent); }

/* Graph-pagina: oppervlakken/tekst die in light hardcoded wit/donker zijn en
   anders in dark een wit vlak of onleesbare (lichte tekst op wit) houden. */
html[data-theme="dark"] .graph-root { background-color: transparent; }
html[data-theme="dark"] .graph-details-key { color: var(--ista-text-muted); }
html[data-theme="dark"] .graph-empty { color: var(--ista-text-muted); }
html[data-theme="dark"] .graph-tabs { border-bottom-color: var(--ista-border); }
html[data-theme="dark"] .graph-tab {
    background: var(--ista-surface-alt);
    border-color: var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .graph-tab.selected {
    background: var(--ista-surface);
    border-bottom-color: var(--ista-surface);
    color: var(--ista-text);
}
html[data-theme="dark"] .graph-refresh {
    background-color: var(--ista-surface-alt);
    border-color: var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .graph-refresh:hover { background-color: var(--ista-surface); }

/* Date-range picker in dark (anchor + popup). */
html[data-theme="dark"] .dr-anchor {
    background-color: var(--ista-surface-alt);
    border-color: var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .dr-anchor .dr-caret { border-top-color: var(--ista-text); }
html[data-theme="dark"] .dr-popup {
    background: var(--ista-surface);
    border-color: var(--ista-border);
    box-shadow: 0 4px 16px var(--ista-shadow);
}
html[data-theme="dark"] .dr-presets { border-right-color: var(--ista-border); }
html[data-theme="dark"] .dr-preset { color: var(--ista-text); }
html[data-theme="dark"] .dr-chip-section { border-top-color: var(--ista-border); }
html[data-theme="dark"] .dr-chip-title { color: var(--ista-text-muted); }
html[data-theme="dark"] .dr-chip { border-color: var(--ista-border); color: var(--ista-text); }
html[data-theme="dark"] .dr-chip:hover:not(:disabled) { background: var(--ista-surface-alt); }
html[data-theme="dark"] .dr-chip-active { background: var(--istaColorSkyBlue); border-color: var(--istaColorSkyBlue); color: #FFFFFF; }
html[data-theme="dark"] .dr-preset:hover,
html[data-theme="dark"] .dr-day:hover { background: var(--ista-surface-alt); }
html[data-theme="dark"] .dr-cal-header { color: var(--ista-text); }
html[data-theme="dark"] .dr-grid th { color: var(--ista-text-muted); }
html[data-theme="dark"] .dr-wk { color: var(--ista-text-muted); }
html[data-theme="dark"] .dr-nav-btn { color: var(--ista-text-muted); }
html[data-theme="dark"] .dr-nav-btn:hover { color: var(--ista-text); }
html[data-theme="dark"] .dr-other-month { color: var(--ista-text-muted); opacity: .45; }
html[data-theme="dark"] .dr-disabled { color: var(--ista-text-muted); opacity: .35; }
html[data-theme="dark"] .dr-in-range { background: rgba(61, 139, 255, 0.18); }
html[data-theme="dark"] .dr-btn { border-color: var(--ista-border); color: var(--ista-text); }
html[data-theme="dark"] .dr-cancel { background: var(--ista-surface-alt); }

/* ista-logo's zijn donker navy (#00003C); in dark mode onzichtbaar op de donkere
   sidebar. brightness(0) invert(1) maakt de transparante wordmark egaal wit. */
html[data-theme="dark"] .logo { filter: brightness(0) invert(1); }
/* Login-logo: in light de gewone reduq.png, in dark reduq_dark.png — een variant
   met witte "ista"-wordmark waarbij het lime ReduQ-vlak (navy tekst) behouden
   blijft. Geswapt via display zodat het CSP-veilig en zonder JS gaat. */
.logo-reduq-dark { display: none; }
html[data-theme="dark"] .logo-reduq-light { display: none; }
html[data-theme="dark"] .logo-reduq-dark { display: inline; }

/* ---- 4. Meter-selectie: solide sky-blue + witte tekst + lime accent - */
.graph-meter-row.selected {
    /* --ista-accent-strong en niet --ista-accent: die laatste haalt met witte
       tekst 4,37:1 in licht en 3,31:1 in donker, allebei onder de 4,5:1.
       Gemeten met scripts/check-contrast.mjs. */
    background: var(--ista-accent-strong);
    color: var(--ista-accent-contrast);
    border-left: 4px solid var(--istaLime);
    padding-left: 2px;                 /* compenseer de 4px rand */
}
.graph-meter-row.selected .graph-meter-group {
    color: var(--ista-accent-contrast);
    opacity: 0.85;
}
.graph-meter-row.graph-error {
    /* Was var(--danger) (#e74a3b): wit daarop haalt 3,86:1 en dus niet de 4,5:1
       van WCAG 2.2 1.4.3. #c92a2a haalt 5,46:1 en zit in dezelfde rode familie
       als --alarm-alarm. Gemeten met scripts/check-contrast.mjs. */
    background: #c92a2a;
    color: #ffffff;
    border-left: 4px solid #ffffff;
    padding-left: 2px;
}

/* ---- 5. Thema-knop (topbar én login-nav) ---------------------------- */
.theme-toggle .nav-link { cursor: pointer; }
.theme-toggle .nav-link i { font-size: 1.1rem; color: var(--ista-text-muted); }
.theme-option.active { font-weight: 700; color: var(--ista-accent); }
.theme-option.active i { color: var(--ista-accent); }

/* ---- 6. Login/beheer-pagina in dark (geen .app-shell, dus apart) ---- */
html[data-theme="dark"] body {
    background-color: var(--ista-bg);
    color: var(--ista-text);
}

/* ---- 7. Chart.js DOM chrome (tooltip + context menu) in dark ------------- */
html[data-theme="dark"] .chart-tooltip {
    background: var(--ista-surface);
    border: 1px solid var(--ista-border);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .chart-tt-date { color: var(--ista-text); }
html[data-theme="dark"] .chart-menu-btn {
    background: var(--ista-surface);
    border-color: var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .chart-menu-btn:hover { background: var(--ista-border); }
html[data-theme="dark"] .chart-menu {
    background: var(--ista-surface);
    border-color: var(--ista-border);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}
html[data-theme="dark"] .chart-menu-header { color: var(--ista-text-muted); }
html[data-theme="dark"] .chart-menu-item { color: var(--ista-text); }
html[data-theme="dark"] .chart-menu-item:hover { background: var(--ista-border); color: #fff; }
html[data-theme="dark"] .chart-menu-sep { background: var(--ista-border); }

/* ---- Sidebar-menu in dark: navy tekst + navy SVG-iconen → wit, actief lime ---
   .istaMenuText is ocean-blue (#00003C) en de .menu-icon-* zijn oceanblue/skyblue
   SVG's (background-image), allemaal onleesbaar op de donkere sidebar. Tekst wit,
   actief item lime; iconen wit gemaakt met brightness(0) invert(1). */
html[data-theme="dark"] .istaMenuText { color: var(--ista-text); }
html[data-theme="dark"] .istaMenuText.active { color: var(--istaLime); }
html[data-theme="dark"] .menu-icon { filter: brightness(0) invert(1); }

/* ---- nav-tabs (o.a. profiel-modal) -----------------------------------------
   Bootstrap-defaults zijn licht: witte actieve tab (#fff), grijze randen en
   grijze tekst → onleesbaar/uit de toon op het donkere modal-oppervlak. De
   actieve tab krijgt dezelfde achtergrond als het paneel eronder (--ista-surface)
   zodat hij er via de onderrand mee versmelt, net als in light mode. */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--ista-border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--ista-text-muted); }
html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus {
    border-color: var(--ista-border) var(--ista-border) var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--ista-text);
    background-color: var(--ista-surface);
    border-color: var(--ista-border) var(--ista-border) var(--ista-surface);
}
html[data-theme="dark"] .nav-tabs .nav-link.disabled { color: var(--ista-text-muted); }

/* ---- Melding-cards (addMessage, wwwroot/js/Base/message.js) ----------------
   O.a. de "Een moment geduld, de gegevens worden geladen..."-melding (met de
   skyblue loading-balls spinner) bij een grid-selectie. In light zijn dit lichte
   semantische vlakken met donkere tekst; in dark → donkere vlakken met lichte,
   leesbare tekst in dezelfde semantische tint. De tekst erft `color` van de card.
   De skyblue spinner-SVG contrasteert goed op deze donkere vlakken. */
html[data-theme="dark"] .cardInformation {
    background: var(--ista-surface-alt);
    border-color: var(--ista-border);
    color: var(--ista-text);
}
html[data-theme="dark"] .cardWarning {
    background: rgba(246, 201, 85, 0.12);
    border-color: #b9892b;
    color: #f3d58a;
}
html[data-theme="dark"] .cardError {
    background: rgba(238, 127, 93, 0.12);
    border-color: #c0563a;
    color: #f3b09a;
}

/* =====================================================================
   Hoog-contrast thema (toegankelijkheid / slechtzienden) — 4e optie naast
   licht / donker / systeem. theme.js zet bij voorkeur 'contrast' ZOWEL
   data-theme="dark" (zodat alle dark-componentregels hierboven hergebruikt
   worden) ALS data-contrast="on". Hieronder overschrijven we de semantische
   variabelen naar maximaal contrast (zuiver zwart/wit, WCAG AAA >= 7:1), met
   dikke randen en een duidelijke focus-indicator voor toetsenbordnavigatie.
   Staat bewust NA het dark-blok zodat deze variabelen winnen bij gelijke
   specificiteit.
   ===================================================================== */
html[data-contrast="on"] {
    --ista-bg: #000000;
    --ista-surface: #000000;
    --ista-surface-alt: #0d0d0d;
    --ista-text: #ffffff;
    --ista-text-muted: #ededed;          /* blijft hoog-contrast, niet weggezakt grijs */
    --ista-border: #ffffff;
    --ista-accent: #ffee32;              /* felgeel (~19:1 op zwart) - universele HC-highlight */
    --ista-accent-contrast: #000000;
    --ista-shadow: rgba(0, 0, 0, 0.9);
    color-scheme: dark;
}
/* Duidelijke, dikke focus-indicator overal (keyboard-navigatie voor slechtzienden). */
html[data-contrast="on"] a:focus,
html[data-contrast="on"] button:focus,
html[data-contrast="on"] input:focus,
html[data-contrast="on"] select:focus,
html[data-contrast="on"] textarea:focus,
html[data-contrast="on"] [tabindex]:focus,
html[data-contrast="on"] .nav-link:focus,
html[data-contrast="on"] *:focus-visible {
    outline: 3px solid var(--ista-accent) !important;
    outline-offset: 2px !important;
}
/* Randen om oppervlakken/controls zodat ze zich aftekenen tegen puur zwart. */
html[data-contrast="on"] .card,
html[data-contrast="on"] .dropdown-menu,
html[data-contrast="on"] .modal-content,
html[data-contrast="on"] .form-control,
html[data-contrast="on"] .form-select,
html[data-contrast="on"] .searchfield,
html[data-contrast="on"] input,
html[data-contrast="on"] select,
html[data-contrast="on"] textarea,
html[data-contrast="on"] .btn {
    border: 2px solid var(--ista-border) !important;
}
/* Sluitkruisje volledig dekkend i.p.v. de standaard opacity .5. */
html[data-contrast="on"] .btn-close {
    opacity: 1 !important;
}
/* Links: niet alleen op kleur leunen -> accentkleur + onderstreping. */
html[data-contrast="on"] a:not(.btn):not(.btn-close):not(.nav-link):not(.theme-option):not(.dropdown-item) {
    color: var(--ista-accent) !important;
    text-decoration: underline !important;
}
/* De actieve thema-keuze tekent zich al af via --ista-accent (=geel in HC). */

/* ===========================================================================
   Viewport & density layer  (docs/ReduQ-Viewport-Density-Plan.md, fase F0)
   ---------------------------------------------------------------------------
   Doel: de eerste schermvulling laten passen op een gewoon werkscherm. Drie
   onderdelen:

   1. DICHTHEIDS-TOKENS  - één schaal voor topbar/kaart/afstanden, zodat de
      "Compacte weergave"-schakelaar (html[data-density="compact"], gezet door
      theme.js + het pre-paint script in _LayoutLoggedOn) alleen deze variabelen
      hoeft te wijzigen.
   2. COMPACTE TOPBAR    - één regel i.p.v. 70px met een 30px duw erin.
   3. FILL-LAYOUT        - body.page-fill (gezet via ViewData["FillLayout"]):
      de pagina vult exact de viewport en het DATAGEBIED is het enige
      scrollgebied. Bewust opt-in per pagina, zodat nog niet omgebouwde
      pagina's gewoon blijven scrollen.

   Let op (valkuil uit het prototype): een Bootstrap .row is flex-wrap: wrap en
   een wrappende flexregel krijgt haar hoogte van de INHOUD - een .col erbinnen
   erft dus géén begrensde hoogte. De fill-layout zet daarom flex-wrap: nowrap
   op de paginarij.

   Toegankelijkheid: onder 992px breed of 600px hoog (en dus ook bij 200% zoom)
   valt alles terug op normale documentflow; niets wordt afgekapt.
   =========================================================================== */

:root {
    --ista-topbar-h: 48px;
    --ista-gap: 8px;
    --ista-card-pad: 16px;
    --ista-cell-pad-y: 4px;
    --ista-cell-pad-x: 8px;
    --ista-grid-font: 0.82rem;
}

@media (max-width: 1400px) {
    :root {
        --ista-card-pad: 12px;
        --ista-gap: 6px;
    }
}

/* Compacte weergave: strakker dan de standaard ("comfortabel"). */
html[data-density="compact"] {
    --ista-topbar-h: 42px;
    --ista-gap: 4px;
    --ista-card-pad: 8px;
    --ista-cell-pad-y: 2px;
    --ista-cell-pad-x: 6px;
    --ista-grid-font: 0.78rem;
}

/* --- footer: meestromen i.p.v. fixed overlay -------------------------------
   Was position:fixed met gefloate kinderen: nul layout-hoogte, maar het
   overschilderde wél de onderste ~28px - vandaar de <br><br><br>-blokken
   onderaan elke view. In de ingelogde shell is hij nu de laatste (vaste) rij
   van .fullwidth; in de login/beheer-layout (geen .app-shell) houdt
   margin-top:auto hem onderaan een korte pagina. */
footer.app-footer {
    flex: 0 0 auto;
    margin-top: auto;
    overflow: hidden; /* de kinderen floaten */
}

body:not(.app-shell) {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/* --- compacte topbar ------------------------------------------------------- */
.topbar.topbar-compact {
    height: auto;
    min-height: var(--ista-topbar-h);
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 0 !important;
}

    .topbar.topbar-compact .table-rowTopMenuTitle {
        margin-bottom: 0;
        align-items: center;
    }

    .topbar.topbar-compact .table-cell {
        padding: 0 4px;
        align-items: center;
    }

    .topbar.topbar-compact h1 {
        margin-bottom: 0;
        font-size: 1.05rem;
        line-height: 1.2;
        /* Krimpen en afkappen hoort bij de min-width:0 van de titelgrid; dat
           stond verderop nog een keer als tweede h1-blok (css:S4666). */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* sb-admin geeft de topbar-links een vaste hoogte van 4.375rem; die bepaalt
       anders alsnog de hoogte van de hele balk. */
    .topbar.topbar-compact .nav-item .nav-link {
        height: auto;
        min-height: calc(var(--ista-topbar-h) - 8px);
    }

    .topbar.topbar-compact .topbar-divider {
        height: calc(var(--ista-topbar-h) - 20px);
    }

.topbar-subtitle {
    display: block;
    font-size: 0.78rem;
    line-height: 1.15;
    color: var(--ista-text-muted, #6c757d);
    max-width: 60ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- fill-layout: de INHOUD vult de resterende hoogte ----------------------
   De ingelogde shell heeft al vaste chrome met .container-fluid als enige
   scrollgebied (zie "Vaste topbar / sidebar / footer, scrollende content"
   hierboven). page-fill bouwt daarop voort: in plaats van te scrollen wordt
   .container-fluid zelf een flexkolom, zodat de kaart - en daarbinnen de
   grafiek of het grid - precies de overgebleven hoogte krijgt. */
@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill #content > .container-fluid {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* niet de pagina, maar het datagebied scrollt */
        padding: var(--ista-gap) var(--ista-gap) 0;
    }

    /* nowrap: anders bepaalt de inhoud de hoogte van de flexregel.
       Marge/padding op 0: deze pagina's hebben één kolom over de volle breedte,
       dus de negatieve rijmarge (-8px uit de sb-admin-basis) en de
       kolompadding hebben hier geen functie en staken alleen buiten de
       container uit. */
    body#page-top.page-fill #content > .container-fluid > .row {
        --bs-gutter-x: 0;
        margin-left: 0;
        margin-right: 0;
        flex: 1 1 auto;
        min-height: 0;
        flex-wrap: nowrap;
        align-items: stretch;
    }

        /* min-width: 0 hoort erbij: in een niet-wrappende flexrij is de
           standaard min-width:auto, waardoor een brede toolbar of tabel de
           kolom bréder dan 100% zou maken en de kaart rechts wegvalt. */
        body#page-top.page-fill #content > .container-fluid > .row > [class*="col-"] {
            display: flex;
            flex-direction: column;
            min-height: 0;
            min-width: 0;
            height: 100%;
            padding-left: 0;
            padding-right: 0;
        }

    /* Zonder scrollende pagina heeft de "naar boven"-knop geen functie meer. */
    body#page-top.page-fill .scroll-to-top {
        display: none !important;
    }
}

/* De kaart die de resterende hoogte vult; kop/toolbar vast, inhoud scrollt. */
.card.card-fill {
    padding: var(--ista-card-pad);
    margin-bottom: var(--ista-gap);
}

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .card.card-fill {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }
}

/* --- herbruikbare compacte bouwstenen -------------------------------------- */

/* Eén regel met bediening: datumkiezer, segmentknoppen, acties rechts. */
.ista-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ista-gap);
    padding-bottom: var(--ista-gap);
    flex: 0 0 auto;
}

    .ista-toolbar .btn-sm {
        --bs-btn-padding-y: 0.15rem;
        --bs-btn-font-size: 0.8rem;
    }

/* Contextregel: debiteur - object - adres - ... op één afgekapte regel.
   Met .expanded (knop "Objectgegevens") mag hij over meerdere regels lopen. */
.ista-context-strip {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--ista-text, #495057);
    padding-bottom: var(--ista-gap);
    overflow: hidden;
    white-space: nowrap;
}

    .ista-context-strip.expanded {
        flex-wrap: wrap;
        white-space: normal;
        overflow: visible;
    }

    /* Items krimpen niet mee (anders wordt zelfs "18 °C" afgekapt): de regel
       loopt gewoon door en wordt rechts afgekapt. Alleen het adres - het
       langste veld - mag inkorten, zodat de velden erna vaker in beeld blijven.
       Alles staat compleet in de uitgeklapte stand (knop Objectgegevens). */
    .ista-context-strip .meta-item {
        flex: 0 0 auto;
        min-width: 0;
    }

    .ista-context-strip .meta-item[data-meta-for="dtlAddress"] {
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ista-context-strip.expanded .meta-item[data-meta-for="dtlAddress"] {
        flex: 0 0 auto;
        overflow: visible;
    }

    .ista-context-strip .meta-sep {
        color: var(--ista-border, #adb5bd);
        flex: 0 0 auto;
    }

    .ista-context-strip .meta-label {
        color: var(--ista-text-muted, #6c757d);
    }

/* ===========================================================================
   Datagrids in de fill-layout  (plan fase F2)
   ---------------------------------------------------------------------------
   Objecten / Debiteuren / Alarmgeschiedenis delen één opbouw:

       .card-fill
         .ista-toolbar      -> filterknop + chips + aantal + regels-per-pagina
         .collapse          -> filterpaneel (standaard ingeklapt)
         #tableDiv.grid-fill-> het grid; ALLEEN dit scrollt
         .grid-actions      -> primaire knop, blijft altijd in beeld

   De vendor-balk boven de tabel (.datatable-top met zijn eigen perPage-select)
   wordt verborgen; die keuze staat nu in de toolbar, waar hij geen 41px kost.
   =========================================================================== */

.grid-area {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .grid-area {
        flex: 1 1 auto;
    }
}

.grid-fill {
    min-height: 0;
}

    .grid-fill .datatable-top {
        display: none;
    }

    .grid-fill .datatable-bottom {
        flex: 0 0 auto;
        padding-top: 4px;
    }

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .grid-fill {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }

        body#page-top.page-fill .grid-fill .datatable-wrapper {
            flex: 1 1 auto;
            min-height: 0;
            display: flex;
            flex-direction: column;
        }

        /* Het enige scrollgebied van de pagina. */
        body#page-top.page-fill .grid-fill .datatable-container {
            flex: 1 1 auto;
            min-height: 0;
            overflow: auto;
        }

            /* Kop blijft staan tijdens het scrollen door de rijen. */
            body#page-top.page-fill .grid-fill .datatable-container thead th {
                position: sticky;
                top: 0;
                z-index: 2;
                background: var(--ista-surface, #ffffff);
            }
}

/* Compacte rijen: 41px -> ~24px, en cellen breken niet meer af over twee regels
   (dat was op 1366px de echte reden dat er nog maar twee rijen in beeld pasten).
   Te lange tekst krijgt een ellipsis + title-tooltip. */
table.fullwidth.table-compact th,
table.fullwidth.table-compact td {
    padding: var(--ista-cell-pad-y) var(--ista-cell-pad-x);
    font-size: var(--ista-grid-font);
    line-height: 1.25;
    vertical-align: middle;
}

table.fullwidth.table-compact td {
    white-space: nowrap;
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Adressen mogen wél meerdere regels beslaan (straat 1-25 / straat 2-40). */
    table.fullwidth.table-compact td.cell-multiline {
        white-space: normal;
        max-width: 32ch;
        text-overflow: clip;
    }

.grid-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 6px;
}

/* Filterpaneel + chips ------------------------------------------------------ */
.filter-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ista-gap);
    padding-bottom: var(--ista-gap);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 0;
}

.filter-label {
    font-size: 0.75rem;
    color: var(--ista-text-muted, #6c757d);
}

.filter-panel .searchfield {
    max-width: 200px;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1;
    padding: 3px 6px 3px 8px;
    border: 1px solid var(--ista-border, #d1d3e2);
    border-radius: 999px;
    background: var(--ista-surface-alt, #f5f5ff);
    color: var(--ista-text, #495057);
}

.filter-chip-clear {
    border: 0;
    background: none;
    padding: 0 2px;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

    .filter-chip-clear:hover {
        color: var(--ista-accent, #0a2864);
    }

.filter-count-badge {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ista-accent, #0a2864);
    color: var(--ista-accent-contrast, #ffffff);
}

/* Kolomprioriteit: welke kolommen op smallere schermen wegvallen. Toegekend via
   de tabelconfig (columnClasses in de pagina-scripts), zodat kop én cellen
   dezelfde klasse krijgen en de kolom echt verdwijnt.
       .col-prio-xxl  -> alleen vanaf 1400px
       .col-prio-xl   -> alleen vanaf 1200px
       .col-prio-lg   -> alleen vanaf  992px (dus niet op een tablet)
   Zo past een grid tot en met tabletbreedte zonder horizontaal te schuiven;
   daaronder scrollt het grid gewoon. */
@media (max-width: 1399.98px) {
    .col-prio-xxl { display: none !important; }
}

@media (max-width: 1199.98px) {
    .col-prio-xl { display: none !important; }
}

@media (max-width: 991.98px) {
    .col-prio-lg { display: none !important; }
}

/* Tablet: het grid mag horizontaal schuiven als het alsnog te breed is, en de
   toolbar mag over twee regels. */
@media (max-width: 991.98px) {
    .grid-fill .datatable-container {
        overflow-x: auto;
    }

    table.fullwidth.table-compact td {
        max-width: 20ch;
    }
}

/* Alarmgeschiedenis is een master/detail zonder simple-datatables: het grid is
   een gewone tabel (.grid-plain) die zelf scrollt, met daaronder het
   detailpaneel dat hooguit 45% van de hoogte pakt. */
@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .grid-fill.grid-plain {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        display: block;
    }

        body#page-top.page-fill .grid-fill.grid-plain thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: var(--ista-surface, #ffffff);
        }

    body#page-top.page-fill .alarm-detail-pane {
        flex: 0 1 auto;
        max-height: 45%;
        overflow: auto;
    }
}

/* ===========================================================================
   Formulierpagina's in de fill-layout  (plan fase F3)
   ---------------------------------------------------------------------------
   Alarmen en GJ-Prijs zijn lange instelschermen. Ze houden dezelfde opbouw als
   de grids: kop en knoppenbalk staan vast, alleen het middenstuk scrollt. De
   secties zijn Bootstrap-accordions (eerste open) zodat je niet langs alles
   hoeft te scrollen om bij het blok te komen dat je nodig hebt.
   =========================================================================== */

@media (min-width: 768px) and (min-height: 560px) {
    body#page-top.page-fill .form-fill {
        flex: 1 1 auto;
        min-height: 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    body#page-top.page-fill .form-scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }
}

/* Compactere accordion-koppen dan de Bootstrap-standaard (die is 1rem hoog
   plus 1.25rem padding: vier van die koppen kosten anders al 180px). */
.form-fill .accordion-button {
    padding: 0.45rem 0.75rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.form-fill .accordion-body {
    padding: 0.75rem;
}

.form-fill .accordion-item {
    border-color: var(--ista-border, #dee2e6);
}

/* Twee kolommen op brede schermen: invoer links, uitkomst rechts in beeld.
   Onder 1200px stapelen ze gewoon onder elkaar.
   minmax(0, 1fr) i.p.v. 1fr: een grid-item heeft standaard min-width:auto, dus
   een vast onderdeel erin (de rendementsmeter) maakte de kolom anders breder
   dan de kaart. Zie ook fase F4 onderaan. */
.form-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ista-gap);
    align-items: start;
}

    .form-split > * {
        min-width: 0;
    }

@media (min-width: 1200px) {
    .form-split {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }

        .form-split > .form-split-side {
            position: sticky;
            top: 0;
        }
}

/* GJ-Prijs: de uitleg bij de afrekenperiode staat op dezelfde regel als de
   kiezer en verdwijnt op smalle schermen (de knop spreekt dan voor zich). */
.gj-period-hint {
    flex: 1 1 240px;
    min-width: 0;
}

@media (max-width: 1199.98px) {
    .gj-period-hint {
        display: none;
    }
}

/* Het resultaatblok rechts een eigen vlak geven, zodat het zich aftekent. */
.form-split-side .gj-result {
    background: var(--ista-surface-alt, #f5f5ff);
    border: 1px solid var(--ista-border, #e5e5f0);
    border-radius: 6px;
    padding: 12px;
    margin-top: 0;
}

/* ===========================================================================
   Reflow op smalle schermen  (plan fase F4)
   ---------------------------------------------------------------------------
   Uit de breedtesweep (320 - 1920px) kwamen vijf plekken waar inhoud bij 320px
   - en dus ook bij 200% zoom op een laptop - werd AFGEKAPT zonder uitweg. Dat
   is WCAG 2.2 1.4.10 (Reflow): bij 320px mag niets verloren gaan.

   Let op: de ingelogde shell zet #wrapper op overflow:hidden (zie "Vaste
   topbar / sidebar / footer"), en de zijbalk houdt onder 768px nog ~78px vast.
   De contentkolom is bij een viewport van 320px dus maar ~242px breed. Alles
   hieronder maakt de betreffende blokken krimpbaar of schuifbaar binnen die
   242px in plaats van ze buiten beeld te laten lopen.
   =========================================================================== */

/* 1. De paginatitel in de compacte topbar duwde het thema- en gebruikersmenu
      buiten beeld: .table-container/.table-rowTopMenuTitle zijn grids en die
      hebben min-width:auto (dezelfde valkuil als bij de fill-kolommen). Met
      min-width:0 krimpt de titel en kapt hij af met een ellipsis. */
.topbar.topbar-compact .table-container,
.topbar.topbar-compact .table-rowTopMenuTitle,
.topbar.topbar-compact .table-cell {
    min-width: 0;
}

/* 2. Het tabblad "Vergelijken" viel op smalle schermen buiten de tabstrook.
      De strook mag daar horizontaal schuiven; de tabs zelf krimpen niet mee
      (anders wordt de tekst onleesbaar). */
@media (max-width: 767.98px) {
    .graph-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .graph-tab {
        flex: 0 0 auto;
    }
}

/* 3. Alarmgeschiedenis gebruikt geen simple-datatables: het grid is een gewone
      tabel (.grid-plain). Die kreeg alleen BINNEN de fill-layout een eigen
      scroll, dus onder 768px breed of 560px hoog stonden de laatste kolommen
      onbereikbaar buiten de kaart. */
.grid-fill.grid-plain {
    overflow-x: auto;
}

/* 4. De twee kolommen van .form-split (GJ-Prijs) krompen niet. Dat is opgelost
      bij de regel zelf (minmax(0, 1fr) + min-width:0 op de kinderen); hier mag
      geen tweede grid-template-columns staan, want deze sectie komt NA de
      @media (min-width: 1200px) die de tweekolomsopmaak zet en zou die dan met
      gelijke specificiteit overschrijven.
      De rendementsmeter (was 260px vast en stak daarmee 38px buiten de kaart)
      stond hier als tweede .gj-gauge-wrap/.gj-gauge-blok en staat nu bij de
      regel zelf. css:S4666 meldde dat terecht en samenvoegen kon hier wel:
      tussen die twee plekken staat niets dat de breedte aanraakt, alleen de
      dark- en contrast-regels voor de achtergrond. */

/* 5. Leesbaarheid van de secundaire tekst. De sb-admin-basis kleurt
      .btn-outline-secondary met de vaste grijstint #858796; op wit is dat
      3,56:1 en dus onder de 4,5:1 van WCAG 2.2 1.4.3. Hier zetten we alleen de
      knoppen in onze eigen toolbar en knoppenbalk om naar de thema-variabele
      (4,70:1); de rest van de sb-admin-huisstijl blijft ongemoeid. Voor
      .text-muted staat de omzetting bij de regel zelf, want die heeft
      !important.
      Het donkere thema heeft zijn eigen, specifiekere regel
      (html[data-theme="dark"] .btn-outline-secondary) en wint dus hiervan. */
.ista-toolbar .btn-outline-secondary,
.grid-actions .btn-outline-secondary {
    color: var(--ista-text-muted);
}

/* ---------------------------------------------------------------------------
   Accordion in het donkere thema  (fase F3 leverde de accordion, F4-nazorg)
   ---------------------------------------------------------------------------
   De secties op Alarmen zijn een Bootstrap-accordion. Bootstrap 5.3 zet daar
   LICHTE standaardwaarden op (witte achtergrond, donkere tekst, lichtblauwe
   actieve kop en een donkere chevron), en site.css had er geen enkele
   dark-override voor. In het donkere thema was daarmee de halve pagina wit.

   Bootstrap stelt die kleuren als custom properties beschikbaar, dus we hoeven
   niets te overschrijven met !important: we zetten de variabelen om naar onze
   eigen thema-tokens. Hoog contrast krijgt het automatisch mee, want die stand
   zet altijd óók data-theme="dark" (zie theme.js) en herdefinieert dezelfde
   tokens - alleen de chevron heeft daar een eigen, witte variant nodig.

   Waarom mijn F4-themacontrole dit niet vond: die meette contrastverhouding en
   geometrie. Een wit vlak met donkere tekst haalt een uitstekende
   contrastverhouding - het hoort alleen bij het verkeerde thema. Het meetharnas
   (een headless-Chrome script dat buiten deze repo staat, niet meegeleverd) is
   daarop uitgebreid met een controle op "themavreemde vlakken": een licht vlak
   terwijl data-theme="dark" actief is, is een fout ongeacht het contrast.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .accordion {
    --bs-accordion-color: var(--ista-text);
    --bs-accordion-bg: var(--ista-surface);
    --bs-accordion-border-color: var(--ista-border);
    --bs-accordion-btn-color: var(--ista-text);
    --bs-accordion-btn-bg: var(--ista-surface);
    --bs-accordion-active-color: var(--ista-text);
    --bs-accordion-active-bg: var(--ista-surface-alt);
    /* Chevron in de tekstkleur; de standaard is #212529 en dus onzichtbaar op
       een donkere kop. CSP: img-src staat 'self' data: toe, dus een data-URI
       mag hier (Bootstrap gebruikt zelf dezelfde vorm). */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ecf5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6ecf5'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

html[data-contrast="on"] .accordion {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* De pager van simple-datatables in het donkere thema. De vendor-CSS zet
   `color: #333` op elke paginaknop en `#d9d9d9` op de actieve en de hover-stand.
   Op een donkere kaart betekende dat: donkere cijfers op een donkere
   achtergrond (onleesbaar), met één lichtgrijze chip ertussen. De
   contrastcontrole miste dit doordat hij per selector het eerste element pakte -
   de actieve knop - en die had juist wél een lichte achtergrond. */
html[data-theme="dark"] .datatable-pagination a,
html[data-theme="dark"] .datatable-pagination button {
    color: var(--ista-text);
}

html[data-theme="dark"] .datatable-pagination a:hover,
html[data-theme="dark"] .datatable-pagination button:hover {
    background-color: var(--ista-surface-alt);
}

html[data-theme="dark"] .datatable-pagination .datatable-active a,
html[data-theme="dark"] .datatable-pagination .datatable-active a:focus,
html[data-theme="dark"] .datatable-pagination .datatable-active a:hover,
html[data-theme="dark"] .datatable-pagination .datatable-active button,
html[data-theme="dark"] .datatable-pagination .datatable-active button:focus,
html[data-theme="dark"] .datatable-pagination .datatable-active button:hover {
    background-color: var(--ista-accent);
    color: var(--ista-accent-contrast);
}

html[data-theme="dark"] .datatable-pagination .datatable-disabled a,
html[data-theme="dark"] .datatable-pagination .datatable-disabled button {
    color: var(--ista-text-muted);
}

/* Het eenheids-aanhangsel bij een invoerveld (Bootstrap .input-group-text) bleef
   licht in het donkere thema. Komt voor bij de hoeveelheid op GJ-Prijs. */
html[data-theme="dark"] .input-group-text {
    background-color: var(--ista-surface-alt);
    border-color: var(--ista-border);
    color: var(--ista-text);
}

/* 6. Zichtbare focus op een geselecteerde gridrij. De rijen zijn nu met het
      toetsenbord te bereiken (makeRowsKeyboardNavigable in Base/tables.js), dus
      moet de focus ook te zien zijn (WCAG 2.2 2.4.7). scroll-margin-top houdt de
      rij vrij van de vastgezette tabelkop wanneer de browser hem in beeld
      schuift; anders belandt de gefocuste rij eronder. */
table.fullwidth tbody tr:focus-visible {
    outline: 2px solid var(--ista-accent, #0071ff);
    outline-offset: -2px;
}

table.fullwidth tbody tr {
    scroll-margin-top: 2.5rem;
}

/* 7. De iconen in de themakiezer stonden via fa-sm op 11,9px. Bij die grootte
      lopen bij fa-universal-access (het toegankelijkheidsfiguurtje bij "Hoog
      contrast") het hoofd, de armen en de witte ring in elkaar over: het lijkt
      een figuur zonder hoofd. Vanaf 16px komt het hoofd los. Alle vier de
      iconen krijgen dezelfde maat, anders valt die ene uit de toon.
      (De knoppen op de Instellingen-pagina staan al op 1rem; daar verandert
      deze regel dus niets.) */
.theme-option i {
    font-size: 1rem;
}

/* 8. De vier themaknoppen passen als knoppengroep niet op een telefoon; onder
      576px staan ze onder elkaar (met de hoekafronding mee gekanteld). */
@media (max-width: 575.98px) {
    .settings-theme-group {
        flex-direction: column;
        align-items: stretch;
    }

        .settings-theme-group > .btn:not(:first-child) {
            margin-left: 0;
            margin-top: -1px;
        }

        .settings-theme-group > .btn:first-child:not(:last-child) {
            border-radius: var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0 0;
        }

        .settings-theme-group > .btn:last-child:not(:first-child) {
            border-radius: 0 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem);
        }

        .settings-theme-group > .btn:not(:first-child):not(:last-child) {
            border-radius: 0;
        }
}