.modal-off{display:none}.modal-on{display:flex}.modal{position:fixed;top:0;left:0;background-color:rgba(20,20,20,.8);justify-content:center;align-items:center;height:100%;width:100%;overflow-y:hidden}.modal-dialog{position:relative;top:0;color:#d3d3d3;background-color:#222;width:500px;height:300px;padding:20px}.modal-title{display:inline-block;color:#5f9ea0;font-size:1.5em;font-weight:700}.modal-button{background-color:#5f9ea0;color:#fff;border:1px solid #fff;font-weight:700;text-align:center;width:100px;height:30px;cursor:pointer;float:right;padding:5px;margin-left:20px}.modal-button:hover{background-color:#fff;color:#5f9ea0;border:1px solid #5f9ea0}.modal-button:disabled{background-color:#a9a9a9;color:#fff;border:1px solid #fff}.modal-close{cursor:pointer;background:#222;border:none;float:right;color:gray}.modal-close::after{content:"X"}.modal-close:hover{color:#a9a9a9}.modal-icon{display:inline-block;width:48px;height:48px;margin-right:10px;vertical-align:-15px}