.popOuter {

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

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

	background-color: rgba(0,0,0,0.5);

	animation-name: popOuterEnter;
	animation-duration: 0.5s;

	/*z-index: 2147483647;*/
	z-index: 220;

}

.popInner {

	display: flex;
	flex-direction: column;

	width: 550px;
	max-width: 95%;

	/*height: 400px;*/
	max-height: 95%;

	padding-bottom: 10px;

	background-color: var(--background-color);

	border-radius: 10px;
	overflow-x: hidden;

	border: solid 2px var(--color-base);

	box-shadow: 0 0 20px rgba(0,0,0,0.5);

	animation-name: popInnerEnter;
	animation-duration: 0.5s;

}

.popInner .popTitle {

	background-color: var(--color-base);
	color: white;
	font-weight: bold;

	padding: 5px 10px;
	margin-bottom: 10px;

	width: 100%;

}

.popInner p {

	padding: 0 10px;
	margin:  10px 0;

}

.popInner .bottomButtons {

	display: flex;

	padding: 5px;
	margin-top: 10px;

	justify-content: space-evenly;

	width: 100%;
}

@keyframes popOuterEnter {
	from { background-color: rgba(0,0,0,0);   }
	to   { background-color: rgba(0,0,0,0.5); }
}

@keyframes popOuterExit {
	from { background-color: rgba(0,0,0,0.5); }
	to   { background-color: rgba(0,0,0,0);   }
}

@keyframes popInnerEnter {
	from { transform: translate(0, 100vh); }
	to   { transform: translate(0, 0    ); }
}

@keyframes popInnerExit {
	from { transform: translate(0, 0);      }
	to   { transform: translate(0, -100vh); }
}