.modal {
	position: fixed; top: 0; left: 0; height: 100vh; width: 100vw; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; opacity: 0; pointer-events: none;
}

.modal.showModal {
	opacity: 1; pointer-events: auto;
}

.modalContainer {
	max-width: 380px; width: 100%; background: #fff; font-size: 16px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.modalHeader {
	width: 100%; padding: 20px; font-weight: 600; border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.modalContent {
	width: 100%; padding: 20px; font-size: 15px; max-height: 550px; overflow: auto;
}

.modalContent p {
	width: 100%; margin: 10px 0;
}

.modalContent ul {
	list-style: square; margin-left: 20px; margin-top: 20px;
}

.modalContent ul li {
	font-size: 14px; font-style: italic;
}

.modalFooter {
	width: 100%; padding: 10px; font-size: 14px; text-align: center; border-top: 1px solid rgba(0, 0, 0, 0.1);
}