/* ANIMATIONS ========================================== */
@keyframes promptbgin  { from { opacity: 0; } to { opacity: 1; } }
@keyframes promptbgout { from { opacity: 1; } to { opacity: 0; } }
/*
@keyframes promptboxin { from { left: -150%; top: 150%; } to { left: 50%; top: 50%; } }
@keyframes promptboxout { from { left: 50%; top: 50%; } to { left: 150%; top: -150%; } }
*/
@keyframes promptboxin {
	from { transform: translateX(-50%) translateY(-50%) scaleX(0.01); }
	to { transform: translateX(-50%) translateY(-50%); } }
@keyframes promptboxout {
	from { transform: translateX(-50%) translateY(-50%); }
	to { transform: translateX(-50%) translateY(-50%) scaleY(0.01); } }

/* POP BACKGROUND / CONTAINER ========================== */
.mz-prompt-bg {
	background-color: rgba(217, 217, 217, 0.5);
	overflow: hidden;
	cursor: pointer;
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.mz-prompt-bg {
	animation: promptbgin 0.3s ease-out forwards;
}
.mz-prompt-closing.mz-prompt-bg {
	animation: promptbgout 0.3s ease-in forwards;
}

/* POP ================================================= */
.mz-prompt-box {
	animation: promptboxin 0.3s ease-out forwards;
	transform: translateX(-50%) translateY(-50%);
	border: 1vmin solid #3baeda;
	background-color: white;
	border-radius: 1em;
	position: fixed;
	cursor: initial;
	left: 50%;
	top: 50%;
	
	max-height: 90vh;
	max-width: 98vw;
	width: 20em;
	
	flex-direction: column;
	display: flex;
}
.mz-prompt-closing .mz-prompt-box {
	animation: promptboxout 0.3s ease-in forwards;
}

.mz-prompt-head, .mz-prompt-foot {
	padding: 0.5em;
}
.mz-prompt-head {
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	background-color: #3baeda;
	text-align: center;
	font-weight: 600;
	font-size: 1.1em;
	color: #ffffff;
	width: 100%;
}
.mz-prompt-body {
	padding: 0 0.5em;
	min-height: 5em;
	overflow: auto;
	width: 100%;
	flex: 1;
}

.mz-prompt-foot {
	text-align: center;
	width: 100%;
}

/* BODY FLAVORS ======================================== */
.mz-prompt-coder.mz-prompt-box {
	height: 90vh;
	width: 80em;
}
.mz-prompt-coder .mz-prompt-body {
	position: relative;
	min-height: 50vh;
	overflow: hidden;
	padding: 0;
}
.mz-prompt-coder > .mz-prompt-body > * {
	position: absolute!important;
	bottom: 0!important;
	right: 0!important;
	left: 0!important;
	top: 0!important;
}
.mz-prompt-wider.mz-prompt-box {
	width: 30em;
}

/* PROMPT ELEMENT ====================================== */
.mz-prompt {
	padding: 1em 2em;
	width: 100%;
}

/* ORDER =============================================== */
.mz-prompt-order-pop.mz-prompt-box {
	width: 25em;
}
.mz-prompt-order-pop.mz-prompt-box .mz-prompt-body {
	padding: 1vmin 1.5vmin;
}
.mz-prompt-order {
	display: block;
	width: 100%;
}
.mz-prompt-order-title {
	padding: 0 0.5em;
	flex: 1;
}
.mz-prompt-order-item.mz-order {
	border: 2px solid #eeeeee;
	align-items: center;
	flex-direction: row;
	padding: 0.5em 1em;
	border-radius: 1em;
	margin: 0.1em 0;
	display: flex;
	cursor: grab;
	width: 100%;
}
.mz-prompt-order-item:hover > .fa:last-child,
.mz-prompt-order-item:hover > .mz-prompt-order-title {
	color: #3baeda;
}
.mz-order.mz-prompt-order-item > .fa.mz-prompt-order-check {
	cursor: pointer !important;
}
.mz-order.mz-prompt-order-item > .fa.mz-prompt-order-check::before {
	margin-top: 0.03em;
	font-size: 1.5em;
}
.mz-prompt-order-item > .fa {
	position: relative;
	display: block;
	width: 1em;
}
.mz-prompt-order-item > .fa::before {
	transform: translateX(-50%) translateY(-50%);
	position: absolute;
	font-size: 1em;
	left: 50%;
	top: 50%;
}
.mz-prompt-order-check::before {
	content: "\f096";
}
.mz-prompt-order-check.mz-checked::before {
	content: "\f14a";
}