.QACont {
    display: flex;
    flex-direction: row;
    background-color: lightgray;
    padding: 20px 0;
    width: 48%;
}

.QACont>div {
    margin: 0 10px;
}

#QAFlexCont {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    margin-bottom: 15px;
    justify-content: space-between;
}

#QAFlexCont>div {
    margin: 10px 0;
}

.QAPARTCONT {
    display: flex;
    flex-direction: column;
}

.QAPCODEWARN {
    display: none;
    visibility: hidden;
}

#QACont {
    display: flex;
    flex-direction: column;
}

#QAButtonCont {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

div.QACont input::-webkit-outer-spin-button,
div.QACont input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: unset;
}

div.QACont input {
    /* border: 1px solid green; */
    border: none;
    /* margin: 5px 10px; */
    /* flex-grow: 2; */
    outline: none;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    /* width: 100%; */
    font-size: 14px;
    margin: 5px 10px;
}

.QAPCODETBCont>input {
    /* padding: 5px 10px; */
    flex-grow: 2;
}

.QAQTYCont {
    flex-shrink: 3;
}

div.QACont input[type=number] {
    -moz-appearance: textfield;
    /* Firefox */
    width: 40px;
}

div.QAPARTCONT:focus-within {
    border: 1px solid #860909;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .075), 0 0 8px #86090999;
}

.QAPARTCONT {
    background-color: white;
    border: 1px solid black;
}

.QARemoveCont {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.QAPCODECont {
    flex-grow: 2;
}

.QAPCODETBCont {
    position: relative;
    display: flex;
    flex-direction: row;
}

.QAQTYTBCont {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 6;
}

.QARemoveCont {
    background-color: #860909;
    border-radius: 32px;
    padding: 0 10px;
    cursor: pointer;
    color: white;
    display: none;
    visibility: hidden;
}

.QARemoveCont:hover {
    background-color: #440606;
}

#AddMoreButCont {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 18pt;
    color: #860909;
    cursor: pointer;
    transition: color 0.15s, text-decoration 0.15s;
}

#AddMoreButCont:hover {
    color: #440606;
    text-decoration: underline;
}

#AddMoreButCont:hover svg circle {
    stroke: #440606;
    fill: #440606;
}

#ERR_PANEL {
    display: flex;
    flex-direction: column;
}

@media (max-width: 768px) {
    #QAFlexCont {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .QACont {
        width: unset;
    }
}

@media (max-width: 400px) {
    .QACont {
        flex-direction: column;
    }
    div.QACont>div {
        margin: 8px;
    }
    .QARemoveCont {
        padding: 5px 0;
    }
}