#fsToolbar,
#wcagRuleList
{
	font: 14px arial,sans-serif;
	color: #333333;

	position: fixed;
	top: 0;
	right: -98px;
	z-index: 900000;

	width: 139px;
	padding: 15px 10px 13px 10px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;

	opacity: .97;
	background: white url(../images/sitepilot-logo.svgz) 5px 5px no-repeat;
	background-size: 112px;

	border-radius: 0 0 0 10px;

	box-shadow: 0 0 5px rgba(50, 50, 50, 1);

	overflow: hidden;
	max-height: 38px;
}

html.hasFsAlertBar
{
	padding-bottom: 52px;
}

#fsAlertBar
{
	font: 15px arial,sans-serif;
	color: #333333;

	position: fixed;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	max-width: none;

	z-index: 89999;

	padding: 15px;

	display: flex;
	justify-content: space-between;

	box-sizing: border-box;
	-moz-box-sizing: border-box;

	background: #9C0511;
	color: white;

	border-radius: 10px 10px 0 0;
}

#fsAlertBar button
{
	margin-left: 20px;
}

#fsAlertBar :not(p) > a + a
{
	margin-left: 8px;
}

#fsAlertBar p
{
	display: inline-block;
	padding: 0 10px 0 0;
	margin: 0;
}

#fsAlertBar p a
{
	text-decoration: underline;
	color: white;
	font-weight: bold;
}

@media print
{
	#fsToolbar,
	#wcagRuleList
	{
		display: none !important;
		visibility: hidden !important;
	}
}

#fsToolbar.showMe,
#fsToolbar:hover
{
	transition: max-height .5s, right .2s;
}

#fsToolbar
{
	transition: max-height .1s, right .25s;
}

#fsToolbar.showMe,
#fsToolbar:hover
{
	max-height: 600px;
	right: 0;
}


#fsToolbar div
{
	margin: .8em 0 0 0;
	padding: .8em 0 0 0;
	border-top: 1px solid #aaa;
}

#fsToolbar div:first-child
{
	margin-top: 35px;
}

body #fsToolbar p
{
	all: revert;

	margin: 0 0 .5em 0;
	padding: 0;
	line-height: normal;
}

#fsToolbar > div > a,
#fsAlertBar :not(p) > a,
#fsAlertBar button,
#wcagRuleList button
{
	all: revert;

	/* button reset */
	border: none;
	margin: 0;
	padding: 0;
	width: auto;
	overflow: visible;
	background: transparent;
	color: inherit;
	font: inherit;
	text-transform: inherit;
	text-align: inherit;
	line-height: inherit;

	/* Corrects font smoothing for webkit */
	-webkit-font-smoothing: inherit;
	/* Corrects inability to style clickable `input` types in iOS */
	-webkit-appearance: none;
	/* end button reset */

	color: #800000;
	text-decoration: none;
	font: verdana,sans-serif;
	font-size: 13px;
	font-weight: normal;
	cursor: pointer;

	border: 1px solid #ccc;

	background: #eee;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;

	display: inline-block;
	padding: 3px 5px;
	margin: .3em 0;
}

/* get pencil icons under control once and for all */
.sp_pencil img
{
	width: auto !important;
	height: auto !important;
}

@media (max-width: 1349px)
{
	#fsToolbar
	{
		top: auto;
		bottom: 0;

		border-radius: 10px 0 0 0;
	}
}

.wcagRuleBreaker
{
	outline: 3px dashed limegreen;
	min-height: 1em;
	min-width: 1em;
}

#wcagRuleList
{
	top: auto;
	right: auto;
	left: 0;
	bottom: 0;

	background: white;

	min-width: 180px;
	max-width: 25vw;
	padding: 15px 10px 13px 10px;

	overflow-y: auto;
	max-height: 30vh;
}

#wcagRuleList ol
{
	all: revert;

	font: inherit;
	padding: 0;
	margin: .5em 0;
}

#wcagRuleList li
{
	all: revert;

	font: inherit;
	margin-top: 0.2em;
	margin-left: 1.8em;
	margin-bottom: 0;
	padding: 0;
}

#wcagRuleList ::marker
{
	all: revert;
}

@keyframes flashBorder {
    0%, 100% { outline-width: 6px; }
    50% { outline-width: revert; }
}

.flashBorder {
    animation: flashBorder 400ms ease-in-out 2; /* Adjust duration (1s here) as needed */
}