.vertical-align {
    display: flex;
    align-items: center;
}


.dark-mode {
    --viewer-bg-color: #494e54;
}

.light-mode {
    --viewer-bg-color: lightgray;
}


#graphivac-svg:focus {
    /* outline:0; */
    }

.graphivac.editor, .graphivac.viewer {

/* box-shadow: inset 0px 0px 8px 0px #3366CC; */
    /* border-radius: 4px; */
}


.graphivac.editor, .graphivac.viewer {

/* box-shadow: inset 0px 0px 8px 0px #3366CC; */
    /* border-radius: 4px; */
}

/* .graphivac.editor{     */
/*     box-shadow: 1px 1px 5px orange; */
/* } */


svg.graphivac {
    border: 1px solid #3366CC;
    /* border-radius: 5px; */
    transition: border 0.25s ease-in-out;
}

/* .light-mode svg.graphivac { */
/*     background-color: #FFFFFF; */
/* } */

/* .dark-mode svg.graphivac text { */
/*     fill: #C8C8C8; */
/* } */


svg.graphivac.editor {
    border: 1px solid rgba(255,100,0,1);
    /* background-color: rgba(0,0,0,0.1); */
    }

.graphivac .grid {
    stroke: #3366CC;
    transition: stroke 0.25s ease-in-out;
}

.graphivac.editor .grid {
    stroke: rgba(255,100,0,1);
}


/* .graphivac.live .grid { */
/*     stroke: purple;} */

/* .selection-rectangle.below { */
/*     fill: rgba(0,0,0,0.08); */
/*     stroke-opacity: 0.5; */
/* } */

.selection-rectangle {
    stroke-dasharray: 5;
    fill: rgba(255,255,0,0.2);
    stroke: black;
    stroke-width: 1;
    animation: select-dash 7s linear;
    animation-iteration-count: infinite;
}

@keyframes select-dash {
    to {
	stroke-dashoffset: 100;
	}
    }

.conduits .handle{
    fill: rgba(51,102,204,0.2);
    stroke: rgba(51,102,204,1);
    opacity: 0;
    cursor: move;
    transition: opacity 0.15s ease-in-out, r 0.15s ease-in-out;
}


.dark-mode .conduit-segment {
    fill: grey;
}

.light-mode .conduit-segment {
    fill:#A8A8A8;
}

.conduits .handle.highlight, .conduits .handle:hover {
    opacity: 1;
    r: 25;
}


.svg-shadow-mask feFlood {
    /* flood-color: lightgrey; */
    flood-color: var(--viewer-bg-color);
}



.svg-selection feFlood.main {
    flood-color: rgba(255,255,0,1);
}


.enclosure .handle {
    fill: rgba(51,102,204,0.2);
    stroke: rgba(51,102,204,1);
    opacity: 0;
    transition: opacity 0.15s ease-in-out, r 0.15s ease-in-out;
}

.enclosure .handle.highlight, .enclosure .handle:hover {
    opacity: 1;
    r: 25;
}




.movable {
    cursor: move;
}

.copiable {
    cursor: copy;
}

/* .svg-groups { */
/*     transition: opacity 0.15s ease-in-out, r 0.15s ease-in-out; */
/* } */

/* .svg-groups:hover { */
/*     opacity:1; */
/* } */