l-select-group.form-control {
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    height: 100%;
    padding: 0;
    border-width: 0;
    background-color: transparent;
}

l-select-group button.btn {
    position: relative;
    border-color: #ccc;
    background-color: white;
}

l-select-group button,
l-select-group .wrapper {
    margin: 2px 0 3px 0;
    width: 49%;
    flex: 0 0 49%;
}

l-select-group .wrapper button {
    margin: 0;
    height: 100%;
    width: 100%;
}

l-select-group button.btn-outline-dark:hover {
    border-color: black;
}

l-select-group.is-invalid button {
    border-color: #ff1616;
}

l-select-group.multiple .btn {
    padding-left: 30px;
}

l-select-group.multiple .btn::before {
    content: "";
    position: absolute;
    margin-top: -6px;
    top: 50%;
    left: 12px;
    padding: 5px 5px;
    border: 1px solid black;
    margin-right: 2px;
    background-color: white;
}

l-select-group.multiple .btn.active::before {
    content: "";
    padding: 7px 4px;
    border: none;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotateZ(45deg);
    margin-top: -12px;
    top: 50%;
    left: 12px;
    background-color: transparent;
}

l-select-group.disabled {
    pointer-events: none;
}

l-select-group.disabled .btn:not(.active) {
    display: none;
}

.shortgroup button,
.shortgroup .wrapper {
    word-break: break-word;
    width: 49%;
    flex: 0 0 49%;
}

.triplegroup .wrapper,
.triplegroup button {
    width: 32%;
    flex: 0 0 32%;
}


/* .qualitygroup .wrapper,
.verdictgroup .wrapper,
.colorsgroup .wrapper,
.versiongroup .wrapper,
.techcomsgroup .wrapper {} */

@media (max-width: 575.98px) {
    .shortgroup button,
    .shortgroup .wrapper,
    .triplegroup .wrapper,
    .triplegroup button {
        width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 767.98px) {
    body.sidebar-show .shortgroup .wrapper,
    body.sidebar-show .shortgroup button,
    body.sidebar-show .triplegroup .wrapper,
    body.sidebar-show .triplegroup button {
        width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 991.98px) {
    .techcomsgroup .wrapper {
        width: 100%;
        flex: 0 0 100%;
    }
}

@media (max-width: 1199.98px) {}