body {
    z-index: 120;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    font-weight: 400;
    font-family: 'Lato',sans-serif !important;
}

/* Bootstrap 3's "b, strong { font-weight: bold }" was a fixed weight. Bootstrap 5's reboot
   uses "font-weight: bolder" instead - a relative keyword computed one step up from the
   inherited weight, not a fixed value. Headings on this page compute to font-weight:300 (via
   style.min.css's "Open Sans" rule), so "bolder" resolves to roughly 400 (normal) instead of
   700 (bold) - the <strong> text inside headings like <h2><strong>Welkom...</strong></h2>
   renders visibly lighter and narrower than production as a result. Restore the fixed value. */
b, strong {
    font-weight: bold;
}

html, .l-header .widget, .menu-item-object-us_page_block {
    font-family: 'Lato',sans-serif !important;
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
}

body.texture {
    background: url(/content/SUWB/images/vw-krul-roze.png);
}

h6, .h6 {
    font-size: 13px;
}

p { /*forgot password link*/
    font-size: 16px;
    line-height: 22px;
    font-family: 'Lato',sans-serif !important;
}

ul {
    list-style: none;
}

.textsideblock > h3 {
    margin-bottom: 0px;
}

#wizardcontainer {
    margin-top: 30px;
}

.paddingnull {
    padding: 0px;
}

@font-face {
    font-family: stereofidelic;
    src: url(/Content/SUWB/Font/Baloo2-VariableFont_wght.ttf);
}

@media (min-width:902px) {
    .logo-shwj {
        height: 135px !important
    }
}

@media (min-width:602px) and (max-width:901px) {
    .logo-shwj {
        height: 30px !important
    }
}

@media (max-width:601px) {
    .logo-shwj {
        height: 60px !important
    }
}

.butterflyLoginStyle {
    margin-bottom: -24px;
    margin-left: -40px;
}

.butterFlyPosition {
    position: absolute;
}

.logo-container {
    z-index: 120;
    float: right;
}

.navbar {
    /* Bootstrap 3's own base rule was ".navbar { min-height:50px; margin-bottom:20px;
       border:1px solid transparent }" - that's where the bar's height baseline and the
       gap above the "Home" breadcrumb came from, not from anything in this file. Bootstrap
       5's .navbar has none of that, but instead adds its own container padding
       (padding: var(--bs-navbar-padding-y) ...), which the ported .navbar-nav > li > a
       padding elsewhere already reproduces - so it must be zeroed here or the bar ends up
       taller than production. */
    background-color: #384b5f !important;
    width: 100%;
    border-radius: 0px;
    text-align: center;
    padding: 0;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.float-right {
    float: right !important;
}

.navbar-nav {
    width: 100%;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbar .navbar-collapse {
    text-align: left;
}

.nav-item-home {
    font-size: 16px;
    font-family: 'Lato',sans-serif;
    color: #43A9D1 !important;
    padding-left: 20px;
}

.nav-link-home:hover {
    color: #f55742 !important;
}

.nav-item {
    font-size: 16px;
    font-family: 'Lato',sans-serif;
    color: #CED6DE;
}

.nav-link:hover {
    color: #f55742 !important;
}


.header {
    height: 55px;
}

    .header > h3 {
        text-align: unset !important;
    }

.navbar-default .navbar-nav > li > .disabled {
    color: #bbbbbb;
    cursor: default;
}

    .navbar-default .navbar-nav > li > .disabled:hover {
        color: #bbbbbb;
        cursor: default;
    }

.logo-img {
    background: url(/Content/SUWB/images/logo.png) no-repeat !important;
    margin-top: -65px;
    padding-left: 19px;
    margin-left: 34px;
    position: absolute;
    height: 110px;
    text-align: center;
    width: 400px;
}


.btn {
    border-color: #ccc;
    border-radius: 0 !important;
    -webkit-border-radius: 0;
    outline: none;
    margin-bottom: 5px !important;
    margin-left: 0px;
    font-size: 13px;
    padding: 7px 11px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 12%), 1px 1px 0 rgb(255 255 255 / 20%) inset;
}

.btn-primary, .btn-primary:focus {
    background-color: #e03c3c !important;
    border-color: #e03c3c !important;
}

.login-container .block-flat .header {
    padding: 9px 20px;
    background: #EC677F !important;
    border-bottom: 1px solid #c73047 !important;
}

.banner-footer {
    background-color: #384b5f;
    margin-top: 10px;
    padding: 20px;
}

.footer-text h3 {
    font-family: stereofidelic;
    font-size: 45px;
}

.banner-header {
    background-image: url(/Content/SUWB/images/headerspacerSUWB.png);
    height: 168px;
    z-index: 120;
}

.footer-text h3 {
    font-family: stereofidelic;
    font-size: 45px;
    padding: 0px, 27px;
    margin: 0 auto;
    color: #999999;
}

.menu-link { /*links in the footer*/
    font-size: 20px;
}

.adres {
    font-size: 16px;
    color: #FFFFFF;
}

#cl-wrapper {
    padding: 0px;
    position: unset !important;
}

.cl-mcont {
    background-color: unset !important;
}

.wizard-row .fuelux {
    position: relative;
}

.wizard ul {
    width: 100%;
    list-style: none outside none;
    padding: 0;
    margin: 0;
}

#messageList > .dropdown-menu > li > .nano > .content > ul > li > a {
    white-space: pre-line;
}

.side-bar {
    margin-top: 20px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
}

.side-bar-pink-header {
    background-color: #EC677F;
    text-align: center;
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
}

    .side-bar-pink-header i.icon-front {
        color: #EC677F;
        font-size: 24px;
    }

    .side-bar-pink-header i.icon-back {
        margin-top: -10px;
        color: #f1f9fe;
        font-size: 60px;
    }

    .side-bar-pink-header span {
        margin-top: 20px;
        margin-bottom: -10px;
    }

.side-bar-pink-header-1 {
    background-image: url('/Content/Portal/images/direct-doen.png');
    background-size: cover;
    height: 125px;
}

.side-bar-blue-header-1 span {
    margin-top: 110px;
}

.side-bar-pink-header-2 {
    background-image: url('/Content/Portal/images/direct-doen.png');
    background-size: cover;
    height: 125px;
}

    .side-bar-pink-header-2 span {
        margin-top: 110px;
    }

.side-bar-pink-header-3 {
    background-size: cover;
    height: 125px;
}

    .side-bar-pink-header-3 span {
        margin-top: 110px;
    }

.side-bar-pink-content {
    color: black;
    background-color: transparent;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
}

.side-bar-pink-content-fixedheight {
    color: black;
    background-color: #f1f9fe;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    height: 300px;
}

.panel-group {
    margin-bottom: 0px;
}

.accordion {
    margin-bottom: 0px;
}

    .accordion.accordion-color .panel-heading a {
        background-color: #e03c3c !important;
    }

    .accordion.accordion-color .panel-collapse .panel-body {
        background-color: #e03c3c !important;
        opacity: .65;
    }

    .accordion.accordion-color .panel-heading a.collapsed {
        background-color: #fff;
        color: #fff;
    }

.side-bar-pink-content h3 {
    color: #e03c3c;
    font-size: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}


.side-bar-pink-content h4 {
    text-align: center;
}

.login-container .block-flat .foot {
    text-align: center;
    padding: 0 30px 15px;
}

.side-bar-pink-content-fixedheight h3 {
    color: #EC677F;
    margin: 0 0 8px 0;
    padding-top: 26px;
    text-align: center;
}

.side-bar-pink-content-fixedheight h4 {
    text-align: center;
}

.side-bar-darkred-header {
    background-color: #c73047;
    text-align: center;
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
}

    .side-bar-darkred-header i.icon-front {
        color: #c73047;
        font-size: 24px;
    }

    .side-bar-darkred-header i.icon-back {
        margin-top: -10px;
        color: #f8fbf3;
        font-size: 60px;
    }

    .side-bar-darkred-header span {
        margin-top: 20px;
        margin-bottom: -10px;
    }

.side-bar-darkred-header-1 {
    background-size: cover;
    height: 125px;
}

    .side-bar-darkred-header-1 span {
        margin-top: 110px;
    }

.side-bar-darkred-header-2 {
    background-image: url('/Content/Portal/images/box2.png');
    background-size: cover;
    height: 125px;
}

    .side-bar-darkred-header-2 span {
        margin-top: 110px;
    }

.side-bar-darkred-header-3 {
    background-size: cover;
    height: 125px;
}

    .side-bar-darkred-header-3 span {
        margin-top: 110px;
    }

.side-bar-darkred-content {
    color: black;
    background-color: #f8fbf3;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
}

.side-bar-darkred-content-fixedheight {
    color: black;
    background-color: #f8fbf3;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    height: 300px;
}

.side-bar-darkred-content h3 {
    color: #c73047;
    margin: 0 0 8px 0;
    padding-top: 26px;
    text-align: center;
}

.side-bar-darkred-content h4 {
    text-align: center;
}

.side-bar-darkred-content-fixedheight h3 {
    color: #c73047;
    margin: 0 0 8px 0;
    padding-top: 26px;
    text-align: center;
}

.side-bar-darkred-content-fixedheight h4 {
    text-align: center;
}


.header-wrapper {
    position: absolute;
    width: 100%;
}
.panel-default {
    border-color: #e8a9a9 !important;
}

    .panel-default > .panel-heading {
        color: #333 !important;
        background-color: #fef1f1 !important;
        box-shadow: none;
        border: none;
    }

    .panel-default > .panel-footer {
        color: #333;
        background-color: #fef1f1 !important;
        box-shadow: none;
        border: none;
    }




    .panel-default > .active-panel {
        color: white;
        background-color: #009ee3;
    }

.header-green {
    background: url('/Content/Portal/images/header-green-background.png') repeat-x;
    position: fixed;
    top: 0;
    z-index: 128;
    height: 170px;
}

    .header-green i {
        color: white;
    }

    .header-green a {
        font-weight: 300;
        padding-right: 20px;
        font-size: 18px;
        color: white;
    }

        .header-green a:hover {
            text-decoration: none;
        }

        .header-green a:active {
            text-decoration: none;
        }

        .header-green a:nth-last-of-type(1) {
            padding-right: 6px;
        }

.header-blue {
    background: url('/Content/Portal/images/header-blue-background.png') repeat-x;
    position: fixed;
    top: 0;
    z-index: 128;
    height: 70px;
}

    .header-blue i {
        color: white;
    }

    .header-blue a {
        font-weight: 300;
        padding-right: 20px;
        font-size: 18px;
        color: white;
    }

        .header-blue a:hover {
            text-decoration: none;
        }

        .header-blue a:active {
            text-decoration: none;
        }

        .header-blue a:nth-last-of-type(1) {
            padding-right: 6px;
        }


.header-green-menu {
    margin-top: 22px;
}

.header-white {
    top: 170px;
    position: fixed;
    z-index: 64;
    background: url('/Content/Portal/images/header-white-background.png') repeat-x;
    height: 60px;
}

    .header-white a {
        font-weight: 300;
        font-size: 18px;
        color: black;
        padding-right: 20px;
    }

        .header-white a.menu-active {
            color: #a2c73b;
            font-weight: 500;
        }

        .header-white a:hover {
            text-decoration: none;
        }

        .header-white a:active {
            text-decoration: none;
        }

        .header-white a:focus {
            text-decoration: none;
        }

        .header-white a.disabled {
            color: #bbbbbb;
            cursor: default;
        }

.header-white-menu {
    margin-top: 12px;
}

/*Blocks home*/
h3 {
    /*    transform: rotate( -4deg );*/
    font-family: 'Stereofidelic',sans-serif;
}

h3, .h3 {
    font-size: 35px;
}

a {
    color: #e03c3c;
    text-decoration: none;
    outline: 0 none;
}

.btn {
    background-color: #e03c3c !important;
}

.blockcustom {
    height: 260px;
}

.blockcustomtextblock0 > h3 {
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #d9354e;
}

.blockcustomtextblock1 > h3 {
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #59b0dd;
}

.blockcustomtextblock2 > h3 {
    border-top-left-radius: 0.2em;
    border-top-right-radius: 0.2em;
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #ed8025;
}

.block-space-right {
    margin-top: 20px;
    box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
    border-top-left-radius: 0.6em;
    border-top-right-radius: 0.6em;
}

    .block-space-right > div > ul > li > a {
        font-size: 15px;
    }

    .block-space-right > div > ul {
        padding: 15px;
        margin: 0px
    }

.blockcustomtextRed > h3 {
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #d9354e;
}

.blockcustomtextBlue > h3 {
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #59b0dd;
}

.blockcustomtextYellow > h3 {
    color: white;
    text-align: center;
    padding: 5px;
    background-color: #ed8025;
}

.ubtn-img-container .ubtn-ctn-left {
    position: absolute;
    left: 0;
    width: 100%;
    top: 50%;
    -webkit-transform: translateX(0) translateY(-50%);
    -ms-transform: translateX(0) translateY(-50%);
    transform: translateX(0) translateY(-50%);
}

.vc_custom_1612856323942 {
    margin-left: 0px !important;
    padding-left: 148px !important;
    position: absolute;
}

.ubtn-img-container {
    position: relative;
}

    .ubtn-img-container img {
        position: relative;
        display: block;
        max-width: 100%;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 0 auto;
        padding: 0;
    }

.ubtn {
    font-weight: normal;
    border: none;
    height: 45px;
    width: 143px;
    background: #e03c3c;
    color: #ffffff;
}

.fuelux .wizard ul li.active {
    background: #fff;
    color: #e03c3c;
}

.vc_column-inner {
    height: 150px;
}

a:focus, a:hover, a:active {
    outline: 0 none;
    text-decoration: none;
    color: #3078ef;
}

.nav-tabs > li > a.active:after, .nav-tabs > li > a.active:hover:after, .nav-tabs > li > a.active:focus:after {
    content: "";
    display: block;
    height: 2px;
    background: #e03c3c;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.nav-tabs > li > a.active, .nav-tabs > li > a.active:hover, .nav-tabs > li > a.active:focus {
    border-top: 2px solid #e03c3c;
    border-radius: 0;
    -webkit-border-radius: 0;
    border-bottom: 0;
    padding-bottom: 10px;
    padding-top: 8px;
    box-shadow: 1px -3px 4px -3px rgb(0 0 0 / 8%);
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
    position: static;
}

/* Bootstrap 5's .nav-link carries its own default (blue) link color, and ".nav-tabs .nav-link.active"
   (3 classes) beats the plain-".active" rule above (2 classes + 2 elements) on specificity once the
   tab loses :focus (the :focus variant above has enough classes+elements to win while focused, which
   is why the red border only survived until blur). Re-declare the same borders with !important so
   they hold regardless of focus state, and override the non-active link color/border the same way. */
.nav-tabs > li > a.nav-link.active, .nav-tabs > li > a.nav-link.active:hover, .nav-tabs > li > a.nav-link.active:focus {
    color: #212529 !important;
    border-top: 2px solid #e03c3c !important;
    border-left: 1px solid #ececec !important;
    border-right: 1px solid #ececec !important;
    border-bottom: 0 !important;
}

.nav-tabs > li > a.nav-link:not(.active) {
    color: #e03c3c !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.nav-tabs > li > a.nav-link:not(.active):hover, .nav-tabs > li > a.nav-link:not(.active):focus {
    color: #3078ef !important;
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.pb {
    padding-bottom: 10px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #e03c3c;
}

.fa-square:before {
    content: "\f0c8";
    color: #384b5f;
}

.fa-home:before {
    content: "\f015";
    color: #e03c3c;
}

.popover-header {
    font-family: Verdana, Geneva, sans-serif !important;
}

.popover-title {
    font-family: Verdana, Geneva, sans-serif !important;
}

.popover {
    font-family: Verdana, Geneva, sans-serif !important;
}
/*Blur*/
.blur-content {
    filter: blur(2px);
    position: absolute;
    pointer-events: none;
}

.housinginfo td, .housinginfo th {
    padding: 0px;
    font-weight: 100;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.housinginfo tr {
    float: none !important;
}

.housinginfo {
    border-collapse: unset;
}

/* Bootstrap 5 shrank .container's max-width at every breakpoint versus Bootstrap 3
   (576:540 vs BS3's unconstrained-below-768, 768:720 vs 750, 992:960 vs 970, 1200:1140
   vs 1170). Since col-md-3/col-md-9/col-md-4 etc. are percentages of .container, this
   makes the whole "MIJN GEGEVENS" sidebar - and the red bars inside it - visibly
   narrower than production at the same viewport width.

   At a wide viewport (e.g. 1920px) EVERY one of these min-width queries is true at
   once, so Bootstrap 5's own smaller max-width from a lower breakpoint (e.g. the
   1170px from >=1200px) stays in effect and clamps the intended >=1400px width right
   back down - explicit width alone isn't enough once max-width is smaller than it.
   Each rule below cancels max-width back to none, so plain width - which cascades
   normally, last rule wins, no clamping - decides the size, matching Bootstrap 3
   exactly. */
@media (min-width: 576px) {
    .container {
        max-width: none;
    }
}
@media (min-width: 768px) {
    .container {
        max-width: none;
        width: 750px;
    }
}
@media (min-width: 992px) {
    .container {
        max-width: none;
        width: 970px;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: none;
        width: 1170px;
    }
}
@media (min-width: 1400px){
    .container{
        max-width: none;
        width: 1370px;
    }
}

.flagHeight{
    height:15px;
}

.flagNL {
    float: right;
    padding-right: 2px !important;
}

.flagGB {
    float: right;
    padding-left: 2px !important;
}


/* Bootstrap 5 renamed panel to card. The portal markup moved with it; these mirror the
   rules above so the SHWJ styling still lands on the same components. */
.accordion.accordion-color .card-header a {
        background-color: #e03c3c !important;
    }
.accordion.accordion-color .panel-collapse .card-body {
        /* CleanZone's own .panel-body rule (style.css ~3423) supplies color:#FFF for the old
           class name; it never landed on .card-body, so this text fell back to the dark
           default. Repeat the white color here instead of relying on that base rule. */
        background-color: #e03c3c !important;
        color: #fff !important;
        opacity: .65;
    }
.accordion.accordion-color .card-header a.collapsed {
        background-color: #fff;
        color: #fff;
    }
.card > .card-header {
        /* CleanZone's ".accordion .panel-heading { background:#fff; padding:0; }" (style.css
           ~3373) never landed on .card-header either. Without padding:0 here, Bootstrap 5's
           default card-header padding insets the colored <a> inside it on every side, making
           the red bar visibly narrower than the sidebar's other full-width elements. */
        padding: 0;
        color: #333 !important;
        background-color: #fef1f1 !important;
        box-shadow: none;
        border: none;
    }
.card-title {
        /* Bootstrap 3's ".panel-title { margin-top:0; margin-bottom:0; }" never got ported to
           .card-title. Bootstrap 5's .card-title has margin-bottom: .5rem by default, which
           shows through as a stripe of .card-header's own #fef1f1 background between the red
           <a> bar and the content below it. */
        margin: 0;
    }
.card > .card-footer {
        color: #333;
        background-color: #fef1f1 !important;
        box-shadow: none;
        border: none;
    }

/* style.css's ".panel { border: none; box-shadow: none; }" and ".panel-group .panel
   { border-radius: 0; }" (~line 478) never landed on .card, so Bootstrap 5's default
   card border/box-shadow/radius show through around the sidebar accordions. */
.card {
    border: none;
    box-shadow: none;
    border-radius: 0;
}


/* CleanZone dresses the accordion through .panel-heading (style.css ~3377) and that is where the
   white link text, the block layout and the padding come from. The portal markup is .card-header
   since the Bootstrap 5 move, so those rules stopped landing - ported here verbatim. The red
   background above still wins over the blue, it carries !important. */
.accordion .card-header a {
    font-size: 15px;
    padding: 17px 16px;
    display: block;
    color: #3078EF;
}

.accordion .card-header a .fa {
    transition: transform 200ms ease-in-out;
    margin-right: 10px;
    transform: rotate(90deg);
}

.accordion .card-header a.collapsed .fa {
    transform: rotate(0deg);
}

.accordion .card-header + .panel-collapse .card-body {
    border-top: 0;
    padding: 3px 20px 20px 34px;
}

.accordion.accordion-color .card-header a {
    background-color: #4D90FD;
    color: #FFF;
}

/* Bootstrap 3 floated the menu items with .navbar-nav > li { float: left }. Bootstrap 5 lays the
   navbar out with flex instead, but this portal positions its right-hand items (language, logout,
   messages) with .float-right, which flex ignores - so keep the float model and restore the rule
   the items are written against. */
.navbar .navbar-nav > li {
    float: left;
}

/* Bootstrap 3 gave the menu links their box: .nav > li > a { display:block; padding:10px 15px }
   plus .navbar-nav > li > a { line-height:20px } and 15px top/bottom from 768px up. Bootstrap 5
   styles .nav-link instead and these anchors carry no class, so without this the items render as
   bare inline text with no spacing between them. Values copied from Bootstrap 3.3.1. */
.navbar .navbar-nav > li > a {
    display: block;
    position: relative;
    padding: 15px;
    line-height: 20px;
}

/* overrides.css hides .action-link-button by default (display:none) and only reveals it
   inside its own "@media (max-width: 767px)" block - built for some other narrow-screen
   action-button use case. This portal reuses the same class for the mailto/tel icon next
   to Email/Mobile fields, which production always shows regardless of viewport width.
   Reveal it unconditionally here instead of changing the shared framework rule, and keep it
   inline: the <a> is rendered inside the field's <label> (see EditorType.EmailAddress in
   HTMLBuilderExtensions), and position:absolute gave it no positioned ancestor nearer than
   #pcont - CleanZone sets #pcont{position:relative} - so it escaped to the top-right corner
   of the whole wizard instead of sitting next to its own field. */
.action-link-button {
    display: inline-flex;
    height: 25px;
    width: 25px;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    z-index: 1;
}

.wizard-complete {
    margin-left: auto;
}

/* Fields the wizards lock conditionally are rendered `readonly`, not `disabled`: a disabled
   control is dropped from the FormData the form posts and from the clean-state snapshot the
   unsaved-changes check compares against, so luscinia's SetEnabled action only ever toggles
   `readonly`. Bootstrap 5 greys `:disabled` but not `[readonly]`, which left a locked field
   looking editable - these rules restore the disabled appearance for the readonly case.
   Loaded after luscinia.css (see Views/SUWB/CustomLayout.cshtml), so it wins. */
.form-control[readonly]:not(.form-control-plaintext),
.form-select[readonly] {
    background-color: var(--bs-secondary-bg, #e9ecef);
    opacity: 1;
}

/* The region label is rendered inside this container, in front of the grid (see
   BeforeRenderingPropertyElement in RegistrationWizardModule), so lay the container out as one
   12-column row: label in the first 2 columns, grid in the remaining 10 - the same split every
   other label/editor pair on this form uses. The table itself carries g-col-12 from the
   framework, so its span is overridden here. Row gap 0 keeps it on a single line. */
.table-container:has(table[data-luscinia-field-name$="RegisterRegions"]) {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 1.5rem;
    align-items: center;
}

.table-container:has(table[data-luscinia-field-name$="RegisterRegions"]) > label {
    /* Stated explicitly rather than relying on the label's own g-col-2: it was ending up in
       a single column, which pulled the whole row 100px out of line with the other rows. */
    grid-column: auto / span 2;
    margin-bottom: 0;
}

.table-container:has(table[data-luscinia-field-name$="RegisterRegions"]) > .table-responsive,
.table-container:has(table[data-luscinia-field-name$="RegisterRegions"]) > table {
    grid-column: auto / span 10;
}

@media (max-width: 767px) {
    /* Labels stack above their editors at this width, so let the grid take the full row. */
.table-container:has(table[data-luscinia-field-name$="RegisterRegions"]) {
        display: block;
    }
}

/* Labels and grid rows are not editable text, but the default cursor over text is an I-beam and
   the text is selectable, so clicking a label - or the space around a checkbox - looked like a
   caret had been placed in an input. Make them read as controls instead. */
#wizardFormId label.col-form-label {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

#wizardFormId .property-container:has(input[type="checkbox"]) {
    -webkit-user-select: none;
    user-select: none;
}

#wizardFormId input[type="checkbox"] {
    cursor: pointer;
}

table[data-luscinia-field-name$="RegisterRegions"] tbody > tr,
table[data-luscinia-field-name$="RegisterRegions"] tbody > tr td {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* The unit-info pages used to widen the popover from javascript with
   $(this).data("bs.popover").tip().css(...) on show.bs.popover - a bootstrap 3/4 api that
   bootstrap 5 no longer has. Same result, declaratively. */
.popover {
    max-width: 850px;
}

/* De follow-up kaarten op CallInfo dragen inmiddels Bootstrap 5 markup (.card-header /
   .card-footer) terwijl de kleurregels hierboven nog op de Bootstrap 3 namen staan
   (.panel-heading / .panel-footer). Daardoor viel het roze kopje weg. Zelfde kleuren, nieuwe
   namen - de oude regels blijven staan voor de schermen die nog niet om zijn. */
.panel-default > .card-header {
    color: #333 !important;
    background-color: #fef1f1 !important;
    box-shadow: none;
    border: none;
}

.panel-default > .card-footer {
    color: #333;
    background-color: #fef1f1 !important;
    box-shadow: none;
    border: none;
}

/* De follow-up kaarten op CallInfo dragen .card, maar de regels hierboven (voor de accordions in
   de zijbalk) halen juist bij ELKE .card de rand, de afronding en de padding van .card-header
   weg. Voor deze kaarten moet dat terug: zij dragen .panel-default als eigen haakje, dus hier
   staan ze specifieker en winnen ze. Zo komen de omlijning, de tussenruimte en de inspringing
   van de naam terug zoals in de Bootstrap 3-versie. */
.card.panel-default {
    border: 1px solid #e8a9a9 !important;
    border-radius: .375rem;
    box-shadow: none;
    margin-bottom: 20px;
}

.card.panel-default > .card-header,
.card.panel-default > .card-footer {
    padding: .5rem 1rem;
}