.popup {display: none;}
.popup .overlay { position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; z-index: 11000; }
.popup .overlay.dark { background: rgba(0,0,0,0.6); }
.popup .overlay.light { background: rgba(220,220,220,0.6); }

.popup .popup-box { padding: 20px; z-index: 11100; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); max-height: 80vh; overflow-y: auto; font-size: 0.8em; }
.popup .popup-box.sm { width: 30vw; }
.popup .popup-box.md { width: 50vw; }

.popup .popup-box .btn-close { font-size: 24px; color: #999; position: absolute; top: -10px; right: -10px; cursor: pointer; }
.popup .popup-box.white-green .btn-close:focus, .popup .popup-box.white-green .btn-close:hover { color: #0a5c11; }

.popup .popup-box.white-green { background: #fff; border: 5px solid #0a5c11; border-radius: 10px; }

.popup .popup-box .popup-content { position: relative; }
.popup .popup-box .popup-content p { line-height: unset; }

.popup .popup-box .heading { font-size: 1.6em; font-weight: bold; padding-bottom: 10px; }
.popup .popup-box .heading i { margin: auto 10px; }

.popup .popup-box .heading.warning { color: #cc0014; }
.popup .popup-box .heading.notice { color: #c76e02; }

@media(max-width: 768px) {
    .popup .popup-box.sm, .popup .popup-box.md { width: 70vw;}
    .popup .popup-box .btn-close { top: -15px; right: -15px; }
    .popup .popup-box .heading { padding-top: 10px; }
}

@media(max-width: 576px) {
    .popup .popup-box.sm, .popup .popup-box.md { width: 90vw;}
    .popup .popup-box .btn-close { top: -20px; right: -20px; }
    .popup .popup-box .heading { padding-top: 10px; }
}