.modal{display:none;position:fixed;z-index:65536;top:0;left:0;width:100%;height:100%;color:#000}.modal .modal-wrapper{position:absolute;box-sizing:border-box;box-shadow:0 5px 15px #555;display:flex;flex-direction:column;padding:0;top:50%;left:50%;width:60%;max-height:90%;border-radius:8px;background-color:#fff;transform:translate(-50%,-50%);overflow:hidden}.modal .modal-wrapper .modal-head{padding:.5em;font-size:1.5em}.modal .modal-wrapper .modal-body{padding:10px;overflow:auto}.modal .modal-wrapper .modal-footer{display:flex;flex-direction:row;justify-content:flex-end;padding:10px;height:30px;border-radius:8px}.modal .modal-wrapper .modal-footer button{margin-right:8px}.modal .modal-wrapper.large{width:80%}.modal .modal-wrapper.middle{width:65%}.modal .modal-wrapper.small{width:40%}.modal .modal-wrapper.full .head{display:none}.modal .modal-wrapper.full .body{padding:0;margin:0;overflow:auto}.modal .modal-bg{width:100%;height:100%;background-color:rgba(0,0,0,.5);cursor:pointer}.modal .close-modal{position:absolute;top:.5em;right:.5em;cursor:pointer;user-select:none}.modal .close-modal .icon{font-size:2em}@media screen and (max-width:1024px){.modal .modal-wrapper{width:70%}}@media screen and (max-width:768px){.modal .modal-wrapper{width:80%}}@media screen and (max-width:600px){.modal .modal-wrapper{min-height:100%;width:100%;border-radius:0}}