#note {
  position: fixed;
  top: 0%;
}

.text-hover p,
.text-hover input,
.text-hover span {
  opacity: 0.9;
  cursor: pointer;
}

.text-hover p:hover,
.text-hover input:hover,
.text-hover span:hover {
  opacity: 1;
  transform: scale(1.05);
  transform-origin: 0% 50%;
}

.text-hover p:active,
.text-hover input:active,
.text-hover span:active {
  opacity: 0.8;
  transform: scale(0.95);
  transform-origin: 0% 50%;
}

.text-hover div[style*="text-align:center"]>p,
.text-hover div[style*="text-align:center"]>input,
.text-hover div[style*="text-align:center"]>span {
  transform-origin: 50% 50%;
}

.text-hover div[style*="text-align:right"]>p,
.text-hover div[style*="text-align:right"]>input,
.text-hover div[style*="text-align:right"]>span {
  transform-origin: 100% 50%;
}


.button:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.button:active {
  transform: scale(0.9);
}

.ripple:hover {
  cursor: pointer;
  animation: ripple .7s linear infinite;
  --var-ripple-wide: 0.5em;
}

.ripple:active {
  --var-ripple-wide: 1em;
}

.ani-windows {
  cursor: pointer;
}

.ani-windows:hover .ani-ripple {
  animation: ripple .7s linear infinite;
  --var-ripple-wide: 0.5em;
}

.ani-windows:active .ani-ripple {
  --var-ripple-wide: 1em;
}

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 30%), 0 0 0 var(--var-ripple-wide) rgb(255 255 255 / 30%);
  }

  100% {
    box-shadow: 0 0 0 var(--var-ripple-wide) rgb(255 255 255 / 30%), 0 0 0 calc(2 * var(--var-ripple-wide)) rgb(255 255 255 / 0%);
  }
}

.ani-windows:hover .ani-ripple-inset {
  animation: ripple_inset .7s linear infinite;
  --var-ripple-wide: 0.5em;
}

.ani-windows:active .ani-ripple-inset {
  --var-ripple-wide: 1em;
}

@keyframes ripple_inset {
  0% {
    box-shadow: 0 0 0 0 rgb(255 255 255 / 30%) inset, 0 0 0 var(--var-ripple-wide) rgb(255 255 255 / 30%) inset;
  }

  100% {
    box-shadow: 0 0 0 var(--var-ripple-wide) rgb(255 255 255 / 30%) inset, 0 0 0 calc(2 * var(--var-ripple-wide)) rgb(255 255 255 / 0%) inset;
  }
}

.ani-windows .show-hover {
  display: none;
}

.ani-windows:hover .show-hover {
  display: unset;
}

.ani-windows:hover .ani-zoom {
  transform: scale(1.2);
}

.ani-windows:active .ani-zoom {
  transform: scale(1.1);
}

.drag:hover {
  cursor: grab;
}

.drag:active {
  cursor: grabbing;
}


html,
body,
#root {
  height: 100%;
}

#root {
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

img {
  user-select: none;
}