/* Globale Stile */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

h2 {
    color: #333;
    padding-left:20px;
    padding-right:20px;
}
h3 {
    color: #333;
    padding-left:20px;
    padding-right:20px;
}
table, a, p {

    padding-left:20px;
    padding-right:20px;
}


/* Stile für Formulare */
form {
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

form label {
    font-weight: bold;
    display: block;
    margin-bottom: 10px;
}

form input[type="text"],
form input[type="password"] ,
form input[type="number"],
form input[type="email"],
form input[type="date"], form select, .select2-container--default .select2-selection--single  {
    box-sizing: border-box; /* Behält die Gesamtbreite des Elements bei */
    width: 100%;
    padding: 20px; /* Angepasstes Padding */
    margin-bottom: 15px;
    font-size: 18px;
    border: 2px solid #333;
    border-radius: 5px;
}


/* CSS in Ihrer styles.css-Datei */

/* Stile für das <select>-Element */
select#usergroup_id {
    width: 100%;
    padding: 20px;
    font-size: 20px;
    border: 2px solid #333;
    border-radius: 5px;
}

/* Stile für die Optionen im Dropdown-Menü */
select#usergroup_id option {
    font-size: 20px;
}


form input[type="submit"] , form button[type="submit"] {
    background-color: #cc3300;
    color: #ffffff;
    padding: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    margin-top: 10px; /* Abstand zwischen dem Button und dem Eingabefeld */
}

form input[type="submit"]:hover {
    background-color: #a42d00; /* Hellere grüne Farbe beim Überfahren */
    color: #ffffff; /* Schwarz für besseren Kontrast beim Überfahren */
}

/* CSS in Ihrer styles.css-Datei */

/* Logo-Stile */
/* CSS in Ihrer styles.css-Datei */

/* Logo-Stile */
.logo {
    text-align: center; /* Zentriert das Logo horizontal */
    padding: 20px 0; /* Fügt oben und unten Platz hinzu */
    background-color: #f0f0f0; /* Dunkelgraue Hintergrundfarbe */
    border-bottom: 3px solid #cc3300;
    margin-bottom:5px;
}

/* Optional: Stile für das SVG-Bild anpassen */
.logo img {
    max-width: 100%; /* Stellt sicher, dass das Bild nicht breiter ist als der Container */
    height: auto; /* Skaliert das Bild proportional */
}

/* CSS in Ihrer styles.css-Datei */

/* CSS in Ihrer styles.css-Datei */

/* Stile für den Abmelden-Link mit der Klasse asbtn */
/* CSS in Ihrer styles.css-Datei */

/* Container für den Header */
.header-container {
    display: flex; /* Verwendet Flexbox */
    justify-content: space-between; /* Platziert die Elemente am Anfang und am Ende des Containers */
    align-items: center; /* Zentriert die Elemente vertikal */
}

/* Stile für den H2-Titel */
.page-title {
    margin: 0; /* Entfernt den Standardmargin von h2 */
}

/* Stile für den Abmelden-Link mit der Klasse asbtn */
.asbtn {
    background-color: #cc3300;
    color: #ffffff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    text-decoration: none; /* Entfernt die standardmäßige Unterstreichung für Links */
    margin-right:20px;
}


.asbtn:hover {
    background-color: #a42d00; /* Hellere grüne Farbe beim Überfahren */
    color: #ffffff; /* Schwarz für besseren Kontrast beim Überfahren */
}
/* CSS in Ihrer styles.css-Datei */

/* Stile für die gesamte Tabelle */

table {
    width: calc(100% - 40px); /* 100% Breite abzüglich 20px links und 20px rechts */
    margin-left: 20px; /* 20px Padding links */
    margin-right: 20px; /* 20px Padding rechts */
    border-collapse: collapse; /* Entfernt die Abstände zwischen den Zellen */
}




/* Stile für Tabellenüberschriften */
th {
    background-color: #cc3300; /* Hintergrundfarbe der Ãœberschriften */
    color: #ffffff;
    font-size: 18px;
    padding: 10px;
    text-align: left;
}

/* Stile für Tabellenzellen */
td {
    font-size: 16px;
    padding: 10px;
    border: 1px solid #ccc; /* Rand um die Zellen */
}

/* Stile für Tabellenzeilen */
tr {
    background-color: #f2f2f2; /* Hintergrundfarbe der Zeilen */
}

/* Stile für Aktionen-Links */
td a {
    text-decoration: none;
    color: #cc3300; /* Farbe für Links */
}

/* Hervorheben von Links beim Ãœberfahren mit der Maus */
td a:hover {
    text-decoration: underline;
    color: #a42d00;
}
.checkbox-label {
    float: right; /* Elemente nebeneinander anordnen */
    margin-right: 10px; /* Abstand zwischen den Elementen hinzufügen */
}


/* Stile für die großen navigierbaren Admin-Buttons */
.navigation-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Erzeugt zwei Spalten für die Buttons */
    gap: 20px; /* Abstand zwischen den Buttons */
    margin: 20px; /* Außenabstand */
    padding: 20px 0; /* Abstand oben und unten */
}

.admin-button {
    background-color: #cc3300; /* Grüne Hintergrundfarbe, wie die Submit-Buttons */
    color: #ffffff; /* Dunkelgraue Schriftfarbe */
    text-decoration: none; /* Keine Unterstreichung */
    display: block; /* Block-Element, um die volle Breite zu nutzen */
    text-align: center; /* Zentriert den Text im Button */
    padding: 20px; /* Großzügiges Padding für leichtere Klickbarkeit */
    font-size: 18px; /* Schriftgröße passend zu anderen Buttons */
    border:none;
    border-radius: 5px; /* Leicht gerundete Ecken */
    transition: background-color 0.3s, color 0.3s; /* Weicher Übergang für Hover-Effekte */
}

.admin-button.small {

    padding: 10px; /* Großzügiges Padding für leichtere Klickbarkeit */
}

.admin-button.status {
   margin:5px;
   margin-top:0px;
   padding:15px;
   display:inline;
}

.admin-button:hover {
    background-color: #a42d00; /* Hellere grüne Farbe beim Überfahren */
    color: #ffffff; /* Schwarz für besseren Kontrast beim Überfahren */
    cursor: pointer;
}
.info-section {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 20px;
    margin: 20px 20px;
    margin-right:0px;
    font-size: 1.2em;
}
.info-section h3 {
    margin-top: 0;
}

.order-detail-table{
    width:98%;
}

.status-section {
    display: flex;
    flex-wrap: wrap;
}
@media only screen and (max-width: 800px) {
    form.stapler-form {
        text-align: center;
    }

    form.stapler-form label[for="value"],form.stapler-form input[type="text"],form.stapler-form input[type="submit"] {
        width: 100%;
        font-size: 40px; /* Erhöhen Sie die Schriftgröße */
        padding: 15px; /* Erhöhen Sie den Abstand und die Polsterung */
        margin-bottom: 15px;
    }
    form.stapler-form input[type="text"],form.stapler-form input[type="password"]{
        padding:30px !important;
        font-size: 40px !important;
    }
    form.stapler-form input[type="submit"]{
        padding:30px !important;
        font-size: 60px !important;
    }

    form.login-form {
        text-align: center;
    }

    form.login-form label[for="value"],form.login-form input[type="text"],form.login-form input[type="submit"] {
        width: 100%;
        font-size: 40px; /* Erhöhen Sie die Schriftgröße */
        padding: 15px; /* Erhöhen Sie den Abstand und die Polsterung */
        margin-bottom: 15px;
    }
    form.login-form input[type="text"],form.login-form input[type="password"]{
        padding:30px !important;
        font-size: 40px !important;
    }
    form.login-form input[type="submit"]{
        padding:30px !important;
        font-size: 60px !important;
    }

    .asbtn.stapler {


        font-size: 20px;

    }
    .navigation-buttons {
        grid-template-columns: 1fr; /* Eine Spalte auf kleineren Bildschirmen */
    }
    .admin-button {
        font-size: 20px; /* Größere Schrift für bessere Lesbarkeit auf kleinen Geräten */
        padding: 30px; /* Größeres Padding für einfachere Navigation */
    }

}
 .highlight-row {
    background-color: #d4edda; /* Grüne Hintergrundfarbe */
}
.highlight-row-red{
    background-color: #f8d7da; /* Rote Hintergrundfarbe */
}
/* Standardmäßig das Formular verstecken */
#filterForm {
    display: none;
    max-height: 0; /* Höhe auf 0 setzen, wenn ausgeblendet */
    transition: max-height 0.3s ease-out;
    overflow: hidden;
}

/* Wenn das Formular aktiv ist */
#filterForm.active {
    display: block; /* Sicherstellen, dass das Formular wieder sichtbar wird */
    max-height: 1000px; /* Höhe bei Aktivierung (du kannst diesen Wert anpassen) */
}

/* Trigger-Button im selben Design wie der Rest */
.trigger-button {
    background-color: #cc3300; /* Gleiche Hintergrundfarbe wie andere Buttons */
    color: #ffffff;
    padding: 10px; /* Gleiche Polsterung wie andere Buttons */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px; /* Gleiche Schriftgröße */
    display: block;
    text-align: center;
    margin: 20px 0; /* Abstand oben und unten */
    transition: background-color 0.3s, color 0.3s; /* Gleicher Hover-Effekt */
    margin-left:20px;
}

.trigger-button:hover {
    background-color: #a42d00; /* Gleiche Hover-Farbe */
    color: #ffffff;
}

.trigger-button:focus {
    outline: none;
}

/* Für Mobilgeräte: Tabelle in eine Liste umwandeln */
@media only screen and (max-width: 1280px) {
    table .status, table .edit, table .delete, table .versand, table .total {
        display: none;
    }
}


.editbestellunginfo{
    color: red;
    font-size:12px;
    margin:5px;
}

.generatebtn{
    width:100%;
}


.status-section  form{
    padding-top:0px;
}

 .textareas-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            margin-top: 20px;
        }

        .textarea-wrapper {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            margin-left:20px;
            margin-right:20px;
        }

        .textarea-wrapper h4 {
            margin-bottom: 10px;
        }

        .textarea-wrapper textarea {
     
            height: 170px;
            resize: none;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            font-family: Arial, sans-serif;

        }
        
        #versandkosten-text{
            height:102px;
        }

        .textarea-wrapper button {
            margin-top: 10px;
            padding: 10px;
         
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }


        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        .status-section form{
            margin:0px;
            border:none;
            padding:0px;
        }
        
                .status-section button{
            margin:0px !important;
        }
        
        #submit_btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}