:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/logo.png");
    --logo-alt: url("../../custom/theme/assets/images/logo.png");

    /***Header Image (Van toepassing op visual.twig)***/
    /* --header-image: url("../../custom/theme/assets/images/header_background.jpg"); */

    /***Brand Colors***/
    --color-brand-primary: #f26c21;
    --color-brand-primary-rgb: 89, 41, 14;
    --color-brand-secondary: #10c5b8;
    --color-brand-tertiary: #008A0B;
    --color-brand-light: #f9cb99;
    --color-brand-dark: #d25914;
    --color-neutral-gray-08:#404043;
    --color-neutral-gray-09: #1F1F20;
    --color-message-succes:#10c5b8;

    /***Font***/
    /* --font-family: 'Roboto', sans-serif; */
    /* --font-family-title: 'Roboto', sans-serif; */
    /* --font-size: 1.6rem; */

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/

    --timetable-height: 45px;
}
.logo{
    height: 70px;
}

.content-container, body
{
    background: var(--color-neutral-gray-09);
    color: var(--color-neutral-white);
}
header .header_bar,
.container-fluid .sidebar {
    background: var(--color-neutral-gray-08);
    color: var(--color-neutral-white);
}
.multistep_vertical_inner p {
    padding-right: 20px;
}

.multistep_vertical_step.pointer--current {
    background: var(--color-neutral-gray-09);
}

.cd-schedule .events .event-name {
    font-size: var(--font-size-xs);
    margin-bottom: 4px;
    max-height: 3.4rem;
}
.cd-schedule .events .single-event[data-filter-language*="en"], .cd-schedule .event-modal[data-filter-language*="en"] .header {
	background: var(--color-brand-secondary);
}
.cd-schedule .events .single-event[data-filter-language*="nl"], .cd-schedule .event-modal[data-filter-language*="nl"] .header {
	background: var(--color-brand-primary);
}
.cd-schedule .events .single-event[data-filter-language*="nl,en"] {
    position: relative;
    overflow: hidden;
    background: var(--color-brand-primary);
    z-index: 0;
    color: #fff; 
}

.cd-schedule .events .single-event[data-filter-language*="nl,en"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-brand-secondary);
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    z-index: -1;
}

.cd-schedule .events a > * {
    color: var(--color-neutral-white);
}
.cd-schedule .events .single-event a .icon-container {
    color: inherit;
}
.cd-schedule .events .single-event[data-disabled="true"], .cd-schedule .events .single-event[data-disabled="true"]::after {
    background: var(--color-neutral-gray-08) !important;
}
.cd-schedule .events .single-event[data-disabled="true"] .event-date  {
    color: var(--color-neutral-gray-02);
}
.cards .day {
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
    aspect-ratio: 1;
    background-size: cover;
    filter: grayscale(1);
    padding-left: 0;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid var(--color-neutral-white);
}
.radio-custom-label {
    color: var(--color-neutral-white)
}

/* Cards --------------------------------------------*/
.form_input_radio.cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap:16px;
}

.cards .form_input_image{
    width: 100%;
    height: auto;
}
.cards .radio_input {
    height:auto;
    width: 100%;
    min-width: 100px;
    min-height: 100px;
    max-width: 300px;
    max-height: 300px;
    aspect-ratio: 1;
    background-size: cover;

    filter: grayscale(1);

    padding-left: 0;
    margin-bottom: 16px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border:1px solid var(--color-neutral-white);
}
.radio-date {
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    padding: 16px 8px;
    font-size: var(--font-size-s);
    background-color: var(--color-neutral-gray-09);
}
.day-choice-container{
    background-color: var(--color-neutral-white);
}
.day-choice-container .radio-date {
    width: 100%;
    display: block;
}
.day-choice-container a{
    text-decoration: none;
    color: var(--color-neutral-black);
    transition: all .3s ease-in-out;
}

.day-choice-container:hover a {
    text-decoration: none;
    color: var(--color-brand-primary);
}

.day-choice-container img {
    transform: scale(1);
    transition: transform .3s ease-in-out;
}

.day-choice-container:hover img {
    transform: scale(1.1);
}
.day-choice-container .radio-date{
    background-color: transparent;
}
.cards .radio_input .radioshape{
    position: relative;
    margin: 8px 8px 0px auto;
}
.radio_input.day-1 {
    background-image: url(../images/zangeres.jpg);
}
.radio_input.day-2 {
    background-image: url(../images/publiek.jpg);
}
/* Cards hover active styles --------------------------------------------*/
.radio_input:hover .radio-date,
.radio_input:has(input:checked) .radio-date{
    background-color: var(--color-brand-primary);
}
.cards .radio_input:hover,
.cards .radio_input:has(input:checked){
    border:1px solid var(--color-brand-primary);
    filter: grayscale(0);
}
/* Einde Cards hover active styles --------------------------------------------*/

/*********
* Prijsoverzicht
*********/
.overview_price .overview_price_line{
    border-bottom: 1px solid var(--color-neutral-gray-08);
    padding: 8px 0;
    font-size: var(--font-size-s);
    line-height: var(--lineheight-size-s);

    display: flex;
    gap:8px;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}
.overview_price .overview_price_line.header{
    font-weight: 600;
    border-bottom: 2px solid var(--color-brand-primary);
}
.overview_price_cell{
    min-width: 42px;
}
.grid-inline.overview_line .grid-20 h4 {
    text-align: left;
}

img.flag {
    height: 15px;
    padding: 0 10px 0 0;
}
.round{
    background-color: var(--color-neutral-gray-08);
    border-radius: var(--border-radius);
    color: var(--color-neutral-white);
    border-bottom: 0;
}
.round .round-item {
    background-color: var(--color-neutral-gray-0);
    background-color: transparent;
    border-bottom: 1px solid var(--color-neutral-gray-04);
    border-radius: 0;
}
.round-item .round-item-header {
    cursor: pointer;
}
.round_title {
    color: var(--color-neutral-white);
}
.round-item .round-item-description.closed {
    height: 2.1rem;
    max-height: 2.1rem;
    opacity: 0.75;
}
.round input:checked + .round-item {
    background-color: var(--color-neutral-gray-09);
}
.round .js-round-selector:disabled+.round-item {
    cursor: not-allowed;
    background: transparent;
}

.round-item .checkmark {
    width: 2.6rem;
    height: 2.6rem;
}

.calculation-discount-incl div {
    display: block;
    color: var(--color-brand-secondary);
}
.button--back .navbutton_text {
    color: var(--color-neutral-gray-0);
    cursor: pointer;
}
.calculation-table .total_price .amount {
    float: right;
    padding-left: 5px;
}
.login_formbox {
    color: var(--color-neutral-black);
}
/*********
* Menu overzichts
*********/
.round-item {
    border: 0;
}
select.language_selector {
    background-color: var(--color-neutral-gray-08);
    background-image: linear-gradient(45deg, var(--color-neutral-gray-08) 8px, transparent 0),
    linear-gradient(-45deg, var(--color-neutral-gray-08) 8px, transparent 0),
    linear-gradient(45deg, var(--color-neutral-gray-02) 10px, transparent 0),
    linear-gradient(-45deg, var(--color-neutral-gray-02) 10px, transparent 0);
}
select.language_selector:hover {
    background-image: linear-gradient(45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(-45deg, var(--color-neutral-gray-08) 8px, transparent 0),
        linear-gradient(45deg, var(--color-brand-primary) 10px, transparent 0),
        linear-gradient(-45deg, var(--color-brand-primary) 10px, transparent 0);
    -webkit-box-shadow: 0px 4px 10px 0px rgba(var(--color-brand-primary-rgb), 0.1);
    box-shadow: 0px 4px 10px 0px rgba(var(--color-brand-primary-rgb), 0.1);
}
select.language_selector:focus-within{
    color: var(--color-neutral-gray-0);
}
.language .language_selector {
    color: var(--color-neutral-gray-02);
}
.cd-schedule .timeline li span,
.cd-schedule .events .top-info > span {
    color: var(--color-neutral-gray-0);
}
.cd-schedule .events .single-event[data-selected="true"] a {
    border-left: 15px solid #008A0B;
}
.cookiebanner {
    background: var(--color-neutral-black);
}
.cookiebanner_button{
    color: var(--color-neutral-white);
}
.container-fluid .poweredby a {
    color: var(--color-neutral-gray-03);
}
.round-item .radioshape {
    top: 3px;
}
.calculation-discount-incl,
.calculation-discount-incl div:nth-child(n+1){
    margin-bottom: 0;
}
.calculation-table .total_price div:nth-last-child(1) {
    border-top: none;
    padding-top: 0;
}
.calculation-table .total_price div {
        padding: 0.4rem 0;
}
.js-calculation-total-vat{
    border-top: 0px solid var(--color-brand-primary) !important;
    padding: 0rem 0;
}
.tickets .total_price .js-calculation-total-vat,  .total_price .js-calculation-total-vat{
    font-weight: normal;
    font-size: var(--font-size-xs);
}
.tickets .total_price{
    border-top: 1px solid var(--color-brand-primary) !important;
    padding: 0.8rem 0;}

.js-calculation-total-incl{
        border-top: 1px solid var(--color-brand-primary) !important;
    padding: 0.8rem 0;
}
.form_check {
    display: inline;
}
@media only screen and (max-width: 768px) {
    .grid-inline.overview_line, .tickets .grid-inline {
        padding: unset;
    }
    .mle-switch {
        right: 14px;
        padding: 10px;
    }
    .col-xs-12.col-md-6.day-choice-container.day-1 {
        margin: 0 0 35px 0;
    }
}
@media screen and (min-width: 800px) {
    .cd-schedule .events .events-group {
        width: 20%;
        min-width: 150px;
    }
}
@media (min-width: 992px) {
    .col-form--timetable:has( .multipage-timetable.js-multipage-current) {
        grid-column: span 8;
    }
    .cd-schedule:not(.cd-schedule--calendar) {
        width: 100%;
        max-width: unset;
    }
}
@media (min-width: 1200px) {
    .col-form--timetable:has( .multipage-timetable.js-multipage-current) {
        grid-column: span 7 / 12;
    }
}