div.footer .info{
	display: none;
}

div.footer.hover {
	color: var(--grey_40);
}


div.footer.hover .info{
	display: block;
  text-align: center;
}

div.footer.hover .notice{
	display: none;
}

div.footer span.notice{
	display: block;
	text-align: center;
	visibility: hidden;
}

div.footer:hover span.notice{
	visibility: visible;
}

div.footer span.notice > *{
	display: inline-block;
	margin-right: .5em;
	}

div.footer .element > *{
	float: right;
	padding: 0 1rem;
	}

div.footer .element > * + *{
	border-right:solid 1px hsl(0, 0%, 60%);
	}

div.footer span.notice{
	/* position: absolute; */
	}

div.footer span.info{
	/* position: absolute; */
	/* padding: 0 1rem; */
	}

div.footer,
div.footer a{
	/* color: var(--text_color) */
	}

div.footer a{
	font-weight:bold;
	text-decoration:none;
	}

div.footer a:hover{
	/* color:#202020; */
	}

div.footer div.element > div.message {
	cursor: pointer;
}

div.footer div.element > div.message:before {
	content: "";
	display: inline-block;
	width: .65rem;
	height: .65rem;
	vertical-align: middle;
	background: hsl(0,0%,60%);
	border-radius: 50%;
}

div.footer div.element > div.green.message:before {
	background: hsl(83, 72%, 36%);
}

div.footer div.element > div.red.message:before {
	background: hsl(359, 46%, 49%);
}

div.footer div.element > div.blue.message:before {
	background: hsl(206, 16%, 80%);
}

div.footer div.element > div.message > div {
	cursor: default;
	position: fixed;
	z-index: 10;
	/* background: var(--foreground_color); */
	display: none;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	padding: var(--space);
	/* border-radius: .5rem; */
	box-shadow: 0 1rem 4rem var(--color_shadow);
	/* color: hsl(0,0%,10%); */
	transition: opacity 1s ease;
	max-height: 80%;
	max-width: 90%;
	overflow: auto;
	box-sizing: border-box;
	background-color: var(--grey_100);
	border-radius: var(--outer_radius);
	word-break: break-all;
}

div.footer div.element > div.message div.green .message {
	color:hsl(83, 72%, 36%);
}

div.footer div.element > div.message.active > div {
	display: block;
}

div.footer div.element > div.message.animate > div {
	opacity: 0;
}


div.footer div.element > div.message.active > div.green.message{
	color:hsl(83, 72%, 36%);
	font-size: 1.5rem;
	}

div.footer div.element > div.message.active > div.red.message{
	color:hsl(359, 46%, 49%);
	font-size: 1.5rem;
	}