.form-label { font-size: 0.75rem; font-weight: 600; color: var(--clr-gray); }

.form-control { padding: .65rem 1.25rem; font-size: 0.875rem; background-color: #fff; min-height: 43px;
    &:focus { box-shadow: none; }
    &::-webkit-file-upload-button { padding: .375rem .75rem; margin: -.7rem -1.3rem; -webkit-margin-end: .75rem; margin-inline-end:.75rem; min-height: 50px; }
    &::file-selector-button { padding: .375rem .75rem; margin: -.7rem -1.3rem; -webkit-margin-end: .75rem; margin-inline-end:.75rem; min-height: 50px; }
    
    &.form-control-lg { min-height: 50px; border-radius: var(--bs-border-radius); }
    &.form-control-sm { padding: .25rem 1rem; min-height: 38px;
        + .input-group-text { font-size: 14px; }  
    }
    
    &:focus { border-color: var(--bs-border-color); }
}

textarea.form-control { min-height: 120px!important; }

.form-select { padding: .5rem 1.25rem; min-height: 43px; 
    &.form-select-sm { padding: .25rem 1rem; min-height: 32px; }  
    &.form-select-lg { min-height: 50px; }  
}

.media-input-group .image-preview { display: flex; place-items: center; width: 150px; height: 150px; border: 2px dashed var(--bs-app-border-clr); margin-bottom: 10px; padding: 10px; }
.media-input-group .image-preview img { width: 100%; height: 100%; object-fit: contain; }

.quantity { display: flex; align-items: center; column-gap: 1px; justify-content: end; min-width: 200px; }
.quantity .input-group { flex-wrap: nowrap; justify-content: end; }

/* ql editor */
.ql-toolbar { display: none; background: #f8fafc; border: 1px solid var(--bs-border-color)!important; border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px!important; display: flex; gap: 6px; overflow-x: auto; white-space: nowrap;
    .ql-formats { display: flex!important; gap: 4px; white-space: nowrap; margin-right: 0 !important;
        button { width: 32px!important; height: 32px!important; border: 1px solid var(--bs-border-color)!important; background: #fff!important; border-radius: 4px; cursor: pointer; display: flex!important; align-items: center; justify-content: center; transition: all 0.2s;
            &.ql-active { border-color: var(--bs-blue)!important; }
            svg { width: 16px!important; height: 16px!important; }
            .bi { margin: 0; }
        }
    }

    &::-webkit-scrollbar { display: none!important; }
}
.ql-container { border: 1px solid var(--bs-border-color)!important; border-radius: 0 0 8px 8px; }
.ql-editor { min-height: 150px; max-height: 215px; overflow-y: scroll; }
.ql-mention-list-container { width: 200px !important; }
.ql-mention-list-item { height: 30px !important; line-height: 30px !important; font-size: 14px !important; padding: 0 10px !important; 
    &.selected { background-color: var(--bs-blue) !important; color: white; }
}