/********************************************************************************
* Fonts
********************************************************************************/
@font-face {
    font-family: 'Alternate Gothic Std-No3';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/AlternateGothicStd-No3.woff2') format('woff2');
}
@font-face {
    font-family: 'Brandon Grotesque Bold';
    font-weight: 600;
    font-style: bold;
    font-display: swap;
    src:     url('../fonts/BrandonGrotesque-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'ProximaNova Light italic';
    font-weight: 300;
    font-style: italic;
    font-display: swap;
    src:     url('../fonts/ProximaNova-Light-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'ProximaNova Light';
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src:     url('../fonts/ProximaNova-Light.woff2') format('woff2');
}
@font-face {
    font-family: 'ProximaNova semibold italic';
    font-weight: 600;
    font-style: italic;
    font-display: swap;
    src:     url('../fonts/ProximaNova-Semibold-Italic.woff2') format('woff2');
}
@font-face {
    font-family: 'ProximaNova semibold';
    font-weight: 600;
    font-style: bold;
    font-display: swap;
    src:     url('../fonts/ProximaNova-Semibold.woff2') format('woff2');
}

:root {

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

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

    /***Brand Colors***/
    --color-brand-primary: #000000;
    --color-brand-primary-rgb: 0, 0, 0;
    --color-brand-secondary: #a6151a;
    --color-brand-tertiary: #ecd9be;
    --color-brand-light: #d6d5dd;
    --color-brand-dark: #3d3d3d;

    /***Font***/
    --font-family: 'ProximaNova Light', sans-serif;
    --font-family-title: 'Alternate Gothic Std-No3', sans-serif;
    /* --font-size: 1.6rem; */

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

    --menu-height: 0px;
}
.layout-header-full-width .header_visual {
    padding-bottom: 3.2rem;
}

header .header_bar {
    background: none;
    box-shadow: none;
}
.multistep_progressbar  {
    display: none;
}
.menu-box {
    top: 37px;
}
.menu {
    height: unset;
    color: var(--color-neutral-white);
}

.menu-items li .menu-item,
.menu-items li.menu-active:not(.menu-group.open) .menu-item:not(.menu-item--sub),
.menu-items .menu-active-border,
.menu-trigger-btn {
    color: var(--color-neutral-white) ;
    border-color: var(--color-neutral-white);
}
.menu-trigger-btn:hover {
    color: var(--color-brand-light) !important;
    border-color: var(--color-brand-light) !important;
}
button, .button, input[type="submit"], input[type="button"] {
    font-family: 'ProximaNova semibold';
}
td, .paragraph--small {
    font-family: 'ProximaNova semibold';
}
a.button {
    width: max-content;
}

.col-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.col-visual img {
    max-width: 100%;
    width: 90%;
    object-fit: contain;
}
.container-fluid .sidebar {
    background: var(--color-neutral-white);
}

.tickets .title {
    font-size: var(--font-size-s);
}

.tickets-table-container .table-filter-header {
    display: none;
    position: absolute;
}
.floating-calculation .floating-calculation-toggle {
    font-size: var(--font-size-s);
    background: var(--color-neutral-white);
}

body.layout-header-full-width main {
    padding-top: 0;
}

.layout-header-full-width .header_visual {
    height: 40vh;
    min-height: unset;
}
.layout-header-full-width .header_visual:before {
    background-position: 70% 0%;
}

h1, h2, h3, h4, h5, fieldset legend {
    text-transform: uppercase;
}

fieldset {
    border-radius: unset;
}
fieldset:not(:first-of-type) {
    margin-top: 2rem;
}
fieldset legend {
    font-size: var(--font-size-m);
    padding: 0.5rem;
}
.button--secondary {
    background-color: var(--color-neutral-white);
    color: var(--color-brand-primary);
    border: 2px solid var(--color-brand-primary);
}
 .button--secondary .navbutton_text {
    color: var(--color-brand-primary);
}


.button--secondary:hover, .button--secondary:hover .navbutton_text {
    color: var(--color-neutral-white);
}

.product_types-container {
    --products-layout-gap: 10px;
    --products-column-count: 3;
    --products-item--min-width: 50px;

    /**
        * Calculated values.
        */
    --gap-count: calc(var(--products-column-count) - 1);
    --total-gap-width: calc(var(--gap-count) * var(--products-layout-gap));
    --products-item--max-width: calc((100% - var(--total-gap-width)) / var(--products-column-count));

    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(max(var(--products-item--min-width), var(--products-item--max-width)), 1fr));
    grid-gap: var(--products-layout-gap);
}

.product_type-container {
    position: relative;
    padding: 0 1.6rem 1.6rem 1.6rem;
    background: var(--color-neutral-gray-03);
    color: var(--color-neutral-white);
    cursor: pointer;
}
.product_type-container:has(input:checked) {
    background: var(--color-brand-primary);
    color: var(--color-neutral-white);
}

.product_type-container::before {
    font-family: 'Material Icons';
    content: "check_box_outline_blank";
    display: block;
    float: right;
    font-size: var(--font-size-l);
    margin-top: 0.5rem;
}
.product_type-container:has(input:checked)::before {
    content: "check_box";
}

.product_type-container:hover::before {
    border: none !important;
    box-shadow: none !important;
}

.layout-login .login_poweredby {
    display: none;
}
.toggle-text-container-closed, .tickets .ticket-item .toggle-text-container-closed {
    max-height: 0rem;
}
@media only screen and (max-width: 767px) {
    .product_types-container {
        --products-column-count: 2;
    }
}
@media only screen and (min-width: 767px) {
    .col-visual {
        justify-content: space-between;
        flex-direction: row;
    }

    .col-visual img {
        width: 55%;
    }
}
@media (min-width: 1024px) {
    .col-form {
        grid-column: span 6 / 10;
    }
}

/********
* PORTAL
********/

.subguest-status-dot {
    height: 1em;
    width: 1em;
    background-color: var(--color-message-succes);
    border-radius: 50%;
    display: inline-block;
}
.subguest-status-dot.absent {
    background-color: var(--color-message-error);
}
.subguest-status-dot.invited {
    background-color: var(--color-message-not-bad);
}

.subguests-action--container {
    display: flex;
    gap: 0.2rem;
}

.portal_product_types_headers {
    display: flex;
    margin-top: 2em;
}
.portal_product_type_header {
    background-color: var(--color-neutral-white);
    padding: 0.5em 0;
    text-align: center;
    border-left: 2px solid var(--color-brand-primary);
    border-top: 2px solid var(--color-brand-primary);
    border-right: 2px solid var(--color-brand-primary);
    cursor: pointer;
    color: var(--color-brand-primary);
    flex: 1;
    font-size: var(--font-size-m);
    text-transform: uppercase;
    font-family: var(--font-family-title);
}
.portal_product_type_header.tab-active {
    background-color: var(--color-brand-primary);
    color: var(--color-neutral-white);
}
.portal_product_type_header.tab-active h3{
    color: var(--color-neutral-white);
}
.portal_product_type_ticket{
    border: 2px solid var(--color-brand-primary);
    padding: 1em;
    margin-bottom: 1.5em;
}
.portal_product_type_ticket .ticket_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1em;
}

.progress-bar {
    background: var(--color-neutral-gray-03);
    color:var(--color-neutral-gray-01);
    width: 100%;
    position: relative;
    display: block;
    z-index: +1;
    overflow: hidden;
}
.progress-bar .label {
    position: relative;
    text-align: right;
    width: 100%;
    display: block;
    right: 1em;
    color:var(--color-brand-primary);
    opacity: 0.5;
}
.progress-bar .progress {
    background: var(--color-brand-primary);
    display: inline-block;
    position: absolute;
}
.progress-bar .progress .label{
    color:var(--color-neutral-white);
    opacity: 1;
}

.table-filter-container {
    gap: 1.2rem;
}
.table-filter-container .table-filter {
    min-width: unset;
}
.dataTables_filter {
    margin: unset;
}
.dt-search {
    margin: 0 3.2rem 0 1.2rem;
}
.multipage_nav {
    gap: 40px;
    justify-content: unset;
}
.tickets .ticket-item .title,
.tickets .ticket-item .description,
.tickets .ticket-item mark {
    margin-bottom: 0rem;
}

.upsale-modal .ui-dialog-titlebar-close {
    display: none;
}
.ui-widget.ui-widget-content {
    border: 4px solid var(--color-brand-primary);
    background: var(--color-neutral-white);
    color: var(--color-neutral-gray-08);
    font-size: var(--font-size-s);
}
.ui-widget.ui-widget-content p, .ui-widget-header {
    font-size: var(--font-size-m);
}
.ui-widget-overlay {
    background: #aaa;
    opacity: 0.6;
}
.form_label_check {
    font-weight: 700;
}
@media only screen and (max-width: 767px) {
    .table-filter-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: start;
        align-content: flex-start;
    }
}
@media only screen and (min-width: 767px) {
    .menu li {
        background: rgba(var(--color-brand-primary-rgb), 0.3);
        height: 2em;
        border-radius: var(--border-radius);
    }
    .menu li .menu-item {
        text-transform: uppercase;
        font-family: var(--font-family-title);
    }

    .menu li.menu-active, .menu li:hover, .menu li:active {
        background: rgba(var(--color-neutral-white-rgb), 1);
    }
    .menu li.menu-active .menu-item, .menu li:hover .menu-item, .menu li:active .menu-item {
        color: var(--color-brand-primary) !important;
        border-color: var(--color-brand-primary) !important;
    }

    header .header_bar {
        position: absolute;
    }

    body.layout-header-full-width .subguests-dashboard {
        width: 100%;
        max-width: 1024px;
    }
}