@charset "utf-8";
/* TABS */
.tab-row {
    margin-left:-20px; 
    margin-right:-20px;
    width:auto !important;
    margin-bottom:30px;
    overflow:visible !important;
}

.svg > g > g:last-child { pointer-events: none }


.tab-container {
    background-color:#fff;
    padding-bottom:0px !important;
}

/* LOGIN */
.checkbox label {
    padding-left:0px !important;
}

/* DASHBOARD: NÄCHSTES SPIEL WIDGET */
.nextgame {
    margin-top:-5px;
    margin-bottom:20px;
}

.box-spieler-next-game {
    margin-bottom:-20px;
    clear:both;
}

.bild-spieler-next-game {
    position:relative;
    height:50px;
    width:50px;
    margin-right:20px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.bild-spieler-next-game:hover, .bild-spieler-next-game.animate {
    z-index:1;
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -o-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25)
}

.zeitspiel {
    margin-top:40px;
    clear:both;
}

.zeitspiel.col-sm-3 {
    text-align:right;
}

.zeitspiel.col-sm-9 {
    float:left;
}

/* DASHBOARD: STATISTIK WIDGET */
@media(max-width:360px) {
    /* ORT UND ZEIT NÄCHSTES SPIEL */
    .zeitraum {
        font-size: 13px;
        line-height: 19px;
    }
}

@media(max-width:340px) {
    /* ORT UND ZEIT NÄCHSTES SPIEL */
    .zeitraum {
        font-size:11px;
        line-height: 19px;
    }
}

@media (max-width: 767px) {
    .left {
        top: 0px !important;
    }
    .header.rows{
        width: 100%;
        margin-left: -40px;
    }
}

.statistik {
    height:250px;
}/*Fix flickering des Donut Charts auf dem Dashboard*/
svg > g:last-child > g:last-child { pointer-events: none }
div.google-visualization-tooltip { pointer-events: none }

.statistik-div {
    display: inline-block; 
    margin-bottom: 0; 
    vertical-align: middle;
}

.form-statistik {
    margin-top:-22px;
}

.legende-statistik {
    margin-top:-18px;
    margin-left:35px;
}

.legende-statistik.klein {
    margin-top:10px;	
    margin-left:0px;
}

.block {
    height:15px;
    width:15px;
    float:left;
}

.zweiterblock {
    margin-left:40px;
    float:left;
}


.stunden {
    background-color:#3366cc;
}

.arbeit {
/*    background-color:#109618;*/
    background-color:#343a40;
}

.legend-text {
    margin-left:6px;
    line-height:15px;
    float:left;
}

.datum-statistik {
    height:22px; 
    width:150px !important;
    padding-top:5px;
    padding-bottom:5px;
}

.statistic-chart {
    padding-top:22px; 
    padding-bottom:0px;
}

#statistik_spiel.klein, #statistik_arbeit.klein {
    margin-top:25px;
}

.stunden.klein, .arbeit.klein {
    float:left;
}

.zweiterblock.klein {
    float:right;
}

@media(max-width:465px) {
    /* STATISTIK BUTTONS */
    .datum-statistik {
        width: 100% !important;
    }
    .btn-statistik {
        width: 100%;
    }
    .statistik-div {
        display: block; 
        margin-bottom: 5px; 
        vertical-align: middle;
    }
}


/* DASHBOARD: WIDGETS ANZAHL AN GASTSTUNDEN UND ARBEITSSTUNDEN */
#widgetgaststunden .icon-box.klein, #widgetarbeitsstunden .icon-box.klein {
    text-align:center;
    width:100%;
    display:block;
}

#widgetgaststunden .text-box.klein, #widgetarbeitsstunden .text-box.klein {
    text-align:center;
}

.widget-anzahl.klein {
    margin-top:60px !important;
}
@media(max-width:480px) {
    /* STATISTIK WIDGETS ZEITRAUM */
    .widget-anzahl {
        margin-top: 60px !important;
    }
}

/* DASHBOARD: WIDGETS MANNSCHAFTEN */
#widget_mannschaften .col-sm-5 {
    width:41.66666666666667%;
    float: left;
}

#widget_mannschaften .col-sm-2 {
    width:16.666666666666664%;
    float: left;
}

/* DASHBOARD: CHAT */
.fragezeichenErklaerung {
    padding:11px;
    min-width:285px;
    background-color: #909090;
    color: white;
}
.fzversion{
    margin: -60px 15px;
}

.badge-notification{
    background-color:#d9534f; 
    color:#fff; 
    padding:4px 8px; 
    font-size:13px; 
    font-weight:bold; 
    border-radius:8px; 
    line-height:1; 
    min-width:20px; 
    text-align:center; 
    box-shadow:2px 2px 5px rgba(0,0,0,0.2); 
    float: right;
    margin-top: -1.5px;
    animation: pulsieren 1s ease-out;
}

.badge-notification-tab{
    margin-top: 0px !important;
    margin-left: 5px;
}

@keyframes pulsieren {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.85;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.chatname {
    text-align: left;
    color: #909090;
    font-size: 11px;
    font-style: italic;
    margin-bottom:5px;
}

.chattext {
    white-space: pre-line;
}


/* DASHBOARD: STATISTIK PLATZAUSLASTUNG */
@media(max-width:1400px) {
    .form-platzauslastung {
        float:none !important;
        margin-top:25px;
    }

    .form-platzauslastung form {
        float:none !important;
    }

    .form-platzauslastung input, .form-platzauslastung .bootstrap-select {
        width:100% !important;
        margin-bottom:5px !important;
    }

    .form-platzauslastung button, #formveranstaltungerstellenbutton button, #formarbeitsdiensterstellenbutton button {
        width:100% !important;
        margin-left:0px !important;
    }
}

/* DASHBOARD: STATISTIK ARBEIT SPIEL */
@media(max-width:1023px) {
    .form-statistik {
        float:none !important;
    }
    
    .form-statistik .statistik-div {
        display:block;
    }

    .form-statistik form {
        float:none !important;
    }

    .form-statistik input {
        width:100% !important;
        margin-bottom:5px !important;
        height:auto;
        padding:6px 12px;
    }

    .form-statistik button {
        width:100% !important;
        margin-left:0px !important;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
    }
}



/* PLATZBELEGUNG: FORM DATUM */
#datumsteuerung {
    width:280px;
    margin-bottom:-15px;
}

#datumsteuerungLogin {
    width:760px;
    margin-bottom:-15px;
}

.datumsteuerung {
    width:300px;
}

.form-platzbelegung, .buttons-platzbelegung {
    margin-top:-65px;
    z-index:0 !important;
}

.buttons-platzbelegung {
    padding-top: 2px;
}

.datum-platzbelegung,.datum-serie-bis, .anzahl-platzbelegung.login {
    width:130px !important;
    padding-top:5px;
    padding-bottom:5px;
}

.form-platzbelegung-div {
    display: inline-block; 
    margin-bottom: 0; 
    vertical-align: middle;
}

.form-platzbelegung.login.datum {
    margin-left:470px;
}

.anzahl-platzbelegung.login, .btn-platzbelegung.login ,.datum-serie-bis , .datum-platzbelegung.login, .buttons-platzbelegung.login, .btn-platzbelegung.login {
    height:30px;
}
.btn-tooltip{
    height:30px; 
    padding-top:0px;
    autoHide: true;
    padding-bottom:0px;
}

.tooltip {
    z-index:1000001;
}

@media(max-width:1300px) {
    #datumsteuerungLogin {
        width:initial;
        text-align:center;
        float:none !important;
    }

    .form-platzbelegung.login {
        width:100%;
        margin-top:0px;
        margin-bottom:20px;
    }
    
    .form-platzbelegung.login.datum {
        margin-left:0px;
    }

    .datum-platzbelegung.login, .anzahl-platzbelegung.login {
        width: 100% !important;
    }
    
    .anzahl-platzbelegung.login {
        margin-top:3px;
    }

    .btn-platzbelegung.login {
        width: 100%;
    }

    .buttons-platzbelegung.login {
        margin-top:20px;
        margin-bottom:30px;
        float:none !important;
    }

    .form-platzbelegung-div.login {
        display: block; 
        margin-bottom: 5px; 
        vertical-align: middle;
    }
}

@media(max-width:920px) {
    /* FORMULAR IN NEUER ZEILE */
    .preisauswahlLarge {
        display:none;
    }
    
    .preisauswahlSmall {
        display:block !important;
    }
    
    .datumsteuerung {
        width:initial;
        text-align:center;
        float:none !important;
    }

    #datumsteuerung, #datumsteuerungLogin {
        width:initial;
        text-align:center;
        float:none !important;
    }

    .form-platzbelegung {
        width:100%;
        margin-top:0px;
        margin-bottom:20px;
    }

    .datum-platzbelegung,.datum-serie-bis , .anzahl-platzbelegung {
        width: 100% !important;
    }
    
    .anzahl-platzbelegung {
        margin-top:3px;
    }

    .btn-platzbelegung {
        width: 100%;
    }

    .buttons-platzbelegung {
        margin-top:20px;
        margin-bottom:30px;
        float:none !important;
    }

    .form-platzbelegung-div {
        display: block; 
        margin-bottom: 5px; 
        vertical-align: middle;
    }
    
    .mobile-down-left-button{
        margin-top: 5px;
        margin-left: 0px !important;
    }
    
    .filter-guthabenprotokoll.pull-left{
        width:  100%;
        margin-bottom: 5px;
    }
}

/* PLATZBELEGUNG: TABELLE */
.platzbelegung-scroll {
    /*padding-left:90px;*/
    /*overflow-x:auto;*/
}

.sticky-table {
    border-collapse:separate; 
    border-spacing:0;
}

.sticky-table thead tr{
    position: sticky;
    position: -webkit-sticky;
    z-index: 500;
    top: -15px;
    background: #e1e1e1;
}

@media(max-width:767px){
    .sticky-table thead tr{
        top: -5px;
    }
}

.sticky-table td, .sticky-table th {
    margin:0;
    border-top:1px solid #dddddd !important; 
    border-right:1px solid #dddddd !important; 
}

.stickyTableHead th {
    position: sticky !important;
    top: 0  !important;
    background-color: #fff;
    z-index: 10;
}

/* Abgerundete Ecken für die gesamte Tabelle */
.table thead th:first-child {
    border-top-left-radius: 8px;
}
.table thead th:last-child {
    border-top-right-radius: 8px;
}
.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}
.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}

.uhrzeittabelle {
    
    text-align: center;
    
    
    border-left:1px solid #dddddd !important; 
    z-index:1;
    
}

@media(min-width:801px){
    .belegungszeile{
        height:38px;
    }
    .mobile{
        display:none;
    }
    .uhrzeittabelle {
        width:94px;
        height: 38px;
    }
}


@media(max-width:800px){
    .belegungszeile{
        height:50px;
        font-size: 0.8em;
    }
    
    .platzbelegung-scroll {
        /*padding-left:60px;*/
    }
    
    .uhrzeittabelle {
        width:30px;
        height: 50px;
        padding: 0 !important;
        vertical-align: middle !important;
    }
    .uhrzeittabelle.header{
        font-size: 0.8em;
    }
    
    
    .platzhead{
        padding: 0 !important;
        font-size: 0.8em;
    }
}

@media(max-width:767px) {
    .desktop{
        display: none;
    }
    
    .mobile{
        display: block;
    } 
}

@media(min-width:768px) {
    .desktop{
        display: block;
    }
    
    .mobile{
        display: none;
    } 
}

.uhrzeittabelle.header {
    height:38px; 
    border-top:1px solid #dddddd !important; 
    border-bottom:1px solid #dddddd !important; 
}

.uhrzeittabelle.woche {
    height:auto;
    border-top:1px solid #dddddd !important; 
}

.uhrzeittabelle.last, .platzbelegung-feld.last {
    border-bottom:1px solid #dddddd !important; 
}

.platzbelegung-feld {
    position:relative;
    height:38px;
}

.platzbelegung-feld-td {
    position:relative;
    height:38px !important;
    min-width: 150px;
    padding: 2px !important;
}

.platzbelegung-feld.preise,
.platzbelegung-feld.zeitbeschraenkung {
    position: relative;
    border-radius: 8px; /* Abgerundete Ecken */
    backdrop-filter: blur(2px); /* Glas-Effekt */
    <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    height: 100%;
    min-height: 38px; 
    padding: 7px 0px 0px 20px;
}

.platzbelegung-feld.preise:hover,
.platzbelegung-feld.zeitbeschraenkung :hover {
    transform: translateY(-1px); /* Hebt die Zelle */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.platzbelegung-feld.preise::before,
.platzbelegung-feld.zeitbeschraenkung::before {
    content: "";
    position: absolute;
    top: 10px; /* Platz oben */
    bottom: 10px; /* Platz unten */
    left: 5px; /* Streifen nach rechts versetzen */
    width: 6px; /* Breite des Streifens */
    border-radius: 4px; /* Abgerundete Ecken */
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
    transition: background-color 0.3s ease; /* Nur Farbe ändern */
    backdrop-filter: blur(5px); /* Glas-Effekt */
}

.platzbelegung-feld.preise:hover::before,
.platzbelegung-feld.zeitbeschraenkung:hover::before {
    box-shadow: none; /* Kein Schatten beim Hover */
    backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
}

.time-preise {
    display: none; /* Element standardmäßig ausblenden */
    z-index: 10;
}

.platzbelegung-feld.preise:hover .time-preise {
    display: block; /* Bei Hover anzeigen */
}

.platzbelegung-feld .time-preise:hover {
    box-shadow: none;
    transform: translateY(0);
}

.time-zb {
    display: none; /* Element standardmäßig ausblenden */
    z-index: 10;
}

.platzbelegung-feld.zeitbeschraenkung:hover .time-zb {
    display: block; /* Bei Hover anzeigen */
}

.platzbelegung-feld .time-zb:hover {
    box-shadow: none;
    transform: translateY(0);
}

.uhrzeittabelle.last, .platzbelegung-feld-td.last {
    border-bottom:1px solid #dddddd !important; 
}

.textausgabe-wrapper {
    display: flex; /* Aktiviert Flexbox */
}

.hoverPreis{
    display: block;
    height: 100%;
}

.pointer {
    cursor:pointer;
}

.spieler {
    display:none;
}


.kompletterinhaltmodal {
    position:relative;
    padding-left:0px !important; 
    padding-right:0px !important;
}

.inhalt {
    padding:20px;
    padding-bottom:0px;
}
.inhalt-module {
    padding:10px 20px 10px 20px;
    
    
}

.navdown {
    display:none;
    background-color:#fafafa;
}

.tabsdetail, .tabsdetail_det {
    display:none;
    width:100%;
    right:0;
    float:right;
}

.tabsinhalt {
    white-space:nowrap;
}

.buttons-form-top {
    margin-top:20px;
    overflow:hidden;
    height:34px;
    padding-right: 1px;
}

.buttons-form-top-serie {
    margin-top:20px;
    overflow:hidden;
    height:75px;
    padding-right: 1px;
}

.buttons-form {
    overflow-x:auto;
    padding-bottom:15px;
    text-align:right;
    white-space:nowrap;
    padding-top: 1px;
    padding-right: 1px;
}

.buttons-form-module {
    overflow-x:auto;
    padding-bottom:15px;
    white-space:nowrap;
}

.buttons-form .btn {
    font-size:13px;
}

.buttons-form button {
    margin-left:2px;
}

.alert-danger, .alert-warning, .alert-info{
    white-space:normal;
}

.ajax-loading {
    width: 100%;
    height: 100%;
    z-index: 11;
    top: 0px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    display: none;
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    box-shadow: none !important;
    text-align: center;
     border-radius: 8px;
}

.ajax-spinner {
    position:relative !important;
    left:0px !important;
    top:35% !important;
    transform: translateY(-35%);
}


.form1 {
    margin-bottom:20px;
}


.box-mitspielerauswahl {
    
    margin-bottom:-11px;
}

.bild-mitspielerauswahl {
    position:relative;
    height:55px;
    width:55px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.bild-mitspielerauswahl:hover, .bild-mitspielerauswahl.animate {
    z-index:2;
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -o-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25)
}

.bild-multiple-login {
    position:relative;
    height:55px;
    width:55px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.bild-multiple-login:hover, .bild-multiple-login.animate {
    z-index:2;
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -o-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25)
}

.select-mitspielerauswahl {
    display:inline;
    margin-left:10px;
    width:63%;
}

.select-multipleAuswahlLogin {
    display:inline;
    margin-left:10px;
    width:63%;
}

.select-time {
    display:inline;
    margin-left:10px;
    width:23%;
}

.zeitauswahl {
    text-align: center;
}

.entfernen-mitspielerauswahl, .hinzufuegen-mitspielerauswahl {
    margin-left:10px;
    cursor:pointer;
}

.entfernen-teilnehmerauswahl, .hinzufuegen-teilnehmerauswahl {
    margin-left:10px;
    cursor:pointer;
}

.textarea-grund-reservierung {
    margin-top:30px;
    display:none;
}

.abo-box {
    margin-top:30px; 
}

/*.row{
    padding-left: 15px;
} */

.select-training {
    width:100%;
}

input::placeholder, textarea::placeholder {
    color: inherit !important; /* Deine Akzentfarbe */
    opacity: 0.75;
}

.input-spiel {
    margin-top:10px;
    padding-left: 16px;
}

.input-training, .input-turnier {
    padding-left: 16px;
}

.legende {
    margin-bottom:5px;
}

/* Wetter (Ecke oben links) */
.wettercontainer {
    position: absolute;
    padding: 8px 8px 4px 8px !important;
    left: 10px;
    top: 7px;
    height: 45px; 
    vertical-align: middle !important;
    z-index: 1;
    box-shadow: 1.5px 0.5px 30px rgba(0,0,0,.2);
    border-radius: 8px;
}

.wettercontainer:hover {
    box-shadow: 0 0 30px rgba(0,0,0,.3);
}



/* MITGLIEDER */
/* HOVER ÜBER EIGENEM BILD */
.profilbild-hover {
    box-shadow:none !important;
    position:absolute; 
    top:15px; 
    width:100px; 
    height:100px; 
    left:50%; 
    text-align:center;
    margin-left:-50px !important;
}

.pencil-edit {
    display:none;
    top: 24px;
    left: 29px;
    position: absolute;
    font-size: 50px;
    color: white;
}

.profilbild-hover:hover {
    background-color:rgba(0, 0, 0, 0.7);
}

.profilbild-hover:hover .pencil-edit {
    display:block;
}


@-webkit-keyframes spin {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@-o-keyframes spin {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(360deg); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Loading animation container */
.loading {
    display:none;
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    box-shadow: none !important;
    top: 0px;
    width: 100px;
    height: 100px;
    left: 50%;
    text-align: center;
    margin-left: -50px !important;
    margin: 15px 0;
    border: 0px;
}

/* Spinning circle (inner circle) */
.loading .maskedCircle, .ajax-loading .maskedCircle {
    width: 55px;
    height: 55px;
    border-radius: 32px;
    border: 6px solid white;
}

/* Spinning circle mask */
.loading .mask, .ajax-loading .mask {  
    width: 32px;
    height: 32px;
    overflow: hidden;
}

/* Spinner */
.loading .spinner, .ajax-loading .spinner {
    position: absolute;
    left: 22px;
    top: 22px;
    width: 55px;
    height: 55px;
    -webkit-animation: spin 1s infinite linear;
    -o-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}


/* UEBERSICHT SPIELE */
.box-spieler-spiele-uebersicht {
    margin-bottom:-20px;
}

.bild-spieler-spiele-uebersicht {
    position:relative;
    height:50px;
    width:50px;
    margin-right:20px;
    -webkit-transition: .3s ease-in-out;
    -moz-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.bild-spieler-spiele-uebersicht:hover, .bild-spieler-spiele-uebersicht.animate {
    z-index:1;
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -o-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25)
}

@media(max-width:440px) {
    .box-spieler-spiele-uebersicht {
        text-align:center;
        margin-bottom:15px;
    }

    .name-spieler-spiele-uebersicht {
        display:block;
    }
}



/* STANDARDEINSTELLUNGEN */
.form-standardeinstellungen {
    z-index:0 !important;
}

.form-standardeinstellungen-div {
    width:100%;
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
}

#standarddaten {
    margin-bottom:20px;
}

.datum-standardeinstellungen {
    height:34px;
}

@media(max-width:1180px) {
    .standard-header-left, .standard-header-right {
        float:none !important;
    }

    .standard-header-right {
        margin-top:25px;
    }

    .standard-input-right {
        width:100% !important;
    }

    .standard-button-right {
        width:100% !important;
        margin-top:5px;
    }
    
    .standard-header-right input {
        margin-top:5px;
    }
}



/* PREISE FESTELGEN */
.checkwochentage {
    padding-left:0px !important;
}

.col-sm-siebtel {
    float:left;
    width:14.28%;
}


.box-mitgliedsartauswahl {
    margin-top:20px;
    padding-left:10px;
}

.select-mitgliedsartauswahl {
    margin-top:-2px;
}

.input-mitgliedsartauswahl {
    width:40%;
    display:inline;
}

.entfernen-mitgliedsartauswahl, .hinzufuegen-mitgliedsartauswahl {
    margin-left:10px;
    cursor:pointer;
}

@media(max-width:1010px) {
    .input-preise-header {
        width:100% !important;
        margin-left:0px !important;
        margin-bottom:5px;
    }

    .preise-header-float {
        float:none !important;
    }

    .preise-header-float-right {
        float:none !important;
        margin-top:15px;
        width:100% !important;
    }
}

@media(max-width:432px) {
    .button-preisklasse-bearbeiten {
        width:100% !important;
        margin-top:5px;
    }
}

@media(max-width:767px) {
    #formpreisklassenerstellenbutton button, #formstandardpreisbearbeitenbutton button {
        width:100% !important;
        margin-left:0px !important;
    }
}



/* HILFE */
.affix {
    position: fixed !important;
    top:70px;
}

ul.affix {
    position: fixed; 
    top: 50px;
}
ul.affix-top {
    position: static;
}

/* All levels of nav */
.sidebar .nav > li > a {
    display: block;
    color: #999;
    padding: 5px 20px;
}
.sidebar .nav > li > a:hover,
.sidebar .nav > li > a:focus {
    text-decoration: none;
    color: #4C5264;
    background-color: transparent;
}
.sidebar .nav > .active > a,
.sidebar .nav > .active:hover > a,
.sidebar .nav > .active:focus > a {
    font-weight: bold;
    color: #4C5264;
    background-color: transparent;
    border-left: 2px solid #4C5264;
}

/* Nav: second level */
.sidebar .nav .nav {
    display: none;
}
.sidebar .nav > li.active .nav {
    display:block;
}
.sidebar .nav .nav {
    margin-bottom: 8px;
}
.sidebar .nav .nav > li > a {
    padding-top:    3px;
    padding-bottom: 3px;
    padding-left: 30px;
    font-size: 90%;
}



/* ÜBERSICHT */
@media(max-width:807px) {
    #formuebersichtpullleft {
        float:none !important;
    }

    #formuebersichtpullleft input {
        width:100% !important;
        margin-bottom:5px;
    }

    #formuebersichtpullleft select {
        width:100%;
        margin-bottom:5px;
    }

    #formuebersichtpullleft button {
        width:100%;
        margin-left:0px !important;
        margin-top:5px;
    }
}



/* ARBEIT */
@media(max-width:767px) {
    #arbeitsdienstbearbeitenmitgliederbereich select {
        margin-bottom:3px;
    }

    #form-arbeitsdienst-bearbeiten-inhalt button, #form-veranstaltung-bearbeiten-inhalt button {
        margin-bottom:5px;
        width:100%;
    }

    .formarbeitfilternpullright {
        float:none !important;
        margin-top:25px;
    }

    .formarbeitfilternpullright form {
        float:none !important;
    }

    .formarbeitfilternpullright input {
        width:100% !important;
        margin-bottom:5px;
    }

    .formarbeitfilternpullright button, #formveranstaltungerstellenbutton button, #formarbeitsdiensterstellenbutton button {
        width:100% !important;
        margin-left:0px !important;
    }
}



/* MANNSCHAFTEN */
@media(max-width:767px) {
    .selectobenrechts, .selectobenrechts12 {
        float:none !important;
        margin-top:25px !important;
        max-width:100% !important;
    }

    #form-mannschaft-bearbeiten-inhalt button, #form-spiel-bearbeiten-inhalt button, #form-mannschaft-neue-saison button, #form-sonderbuchung-neue-saison button {
        margin-bottom:5px;
        width:100%;
    }

    #formmannschaftenerstellenbuttons button, #formsaisonspielerstellenbutton button, #form-spielaufgabe-bearbeiten-inhalt button {
        width:100% !important;
        margin-left:0px !important;
    }

    #form-spielaufgabe-bearbeiten-inhalt select {
        margin-top:2px;
    }
}


/* MITGLIEDER */
@media(max-width:767px) {
    #formmitgliedererstellenbutton button, #formmitgliederlistehochladenbutton button, #formmitgliederlistehochladenbutton input {
        width:100% !important;
        margin-left:0px !important;
    }
}

@media(max-width:1700px) {
    .mitgliederlistemenu {
        z-index: 99;
    }
    
    @media(min-width:992px) {
        .mitgliederlistemenu {
            width:50% !important;
        }
    }

    #formmitgliederanzeigefiltern input, #formmitgliederanzeigefiltern select, #formmitgliederanzeigefiltern div, #formmitgliederfelderanzeigen input, #formmitgliederfelderanzeigen select, #formmitgliederfelderanzeigen div {
        width:100% !important;
        margin-bottom:5px;
    }

    #formmitgliederanzeigefiltern button, #formmitgliederfelderanzeigen button {
        width:100%;
    }

    #formmitgliederanzeigefiltern .bootstrap-select, #formmitgliederfelderanzeigen .bootstrap-select {
        z-index:0 !important;
    }

    #formmitgliederanzeigefiltern .bootstrap-select.open, #formmitgliederfelderanzeigen .bootstrap-select.open {
        z-index:1 !important;
    }
}



/* STATISTIK */
@media(max-width:767px) {
    #formstatistikspielerauswaehlen {
        float:none !important;
    }

    #formstatistikspielerauswaehlen input {
        margin-top:5px;
    }

    #formstatistikspielerauswaehlen button {
        margin-top:10px;
        margin-left:0px !important;
        width:100%;
    }

    .statistikfilterobenrechts {
        float:none !important;
        margin-top:25px !important;
    }

    .statistikfilterobenrechts form {
        float:none !important;
    }

    .statistikfilterobenrechts select {
        margin-bottom:-15px;
    }

    .statistikfilterobenrechts button {
        width:100%;
        margin-left:0px !important;
        margin-top:20px;
    }
}


/* NACHRICHTEN */
@media(max-width:767px) {
    #inputnachrichtsuchen {
        margin-top:10px;
    }

    #formnachrichtschreibenbuttons button, #formnachrichtschreibenbuttons a {
        width:100%;
        margin-top:5px;
    }
}


/* EINSTELLUNGEN */
@media(max-width:767px) {
    #formmitgliedsartenerstelleneinstellungen button, #formgrundeinstellungenbuttons button, #formneuigkeiteneinstellungenbutton button, #formveranstaltungeneinstellungenbutton button, #formplatzerstelleneinstellungenbutton button, #formpcaufanlageeinstellungenbutton button, #form-werbung-auswahl button, #formbeitragsgruppeerstelleneinstellungen button, #formeinzelbuchungerstelleneinstellungen button, #formsonderbuchungerstelleneinstellungen button {
        width:100%;
    }

    #formemaileinstellungenbutton button, #form-mitgliedsart-bearbeiten-inhalt button, #form-platz-bearbeiten-inhalt button, #form-farben button, #form-farben-design button, form-farben-hintergrund button, #form-beitragsgruppe-bearbeiten-inhalt button, #form-einzelbuchung-bearbeiten-inhalt button, #form-sonderbuchung-bearbeiten-inhalt button {
        width:100%;
        margin-top:5px;
    }
    
    #datum-saisonjahr-von, #datum-abo-zeitraum-von, #registrieren-art, #arbeit-bereich-von, #anzahl-buchungen-pro-tag, .first-settings-box, #select-lichtsteuerung, #licht-vorlauf, #select-heizungssteuerung, #heizung-vorlauf  {
        padding:0px;
        margin-bottom:5px;
    }
    
    #datum-saisonjahr-bis, #datum-abo-zeitraum-bis, #registrieren-mitgliedsart, #arbeit-bereich-bis, #select-zusatzbuchungproTag, .second-settings-box, #select-licht_standard, #licht-nachlauf, #select-heizung_standard, #heizung-nachlauf {
        padding:0px;
    }
}


/* SELECT MIT JAHRESAUSWAHL */
.saisonform {
    width:80px;
    margin-right:5px;
}

.saisonform-getraenke{
    width:80px;
    margin-right:30px;
}

@media(max-width:767px) {
    .saisonform {
        width:100%;
        margin-bottom:5px;
    }
    
    .saisonform-getraenke{
        width:100%;
        margin-right:5px;
    }
    
    .auswahlformsaison, .auswahlformsaison12 {
        max-width:100% !important;
    }
    
    .floatsaisonauswahl {
        float:none !important;
    }
}



/* RECHNUNGSVERWALTUNG: FILTER BEI OFFENEN PLATZRESERVIERUNGEN */
.pull-right.klein {
    float:none !important;
    margin-top:25px;
}

.pull-right.klein form {
    float:none !important;
}

.pull-right.klein input, .pull-right.klein .bootstrap-select {
    width:100% !important;
    margin-bottom:5px !important;
    z-index:1;
}

.pull-right.klein button {
    width:100% !important;
    margin-left:0px !important;
}

.pull-left.klein {
    float:none !important;
    margin-top:25px;
}

.pull-left.klein form {
    float:none !important;
}

.pull-left.klein input, .pull-left.klein .bootstrap-select,  .pull-left.klein select{
    width:100% !important;
    margin-bottom:5px !important;
    z-index:1;
}

.pull-left.klein button {
    width:100% !important;
    margin-left:0px !important;
}

.filter-guthabenprotokoll-form2.klein{
    float: left !important;
    width: 100%;
}

.filter-guthabenprotokoll-form2.klein button{
    margin-top: 0px;
    margin-left: 0px !important;
    width: 100%;
}

.bootstrap-select.open {
    z-index:99999999 !important;
}

/* Disable option in selectpicker (Multiselect-Auswahl) */
.bootstrap-select.btn-group .dropdown-menu li.disabled {
    background-color: #eaeaea;
    font-style: italic;
    margin-left: 8px;
    margin-right: 8px;
    border-radius: 8px;
}

.fadeElem {
    display:none;
    z-index: 10;
}

.fadeElem.active {
    display:block;
    z-index: 10;
}

.footer-link {
    color: #6c757d;
    text-decoration: none;
    margin: 0;
    font-size: 11px;
}

.footer-link:hover {
    color: #343a40;
}

.bullet{
    color: #6c757d;
}

.only-heading{
    margin-top: 20px !important;
}


@media(max-width:1299px) {
    /* ORT UND ZEIT NÄCHSTES SPIEL */
    @media(min-width:768px) {
    /* ORT UND ZEIT NÄCHSTES SPIEL */
        .loginAlternativeHeight{
            height: 90px;
        }
        .loginAlternativeAnzeige{
            margin-top: 90px;
        }
        .mobileLogin{
            display: none;
        }
        .desktopLogin{
            display: block;
        }
        
    }@media(max-width:767px) {
        .loginAlternativeHeight{
            height: 50px;
        }
        .loginAlternativeAnzeige{
            margin-top: -30px;
        }
        .desktopLogin{
            display: none;
        }
        .mobileLogin{
            display: block;
        }
    }
}
@media(min-width:1300px) {
    /* ORT UND ZEIT NÄCHSTES SPIEL */
    .loginAlternativeHeight{
        height: 50px;
    }
    .loginAlternativeAnzeige{
        margin-top: 90px;
    }
    .mobileLogin{
        display: none;
    }
    .desktopLogin{
        display: block;
    }
}

.loginHeight{
    height: 50px;
    margin-left: -15px; 
    margin-right: -15px; 
    background: #343a40;
}

.ranglisten-box{
    position: relative;
    padding: 15px;
    background: #fff;
    color: inherit;
    border-radius: 8px;
    width: fit-content;
    margin: auto;
    min-width: 200px;
    display: inline-block;
    text-align: center;
/*    margin-right: 10px;
    margin-left: 10px;
    padding-top: 16px;*/
    box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 35%);
}

.rangliste-view {
    display: table;
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: auto;
}

.ranglisten-row {
    margin-bottom: 20px;
    margin-left: 0px;
    display:flex; /* added */
    justify-content:center; /* added */
    padding: 0px;
}

.tree ul {
    padding: 0;
    list-style: none;
}

.rangliste-position{
    position: absolute;
    padding: 1px !important;
    right: 15px;
    top: -5px;
    z-index: 1;
    box-shadow: 0 0 30px rgb(0 0 0 / 20%);
    color: white;
    margin-left: 5px;
}

.rangliste-position-inhalt{
    font-size: 15px;
    margin-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #f5f5f5;
    color: #4C5264;
}

/*.draggable-box.over{
  border: 2px dotted #666;
  border-radius: 8px;
  
}*/
.button-box-rangliste{
    background: transparent;
    border-radius: 8px;
    box-shadow: 0 0.5rem 1rem 0 rgb(0 0 0 / 35%);
    padding-top: 10px;
    padding-right: 15px;
    /*padding-bottom: 10px;*/
    padding-left: 10px;
    border: 1px solid transparent;
    width: 100%;
}

.button-box-rangliste:hover{
    border: 1px solid #427fed;
}

.spielergebnis{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 100%;
    text-align: center;
}

.spielergebnis-input{
    width: 40px;
    margin-left: 10px;
    margin-right: 10px;
    display: inline-block;
    margin-top: 10px;
}

.spielergebnis-input::placeholder{
    opacity: 0.4;
}

.rangliste-ansicht-aktion{
    float: right;
/*    background: transparent;
    border-radius: 4px;
    border: solid grey;
    outline: none;*/
}

.mitglied-durchschalten:hover{
    background: rgb(130, 130, 130, 0.4);
}

.mitglied-durchschalten{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}

.mitglied-durchschalten-haken{
    margin-top: 9px;
    color: #8B91A0;
}

.spielergebnis-row{
    display: flex;
    flex-direction: column;
    width:100%;
    justify-content: center;
    margin-top: -5px;
}

@media(max-width:767px) {
    .rangliste-modal-ndf4h{
        margin-top: 50px;
    }
    
    .ergebnis-datum-gespielt-am{
        display: inline-flex;
        margin-top: 35px;
    }
}

.rangliste-modal-ergebnis-datum{
    position: relative;
    display: inline-block;
    margin-left: 10px;
    margin-right: -10px;
    padding-right: 35px;
}

.labelPreis{
    display:none; 
    opacity:0.5; 
    text-align: center; 
}

@media(min-width:801px) {
    .labelPreis{
        padding-top: 10px;
    }
}
@media(max-width:800px) {
    .labelPreis{
        padding-top: 16px;
    }
}

.btn-group-xs > .btn, .btn-xs {
  padding: .2rem .5rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 8px;
}

.label-email-einstellung{
    margin-top: 0px;
    min-height: 30px;
    padding-top: 10px;
    text-align: right;
}

.fragezeichen-email-einstellung{
    margin-top: -4px;
}

.teilnehmer-hinzufuegen{
    margin-top: 10px;
    color: grey;
    cursor: pointer;
    margin-left: 20px;
    margin-bottom: 10px;
}

.teilnehmer-training{
    margin-top: 10px;
    margin-bottom: 20px;
}

.select-teilnehmerauswahl {
    display: inline;
    margin-left: 10px;
    width: 63%;
}

.loginlink{
    color: #428bca; 
    cursor: pointer;
}

.loginlink:hover{
    text-decoration: underline #428bca;
}


.cannotchange .tabs {
    cursor: default;
}

.chat-support{
    border: 1px solid #909090;
    border-radius: 8px;
    margin-bottom: 30px;
    max-height: 500px;
    overflow-y: auto;
}
form.input-chat{margin-top: 20px;}
.chat-support .media-list{margin: 0;}
.chat-support .media-list .media{border-bottom: none;}
.chat-support .media-list .media .media-object{
    width: 50px;
}
.chat-support .media-list .media .media-body{
    background: #f7f7f7;
    border-radius: 3px;
    padding: 10px;
    color: #677179;
    border-radius: 8px;
}
.chat-support .media-list .media .media-body p.time{
    text-align: right;
    color: #909090;
    font-size: 11px;
    font-style: italic;
}
.chat-support .media-list .media .media-body.success{background: #EDFFED;}
.chat-support .media-list .media .media-body.warning{background: #FFFCE0;}
.chat-support .media-list .media .media-body.danger{background: #FFE8E8;}
.chat-support .media-list .media .media-body.info{background: #E5F5FF;}

.wochentage-abo{
    margin-top: 35px;
}

/* Customize the label (the container) */
.checkbox-container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px !important;
/*  padding-top: 3px;*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin-left: 30px;
}

/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 23px;
  width: 23px;
  border-radius: 5px;
  margin-left: -30px;
  border: 2px solid #a3a3a3;
  border-radius: 8px;
}

/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
  border: 2px solid #787878;
}

/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
  background-color: #787878;
  border: 2px solid #787878;
}

.checkbox-container:hover input:checked ~ .checkmark {
  border: 2px solid #a3a3a3;
}

/* When the checkbox is disabled */
.checkbox-container input:disabled ~ .checkmark {
  opacity: 0.4;
}

.checkbox-container:hover input:disabled ~ .checkmark {
  cursor: default;
}
.checkbox-container:hover input:disabled ~ .checkmark:after {
  cursor: default;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*Radio Button:
/* Customize the label (the container) */
.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px !important;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.radio-checkmark {
  position: absolute;
  top: -2px;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  margin-left: -15px;
}

/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .radio-checkmark {
  border: 2px solid #787878;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .radio-checkmark {
  background-color: #787878;
  border: 2px solid #787878;
}

.radio-container:hover input:checked ~ .radio-checkmark {
  border: 2px solid #a3a3a3;
}

/* When the checkbox is disabled */
.radio-container input:disabled ~ .radio-checkmark {
  opacity: 0.4;
}

.radio-container:hover input:disabled ~ .radio-checkmark {
  cursor: default;
}
.radio-container:hover input:disabled ~ .radio-checkmark:after {
  cursor: default;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio-checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .radio-checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .radio-checkmark:after {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}

.modal-content-daytime{
    color: gray;
    font-size: 14px;
    margin-top: 7px;
    margin-bottom: -10px;
}

.farbeHintergrund-entfernen-button,
.farbeHintergrund-hinzufuegen-button,
.plaetzeSaisonspiel-hinzufuegen-button,
.plaetzeSaisonspiel-entfernen-button{
    margin-top: 7px;
}

@media(max-width:768px) {
    .jubilaeen-multiselect {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

}

.table-container {
    position: relative;
}

/*Veranstaltungen*/
.event-row {
    position: relative; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    padding: 15px 15px 15px 25px; /* Linkes Padding erhöht für Platz des Balkens */
    border-radius: 5px;
    background-color: #fff;
    margin-left: 10px;
    margin-right: 10px;
    transition: box-shadow 0.3s;
    display: flex;
}
.event-row::before {
    content: "";
    display: block;
    position: absolute;
    top: 15px; 
    bottom: 15px; 
    left: 10px;
    width: 8px;
    background-color: #343a40; 
    border-radius: 4px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); 
    transition: background-color 0.3s ease;
}
.event-row:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}
.event-date-time-col {
    border-right: 1px solid #343a40;
}
.event-datum {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 5px;
}
.event-uhrzeit {
    font-size: 14px;
    color: #777;
}
.event-bezeichner-box {
    margin-top: 0;
    margin-bottom: 10px;
}
.event-bezeichner {
    font-size: 15px;
}
.info-line {
    margin-bottom: 5px;
}
.info-line i {
    margin-right: 5px;
}
.details-section {
    margin-top: 15px;
}
.details-section p {
    margin-bottom: 0;
}


/* Flexibler Button-Container: Buttons werden nebeneinander angezeigt und umbrechen bei Bedarf */
.event-btn-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center; /* vertikale Zentrierung */
    gap: 5px; /* sorgt für einen gleichmäßigen Abstand zwischen den Buttons */
}

/* Smooth Collapse Transition */
.collapse {
    transition: height 0.5s ease;
}

.event-button-col{
    min-height: 100%;
    display: flex;
    float: right;
    justify-content: flex-end;
}

@media (max-width: 992px) {
    .event-container {
        padding: 0px !important;
    }
    .event-date-time-col {
        border-right: none; /* Keine Randlinie auf mobilen Geräten */
        margin-bottom: 10px;
    }
    .event-bezeichner-box {
        text-align: center; /* Zentriert auf mobilen Geräten */
        position: relative;
        padding-bottom: 10px;
    }
    .event-bezeichner-box::after {
        content: "";
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 80%;
        height: 1px;
        background-color: #343a40; /* Farbe der Linie */
    }
    .info-line {
        text-align: center; /* Zentriert auf mobilen Geräten */
    }
    .event-button-col {
        text-align: center; /* Zentriert auf mobilen Geräten */
    }
    .event-button-col .btn {
        width: 100%; /* Volle Breite auf mobilen Geräten */
        margin-bottom: 5px;
    }
}

@media (max-width: 767px) {
    .event-row {
        display: block;
    }   

    .event-button-col .btn {
        width: auto; /* Volle Breite auf mobilen Geräten */
        margin-bottom: 5px;
    }
}

@media (max-width: 2000px) {
    .responsive-events .event-row {
      display: block;
    }
    .responsive-events .event-date-time-col {
      border-right: none;
      margin-bottom: 10px;
      text-align: center;
    }
    .responsive-events .event-bezeichner-box {
      text-align: center;
      position: relative;
      padding-bottom: 10px;
    }
    .responsive-events .event-bezeichner-box::after {
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 80%;
      height: 1px;
      background-color: #343a40;
    }
    .responsive-events .info-line {
      text-align: center;
    }
    .responsive-events .event-button-col {
      text-align: center;
      display: flex;
      justify-content: center;
      margin-top: 10px; /* Abstand zur Beschreibung */
    }
    .responsive-events .event-button-col .btn {
      width: auto;
      margin-bottom: 5px;
    }
}

/*Veranstaltungen Ende */

/*Arbeitsdienste*/
.stunden-container {
    display: inline-flex;
    align-items: center;
}

.stunden-label {
    margin-right: 5px;
    margin-top: 5px;
}

.stunden-input {
    width: 75px;
}

.status-yes,
.status-no {
    font-weight: bold;
    margin-left: 5px;
    vertical-align: middle;
}
/*Arbeitsdienste Ende */

/* Dropdown Menu Navleiste*/
.dropdown-menu-nav {
    transform-origin: top;
    animation: fadeInScaleNav 0.3s ease forwards;
}
@keyframes fadeInScaleNav {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.dropdown-menu-scrollable-nav>li>a{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu-scrollable-nav>li>a:hover,.dropdown-menu-scrollable-nav>li>a:focus{
    color:#262626;
    text-decoration:none;
    background-color:#f5f5f5
}

/* Neuer scrollbarer Bereich innerhalb des Dropdown-Menüs */
.dropdown-menu-scrollable-nav {
    max-height: 60vh;
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Separatoren mit 5px oben und unten, 15px links/rechts */
.dropdown-menu-nav > li.divider {
    margin: 5px 15px;
}

.navbar .dropdown-toggle:hover{
    background: red;
}

/* Kleines Profilbild im Dropdown-Toggle */
.profile-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-left: 5px;
    margin-top: -5px;   
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid #343a40;
}

/* Verhindern, dass beim Hover über den Link des Profilbildes der Hintergrund grau wird */
.dropdown-menu-nav li.profile-image a:hover {
    background-color: transparent;
}

/* Profilbild im Dropdown vergrößert sich beim Hover */
.dropdown-menu-nav li.profile-image a img {
    transition: transform 0.3s ease;
}
.dropdown-menu-nav li.profile-image a img:hover {
    transform: scale(1.1);
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .dropdown-menu-nav {
        width: 100%;
        margin: 0px !important;
        border-radius: 0;
        min-height: 100vh;
        z-index: 99999999;
        background-color: #fff !important;
    }
    .dropdown-menu-nav li {
        text-align: center;
    }
    .dropdown-menu-nav li.profile-image div {
        text-align: center;
    }
    .dropdown-toggle {
        display: block;
    }
    /* Erhöhe die maximale Höhe des scrollba    ren Bereichs auf Mobilgeräten */
    .dropdown-menu-scrollable-nav {
        max-height: 95vh;
        overflow-y: visible !important; 
    }
    
    .navbar-nav{
        margin: 0px !important; 
    }
     
    .profile-mini {
        width: 25px;
        height: 25px;
        margin-left: 5px; 
        margin-right: 5px; 
        margin-top: 1px;
    }
    
    .footer-links-li{
        margin-bottom: 50px;    
    }
}

/* Dropdown Menu Navleiste Ende*/

.dot-text{
    white-space: normal; /* Sorgt dafür, dass Zeilenumbrüche möglich sind */

    /* WebKit-spezifischer Ansatz für Mehrzeilen-Ellipsis */
    display: -webkit-box;           /* Muss gesetzt sein */
    -webkit-box-orient: vertical;   /* Vertikale Anordnung der Boxen */
    -webkit-line-clamp: 2;         /* Maximal 2 Zeilen */
    overflow: hidden;              /* Blendet überzähligen Text aus */
    text-overflow: ellipsis;       /* Zeigt „…“ an (funktioniert in vielen, aber nicht allen Browsern) */

    word-break: break-word;
}


.slimScrollBarX {
    display: none !important;
}

.slimscrollNav {
    overflow: auto !important;
}


.mitgliedsartauswahl-zb{
    padding-right: 10px;
}

.zb-label-mitgliedsart{
    margin-top: 5px;    
}

.zeitbeschraenkung-hidden{
    display: none;
}

.shop-label{
    text-align: left !important;

}