@charset "utf-8";

#twd_popup_window {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 500px;
    max-height: 80vh;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    animation: twd_popup_window_popup 1000ms 1;
    z-index: 100000;
}

@keyframes twd_popup_window_popup {
  0% { transform: translate(-50%, -50%) scale(.1); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.close {
    margin: 0;
    padding: 0px;
    background: none;
    position: absolute;
    width: 40px;
    height: 40px;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.close:hover {
  animation: tada_1116 3.6s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes tada_1116 {
  0% { transform: scale(1) }
  5.55556% { transform:scale(.9) rotate(-8deg) }
  11.11111% { transform:scale(.9) rotate(-8deg) }
  16.66667% { transform:scale(1.3) rotate(8deg) }
  22.22222% { transform:scale(1.3) rotate(-8deg) }
  27.77778% { transform:scale(1.3) rotate(8deg) }
  33.33333% { transform:scale(1.3) rotate(-8deg) }
  38.88889% { transform:scale(1.3) rotate(8deg) }
  44.44444% { transform:scale(1) rotate(0) }
  100% { transform:scale(1) rotate(0) }
}
.close:before, .close:after {
    content: "";
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 4px;
}
.close:before {
  transform: rotate(45deg);
}
.close:after {
  transform: rotate(-45deg);
}
.close span {
  display: block;
}