svg{
    user-select: none;
 }
 
 
 svg:hover:not(.no-hover) {
    stroke: var(--color-svg-hover);
    stroke-width: 2px;
}

 svg.hamburger-menu:hover {
    stroke: var(--color-svg-hover);
    stroke-width: 3px;
}

/* for filled (not stroked) svgs - highlights on hover like the stroked ones do.
   use together with no-hover, so the shape does not also get a stroke */
svg.svg-hover-fill:hover {
    fill: var(--color-svg-hover);
}

.svg-fill-firebrick{
    fill: firebrick;
}

.svg-fill-flag-color-red{
    fill: var(--color-warning-flag);
    stroke: var(--color-warning-flag);
}

.svg-fill-orange{
    fill: orange;
}

.svg-fill-green{
    fill: green;
    stroke: var(--color-warning-flag);
}


/* the ❗ of a "needs attention" column (col type 5) - the same crimson and the same
   drop as the red envelope, so the two line up when a list shows both */
svg.svg-attention {
    fill: crimson;
    margin-top: 8px;
}