: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/logo.png");

    /***Brand Colors***/
     --color-brand-primary: #293A60;
    --color-brand-primary-rgb: rgb(41, 58, 96);
    --color-brand-secondary: #E2E2E2;
    --color-brand-tertiary: #EE2A5F;
    --color-brand-light: #E9E9E9;
    --color-brand-dark: #4C4C4C;

    /***Font***/
     --font-family: 'helvetica', times, serif;
    /* --font-family-title: 'Roboto', serif; */
    /* --font-size: 1.6rem; */

    --border-radius:0;

    /**** Voor meer settings zie: /themes/base/assets/style/variables.css ****/
}
h1, h2, h3, h4{
    color: var(--color-brand-primary);
    font-weight: bold;
}
.logo {
    height: 60px;
}

.tickets-table-container .table-filter-header {
    display: none;
    position: absolute;
}
.content-container {
    min-height: unset;
}
.info {
    display: flex;
    justify-content: space-around;
    padding: 1.6rem 3.2rem;
}

.container-fluid .sidebar {
    background-color: var(--color-brand-primary);
    min-height: calc(100vh - var(--menu-height) - 4rem);
}
button, .button, input[type="submit"], input[type="button"] {
    font-size: var(--font-size-s);
    font-family: var(--font-family-button);
}

td {
    font-size: var(--font-size-s);
}
div.dt-container .dataTables_filter input, div.dt-container .dataTables_filter select {
    height: 48px;
}
div.dt-container .dt-search input {
    height: 30px;
}
.navigate_first:before {
    content: "\eac3";
}
.navigate_previous:before {
    content: "\e408";
}
.navigate_next:before {
    content: "\e409";
}
.navigate_last:before {
    content: "\eac9";
}
td span.actions{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}
.subguests-action {
    display: flex;
    justify-content: center;
    text-decoration: none;
    align-items: center;
    gap:0.8rem;
    margin-right:0 ;
    margin: 2px;
}
.container-fluid .poweredby {
    left: 3.2rem;
}

.dashboard_ticket_buttons .navbutton_text {
    font-size: var(--font-size-xs);
    line-height: 1.8em;
}
.dashboard_ticket_buttons .button {
    line-height: 1.8em;
    padding: 0.2rem 1.0rem;
    margin-bottom: 10px;
}

td {
    line-height: var(--lineheight-size-s);
}

.tickets-table-container td {
    font-size: var(--font-size-s);
}

.form_check .icon-tick::before {
    right: 0px;
}

.loginbox {
    background-color: white;
}

.button--secondary {
    background-color: var(--color-brand-primary);
}

.multistep_vertical_step.pointer--current {
    color: var(--color-brand-primary);
}

.button {
    background-color: var(--color-brand-tertiary);
    border-radius: 100px 100px 100px 100px;
    padding: 10px 20px;
}

.button--back {
    background-color:transparent;
    border-radius: 100px 100px 100px 100px;
    padding: 10px 20px;
}

.button.button--back:hover {
    background-color: transparent;
}

.button:hover {
    background-color: var(--color-brand-light);
    color: var(--color-brand-primary);
}
.button:hover .navbutton_text{
    color: var(--color-brand-primary);
}
.navbutton_text .button--back:hover  {
    color: var(--color-brand-primary);
}

.navbutton_text:hover {
    color: var(--color-brand-primary);
}
 .multistep_title, .step_title, .sidebar .button--back, .sidebar a, .sidebar h3{
    color: var(--color-neutral-white);
}
.button--back .navbutton_text {
    color: var(--color-brand-primary);
}
.multistep_vertical_step.pointer--current .step_title {
    color: var(--color-brand-primary);
}
.pointer--current .step_number {
    background: var(--color-brand-tertiary);
    border: 2px solid var(--color-brand-tertiary);
}
.multistep_vertical_step + .pointer--current .step_number:before,
.multistep_vertical_inner .timeline,
.pointer--current:has(+ .multistep_vertical_step) .step_number:after {
    border-left: 2px solid var(--color-brand-tertiary);
}
.container {
    padding-bottom: 3.2rem;
}
.actions .material-icons:hover {
    color: var(--color-brand-tertiary);
}
.calculation-table tr td span {
    margin-bottom: 16px;
}
.calculation-table .tickets table thead td, .calculation-table .tickets table tbody tr td {
    padding:0.8rem;
}
.multistep_progressbar>div {
    background-color: var(--color-brand-tertiary);
}
