div.footer{
	background: var(--color_shade_1);
	height:2rem;
	line-height:2rem;
	/* width: 100%; */
	left: var(--double_space);
	right: var(--double_space);
	position: fixed;
	z-index: 3;
	bottom: 0;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	transition: background-color .3s ease-in;
	/* box-shadow: 0 -.25em 1em hsla(0, 0%, 0%, 0.1); */
	border-radius: var(--space) var(--space) 0 0;
	}

div.footer .info{
	display: none;
}

div.footer.hover {
	background-color: var(--color_shade_3);
	color: var(--foreground_color);
}


div.footer.hover .info{
	display: inline;
	font-weight: bold;
}

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

div.footer span.notice{
	padding: 0 1rem;
	}

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: 1rem 2rem;
	border-radius: .5rem;
	box-shadow: 0 1rem 4rem hsla(0,0%,0%,.2);
	color: hsl(0,0%,10%);
	transition: opacity 1s ease;
	max-height: 80%;
	max-width: 90%;
	overflow: auto;
	box-sizing: border-box;
}

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;
	}