/* Date range picker width for full date visibility */
.form-dateperiod {
    min-width: 190px;
    text-align: center;
}

/* Icon size utility for larger inline icons (e.g., QR code icons) */
.icon-lg {
    font-size: 1.3rem;
}

.ptjs-theme.classic .step-container .step-header.special {
    padding: 30px 20px 25px 20px;
    background-color: var(--ordolio-default-primary);
}

.ptjs-theme.classic .step-container .step-header.special .title {
    color: white;
    font-weight: 500;
}

.ptjs-theme.classic .step-container {
    font-family: "Poppins", sans-serif;
}

.ptjs-theme.classic .step-container .step-button-close.special {
    background-color: white;
    color: var(--ordolio-default-primary);
}

.ptjs-theme.classic .step-container .step-button-close {
    background-color: var(--ordolio-default-primary);
    color: white;
}

.ptjs-theme.classic .step-container .step-footer .step-buttons span:hover {
    background-color: var(--ordolio-default-primary);
}

.circle {
    height: 10px;
    width: 10px;
    top: 6px;
    left: 104px;
}

.circle-nav {
    height: 10px;
    width: 10px;
    top: 6px;
    left: 62px;
}

.lottieplayer {
    position: absolute;
    right: 0;
}

.pulse-animation {
    animation: pulse-attention 2s infinite;
}

@keyframes pulse-attention {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Reusable attention indicator for sections that need user action */
.needs-attention {
    border-left: 4px solid #ffb822;
}

.needs-attention .btn-attention {
    background-color: #ffb822;
    color: #111;
}

.needs-attention .btn-attention:hover {
    background-color: #e6a31f;
    color: #111;
}

/* Attention indicator for topnav tabs */
.topnav .tab-needs-attention {
    background-color: rgba(255, 184, 34, 0.15) !important;
    border-bottom: 2px solid #ffb822 !important;
}

.topnav .tab-needs-attention:hover {
    background-color: rgba(255, 184, 34, 0.25) !important;
}

.nieuws_card {
    cursor: pointer;
    transition: all 0.4s ease;
}

.nieuws_card:hover {
    box-shadow: 0 0 0.5rem #000;
    transition: all 0.4s ease;
}

.line-through {
    text-decoration: line-through;
}

.modal-header.bg-danger h5.modal-title,
.modal-header.bg-danger button.close {
    color: white !important;
}

.collapse:not(.show) {
    display: none !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

/* Fix footer positioning to stay at bottom of page */
html,
body {
    margin: 0;
}

.kt-grid.kt-grid--root {
    display: flex !important;
    flex-direction: column !important;
}

.kt-grid__item.kt-page {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.kt-grid__item.kt-wrapper {
    flex: 1;
    display: flex !important;
    flex-direction: column !important;
}

.kt-footer {
    margin-top: auto !important;
}

.app-top-banner {
    position: absolute;
    height: 400px;
    width: 100%;
    background-position: center top;
    background-size: cover;
    z-index: -42069;
}

.autocomplete-suggestion {
    padding: 10px;
}

.autocomplete-suggestion,
.autocomplete-suggestion b {
    color: #000;
    font-family: "Poppins", sans-serif !important;
    font-weight: 300;
}

input[type="checkbox"].delete-checkbox {
    display: none !important;
}

.delete-label {
    display: inline-block;
}

.delete-label::before {
    font-family: "Font Awesome 5 Free";
    content: "\f2ed";
    background-color: rgba(253, 57, 122, 0.1);
    color: #f1646c;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    padding: 1rem;
    font-size: 0.8125rem;
    border-radius: 0.25rem;
    cursor: pointer;
    height: 2.5rem;
    width: 2.5rem;
}

.delete-label:hover::before {
    background-color: #f1646c;
    color: white;
    transition: all 0.4s ease;
}

input[type="checkbox"].delete-checkbox:checked + .delete-label {
    background: rgba(253, 57, 122, 0.1);
    color: #ff4669;
}

.app-top-banner::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.35); /* Change the color and opacity as needed */
}

.kt-footer {
    /* background-color: var(--ordolio-default-light) !important */
    background-color: #f0f0fc !important;
}

.kt-footer__title {
    color: #747ce9 !important;
}

.kt-footer__content {
    color: #111827 !important;
}

.kt-footer .kt-footer__top .kt-footer__subscribe {
    background-color: rgb(255 255 255 / 55%) !important;
}

/* Compact Footer Styles */
.kt-footer--compact .kt-footer__top {
    padding: 1.5rem 0 1rem 0 !important;
}

.kt-footer--compact .kt-footer__bottom {
    padding: 0.75rem 0 !important;
    border-top: 1px solid rgba(116, 124, 233, 0.1);
    background-color: transparent !important;
}

.kt-footer--compact .kt-footer__title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.kt-footer--compact .kt-footer__tagline {
    font-size: 0.8rem;
    color: #6b7280;
    opacity: 0.8;
}

.kt-footer--compact .kt-footer__links {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.kt-footer--compact .kt-footer__links a {
    font-size: 0.85rem;
    color: #4b5563;
    text-decoration: none;
    transition: color 0.2s;
}

.kt-footer--compact .kt-footer__links a:hover {
    color: #747ce9;
}

.kt-footer--compact .kt-footer__social {
    display: flex;
    gap: 0.75rem;
}

.kt-footer--compact .kt-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(116, 124, 233, 0.1);
    color: #747ce9;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.kt-footer--compact .kt-footer__social a:hover {
    background-color: #747ce9;
    color: white;
    transform: translateY(-2px);
}

.kt-footer--compact .kt-footer__cta {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    white-space: nowrap;
}

.kt-footer--compact .kt-footer__wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.kt-footer--compact .kt-footer__brand-logo {
    height: 28px;
    width: auto;
}

.kt-footer--compact .kt-footer__copyright {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

@media (max-width: 991px) {
    .kt-footer--compact .kt-footer__links {
        justify-content: flex-start;
    }

    .kt-footer--compact .text-lg-right {
        text-align: left !important;
    }
}

.kt-widget13__text {
    /* line-break: anywhere !important; */
}

.ov-item-card {
    background-color: #fcfcff !important;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    box-shadow: 0 0 0.5rem var(--ordolio-default-primary-light);
}

.ov-item-card a {
    color: black;
}

.ov-item-card:hover {
    box-shadow: 0 0 1rem var(--ordolio-default-primary-light);
    transition: all 0.4s ease;
}

.font-8 {
    font-size: 8px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-30 {
    font-size: 30px !important;
}

.iuw-root {
    min-height: 10vh;
    position: relative;
}

.iuw-error {
    cursor: pointer;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 0, 0, 0.7);
    color: white;
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    align-items: center;
    justify-content: center;
    padding: 10px;
    z-index: 10;
    border-radius: 8px;
}

.iuw-root.error .iuw-error {
    display: flex;
}

.iuw-root.square {
    width: 300px !important;
    height: 300px !important;
    min-width: auto !important;
}

.iuw-inline-root,
.iuw-root {
    border: 1px solid #e2e5ec !important;
    border-radius: 8px !important;
}

.iuw-inline-root .iuw-add-image-btn,
.iuw-inline-root .inline-related {
    background-color: transparent !important;
    box-shadow: 0 0 1px 0 #5868dd6c !important;
}

.iuw-inline-root .iuw-add-image-btn span,
.iuw-inline-root .iuw-empty,
.iuw-root .iuw-empty {
    color: var(--ordolio-default-primary) !important;
}

.iuw-inline-root .iuw-add-image-btn svg,
.iuw-inline-root .iuw-empty > svg,
.iuw-root .iuw-empty > svg {
    fill: var(--ordolio-default-primary) !important;
}

.iuw-root .iuw-image-preview {
    width: 100% !important;
}

.iuw-root.square .iuw-image-preview {
    width: 300px !important;
    height: 300px !important;
}

.iuw-inline-root {
    height: 100% !important;
    min-height: 200px !important;
}

.iuw-inline-root .inline-related img {
    position: absolute;
    top: 0;
    left: 0;
}

.iuw-inline-root .inline-related .icon {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 999;
}

.iuw-inline-root > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
}

.iuw-inline-root .inline-related {
    flex: 1 0 auto;
    height: 160px;
    width: 160px;
    margin: 10px !important;
}

.btn.btn-sm i,
.btn-group-sm > .btn i,
.btn i,
.btn-group > .btn i {
    padding-right: 0 !important;
}

.no-bullets {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.kt-portlet.small-portlet .kt-portlet__head {
    min-height: 0 !important;
    padding: 15px 15px !important;
}

tr.clickable-row {
    cursor: pointer;
}

.nolt-feedback-button {
    background: linear-gradient(280.75deg, var(--ordolio-gradient-button--end) 0%, var(--ordolio-gradient-button--start) 94.81%) !important;
    border: none !important;
}

.nolt-feedback-button {
    box-shadow: 0px 4px 16px 0px rgba(54, 108, 243, 0.15) !important;
    font-weight: normal !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    color: white;

    /* Makes the button perfectly round */
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    text-align: center !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    z-index: 9999 !important;
    transition: all 0.4s ease;
}

.nolt-feedback-button::before {
    /* center the icon */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background-size: 20px 20px !important;
    height: 20px !important;
    width: 20px !important;
}

.nolt-feedback-button:hover {
    color: white;
    box-shadow: 0px 6px 16px 0px rgba(54, 108, 243, 0.25) !important;
}

.kt-portlet {
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.3) !important;
}

.font-18 {
    font-size: 18px;
}

.kt-scrolltop {
    bottom: 30px !important;
    right: 90px !important;
}

.text-white-hover:hover {
    color: white !important;
}

.text-underline {
    text-decoration: underline;
}

.select2-container {
    width: 100% !important;
}

.select2-container--open {
    z-index: 9999 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50% !important;
}

.select2-selection__rendered {
    padding-top: 0px !important;
}

.arrow.feedback::before {
    border-left-color: var(--ordolio-default-primary) !important;
}

.arrow.feedback::after {
    border-left-color: var(--ordolio-default-primary) !important;
}

.kt-header-mobile__toolbar-topbar-toggler {
    display: none !important;
}

/* Profile menu item in hamburger menu - only show on mobile */
.kt-menu__item--mobile-profile {
    display: none !important;
}

@media (max-width: 1024px) {
    .kt-menu__item--mobile-profile {
        display: block !important;
        border-bottom: 1px solid #e2e5ec;
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
    }
}

/* Profile picture section on update profile page */
.profile-picture-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
}

.current-avatar {
    flex-shrink: 0;
}

.profile-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    object-fit: cover;
    border: 3px solid #e2e5ec;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 640px) {
    .profile-picture-section {
        flex-direction: column;
        align-items: flex-start;
    }

    .profile-avatar-preview {
        width: 100px;
        height: 100px;
    }
}

/* Datatable general config */

.dttable .badge {
    cursor: help;
    margin-right: 4px;
    margin-bottom: 4px;
}

.dttable a.badge,
.dttable a .badge {
    cursor: pointer;
}

.dttable td .d-flex.gap-1 {
    gap: 0.25rem;
}

.dttable td .d-flex.gap-1 .btn {
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Datatable zebra striping for better row readability */
.dttable tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Datatable row hover effect for better tracking */
.dttable tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

/* Responsive table styling */
@media (max-width: 768px) {
    .dttable td {
        font-size: 13px;
    }

    .dttable .badge {
        font-size: 11px;
    }
}

/* Dashboard: Collapsible portlet chevron rotation */
.kt-portlet__head[data-toggle="collapse"] .fa-chevron-up,
.kt-portlet__head[data-toggle="collapse"] .fas.fa-chevron-up {
    transition: transform 0.3s ease;
}

.kt-portlet__head[data-toggle="collapse"][aria-expanded="false"] .fa-chevron-up,
.kt-portlet__head[data-toggle="collapse"][aria-expanded="false"] .fas.fa-chevron-up {
    transform: rotate(180deg);
}

/* Ensure entire header is clickable for collapse */
.kt-portlet__head.cursor-pointer {
    cursor: pointer !important;
}

/* Prevent clicks on interactive elements within header from triggering collapse */
.kt-portlet__head.cursor-pointer .kt-portlet__head-toolbar,
.kt-portlet__head.cursor-pointer [data-toggle="kt-popover"] {
    pointer-events: auto;
}

.btn-add-membership i {
    font-size: 14px;
}

@media (max-width: 768px) {
    .child-memberships-table td {
        display: block;
        width: 100% !important;
        text-align: left !important;
    }

    .child-memberships-table .btn {
        width: 100%;
        margin-top: 4px;
    }
}

.organisation-card {
    background-color: white !important;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem;
    border: 1px solid var(--ordolio-default-primary-light);
    cursor: pointer;
    transition: all 0.4s ease;
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.organisation-card .logo {
    height: 100px;
    width: 100px;
    margin-right: 1rem;
}

.organisation-card .logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.organisation-card .title {
    color: black;
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    width: 100%;
}

.organisation-card:hover {
    border: 1px solid var(--ordolio-default-primary);
}

.organisation-card:hover .icon i,
.organisation-card:hover .title {
    color: var(--ordolio-default-primary);
}

.daterangepicker {
    font-family: "Poppins", sans-serif !important;
}

.daterangepicker .ranges li.active,
.daterangepicker .drp-calendar td.active {
    background-color: var(--ordolio-default-primary) !important;
}

.daterangepicker .drp-calendar td.today,
.daterangepicker .drp-calendar td.today.active {
    background: rgba(88, 103, 221, 0.7) !important;
}

div.overlay {
    /* Position the overlay. Fill the container */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    /* Apply the overlay */
    background-color: rgba(255, 255, 255, 1);

    z-index: 2500;
}

div.overlay .spinner {
    /* Center the icon */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    user-select: none;
    & > * {
        margin: 0.5rem 0.5rem;
    }
}

.checkbox-group-legend {
    font-size: 1.5rem;
    font-weight: 700;
    color: #9c9c9c;
    text-align: center;
    line-height: 1.125;
    margin-bottom: 1.25rem;
}

.checkbox-input {
    clip: rect(0 0 0 0);
    clip-path: inset(100%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;

    &:checked + .checkbox-tile {
        border-color: var(--ordolio-default-primary);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
        color: var(--ordolio-default-primary);
        &:before {
            transform: scale(1);
            opacity: 1;
            background-color: var(--ordolio-default-primary);
            border-color: var(--ordolio-default-primary);
        }

        .checkbox-icon,
        .checkbox-label {
            color: var(--ordolio-default-primary);
        }
    }

    &:focus + .checkbox-tile {
        border-color: var(--ordolio-default-primary);
        box-shadow:
            0 5px 10px rgba(0, 0, 0, 0.1),
            0 0 0 4px #b5c9fc;
        &:before {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.checkbox-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 5rem;
    border-radius: 8px;
    padding: 1rem;
    border: 2px solid #ebedf2;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    transition: 0.15s ease;
    cursor: pointer;
    position: relative;

    .disabled {
        cursor: not-allowed;
    }

    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 1.25rem;
        height: 1.25rem;
        border: 2px solid #b5bfd9;
        background-color: #fff;
        border-radius: 50%;
        top: 0.25rem;
        left: 0.25rem;
        opacity: 0;
        transform: scale(0);
        transition: 0.25s ease;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' fill='%23FFFFFF' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'%3E%3C/rect%3E%3Cpolyline points='216 72.005 104 184 48 128.005' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'%3E%3C/polyline%3E%3C/svg%3E");
        background-size: 12px;
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    &:hover:not(.disabled):not(.readonly) {
        border-color: var(--ordolio-default-primary);
        &:before {
            transform: scale(1);
            opacity: 1;
        }
    }
}

.checkbox-tile.disabled {
    cursor: not-allowed;
    border: 2px solid red;
    opacity: 0.5;

    &:before {
        border-color: red;
    }

    &:hover {
        border-color: red;
    }
}

.checkbox-tile.readonly {
    cursor: not-allowed;
    border: 2px solid #ebedf2;
    opacity: 0.5;

    &:before {
        border-color: #ebedf2;
    }

    &:hover {
        border-color: #ebedf2;
    }
}

.checkbox-icon {
    transition: 0.375s ease;
    color: #494949;
    svg {
        width: 3rem;
        height: 3rem;
    }
}

.fieldsets-with-info {
    display: grid;
    grid-gap: 10px;
    align-items: stretch;
}

.fieldsets-with-info.temp-col-3 {
    grid-template-columns: repeat(3, 1fr);
}

.fieldsets-with-info.temp-col-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
    .fieldsets-with-info {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .fieldsets-with-info {
        grid-template-columns: 1fr !important;
    }
}

.row .checkbox .checkbox-wrapper {
    width: 100%;
}

.row .checkbox .checkbox-wrapper .checkbox-label .title h4 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.checkbox-label {
    color: black;
    transition: 0.375s ease;
    text-align: center;
}

.checkbox-group.with-info {
    text-align: center;
    height: 100%; /* Ensure group takes full height */
    display: flex; /* Use flexbox to ensure content fills height */
    flex-direction: column;
}

.checkbox-group.with-info p {
    font-size: 1.2rem;
    color: #535353;
    font-weight: 300;
    flex: 1; /* Allow paragraph to grow and fill available space */
}

.checkbox-group.with-info > .checkbox,
.checkbox-group.with-info label,
.checkbox-group.with-info .checkbox-tile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.checkbox-group.with-info .checkbox-label {
    font-size: 2rem;
    color: #000;
    font-weight: 500;
}

.photo-album {
    display: flex;
}

.photo-album .photo-album__cover {
    height: 100px;
    width: 200px;
    margin: 1rem;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    /* box-shadow: 0 0 0.2rem var(--ordolio-default-light); */
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.15) !important;
}

.photo-album .photo-album__cover img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.photo-album .photo-album__text {
    margin: 1rem;
    width: 100%;
    color: #111827;
}

.photo-album .photo-album__text .photo-album__name {
    font-weight: 500;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
    display: block;
}

.photo-album .photo-album__text .photo-album__count {
    font-size: 11px;
}

.photo-album .photo-album__text .photo-album__description {
    display: block;
}

.photo-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
}

.photo-container {
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    box-shadow: 0 0 0.2rem var(--ordolio-default-primary-light);
    margin: 1rem;
    height: 200px;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-container a {
    height: 100%;
    width: 100%;
}

.photo-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.photo-album-description {
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0px;
    margin-bottom: 1rem;
    display: inline-block;
}

.form-control.is-warning {
    border-color: #ffb822;
    padding-right: calc(1.5em + 1.3rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffb822' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23ffb822' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
    background-repeat: no-repeat;
    background-position: center right calc(0.375em + 0.325rem);
    background-size: calc(0.75em + 0.65rem) calc(0.75em + 0.65rem);
}

/* Global placeholder styling - visually distinct but accessible */
::placeholder {
    color: #767676 !important;
    opacity: 1 !important;
}

.kt-widget2 .kt-widget2__item.kt-widget2__item--dotted-warning:before {
    background: transparent !important;
    border-left-color: #ffb822;
    border-left-width: 2px;
    border-left-style: dotted;
}

.kt-widget2 .kt-widget2__item.kt-widget2__item--dotted-success:before {
    background: transparent !important;
    border-left-color: #00ccac;
    border-left-width: 2px;
    border-left-style: dotted;
}

.kt-widget2 .kt-widget2__item.kt-widget2__item--dotted-danger:before {
    background: transparent !important;
    border-left-color: #ff4669;
    border-left-width: 2px;
    border-left-style: dotted;
}

.w-15 {
    width: 15% !important;
}

.w-50 {
    width: 50% !important;
}

.w-60 {
    width: 60% !important;
}

.w-70 {
    width: 70% !important;
}

.w-80 {
    width: 80% !important;
}

.w-90 {
    width: 90% !important;
}

.w-100 {
    width: 100% !important;
}

.gap-3 {
    gap: 1rem;
}

/* WILLEM */
.kt-widget__media,
.kt-user-card__avatar {
    position: relative;
}

.kt-widget__media:hover {
    background-color: rgba(33, 33, 33, 0.25);
    border-radius: 0.5rem;
}

.hover-button {
    display: none !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hover-button:hover {
    border: none;
}

.kt-widget__media:hover .hover-button,
.kt-user-card__avatar:hover .hover-button {
    display: inline-block !important;
    border: none;
}

.kt-widget__media > a > .hover-button > i {
    color: white !important;
}

.kt-user-card a > .hover-button > i {
    color: black !important;
}

div#iuw-modal-element {
    z-index: 10000;
}

.kt-header__topbar-icon,
.kt-widget__media {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.kt-header__topbar-icon {
    max-width: 34px;
    max-height: 34px;
}

.kt-widget__media {
    width: 90px;
    height: 90px;
}

.kt-widget__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ensure images in rich-text content are responsive and preserve layout */
.kt-widget__body img {
    max-width: 100%;
    height: auto;
}

.kt-header__topbar-icon:hover {
    border: 2px solid var(--ordolio-default-primary);
}

.registrations__container {
    display: flex;
    justify-content: space-between;
}

.img__container {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
}

/* WILLEM */

.bg-primary {
    background: linear-gradient(280.75deg, var(--ordolio-gradient-button--end) 0%, var(--ordolio-gradient-button--start) 94.81%) !important;
}

/* Event list image styling */
.event-list-image {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Ensure icons in primary-soft buttons inherit the correct color */
.btn-primary-soft i {
    color: inherit;
}

/* Fix z-index for dropdowns in event tiles to appear above other tiles */
.event-admin-tile {
    position: relative;
    z-index: 1;
}

.event-admin-tile:has([aria-expanded="true"]) {
    z-index: 1000;
}

.dropdown-menu {
    z-index: 1001 !important;
}

.vw-100 {
    width: 100vw !important;
}

#kt_subheader > .kt-container,
.kt-container:has(#kt_todo) {
    width: 100vw !important;
}

.accordion.accordion-toggle-arrow > a:after {
    font-size: 1rem;
    font-family: LineAwesome;
    text-decoration: inherit;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    content: "\f110";
    color: #4b5563;
}

.accordion.accordion-toggle-arrow > a.collapsed {
    color: #4b5563;
}

.accordion.accordion-toggle-arrow > a.collapsed:after {
    color: #4b5563;
    content: "\f112";
}

.hub .kt-iconbox {
    cursor: pointer;
}

.hub .kt-iconbox:hover {
    transform: scale(1.05);
    transition: all 0.4s ease;
}

.hub .kt-iconbox {
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

.kt-todo__link {
    background-color: #f7f8fa;
}

.kt-pricing-1 .kt-pricing-1__items .kt-pricing-1__item .kt-pricing-1__price {
    font-size: 28px !important;
    color: #111827 !important;
    font-weight: 500 !important;
}

.kt-pricing-1 .kt-pricing-1__items .kt-pricing-1__item .kt-pricing-1__subtitle {
    color: #9392a0 !important;
    font-weight: 400 !important;
}

.action-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* semi-transparent white background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure it's above other content */
}

.loading-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid #e5e7eb;
    border-top: 3px solid var(--ordolio-default-primary);
    border-radius: 50%;
    animation: modern-spin 1s linear infinite;
}

@keyframes modern-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.lb-dataContainer {
    background-color: #f9f9fc;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.lb-details {
    color: black !important;
    padding: 20px;
}

.lb-outerContainer {
    border-radius: 0px !important;
}

.lightbox .lb-image {
    border: 0 !important;
    background-color: transparent !important;
    border-radius: 0px !important;
}

.lb-outerContainer {
    background-color: transparent !important;
}

.lb-number {
    display: none !important;
}

.lb-details h4 small {
    font-size: 1rem;
    color: #111827;
}

/* SOCIAL SHARING MENU */
.social__container {
    position: fixed;
    top: 75vh;
    left: 0;
    transform: translate(0, -50%);
    background-color: rgb(25, 25, 25);
    z-index: 2;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 0 0.5rem 0.5rem 0;
}

.social__container > .icon {
    text-align: center;
    color: white;
    transition: 0.4s cubic-bezier(0.52, -0.5, 0.212, 1.45);
    position: relative;
}

.social__container > .icon:hover {
    border-radius: 0 0.5rem 0.5rem 0;
    background-color: rgb(40, 40, 40);
}

.social__container > .icon > a {
    color: white;
}

.social__container > .icon > a > span {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 40px;
}

.social__container > .icon > a > span > i {
    font-size: 1.5rem;
}

.social__container > .icon > .social__tooltip {
    position: absolute;
    top: 50%;
    left: 130%;
    /* left: -200px; */
    transform: translate(0, -50%);
    background-color: rgb(40, 40, 40);
    color: white;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25);
    transition: 0.3s all;
    display: none;
}

.social__container > .icon:hover > .social__tooltip {
    display: block;
}

@media (max-width: 768px) {
    .social__container {
        position: fixed;
        top: initial;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        transform: translate(0, 0);
    }

    .social__container > .icon {
        flex: 1;
    }

    .social__container > .icon > .social__tooltip {
        top: -50%;
        left: 0;
    }

    .social__container > .icon > a {
        display: flex;
        justify-content: center;
    }
}

/* SOCIAL SHARING MENU */

@media (max-width: 1350px) {
    .hub.kt-callout {
        flex-basis: auto !important;
    }

    .hub .kt-callout__body {
        display: block !important;
    }

    .hub .kt-callout__desc .icons {
        display: block !important;
    }
}

.tox-statusbar__branding {
    display: none !important;
}

.kt-todo .kt-todo__aside .kt-todo__nav .kt-nav .kt-nav__item:last-child .kt-nav__link .kt-nav__link-icon {
    font-size: 1.25rem !important;
}

.kt-pricing-1__subtitle {
    padding: 0px 8px !important;
}

/* CHECKLIST */
.checklist-item .form-group.row {
    margin: 1rem 0rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem;
}

input.form-control.col.checklist-item-name {
    transition: all 0.5s;
    /* background-color: #eafdeb; */
}

.checklist-item-chk {
    width: 2rem !important;
}

.chk-close {
    font-size: 2rem;
    color: #df5a5a;
}

.btn-delete-checklist-item {
    cursor: pointer;
}

.chk-done {
    background-color: rgb(236 236 236) !important;
    text-decoration: line-through;
}

span.info-subtitle {
    font-size: 1rem;
    color: #4b5563;
    padding-bottom: 0.5rem;
    font-weight: 500;
    display: block;
}

span.info-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    display: block;
}

.kt-iconbox__icon i::before {
    font-size: 50px;
}

.kt-iconbox__title {
    overflow-wrap: anywhere;
}

table.clickable-row tr {
    cursor: pointer;
}

input#checklist_name {
    transition: 0.5s all;
}

.success-background {
    background-color: rgb(234, 253, 235) !important;
}

.success-background-alt {
    background-color: white !important;
}

span.info-text {
    overflow-wrap: anywhere;
}

.currency-group-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* .currency-group-container > .input-group-prepend {
  width: 40%;
  text-align: center;
  margin-right: 10px;
}*/

.currency-symbol {
    background-color: transparent;
    border: none !important;
    color: black;
    font-size: 40px;
    flex: 0 0 auto; /* Ensure the symbol doesn't grow or shrink */
    margin-right: 20px;
}

.currency-input {
    border: none !important;
    font-size: 40px;
    width: 50%; /* Ensures the input field takes up the remaining width */
}

@media (max-width: 768px) {
    .currency-group-container {
        flex-direction: column;
    }

    .currency-symbol {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .currency-input {
        width: 100%;
    }
}

.nowrap {
    white-space: nowrap;
}

.group-info:not(:first-child) {
    margin-top: 20px;
}

.group-info:not(:last-child) {
    border-bottom: 1px solid #ebedf2;
}
.group-info h5 {
    color: #111827;
}

.terms-body {
    position: relative;
}

/* checkboxes that have the attribute "onclick" with the value that ENDS on "return false" need to be shown as disabled */
input[type="checkbox"][onclick$="return false"] {
    cursor: not-allowed;
}

.no-shadow {
    box-shadow: none !important;
}

/* Make perfect scrollbar always visible */
.ps__rail-x,
.ps__rail-y {
    opacity: 0.6 !important;
}

.ps > .ps__rail-y > .ps__thumb-y,
.ps > .ps__rail-x > .ps__thumb-x {
    background-color: black !important;
}

.kt-sc {
    border-radius: 8px;
    padding: 1rem;
    box-shadow: 0px 0px 13px 0px rgba(82, 63, 105, 0.15) !important;
}

.kt-sc__heading {
    font-size: 1.5rem;
    font-weight: 500;
    color: white !important;
    text-shadow: 0 0 0.5rem #000;
    margin-bottom: 10px !important;
}

.kt-sc .kt-sc__bottom {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.kt-sc__bottom p {
    color: white !important;
    font-size: 1.25rem;
}

.flow-container {
    position: relative;
}

.flow-complete-checkbox {
    position: absolute;
    top: 10px; /* Adjust positioning as needed */
    right: 10px; /* Adjust positioning as needed */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: white;
    border: 2px solid #ddd;
    display: none;
    cursor: pointer;
    z-index: 10;
}

.flow-container:hover .flow-complete-checkbox {
    display: block;
}

.flow-complete-checkbox:checked {
    background-color: green; /* Optional: Change color when checked */
    border-color: green;
}

.kt-portlet.flow {
    position: relative;
    width: 33%;
}

@media (max-width: 1920px) {
    .kt-portlet.flow {
        width: 50%;
    }
}

@media (max-width: 1024px) {
    .kt-portlet.flow {
        width: 100%;
    }
}

.kt-portlet.flow.next-flow {
    transform: scale(1.01);
}

.kt-portlet.flow .append-icon {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    font-size: 2em;
    padding: 10px;
    display: flex;
    justify-content: end;
    align-items: center;
}

.kt-portlet.flow .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: end;
    align-items: center;
}

.kt-portlet.flow .overlay-icon {
    font-size: 2em;
    color: white;
    padding-right: 10px;
}

.kt-portlet.flow .kt-portlet__body {
    padding: 0 !important;
}

.subnavbar {
    height: 100%;
    position: sticky;
    top: 13vh;
    z-index: 1000;
    background-color: white;
    border-bottom: 1px solid #ebedf2;
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: calc(90vh - 10vh); /* Adjust height to fit within viewport */
    padding-right: 5px; /* Add space for scrollbar if needed */
}

.subnavbar::-webkit-scrollbar {
    width: 5px;
}

.subnavbar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 5px;
}

.subnavbar::-webkit-scrollbar-thumb:hover {
    background-color: #aaa;
}

button#gpt-trainer-window-button {
    width: 75px !important;
    height: 75px !important;
    background: linear-gradient(280.75deg, var(--ordolio-gradient-button--end) 0%, var(--ordolio-gradient-button--start) 94.81%) !important;
}
img#gpt-trainer-open-chat-icon {
    width: 40px !important;
    height: 40px !important;
}

.kt-iconbox.social:hover {
    box-shadow: 0px 10px 13px 0px rgba(82, 63, 105, 0.15) !important;
}

.kt-iconbox.social .kt-link,
.kt-iconbox.social .kt-iconbox__content,
.kt-iconbox.social .kt-iconbox__body {
    color: white !important;
}

.kt-iconbox.facebook {
    background-color: #3b5998;
}

.kt-iconbox.linkedin {
    background-color: #0077b5;
}

.kt-iconbox.x {
    background-color: #0f1419;
}

.kt-iconbox.whatsapp {
    background-color: #25d366;
}

.field-card {
    border-bottom: 1px solid #ebedf2 !important;
}

.options-container {
    /* padding: 1rem;
  background-color: #eafdeb;
  border-radius: 0.5rem; */
    display: flex;
    flex-direction: column;
}

.form-group.has-error {
    background-color: #ff00001f;
    padding: 0.5rem;
    border-radius: 0.5rem;
}

.ordolio-tooltip {
    opacity: 1 !important;
    margin: 0.5rem;
    background: #eee;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: #333;
}

[x-cloak] {
    display: none !important;
}

.kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__username:hover {
    color: #4b5563 !important;
}

.kt-widget2 .kt-widget2__item .kt-widget2__info .kt-widget2__title > a {
    color: inherit !important;
}

.brand-red {
    color: #ff4669;
}

.brand-green {
    color: #00ccac;
}

.brand-yellow {
    color: #f3d012;
}

.brand-light-blue {
    color: #ccd3fa;
}

.brand-blue {
    color: #5c88f5;
}

.answer-hover {
    transition: all 0.3s ease;
}

.answer-hover:hover {
    background-color: #1073d921;
}

.bg-hover {
    background-color: #fafbfc !important;
}

.bg-hover:hover {
    background-color: #f6f6f6 !important;
}

.modal-open .modal {
    z-index: 2001 !important;
}

.datetimepicker {
    z-index: 2010 !important;
}

.datepicker {
    z-index: 2010 !important;
}

.badge-pulse {
    animation: pulse 2s infinite;
}

.event-admin-card {
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 0;
    display: flex;
    width: 100%;
}

.event-admin-card .banner,
.event-admin-banner {
    position: relative;
    height: 150px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.event-admin-card:not(.event-admin-card--nohover):hover {
    transform: scale(1.05);
}

.event-admin-card .banner .banner-overlay,
.event-admin-banner .banner-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
    border-radius: 8px;
    padding: 0 10px; /* Add some padding for text */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center;
    flex-direction: column;
}

.event-admin-card .banner .banner-overlay .title,
.event-admin-banner .banner-overlay .title,
.event-admin-banner .banner-overlay .subtitle {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    font-size: 2.5rem; /* Adjust base font size */
    line-height: 1.2; /* Control line height for multiple lines */
    margin: 0;
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis for overflowed text */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
}

.event-admin-banner .banner-overlay .subtitle {
    margin-top: 0.5rem; /* Add space between title and subtitle */
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .event-admin-card .banner .banner-overlay .title {
        font-size: 1.2rem; /* Smaller font size on small screens */
        -webkit-line-clamp: 3; /* Allow up to 3 lines on small screens */
    }

    .event-admin-card .banner .banner-overlay .subtitle {
        font-size: 1rem; /* Smaller font size on small screens */
        -webkit-line-clamp: 2; /* Allow up to 2 lines on small screens */
    }
}

.event-admin-tiles div[class^="col-"] {
    display: flex;
}

/* Parent container */
.event-tiles {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Prevent vertical scrolling */
    gap: 10px; /* Add space between tiles */
    padding: 20px; /* Optional: add some padding around the tiles */
    scroll-behavior: smooth; /* Smooth scrolling */
    width: 100%; /* Full width */
}

/* Child tiles */
.event-card {
    flex: 0 0 calc(25% - 10px); /* 4 tiles per row on large screens */
    max-width: calc(25% - 10px); /* Prevent growing beyond 4 tiles */
    min-width: calc(25% - 10px); /* Prevent shrinking below min size */
    box-sizing: border-box; /* Include padding and border in width */
}

@media (max-width: 1400px) {
    .event-card {
        flex: 0 0 calc(33.333% - 10px); /* 3 tiles per row on large tablets */
        max-width: calc(33.333% - 10px);
        min-width: calc(33.333% - 10px);
    }
}

@media (max-width: 1024px) {
    .event-card {
        flex: 0 0 calc(50% - 10px); /* 2 tiles per row on tablets */
        max-width: calc(50% - 10px);
        min-width: calc(50% - 10px);
    }
}

@media (max-width: 640px) {
    .event-card {
        flex: 0 0 calc(100% - 20px); /* 1 tile per row on mobile, accounting for padding */
        max-width: calc(100% - 20px);
        min-width: calc(100% - 20px);
    }
}

.event-header-container {
    max-width: 70vw;
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 800px) {
    .event-header-container {
        max-width: 100vw !important;
        padding-left: 0;
        padding-right: 0;
    }
}

/* Optional: Style the scrollbar for a better look */
.event-tiles::-webkit-scrollbar {
    height: 0px; /* Height of horizontal scrollbar */
}

.event-tiles::-webkit-scrollbar-thumb {
    background-color: #ccc; /* Scrollbar color */
    border-radius: 4px; /* Rounded scrollbar */
}

.event-tiles::-webkit-scrollbar-thumb:hover {
    background-color: #aaa; /* Scrollbar color on hover */
}

.event-scroller {
    position: relative;
    display: flex;
    align-items: center;
}

.scroll-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.scroll-btn-left {
    left: -10px;
}

.scroll-btn-right {
    right: -10px;
}

.event-card {
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 0;
    display: flex;
    width: 100%;
    height: 480px;
    max-height: 480px;
}

.event-card .banner {
    position: relative;
    height: 180px;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.event-banner {
    position: relative;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    overflow: hidden;
}

.event-card:not(.event-card--nohover):hover {
    transform: scale(1.05);
}

.event-card .banner .banner-overlay,
.event-banner .banner-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 1.5rem;
    display: flex;
    align-items: flex-end;
}

.event-card .banner .banner-overlay .title,
.event-banner .banner-overlay .title,
.event-banner .banner-overlay .subtitle {
    color: white;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.event-banner .banner-overlay .subtitle {
    margin-top: 0.5rem; /* Add space between title and subtitle */
    font-size: 1.2rem;
}

@media (max-width: 576px) {
    .event-card .banner .banner-overlay .title {
        font-size: 1.2rem; /* Smaller font size on small screens */
        -webkit-line-clamp: 3; /* Allow up to 3 lines on small screens */
    }

    .event-card .banner .banner-overlay .subtitle {
        font-size: 1rem; /* Smaller font size on small screens */
        -webkit-line-clamp: 2; /* Allow up to 2 lines on small screens */
    }
}

@media (max-width: 768px) {
    .event-banner .banner-overlay .subtitle {
        display: none;
    }
}

.banner-edit-divider {
    border-top: 1px solid #ebedf2;
}

.gap-1 {
    gap: 0.5rem;
}

.gap-2 {
    gap: 1rem;
}

.gap-3 {
    gap: 1.5rem;
}

#kt_ticket_panel,
#dynamic-panel {
    width: 700px !important;
    right: -720px;
    background-color: #f9f9fc;
}

#kt_ticket_panel.kt-offcanvas-panel--on,
#dynamic-panel.kt-offcanvas-panel--on {
    right: 0;
    z-index: 2002 !important;
}

.field-card .options > .option,
.menu-card .options > .option {
    padding: 20px;
    background-color: #f9f9fc;
    border-radius: 8px;
}

.select2-container--open {
    z-index: 2002 !important;
}

.pulsate-button {
    animation: pulsate 1.5s infinite;
}

@keyframes pulsate {
    0% {
        box-shadow: 0 0 0 0 rgba(92, 136, 245, 1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(92, 136, 245, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(92, 136, 245, 0);
    }
}

/* Radar Effect Button */
.radar-button {
    position: relative;
    overflow: visible;
    animation: radar-pulse 2s infinite;
}

.radar-button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ordolio-default-primary);
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1);
    animation: radar-wave 2s infinite;
    z-index: -1;
}

@keyframes radar-pulse {
    0% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.05);
    }
    20% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes radar-wave {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.4;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* Alternative radar effect with different timing */
.radar-button-fast {
    position: relative;
    overflow: visible;
    animation: radar-pulse-fast 1.2s infinite;
}

.radar-button-fast::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ordolio-default-primary);
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
    animation: radar-wave-fast 1.2s infinite;
    z-index: -1;
}

@keyframes radar-pulse-fast {
    0% {
        transform: scale(1);
    }
    15% {
        transform: scale(1.08);
    }
    30% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes radar-wave-fast {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    70% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0;
    }
}

/* Intense radar effect with multiple waves */
.radar-button-intense {
    position: relative;
    overflow: visible;
    animation: radar-pulse-intense 1.8s infinite;
}

.radar-button-intense::before,
.radar-button-intense::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background-color: var(--ordolio-default-primary);
    transform: translate(-50%, -50%) scale(1);
    z-index: -1;
}

.radar-button-intense::before {
    animation: radar-wave-intense 1.8s infinite;
    opacity: 0.6;
}

.radar-button-intense::after {
    animation: radar-wave-intense 1.8s infinite 0.4s;
    opacity: 0.3;
}

@keyframes radar-pulse-intense {
    0% {
        transform: scale(1);
    }
    8% {
        transform: scale(1.1);
    }
    16% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes radar-wave-intense {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    30% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0.3;
    }
    60% {
        transform: translate(-50%, -50%) scale(2.2);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

input[readonly] {
    background-color: #f7f8fa !important;
}

.kt-widget__stats.calendar-item {
    display: flex;
    gap: 10px;
    flex-direction: row;
}

@media (max-width: 2100px) {
    .kt-widget__stats.calendar-item {
        flex-direction: column;
    }
}

.blur-text {
    filter: blur(5px);
}

.switch-blur {
    cursor: pointer;
}

.table-sticky th,
.table-sticky td:first-child {
    position: sticky;
    background: white; /* Ensure background is set to avoid overlap issues */
    z-index: 1; /* Ensure the sticky elements are above other content */
}

.table-sticky th {
    top: 0; /* Stick the header row to the top */
    z-index: 2; /* Ensure the header row is above the first column */
}

.table-sticky td:first-child {
    left: 0; /* Stick the first cell of each row to the left */
}

.table-sticky. tbody tr:nth-of-type(odd) > td {
    background-color: #f7f8fa;
}

.table-sticky. tbody tr:nth-of-type(even) > td {
    background-color: #fff;
}

#attendance-table {
    border-collapse: separate;
}

#attendance-table td,
#attendance-table th {
    min-width: 100px;
}

#attendance-table td:first-child,
#attendance-table th:first-child {
    min-width: 250px;
    border-right: 1px solid #ebedf2;
}

@media (max-width: 768px) {
    #attendance-table td:first-child,
    #attendance-table th:first-child {
        min-width: 100px;
    }
}

@media (max-width: 576px) {
    #attendance-table td:first-child,
    #attendance-table th:first-child {
        min-width: 50px;
    }
}

/* Todo navigation styles */
.kt-todo .kt-todo__header .kt-todo__nav {
    display: flex;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.kt-todo .kt-todo__header .kt-todo__nav a.kt-todo__link {
    margin-top: 0.2rem !important;
    margin-bottom: 0.2rem !important;
}

/* Toggle fees link */
span.toggle-fees {
    cursor: pointer;
    color: var(--ordolio-default-primary);
}

/* Styles for the eye icon */
.toggle-password-icon {
    position: absolute;
    cursor: pointer;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--ordolio-default-primary);
}

/* Container for input and icon to maintain alignment */
.password-container {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* Make sure the input field takes the full width of the container */
.password-container input {
    width: 100%;
    padding-right: 30px; /* Space for the icon */
}

.mail-preview {
    display: block;
    padding: 1rem;
    border-radius: 8px;
    background-color: #f9f9fc;
}

.form-datetimepicker[readonly] {
    background-color: #ffffff !important;
}

.kt-widget2 .kt-widget2__item .kt-widget2__info,
.kt-widget2 .kt-widget2__item .kt-widget2__actions {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
}

.plain-portlet {
    position: relative;
}

.plain-portlet .save {
    position: absolute;
    top: 15px;
    right: 25px;
}

@media (max-width: 768px) {
    .plain-portlet .save {
        position: relative;
        top: auto;
        right: auto;
    }

    .plain-portlet .save button {
        float: right;
    }
}

.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid #e2e5ec !important;
    border-radius: 8px !important;
}

.select2-container .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(1.5em + 1.3rem + 2px) !important;
    font-weight: 400 !important;
    font-size: 1rem !important;
    color: #495057 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    font-weight: bold !important;
    color: black !important;
    right: 0px !important;
}

.symbol {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    border-radius: 0.42rem;
}

.symbol.symbol-40 .symbol-label {
    width: 40px;
    height: 40px;
}

.symbol.symbol-30 .symbol-label {
    width: 30px;
    height: 30px;
}

.symbol.symbol-light-success .symbol-label {
    background-color: #ebf0fe;
    color: #1bc5bd;
}

.symbol.symbol-transparent .symbol-label {
    background-color: transparent;
    color: #3f4254;
}

@media (min-width: 1400px) {
    .symbol .symbol-label {
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 1200px) {
    .symbol .symbol-label {
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 992px) {
    .symbol .symbol-label {
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 768px) {
    .symbol .symbol-label {
        width: 50px;
        height: 50px;
    }
}
@media (min-width: 576px) {
    .symbol .symbol-label {
        width: 50px;
        height: 50px;
    }
}
.symbol .symbol-label {
    width: 50px;
    height: 50px;
}
.symbol .symbol-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    color: #3f4254;
    background-color: #f3f6f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0.42rem;
}

.divider:not(:last-child) {
    border-bottom: 1px solid #ebedf2;
    padding-bottom: 1rem;
}

.nav-tabs .nav-item .nav-link {
    background-color: var(--ordolio-default-primary-soft);
}

.nav-pills .nav-item .nav-link:not(.active) {
    background-color: var(--ordolio-default-primary-soft) !important;
    color: var(--ordolio-default-primary) !important;
}

pre.code-snippet {
    position: relative;
    background: #f9f9fc;
    padding: 10px;
    font-size: 15px;
    word-wrap: break-word;
    white-space: pre-wrap;
    border: 1px solid #e6e7e9;
    max-width: 100%;
}

pre.code-snippet .copy-button {
    font-family: "Poppins", sans-serif;
    position: absolute;
    top: 2px;
    right: 10px;
    cursor: pointer;
    color: white;
    background: var(--ordolio-default-primary);
    border-radius: 0.5em;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    font-weight: 400;
    box-shadow: 0px 4px 16px 0px rgba(88, 103, 221, 0.15);
}

pre.code-snippet .copy-button:hover {
    box-shadow: 0px 4px 16px 0px rgba(88, 103, 221, 0.25);
}

.kt-chat .kt-chat__messages .kt-chat__message .kt-chat__text {
    font-weight: 300 !important;
}

.modal-xxl {
    max-width: 90% !important;
}

.custom-fields .card .card-header .card-title {
    color: var(--ordolio-default-primary);
    position: relative;
}

.custom-fields .card .card-header .card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0;
    color: var(--ordolio-default-primary);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.custom-fields .actions {
    margin-top: 10px;
    margin-bottom: 10px;
}

.bg-ordolio {
    background-color: var(--ordolio-default-background);
}

.bg-ordolio-gray {
    background-color: #f9f9fc;
}

.img-cover {
    object-fit: cover;
}

.dtfilter.dropdown-menu {
    z-index: 10000;
    /* Bound the dropdown so long option lists never escape the viewport.
       Without this Bootstrap renders the full list and may flip it upwards
       beyond the scrollable area, leaving the top options unreachable.
       The menu itself becomes the scroll container — this is the safe
       default for the `tables.js` render path, which does not wrap its
       contents in a separate scroll element. */
    max-height: min(60vh, 480px);
    min-width: 260px;
    overflow-y: auto;
}

/* Application-grade filters from `createEventFilterPanel` wrap content in
   .dtfilter-header + .dtfilter-options. There the inner element is the
   scroll container, which keeps the header (and the optional search input)
   pinned above the scrolling option list. */
.dtfilter--app.dropdown-menu {
    overflow: hidden;
    padding: 0;
    flex-direction: column;
}

/* Bootstrap toggles .show with `display: block` at equal specificity. Bumping
   ours to three classes wins without needing !important. */
.dtfilter--app.dropdown-menu.show {
    display: flex;
}

.dtfilter--app .dtfilter-header {
    padding: 10px 12px;
    border-bottom: 1px solid #ebedf2;
    flex: 0 0 auto;
    background: #fff;
}

.dtfilter--app .dtfilter-header .filter-search-input {
    width: 100%;
}

.dtfilter--app .dtfilter-options {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 12px;
    flex: 1 1 auto;
    /* min-height:0 is required so a flex child with overflow can shrink. */
    min-height: 0;
}

.dtfilter .kt-nav {
    padding: 10px;
}

.dtfilter .form-check {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.dtfilter .form-check label {
    white-space: nowrap;
    margin-bottom: 0;
}

.table-filters {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .table-filters {
        flex-direction: column;
    }
}

.kt-submenu__parent {
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kt-submenu__items {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px); /* Starts slightly higher */
    transition:
        transform 0.3s ease-out,
        opacity 0.3s ease-out;
}

.kt-submenu__parent.active .kt-submenu__items {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    padding: 5px 0;
}

.kt-submenu__parent .arrow {
    transition: transform 0.3s ease-in-out;
    font-size: 14px;
}

.kt-submenu__parent.active .arrow {
    transform: rotate(90deg);
}

.hover-underline:hover {
    text-decoration: underline !important;
}

.font-weight-semi-bold {
    font-weight: 500 !important;
}

.partner-deals {
    position: relative;
}

.partner-deal,
.partner-deal-more {
    position: relative;
    height: 230px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-deal-more {
    background-color: white;
}

.partner-deal .title {
    text-align: center;
    color: white !important;
    text-shadow: none !important;
    font-size: 2rem !important;
}

.partner-deal-more .title {
    text-align: center;
    color: black !important;
    text-shadow: none !important;
    font-size: 2rem !important;
}

.partner-deal .subtitle {
    color: white !important;
    text-shadow: none !important;
    font-size: 1rem !important;
    text-align: center;
}

.partner-deal-more .subtitle {
    color: black !important;
    text-shadow: none !important;
    font-size: 1rem !important;
    text-align: center;
}

.partner-deal-more h3,
.partner-deal-more p {
    color: black !important;
    text-shadow: none !important;
}

.partner-deal::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    border-radius: 8px;
}

.partner-deal .kt-container,
.partner-deal-more .kt-container {
    position: relative;
    z-index: 2;
}

.kt-sc.partner-deal .kt-sc__bottom,
.kt-sc.partner-deal-more .kt-sc__bottom {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}

.partner-deal:hover,
.partner-deal-more:hover {
    transform: scale(1.05);
    transition: all 0.3s ease;
}

.border-radius-8 {
    border-radius: 8px !important;
}

.text-align-right {
    text-align: right !important;
}

.kt-sc.admin-hero {
    box-shadow: 0px 0px 20px 0px #222 !important;
    background-color: #f9f9fc !important;
    border-radius: 8px !important;
}

.kt-sc.admin-hero:hover {
    box-shadow: 0px 0px 30px 0px white !important;
}

@media (max-width: 960px) {
    .kt-portlet .kt-portlet__head {
        padding: 1.5rem !important;
        flex-direction: column;
        gap: 10px;
    }
}

.timeline {
    display: flex;
    align-items: center;
    position: relative;
    justify-content: space-between;
}
.timeline::before {
    content: "";
    position: absolute;
    top: 22%;
    left: 0;
    right: 0;
    height: 2px;
    background: #f7f8fa;
    z-index: 1;
}
.timeline-item {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 70px; /* Adjusted for better spacing */
    height: 70px; /* Adjusted for better spacing */
}
.timeline .circle {
    width: 20px; /* Circle size */
    height: 20px; /* Circle size */
    border: 5px solid; /* Border thickness */
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
}

.timeline-title {
    text-align: center;
    color: black; /* Title color */
    font-weight: 500;
}

.fee-text {
    font-size: 10px;
    font-style: italic;
}

.form-error {
    border: 2px solid #fd1361 !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23fd1361" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

.form-success {
    border: 2px solid #00ccac !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%2300ccac" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm-1.2 17.2l-4.8-4.8 1.68-1.68L10.8 13.84l6.72-6.72L19.2 8.8l-8.4 8.4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

.form-loading {
    border: 2px solid #366cf3 !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23366cf3" height="20" viewBox="0 0 100 100" width="20" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="35" stroke="%23366cf3" stroke-width="10" fill="none" stroke-dasharray="164.93361431346415" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="1s" repeatCount="indefinite"/></circle></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

.form-warning {
    border: 2px solid #ffb822 !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffb822" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1rem 1rem;
}

.kt-wizard-v1__nav-body {
    height: 100%;
    width: 100%;
}

.kt-wizard-v1__nav-label {
    overflow: hidden;
    text-overflow: ellipsis;
    height: 100%;
    width: 70%;
}

.table-no-padding td,
.table-no-padding th {
    padding: 0 !important;
}

.table-no-padding td:first-child,
.table-no-padding th:first-child {
    padding-left: 0 !important;
}

.table-no-padding td:last-child,
.table-no-padding th:last-child {
    padding-right: 0 !important;
}

.flex-1 {
    flex: 1;
}

.public-page-intro {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1rem; /* wat ademruimte aan de zijkanten op kleine schermen */
    box-sizing: border-box;
}

@media (max-width: 400px) {
    .public-page-intro {
        padding: 0 0.5rem;
    }
}

body {
    font-size: 1.125rem !important;
}

html,
body {
    font-size: 14px !important;
}

.form-wizard-container {
    position: relative;
    width: 100%;
}

/* Responsive padding for form wizard on mobile */
@media screen and (max-width: 768px) {
    .form-wizard-container {
        padding: 0 0.5rem;
    }
}

@media screen and (max-width: 480px) {
    .form-wizard-container {
        padding: 0 0.25rem;
    }
}

/* Modern Loading Spinner Styles */
.loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(2px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border-radius: 0.5rem !important;
    z-index: 1000 !important;
}

.modern-spinner {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border: 3px solid #e5e7eb !important;
    border-top: 3px solid var(--ordolio-default-primary) !important;
    border-radius: 50% !important;
    animation: modern-spin 1s linear infinite !important;
}

@keyframes modern-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Pulse animation for extra visual appeal */
.loading-overlay .modern-spinner {
    animation:
        modern-spin 1s linear infinite,
        pulse 2s ease-in-out infinite !important;
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.form-wizard-step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: opacity 0.2s;
    opacity: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
}
.form-wizard-step.active {
    opacity: 1;
    z-index: 1;
    position: relative;
    pointer-events: auto;
}

/* Ensure labels in form wizard are left-aligned */
.form-wizard-step label {
    text-align: left !important;
    display: block;
}

.form-wizard-step .form-group label {
    text-align: left !important;
}

/* Override parent centering for form wizard container */
.kt-login__body .form-wizard-container,
.kt-login__form .form-wizard-container {
    text-align: left !important;
}

/* Ensure form wizard content is left-aligned */
.form-wizard-container * {
    text-align: left;
}

/* Keep specific elements centered that should be centered */
.form-wizard-container .text-center,
.form-wizard-container .kt-login__logo {
    text-align: center !important;
}

/* Ensure paragraph text is left-aligned in form wizard */
.form-wizard-step p {
    text-align: left !important;
}

/* Responsive form wizard navigation */
#form-wizard-navigation {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

@media screen and (max-width: 480px) {
    #form-wizard-navigation {
        flex-direction: column;
        gap: 0.5rem;
    }

    #form-wizard-navigation button {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .form-wizard-step h1,
    .form-wizard-step h2,
    .form-wizard-step h3 {
        font-size: 1.5rem !important;
    }

    .form-wizard-step h5 {
        font-size: 1.1rem !important;
    }
}

/* Ensure form controls are properly sized on mobile */
@media screen and (max-width: 768px) {
    .form-wizard-step .form-control {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    .form-wizard-step .form-group {
        margin-bottom: 1rem;
    }
}

/* Add more space between form fields and labels */
.form-wizard-step .form-group {
    margin-bottom: 1.5rem;
}

.form-wizard-step .form-control {
    margin-bottom: 0.5rem;
}

#auto-create-new-period-info {
    padding: 1rem;
    border-radius: 8px;
    background: white;
    border: 1px solid #ebedf2;
}

#auto-create-new-period-info li:not(:last-child) {
    margin-bottom: 3px;
}

.btn-penningmeester {
    background-color: #00b4a9 !important;
    color: white !important;
}

.btn-penningmeester:hover {
    background-color: #00c7bb !important;
}

.btn-piago {
    background-color: #0047bb !important;
    color: white !important;
}

.btn-piago:hover {
    background-color: #003181 !important;
}

.kt-callout--penningmeester {
    background-color: rgba(0, 180, 169, 0.07);
}
.kt-callout--penningmeester.kt-callout--diagonal-bg {
    background-color: #fff;
}
.kt-callout--penningmeester.kt-callout--diagonal-bg:before {
    background-color: rgba(0, 180, 169, 0.15);
}

.kt-callout--piago {
    background-color: #faf6f2;
}
.kt-callout--piago.kt-callout--diagonal-bg {
    background-color: #fff;
}
.kt-callout--piago.kt-callout--diagonal-bg:before {
    background-color: #faf6f2;
}

.fixed-modal-height {
    padding-right: 0 !important; /* Prevent modal shift */
    height: auto !important;
}

.fixed-modal-height .modal-dialog {
    margin: 10vh auto;
    display: flex;
    align-items: stretch;
}

.fixed-modal-height .modal-content {
    height: 100%;
    max-height: 100%;
    min-height: 0; /* Important for flex children */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fixed-modal-height .modal-header {
    flex-shrink: 0;
    flex-grow: 0;
}

.fixed-modal-height .modal-body {
    flex: 1 1 auto;
    min-height: 0; /* Important: allows flex item to shrink below content size */
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(80vh - 120px); /* Account for header and footer */
}

.fixed-modal-height .modal-footer {
    flex-shrink: 0;
    flex-grow: 0;
}

/* Custom scrollbar styling - modern and subtle */
.fixed-modal-height .modal-body::-webkit-scrollbar {
    width: 8px;
}

.fixed-modal-height .modal-body::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
    margin: 4px 0;
}

.fixed-modal-height .modal-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

.fixed-modal-height .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.35);
}

.fixed-modal-height .modal-body::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.5);
}

/* For Firefox - subtle styling */
.fixed-modal-height .modal-body {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) rgba(0, 0, 0, 0.05);
}

.table.no-top-border,
.table.no-top-border tr:first-child td,
.table.no-top-border tr:first-child th {
    border-top: none !important;
}

.bg-white-important {
    background-color: white !important;
}

#auto-create-new-period-info li:not(:last-child) {
    margin-bottom: 3px;
}

/** OV-110: Dirty fix for conflicting bootstrap and tailwind css classes. */
/** We should properly resolve this in the future, but for now, we'll override the tailwind css classes. */
.collapse {
    visibility: visible !important;
}

.tox-tinymce-aux {
    z-index: 5000 !important; /* Make sure that it is visible in modals */
}

#clr-picker {
    z-index: 5000 !important; /* Ensure color picker appears above dynamic modals */
}

/* Simple pulsing animation that makes button bigger and smaller */
@keyframes pulse-size {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.btn-pulse-ping {
    animation: pulse-size 1.5s ease-in-out 3; /* 2 cycles, 1.5 seconds each */
}

/* Quick Period Filter Buttons for Events */
.quick-period-filter {
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.quick-period-filter:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.quick-period-filter:active {
    transform: translateY(0);
}

/* Add visual indicator when filter is being applied */
.quick-period-filter.loading {
    pointer-events: none;
    opacity: 0.7;
}

/* Ensure gap support fallback for older browsers */
.d-flex[style*="gap"] > * {
    margin-right: 8px;
}

.d-flex[style*="gap"] > *:last-child {
    margin-right: 0;
}

/* Event List Portlet Head Styling */
.kt-portlet__head .input-group .form-control {
    min-width: 200px;
}

/* Separator between sections in portlet header */
.kt-portlet__head-separator {
    width: 1px;
    height: 24px;
    background-color: #e2e5ec;
    margin: 0 8px;
}

/* Responsive adjustments for event list header */
@media (max-width: 1024px) {
    .kt-portlet__head {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .kt-portlet__head-label {
        margin-bottom: 12px;
        width: 100%;
    }

    .kt-portlet__head-toolbar {
        width: 100%;
    }

    .kt-portlet__head-separator {
        display: none;
    }
}

/* Utility: Primary Border and Color */
.link-primary-outline {
    border: 2px solid var(--ordolio-default-primary) !important;
    color: var(--ordolio-default-primary) !important;
}

/* Utility: Blue Border */
.btn-blue-border {
    border: 2px solid #60a5fa !important;
}

/* Utility: Closed/Disabled Button Cursor */
.btn-event-closed {
    cursor: not-allowed !important;
    opacity: 0.65;
}

input.federation-required {
    background-color: #cccccc !important;
}

.bootstrap-timepicker-widget table td input {
    width: 40px !important;
    min-width: 40px;
}

/* Mobile Header Logo - Rounded Club Logo */
.kt-header-mobile__logo img {
    border-radius: 8px;
    object-fit: cover;
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    max-height: 50px !important;
}

/* Hide page title in subheader - only show breadcrumbs */
.kt-subheader .kt-subheader__main .kt-subheader__title {
    display: none !important;
}

/* Adjust breadcrumbs layout now that title is hidden */
.kt-subheader .kt-subheader__main {
    justify-content: flex-start;
}

/* Ensure mobile toggle button is also hidden */
.kt-subheader__mobile-toggle {
    display: none !important;
}

/* Hide feedback button on mobile devices */
@media (max-width: 768px) {
    .feedback-button {
        display: none !important;
    }
}

/* Generic centering class for flex containers */
.centered {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Navbar membership button with dynamic organization color */
.navbar-membership-button {
    background-color: var(--organisation-primary-color, var(--ordolio-default-primary, #5867dd));
    color: #fff;
}

/* ============================================
   PARTNER BRANDING - NIVEAU 1: FOOTER (SINGLE - FULL WIDTH MET WAVE)
   ============================================ */

.partner-footer-section {
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
    background: var(--partner-color-1, #5867dd);
}

.partner-footer-gradient {
    background: linear-gradient(135deg, var(--partner-color-1, #5867dd) 0%, var(--partner-color-2, #4252c7) 100%);
    padding: 3.5rem 0 5rem 0;
    position: relative;
}

.partner-footer-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    pointer-events: none;
    opacity: 0.5;
    z-index: 1;
}

.partner-footer-title {
    color: white !important;
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.partner-footer-text {
    color: rgba(255, 255, 255, 0.95) !important;
}

.partner-footer-text p {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    line-height: 1.6;
}

.partner-info-btn {
    background: white !important;
    color: var(--partner-color-1, #5867dd) !important;
    border: 2px solid white !important;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.partner-info-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.partner-footer-logo-link {
    display: inline-block;
    transition: all 0.3s ease;
}

.partner-footer-logo-link:hover {
    transform: translateY(-4px) scale(1.03);
}

.partner-footer-logo-large {
    max-height: 100px;
    max-width: 300px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 16px;
}

.partner-footer-name {
    color: rgba(255, 255, 255, 0.95);
    font-size: 1rem;
    font-weight: 600;
    margin-top: 1rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.partner-visit-btn {
    background: white !important;
    color: var(--partner-color-1, #5867dd) !important;
    border: 2px solid white !important;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.partner-visit-btn:hover {
    background: rgba(255, 255, 255, 0.95) !important;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ============================================
   PARTNER BRANDING - NIVEAU 1: FOOTER (MULTI-PARTNER)
   Logo strip with verified badges, no card wrappers
   ============================================ */

.partner-footer-multi-section {
    margin-top: 0 !important;
    position: relative;
    overflow: hidden;
    background: #fafbfc;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.partner-footer-multi-inner {
    padding: 2.5rem 0 2rem;
}

/* Header: ruled lines flanking the wij-taal heading */
.partner-footer-multi-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.partner-footer-multi-rule {
    flex: 1;
    max-width: 100px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.partner-footer-multi-heading {
    font-size: 0.8rem;
    font-weight: 500;
    color: #7c838d;
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Monospace count — SaaS/data-driven feel */
.partner-footer-multi-count {
    font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
    font-weight: 700;
    font-size: 0.85rem;
    color: #495057;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.1em 0.4em;
    border-radius: 4px;
    letter-spacing: -0.02em;
}

/* Logo row — no cards, just logos side by side */
.partner-footer-multi-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
    padding-bottom: 0.75rem;
}

/* Individual logo link with verified badge */
.partner-footer-multi-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease;
    filter: grayscale(30%) opacity(0.85);
}

.partner-footer-multi-logo:hover {
    transform: scale(1.1) translateY(-2px);
    filter: grayscale(0%) opacity(1);
    text-decoration: none;
}

.partner-footer-multi-logo img {
    max-height: 52px;
    max-width: 150px;
    object-fit: contain;
    border-radius: 10px;
}

/* Text fallback when no logo */
.partner-footer-multi-logo-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    text-align: center;
    line-height: 1.3;
}

/* Verified badge — green circle with checkmark */
.partner-footer-verified {
    position: absolute;
    bottom: -5px;
    right: -7px;
    width: 24px;
    height: 24px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.4);
    border: 2px solid #fafbfc;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.3s ease;
}

.partner-footer-multi-logo:hover .partner-footer-verified {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.partner-footer-verified i {
    font-size: 11px;
    color: white;
    line-height: 1;
}

/* Partner name — hidden by default, revealed on hover */
.partner-footer-multi-logo-name {
    position: absolute;
    bottom: -1.6rem;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    font-size: 0.7rem;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-footer-multi-logo:hover .partner-footer-multi-logo-name {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Footer link */
.partner-footer-multi-footer {
    text-align: center;
    margin-top: 1rem;
}

.partner-footer-multi-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: #8b919a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.partner-footer-multi-link:hover {
    color: #495057;
    text-decoration: none;
}

.partner-footer-multi-link i {
    font-size: 0.65rem;
    transition: transform 0.2s ease;
}

.partner-footer-multi-link:hover i {
    transform: translateX(3px);
}

/* ============================================
   PARTNER BRANDING - NIVEAU 2: PROMINENT (SINGLE)

   DESIGN RULES (non-negotiable):
   1. NOOIT concurreren met succesboodschap
   2. Max 60-70% visueel gewicht
   3. Altijd ONDER de primaire content
   4. Subtiele presence - informatief, niet opdringerig
   ============================================ */

.partner-prominent-badge {
    margin: 2rem 0;
    padding: 1.5rem;
    background: linear-gradient(
        135deg,
        rgba(var(--partner-color-1-rgb, 88 103 221), 0.08) 0%,
        rgba(var(--partner-color-2-rgb, 66 82 199), 0.15) 100%
    );
    border-left: 4px solid var(--partner-color-1, #5867dd);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    opacity: 0.95;
}

.partner-prominent-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.partner-prominent-text-section {
    flex: 1;
    min-width: 200px;
}

.partner-prominent-copy {
    margin: 0 0 0.5rem 0;
    font-size: 15px;
    color: var(--ordolio-text-primary, #212529);
    font-weight: 500;
    line-height: 1.5;
}

.partner-prominent-learn-more {
    font-size: 13px;
    color: var(--partner-color-1, #5867dd);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.partner-prominent-learn-more:hover {
    color: var(--partner-color-2, #4252c7);
    text-decoration: underline;
}

.partner-prominent-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    background: white;
    border: 1px solid var(--ordolio-border, #d1d3e0);
    border-radius: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.partner-prominent-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-color: var(--partner-color-1, #5867dd);
}

.partner-prominent-logo {
    max-height: 40px;
    max-width: 160px;
    object-fit: contain;
}

.partner-prominent-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--partner-color-1, #5867dd);
}

.partner-prominent-info-icon {
    color: var(--partner-color-1, #5867dd);
    margin-left: 6px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.partner-prominent-info-icon:hover {
    opacity: 1;
}

/* ============================================
   PARTNER BRANDING - NIVEAU 2: PROMINENT (MULTI)
   Inline logo strip with verified badges
   ============================================ */

.partner-prominent-multi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
    margin: 2rem 0 0.5rem;
}

.partner-prominent-multi-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #8b919a;
    white-space: nowrap;
}

.partner-prominent-multi-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.partner-prominent-multi-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition:
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        filter 0.3s ease;
    filter: grayscale(20%) opacity(0.8);
}

.partner-prominent-multi-item:hover {
    transform: scale(1.08) translateY(-2px);
    filter: grayscale(0%) opacity(1);
    text-decoration: none;
}

.partner-prominent-multi-item img {
    max-height: 48px;
    max-width: 140px;
    object-fit: contain;
    border-radius: 8px;
}

.partner-prominent-multi-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
}

/* Verified badge for prominent context */
.partner-prominent-verified {
    position: absolute;
    bottom: -4px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #22c55e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(34, 197, 94, 0.4);
    border: 2px solid white;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.partner-prominent-multi-item:hover .partner-prominent-verified {
    transform: scale(1.15);
}

.partner-prominent-verified i {
    font-size: 8px;
    color: white;
    line-height: 1;
}

/* ============================================
   PARTNER INFO PAGE
   ============================================ */

.partner-info-logo-link {
    display: inline-block;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.partner-info-logo-link:hover {
    transform: scale(1.02);
    opacity: 0.9;
}

.partner-info-logo {
    max-height: 100px;
    max-width: 350px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
}

.partner-info-section {
    margin-bottom: 3rem;
}

.partner-info-section h2 {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--ordolio-text-primary, #212529);
}

.partner-info-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.benefit-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--ordolio-border-light, #e4e6ef);
    height: 100%;
    transition: all 0.3s ease;
}

.benefit-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.benefit-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.benefit-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.benefit-card p {
    margin: 0;
    color: var(--ordolio-text-muted, #74788d);
    font-size: 0.9rem;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.example-item {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 3px solid var(--ordolio-primary, #5867dd);
    font-size: 0.95rem;
}

/* ============================================
   RESPONSIVE BREAKPOINTS - PARTNER BRANDING
   ============================================ */

@media (max-width: 768px) {
    /* Single footer responsive */
    .partner-footer-gradient {
        padding: 2.5rem 0 4rem 0;
    }

    .partner-footer-title {
        font-size: 1.4rem;
        text-align: center;
    }

    .partner-footer-text,
    .partner-footer-text p {
        text-align: center;
        font-size: 0.95rem;
    }

    .partner-footer-logo-large {
        max-height: 70px;
        max-width: 220px;
    }

    .partner-footer-wave {
        height: 60px;
    }

    .partner-info-btn {
        margin-bottom: 1.5rem;
    }

    /* Multi-footer responsive */
    .partner-footer-multi-inner {
        padding: 2rem 0 1.5rem;
    }

    .partner-footer-multi-logos {
        gap: 1.25rem;
    }

    .partner-footer-multi-logo img {
        max-height: 42px;
        max-width: 120px;
    }

    .partner-footer-multi-heading {
        font-size: 0.75rem;
    }

    /* Prominent single responsive */
    .partner-prominent-badge {
        padding: 1.25rem;
    }

    .partner-prominent-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .partner-prominent-copy {
        font-size: 14px;
    }

    .partner-prominent-logo {
        max-height: 32px;
        max-width: 140px;
    }

    /* Prominent multi responsive */
    .partner-prominent-multi {
        flex-direction: column;
        gap: 0.75rem;
    }

    .partner-prominent-multi-label {
        margin-right: 0;
    }

    .partner-prominent-multi-logos {
        justify-content: center;
        gap: 1.25rem;
    }

    .partner-prominent-multi-item img {
        max-height: 40px;
        max-width: 120px;
    }

    /* Info page responsive */
    .partner-info-logo {
        max-height: 60px;
        max-width: 200px;
    }

    .partner-info-section h2 {
        font-size: 1.5rem;
    }

    .benefit-card {
        margin-bottom: 1rem;
    }

    .examples-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    /* Single footer 480px */
    .partner-footer-gradient {
        padding: 2rem 0 3.5rem 0;
    }

    .partner-footer-title {
        font-size: 1.2rem;
    }

    .partner-footer-text p {
        font-size: 0.9rem;
    }

    .partner-footer-logo-large {
        max-height: 60px;
        max-width: 180px;
    }

    .partner-footer-wave {
        height: 50px;
    }

    .partner-footer-logo-link {
        padding: 1rem;
    }

    /* Multi-footer 480px */
    .partner-footer-multi-logos {
        gap: 1rem;
    }

    .partner-footer-multi-logo img {
        max-height: 36px;
        max-width: 100px;
        border-radius: 8px;
    }

    .partner-footer-verified {
        width: 20px;
        height: 20px;
        bottom: -4px;
        right: -5px;
    }

    .partner-footer-verified i {
        font-size: 9px;
    }

    .partner-footer-multi-rule {
        max-width: 50px;
    }

    .partner-footer-multi-header {
        gap: 0.75rem;
    }

    /* Prominent single 480px */
    .partner-prominent-badge {
        padding: 1rem;
        margin: 1.5rem 0;
    }

    .partner-prominent-copy {
        font-size: 13px;
    }

    .partner-prominent-logo {
        max-height: 28px;
        max-width: 120px;
    }

    /* Prominent multi 480px */
    .partner-prominent-multi-item img {
        max-height: 34px;
        max-width: 100px;
        border-radius: 6px;
    }

    .partner-prominent-verified {
        width: 15px;
        height: 15px;
        bottom: -3px;
        right: -5px;
    }

    .partner-prominent-verified i {
        font-size: 7px;
    }
}

/* ==========================================================================
   Default Event Header Placeholder
   ========================================================================== */

/* Rich branded placeholder for event banners when no image is set */
.event-header-placeholder {
    position: relative;
    background:
        /* Dot grid pattern for texture */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='white' fill-opacity='.15'/%3E%3C/svg%3E")
            0 0 / 20px 20px repeat,
        /* Decorative circle arcs in corners for depth */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Ccircle cx='350' cy='50' r='120' fill='none' stroke='white' stroke-width='1.5' opacity='.1'/%3E%3Ccircle cx='350' cy='50' r='80' fill='none' stroke='white' stroke-width='1.5' opacity='.07'/%3E%3Ccircle cx='50' cy='350' r='90' fill='none' stroke='white' stroke-width='1.5' opacity='.08'/%3E%3C/svg%3E")
            0 0 / 100% 100% no-repeat,
        /* Rich gradient — strong primary color instead of washed-out pastels */
            linear-gradient(
                135deg,
                color-mix(in srgb, var(--ordolio-default-primary), white 25%) 0%,
                var(--ordolio-default-primary) 55%,
                color-mix(in srgb, var(--ordolio-default-primary), black 10%) 100%
            );
}

/* Calendar icon overlay for placeholder banners */
.event-header-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 40%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Crect x='8' y='18' width='64' height='54' rx='8' fill='none' stroke='white' stroke-width='2.5'/%3E%3Cpath d='M 8 30 L 72 30' stroke='white' stroke-width='2'/%3E%3Crect x='24' y='10' width='4' height='14' rx='2' fill='white'/%3E%3Crect x='52' y='10' width='4' height='14' rx='2' fill='white'/%3E%3Crect x='20' y='36' width='10' height='8' rx='2' fill='white' opacity='.7'/%3E%3Crect x='35' y='36' width='10' height='8' rx='2' fill='white' opacity='.5'/%3E%3Crect x='50' y='36' width='10' height='8' rx='2' fill='white' opacity='.35'/%3E%3Crect x='20' y='50' width='10' height='8' rx='2' fill='white' opacity='.5'/%3E%3Crect x='35' y='50' width='10' height='8' rx='2' fill='white' opacity='.35'/%3E%3Crect x='50' y='50' width='10' height='8' rx='2' fill='white' opacity='.2'/%3E%3C/svg%3E")
        center center / 90px 90px no-repeat;
    opacity: 0.2;
    pointer-events: none;
}

/* ==========================================================================
   Scribehow Guide Component
   ========================================================================== */

.scribehow-guide-container {
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.scribehow-guide-content.hidden {
    display: none;
}

.scribehow-guide-chevron {
    transition: transform 0.2s ease;
}

.scribehow-guide-chevron.rotate-180 {
    transform: rotate(180deg);
}

.scribehow-guide-iframe-wrapper {
    overflow: hidden;
}

.scribehow-guide-iframe {
    display: block;
    max-width: 100%;
}

/* ==========================================================================
   Tawk.to Chat Widget - DISABLED
   Hide Tawk elements since we're using Crisp instead
   ========================================================================== */
iframe[src*="tawk.to"],
#tawk-container,
.tawk-min-container,
.tawk-button,
.tawk-chat-panel {
    display: none !important;
    visibility: hidden !important;
}

/* ==========================================================================
   Switch Toggle Component
   A pill-shaped toggle for binary or multi-option selections
   Usage: <div class="switch-toggle"><button class="switch-option active">A</button><button class="switch-option">B</button></div>
   ========================================================================== */

.switch-toggle {
    display: inline-flex;
    background: #f1f3f7;
    border-radius: 8px;
    padding: 3px;
    position: relative;
    gap: 0;
}

.switch-toggle .switch-option {
    position: relative;
    z-index: 1;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: #6c7293;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 6px;
    transition:
        color 0.2s ease,
        background 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.switch-toggle .switch-option:hover:not(.active) {
    color: #3d4465;
}

.switch-toggle .switch-option.active {
    color: #fff;
    background: var(--ordolio-default-primary, #5867dd);
    box-shadow: 0 2px 4px rgba(88, 103, 221, 0.3);
}

.switch-toggle .switch-option i {
    font-size: 14px;
}

/* Icon-only variant */
.switch-toggle.switch-toggle--icons-only .switch-option {
    padding: 8px 10px;
}

.switch-toggle.switch-toggle--icons-only .switch-option i {
    font-size: 15px;
}

/* ==========================================================================
   Modal Tabs Component
   Topnav-style tabs for use within modals (create/edit forms with multiple sections)
   Usage: See styling documentation for full HTML structure
   ========================================================================== */

.modal-tabs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0 0 -1px 0; /* Negative margin to overlap border with content */
    list-style: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 15%, #ebedf2);
}

.modal-tabs .tab-item {
    flex: 1;
    margin: 0;
}

.modal-tabs .tab-link {
    display: block;
    text-align: center;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--ordolio-default-primary, #5867dd) !important;
    opacity: 0.7;
    background-color: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 6%, white) !important;
    border: 1px solid color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 15%, #ebedf2) !important;
    border-bottom: 2px solid transparent !important;
    margin-right: -1px; /* Overlap borders between tabs */
    margin-bottom: -1px; /* Overlap with container border */
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
    outline: none;
}

.modal-tabs .tab-link:focus-visible {
    outline: 2px solid var(--ordolio-default-primary, #5867dd);
    outline-offset: -2px;
}

.modal-tabs .tab-item:first-child .tab-link {
    border-top-left-radius: 4px;
}

.modal-tabs .tab-item:last-child .tab-link {
    border-top-right-radius: 4px;
    margin-right: 0;
}

.modal-tabs .tab-link:hover:not(.active) {
    opacity: 0.85;
    background-color: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 10%, white) !important;
}

/* Non-active tabs */
.modal-tabs .tab-link:not(.active) {
    border-bottom-color: transparent !important;
}

/* Active tab */
.modal-tabs .tab-link.active {
    color: var(--ordolio-default-primary, #5867dd) !important;
    opacity: 1;
    background-color: #fff !important;
    border-bottom-color: var(--ordolio-default-primary, #5867dd) !important;
    border-left-color: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 20%, #ebedf2) !important;
    border-right-color: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 20%, #ebedf2) !important;
    border-top-color: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 20%, #ebedf2) !important;
}

/* Tab content container - connects visually with tabs */
.modal-tab-content {
    background-color: #fff;
    border: 1px solid color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 15%, #ebedf2);
    border-top: none;
    border-radius: 0 0 4px 4px;
    padding: 1.25rem;
}

/* Filter dropdown buttons - subtle border for visibility on light backgrounds */
.filter-dropdown-btn {
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.filter-dropdown-btn:hover {
    border-color: #d0d0d0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Reusable accordion component (.ov-accordion) */
/* Override Bootstrap's joined-card accordion defaults */
.ov-accordion.accordion > .card,
.ov-accordion.accordion > .card:first-of-type,
.ov-accordion.accordion > .card:last-of-type,
.ov-accordion.accordion > .card:not(:first-of-type):not(:last-of-type) {
    border: 1px solid #dfe3e8;
    border-radius: 0 !important;
    margin-bottom: 0;
    border-bottom: none;
}

.ov-accordion.accordion > .card:first-of-type {
    border-top-left-radius: 10px !important;
    border-top-right-radius: 10px !important;
}

.ov-accordion.accordion > .card:last-of-type {
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-bottom: 1px solid #dfe3e8;
}

.ov-accordion .card {
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition:
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.ov-accordion .card:hover {
    border-color: #c8cdd4;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}

.ov-accordion .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #fff;
    border-bottom: none;
    padding: 16px 22px;
    transition: background-color 0.15s ease;
}

.ov-accordion .card-header:hover {
    background: #f5f7fa;
}

.ov-accordion .card-header .ov-accordion-title {
    font-weight: 600;
    font-size: 14px;
    color: #2d3239;
}

.ov-accordion .card-header .ov-accordion-chevron {
    font-size: 18px;
    color: #9ca3af;
    transition:
        transform 0.25s ease,
        color 0.2s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.ov-accordion .card-header[aria-expanded="true"] {
    background: #f5f7fa;
    border-bottom: 1px solid #e5e8ed;
}

.ov-accordion .card-header[aria-expanded="true"] .ov-accordion-title {
    color: var(--ordolio-default-primary, #5d78ff);
}

.ov-accordion .card-header[aria-expanded="true"] .ov-accordion-chevron {
    transform: rotate(180deg);
    color: var(--ordolio-default-primary, #5d78ff);
}

.ov-accordion .card-body {
    padding: 22px 24px;
}

.ov-accordion .card-body .form-group:last-child {
    margin-bottom: 0;
}

/* Email preferences matrix */
.ov-email-matrix {
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    overflow: hidden;
}

.ov-email-matrix table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.ov-email-matrix thead th {
    background: #f5f7fa;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    padding: 12px 16px;
    border-bottom: 1px solid #e2e5ea;
    white-space: nowrap;
}

.ov-email-matrix thead th.ov-email-matrix-cat {
    text-align: center;
    width: 150px;
    padding-left: 24px;
    padding-right: 24px;
}

.ov-email-matrix tbody tr {
    border-bottom: 1px solid #f0f1f3;
    transition: background-color 0.12s ease;
}

.ov-email-matrix tbody tr:last-child {
    border-bottom: none;
}

.ov-email-matrix tbody tr:hover {
    background: #f9fafb;
}

.ov-email-matrix tbody td {
    padding: 14px 16px;
    vertical-align: middle;
}

.ov-email-matrix tbody td.ov-email-matrix-org {
    font-weight: 500;
    color: #2d3239;
    font-size: 14px;
}

.ov-email-matrix tbody td.ov-email-matrix-cell {
    text-align: center;
    padding-left: 24px;
    padding-right: 24px;
}

.ov-email-matrix-current {
    background: #f0f5ff;
}

.ov-email-matrix-current:hover {
    background: #e8eeff !important;
}

/* Custom toggle checkbox for matrix cells */
.ov-email-matrix-toggle {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    margin: 0;
    cursor: pointer;
}

.ov-email-matrix-toggle input[type="checkbox"],
.ov-email-matrix-toggle input.kt-checkbox-input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ov-email-matrix-check {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d1d5db;
    border-radius: 11px;
    transition: background-color 0.2s ease;
}

.ov-email-matrix-check::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.ov-email-matrix-toggle input:checked + .ov-email-matrix-check {
    background: var(--ordolio-default-primary, #5d78ff);
}

.ov-email-matrix-toggle input:checked + .ov-email-matrix-check::after {
    transform: translateX(18px);
}

/* Profile fields badge positioning */
.profile-fields-badge {
    top: -8px;
    right: -8px;
}

.profile-fields-badge__count {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
    padding: 0;
}

/* Bulk actions toolbar styles */
.bulk-actions-toolbar {
    display: none;
}

.bulk-actions-toolbar.is-visible {
    display: block;
}

.text-ordolio-primary {
    color: var(--ordolio-default-primary);
}

.ring-ordolio-primary {
    --tw-ring-color: var(--ordolio-default-primary);
}

/* Event documents – public download list */
.event-document-download {
    transition:
        box-shadow 0.15s ease,
        background-color 0.15s ease;
    color: inherit;
}

.event-document-download:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
    text-decoration: none;
    color: inherit;
}

/* Event documents – admin modal items */
.event-document-item {
    background: #fff;
}

.event-document-item .sortable-handle {
    cursor: grab;
}

.event-document-item .sortable-handle:hover {
    color: var(--ordolio-default-primary) !important;
}

/* Large success icon for modal completion states */
.icon-success-lg {
    font-size: 3rem;
}

/* Small inline color swatch for previewing hex colors */
.color-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    vertical-align: middle;
    border: 1px solid #ccc;
}

/* =============================================================================
   Social Share Pill Component
   ============================================================================= */

.share-pill {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-top: 1.5rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 8%, white) 0%,
        color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 4%, white) 100%
    );
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 15%, transparent);
    box-shadow:
        0 2px 8px color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 10%, transparent),
        0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}

.share-pill:hover {
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 18%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.share-pill__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ordolio-default-primary, #5867dd);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding-right: 0.75rem;
    white-space: nowrap;
}

.share-pill__label i {
    font-size: 0.9rem;
    opacity: 0.85;
}

.share-pill__divider {
    width: 1px;
    height: 24px;
    background: color-mix(in srgb, var(--ordolio-default-primary, #5867dd) 20%, transparent);
    margin-right: 0.25rem;
}

.share-pill__icons {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.share-pill__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    color: var(--kt-gray-600, #7e8299);
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: relative;
}

.share-pill__icon i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
}

.share-pill__icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.share-pill__icon:hover::before {
    opacity: 0.12;
    transform: scale(1);
}

.share-pill__icon:hover i {
    transform: scale(1.1);
}

.share-pill__icon:active::before {
    opacity: 0.18;
    transform: scale(0.95);
}

/* Platform-specific hover colors */
.share-pill__icon--facebook:hover {
    color: #1877f2;
}

.share-pill__icon--linkedin:hover {
    color: #0a66c2;
}

.share-pill__icon--x:hover {
    color: #000000;
}

.share-pill__icon--whatsapp:hover {
    color: #25d366;
}

.share-pill__icon--instagram:hover {
    color: #e4405f;
}

.share-pill__icon--copy:hover {
    color: var(--ordolio-default-primary, #5867dd);
}

/* Copy success state */
.share-pill__icon--copied {
    color: #10b981 !important;
}

.share-pill__icon--copied::before {
    opacity: 0.15 !important;
    transform: scale(1) !important;
    background: #10b981 !important;
}

/* Mobile responsive styles */
@media (max-width: 576px) {
    .share-pill {
        padding: 0.4rem 0.4rem 0.4rem 0.85rem;
        gap: 0;
    }

    .share-pill__label {
        font-size: 0.8rem;
        padding-right: 0.6rem;
    }

    .share-pill__label i {
        font-size: 0.85rem;
    }

    .share-pill__divider {
        height: 20px;
        margin-right: 0.15rem;
    }

    .share-pill__icon {
        width: 36px;
        height: 36px;
    }

    .share-pill__icon i {
        font-size: 1rem;
    }

    .share-pill__icons {
        gap: 0.15rem;
    }
}

/* Extra small screens - stack label above icons */
@media (max-width: 380px) {
    .share-pill {
        flex-direction: column;
        padding: 0.75rem;
        border-radius: 16px;
        gap: 0.5rem;
    }

    .share-pill__label {
        padding-right: 0;
    }

    .share-pill__divider {
        display: none;
    }

    .share-pill__icons {
        gap: 0.35rem;
    }
}

/* Large icon utility for status pages (success, error, etc.) */
.status-icon-lg {
    font-size: 64px;
}

/* Small font badge for login indicators */
.badge-login {
    font-size: 10px;
}

/* Hidden state for dropdown menus */
.dropdown-hidden {
    display: none;
}

/* Totals separator line for summary rows in tables/modals */
.totals-separator {
    border-top: 2px solid #dee2e6;
}

/* Accessibility: visible focus indicator for keyboard users */
:focus-visible {
    outline: 2px solid var(--ordolio-default-primary, #5867dd);
    outline-offset: 2px;
}

/* Stripe connection warning banner on admin hub */
.stripe-connect-banner {
    background-color: #fffbeb;
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 20px 24px;
}

.stripe-connect-banner__content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stripe-connect-banner__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #fef3c7;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #d97706;
}

.stripe-connect-banner__text {
    flex: 1;
    min-width: 0;
}

.stripe-connect-banner__text h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
}

.stripe-connect-banner__text p {
    margin: 0;
    font-size: 0.875rem;
    color: #a16207;
    line-height: 1.4;
}

.stripe-connect-banner .btn-warning {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .stripe-connect-banner__content {
        flex-wrap: wrap;
    }

    .stripe-connect-banner .btn-warning {
        width: 100%;
        text-align: center;
    }
}

/* Skip link: visible only when focused */
.sr-only-focusable:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 8px 16px;
    background: var(--ordolio-default-primary, #5867dd);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
}

/* ── Ordolio editorial news section (Van Ordolio layer) ── */
.ordolio-news-section {
    background: #f0f4ff;
    border-left: 3px solid var(--ordolio-default-primary, #5867dd);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.ordolio-news-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ordolio-default-primary, #5867dd);
    margin-bottom: 12px;
}

.ordolio-news-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ordolio-news-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-radius: 6px;
    padding: 10px 14px;
}

.ordolio-news-icon {
    font-size: 1.2rem;
    color: var(--ordolio-default-primary, #5867dd);
    flex-shrink: 0;
}

.ordolio-news-content {
    flex: 1;
    min-width: 0;
}

.ordolio-news-item-title {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ordolio-news-item-desc {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ordolio-news-cta {
    flex-shrink: 0;
}

/* Snackbar link — shown inside colored toast notifications */
.snackbar-link {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: underline;
    font-weight: 600;
    font-size: 0.875rem;
}

.snackbar-link:hover {
    color: #fff;
    text-decoration: none;
}