@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;
}