.remote-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateY(0px);
  /* border: 2px solid deeppink; */

  /*  border: 2px solid orange; */
  -webkit-transition: all 0.7s cubic-bezier(0.75, 0, 0.125, 1) 0.3s;
  -moz-transition: all 0.7s cubic-bezier(0.75, 0, 0.125, 1) 0.3s;
  -ms-transition: all 0.7s cubic-bezier(0.75, 0, 0.125, 1) 0.3s;
  -o-transition: all 0.7s cubic-bezier(0.75, 0, 0.125, 1) 0.3s;
  transition: all 0.7s cubic-bezier(0.75, 0, 0.125, 1) 0.3s;
}

/* imp */
.remote-container svg #Layer_1 {
  pointer-events: painted;
}

.remote-svg {
  /* background-color: aqua; */
}

svg image {
  pointer-events: none;
}

.remote-button {
  opacity: 0.6;
  animation: flicker 2s;
  animation-delay: 2s;
  animation-iteration-count: 1;
  /* animation-direction: alternate; */
  animation-timing-function: ease-in-out;
  animation-play-state: paused;
  fill-opacity: 0;
}

.remote-button.animate {
  animation-play-state: running;
}

.remote-button:hover {
  fill: white;
  /* stroke: white; */
  fill-opacity: 1;
}
.remote-button.mousedown-state {
  /*  fill: black;*/
  stroke: black;
  opacity: 0.6;
}

@keyframes flicker {
  0% {
    fill: none;
    stroke: rgba(255, 255, 255, 0);
    stroke-width: 0px;
  }
  50% {
    fill: none;
    stroke: rgba(255, 255, 255, 1);
    stroke-width: 4px;
  }
  100% {
    fill: none;
    stroke: rgba(255, 255, 255, 0);
    stroke-width: 0px;
  }
}