.rgm-toolbar {
    background-color: #e9ecef;
    padding: 0.75rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border: 1px solid #ced4da;
    border-bottom: none;
}
.rgm-toolbar-detached {
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
}
    .rgm-toolbar.rgm-toolbar-sm {
        padding: 0.3rem;
        background-color: #F1F3F5;
        border: 1px solid #EBEEF0;
        color: #636465;
        font-size: 13px;
    }

    .rgm-toolbar .btn {
        border-radius: 0.5rem;
    }

.editor-toolbar {
    background-color: #e9ecef;
    padding: 0.75rem;
    border-radius: 0.5rem;
    /*border: 1px solid #ced4da;*/
}

    .editor-toolbar .btn {
        border-radius: 0.5rem;
    }

/* Sub-toolbar specific to quote/product screens - keeps visual relation to .rgm-toolbar but distinct */
.rgm-subtoolbar {
    /* Slightly darker than the main toolbar to visually separate the controls */
    background-color: #F1F3F5;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0,0,0,0.03);
    border-top: none;
    color: #636465;
    font-size: 13px;
}

.rgm-subtoolbar .form-check,
.rgm-toolbar .form-check {
    display: inline-flex;
    align-items: center;
    justify-content: end;
}

.q-cost-multiplier-input {
    max-width: 70px;
    text-align: right;
}

/* Prevent labels in the subtoolbar from wrapping */
.rgm-subtoolbar label,
.rgm-subtoolbar .form-check-label {
    white-space: nowrap;
}

/* Divider style inside subtoolbar */
.rgm-subtoolbar .vr {
    width: 1px;
    background-color: rgba(0,0,0,1);
    height: 28px;
    align-self: center;
}

/* Make sub-toolbar compact on small screens */
@media (max-width: 576px) {
    .rgm-subtoolbar {
        flex-direction: column;
        gap: .5rem;
        align-items: stretch;
    }

    .q-cost-multiplier-input {
        width: 100%;
    }
}