@charset "utf-8";
/* CSS Document */

#modal {display: flex; position: fixed; width: 100%; width: 100vw; height: 100%; height: 100vh; left: 0; top: 0; background: rgba(0, 0, 0, 0.3); z-index: 200; cursor: pointer; justify-content: center; align-items: center; }
#modal .inner { position: relative; width: 100%; max-width: 640px; cursor: default; padding: 20px; box-sizing: border-box;  }
#modal .inner #content { position: relative; max-height: 80vh; max-height: calc(100vh - 40px); background: #fff; padding: 0 25px; text-align: left; }
#modal .inner #content:before { content: ""; display: block; margin-bottom: 25px; padding-top: 1px; }
#modal .inner #content:after { content: ""; display: block; margin-top: 25px; padding-bottom: 1px; }
#modal .inner .closeButton { position: absolute; top: 7px; right: 7px; width: 30px; height: 30px; background: red; border-radius: 50%; box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.3); }
#modal .inner .closeButton:before { content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(45deg); border-radius: 2px; }
#modal .inner .closeButton:after { content: ""; position: absolute; background: #fff; width: 16px; height: 2px; top: 50%; left: 50%; margin-top: -1px; margin-left: -8px; transform: rotate(-45deg); border-radius: 2px; }
#modal .inner .closeButton:hover { transform: scale(1.05); }