.anzahlAuswahlContainer {
    background-color : var(--lightgray);
    border-radius    : 7px;
}

.auswahlContainer {
    padding : 10px 16px 22px 16px;
}

.auswahlContainer .caption {
    font-weight : 500;
}

.auswahlContainer .xVonY {
    font          : normal normal 600 10px/12px Fira Sans;
    color         : var(--lightgray-4);
    margin-top    : 7px;
    margin-bottom : 7px;
}

.progressContainer {
    border          : 1px solid #ef7d00;
    border-radius   : 7px;
    height          : 25px;
    display         : flex;
    flex-direction  : row;
    justify-content : center;
    align-items     : center;
    overflow        : hidden;
}

.progressContainer > div {
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-basis      : 10%;
    flex-grow       : 1;
    text-align      : center;
    height          : 17px;
    font            : normal normal 600 10px/12px Fira Sans;
    color           : var(--lightgray-4);
    border          : 1px solid #ef7d00;
    border-radius   : 7px;
    margin-right    : 8px;
}

.progressContainer > div:first-child {
    margin-left : 6px;
}

.progressContainer > div:last-child {
    margin-right  : 6px;
    margin-bottom : 0px;
}

.progressContainer > div:only-child {
    margin : 0px;
    height : 100%;
    border : none;
}

.progressContainer > div.filled {
    background-color : #ef7d00;
    color            : #ffffff;
}

.progressContainer > div.partialFilled {
    background-image : linear-gradient(to right, #ef7d00 10%, #ffffff 0);
}

.auswahlContainer .auswahl > div {
    background-color : #ef7d00;
    border-radius    : 5px;
    margin-bottom    : 9px;
    width            : fit-content;
    font             : normal normal normal 14px/17px Fira Sans;
    color            : #ffffff;
    padding          : 4px 10px 4px 7px;
}

.auswahlContainer .auswahl span.fa {
    margin-right : 10px;
    cursor       : pointer;
}
