#ui {
    display: flex;
}

#canvas {
    border: 3px solid #eee;
}

#canvas.dragging {
    cursor: grabbing;
}

#edges .edge {
    display: block;
    margin: 0.1em;
}

#edges button {
    border: 1px solid transparent;
    border-radius: 3px;
    background-color: transparent;
    opacity: 50%;
    cursor: pointer;
}

#edges button:hover {
    border-color: #237;
    opacity: 100%;
}

#edges .edge:not(:hover) button,
#edges.using-modal-tool .edge button {
    visibility: hidden;
}

#status {
    display: block;
    border: 1px solid #339933;
    background: #aaddaa;
}

#status:not(.active) {
    display: none;
}

#status .message {
    display: block;
    margin: 0.5em;
}

#status .actions button {
    margin: 0.5em;
}

#controls button.tool {
    cursor: pointer;
}

[popover] {
    border-radius: 5px;
    border-color: #777;
}

dialog button.close-dialog {
    position: absolute;
    right: 0.3em;
    top: 0.3em;
    border: 1px solid black;
    border-radius: 3px;
    background: white;
    color: black;
}

::backdrop {
    backdrop-filter: blur(2px);
}

#dialog-export fieldset label {
    display: block;
    max-width: 40em;
}

#dialog-export textarea {
    display: block;
    margin: 0.5em auto;
}

#dialog-import fieldset label {
    display: block;
    max-width: 40em;
}

#dialog-import textarea {
    display: block;
    margin: 0.5em auto;
}

#dialog-import .status .status-variant {
    display: none;
    padding: 0.5em;
}

#dialog-import .status.error .status-error {
    display: block;
    border: 1px solid #a00;
    background-color: #fdd;
    color: black;
}

#dialog-import .status.success .status-success {
    display: block;
    border: 1px solid #080;
    background-color: #dfd;
    color: black;
}