/* Shadows */
div#hoikuen-map {
    display: block;
    position: relative;
    z-index: 1;
}
div#hoikuen-map::before {
    background-color: rgba(255,255,255,0);
    width: 11px;
    content: '';
    position: absolute;
    z-index: 2;
    box-shadow: inset 11px 0px 8px -11px rgba(60, 64, 67, 0.35);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}
div#control-panel-container {
    box-shadow: inset 2px 1px 2px rgba(60, 64, 67, 0.3), inset 2px 2px 6px 2px rgba(60, 64, 67, 0.15);
}

/* Indicator */
.htmx-indicator{
    display:none;
}
.htmx-request .htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator{
    display:inline;
}
.htmx-request.htmx-indicator ~ #hoikuen-list {
    display:none;
}
.htmx-request.htmx-indicator ~ #hoikuen-view {
    display:none;
}

/* Animator */
.slide-in {
  -webkit-animation: slide-in 1s;
  animation: slide-in 1s ease;
  transform: translate(-320px, 0px);
}
.slide-out {
  -webkit-animation: slide-out 0.75s;
  animation: slide-out 0.75s ease;
  transform: translate(0px, 0px);
}
@keyframes slide-in {
  0%   {
    transform: translate(0px, 0px);
  }
  100%   {
    transform: translate(-320px, 0px);
  }
}
@keyframes slide-out {
  0%   {
    transform: translate(-320px, 0px);
  }
  100%   {
    transform: translate(0px, 0px);
  }
}