.real-time__wrapper {
  --animation-cycle: 2.5s;
  --animation-ease: ease-in-out;
  --width-100: 100%;
  --turquoise500: #3affd3;
}

[data-home-state-target="wrapper"] {
  opacity: 0.2;
  filter: grayscale(1);
  transition: opacity 200ms;
}
[data-home-state-target="wrapper"].MESSAGE {
  filter: grayscale(0);
  opacity: 1;
}
/* START battery styles & animations */
.real-time-home text {
  font-size: 11px;
  font-weight: 700;
  fill: var(--turquoise500);
}
.real-time-home [data-home-state-target="batteryflow"] {
  animation-name: none;
  animation-duration: var(--animation-cycle);
  animation-timing-function: var(--animation-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.real-time-home [data-home-state-target="batteryflow"].DISCHARGING {
  animation-name: batteryFlowPulse;
  animation-play-state: running;
  animation-direction: normal;
}
.real-time-home [data-home-state-target="batteryflow"].CHARGING {
  animation-name: batteryFlowPulse;
  animation-play-state: running;
  animation-direction: reverse;
}
@keyframes batteryFlowPulse {
  0% {
    transform: matrix(0, 1, -1.5, 0, 260, 101.5);
  }

  50% {
    transform: matrix(0, 1, -1.5, 0, 165, 101.5);
  }

  100% {
    transform: matrix(0, 1, -1.5, 0, 165, 101.5);
  }
}
.real-time-home [data-home-state-target="ischarging"] {
  display: none;
}
.real-time-home [data-home-state-target="ischarging"].CHARGING {
  display: block;
}
/* END battery styles & animations */
/* START home styles & animations */
.real-time-home [data-home-state-target="homeflow"] {
  animation-name: none;
  animation-duration: var(--animation-cycle);
  animation-timing-function: var(--animation-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.real-time-home [data-home-state-target="homeflow"].HOME_USAGE {
  animation-name: loadPowerPulse;
  animation-play-state: running;
  animation-direction: normal;
}
@keyframes loadPowerPulse {
  0% {
    transform: matrix(0, -1, 2, 0, 157, 101.5);
  }
  50% {
    transform: matrix(0, -1, 2, 0, 157, 101.5);
  }

  100% {
    transform: matrix(0, -1, 2, 0, 40, 101.5);
  }
}
/* END home styles & animations */
/* START grid styles & animations */
.real-time-home [data-home-state-target="gridflow"] {
  animation-name: none;
  animation-duration: var(--animation-cycle);
  animation-timing-function: var(--animation-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
  offset-path: path(
    "M 162.634 89.417 L 161.818 149.659 C 161.818 154.059 165.418 157.659 169.818 157.659 L 356.732 157.679"
  );
}
.real-time-home [data-home-state-target="gridflow"].IMPORT {
  animation-name: gridFlowPulse;
  animation-play-state: running;
  animation-direction: reverse;
}
.real-time-home [data-home-state-target="gridflow"].EXPORT {
  animation-name: gridFlowPulse;
  animation-play-state: running;
  animation-direction: normal;
}
@keyframes gridFlowPulse {
  0% {
    offset-distance: 0%;
  }
  50% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
.real-time-home [data-home-state-target="grid"] {
  display: none;
}
.real-time-home [data-home-state-target="grid"].AVAILABLE {
  display: block;
}
.real-time-home [data-home-state-target="nogrid"] {
  display: none;
}
.real-time-home [data-home-state-target="nogrid"].NOT_AVAILABLE {
  display: block;
}
/* END grid styles & animations */
/* START solar styles & animations */
.real-time-home [data-home-state-target="productionflow"] {
  animation-name: none;
  animation-duration: var(--animation-cycle);
  animation-timing-function: var(--animation-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
  offset-path: path(
    "M 162.546 109.435 C 161.989 104.446 164.143 62.978 162.5 64.8 C 162.5 62.7 161.7 60.6 160.2 59.1 L 136.058 36.226"
  );
}
.real-time-home [data-home-state-target="productionflow"].PRODUCTION {
  animation-name: solarGenerationPulse;
  animation-play-state: running;
  animation-direction: reverse;
}
@keyframes solarGenerationPulse {
  0% {
    offset-distance: 0%;
  }
  50% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}
.real-time-home [data-home-state-target="productionflowPanel"] {
  animation-name: none;
  animation-duration: var(--animation-cycle);
  animation-timing-function: var(--animation-ease);
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.real-time-home [data-home-state-target="productionflowPanel"].PRODUCTION {
  animation-name: panelGeneration;
  animation-delay: 0.5s;
  animation-play-state: running;
}
@keyframes panelGeneration {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-300px);
  }
}
/* END solar styles & animations */
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Prevent scrolling while dialog is open */
body:has(dialog[data-dialog-target="dialog"][open]) {
  overflow: hidden;
}

/* Customize the dialog backdrop */
dialog {
  box-shadow: 0 0 0 200vw rgb(0 0 0 / 0.5);
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

/* Add animations */
dialog[data-dialog-target="dialog"][open],
dialog[data-dialog-tooltip-target="dialog"][open] {
  animation: fade-in 200ms forwards;
}

dialog[data-dialog-target="dialog"][closing],
dialog[data-dialog-tooltip-target="dialog"][closing] {
  animation: fade-out 200ms forwards;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 500ms;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1;
}

.d-none {
  display: none;
}

details summary .details-toggle-text::after {
  content: "Show ";
}

details[open] summary .details-toggle-text::after {
  content: "Hide ";
}

.group svg g {
  transition: opacity 300ms ease-in-out;
}
.group svg #icon-wide {
  opacity: 1;
}
.group svg #icon-narrow {
  opacity: 0;
}
.group.desktop-collapsed svg #icon-wide {
  opacity: 0;
}
.group.desktop-collapsed svg #icon-narrow {
  opacity: 1;
}

svg[data-active-issue-filters="false"] #icon-slider--active {
  display: none;
}
svg[data-active-issue-filters="true"] #icon-slider--active {
  display: block;
}

/* close button of google map infoWindow */
.gm-style-iw-c .gm-ui-hover-effect {
  display: none !important;
}