/* ---------- Procedure Visual Canvas (tab of the procedure page) ----------
 * Read-only routing graph of the procedure, powered by Drawflow
 * (lib/drawflow). BEM-ish naming: rd-canvas-{block}__{element}--{modifier}.
 * Edges/ports are a view-only visualisation: routing is edited in the step
 * form, never by dragging on the canvas. */

/* ---------- Status bar ---------- */

.rd-canvas-statusbar {
    display: flex;
    gap: 18px;
    align-items: center;
    font-size: 13px;
    color: #5b6478;
    padding: 4px 0 12px;
    border-bottom: 1px solid #ececf3;
    margin-bottom: 12px;
}

.rd-canvas-statusbar__spacer { flex: 1; }

.rd-canvas-statusbar__error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #d22d3b;
}

.rd-canvas-statusbar__error .material-icons {
    font-size: 18px;
}

.rd-canvas-primary-btn {
    color: var(--primary-color) !important; /* brand purple, not a canvas-only shade (D10) */
    font-weight: 600 !important;
}

.rd-canvas-primary-btn:hover {
    background: #f0eaff !important;
}

.rd-canvas-save-btn {
    background: var(--primary-color) !important; /* brand purple (D10) */
    color: #ffffff !important;
    font-weight: 600 !important;
    text-transform: none;
    letter-spacing: 0;
}

.rd-canvas-save-btn[disabled] {
    background: #c9c9d4 !important;
    color: #ffffff !important;
}

/* ---------- Stage (canvas viewport) ---------- */

.rd-canvas-stage {
    position: relative;
    background: #fbfbfd;
    border: 1px solid #e6e8f0;
    border-radius: 8px;
    overflow: hidden;
    min-height: 640px;
}

.rd-canvas-host {
    width: 100%;
    height: 640px;
}

/* Drawflow's own container — make the dotted grid subtle */
.rd-canvas-host .drawflow {
    background:
        radial-gradient(circle, #e2e5ef 1px, transparent 1px) 0 0 / 24px 24px,
        #fbfbfd;
}

/* ---------- Synthetic scrollbars (BUG-2036-13) ----------
 * Drawflow pans/zooms via a CSS transform, so there is no native scroll to
 * bind a bar to. The canvas controller sizes/positions these bars from the
 * content bounds vs the viewport (canvasUpdateScrollbars) and drags a thumb to
 * pan (canvasBindScrollbars). Thumb width/height/offset are set inline in px.
 * Placed in the thin outer margin so they clear the toolbar / zoom / legend /
 * hint panels, which are inset 12-14px. */
.rd-canvas-scrollbar {
    position: absolute;
    z-index: 6;
    background: rgba(148, 163, 184, 0.14);
    border-radius: 6px;
}
.rd-canvas-scrollbar--h {
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 11px; /* easier to grab (QA-2036-C9) */
}
.rd-canvas-scrollbar--v {
    top: 10px;
    bottom: 10px;
    right: 2px;
    width: 11px; /* easier to grab (QA-2036-C9) */
}
.rd-canvas-scrollbar__thumb {
    position: absolute;
    background: rgba(100, 116, 139, 0.55);
    border-radius: 6px;
    cursor: grab;
}
.rd-canvas-scrollbar__thumb:hover {
    background: rgba(71, 85, 105, 0.78);
}
.rd-canvas-scrollbar__thumb:active {
    cursor: grabbing;
}
.rd-canvas-scrollbar--h .rd-canvas-scrollbar__thumb {
    top: 0;
    left: 0;
    height: 100%;
    min-width: 24px;
}
.rd-canvas-scrollbar--v .rd-canvas-scrollbar__thumb {
    left: 0;
    top: 0;
    width: 100%;
    min-height: 24px;
}

/* ---------- Expanded (full-window) view ----------
 * A fixed-position, solid-white overlay driven entirely by the
 * .rd-canvas-fs class — deterministic across browsers (the native
 * Fullscreen API's black ::backdrop proved unreliable). */
#rdCanvasFsTarget.rd-canvas-fs {
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: #ffffff;
    overflow: auto;
    padding: 12px 16px;
    width: 100vw;
    height: 100vh;
}

#rdCanvasFsTarget.rd-canvas-fs .rd-canvas-stage {
    min-height: calc(100vh - 96px);
    height: calc(100vh - 96px);
}

#rdCanvasFsTarget.rd-canvas-fs .rd-canvas-host {
    height: calc(100vh - 96px);
}

/* ---------- Empty / rendering overlays ---------- */

.rd-canvas-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #5f6875; /* AA-readable, matches badge/no-paths text (QA-2036-C12/D12) */
    pointer-events: none;
}

.rd-canvas-empty .material-icons {
    font-size: 48px;
}

.rd-canvas-rendering {
    position: absolute;
    inset: 0;
    z-index: 7;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(251, 251, 253, 0.82);
    color: #5b6478;
    font-size: 13px;
    font-weight: 600;
}

.rd-canvas-rendering__spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #d9dce6;
    border-top-color: #5b34d9;
    border-radius: 50%;
    animation: rdCanvasSpin 0.7s linear infinite;
}

@keyframes rdCanvasSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Floating toolbar / zoom ---------- */

.rd-canvas-toolbar {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    display: flex;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #e0e3ec;
    border-radius: 8px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(20, 20, 40, 0.06);
}

.rd-canvas-toolbar__btn,
.rd-canvas-zoom__btn,
.rd-canvas-zoom__label {
    background: transparent;
    border: 0;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #4b5468;
    cursor: pointer;
}

.rd-canvas-toolbar__btn:hover,
.rd-canvas-zoom__btn:hover,
.rd-canvas-zoom__label:hover {
    background: #eef0f7;
}

.rd-canvas-toolbar__btn .material-icons,
.rd-canvas-zoom__btn .material-icons {
    font-size: 20px;
}

.rd-canvas-zoom {
    position: absolute;
    bottom: 14px;
    right: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #e0e3ec;
    border-radius: 8px;
    padding: 3px;
    box-shadow: 0 2px 6px rgba(20, 20, 40, 0.06);
}

.rd-canvas-zoom__label {
    width: auto;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
    color: #2c3344;
}

/* ---------- Nodes ---------- */

/* The wrapping <div> Drawflow generates for our node */
.drawflow .drawflow-node.rd-canvas-node-wrap {
    background: transparent;
    border: 0;
    padding: 0;
    width: 210px;
    box-shadow: none;
    overflow: visible; /* let the top/bottom port dots sit on the edges */
}

/* Vertical flow: inputs centred on the TOP edge, outputs on the BOTTOM edge.
 * Drawflow draws each connection endpoint from the live position of these
 * dots, so re-centring them is what turns the graph top-to-bottom. */
.drawflow .drawflow-node.rd-canvas-node-wrap .inputs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 3;
}
.drawflow .drawflow-node.rd-canvas-node-wrap .outputs {
    position: absolute;
    bottom: 0;
    top: auto;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    /* Distribute output ports EVENLY within the card width instead of a fixed
       gap: a node with many connections (expected/regex/timeout) has one port
       each, and a fixed gap would push them — and their edges — outside the
       node. space-evenly keeps every port anchored inside the card. */
    justify-content: space-evenly;
    padding: 0 6px;
    box-sizing: border-box;
    z-index: 3;
}
.drawflow .drawflow-node.rd-canvas-node-wrap .input,
.drawflow .drawflow-node.rd-canvas-node-wrap .output {
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    margin: 0;
    width: 11px;
    height: 11px;
    background: #ffffff;
    border: 2px solid #b9c0cf;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    /* Ports are view-only anchors: routing is edited in the step form, so
       they must never start a connection drag. */
    cursor: default;
    pointer-events: none;
    transition: border-color 120ms ease, transform 120ms ease;
}
.drawflow .drawflow-node.rd-canvas-node-wrap .input {
    transform: translateY(-50%);  /* centre the dot on the top edge */
}
.drawflow .drawflow-node.rd-canvas-node-wrap .output {
    transform: translateY(50%);   /* centre the dot on the bottom edge */
}

/* Step card: a title row (name + type + hover ✕) over one ROW per outgoing
 * branch. Branch labels live in these rows — never floating on the edges — so
 * they can never overlap or hide. Full editing happens in the step editor modal. */
.rd-canvas-node {
    background: #ffffff;
    border: 1px solid #e2e5ef;
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(20, 20, 40, 0.06);
    overflow: hidden;
    width: 100%;
    cursor: pointer; /* the whole card opens the step editor (QA-2036-C11) */
    transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease;
}

.drawflow .drawflow-node.rd-canvas-node-wrap.selected .rd-canvas-node {
    box-shadow: 0 8px 22px rgba(98, 38, 149, 0.18);
    transform: translateY(-1px);
    border-color: #b9a4ff;
}

/* Title row: type accent, step name, type tag, hover ✕. Height is driven by the
 * controller (CANVAS_NODE_HEAD_H → --rd-canvas-head-h) so it can't drift from the
 * layout math; the fallback is only for a first paint before the var is set. */
.rd-canvas-node__head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: var(--rd-canvas-head-h, 34px);
    padding: 0 10px;
    border-bottom: 1px solid #eef0f5;
    background: #fcfcfe;
}

.rd-canvas-node__accent {
    width: 4px;
    height: 18px;
    border-radius: 3px;
    background: #6c7a86;
    flex-shrink: 0;
}

.rd-canvas-node__type {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #5f6875; /* AA-readable contrast at 9px (QA-2036-C5) */
}

/* Warning icon on an incomplete step — an ICON, not colour alone (AC 2 / D8). */
.rd-canvas-node__warn {
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1;
    color: #d22d3b;
}

/* Branch rows. Row height is driven by the controller (CANVAS_NODE_ROW_H →
 * --rd-canvas-row-h) since the auto-layout stacks levels by (head + rows) height;
 * the fallback is only for a first paint before the var is set. */
.rd-canvas-node__row {
    display: flex;
    align-items: center;
    gap: 7px;
    height: var(--rd-canvas-row-h, 24px);
    padding: 0 12px;
    font-size: 12px;
    color: #4b5468;
    border-top: 1px solid #f4f5f9;
}

.rd-canvas-node__row:first-child { border-top: 0; }

.rd-canvas-node__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #97a0b3;
    flex-shrink: 0;
}

.rd-canvas-node__branch {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-canvas-node__row--success .rd-canvas-node__dot { background: #22a06b; }
.rd-canvas-node__row--fail .rd-canvas-node__dot { background: #e5484d; }
.rd-canvas-node__row--next .rd-canvas-node__dot { background: #6c7a86; }
.rd-canvas-node__row--expected .rd-canvas-node__dot { background: #97a0b3; }
.rd-canvas-node__row--success .rd-canvas-node__branch { color: #047857; }
.rd-canvas-node__row--fail .rd-canvas-node__branch { color: #b91c1c; }
.rd-canvas-node__row--empty {
    color: #5f6875; /* AA-readable contrast (QA-2036-C3) */
    font-style: italic;
    justify-content: center;
}

/* Bottom port tinted by its branch kind, so a connector is traceable to the
 * row it leaves from (port i pairs with row i). */
.drawflow .drawflow-node.rd-canvas-node-wrap .output.rd-canvas-port--success { border-color: #22a06b; }
.drawflow .drawflow-node.rd-canvas-node-wrap .output.rd-canvas-port--fail { border-color: #e5484d; }
.drawflow .drawflow-node.rd-canvas-node-wrap .output.rd-canvas-port--expected { border-color: #97a0b3; }
.drawflow .drawflow-node.rd-canvas-node-wrap .output.rd-canvas-port--next { border-color: #6c7a86; }

/* Invalid step (fails the same validation as the Intent tab's step-error) —
 * red ring so it stands out on the graph without opening the step. */
.rd-canvas-node--error {
    border-color: #e5484d;
    box-shadow: 0 0 0 1px #e5484d, 0 2px 8px rgba(229, 72, 77, 0.18);
}

/* Transient pulse when the status-bar counter jumps to an error node, so the
 * eye lands on it after the canvas pans. */
.rd-canvas-node--error-focus {
    animation: rdCanvasErrorPulse 0.5s ease-in-out 3;
}

@keyframes rdCanvasErrorPulse {
    0%, 100% { box-shadow: 0 0 0 1px #e5484d, 0 2px 8px rgba(229, 72, 77, 0.18); }
    50% { box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.55), 0 4px 16px rgba(229, 72, 77, 0.35); }
}

/* Status-bar "N steps need attention" counter — click to jump to each. */
.rd-canvas-error-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid #f3c2c6;
    border-radius: 14px;
    background: #fdecee;
    color: #c0293a;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px 3px 8px;
    cursor: pointer;
}

.rd-canvas-error-badge:hover {
    background: #f9dadd;
}

.rd-canvas-error-badge .material-icons {
    font-size: 16px;
}

.rd-canvas-node__name {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    color: #1f2d3a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rd-canvas-node__entry {
    flex-shrink: 0;
    background: #ede4ff;
    color: #6d28d9;
    border: 1px solid #c4b5fd;
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Hover X — opens the page's existing #deleteStep confirm modal. Sits on the
 * card's top-right corner, only visible while hovering the node. It escapes
 * the card's overflow because its containing block is the node wrap. */
.rd-canvas-node__delete {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid #f3c2c6;
    border-radius: 50%;
    background: #ffffff;
    color: #d22d3b;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    /* Always present (touch has no hover) but subdued until hover/keyboard
       focus, and a 24x24 target (QA-2036-C6). */
    display: inline-flex;
    opacity: 0.4;
    transition: opacity 0.12s ease;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(20, 20, 40, 0.15);
    z-index: 4;
}

/* Arabic: mirror the delete button to the opposite corner (QA-2036-C8). */
.arabic .rd-canvas-node__delete {
    right: auto;
    left: -8px;
}

.drawflow .drawflow-node.rd-canvas-node-wrap:hover .rd-canvas-node__delete,
.rd-canvas-node__delete:focus-visible {
    opacity: 1;
}

.rd-canvas-node__delete:hover {
    background: #d22d3b;
    border-color: #d22d3b;
    color: #ffffff;
}

/* Ports carry the edge geometry but are NOT interactive — connections are made
   in the step form (success/fail/next), and the canvas draws them from there.
   Hide the dots so they don't look draggable; they stay in the DOM so edge
   endpoints still compute from their position (QA-2036-C1). */
.drawflow .drawflow-node.rd-canvas-node-wrap .output,
.drawflow .drawflow-node.rd-canvas-node-wrap .input {
    opacity: 0;
}

/* ---------- Edges (Drawflow `.connection` is an <svg>) ---------- */

/* Edges are a read-only visualisation of routing: the whole edge layer
 * ignores pointer input (routing is edited in the step form). */
.drawflow .connection {
    pointer-events: none;
}

.drawflow .connection .main-path {
    stroke: #6c7a86;
    stroke-width: 2px;
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.drawflow .connection.rd-canvas-edge--success .main-path {
    stroke: #22a06b;
    stroke-width: 2.25px;
}

.drawflow .connection.rd-canvas-edge--fail .main-path {
    stroke: #e5484d;
    stroke-width: 2.25px;
}

.drawflow .connection.rd-canvas-edge--expected .main-path {
    stroke: #97a0b3;
    stroke-width: 1.5px;
    stroke-dasharray: 5 4;
}

.drawflow .connection.rd-canvas-edge--next .main-path {
    stroke: #6c7a86;
}

/* The edges toggle hides every connection (and its label), leaving only the
 * step cards — useful while re-arranging dense flows. */
.drawflow.rd-canvas-hide-edges .connection,
.drawflow.rd-canvas-hide-edges #rd-canvas-label-overlay {
    display: none;
}

/* Semantic zoom: below CANVAS_LABEL_MIN_ZOOM the edge labels are unreadable, so
 * hide the whole overlay when zoomed out; it reappears as the user zooms in. */
.drawflow.rd-canvas-hide-labels #rd-canvas-label-overlay {
    display: none;
}

/* The arrow-marker defs <svg> is invisible itself */
#rd-canvas-arrow-defs {
    width: 0;
    height: 0;
    overflow: visible;
}

/* ---------- Edge labels (small pill on the edge midpoint) ----------
 * One overlay <svg> (#rd-canvas-label-overlay) inside the precanvas holds every
 * edge label so it pans/zooms with the flow; z-index above the node cards. Only
 * non-entity transitions (next/success/fail/timeout/regex/on-failure) are drawn
 * here — entities are rows inside the node. */
.rd-canvas-edge-label__text {
    font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 10px;
    font-weight: 600;
    fill: #4b5468;
    pointer-events: none;
    user-select: none;
}

.rd-canvas-edge-label__bg {
    fill: #ffffff;
    stroke: #e0e3ec;
    stroke-width: 1px;
    pointer-events: none;
}

.rd-canvas-edge-label-group--success .rd-canvas-edge-label__bg {
    fill: #ecfdf5;
    stroke: #a7f3d0;
}
.rd-canvas-edge-label-group--success .rd-canvas-edge-label__text { fill: #047857; }

.rd-canvas-edge-label-group--fail .rd-canvas-edge-label__bg {
    fill: #fef2f2;
    stroke: #fecaca;
}
.rd-canvas-edge-label-group--fail .rd-canvas-edge-label__text { fill: #b91c1c; }

.rd-canvas-edge-label-group--expected .rd-canvas-edge-label__bg {
    fill: #f5f6fa;
    stroke: #d6d9e1;
}

/* ---------- Edge legend + hint ---------- */

.rd-canvas-legend {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e3ec;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 2px 6px rgba(20, 20, 40, 0.06);
    font-size: 11px;
    color: #4b5468;
    display: flex;
    flex-direction: column;
    gap: 5px;
    pointer-events: none;
}

.rd-canvas-legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rd-canvas-legend__swatch {
    width: 26px;
    height: 0;
    border-top-width: 2.5px;
    border-top-style: solid;
    display: inline-block;
}

.rd-canvas-legend__swatch--next     { border-top-color: #6c7a86; }
.rd-canvas-legend__swatch--success  { border-top-color: #22a06b; }
.rd-canvas-legend__swatch--fail     { border-top-color: #e5484d; }
.rd-canvas-legend__swatch--expected {
    border-top-color: #97a0b3;
    border-top-style: dashed;
    border-top-width: 2px;
}

.rd-canvas-hint {
    position: absolute;
    top: 12px;
    left: 14px;
    z-index: 5;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e3ec;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #6c7a86;
    pointer-events: none;
}

/* ---------- Step editor modal (hosts the shared step-form partial) ---------- */

.rd-canvas-stepmodal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rd-canvas-stepmodal__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(20, 20, 40, 0.45);
}

.rd-canvas-stepmodal__panel {
    position: relative;
    z-index: 1;
    width: 92vw;
    max-width: 1100px;
    height: 88vh;
    background: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.rd-canvas-stepmodal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid #ececf3;
    flex: 0 0 auto;
}

.rd-canvas-stepmodal__title {
    font-weight: 600;
    font-size: 16px;
    color: #1f2d3a;
}

.rd-canvas-stepmodal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #6c7a86;
    display: inline-flex;
    align-items: center;
}

.rd-canvas-stepmodal__close:hover {
    color: #1f2d3a;
}

.rd-canvas-stepmodal__body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 16px 22px;
}

.rd-canvas-stepmodal__footer {
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top: 1px solid #ececf3;
    display: flex;
    justify-content: flex-end;
}

/* Materialize/select2 dropdowns inside the scrollable modal body must sit
 * above the modal chrome. */
.rd-canvas-stepmodal .select-wrapper .dropdown-content {
    z-index: 10002;
}

/* Scoped to the canvas editing session only — an unscoped rule leaked this
   z-index product-wide, floating select2 dropdowns above dialogs elsewhere (D7). */
body.rd-canvas-editing .select2-container--open {
    z-index: 10003 !important;
}

/* While the canvas step editor is open (body.rd-canvas-editing, toggled by
 * openCanvasStepEditor/closeCanvasStepEditor), the confirm dialogs the form
 * opens (delete expected/message/... Materialize modals, SweetAlert errors)
 * must stack ABOVE the editor. Materialize assigns ~1003 inline, so without
 * this they appear BEHIND the 10001 editor panel. Scoped to the body class
 * so stacking on every other page stays untouched. */
body.rd-canvas-editing .modal {
    z-index: 10005 !important;
}
body.rd-canvas-editing .modal-overlay {
    z-index: 10004 !important;
}
body.rd-canvas-editing .swal2-container {
    z-index: 10006 !important;
}

/* ---------- RTL ---------- */

.arabic .rd-canvas-toolbar {
    right: auto;
    left: 12px;
}

.arabic .rd-canvas-zoom {
    right: auto;
    left: 14px;
}

.arabic .rd-canvas-legend {
    left: auto;
    right: 14px;
}

.arabic .rd-canvas-hint {
    left: auto;
    right: 14px;
}