@font-face {
  font-family: 'Monorale';
  src: URL('/library/fonts/Monorale/Monorale-Regular.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Monorale';
  src: URL('/library/fonts/Monorale/Monorale-Bold.otf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Monorale';
  src: URL('/library/fonts/Monorale/Monorale-ExtraLight.otf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Monorale';
  src: URL('/library/fonts/Monorale/Monorale-BoldItalic.otf') format('truetype');
  font-weight: 700;
  font-style: italic;
}

/* Set defaults */
html, body, h1, h2, h3, h4, h6, h6, p, span, fieldset, input, div, section, menu, a, ul, ol, li, table, tr, th, td, button {
	margin: 0;
	padding: 0;
	border: 0;
}

html, body {
	width: 100%;
	height: 100%;
}

img, a img {
	border: none;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

a {
	text-decoration: none;
}

/* Standard class definitions */

.hidden {
	display: none;
}

.offline {
	opacity: .5;
}

@media (max-width: 59.9rem) {
	.wideOnly {
		display: none !important;
	}
}

@keyframes active {
  0% { background-color: inherit; }
  100% { background-color: #f4f7be; }
}

@keyframes entryPosted {
  0% { background-color: inherit; }
  100% { background-color: #ddf0c7; }
}

@keyframes entryAttnColor {
  0% { background-color: inherit; }
  100% { background-color: #cbe9f6; }
}

@keyframes entryErrorColor {
  0% { 
	background-color: inherit; 
	color: inherit;
	}
  100% { 
	background-color: #B91515;
	color: #FFF;
	}
}

@keyframes inlineAlertError {
  0% { 
	color: inherit;
	}
  100% { 
	color: #B91515;
	}
}

.active { 
	animation-name: active;
	animation-duration: 3s;
	animation-delay: -0.1s;
	animation-fill-mode: forwards;
	color: #000000;
	background-color: #f4f7be;
}
.active:hover { background-color: #f2f799; !improtant }

.entryPosted { 
	transition: all 0.2s;
	animation-name: entryPosted;
	animation-duration: 3s;
	animation-delay: -0.1s;
	background-color: #ddf0c7;
}
.entryPosted:hover { background-color: #b0db74 !important; }

.entryAttn {
	transition: all 0.2s;
	animation-name: entryAttnColor;
	animation-duration: 3s;
	animation-delay: -0.1s;
	background-color: #cbe9f6;
}
.entryAttn:hover { background-color: #52bcea !important; }

.entryError {
	animation: entryErrorColor 1.1s infinite alternate;
}
.entryError:hover { background-color: #f94a53 !important; }

.entryDeleted { background-color: #c0c0c0; }
.entryDeleted:hover { background-color: #c0c0c0 !important; }

.entryBlue { color: #02627f; }

.statusRed, .statusGreen, .statusGrey, .statusYellow, .statusBlue, .statusCustom {
	white-space: nowrap;
	display: inline-block;
}

.statusSmall {
	font-size: 0.8em;
}

.statusGreen { 
	background-color: var(--color-green);
	color: #FFF;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.statusRed { 
	background-color: var(--color-red);
	color: #FFF;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.statusGrey { 
	background-color: var(--color-grey);
	color: #FFF;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.statusYellow { 
	background-color: #f2f799;
	color: #000;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.statusBlue { 
	background-color: var(--color-blue);
	color: #FFF;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.statusCustom {
	color: #FFF;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	font-weight: 600;
}

.inlineAlert {
	display: inline-block;
	margin: 0 0.2em;
	padding: 0.2em 0.5em;
	animation: inlineAlertError 1.1s infinite alternate;
}

.inlineInfo {
	display: inline-block;
	margin: 0 0.2em;
	padding: 0.2em 0.5em;
}

.ghost {
	transition: all 0.2s;
	filter: grayscale(70);
	opacity: 0.5;
}

.glow {
	animation: glow 1.1s infinite alternate;
	position: relative;
	background-color: #02627f !important;
	color: #FFFF  !important;
	filter: brightness(1) !important;
	transition: filter 0.2s, color 0.2s, background-color 0.2s;
}

.glow.addRow {
	animation: glowGreen 1.1s infinite alternate;
}

@keyframes glow {
  from {
    -webkit-box-shadow: 0px 0px 0.5em 0em #2e373e;
	-moz-box-shadow: 0px 0px 0.5em 0em #2e373e;
	box-shadow: 0px 0px 0.5em 0em #2e373e;
  }
  to {
    -webkit-box-shadow: 0px 0px 1em 0.5em #02627f;
	-moz-box-shadow: 0px 0px 1em 0.5em #02627f;
	box-shadow: 0px 0px 1em 0.5em #02627f;
  }
}

@keyframes glowGreen {
  from {
    -webkit-box-shadow: 0px 0px 0.5em 0em #363e2e ;
	-moz-box-shadow: 0px 0px 0.5em 0em #363e2e ;
	box-shadow: 0px 0px 0.5em 0em #363e2e ;
  }
  to {
    -webkit-box-shadow: 0px 0px 1em 0.5em #227f02;
	-moz-box-shadow: 0px 0px 1em 0.5em #227f02;
	box-shadow: 0px 0px 1em 0.5em #227f02;
  }
}


@keyframes spinAnimate {
    from {
    	transform: rotate(0deg);
    	-webkit-transform: rotate(0deg);
    }
    to {
    	transform: rotate(360deg);
    	-webkit-transform: rotate(360deg);
    }
}

.spin {
	animation: spinAnimate 1s infinite linear;
}