.bella-drawing { position: relative; }
.bella-drawing .mf-input-required-indicator,
.bella-drawing .mf-error-message { color: #f00; }
.bella-drawing-body { min-width: 0; width: 100%; }
.bella-drawing--label-top > .mf-input-label { display: block; }
.bella-drawing.bella-drawing--label-left {
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-start;
    gap: 7px;
}
.bella-drawing--label-left > .mf-input-label {
    flex: 0 0 20%;
    box-sizing: border-box;
    width: 20%;
    min-width: 0;
    margin-inline: 0;
    overflow-wrap: anywhere;
}
.bella-drawing--label-left > .bella-drawing-body {
    flex: 1 1 0;
    width: auto;
}
.bella-drawing canvas {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
    background: #fff;
    cursor: crosshair;
    touch-action: none;
}
.bella-drawing canvas:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.bella-drawing .bella-drawing-value {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    opacity: 0;
    pointer-events: none;
}
.bella-drawing .bella-drawing-surface { width: 100%; }
.bella-drawing .bella-drawing-surface:focus-within { border-color: rgba(66, 133, 244, .471); }
.bella-drawing-help { margin-bottom: 8px; }
.bella-drawing-clear { margin-bottom: 8px; }

@media (max-width: 767px) {
    .bella-drawing.bella-drawing--label-left {
        flex-direction: column;
    }
    .bella-drawing--label-left > .mf-input-label,
    .bella-drawing--label-left > .bella-drawing-body {
        flex: none;
        width: 100%;
    }
}