media-player-card.css

/* SVG shapes */

svg, svg * {
  pointer-events: all !important;
}

/* Hover over */

.entity:hover {
  stroke: #03A9F4 !important;
  stroke-width: 1px !important;
  stroke-opacity: 1 !important;
}


#layer3.invisible, #layer3.invisible * {
  opacity: 0;
  display: none !important;
}

#layer3.visible, #layer3.visible * {
  opacity: 1;
  display: inherit !important;
}

#layer5.invisible, #layer5.invisible * {
  opacity: 0;
  display: none !important;
}

#layer5.visible, #layer5.visible * {
  opacity: 1;
  display: inherit !important;
}

.always-invisible {
  visibility: hidden !important; 
  opacity: 0 !important;
  stroke-opacity: 0 !important;
}

.always-visible {
  visibility: visible !important;
  opacity: 1 !important;
  stroke-opacity: 1 !important;
}

.fillheart-on {
  fill: #000000 !important; 
  fill-opacity: 1 !important;
}

.fillheart-off {
  fill: #000000 !important; 
  fill-opacity: 0 !important;
}

/* Spinning Fans code from  https://community.home-assistant.io/t/share-your-floorplan/21315/37 */

@keyframes rotation {
		from {
				  -moz-transform: rotate(0deg);
               -webkit-transform: rotate(0deg);
                       transform: rotate(0deg);
		}
		to {
				-moz-transform: rotate(360deg);
             -webkit-transform: rotate(360deg);
                     transform: rotate(360deg);
		}
}

.rotate-on {
  stroke: #000000 !important;
  stroke-opacity: 1 !important;
  opacity: 1 !important;
  animation: rotation 3s infinite linear;
  transform-box: fill-box;
  transform-origin: center;
}

.rotate-off {
  stroke: #000000 !important;
  opacity: 1 !important;
  stroke-opacity: 0 !important;
}