/* Modals */
/* Full-Page Working Layers */
body.modal-open {
	overflow: hidden;
}

/* Modal container and screen */
.modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1); /* semi-transparent backdrop */
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, visibility 0s linear 250ms;
	z-index: 20000;
	overflow: hidden;
}

	.modal.show {
		opacity: 1;
		visibility: visible;
		transition: opacity 500ms ease;
	}

/* Visible modal box */
.modal-content {
	position:absolute;
	display:inline-block;
	width:calc(100% - (var(--margin) * 2));
	height:auto;
	max-height:calc(100% - (var(--margin) * 4));
	top:0px;
	left:0px;
	background:rgb(255,255,255,.95);
	border-radius:var(--radius-tight);
	margin:var(--margin-l);
	margin-top:calc(var(--header-height) + var(--margin-m));
	padding:0px var(--margin-l);
	padding-top:90px;
	box-shadow:var(--shadow);
	z-index: 20001;
	overflow-y: auto !important; /* allows scroll within */
}

	.modal-content h2 {
		position:fixed;
		left:var(--margin-l);
		top:calc(var(--header-height) + var(--margin-m));
		width:calc(100% - (var(--margin-l) * 2));
		background-color:rgb(255,255,255,.95);
		z-index:20002;
		padding:var(--margin-m) var(--margin-l);
		border-radius:var(--radius-tight);
	}
	

/* Modal close button */
.modal-close {
	position: fixed;
	top:124px;
	right:calc(var(--margin-l) + var(--margin-s));
	cursor:pointer;
	padding:12px;
	box-shadow:none;
	margin:0px;
	height:var(--margin);
	width:var(--margin);
	min-width:var(--margin);
	background-color:var(--lighter);
	filter:none;
	z-index:20003;
	display:none; /* Hide it for now */
}

	.modal-close:hover {
		background-color:var(--green);
		filter:none;
	}
	
	button.modal-close svg {
		position:absolute;
		top:16px;
		left:16px;
		height:13px;
		width:13px;
		color:var(--darker);
	}

	button.modal-close:hover svg {
		filter:brightness(500%);
	}