/* POP BACKGROUND / CONTAINER ========================== */
.mz-pop-bg {
	background-color: rgba(217, 217, 217, 0.5);
	transition: opacity 0.5s ease-in-out;
	overflow: hidden;
	cursor: pointer;
	position: fixed;
	left: -10%;
	top: -10%;
}
.mz-pop-bg.hidden {
	opacity: 0;
}
.mz-pop-bg.show {
	opacity: 1;
}


/* POP BOX ============================================= */
.mz-pop {
	transition: top 0.7s ease-in-out, transform 0.7s ease-in-out;
	transition: top 0.7s cubic-bezier(.75,.6,.71,1.11), transform 0.7s ease-in-out;
	box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.1);
	/*padding: 1.5rem 1.25rem 1rem 1.25rem;*/
	background-color: #fcfcfc;
	box-sizing: border-box;
	flex-direction: column;
	border-radius: 1em;
	max-height: 90vh;
	min-width: 300px;
	max-width: 800px;
	position: fixed;
	cursor: default;
	display: flex;
	width: 90vw;
}
.mz-pop.no-transition {
	transition: 0s !important;
}

/* MAXIMIZED =========================================== */
.mz-pop-bg.fullscreen.show .mz-pop {
	max-height: 100%;
	min-height: 100%;
	min-width: 100%;
	max-width: 100%;
	height: 100%;
	width: 100%;
	left: 50%;
	top: 50%;
}
body.mz-pop-fullscreen {
	overflow: hidden !important;
}

/* CENTERED - DEFAULT ================================== */
.mz-pop-bg.centered {
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
}
.mz-pop-bg.centered .mz-pop {
	transform: translateX(-50%) translateY(-50%);
	left: 50% !important;
	top: 50% !important;
}
.mz-pop-bg.hidden .mz-pop,
.mz-pop-bg.centered.hidden .mz-pop {
	top: -120% !important;
}
.mz-pop-bg.mz-pop-minimized.hidden .mz-pop,
.mz-pop-bg.floating.mz-pop-minimized.hidden .mz-pop,
.mz-pop-bg.centered.mz-pop-minimized.hidden .mz-pop {
	top: 120% !important;
}

/* MOVABLE - FLOATING ================================== */
.mz-pop-bg.floating {
	height: 0;
	width: 0;
}
.mz-pop-bg.floating .mz-pop,
.mz-form-pop.mz-pop-bg.floating .mz-pop {
	min-height: 10vh !important;
	min-width: 10vw !important;
	max-width: 100vw !important;
}
.mz-pop-bg.floating .mz-pop {
	-webkit-box-shadow: 5px 5px 53px 0px rgba(0,0,0,0.12);
	-moz-box-shadow: 5px 5px 53px 0px rgba(0,0,0,0.12);
	box-shadow: 5px 5px 53px 0px rgba(0,0,0,0.12);
}

/* POP WIDTHS */
.mz-pop-bg.mz-pop-70vw .mz-pop {
	min-width: 70vw !important;
}
.mz-pop-bg.mz-pop-80vw .mz-pop {
	min-width: 80vw !important;
}
.mz-pop-bg.mz-pop-90vw .mz-pop {
	min-width: 90vw !important;
}

/* MINIMIZED =========================================== */
/* MINIMIZED POPUP */
.mz-pop-bg.mz-pop-minimized {
	background-color: transparent;
	filter: unset;
}
.mz-pop-bg.mz-pop-minimized .mz-pop {
	transform: translateX(-50%) scale(0.1);
	top: 120% !important;
}
/* MINIMIZED TITLE */
.mz-pop-min {
	transition: 0.1s ease-in-out;
	background-color: white;
	text-overflow: ellipsis;
	padding: 0 2em 0 0.5em;
	display: inline-block;
	border-radius: 0.2em;
	white-space: nowrap;
	position: relative;
	margin: 0 1em 0 0;
	overflow: hidden;
	line-height: 2em;
	cursor: pointer;
	max-width: 20em;
	min-width: 6em;
	color: black;
	height: 2em;
	width: auto;
	flex: 1;
}
.mz-pop-min::after {
	font: normal normal normal 14px FontAwesome;
	transform: translateY(-50%);
	display: inline-block;
	text-rendering: auto;
	position: absolute;
	content: "\f2d0";
	color: #7ab0e6;
	right: 0.5em;
	padding: 0;
	margin: 0;
	top: 50%;
}
.mz-pop-min:hover {
	transform: scale(1.05);
}
/* BAR */
.mz-pop-bar {
	background-color: rgba(0,0,0,0.3);
	flex-direction: row;
	padding: 0.5em 1em;
	flex-wrap: wrap;
	position: fixed;
	display: flex;
	height: auto;
	width: 100%;
	bottom: 0;
}

/* POP BODY SEGMENTS =================================== */
.mz-pop-head {
	border-bottom: 1px solid #e3e3e3;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	text-align: center;
	font-size: 1.2rem;
	padding: 0.5em 0;
	flex-shrink: 0;
	flex-grow: 0;
	cursor: move;
	width: 100%;
}
.mz-pop-fixed .mz-pop-head {
	cursor: default;
}
.mz-pop-abs-body .mz-pop-body {
	position: relative;
	padding: 0;
}
.mz-pop-body {
	background-color: white;
	padding: 1em 2em;
	min-height: 3em;
	overflow: auto;
	flex-shrink: 1;
	flex-grow: 1;
	ms-flex: 1;
	flex: 1;
}
@media screen and (max-width: 700px) {
	.mz-pop-body {
		padding: 1vmin 2vmin;
		padding: max(1vmin, 1em) max(2vmin, 1.4em);
	}
}
.mz-pop-foot {
	border-top: 1px solid #e3e3e3;
	text-align: center;
	padding: 0.25em;
	flex-shrink: 0;
	flex-grow: 0;
	width: 100%;
}

/* POP MINI ICON BUTTONS =============================== */
/* POPUP ICON CONTAINER */
.mz-pop-icons {
	position: absolute;
	right: 1em;
	top: 0.9em;
}
.mz-pop-no-icons .mz-pop-icons {
	display: none;
}
/* POPUP ICON BUTTON */
.mz-pop-ico {
	display: inline-block;
	border-radius: 0.4em;
	text-align: center;
	position: relative;
	margin-left: 1em;
	cursor: pointer;
	height: 1em;
	width: 1em;
}
.mz-pop-ico:hover {
	transform: scale(1.1);
}
.mz-pop-ico:active {
	transform: scale(1.05);
}
.mz-pop-ico::before {
	font: normal normal normal 14px FontAwesome;
	transform: translateX(-50%) translateY(-50%);
	display: inline-block;
	text-rendering: auto;
	position: absolute;
	padding: 0;
	margin: 0;
	left: 50%;
	top: 50%;
}

.mz-pop-resize {
	cursor: nwse-resize;
	position: absolute;
	bottom: 0.15em;
	right: 0.15em;
	height: 2em;
	width: 2em;
}
.mz-pop-resize::after {
	position: absolute;
	content: " ";
	height: 80%;
	width: 80%;
	left: 10%;
	top: 10%;
}
.mz-pop-resize, .mz-pop-resize::after {
	border-bottom: 2px solid #e3e3e3;
	border-right: 2px solid #e3e3e3;
	border-radius: 0 0 0.7rem 0;
}
.mz-pop-resize:hover {
	transform: scale(1.1);
}
.mz-pop-resize:hover, .mz-pop-resize:hover::after {
	border-color: #91c8ff;
}
.mz-pop-no-resize .mz-pop-resize {
	display: none !important;
}

/* CLOSE BUTTON */
.mz-pop-kill { background-color: #a1abb5; color: white; }
.mz-pop-kill:hover { background-color: #bbc6d0; }
.mz-pop-kill::before { content: "\f00d"; }

/* FULLSCREEN BUTTON */
.mz-pop-full { color: #7ab0e6; }
.mz-pop-full:hover { color: #91c8ff; }
.mz-pop-full::before { content: "\f2d0"; font-size: 20px; }
/* .mz-pop-fullscreen .mz-pop-full::before { content: "\f2d1"; } */

/* MINIMIZE BUTTON */
.mz-pop-minb { color: #7ab0e6; }
.mz-pop-minb:hover { color: #91c8ff; }
.mz-pop-minb::before { content: "\f2d1"; }

/* LARGE BUTTONS */
.mz-pop-delete {
	position: absolute !important;
	transform: translateY(-50%);
	margin: 0 !important;
	right: 2em;
	top: 50%;
}
.mz-pop-delete:active {
	transform: translateY(-49%)!important;
}

/* VARIATIONS ========================================== */
/* UNCLOSABLE */
.mz-pop-bg.mz-pop-noclose { cursor: default; }
.mz-pop-noclose .mz-pop-kill { display:none; }

/* ERR/INF/CONF DIALOGS */
/* INFO */
.mz-pop-info {
	cursor: pointer;
}
.mz-pop-info .mz-pop-icons { display: none; }
.mz-pop-info .mz-pop-foot { border-top: none; }
.mz-pop-info .mz-pop-body { min-height: 1px; border-radius: 0 0 1em 1em; }
.mz-pop-info .mz-pop { top: 50%; }
.mz-pop-info .mz-pop-head {
	border-bottom-color: #b8d8ea;
	padding-right: 0.5em;
	padding-left: 0.5em;
	text-align: left;
	color: #498da2;
	cursor: unset;
}
.mz-pop-info .mz-pop-head .fa {
	margin-right: 7px;
	color: #91c4d3;
}
/* ERROR */
.mz-pop-error {
	cursor: pointer;
}
.mz-pop-error .mz-pop-icons { display: none; }
.mz-pop-error .mz-pop-foot { border-top: none; }
.mz-pop-error .mz-pop-body { min-height: 1px; border-radius: 0 0 1em 1em; }
.mz-pop-error .mz-pop { top: 50%; }
.mz-pop-error .mz-pop-head {
	border-bottom-color: #d9a2a2;
	padding-right: 0.5em;
	padding-left: 0.5em;
	text-align: left;
	color: #a63434;
	cursor: unset;
}
.mz-pop-error .mz-pop-head .fa {
	margin-right: 7px;
	color: #d76565;
}

/* CONFIRM */
.mz-pop-confirm {
	
}
.mz-pop-confirm .mz-pop-icons { display: none; }
.mz-pop-confirm .mz-pop-head { border-bottom: none; cursor: unset; }
.mz-pop-confirm .mz-pop-foot { border-top: none; }
.mz-pop-confirm .mz-pop-body { min-height: 1px; }

/* SAVEDPOPS STATE INFO */
#mzpopstates { display: none; }