/* The Modal (background) */
.modal {
	display: none;
	position: absolute;
	z-index: 1;
	width: 100%; 
	height: 100%; 
	overflow: hidden;
	background-color: rgb(255,255,255); /* Fallback color */
	background-color: rgba(255,255,255,0.4); /* Black w/ opacity */
	-webkit-animation-name: fadeIn; /* Fade in the background */
	-webkit-animation-duration: 0.4s;
	animation-name: fadeIn;
	animation-duration: 0.4s;
}

/* Modal Content */
.modal-content {
	position: absolute;
	left:50%;
	top:50%;
	transform: translate(-50%, -50%);

	background-color: #fefefe;
	width: 300px;
	height: 160px;
	-webkit-animation-name: slideIn;
	-webkit-animation-duration: 0.4s;
	animation-name: slideIn;
	animation-duration: 0.4s;
	-webkit-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 2px 2px 10px 0px rgba(0,0,0,0.5);
}

/* The Close Button */
.close {
	color:var(--theme-dark-hex);
	float: right;
	font-size: 16px;
	font-weight: bold;
}

.close:hover,
.close:focus {
	color: var(--theme-dark-hex);
	text-decoration: none;
	cursor: pointer;
}

.modal-header {
	padding: 2px 16px;
	background-color: #ffffff;
	color: #181819;
	height:20px;
}

.modal-body {padding: 2px 16px; color:#181819}
.modal-body h6, .modal-body p { color:#181819 }
.modal-body h6 { font-size:14pt; }
.modal-body p { font-size:10pt; line-height:1.2; }

.modal-footer {
	padding: 2px 16px;
	background-color: #ffffff;
	color: white;
	height:10px;
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* Add Animation */
@-webkit-keyframes slideIn {
	from {bottom: -300px; opacity: 0} 
	to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
	from {bottom: -300px; opacity: 0}
	to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
}

@keyframes fadeIn {
	from {opacity: 0} 
	to {opacity: 1}
}