.modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; }   
.modal:after{ content:""; z-index: -2; position: fixed; left: 0; top: 0; width: 100%; height: 100%;  background-color: rgba(0,0,0,0.1);}
.modal-content { 
	background-color: #fefefe; width: 550px; max-width: 90%; border-radius: 10px; position: relative; z-index: 9;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; 
	box-shadow: 1px 1px 50px rgb(0 0 0 / 30%);overflow: hidden;
}
.modal-content:before { content: "×"; font-size: 30px; line-height: 1em; pointer-events: none; margin-bottom: 10px; position: absolute; top: 6px; right: 10px; }
.modal-content:hover:before { opacity: .7; }
.modal .modal-title{height: 38px; width: 100%; margin-left: 0px; margin-top: 0px;position: absolute;}

.close { position: absolute; width: 40px; height: 38px; top: 0; right: 0; }
.buttons { text-align: right; padding-top: 20px; }
.modal button { width: 80px; line-height: 36px; border-radius: 6px; text-align: center; background-color: #fadb00; color: #000; cursor: pointer; }
.modal button:hover { opacity: .7; }
.modal > .shade{
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: -1;
}