#wrapper {
  padding:1vh 1vw;
  font-family: 'Montserrat', sans-serif;
}

#wrapper:has(.ui_wrapper){
  background-color: lightgray;
  
}
.ui_wrapper {
  border:0px solid grey;
  border-radius:clamp(16px, 20px, 32px);
  padding:5vh 3vw;
  box-shadow: grey 0 0 10px;
  margin:30px;
  background:#fff;
  transition: all .3s ease;
  display:flex;
  flex-direction:row;
  column-gap: 30px;
}

.ui_wrapper .header_container{
  display:flex;
  justify-content: left;
  align-content: center;
  align-items: center;
  gap:30px;
  font-size: clamp(1.2em, 5vw, 4em);
  margin-bottom: 5vh;
  font-weight:700;
  color:#D5242F;
  
}

.ausgabe_warnung h3 {
  font-size:2.3em;
  font-weight:800;  
}
.ausgabe_warnung p {
  font-size:1.3em;
  font-weight:800;  
}

.ausgabe_warnung.inProgress h3,
.ausgabe_warnung.inProgress p {
  color:red;
  text-align:center;
}

.ausgabe_warnung.finished h3, .ausgabe_warnung.finished p
{
  color:#013406;
  text-align:center;
}

.ausgabe_warnung.inProgress p,
.ausgabe_warnung.error p {
  color:red;
  text-align:center;
}
  
.ausgabe {
  
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
  /* overflow: scroll; */
  max-height: 600px;
  padding: 10px;
  border: 1px solid #eee;
  
  font-family: courier;
  overflow-y: scroll;
  text-align: left;
  _overflow-x: hidden;
  _overflow-y: auto;
  scrollbar-color: red orange;
  scrollbar-width: thin;
}
.import_form div{
  display: flex;
  justify-items: center;
}
.import_form label {
  font-size:1.2em!important;
  display: flex;
  align-items:center;
  min-width:220px;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1.4em;
  height: 1.4em;
}
input[type="radio"] + label:before {
  content: '';
  background: #f4f4f4;
  border-radius: 100%;
  _border: 1px solid #b3b3b3;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  _position: relative;
  _top: -0.2em;
  _margin-right: 1em;
  vertical-align: top;
  cursor: pointer;
  text-align: center;
  transition: all 250ms ease;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:red;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
  flex-direction: column;
  line-height: 1.4em;
  font-size:1rem;
  transition: all .5s ease-in-out;
  margin-right:1vw;
}
input[type="radio"]:checked + label:before {
  background-color: #D5242F;
  _box-shadow: inset 0 0 0 4px #f4f4f4;
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg id="plus-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon style="enable-background:accumulate; fill:white;" points="92.1,50.1 68.6,50.1 68.6,26.1 50.6,26.1 50.6,50.1 26.1,50.1 26.1,68.1,50.6,68.1 50.6,92.1 68.6,92.1 68.6,68.1 92.1,68.1"/></svg>'); 
  _background-position: top left;
  _background-origin: border-box;
  _background-repeat: no-repeat;
  _background-size: calc(var(--button-size) * .65);
  background-position-y: 0px;
}
input[type="radio"]:focus + label:before {
  outline: none;
  border-color: #3197EE;
  
}
input[type="radio"]:disabled + label:before {
  box-shadow: inset 0 0 0 4px #f4f4f4;
  border-color: #b3b3b3;
  background: #b3b3b3;
}
input[type="radio"] + label:empty:before {
  margin-right: 0;
}
  
 .import_form {
   display: grid;
   grid-template-columns: repeat(1, minmax(320px,1fr));
   gap:.5em;
 }
#start_auto {
   opacity:0;
 }
 
 input[type="button"]{
   font-size:1.4em;
   background-color:grey;
   padding:1vh 2vw;
   border:0;
   color:#fff;
   width:clamp(235px, 6vw, 350px);
   _width:auto;
   _min-width:200px;
   border-radius:16px;
   text-transform:uppercase;
 }
 .submit_me {
    displax:flex;
    width:auto;
    gap: 2em;
    align-items: flex-start;
    justify-items: flex-start;
  }
  #start_auto_button {
    background-color: #D5242F;;
  }
  
 input[type="button"]:hover {
   background-color: lightgray!important;
 }
.submit_me {
  display:flex;
  flex-flow: wrap;
}


.function_container {
  display: flex;
  flex-direction:column;
  row-gap: 3vh;
  min-width:35vw;
}
.ausgabe_container {
  display: flex;
  flex-direction:column;
  row-gap: 3vh;
}
.ausgabe_container .inProgress,
.ausgabe_container .finished,
.ausgabe_container .error {
  padding:15px;
  border-radius:24px;
  font-weight:600;
  
}

.ausgabe_container .inProgress {
  _background-color:#FF000035;
  border: 1px solid red;
  text-align: center;
}


.ausgabe_container .error {
  background-color:#FF000035;
  border: 1px solid red;
  text-align: center;
}

.ausgabe_container .finished {
  background-color:#007F0035;
  border: 1px solid green;
}


#Meldungen, #Meldungen div {
  display: block;
}