html, body {
    font-family: "Open Sans", sans-serif;
    margin: 0;
    padding: 0;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.page-content {
    flex: 1;
    padding: 20px;
    max-width: 600px;
    margin: auto;
}

form {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 5px;
}

form p {
    margin-bottom: 15px;
}

label {
    font-weight: bold;
}
fieldset label {
    font-weight: normal; /* Setzt das Gewicht der Labels auf normal */
}
input[type="text"],
select {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

fieldset {
    border: none;
    margin-bottom: 15px;
}

fieldset legend {
    font-weight: bold;
    color:#2f2f2f;
}

button {
    background-color: #384343;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

.dialog-message {
    font-size: 16px;
}

.dialog-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
}

.dialog-button:hover {
    background-color: #45a049;
}

/* Globale Stile für Select-Menüs */
select {
    appearance: none; /* Verhindert das Anzeigen des nativen Dropdown-Pfeils */
    padding: 8px 12px; /* Passen Sie die Polsterung nach Bedarf an */
    font-size: 16px; /* Passen Sie die Schriftgröße nach Bedarf an */
    border: 1px solid #ccc; /* Fügen Sie einen Rahmen hinzu */
    border-radius: 5px; /* Runde Ecken */
    background-color: #fff; /* Hintergrundfarbe */
  }
  
/* Spezifische Stile für Select-Menüs auf iOS-Geräten */
select[data-device='ios'] {
    padding-right: 32px; /* Platz für den Pfeil */
    background-image: linear-gradient(45deg, transparent 50%, black 50%), linear-gradient(135deg, black 50%, transparent 50%), linear-gradient(to right, #ddd, #ddd); /* Fügen Sie eine Hintergrundgrafik für den Pfeil hinzu */
    background-position: calc(100% - 10px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em; /* Positionieren Sie den Pfeil rechts */
    background-size: 5px 5px, 5px 5px, 1px 100%; /* Größe des Pfeils */
    background-repeat: no-repeat;
    -webkit-appearance: none; /* Zusätzliche Anpassungen für iOS */
    -moz-appearance: none; /* Zusätzliche Anpassungen für Firefox */
  }
  
/* Spezifische Stile für Select-Menüs auf Android-Geräten */
select[data-device='android'] {
    background-image: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">\
        <path fill="none" d="M0 0h24v24H0V0z"/>\
        <path d="M7 10l5 5 5-5H7z"/>\
      </svg>'); /* Fügen Sie einen benutzerdefinierten Pfeil hinzu */
    background-repeat: no-repeat;
    background-position: right 8px center; /* Platzieren Sie den Pfeil rechts */
    padding-right: 24px; /* Platz für den Pfeil */
    -webkit-appearance: none; /* Zusätzliche Anpassungen für Android */
    -moz-appearance: none; /* Zusätzliche Anpassungen für Firefox */
  }