@charset "utf-8";
div.Popup {
  display: inline;
  position: relative;
  z-index: 10000; }
  div.Popup.open {
    animation: PopupOpen 0.5s alternate 1 forwards; }
  div.Popup.close {
    animation: PopupClose 0.5s alternate 1 forwards; }
  div.Popup.closed {
    display: none;
    pointer-events: none; }
  div.Popup .PopupBG {
    content: '';
    display: block;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: rgba(0, 0, 0, 0.3); }
  div.Popup .PopupBody {
    display: block;
    max-width: 64rem;
    width: 90vw;
    max-height: 90vh;
    height: auto;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 50%;
    margin: auto;
    border-radius: 1rem;
    background-color: #fefefe;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transform: -webkit- translateY(-50%);
    transform: translateY(-50%); }
    div.Popup .PopupBody .PopupControl .close {
      position: absolute;
      width: 3rem;
      height: 3rem;
      top: 1rem;
      right: 1rem; }
      div.Popup .PopupBody .PopupControl .close::before, div.Popup .PopupBody .PopupControl .close::after {
        content: '';
        position: absolute;
        top: 1.5rem;
        width: 3rem;
        height: 1px;
        background-color: #444; }
      div.Popup .PopupBody .PopupControl .close::before {
        transform: -webkit- rotateZ(45deg);
        transform: rotateZ(45deg); }
      div.Popup .PopupBody .PopupControl .close::after {
        transform: -webkit- rotateZ(-45deg);
        transform: rotateZ(-45deg); }

@keyframes PopupOpen {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
@keyframes PopupClose {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }