table.table.config {
    margin-top: 3rem;
}

#page2 .actionBar {
    display: unset !important;
}

.nav.nav-tabs.secondary-tabs>li a[data-toggle="tab"] {
    outline: none;
}

@media (max-width: 767px) {
    .ticketTypes .ticketTypeSumSoldOut .badge.badge-important {
        bottom: 7em !important;
    }

    tr.ticketTypes.typeNotActive td.td-count {
        display: none !important;
    }

    tr.ticketTypes.typeNotActive td.ticketTypeSumSoldOut {
        border-top-width: 0;
    }
}

.cover .cover-content h2 {
    line-height: 1.4em !important;
}

.cover {
    margin-bottom: 0 !important;
}



@media (max-width: 767px) {

    /* 1. Container für den Verlauf-Effekt */
    .nav-tabs-scroll-container {
        position: relative;
        width: 100%;
        overflow: hidden;
        margin-bottom: 20px;
    }

    /* 2. Die Tab-Leiste selbst */
    .nav-tabs[data-name="tab-main"] {
        display: flex !important;
        flex-wrap: nowrap !important;
        /* Verhindert das Umbrechen */
        overflow-x: auto !important;
        /* Aktiviert das seitliche Scrollen */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* Sanftes Scrollen auf iOS */
        border-bottom: 1px solid #ddd;
        padding-bottom: 2px;
    }

    /* 3. Einzelne Tabs */
    .nav-tabs[data-name="tab-main"] li {
        flex: 0 0 auto;
        /* Verhindert, dass die Tabs gequetscht werden */
        display: inline-block;
    }

    /* 4. Der Farbverlauf rechts */
    .nav-tabs-scroll-container::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        /* Breite des Verlaufs */
        height: 100%;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        pointer-events: none;
        /* Klicks gehen durch den Verlauf auf die Tabs */
        z-index: 2;
    }

    /* Versteckt die unschöne Scrollbar unten */
    .nav-tabs[data-name="tab-main"]::-webkit-scrollbar {
        display: none;
    }

}

.material-symbols-rounded {
    display: none;
}

body.fonts-loaded .material-symbols-rounded {
  display: block;
}

.wrapper:has(.overview-container.view-table) .geo-distance-range {
    &::before {
        content: unset;
    }
    @media screen and (max-width: 767px) {
        & > td {
            padding-left: unset !important;

            &::after {
                width: 100% !important;
            }
        }
    }
}

#eventoverview {
    & .overview-switch {
        width: 100%;
        @media screen and (min-width: 768px) {
            width: unset;
        }
    }
    & #btn-geo-locate {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-right: auto;

        @media screen and (min-width: 768px) {
            margin-right: unset;
        }

        &[data-state="idle"] {
            background-color: rgb(199, 199, 199) !important;
        }
        &[data-state="loading"] {
            background-color: rgb(227, 227, 145);
        }
        &[data-state="success"] {
            background-color: hsl(120, 51%, 30%);
            color: white !important;
        }
        &[data-state="error"] {
            background-color: rgb(198, 41, 41);
            color: white !important;
        }
    }
    & tr.geo-distance-range {
        color: #02265d;
        font-weight: bold;

        & > td {
            --space: 2rem;
            padding: var(--space);
            position: relative;

            @media screen and (min-width: 768px) {
                padding: var(--space) 0;
            }

            &::after {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                width: 90%;
                content: "";
                display: block;
                height: 1px;
                background-color: #02265d;
                bottom: calc(var(--space) / 2);

                @media screen and (min-width: 768px) {
                    width: 100%;
                }
            }
        }
    }
    & td.row {
        padding-bottom: 1rem;
    }
}

input[type="search"].form-control.input-sm {
    display: none;
}