/*=============================================================================
  File:         fiddle.blue/css/message-area.css
  Language:     CSS
  Copyright:    Read Write Tools © 2020
  License:      CC-BY-NC-ND 4.0
  Initial date: Jan 18, 2020
  Contents:     form submission errors and feedback message area
=============================================================================*/

div#messageArea {
	position: fixed;
	width: calc(100% - var(--viewtabs-width) - 18px);
	font-family: var(--sans-serif-font);
	background-color: rgb(255, 255, 185);
	display: none; /* flex */
	z-index: 5; /* 0 to 4 used by ACE editor */
	border-top: 3px solid var(--button-blue);
	border-bottom: 3px solid var(--button-blue);
}
div#messageArea div.left {
	flex-basis: 100%;
	align-self: center;
	min-height: 2rem;
	padding: 1rem 2rem;
}
div#messageArea div.right {
	flex-basis: 4rem;
	align-self: center;
	text-align: center;
	min-height: 2rem;
}
div#messageArea p {
	font-family: var(--sans-serif-font);
	line-height: 1.4;
	margin: 0;
	color: var(--black);
}
div#messageArea a {
	color: var(--blue);
	text-decoration: underline;
	border-bottom: none;
}
div#messageArea a#closeMessageArea {
	padding: 0.15rem 0.65rem;
	border: 2px #fff solid;
	border-radius: 50%;
	cursor: pointer;
	background-color: var(--button-blue);
	line-height: 2;
	color: var(--pure-white);
	text-decoration: none;
}
div#messageArea a#closeMessageArea:hover {
	background-color: var(--hover-blue);
}