.parameters-wrapper > .wrapper {
    margin: 1em auto 1.5em;
    width: 95%;
    max-width: 800px
}

.btn-group-wrapper {
    padding: 2em 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5em;
    border-radius: 1rem;
    background-color: var(--light-dark);
}

label > small {
    font-size: 11px;
}

.group-label {
    flex-basis: 100%;
    text-align: left;
}

.resize-type-buttons > label {
    width: 95%;
}

.btn-group .btn-outline-primary {
    max-width: 240px;
}

.item {
    flex: 0 0 100%;
}

.disabled {
    pointer-events: none;
    color: gray;
    opacity: 0.6;
}

label.disabled {
    color: gray;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-group > .btn-outline-primary {
    border: 1px solid var(--form-bgc-color);
    background-color: var(--light-dark);
    color: var(--light-white);
    border-radius: 0.5rem;
}

.btn-group > .btn-outline-primary:hover {
    background-color: var(--form-bgc-color);
}

.btn-check:active + .btn-outline-primary, .btn-check:checked + .btn-outline-primary, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show, .btn-outline-primary:active {
    background-color: var(--form-bgc-color);
    border: 1px solid var(--form-bgc-color);
}

@media screen and (min-width: 768px) {
    .btn-group-wrapper {
        padding: 2em 1em;
        border-radius: .5rem;
    }
}

@media screen and (min-width: 992px) {
    .resize-type-buttons > label {
        width: 100%;
        min-width: 240px;
    }

    .resize-type-buttons {
        justify-content: flex-start;
    }

    .btn-group.btn-group-wrapper.resize-type-buttons:last-child label {
        border-radius: unset;
    }
}