.modal{display:none;position:fixed;z-index:9999;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4)}
.modal[middle='0']{padding-top:20px}
.modal-content{position:relative;background-color:#fff;margin:auto;border-radius:3px;width:80%;max-width:99%;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name:animatetop;-webkit-animation-duration:.4s;animation-name:animatetop;animation-duration:.4s}
.modal-header{padding:4px 8px 4px 12px;min-height:32px;line-height:32px;background:#f1f1f8;border-bottom:solid 1px #ccc;border-top-left-radius:4px;border-top-right-radius:4px}
.modal-close{color:#aaa;float:right;font-size:24px;font-weight:700;cursor:pointer}
.modal-close:hover,.modal-close:focus{color:#555}
.modal-title{font-weight:600;font-size:14px;color:#333}
.modal-body iframe{border:none;width:100%;max-height:90vh;min-height:92px}
.modal-body>div{padding:.5em 1em}
.modal-body:has(table){padding:.5em 1em}
html[dark] .modal-content{background-color:#1b1a19;box-shadow:0 0px 4px 1px #fff}
html[dark] .modal-header{background-color:#1b1a19}
html[dark] .modal-title{color:#f3f2f1}
@media only screen and (max-width:760px),(min-device-width:168px) and (max-device-width:1024px){
    .modal[middle='0']{padding-top:2px}
    .modal-content{width:100%}
    .modal-body iframe{max-height:94vh}
}
@-webkit-keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}
@keyframes animatetop{from{top:-300px;opacity:0}to{top:0;opacity:1}}