:root{
--ComexioModalHeight: 300px;
--ComexioModalBottomTopHeight: 50px;
--ComexioModalWidth: max(100%, 400px);
--ComexioModalMaxWidth: min(100%, 400px);
}
body{
background-color: lightgrey;
}
#retoureContainer{
width: var(--ComexioModalMaxWidth);
position: relative;
top: calc(50% - calc(calc(var(--ComexioModalHeight) + calc(var(--ComexioModalBottomTopHeight) * 2)) / 2));
left: 25%;
left: calc(calc(100% - var(--ComexioModalMaxWidth)) / 2);
border: solid aliceblue;
& input, select{
color: black;
}
& #oben,#unten{
height: var(--ComexioModalBottomTopHeight);
background-color: white;
}
& #oben{
border-top-left-radius: 30px;
border-top-right-radius: 30px;
width: 100%;
width: var(--ComexioModalWidth);
max-width: var(--ComexioModalMaxWidth);
padding: 2px;
& #fehlermeldung:not(:empty){
border-radius: 30px;
width: calc(100% - 20px);
padding: 10px;
display: inline-block;
min-height: 100%;
height: fit-content;
background-color: #f55;
position: relative;
z-index: 1;
}
& #fehlermeldung:not(:empty)::after{
content: "\2573";
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
& #fehlermeldung>p{
margin-bottom: 0;
}
}
& #mitte{
width: 100%;
width: var(--ComexioModalWidth);
max-width: var(--ComexioModalMaxWidth);
background-color: white;
padding: 2px;
& .step{
display: none;
height: var(--ComexioModalHeight);
padding: 10px;
& .line{
height: 20%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
& .optional{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
&.invisible{
display: none;
}
}
&.used{
border-bottom: solid 1px #ddd;
}
}
&.return_div{
.line.used:has(.invisible), .line.used:has(.reason_fourteen){
border-bottom: none;
}
& .reason_fourteen{
flex-direction: column;
}
&:has(.reason_fourteen:not(.invisible)){
height: calc(var(--ComexioModalHeight) + 100px);
}
}
&.active{
display: block;
}
}
& select{
border-radius: 5px;
height: 30px;
text-align: center;
background-color: white;
}
& span:has(input[data-malformed="true"])::before{
content: attr(data-allowed);
color: red;
border: solid 1px red;
position: absolute;
top: 25px;
}
& [alt]{
position: relative;
}
& [alt]::after{
opacity: 0;
}
& [alt]:hover:after,[alt]:has(input:focus):after{
content: attr(alt);
position:absolute;
bottom: 125%;
left: 0;
color: white;
background-color: black;
z-index: 1;
text-align: center;
padding: 5px;
border-radius: 6px;
opacity: 1;
transition: opacity 0.3s;
}
}
& #unten{
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
width: 100%;
width: var(--ComexioModalWidth);
max-width: var(--ComexioModalMaxWidth);
padding: 2px;
& button{
background-color: cornflowerblue;
border: none;
border-radius: 25px;
height: 35px;
width: 90px;
color: white;
cursor:pointer;
}
}
}