/* Styles needed for SAVE Process Color coding */

#sb-ctrl,
#sf-ctrl,
#sv-ctrl {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; }

svg#sv-save-svg g.motion.g-draggable-group text,
svg#sv-save-svg g.motion.g-draggable-group circle,
svg#sf-save-svg g.motion.g-draggable-group text,
svg#sf-save-svg g.motion.g-draggable-group circle,
svg#sb-save-svg g.motion.g-draggable-group text,
svg#sb-save-svg g.motion.g-draggable-group circle {
    stroke: red; }

svg#sf-save-svg g.g-drag g.motion.g-draggable-group text,
svg#sf-save-svg g.g-drag g.motion.g-draggable-group circle,
svg#sb-save-svg g.g-drag g.motion.g-draggable-group text,
svg#sb-save-svg g.g-drag g.motion.g-draggable-group circle {
    opacity: 0.75; }

/* This rule modified to hide and show voters */
svg#a-aggregate-svg g.clearable g.voter,
svg#sb-save-svg g.clearable circle.voter,
svg#sf-save-svg g.clearable circle.voter,
svg#sv-save-svg g.clearable g.voter {
    display: inline; }

/* This rule moves the Next step button to the right, to avoid an error I
   keep making where I intend to click Next step and instead I click Cycle
   elections.  This is better, but not quite right for small screens like
   phones. */
div#sb-ctrl,
div#sf-ctrl {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; }

/* These rules used to color-code SAVE election results */
svg#sb-save-svg g.motion.focus,
svg#sf-save-svg g.motion.focus,
svg#sv-save-svg g.motion.focus{
    stroke: black; }

svg#sb-save-svg g.motion.loss,
svg#sf-save-svg g.motion.loss,
svg#sv-save-svg g.motion.loss {
    stroke: gray; }

svg#sb-save-svg g.motion.tie,
svg#sf-save-svg g.motion.tie,
svg#sv-save-svg g.motion.tie {
    stroke: blue; }

svg#sb-save-svg g.motion.win,
svg#sf-save-svg g.motion.win,
svg#sv-save-svg g.motion.win {
    stroke: green; }