/**
 * LeaderEduca Tools — modal
 *
 * Baseado no <dialog> nativo: foco, Esc e empilhamento ficam por conta do
 * navegador. O ::backdrop substitui a camada escura da lightbox anterior.
 */

.le-modal-wrap {
	line-height: 0;
}

.le-modal__trigger {
	display: inline-block;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	cursor: pointer;
}

.le-modal__trigger img {
	display: block;
	width: 100%;
	height: auto;
}

.le-modal {
	position: fixed;
	max-width: calc( 100% - 40px );
	max-height: calc( 100% - 40px );
	margin: auto;
	border: 0;
	color: inherit;
	line-height: normal;
	overflow: auto;
	overscroll-behavior: contain;
}

.le-modal:not([open]) {
	display: none;
}

.le-modal__close {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	background: transparent;
	color: currentColor;
	font-family: inherit;
	line-height: 1;
	cursor: pointer;
	opacity: 0.9;
}

.le-modal__close:hover {
	opacity: 1;
}

.le-modal__header {
	padding: 0 0 10px;
}

.le-modal__title {
	margin: 0;
	line-height: 1.2;
}

.le-modal__content > *:first-child {
	margin-top: 0;
}

.le-modal__content > *:last-child {
	margin-bottom: 0;
}

.le-modal__content img {
	max-width: 100%;
	height: auto;
}

.le-modal__content table {
	width: 100%;
	border-collapse: collapse;
}

/* Trava a rolagem do fundo enquanto o modal está aberto. */
body.le-modal-open {
	overflow: hidden;
}

@media ( max-width: 767px ) {
	.le-modal {
		max-width: calc( 100% - 20px );
	}

	.le-modal__content table,
	.le-modal__content tbody,
	.le-modal__content tr,
	.le-modal__content td {
		display: block;
		width: auto !important;
		padding-right: 0 !important;
	}
}