:root {
    --bs-font-sans-serif: "Roboto", sans-serif !important;
    --bs-body-font-family: "Roboto", sans-serif !important;
}
.wide-tooltip .tooltip-inner {
    max-width: 400px;
    white-space: normal;
}

body {
    font-family: "Roboto", sans-serif !important;
}

.product-preview-tooltip {
    position:fixed; z-index:9999; pointer-events:none; display:none;
    width:200px; height:200px; background:#fff center/contain no-repeat;
    border:1px solid #e6e9ef; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.15);
}
input[readonly] {
    background-color: #f8f9fa;
    color: #6c757d;
    border-color: #ced4da;
    cursor: not-allowed;
}
.table-responsive {
    overflow: visible !important;
}
.alert-info {
    background-color: #53b3d9 !important;
    border-color: #53b3d9 !important;
}
.text-bg-primary {
    background-color: #53b3d9 !important;
}
.form-select-sm {
    min-height: calc(1.5em + .25rem + var(--bs-border-width) * 2) !important;
    padding: .125rem .5rem !important;
    line-height: 1.75 !important;
}
.form-select-sm~.select2-container--bootstrap-5 .select2-selection--single {
    line-height: 1.75 !important;
    min-height: calc(1.6em + 0.25rem + var(--bs-border-width) * 2) !important;
    padding: 0.205rem .5rem !important;
}
.form-select-sm~.select2-container--bootstrap-5 .select2-selection {
    line-height: 1.75 !important;
    min-height: calc(1.6em + 0.25rem + var(--bs-border-width) * 2) !important;
    padding: 0.205rem .5rem !important;
}
.badge-outline {
    background-color: transparent;
}
.badge-filled {
    font-weight: 500;
}
.table-xs td,
.table-xs th {
    padding: 0.4rem 0.3rem;
    font-size: 0.75rem;
}

.btn-mb {
    --mb-bg: #7c3aed;          /* violet-600 */
    --mb-bg-hover: #6d28d9;    /* violet-700 */
    --mb-border: #5b21b6;      /* violet-800 */
    --mb-focus: rgba(124, 58, 237, 0.4);

    color: #fff;
    background-color: var(--mb-bg);
    border: 1px solid var(--mb-border);
}

.btn-mb:hover,
.btn-mb:focus-visible {
    color: #fff;
    background-color: var(--mb-bg-hover);
    border-color: var(--mb-border);
}

.btn-mb:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--mb-focus);
}

.btn-mb:active,
.btn-check:checked + .btn-mb,
.btn-check:active + .btn-mb {
    color: #fff;
    background-color: var(--mb-bg-hover);
    border-color: var(--mb-border);
}

.btn-mb.disabled,
.btn-mb:disabled {
    color: #fff;
    background-color: var(--mb-bg);
    border-color: var(--mb-border);
    opacity: .65;
}

.btn-outline-mb {
    --mb-color: #6d28d9;
    --mb-hover-bg: #ede9fe;
    --mb-focus: rgba(124, 58, 237, 0.35);

    color: var(--mb-color);
    border: 1px solid var(--mb-color);
    background-color: transparent;
}

.btn-outline-mb:hover,
.btn-outline-mb:focus-visible {
    color: var(--mb-color);
    background-color: var(--mb-hover-bg);
    border-color: var(--mb-color);
}

.btn-outline-mb:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem var(--mb-focus);
}

.btn-outline-mb:active,
.btn-check:checked + .btn-outline-mb,
.btn-check:active + .btn-outline-mb {
    color: #fff;
    background-color: var(--mb-color);
    border-color: var(--mb-color);
}

.btn-outline-mb.disabled,
.btn-outline-mb:disabled {
    color: var(--mb-color);
    background-color: transparent;
    opacity: .65;
}

input[readonly],
textarea[readonly],
select[readonly],
input:disabled,
textarea:disabled,
select:disabled,
[aria-disabled="true"] {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    border: 1px solid #ddd !important;
    box-shadow: none !important;
    opacity: 1 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    -webkit-text-fill-color: #666 !important;
}

input[readonly]:hover,
textarea[readonly]:hover,
select[readonly]:hover,
input:disabled:hover,
textarea:disabled:hover,
select:disabled:hover,
input[readonly]:focus,
textarea[readonly]:focus,
select[readonly]:focus,
input:disabled:focus,
textarea:disabled:focus,
select:disabled:focus {
    background-color: #f5f5f5 !important;
    color: #666 !important;
    border-color: #ddd !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

input[readonly]::placeholder,
textarea[readonly]::placeholder,
input:disabled::placeholder,
textarea:disabled::placeholder {
    color: #999 !important;
    opacity: 1 !important;
}

select[readonly],
select:disabled {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: none !important;
}