diascii {
    /* Scale div's size. Without scaling, each character in the diagram
   represents a 1px box. Scaling to 10px x 22px to make it close to
   monospace size. */
    --diascii-scale-x: 10;
    --diascii-scale-y: 22;
    /* Scale the gap between two crossing arrows that do not intersect */
    --diascii-scale-arrow-gap: 2;
    /* Minimal arrow head size, in pixels */
    --diascii-min-arrow-head: 5;

    position: relative;
    display: block;
    overflow: visible;
    margin:0 auto;
}

diascii.DIASCII_DEBUG {
    background-size: calc(var(--diascii-scale-x) * 1px) calc(var(--diascii-scale-y) * 1px);
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 1px, transparent 1px);
}

diascii div.DIASCII_BOX {
    position:absolute;
}

diascii span.DIASCII_TEXT {
    font-size: calc(var(--diascii-scale-y) * 0.7 * 1px);
    font-weight: 500;
    width: 100%;
}

diascii svg.DIASCII_ARROW {
    display: block;
    position: absolute;
    overflow: visible;
}

diasciis svg.DIASCII_ARROW marker {
    stroke: none;
}

diascii svg.DIASCII_ARROW path {
    fill: none;
}

diascii span.DIASCII_TEXT, diascii span.DIASCII_ID {
    position:absolute;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
}

diascii span.DIASCII_ID,
diascii span.DIASCII_CLASS0 {
    display:none;
    position:absolute;
    left:50%;
    transform: translate(-50%, -40%);
}


diascii div.DIASCII_BOX span.DIASCII_TEXT_COLONS,
diascii div.DIASCII_BOX span.DIASCII_ALIGN_CENTERISH {
    top:50%!important;
    left:50%!important;
}

diascii div.DIASCII_BOX span.DIASCII_ALIGN_RIGHT:not(.DIASCII_ALIGN_CENTERISH) {
    right:-5px!important;
    left:unset!important;
    width:unset!important;
}