/* Modal overlay */

body.modal-open {
	overflow: hidden;
}

#modal-container {
	display: none;
}

#modal-container.show {
	display: block;
}

#modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	transition: opacity 0.2s ease-in-out;
	opacity: 0;
}

#modal-container.open #modal-overlay {
	opacity: 1;
}

/* Modal box */

.modal-box {
	z-index: 120;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 462px;
	height: 630px;
	background-color: var(--edirt-white);
	border-radius: 12px;
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

#modal-container.open .modal-box {
	opacity: 1;
}

/* Aaron's stuff (TODO : Consolidate this) */

.blocker {
	background-color: rgba(0, 0, 0, 0.6) ;
	z-index: 15;
}

#sign-in-modal {
	max-width: 338px;
}

.soil-profile-onboarding-modal {
	max-width: 540px;
	background-color: var(--edirt-blue-1);
	color: var(--edirt-white);
}

.soil-profile-onboarding-modal #close-button {
	position: absolute;
	top: -8px;
	right: -5px;
}

.soil-profile-onboarding-modal img {
	margin-left: -24px;
	margin-right: -24px;
	margin-top: -24px;
}

.modal-divider {
	width: calc(100% + 48px);
	height: 10px;
	background-color: var(--edirt-blue-2);
	margin-left: -24px;
}

.modal {
	z-index: 20;
	box-shadow: none;
	border-radius: 12px;
	padding: 24px;
	overflow: hidden;
}

.modal a.close-modal {
	display: none;
}

.modal #close-button {
	width: 40px;
	height: 40px;
	align-self: end;
}

.modal-content {
	display: flex;
	flex-direction: column;
	position: relative;
}