html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    font-family: sans-serif;
}

.center-text {
    padding-top: 15px;
    margin-bottom: 15px;
}

@media (min-width: 668px) {
    .container-sm {
        max-width: 620px;
    }
}


.pager-navigation {
    position: relative;
    display: flex;
    justify-content: center;
}

    .pager-navigation div {
        margin-top: 15px;
        font-family: sans-serif;
        font-size: 1rem;
        line-height: 1.25;
        color: #00cb6e;
    }

    .pager-navigation:after {
        content: "";
        display: table;
        clear: both;
    }

    .pager-navigation div {
        float: left;
    }

        .pager-navigation div + div {
            margin-left: .5rem;
        }

    .pager-navigation img {
        width: 15px;
    }

.simple-pagination-page-numbers a, .simple-pagination-last a {
    display: block;
    float: left;
    width: auto;
    padding-right: 5px;
    padding-left: 5px;
    text-align: center;
    color: #000000;
    text-decoration: none;
}

    .simple-pagination-first a:link,
    .simple-pagination-previous a:link,
    .simple-pagination-next a:link,
    .simple-pagination-last a:link {
        display: block;
        float: left;
        margin-left: 3px;
        text-align: center;
        color: #000000;
        text-decoration: none;
    }

a[class*="simple-pagination-navigation-disabled"] {
    color: #000000;
    cursor: default;
    text-decoration: underline;
}



h3 {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.nav-brand {
    align-items: center;
    display: flex;
    height: 120px;
    justify-content: flex-end;
    text-align: right;
    transition: .2s ease-in-out;
    width: 100%;
}

.nav-item {
    width: 50%;
}

    .nav-item:first-child {
        border-right: 0;
    }

.nav-link {
    width: 100%;
    color: #000000;
    border: 1px solid #ced4da !important;
    border-bottom: 0;
}

    .nav-link.active {
        border: 1px solid #000 !important;
        border-bottom: 0;
    }

    .nav-link:hover {
        color: #000000;
        font-weight: 600;
    }

    .nav-link.active {
        font-weight: 600;
    }





.tab-pane {
    min-height: 35vh;
    max-height: 35vh;
    background: #f1ebeb;
    overflow-y: auto;
    padding: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
}

.filter-container, #userFastSearch {
    display: none;
}

.filter-box {
    background: #f1ebeb;
    overflow-y: auto;
    padding: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
}


    .productForm, .orderTable {
        display: table;
        width: 100%;
        position: relative;
    }

    .productForm .productFormHeader, .productForm .productRow, .orderTable .orderTableHeader, .orderTable .orderTableRow {
        display: table-row;
        position: relative;
    }

    .productForm label:not(.form-check-label), .orderTable label:not(.form-check-label) {
        display: table-cell;
        cursor: pointer;
        font-size: .9rem;
        line-height: 2;
        margin-left: 1px;
        padding-left: .5rem;
        padding-right: .5rem;
        border-right: 1px solid white;
        border-bottom: 1px solid #000000;
    }


.productFormHeader label {
    font-weight:600;
}

.output-container {
    display: none;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 1.35);
    padding-left: calc(var(--bs-gutter-x) * 1.35);
}

.output {
    width: 100%;
    margin-top: 3rem !important;
    padding: 5px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #000;
    border-radius: .25rem;
    overflow:hidden;
}






.chat-container {
    display: flex;
    justify-content: flex-end; /* sorgt dafür, dass die Bubble rechts sitzt */
    margin: 10px;
}

.chat-bubble {
    background: #e0e0e0; /* hellgrau */
    color: #000; /* Textfarbe */
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 60%;
    font-family: sans-serif;
}


/* Eingabeleiste fix am Bottom */
.input-bar {
    display: block;
    padding: 20px 0 20px 0;
    position: sticky;
    bottom: 0; /* bleibt am unteren Rand */
    background: #fff;
}

.input-bar-content {
    padding: 20px 0.5rem 20px 0.5rem;
    border: 1px solid #000;
    border-radius: .25rem;
    background: #fff;
}

.button-bar {
    display: flex;
    justify-content: center;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem white;
}

.btn {
    width: 200px;
    margin: .2rem;
    outline: none; /* entfernt den Standard-Fokusrahmen */
    box-shadow: none;
}

.btn-light, .btn-light:focus, .btn-light:active:focus {
    border: 1px solid #ced4da;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .25rem;
}

    .btn-light:hover {
        border: 1px solid #ced4da;
        background: #ced4da;
    }


.form-row {
    width: 100%; /* Platz für das Label */
    display: flex;
    align-items: flex-start; /* wichtig für vertikale Liste */
    padding-top: 15px;
    margin-bottom: 15px;
    border-top: 1px solid black;
}

    .form-row:first-child {
        border-top: 0;
    }

    .form-row-list {
        width: 100%; /* Platz für das Label */
        display: flex;
        align-items: flex-start; /* wichtig für vertikale Liste */
        margin-bottom: 15px;
    }

    .form-row label.key, .form-row-list label.key {
        width: 40%; /* Platz für das Label */
        font-weight: bold;
        margin-top: 4px; /* optisch auf gleiche Höhe mit erster Option */
    }


.radio-group {
    display: flex;
    gap: 20px; /* Abstand zwischen den Optionen */
}

.checkbox-group {
    width: 60%; /* Platz für das Label */
    display: flex;
    flex-direction: column; /* untereinander */
    gap: 8px; /* Abstand zwischen Optionen */
    overflow: visible;
}

.checkbox-option {
    width: 100%; /* Platz für das Label */
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.radio-option {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
   
}


input[type="checkbox"] {
    accent-color: #4a90e2; /* moderne Browser färben den Radio-Button */
    cursor: pointer;
    margin-right: 6px;
}




/* Overlay */
#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

/* Spinner */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #ddd;
    border-top: 6px solid #000000;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Verstecken */
#loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}