body { background-color: black }

div#app { width: 100vw; min-height: 100vh }

#startseite { padding: 2em; background-color: white }

#quote-start { padding: 2em; background-color: rgb(205,51,51); }

#quote-start-form { padding: 2em; background-color: white }
.quote-start-form-grid { display: grid; grid-template-columns: 1fr 4fr; }
.incomplete { background-color: rgba(255,0,0,0.1) }
.complete { background-color: rgba(0,255,0,0.1) }

#quote-start-form-adressen, #quote-start-form-stuecke, #quote-start-form-submit { padding: 2em 0 }

#quote-start-form-adressen .suchergebnis { height: 20vh; width: 100%; overflow-y: scroll }

#quote-start-form-stuecke button, #quote-start-form-submit button { margin-top: 2em }

h1.main-title { margin: 0.5em 0 1em 0; }
h2.section-title { font-size: 2em; margin: 0.5em 0 1em 0 }
h3.card-title { font-size: 1em; font-weight: bold; margin: 0.2em 0 0.4em 0 }
h3.logo { color: red }
span.weisse-schrift { color: white }
h4.field-title { font-size: 0.8em; margin: 0.2em 0 }

p.text { margin: 0.5em 0 1em 0 }

.reihe-flex { display: flex; flex-direction: row; justify-content: space-between }
.breite-60 { width: 60% }

.img-button { width: 90%; margin: 0 auto }

section#eingegebene-werte { margin: 4em 8em; background-color: white; padding: 4em; color: black }

#form-new { background: darkblue }

#form-new header#header { background-color: red }

#form-new header#header nav.bg-body-tertiary { background-color: none !important }

#form-new main form#form-address { margin: 5% 13%; padding: 4em; background: white }
#form-new main form#form-address .MuiSelect-root { font-size: 0.8rem }
#form-new main form#form-address .MuiAutocomplete-input { font-size: 1.2rem }

#form-new #waitingscreen { min-height: 80vh; background: white; }
#form-new #waitingscreen { margin-bottom: 25vh }

#form-new #quote-ausgabe { width: 100vw; background: white }
#form-new #quote-ausgabe th { padding: 1em 0 }
#form-new #quote-ausgabe td { padding: 0.6em 0 }

#form-new footer#footer { background: black; padding: 0 15% }
#form-new footer#footer a { color: white; font-size: 1.1em }

.max-halbe-breite { max-width: 50% }


#items-first header#header, header#header { background-color: red }

div#items-first section#hauptinhalt { display: flex; width: 100vw; height: 100vh }

#items-first .css-q8lpi9 { box-shadow: none }
#items-first main .icon-image { width: 12em; padding: 2em }

#items-first main { margin: 6% 12%; padding: 2em; background-color: white; flex: 4 }
#items-first main > .MuiCard-root { margin: 2em 0; }
#items-first main .item-auswahl { padding: 10vh 5vh 5vh 5vh }
#items-first main .item-zeile { border: 2px solid black }
#items-first main .item-unfertig { background: rgba(255,0,0,0.2) }
#items-first main .item-unfertig input.css-qwdxx6 { height: 2.5em }
#items-first main .item-fertig { background: rgba(0,100,0,0.2) }
#items-first main .MuiPaper-root .zip-start { margin-top: 10em }

#items-first #sidebar ul li a { border-radius: 1em }
#items-first #sidebar ul li a:hover { background-color: rgba(227,6,19,0.4) }


#items-first .form-field-border { border: 2px solid black; border-radius: 0 }
#items-first #vor-zurueck button.css-2vyjtr { background-color: red }
#items-first div.css-1kmkvia { border: 2px solid black; padding: 0 !important }
/* Breite der Anzeige von eingegebenen Postleitzahl-Adressen */
#items-first .MuiTextField-root.css-1pv2xcc { width: 100% }

#items-first .css-1kmkvia.Mui-focused .MuiOutlinedInput-notchedOutline { border: 0; border-radius: 0 }
#items-first .css-98ra8i { height: 42px }

#items-first footer#footer { background: black; padding: 0 15% }
#items-first footer#footer a { color: white; font-size: 1.1em }

#items-first #item-form .MuiFormControl-root { min-width: 100% }
#items-first #item-form .MuiInputBase-input { padding: 0.5em 1.2em }
.formular-feld-nicht-ausgefuellt { background: red }
.formular-feld-fertig { background: green }
#items-first #item-form h2.section-title { font-size: 2em; margin: 0.5em 0 1em 0; text-align: center }

#items-first .dev-address-fixed-height { height: 25vh }
#items-first .wait-spinner { position: absolute; top: 40vh; left: 40vw; height: 10em; width: 10em; }

#items-first #quote-ausgabe .carrier-logo { max-width: 100px; }
#items-first #quote-ausgabe dd { font-size: 80% }

#items-first #item-details p { font-size: 80%; font-weight: bold }
#items-first #item-eingaben div.MuiInputBase-root.css-iz33ar { height: 2.5em }

#items-first ul.info_shipper li,
#items-first ul.info_recipient li,
#items-first ul.info_quote li { font-size: 80%; }



#order-main { margin: 0 3em; }
#order-main #order-sender-address, #order-main #order-sender-contact, #order-main #order-sender-customs, #order-main #order-recip-address, #order-main #order-recip-contact, #order-main #order-recip-customs, #order-main #order-details-what, #order-main #order-details-articles { margin: 2em 2em; padding: 2em; background: rgba(255,255,255,0.85) }
#order-main input.css-15v65ck { height: 1.1em }
.order-form-label { font-size: 80% }
.order-form-all { width: 100%; background: white; margin: 0.75em 0 !important }
input.order-form-input { background: white; width: 100%; height: 2.5rem; padding: 0.5em }
.css-iz33ar { border-radius: 0 !important }
.mui-15xit37 { height: 2.5em }



#dev-paket .MuiTextField-root.css-1pv2xcc,
#dev-paket .MuiSelect-root.css-98ra8i { width: 100% }