@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap');

: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/vannnelle.jpg");

    /***Brand Colors***/
    --color-brand-primary: #8bc4d6;
    --color-brand-primary-rgb: 139, 196, 214;
    --color-brand-secondary: #f05152;
    --color-brand-tertiary: #6F3652;
    --color-brand-light: #DDF1F7;
    --color-brand-dark: #49192C;

    --border-radius: 5px;
    --menu-height: 10rem;

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

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

.mulish-regular {
    font-family: "Mulish", sans-serif;
    font-optical-sizing: auto;
    font-weight:300;
    font-style: normal;
  }

  .header_visual-content h1,
 h1, h2, h3, h4, h5, h6 {
    font-optical-sizing: auto;
    font-weight:400;
  }

.layout-header-full-width .header_visual {
    height: 30vh;
}
.layout-header-full-width .header_visual:before {
    height: 30vh;
    background-position: center bottom;
}
.header_visual .container {
    display: none;
}

button, .button{
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    letter-spacing: 1px;
    font-weight:700;
    color: var(--color-neutral-white);
    background-color: var(--color-brand-tertiary);
    transition: background-color 0.3s ease-in-out;
    -webkit-transition: background-color 0.3s ease-in-out;
    -moz-transition: background-color 0.3s ease-in-out;
    -ms-transition: background-color 0.3s ease-in-out;
    -o-transition: background-color 0.3s ease-in-out;
}
button:hover, .button:hover{
    background-color: var(--color-brand-primary);
}
.form-input-floating .radio--inline {
    float: left;
    width: 50%
}

.form-input-floating .form_element_radio {
    overflow: hidden;
}
.button--primary {
    color: var(--color-neutral-white);
    background-color: var(--color-brand-tertiary);
}
.button--primary:hover {
    color: var(--color-neutral-white);
    background-color: var(--color-brand-primary);
}
.button--primary:hover .navbutton_text{
    color: var(--color-neutral-white);
}
.button--secondary {
    background-color: var(--color-brand-secondary);
    color: var(--color-neutral-white);
    cursor: pointer;
}
.button--secondary:hover {
    background-color: var(--color-brand-primary);

}
.button--link:hover, .button--back:hover, .button--link:focus, .button--back:focus, .button--link:active, .button--back:active {
    background-color: transparent;
    color: var(--color-brand-secondary);
}
.navbutton_text{
    font-size: var(--font-size-xs);
    font-weight:700;
    color: var(--color-neutral-white);
}
.button--back {
    background-color: transparent;
    color: var(--color-brand-tertiary);
}
.button--back .navbutton_text {
    color: var(--color-brand-tertiary);
    cursor: pointer;
}
.portal-dashboard-statistics {
    width: 100%;
}

.tabs-container .tabs-bar .tab-button.ui-tabs-active a {
    color: var(--color-brand-primary);
}

.search-exhibitor {
    background-image: url('../images/search.svg');
    background-position: 0.5em center;
    padding: 0.5em 0.5em 0.5em 2.2em;
    background-repeat: no-repeat;
}

.exhibitor-container--content table {width: 100%;}
.exhibitor-container--content table input {position: absolute; height: 1px; top: -99999px;}

.exhibitor-container--content table td:not(:nth-child(1)),
.exhibitor-container--content table th:not(:nth-child(1)) {text-align: center;}

.google-visualization-table-page-numbers {
    display: inline-flex !important;
}
.google-visualization-table-page-numbers a {
    color: var(--color-neutral-black) !important;
}

.statistics-block > div {
    overflow: hidden;
}
.statistics-block.statistics-item .count {
    font-weight: 400;
    font-size: var(--font-size-xl);
    display: block;
    text-align: center;
}
.statistics-block.statistics-item .label {
    font-weight: 400;
    font-size: var(--font-size-xs);
    display: block;
    text-align: center;
}

.logo {
    height: 150px;
    margin-top: 63px;
    position: relative;
    z-index: 999;
}
h3 span,
h1 span{
    white-space: nowrap;
}
.content-container {
    min-height: unset;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem;
}

.flex-col {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}
.flex-col p{
    margin-bottom: 1.6rem;
}
footer {
    background-color: var(--color-brand-primary);
}

.footer_bar {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white);
}

.footer_cta {
    margin-bottom: 0rem;
}

.footer_cta p {
    font-size: var(--font-size-l);
}

.footer_bar .poweredby a {
    color: var(--color-neutral-white);
}


.container-fluid .sidebar {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white)
}

.multistep_vertical_step.pointer--current .step_title{
    color: var(--color-brand-tertiary);

}
.step_number {
    background: var(--color-brand-secondary);
    border: 2px solid var(--color-brand-secondary);
}
.step_number span {
    color: var(--color-neutral-white);
}
.multistep_vertical_step + .pointer--current .step_number:before,
.pointer--current:has(+ .multistep_vertical_step) .step_number:after,
.multistep_vertical_inner .timeline {
    border-left: 2px solid var(--color-brand-tertiary);
}
.pointer--current .step_number {
    background: var(--color-brand-tertiary);
    border: 2px solid var(--color-brand-tertiary);
}
.container-fluid .poweredby a {
    color: var(--color-brand-light);
}
.pointer--finished .step_number {
    background: var(--color-brand-tertiary);
    border: 2px solid var(--color-brand-tertiary);
}


.footer_bar .poweredby {
    text-align: center;
}
.flex-icons {
    display: flex;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
}
.flex-icons a {
    padding: 0.8rem;
    background-color: transparent;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-icons a:hover{
    background-color: var(--color-neutral-white);
}
.flex-icons svg{
    width: 3.2rem;
    height: 3.2rem;
}
.flex-icons a:hover svg{
    fill: var(--color-brand-secondary);
}
.light-bg{
    background-color: var(--color-brand-light);
    padding: 1.6rem;
    border-radius: var(--border-radius);
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.font-size-large p {
    font-size: var(--font-size-l);
}
.fade{
    animation: fadeInAnimation ease 3s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
.multipage_step:not(.hidden) {
    display: block;
    -webkit-animation-name: fadeInAnimation;
    animation-name:fadeInAnimation;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
 .ui-widget.ui-widget-content {
    border: none;
}
 .ui-widget-header {
    border: none;
    border-bottom: 1px solid var(--color-brand-tertiary);
    background: white;
    color: var(--color-neutral-black);
    font-weight: bold;
    border-radius: 0;
}
.ui-datepicker .ui-state-default, .ui-widget-content .ui-state-default {
    background: transparent;
}
.ui-widget-content .ui-state-default.ui-tabs-active:hover {
    background: transparent;
}
.tabs-container .tabs-bar .tab-button a {
    color: var(--color-brand-tertiary);
    cursor: pointer;
    font-size: var(--font-size-m);
    font-weight: 400;
}
 .tabs-container .tabs-bar .tab-button.ui-tabs-active a {
    color: var(--color-brand-primary);
}

 .statistics-block {
    background-color: var(--color-brand-light);
    color: var(--color-neutral-black);
    display: block;
    padding: 0.5em;
    min-height: 100%;
    border-radius: var(--border-radius);
}
 .session-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}
 .ui-widget-content a {
    color: var(--color-neutral-white);
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    flex-direction: row;
    width: fit-content;
}
.navigate_first:before, .navigate_last:before, .navigate_next:before, .navigate_previous:before {
    font-family: "Material Icons";
    font-size: 12px;
}
.navigate_first:before {
    content: "\eac3";
}
.navigate_previous:before {
    content: "\e314";
}
.navigate_next:before {
    content: "\e315";
}
.navigate_last:before {
    content: "\eac9";
}
th{
    font-size: var(--font-size-xs);
}
.exhibitor-title{
    font-weight: 500;
    font-size: var(--font-size-s);

}
@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
body.page-success,
body.page-absent {
    background-color: var(--color-brand-light);
}
body.page-success .col-form,
body.page-absent .col-form{
    background-color: var(--color-brand-light);
}

@media (min-width: 375px) {
    .logo {
        margin-top: 49px;
    }

}
@media (min-width: 425px) {
    .logo {
        margin-top: 40px;
    }

}
@media (min-width: 768px) {
    .logo {
        height: 108px;
        margin-top: 30px;
    }


}
@media (min-width: 992px) {
    body.layout-header-full-width .container {
        width: unset;
    }

    .row {
        grid-gap: 3.2rem;
    }

    .flex-col {
        flex-basis: calc(50% - 1.6rem);
    }

    /* .flex-col .button {
        margin-top: auto;
    } */
    footer .col-center {
        grid-column: span 10 / 12;
    }
}
@media  (min-width: 1200px) {
    body.layout-header-full-width .container {
        width: 992px;
    }

    .tabs-container .tabs-bar .tab-button a {
        font-size: var(--font-size-l);
    }
}

@media screen and (max-width: 1024px){
    .header_visual-content h1 {
        font-size: var(--font-size-xl);
    }
}
@media screen and (max-width: 767px){
    .header_visual-content h1 {
        font-size: var(--font-size-l);
    }
    .header_visual, .header_visual:before {
        min-height: 30vh;
    }
}
@media screen and (max-width: 768px){
    .ui-widget.ui-widget-content {
        width: unset;
    }
}