.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: 390px; width: 100%; background: #fff; padding: 20px; border-radius: 5px; 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%; font-size: 16px; font-weight: 600; padding: 0 15px 5px 15px; border-bottom: 1px solid #c0c0c0; display: flex; align-items: center; justify-content: space-between;
}

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

.modalContent p {
	margin: 10px 0;
}

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

@media (max-width: 700px) {
	.modalContent {
		max-height: 500px;
	}
}