.modal{
	display: block;
	position: fixed;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.2s, z-index 0s 0.2s;
	text-align: center;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	cursor: pointer;
}

.modal > * {
	display: inline-block;
	white-space: normal;
	vertical-align: middle;
	text-align: left;
}

.modal:before {
	display: inline-block;
	overflow: hidden;
	width: 0;
	height: 100%;
	vertical-align: middle;
	content: "";
}

.modal-visible .modal {
	z-index: 10000000000 /*9999*/;
	opacity: 1;
	transition: opacity 0.2s;
}

.modal-inner {
    position: relative;
    overflow: auto;
    max-width: calc(100vw - 16px);
    max-height: calc(85vh - 16px);
    background: #fff;
    z-index: -1;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.2s, transform 0.2s, z-index 0s 0.2s;
    border-radius: 6px;
}
.modal-visible .modal-inner {
    z-index: 100;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.2s, transform 0.2s;
	cursor: auto;
}

#modal-content {
    padding: 16px;
}

#modal-content img {
	aspect-ratio: auto;
    object-fit: contain;
    width: 100%;
    height: 100%;
    max-height: calc(90vh - 54px);
}

@media (min-width: 600px) {
	.modal-inner {
		max-height: calc(90vh - 16px);
	}
}