.dropdown-button {
     position: relative;

     border: 1px solid silver;
     border-radius: 5px;
     font-size: 0.8rem;
     font-weight: 400;

     color: var(--color-button-text);
     background-color: transparent;

     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 2px 7px 3px 7px;
 }

 .dropdown-button-image {
     margin: 5px 0 0 3px;
 }


 .dropdown-button-disabled {
     pointer-events: none;
     opacity: 0.6;
     cursor: not-allowed;
 }


 .dropdown-button:hover {
     font-weight: 600;
     box-shadow: 2px 2px lightgray;
     border: 1px solid var(--color-titles);
 }

 .dropdown-button:hover svg:not(.no-fill-hover) {
     fill: var(--color-svg-hover);
 }

 .dropdown-button:hover svg.no-fill-hover {
     stroke: var(--color-svg-hover);
 }


 .dropdown-button:hover .dropdown-menu {
     opacity: 1;
     pointer-events: auto;
 }


 .dropdown-menu {
     /* menu is hidden until hover on button */
     opacity: 0.0;
     /* this prevents hover on menu from showing the menu while it is hidden */
     pointer-events: none;
     /* this positions the menu relative to the button - overlapping the other content*/
     position: absolute;
     /* top: 32px; */
     top: calc(100% - 1px);
     /* left: 16px; */
     left: 0;
     z-index: 21;
     color: ivory;
     background-color: rgb(50, 50, 50);
     border: 1px silver solid;
     border-radius: 5px;
     font-size: 0.8rem;
     font-weight: 400;
     padding: 10px;
     width: 160px;

     transition: opacity 400ms ease-in-out;
 }

 .dropdown-menu>div {
     margin: 6px 3px 20px 3px;
     color: white;
 }

 .dropdown-button:hover .dropdown-menu {
     opacity: 1;
     pointer-events: auto;
 }

 .dropdown-menu>div:hover {
     text-decoration: underline;
     text-underline-offset: 4px;
     font-weight: 600;
 }