body {
    font-family: 'Roboto';
    background-color: #F5F5F5;
}

.punchline {
    font-family: sans-serif;
    font-size: 1em;
    color: darkgreen;
}

header h1 {
    font-family: 'Robotica', sans-serif;
}

.bg-green {
    background-color: #004f04;
    color: white;
}

.bg-lightgreen {
    background-color: #c8e6c9!important;

}

.bg-lightred {
    background-color: #E45F5F!important;

}

.bg-lightgrey {
    background-color: #F5F5F5;

}
.bg-lightgrey2{
    background-color: #D3D3D3;
    color:#000;
}

.jumbotron {
    padding: 0.2rem 0;
}

.ablue {
    background-color: #13AAFC;
    color: #FFF;
    text-align: left;
    background-image: linear-gradient(#13AAFC, #A9DCFF);
}

.ablue2 {
    background-color: #13AAFC;
    color: #FFF;
    text-align: center;
}

h1 a:link {
    color: white;
    text-decoration: none;
}

h1 a:visited {
    color: white;
    text-decoration: none;
}

h1 a:hover {
    color: white;
    text-decoration: none;
}

h1 a:active {
    color: white;
    text-decoration: none;
}

/* form{
    max-width: 600px;
} */
.spaceship {
    width: 40%;
    /* float: left; */
    position: static;
    height: 10px;
}

.spaceship-normal {
    width: 40%;
    float: right;
    margin-top: -65px;
    min-height: 100px;
}

.spaceship-normal>img {
    min-width: 15%;
    max-width: 250px;
    float: right;
}

.spaceship>img {
    min-width: 40%;
    max-width: 250px;
}

.container {
    max-width: 950px;
}

.template-normalpage {
    background-color: #fff;
}

.template-questionpage {
    background-color: #F5F5F5;
}

/* 
a  h2, h4{
    color: #000;
} */



a>h5 {
    color: #FFF;
}

.text-light a,
.text-light a:visited,
.text-light a:hover,
.text-light a:active {
    color: #FFF;
}

.text-dark a,
.text-dark a:visited,
.text-dark a:hover,
.text-dark a:active {
    color: #000;
}

/* @media (min-width: 700px){
    .spaceship{
        margin-top: -15px;
        margin-left: 45px;
        max-width: 450px;
        width:50%;
    }
} */

.clouds {
    background-image: url("../img/clouds-both.c813844440f1.svg"), linear-gradient(#13AAFC, #A9DCFF);
    background-repeat: no-repeat;
    background-position: bottom;

    background-size: 100%;
}

.btn-grey {
    color: #333;
    background-color: transparent;
    border-color: #ccc;
    border-width:2px;
    min-width: 80px;
    white-space: normal;
    border-radius: 20px;
    max-width:100%;
}

a.btn-grey:hover,
a.btn-grey:active {
    color: #000;
    background-color: transparent;

}


.btn-orange {
    color: #FFF;
    background-color: #FDA736;
    border-color: #FDA736;
    min-width: 80px;
    white-space: normal;
    border-radius: 20px;
}

a.btn-orange:hover,
a.btn-orange:active {
    color: #FFF;
    background-color: #FDB746;

}

/* .ib{
    display: inline-block;
} */



.shadow {
    /* border-radius */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    /* box-shadow */
    -webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 0 10px;
    -moz-box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px;
    box-shadow: rgba(0, 0, 0, 0.8) 0 0 10px;
}
.border-selected{
    border-color:#4C83FD;
    border-style:solid;
}
.border-unselected{
    border-color:#FFF;
    border-style:solid;
}
.mw-800 {
    max-width: 800px;
}

.inner-category {
    margin-bottom: 25px;
    margin-right: 15px;
}

/* .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
    flex-wrap: wrap;
  }
  .row > [class*='col-'] {
    display: flex;
    flex-direction: column;
  } */



.pic-and-text {
    height: 100%;
}

.bg-darkgrey {
    background-color: #565656;
}

.bg-mediumgrey {
    background-color: #E9E9E9;
}

.correct {
    color: #39E000;
}

.incorrect {
    color: #FF0000;
}

.radio label>span {
    display: inline-block;
    vertical-align: middle;
}

.tc_selected {
    background: #3BDAD0;

}


.ms-container:after {
    content: ".";
    display: block;
    height: 0;
    line-height: 0;
    font-size: 0;
    clear: both;
    min-height: 0;
    visibility: hidden;

}

.ms-container .ms-selectable,
.ms-container .ms-selection {
    background: #eef3f7 !important;
    color: #555555;
    float: left;
    width: 46%;

}


.ms-container .ms-list {
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); */
    -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
    -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
    -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
    -o-transition: border linear 0.2s, box-shadow linear 0.2s;
    transition: border linear 0.2s, box-shadow linear 0.2s;
    /* border: 1px solid #ccc; */
    /* -webkit-border-radius: 3px; */
    /* -moz-border-radius: 3px; */
    /* border-radius: 3px; */
    position: relative;
    /* height: 200px; */
    padding: 0;
    overflow-y: auto;
    padding-bottom: 1.5rem !important;
}

.ms-container .ms-selectable {
    margin-right: 0%;
}

.ms-container .ms-list.ms-focus {
    /* border-color: rgba(82, 168, 236, 0.8); */
    /* -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6); */
    outline: 0;
    outline: thin dotted \9;
}

.ms-container ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
}

.ms-container .ms-optgroup-container {
    width: 100%;
}

.ms-container .ms-optgroup-label {
    margin: 0;
    padding: 5px 0px 0px 5px;
    cursor: pointer;
    color: #999;
}

.ms-container .ms-selectable li.ms-elem-selectable,
.ms-container .ms-selection li.ms-elem-selection {
    /* border-bottom: 1px #eee solid; */
    padding: 5px 17px;
    color: #555;
    font-size: 14px;
    background-color: #eef3f7 !important;
    ;
}

.ms-container .ms-selectable li.ms-hover,
.ms-container .ms-selection li.ms-hover {
    cursor: pointer;
    color: #222;
    text-decoration: none;
    background-color: #08c;
}

.ms-container .ms-selectable li.disabled,
.ms-container .ms-selection li.disabled {
    background-color: #eee;
    color: #aaa;
    cursor: text;
}

.selection-header {
    background: #3BDAD0;
    color: white;
    text-align: center;
    width: 50%;
    margin: auto;
    margin-top: -10px;
    margin-bottom: 10px;
    padding: 5px;
}

.arrow {
    margin: auto;
}

/* This is the default state */
.custom-radio .custom-control-label::before {
    background-color: #FFF;
    /* orange */
    box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem #DCDCEC;

}

/* This is the checked state */
.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-radio .custom-control-input:checked~.custom-control-label::after {
    background-color: #F5A623;
    /* green */
    /* this bg image SVG is just a white circle, you can replace it with any valid SVG code */
    border-radius: 50%;
    background-size: 0%;

}

/* active state i.e. displayed while the mouse is being pressed down */
.custom-radio .custom-control-input:active~.custom-control-label::before {
    color: #fff;
    background-color: #F5A623;
    /* red */
}

/* the shadow; displayed while the element is in focus */
.custom-radio .custom-control-input:focus~.custom-control-label::before {
    color: #fff;
    background-color: #F5A623;
    /* box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 123, 255, 0.25); */
}

span>svg {
    height: auto;
    width: auto;
    max-height: 6em;
    max-width: 100%;
}

.richtext-image {
    width: 100%;
    height: 100%;
}
.svg-container>svg {
    height: auto;
    width: 100%;
}
/* Aon Numerical Reasoning data sheet uses its own wrapper (NOT .svg-container)
   so it escapes the .svg-container>svg max-height:330px short-screen cap that
   shrank the dashboard. Cap the width and keep the SVG responsive. */
.nr-data-sheet {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}
.nr-data-sheet > svg {
    width: 100%;
    height: auto;
}
/* Phones: full-bleed (cancel the card's px-2) so the compact 494px dashboard
   fits the viewport whole — columns are content-sized, no horizontal scroll. */
@media (max-width: 575.98px) {
    .nr-data-sheet {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}
/* Aon digitChallenge keypad figure is portrait (≈340x494); without a cap the
   svg-container would stretch it to the full column width and make it very tall.
   Cap the width so it stays a sensible height (it still scales down on mobile). */
.dc-figure {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}
.dc-figure > svg {
    width: 100%;
    height: auto;
}
/* Aon verbal / understanding data sheet (460px card, text reflowed for mobile by
   the generator). Own wrapper so it escapes the .svg-container>svg 330px
   short-screen height cap; cap the width so desktop shows a reading column. */
.ds-figure {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.ds-figure > svg {
    width: 100%;
    height: auto;
}
/* Aon gridChallenge: a timed multi-screen memory game. Only one .grid-screen is
   shown at a time (the JS state machine toggles .is-active); cap the board width
   so the 880x390 scatter stays a sensible size and scales down on mobile. */
.grid-figure {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 575.98px) {
    /* every pixel of board width helps the memorise/recall dots */
    .grid-figure {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }
}
/* Aon ix: two rows of numbered objects (rewrapped from the kit's 916px single
   row). Cap the width so desktop doesn't blow the shapes up. */
.ix-figure {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.ix-figure > svg {
    width: 100%;
    height: auto;
}
.grid-screen {
    display: none;
}
.grid-screen.is-active {
    display: block;
}
.grid-game svg {
    width: 100%;
    height: auto;
}
/* Aon motionChallenge: an interactive sliding-block puzzle rendered client-side
   from data-puzzle. Cap the board so the portrait grid stays a sensible size. */
.motion-figure {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.motion-puzzle svg {
    width: 100%;
    height: auto;
}


@media screen and (max-height: 800px) {
    #meta-head{
        display:none;
    }
    #timer-circle, #seconds-timer{
        position: absolute;
        top: 0px!important;
        left: -75px;
    }
    .svg-container>svg {
        max-height:330px;
    }
}
@media screen and (min-height: 800px) {
    .svg-container>svg {
        max-height:none!important;
    }
    #timer-circle, #seconds-timer{
        position: absolute;
        top: 25px!important;
        left: -75px;
    }
    
}

td>svg {
    width: 100%;
    max-height: 150px;
}

td.venn_diagrams>svg {
    width: 100%;
    max-height: 6em !important;
}

span.figure_sequences>svg {
    max-height: None !important;
}

p.your_answer>svg {
    width: 100%;
    max-height: 200px;
}

p.venn_diagrams>svg {
    width: 100%;
    max-height: 6em !important;
}

.left {
    width: auto !important;
    max-width: 100%;
    height: auto !important;
}


.flag-icon-background {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
}

.flag-icon {
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative;
    display: inline-block;
    width: 1.33333333em;
    line-height: 1em;
}

.flag-icon:before {
    content: "\00a0";
}

.flag-icon.flag-icon-squared {
    width: 1em;
}

.flag-icon-us {
    background-image: url("../img/flags/4x3/us.ae65659236a7.svg");
}

.flag-icon-en {
    background-image: url("../img/flags/4x3/en.d3ddd6025a06.svg");
}

.flag-icon-nl {
    background-image: url("../img/flags/4x3/nl.d4811c278d65.svg");
}


.btn-input {
    display: block;
}

.btn-input .btn.form-control {
    text-align: left;
}

.btn-input .btn.form-control span:first-child {
    left: 10px;
    overflow: hidden;
    position: absolute;
    right: 25px;
}

.btn-input .btn.form-control .caret {
    margin-top: -1px;
    position: absolute;
    right: 10px;
    top: 50%;
}

.navbar {
    padding: 0;
}

ul.ml-auto {
    width: 50%;
    margin-top: -60px;
    margin-bottom: 50px;
}

.dropdown-menu {
    background-color: #F5F5F5;
    color: #212529;
    min-width: 9rem;
}

.dropdown-item:link,
.dropdown-item:focus,
.dropdown-item:hover {
    color: #212529;
    text-decoration: none;
    background-color: transparent;
    padding: .25rem .75rem;
}


.nav-link {
    padding: 0;
}

.backdrop {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.assessly-orange {
    color: #FDA736;
}

s {
    color: red;
    display: inline-block;
    text-decoration: none;
    position: relative;
}

s:after {
    content: '';
    display: block;
    width: 100%;
    height: 55%;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom: 3px solid;
}

.basic_arithmetic {
    font-size: calc(95% + 0.8vw + 0.8vh);
}

.basic_arithmetic_explanation {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.basic_arithmetic_explanation>svg {
    max-height: 100% !important;

}
.abstract_matrices_explanation>svg{
    max-width:450px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #888;
}

.separator::before {
    margin-right: 1em;
}

.separator::after {
    margin-left: 1em;
}

@media (min-width: 563px) {
    .basic_arithmetic_explanation {
        max-width: 60% !important;
    }
}

/* Portrait question figures: .svg-container>svg is width:100%, and on viewports
   taller than 800px the max-height cap above is lifted entirely, so a figure is
   scaled to the full column width whatever its intrinsic size. For a landscape
   data sheet that is right. For a figure that is as tall as it is wide it is not:
   the kubussen cube ships at 150x180 and was being drawn at 940x1146, a seven-fold
   upscale that pushed the answer options off the screen.

   Cap the wrapper instead of the svg, matching the Aon widgets above, and keep the
   caps near each figure's own size so nothing is upscaled far past what it was
   drawn for. The variant arm never had this problem: its frame sets max-width
   rather than width, so those figures already render at their intrinsic size. */
.cat-kubussen {
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
}
.cat-aon_inductive_clx {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
.cat-aon_inductive_cls {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
.cat-math_puzzles {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.figures_main>svg {
    max-width: 100% !important;
    height: auto;

}

.abstract_reasoning_main>svg {
    max-width: 100% !important;
    height: auto;
    width: 100%;
}

.figures svg {
    max-width: 100% !important;
    max-height: 100px !important;
    height: auto;
}

.figure_sequences_figures svg {
    max-width: 100% !important;
    max-height: 250px !important;
    height: auto;
}

.correct svg circle {
    stroke: green !important;
}

.wrong {
    color: red !important;
}

h3 {
    font-size: 1.6rem;
}

h6 {
    font-weight: bolder;
}

@media (max-width: 562px) {
    #timer-circle, #seconds-timer{
        position: absolute;
        top: 15px;
        left: -75px;
    }

    .choose-premium{
        margin-left: -5px;
    }

    .pay_overlay {
        min-width: 259px !important;
        left: 45%;
        margin-left: -43%;
        width: 100%;
    }

    .pay_overlay_container {
        min-height: 430px !important;
    }
    .pay_overlay_container_3 {
        min-height: 830px !important;
    }

}

@media (min-width: 563px) {
    #timer-circle, #seconds-timer{
        position: absolute;
        top: 25px;
        left: -75px;
    }
    .choose-premium{
        margin-left: -145px;
    }

    .pay_overlay {
        min-width: 325px !important;
        left: 50%;
        margin-left: -45%;
        width: 88%;
    }

}

@media (max-width: 414px) {
    .pay_overlay {
        min-width: 328px !important;
        left: 48%;
        margin-left: -52%;
        width: 100%;
    }

    .pay_overlay_container {
        min-height: 430px !important;
    }
}


@media (max-width: 365px) {
    .pay_overlay {
        min-width: 320px !important;
        left: 48%;
        margin-left: -52%;
        width: 98%;
    }

    .pay_overlay_container {
        min-height: 470px !important;
    }
}

.abstract_reasoning>label>svg,
.venn_diagrams>label>svg {
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 100% !important;
    height: auto;
    max-height: 90px !important;
    width: auto;
}

.figure_sequences>label>svg {
    margin-top: 15px;
    margin-bottom: 15px;
    max-width: 100% !important;
    height: auto;
    max-height: 110px !important;
    width: auto;
}


.custom-switch.custom-switch-md .custom-control-label {
    /* padding-top: 0.25rem; */
    padding-left: 2rem;
    /* padding-bottom: 1.5rem; */
}

.custom-switch.custom-switch-md .custom-control-label::before {
    height: 1.5rem;
    width: calc(2rem + 0.75rem);
    border-radius: 3rem;
    top: 0px !important;
}

.custom-switch.custom-switch-md .custom-control-label::after {
    width: calc(1.5rem - 4px);
    height: calc(1.5rem - 4px);
    border-radius: calc(2rem - (1.5rem / 2));
    top: 2px !important;
}

.custom-switch.custom-switch-md .custom-control-input:checked~.custom-control-label::after {
    transform: translateX(calc(1.5rem - 0.25rem));
}

#id_education_level{
    width:250px;
}

@media (min-width: 563px) {
    #content-wrap {
        height:inherit!important;
    }

    .paid_overlay{
        width:90%;
        top:70px;

    }
}

@media (max-width: 562px) {
    .paid_overlay{
        width:100%;
        top:15px;

    }
}

/* Flex sticky footer: the footer's mt-auto pushes it to the viewport bottom on
   short pages, and it grows with its content (the old absolute/fixed-height
   footer made the category list overflow the dark background). */
#page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Safari quirk: flex children of a min-height:100vh column can be SHRUNK
   against the 100vh basis even when the container grows — the footer's painted
   background then ends mid-content and the copyright/address lines spill onto
   the body background. Pin both children: content grows, footer never shrinks. */
#content-wrap {
    flex: 1 0 auto;
}

footer {
    width: 100%;
    flex-shrink: 0;
}
#more {display: none;}
.more {display: none;}

.progressbar-wrapper {
    background: #fff;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 5px;
}

.progressbar li {
    list-style-type: none;
    width: 20%;
    float: left;
    font-size: min(1rem,calc(0.5rem + 1vw));
    position: relative;
    text-align: center;
    text-transform: uppercase;
    color: #7d7d7d;
}

.progressbar li:before {
    width: min(3rem,calc(0.5rem + 3vw));
    height: min(3rem,calc(0.5rem + 3vw));
    content: "";
    line-height: min(3rem,calc(0.4rem + 3vw));
    border: 2px solid #7d7d7d;
    display: block;
    text-align: center;
    margin: 0 auto 3px auto;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
.progressbar li:after {
     width: 100%;
     height: 2px;
     content: '';
     position: absolute;
     background-color: #7d7d7d; 
     top:  min(1.45rem,calc(0.25rem + 1.5vw)); 
     left: -50%;
     z-index: 0;
}
.progressbar li a{
    color: #7d7d7d;
}
.progressbar li:first-child:after {
     content: none;
}

.progressbar li.active, .progressbar li.active a {
    color: green;
    font-weight: bold;  
}
.progressbar li.active:before, .progressbar li.active:before a {
    border-color: #55b776;
    background: green;
 }
.progressbar li.active + li:after {
    background-color: #55b776;
}

.progressbar li.active:before {
    color: #FFF;
    background: #55b776;
    background-size: 60%;
}
.progressbar li::before {
    background: #fff;
    background-size: 60%;
}
.progressbar {
    counter-reset: step;
}
.progressbar li:before {
    content: counter(step);
    counter-increment: step; 
}
h4{
    font-size:1.2rem;
}
.border-3 {
    border-width:3px !important;
}

.asblue{
    background-color:#26ADFB;
    color: #fefefe;
}

p > a, p> a:link,p> a:visited,p> a:active {
    color: blue;
    text-decsoration: underline;
}
.bg-brghtgrey {
    background-color: #EBEBF8;
}


.my-legend .legend-title {
    text-align: left;
    margin-bottom: 5px;
    font-weight: bold;
    font-size: 90%;
}

.my-legend .legend-scale ul {
margin: 0;
margin-bottom: 5px;
float: left;
list-style: none;
}

.my-legend .legend-scale ul li {
font-size: 80%;
list-style: none;
margin-left: 0;
line-height: 18px;
margin-bottom: 15px;
}

.my-legend ul.legend-labels li span {
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
}

.my-legend .legend-source {
font-size: 70%;
color: #999;
clear: both;
}

.my-legend a {
color: #777;
}

.card{
    background: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08), 0 0 6px rgba(0,0,0,.05);
      transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
  cursor: pointer;
}

.home-card:hover{
     transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

/* Agency logos: the legacy PNGs are square 110x110 with baked-in whitespace,
   newer SVGs (e.g. Aon) are wide and short — normalize every logo to the same
   110px-high box (the height the PNGs always rendered at) so all cards keep
   equal height. width MUST stay a percentage: any fixed px width raises the
   flex column's min-content width, which wraps the 4-per-row grid into 3+1
   with a full-width straggler. */
.home-card .card-img-top{
    width: 100%;
    height: 110px;
    object-fit: contain;
}

.card-header{
    border-radius: 1em 1em 0 0!important;
}

.row.position-relative:hover{
    box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}


.scale-up-hover:hover{
    transform: scale(1.15);
}

.stretched-link{
    text-decoration: none!important;
}

svg{
    max-width:100%;
    height:auto;
}

.mw-80{
    min-width: 80%!important;
}
#answers > input[type="radio"]:checked+label{ 
    font-weight:900;
    background-color: #b1e2ff; 
}

@media (max-width: 512px){
    .venn_label > svg{
        max-height:50px!important;
    }
}
@media (min-width: 512px){
    .venn_label > svg{
        max-height:70px!important;
    }
}
p ~ ul {
    text-align: left!important;
}
.px-6{
    padding-left: 4rem!important;
    padding-right: 4rem!important;
}
.carousel .carousel-indicators li {background-color: grey;}
.carousel .carousel-indicators li.active {background-color: black;}
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='green' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
   .carousel-control-next-icon {
     background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='green' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
   }
   .carousel-inner > .item {
    position: relative;
    display: none;
    -webkit-transition: 5s ease-in-out left;
    -moz-transition: 5s ease-in-out left;
    -o-transition: 5s ease-in-out left;
    transition: 5s ease-in-out left;
}

.carousel-inner > .item > p {
    min-width: 100%;
    width: 100%;
  }

/* Homepage card grids (agency "Oefenpakket" rows + category grid): a real CSS
   grid instead of flex-wrap with min-width fillers, so every card is the same
   size — 4-up on desktop, 2-up on phones — and rows share one height
   (grid-auto-rows). The .col wrappers stay in the markup for safety but are
   neutralized as grid items; the button sits on a shared baseline via
   margin-top:auto on the flex-column card body. */
.card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 1.25rem;
}
/* #more is a second, separate .card-grid (see the template comment), so the grid
   gap does not apply between row 1 and row 2 - give it the same spacing. */
#more > .card-grid {
    margin-top: 1.25rem;
}
.card-grid > [class*='col'] {
    flex: none;
    width: auto;
    max-width: none;
    min-width: 0 !important;
    padding: 0 !important;
}
.card-grid .card {
    width: 100%;
    height: 100%;
    min-width: 0 !important;
    display: flex;
    flex-direction: column;
}
.card-grid .card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0;
}
.card-grid .card-body h3 {
    min-width: 0;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.card-grid .card-body .btn {
    margin-top: auto;
    align-self: center;
}
@media (max-width: 767.98px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
    .card-grid .card-body h3 {
        font-size: 1.15rem;
        min-height: 0 !important;
    }
}

/* result_flow_2026 (arms b/c): value-moment paywall at the score reveal.
   Neutral styling on purpose — the results page renders under every theme arm,
   so the card leans on white/gray + the existing orange action color. */
.rf-results-hero { padding: 2rem 1rem 0.5rem; }
.rf-hero-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #7d7d7d;
    margin-bottom: 0.75rem;
}
.rf-hero-score {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.rf-hero-line { font-size: 1.1rem; margin-bottom: 0; }
.rf-hero-sub { color: #6c757d; max-width: 36em; margin: 0.5rem auto 0; }

.rf-card {
    background: #fff;
    border: 1px solid #E3E8EE;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    max-width: 430px;
    padding: 1.5rem 1.75rem 1.25rem;
    margin-top: 1.5rem;
    text-align: left;
}
.rf-card-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #7d7d7d;
    border-bottom: 1px solid #E3E8EE;
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
}
.rf-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
}
.rf-benefits li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.45rem;
}
.rf-benefits li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: #2F9E62;
    font-weight: 700;
}
.rf-social {
    font-size: 0.82rem;
    color: #7d7d7d;
    border-top: 1px solid #E3E8EE;
    padding-top: 0.7rem;
    margin-bottom: 0.9rem;
}
.rf-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.rf-price {
    font-size: 1.7rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}
.rf-price-note { color: #7d7d7d; font-size: 0.9rem; }
.rf-cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 1.05rem;
    padding: 0.7rem 1rem;
}
.rf-guarantee {
    text-align: center;
    font-size: 0.78rem;
    color: #7d7d7d;
    margin-top: 0.6rem;
}

/* Slim unlock banner on the blurred-explanation overlay (replaces the heavy
   inline cards in arms b/c — ONE paywall message per page). */
.rf-unlock {
    background: #fff;
    border-radius: 10px;
    max-width: 420px;
    padding: 1rem 1.25rem;
}
.rf-unlock a { font-weight: 600; }

/* Interstitial (arm c): one focused column. */
.rf-interstitial { max-width: 640px; padding: 3rem 1rem 2.5rem; }
.rf-interstitial .rf-card { margin-left: auto; margin-right: auto; }
.rf-skip { margin-top: 1.5rem; }
.rf-skip a { color: #7d7d7d; text-decoration: underline; font-size: 0.95rem; }

/* Page-weight: below-the-fold question/explanation blocks render lazily in
   arms b/c (the 1MB-inline-SVG problem, LAYOUT_FLOW plan §4 arm B). */
.rf-lazy {
    content-visibility: auto;
    contain-intrinsic-size: auto 500px;
}