:root {

    /***Logo's***/
    --logo-standard: url("../../custom/theme/assets/images/logo.png");
    --logo-alt: url("../../custom/theme/assets/images/logo-wit.png");

    /***Header Image***/
    --header-image: url("../../custom/theme/assets/images/header.jpg");

    /***Brand Colors***/
    --color-brand-primary: #2D75AD;
--color-brand-primary-rgb: 45, 117, 173;
    --color-brand-secondary: #FFFF56;
    --color-brand-tertiary: #A379AC;
    --color-brand-light: #54BFFD;
    --color-brand-dark: #18294E;
    --color-brand-primary-dark: #24567D;

      /* Basis kleuren 2026 */
  --color-yellow: #FFFF56;
--color-blue: #2D75AD;
  --color-darkblue: #24567D;
  --color-blackblue: #18294E;
  --color-grayblue: #9BB9DA;
  --color-brightblue: #54BFFD;
  --color-lilac: #B386BD;


  /* Gradient kleuren 2026 */
  --gradient-grayblue-blue: linear-gradient(90deg, #9BB9DA 0%, #2D75AD 100%);
  --gradient-brightblue-blue: linear-gradient(90deg, #54BFFD 0%, #2D75AD 100%);
  --gradient-darkblue-lilac: linear-gradient(90deg, #24567D 0%, #A379AC 100%);


    /***Font***/
    --font-family-title: 'Separat-Bold', sans-serif;
    --font-family-body: 'Barlow', sans-serif;
    --font-size: 1.6rem;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}

.note {
    font-size: var(--font-size-xs);
    color: var(--color-brand-primary);
}

.form_check .icon-tick::before {
    right: 0px;
}

.select2-container {
    width: 100% !important;
}

.select2-container--default .select2-selection--single {
    min-height: 4.8rem;
    padding: 0.8rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
.menu-items li.menu-active:not(.menu-group.open) .menu-item:not(.menu-item--sub),
.program-table .program-day .program-items .program-item .time,
.program-table .program-day .program-date .program-date-container,
.button--link .navbutton_text,
button,
input[type="submit"],
input[type="button"] {
    color: var(--color-brand-dark);
}

button,
.button,
input[type="submit"],
input[type="button"],
.ui-dialog .ui-widget.button {
    text-transform: uppercase;
    font-size: var(--font-size-xs);
    padding: 13px 35px;
    font-family: var(--font-family-title);
}
.button--back {
    display: inline-block;
    padding: 0.8rem 0.4rem;
}
.pointer--current .step_number span,
.assign-ticket--confirm-modal .ui-button.button--primary {
    color: var(--color-brand-dark);
}
.button--primary, .confirm-modal .ui-button.button--primary, .confirm-modal .button--primary {
    background-color: rgba(var(--color-brand-primary-rgb), 1);
    color: var(--color-neutral-white);
    border-radius: 3.2rem;
    border: 1px solid var(--color-brand-primary);
}
.ui-dialog .ui-button.button--primary:hover, .button--primary:hover {
    background-color:var(--color-brightblue);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brightblue);

}
.ui-dialog .ui-button.button--secondary, .button--secondary {
    background-color:transparent;
    color: var(--color-brand-primary);
    cursor: pointer;
    border: 1px solid var(--color-brand-primary);
    border-radius: 3.2rem;
}
.ui-dialog .ui-button.button--secondary:hover, .button--secondary:hover {
    background-color:var(--color-brightblue);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brightblue);
}
.confirm-modal .ui-widget-header{
    color: var(--color-brand-dark);
}
.footer_cta p {
    color: var(--color-brand-dark);
    font-family: var(--font-family-title);
}

hr {
    border: 1px solid var(--color-brand-tertiary);
}

.program-table .program-day .program-items {
    border-left: 1px solid var(--color-brand-secondary);
}

.program-table .program-day .program-items .program-item .time,
.program-table .program-day .program-date .program-date-container .weekday {
    font-family: var(--font-family-title);
}

.program-table .program-day .program-items .program-item .title {
    font-weight: 400;
}



a {
    color: var(--color-brand-primary);
}

.container-fluid .poweredby {
    left: 3.2rem;
}

.social-share_link {
    background-color: var(--color-brand-light)
}

.button--primary:hover .navbutton_text {
    color: var(--color-brand-primary);
}

.calculation-discount-incl div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: flex-end;
}

.calculation-discount-incl .label {
    max-width: 65%;
}

.calculation-table table,
.calculation-table .total_price {
    line-height: var(--lineheight-size-m);
}

.calculation-discount-incl {
    margin-bottom: 0.8rem;
}

.calculation-discount-incl div:nth-child(n+1) {
    margin-bottom: 0.8rem;
}

.calculation-table tr td+td:not(td:last-child) {
    padding-right: 0.8rem;
}

.form_input_check p {
    max-width: 75ch;
}

.calculation-table tbody tr td,
.total_price .label,
.total_price .amount {
    font-size: var(--font-size-xs);
}

.select2-result-repository__description {
    font-size: var(--font-size-xs);
}

.ui-widget-overlay {
    background: var(--color-brand-dark);
}

.timeout-notice--time {
    display: block;
    background: var(--color-brand-primary);
    color: var(--color-neutral-white);
    font-weight: bold;
    font-size: var(--font-size-l);
    text-align: center;
}

.timeout-notice--time::before {
    font-family: 'Material Icons';
    content: 'schedule';
    font-weight: normal;
    font-style: normal;
    font-size: 0.8em;
    line-height: inherit;
    top: 0.2rem;
    position: relative;
}

.table-container .table-filter-header {
    height: 4.8rem;
}

div.dt-container .dataTables_filter input,
div.dt-container .dataTables_filter select {
    height: 4.8rem;

}

div.dt-container .dt-search input {
    height: 3rem;
}

.form_element--phonenumber .form_check {
    display: none;
}


.portal-btn-container a.portal-btn.done {
    background-color: rgb(104, 250, 136);
}

.portal-btn-container a.portal-btn.pending {
    background-color: rgb(250, 192, 106);
}

.table-info-container .dt-info {
    margin-top: 30px !important;
}

footer {
    background: var(--gradient-darkblue-lilac);
    color: var(--color-neutral-white);
    font-size: var(--font-size-xxs);
}

.footer_cta p {
    color: var(--color-neutral-white);
    font-family: var(--font-family-title);
    font-size: var(--font-size-l);
}

.ui-dialog .ui-button.button--light,
.button--light {
    background-color: transparent;
    color: var(--color-brand-secondary);
    border: 1px solid var(--color-brand-secondary);
    border-radius: 32px;
    cursor: pointer;
}

.ui-dialog .ui-button.button--light:hover,
.button--light:hover {
    background-color: var(--color-brand-secondary);
    color: var(--color-brand-dark);
    border: 1px solid var(--color-brand-secondary);

}
.menu .calculation-modal--toggle{
    background-color: var(--color-brightblue);
}
.menu .calculation-modal--toggle .amount {
    color: var(--color-neutral-white);
}
.form-header .row + .row {
        margin-top: 0.8rem;
    }
    .form-header .col-xs-12 {
     gap: 0 1.6rem;

}
ul {
    padding-left: 1.6rem;
    line-height: var(--lineheight-size-m);
}
footer hr {
    margin: 0;
    border: 1px solid var(--color-brand-dark);
}

.navigate_first:before {
    content: "\eac3"; /* keyboard_double_arrow_left */
}

.navigate_previous:before {
    content: "\e5cb"; /* navigate_before */
}

.navigate_next:before {
    content: "\e5cc"; /* navigate_next */
}

.navigate_last:before {
    content: "\eac9"; /* keyboard_double_arrow_right */
}
.page-portal .table-container .dataTables_filter{
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
    flex: 2;
    width: 50%;
}
.page-portal .dt-search input{
    width: calc(100% - 1.6rem);
}
.page-portal .tickets-table-container{
    background-color: var(--color-lilac);
    padding: 1.6rem;
    width: 100%;
    max-width: 100%;
}
.page-portal .tickets-table-container th{
    text-align: left;
}
.table-container th, .table-container td {
    border-bottom: 1px solid var(--color-blue);
}
.page-portal .tickets-table-container tr:hover td {
    background-color: var(--color-neutral-gray-0);
}
.page-portal .tickets-table-container th, .page-portal .tickets-table-container td {
    text-align: left;
    padding: 1.6rem;
    border-bottom: 1px solid var(--color-yellow);
    color: var(--color-neutral-black);
}
.col-sidebar .sidebar{
    background-color: var(--color-grayblue);
}
.ui-dialog .ui-dialog-titlebar {
    background-color: var(--color-brightblue);
}
.ui-widget-header{
    color: var(--color-brand-dark)
}
@media (max-width: 480px) {
    .menu {
    padding: 0 3.2rem;
}
}
@media (max-width: 768px) {
    .table-filter-header {
    flex-wrap: wrap;
}
.table-container .table-filter-header{
    height: unset;
}
.table-container .dt-container .table-filter-header {
    margin-bottom: 0;
}
.table-info-container .dt-info{
    margin-top: 0 !important;
}
.page-portal .table-container .dataTables_filter{
    flex-wrap: wrap;
}
.page-portal  td::before{
        content: attr(data-label);
    display: block;
    font-weight: bold;
}
}
@media (min-width: 768px) and (max-width: 992px) {
.page-portal #subguests-table{
    margin-top: 6.4rem;
}
}
@media (max-width: 992px) {
    .content-main {
        padding: 0 3.2rem;
    }

    .form-header .col-xs-12 {
        padding: 0 3.2rem;
    }
}
