.Modal {
	position: fixed;
	width: 100%; height: 100%;
	left: 0; top: 0; right: 0; bottom: 0;

	display: flex;
	justify-content: center;
	align-items: center;

	transition: opacity .5s;
	background: rgba(black, .65);
	opacity: 0;
	&.visible { opacity: 1 }
	&.hidden { display: none }
}

.Dialog {
	margin: dist(-1);
	padding: dist(0);
	overflow: hidden;

	max-width: 100%;
	max-height: 100%;
	flex: 0 1 30rem;
	//min-height: 15rem;

	background: #1c1c1e;
	border-left: 6px solid $c-form-highlight;
	border-right: 6px solid $c-form-highlight;
	box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;

	border-radius: 6px;

	h1,h2 {
		margin-top:0;
	}

	p:last-child {
		margin-bottom: 0;
	}
}

// "toast"
.NotifyMsg {
	position: fixed;
	bottom: dist(2);
	padding: dist(-1) dist(0);

	// center horizontally
	left: 50%;
	@include translate(-50%,0);
	// hack to remove blur in chrome
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-transform: translateZ(0) scale(1.0, 1.0);

	background: #37a349;
	&.error {
		background: #d03e42;
	}

	color: white;
	text-shadow: 0 0 2px black;
	box-shadow: 0 0 6px 0 rgba(black, .6);
	border-radius: 5px;

	max-width: 80%;

	@include media($phone) {
		width: calc(100% - #{dist(0)});
	}

	transition: opacity .5s;
	opacity: 0;
	&.visible { opacity: 1 }
	&.hidden { display: none }
}