/* Normalise CSS 8.01 */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}
/* Fixes */
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box}body{-webkit-animation:bugfix infinite 1s}@-webkit-keyframes bugfix{from{padding:0}to{padding:0}}

* {
	scrollbar-width: 0;
}
*::-webkit-scrollbar {
	background-color: transparent;
	width: 12px;
}
*::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background-color: #ddd;
	border: 4px solid #fff;
}

html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	font: normal normal normal 1rem/1.5 "Noto Sans", sans-serif;
	background: #fff;
	text-align: left;
	overflow: auto;
	color: #343536;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}
body.edit_mode {
	background: #ddd;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0 0 1rem 0;
	color: #003865;
	font-family: "Noto Sans", sans-serif;
	font-weight: 400;
	text-rendering: optimizeLegibility;
}
h1 {
	font-size: 1.8rem;
	line-height: 1.8rem;
	font-weight: 600;
	text-transform: uppercase;
}
p {
	margin: 0;
	padding: 0 0 0.6rem 0;
}
code {
	background: #ddd;
	padding: 0.1rem 0.4rem;
}
.hidden {
	display: none !important;
}

#tools {
	position: fixed;
	top: 0;
	width: 350px;
	height: 100%;
	background: #fff;
	overflow-y: auto;
	padding: 70px 10px 10px 10px;
	scrollbar-color: #003865 transparent;
}
#tools h2 {
	background-color: #005398;
	border-left: 8px solid #003865;
	color: #fff;
	margin: 1rem 0;
	padding: 0 0 0.2rem 1rem;
	font-weight: normal;
}
#tools_header {
	position: absolute;
	top: 0;
	left: 0;
	width: 350px;
	height: 65px;
	background: white;
}
#public_view {
	position: absolute;
	top: 17px;
	right: 10px;
	width: 30px;
	height: 30px;
}
#systemMapVisual {
	position: relative;
}
#systemMapVisual.editor {
	width: 100%;
	height: 100%;
	overflow: auto;
	outline: none;
	background-color: #fff;
	background-image:
      linear-gradient(45deg, #f8f8f8 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
      linear-gradient(45deg, transparent 75%, #f8f8f8 75%),
      linear-gradient(45deg, #f8f8f8 25%, #fff 25%);    
    background-size: 50px 50px;       
    background-position: 0 0, 0 0, -25px -25px, 25px 25px;
}
#systemMapVisual > svg {
	background: #fff;
}
#expansion {
	position: relative;
	width: calc(100% - 410px);
	height: calc(100% - 80px);
	margin: 40px 40px 40px 370px;
	background: #eee;
}
#expansion .expander {
	position: absolute;
	background: transparent;
	color: #333;
	z-index: 10;
	display: flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
    cursor: pointer;
}
#expansion .expander:hover {
	background: #666;
	color: #fff;
}
#expansion .expander.top,
#expansion .expander.bottom {
	top: -20px;
	left: 0;
	height: 20px;
	width: 100%;
}
#expansion .expander.bottom {
	top: auto;
	bottom: -20px;
}
#expansion .expander.left,
#expansion .expander.right {
	top: 0;
	left: -20px;
	height: 100%;
	width: 20px;
}
#expansion .expander.right {
	left: auto;
	right: -20px;
}
#expand_mask {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9;
}
#expand_by {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 11;
}
#expand_by button {
	width: 32px;
}
#expand_by input {
	width: 70px;
}
#expansion #topScroller {
	background: #fff;
	height: 12px;
	width: 100%;
	overflow: auto;
	overflow-y: hidden;
	border: none;
}
#expansion #topScroller.sticky {
	background: transparent;
	position: fixed;
	top: 0;
	left: 370px;
	z-index: 10;
}
#expansion #topScroller > div {
	height: 100%;
	width: 100%;
}

#information > * {
	display: none;
}

#layers_checkbox,
#layers input {
	display: none;
}
#layers_wrapper {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	width: 34px;
	min-height: 37px;
	background: transparent;
}
#layers_wrapper.open {
	width: 250px;
}
#layers_wrapper > label {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	display: block;
	background: #666;
	color: #fff;
	padding: 0 8px 3px 8px;
	font-size: 30px;
	line-height: 30px;
}
#layers_wrapper > label:hover {
	background: #333;
}
#layers_wrapper button {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
#layers_wrapper li {
	list-style: none;
}
#layers_wrapper fieldset {
	padding: 0;
	margin: 0;
	border: none;
}
#layers {
	display: none;
	position: relative;
	margin: 0;
	padding: 0;
}
#layers_checkbox:checked + #layers_fieldset > #layers {
	display: block;
	margin-left: 34px;
	min-height: 37px;
}
#layers label {
	cursor: pointer;
	display: block;
	padding: 0.4rem 0.6rem;
	background: #ddd;
	margin: 0;
}
#layers input:checked + label {
	font-weight: bold;
}
#layers label:hover {
	background: #ccc;
}
#layer_link_wrapper,
#download_link_wrapper {
	position: absolute;
	top: 0;
	right: 34px;
	z-index: 10;
	width: 34px;
	min-height: 37px;
	background: transparent;
}
#layers_wrapper.open + #layer_link_wrapper,
#layers_wrapper.open + #download_link_wrapper {
	right: 250px;
}
#layers_wrapper.hidden + #download_link_wrapper {
	right: 0 !important;
}
#layer_link_wrapper input,
#download_link_wrapper > input,
#download_link_wrapper > menu {
	display: none;
}
#download_link_wrapper > input:checked + menu {
	display: block;
	position: absolute;
	width: 50px;
	height: auto;
	top: 0;
	right: 34px;
	margin: 0;
	padding: 0;
}
#download_link_wrapper > input:checked + menu > ul,
#download_link_wrapper > input:checked + menu > ul > li {
	list-style: none;
	margin: 0;
	padding: 0;
}
#download_link_wrapper > input:checked + menu > ul > li > a {
	display: block;
	padding: 0.4rem 0.6rem;
	background: #ddd;
	margin: 0;
	color: #333;
	text-decoration: none;
}
#download_link_wrapper > input:checked + menu > ul > li > a:hover {
	color: #111;
	background: #ccc;
}
#layer_link_wrapper label,
#download_link_wrapper label {
	cursor: pointer;
	display: block;
	background: red;
	color: #fff;
	padding: 9px 7px 0 7px;
	min-width: 34px;
	min-height: 37px;
}
#layer_link_wrapper label:hover {
	background: darkred;
}
#layer_link_wrapper label img.linked {
	display: none;
}
#layer_link_wrapper input:checked + label img.linked {
	display: block;
}
#layer_link_wrapper input:checked + label img.unlinked {
	display: none;
}
#layer_link_wrapper input:checked + label,
#download_link_wrapper label {
	background: green;
}
#layer_link_wrapper input:checked + label:hover,
#download_link_wrapper label:hover {
	background: darkgreen;
}
#layers button {
	white-space: normal;
	word-wrap: break-word;
	height: auto;
	min-height: 32px;
	text-align: left;
}

#selectMask {
	position: absolute;
	top: 0;
	left: 0;
	background: transparent;
	border: 2px dashed #333;
	z-index: 1000;
}

g[disabled="true"] > image,
g[disabled="true"] > rect,
g[disabled="true"] > text,
g[disabled="true"] > path.connector,
path[disabled="true"] {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
}
g[hidden="true"] > *,
path[hidden="true"] {
	opacity: 0;
}
#expansion g[hidden="true"] > * {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	opacity: 0.3;
}

.hover {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 400px;
	max-height: 600px;
	z-index: 200;
	background: #fff;
	box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	overflow: hidden;
}
.hover header,
.modal header {
	position: relative;
	color: #2d232e;
	background: #fff;
	border-bottom: 1px solid #ddd;
	padding: 16px 32px;
	font-size: 1.2rem;
	min-height: 3.6rem;
}
.hover header h1, .hover header h2, .hover header h3, .hover header h4, .hover header h5, .hover header h6,
.modal header h1, .modal header h2, .modal header h3, .modal header h4, .modal header h5, .modal header h6,
.hover h1, .hover h2, .hover h3, .hover h4, .hover h5, .hover h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 {
	text-transform: none;
	padding: 0;
	margin: 0;
	font-size: inherit;
}
.hover h1, .hover h2, .hover h3, .hover h4, .hover h5, .hover h6,
.modal h1, .modal h2, .modal h3, .modal h4, .modal h5, .modal h6 {
	font-size: 1.2rem;
	padding: 0 0 1rem 0;
}
.hover h3,
.modal h3 {
	font-size: 1.1rem;
}
.hover h4,
.modal h4 {
	font-size: 1rem;
}
.hover h5,
.modal h5 {
	font-size: 1rem;
}
.hover h6,
.modal h6 {
	font-size: 1rem;
}
.hover main,
.modal main {
	padding: 16px 32px 10px 32px;
	margin: 0;
	overflow-y: auto;
}
.modal main {
	min-height: calc(40vh - 3.6rem);
	max-height: calc(95vh - 3.6rem);
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 200;
}
.modal > div {
	position: relative;
	margin: auto;
	background: #fff;
	width: 90%;
	z-index: 202;
	overflow: hidden;
	min-height: 40vh;
	max-height: 95vh;
	box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
}
@media screen and (min-width: 480px) {
	.modal > div {
		width: 80%;
	}
}
@media screen and (min-width: 600px) {
	.modal > div {
		width: 70%;
	}
}
@media screen and (min-width: 960px) {
	.modal > div {
		width: 60%;
	}
}
@media screen and (min-width: 1280px) {
	.modal > div {
		width: 800px;
	}
}
.modal > label {
	cursor: pointer;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 201;
	background: #333;
	opacity: 0.7;
}
.modal header button {
	position: absolute;
	display: block;
	height: 30px;
	line-height: 22px;
	background: #fff;
	border: 0;
	padding: 0;
	top: 1rem;
	right: 1rem;
	font-size: 2rem;
	color: #0375b4;
}
.modal header button label {
	cursor: pointer;
	display: block;
	height: 30px;
	line-height: 30px;
	background: #fff;
	border-radius: 6px;
	padding: 0 0.3rem;
	font-size: 2rem;
	color: #0375b4;
}
.modal header button label:hover {
	background: #eee;
	color: #ff0000;
}
.modal main.image {
	height: 40vh;
	text-align: center;
}
.modal main img {
	padding: 3px;
	background: #fff;
	max-width: 100%;
	max-height: 100%;
}
.modal main > ul > li:last-child {
	padding: 0;
}
.modal form:not(.labelled) label.field {
	z-index: 1000;
}
input:checked + .modal {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
input:checked + .modal.single > div,
input:checked + .modal > div:target {
	display: block;
}

form > fieldset {
	border: 0;
	background-color: #d4e7f8;
	margin-bottom: 5px;
}
form > fieldset legend {
	background-color: #005398;
	color: #fff;
	margin: 0;
	padding: 0 0.6rem 0.1rem 0.6rem;
	font-weight: normal;
}
form > fieldset legend:hover {
	background: #003865;
}
ol.form {
	list-style: none;
	margin: 0;
	padding: 0;
}
ol.form li {
	margin: 0;
	padding: 0 0 5px 0;
}
ol.form.images {
	display: flex;
	flex-wrap: wrap;
}
ol.form.images li {
	flex: 1 0 19%;
	max-width: 19%;
	background: #fff;
	padding: 0.5rem;
	margin: 0 1% 1% 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
ol.form.images li:hover {
	background: transparent;
}
ol.form.images li img {
	cursor: pointer;
}
ol.form .group {
	display: flex;
	flex-wrap: nowrap;
	align-content: stretch;
}
ol.form .group > input[type="color"],
ol.form .group > button,
ol.form .group > span {
	max-width: 32px;
}
input.small,
ol.form .group > .small {
	max-width: 50px;
}
ol.form .group > img {
	max-width: 60px;
	padding: 0 5px;
	border: 1px solid #6aa2cf;
}
input.medium,
ol.form .group > .medium {
	max-width: 65px;
}
input.large,
ol.form .group > .large {
	flex: 2;
	max-width: 130px;
}
ol.form .group > span {
	display: block;
	text-align: center;
}
ol.form .group > span.filler {
	line-height: 1.7rem;
	border: 1px solid #6aa2cf;
}
ol.form .group > span.filler > label {
	padding: 0;
}
ol.form .group > * {
	flex: 1;
}
ol.form .group > *:not(:first-child) {
	border-left: 0 !important;
}
ol.form ul {
	list-style: none;
	margin: 0;
	padding: 0 0 0 20px;
}
ol.form label {
	display: block;
	font-weight: bold;
	padding: 0 0 5px 0;
}
*:focus {
    outline: none;
}
input[type="text"],
input[type="number"],
input[type="color"],
input[type="file"],
select,
textarea,
div.select_multiple {
	width: 100%;
	margin: 0;
	padding: 3px;
	height: 2em;
	line-height: 2em;
	border: 1px solid #6aa2cf;
	background: #fff;
	color: #343536;
}
input[type="text"][disabled],
input[type="number"][disabled],
select[disabled],
textarea[disabled] {
	color: #666;
}
input[type="text"],
input[type="number"],
select,
textarea {
	padding: 3px 0.6rem;
}
textarea {
	height: 74px;
}
textarea.html {
	min-height: 400px;
}
input[type="file"] {
	height: auto;
}
input[type="file"]::file-selector-button {
	margin-right: 1rem !important;
	font-size: 14px !important;
	height: auto !important;
	padding: 0.3rem 0.6rem !important;
}
div.select_multiple {
	position: relative;
	padding: 0 0.3rem;
	line-height: 1.8rem;
}
div.select_multiple .placeholder {
	color: #bbb;
	font-style: italic;
	display: inline-block;
}
div.select_multiple ul {
	margin: 0;
	padding: 0;
}
div.select_multiple ul.selected {
	display: block;
	height: 100%;
	line-height: 2rem;
	overflow: hidden;
}
div.select_multiple ul.selected li {
	display: inline-block;
	margin: 0 0.3rem 0 0;
}
div.select_multiple ul.selected li span {
	position: relative;
	top: -5px;
	cursor: pointer;
}
div.select_multiple ul.selected li span:hover {
	color: red;
}
div.select_multiple ul.options {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	min-height: 2rem;
	max-height: 9.9rem;
	background: #fff;
	border: 1px solid #6aa2cf;
	overflow-y: auto;
	z-index: 10;
}
div.select_multiple ul.options li {
	padding: 0 0.3rem;
	border-bottom: 1px solid #6aa2cf;
	cursor: pointer;
}
div.select_multiple ul.options li.selected {
	color: green;
}
div.select_multiple ul.options li:hover {
	background: #f1f1f1;
}
div.select_multiple ul.options li:last-child {
	border-bottom: 0;
}
div.select_multiple:hover ul.options {
	border: 1px solid #888;
}
.tox-tinymce {
	border: 1px solid #6aa2cf !important;
	border-radius: 0 !important;
}
.tox-promotion, 
.tox-statusbar__branding {
	display: none !important;
}
.combo_wrapper {
	position: relative;
	width: 100%;
}
a.button,
button,
span.draggable,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="file"]::file-selector-button {
	appearance: none;
	cursor: pointer;
	display: inline-block;
	position: relative;
	text-align: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	vertical-align: middle;
	white-space: nowrap;
	margin: 0;
	padding: 3px;
	height: 32px;
}
button:focus {
	outline: none;
}
button:focus:not(:focus-visible):not(.focus-visible) {
	box-shadow: none;
	outline: none;
}
.icon-font {
	font-family: "Segoe UI Symbol";
}
button.add:disabled {
	cursor: default;
}
button.add > span,
button.remove > span {
	position: relative;
}
button.add,
button.remove,
input[type="file"]::file-selector-button {
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.3rem;
	font-weight: 600;
	padding: 0;
}
button.add,
button.remove,
input[type="file"]::file-selector-button {
	background-color: #2ea44f;
	border: 1px solid rgba(27, 31, 35, .15);
	box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
}
button.add:hover,
input[type="file"]::file-selector-button:hover {
	background-color: #2c974b;
}
button.add:focus {
	box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
}
button.add:disabled {
	background-color: #94d3a2;
	border-color: rgba(27, 31, 35, .1);
	color: rgba(255, 255, 255, .8);
}
button.add:active {
	background-color: #298e46;
	box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
button.remove {
	background-color: rgb(155, 4, 4);
}
button.remove:hover {
	background-color: rgb(105, 0, 0);
}
span.draggable {
	cursor: move;
	color: #003865;
	background: #a6bfd4;
	border: 1px solid #6aa2cf;
}

a.button {
	height: auto;
	padding: 0.3rem 0.6rem;
	color: #fff;
	font-size: 1.3rem;
	line-height: 1.3rem;
	font-weight: 600;
	background-color: #2ea44f;
	border: 1px solid rgba(27, 31, 35, .15);
	box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
}
a.button:hover {
	background-color: #2c974b;
	color: #fff;
}

datalist {
	display: block;
	margin-top: -1px;
	position: absolute;
	overflow-y: auto;
	border-radius: 0 0 6px 6px;
	max-height: 10rem;
	border: 1px solid #888;
	z-index: 201;
}
datalist option {
	display: block;
	padding: 3px 0.6rem;
	background: #fff;
	color: #666;
	cursor: pointer;
}
datalist option:hover{
	background-color: #ddd;
}

/* Minimise fieldsets */
/* fieldset.minimisable > legend > span {
	font-size: 10px;
} */
fieldset.minimisable > legend {
	cursor: pointer;
}
fieldset.minimisable.minimised > *:not(legend) {
	display: none;
}

/* Faux Select Box */
/* The container for the select box - leaves a gap for the element (not ideal) */
div.selector {
	min-height: 2em;
	position: relative;
}

/* Works like the <option/> tag */
div.selector label {
	background: #fff;
	color: #6aa2cf;
	display: block;
	padding: 0 .5em;
}
/* Works like the <select/> tag */
div.selector .select {
	z-index: 1;
	border: 1px solid #6aa2cf;
}
div.selector .select-toggle, 
div.selector .select, 
div.selector .select label {
	left: 0;
	line-height: 1.8em;
	min-height: 2em;
	position: absolute;
	right: 0;
	top: 0;
}
div.selector .select label {
	min-height: calc(2em - 2px);
	border: 3px solid #fff;
}
div.selector .select label:hover {
	border: 3px solid #6aa2cf;
}
div.selector.small .select label {
	line-height: 0;
}
/* Toggle for the select box opening and closing */
div.selector .select-toggle, 
div.selector .select-toggle:hover {
	background: none;
	text-align: right;
	z-index: 2;
}
/* For keyboard navigation: highlights the select box, when the toggle radio button is in focus */
div.selector .radio-toggle:focus ~ .select, 
div.selector .select.focused {
	/* outline: .2em #036 dotted; */
}
/* Select toggle (open) */
div.selector .radio-toggle:checked + .select-toggle {
	left: auto;
}
div.selector.small .radio-toggle:checked + .select-toggle {
	display: none;
}
/* The downward pointing triangle inside the select toggle */
div.selector .sh-indicator {
	position: absolute;
	border-left: .3em solid transparent;
	border-right: .3em solid transparent;
	border-top: .6em solid black;
	display: block;
	line-height: 0;
	width: 0;
	right: 10px;
	top: 12px;
}
div.selector.small .sh-indicator {
	display: none;
}

div.selector label:hover, 
div.selector .select input:focus + label {
	/*background: #ccc;*/
	cursor: pointer;
}
div.selector.small .select label {
	overflow: hidden;
}
/* This shuffles the sorting order of the stack of "option" tags, so that either the first, or the selected is on top. */
div.selector .select label:first-of-type, 
div.selector .select input:checked + label {
	z-index: 1;
}
/* Once the toggle has been triggered, the fake option tags stop stacking on top of each other, and stack vertically. */
div.selector .radio-toggle:checked ~ .select label,
div.selector .select.open label {
	position: static;
}
div.selector .radio-toggle:checked ~ .select {
	z-index: 100;
}

/* Visually hidden only */
.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Slow download message */
#download_mask {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background:rgba(0, 0, 0, 0.8);
	display: flex;
    align-items: center;
    justify-content: center;
	font-size: 300%;
	color: #fff;
}
#download_mask > span {
	display: inline-block;
	padding-left: 10px;
}
#download_mask > div {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: 
	  radial-gradient(farthest-side,#fff 94%,#0000) top/8px 8px no-repeat,
	  conic-gradient(#0000 30%,#fff);
	-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
	animation: s3 1s infinite linear;
}
@keyframes s3{ 
	100% {
		transform: rotate(1turn);
	}
}

/* Alerts */
aside.alert {
	position: relative;
	padding: 0.6rem 3rem 0.6rem 0.6rem;
	margin: 0 0 1rem 0;
	color: #fff;
	background-color: #ea313e;
	border: 1px solid #BB2732;
}
aside.alert.message {
	background-color: #60bc56;
	border: 1px solid #4D9645;
}
aside.alert > ul {
	margin: 0;
}
aside.alert > ul > li {
	color: #fff;
}

/* Branding */
#logo {
	padding: 0.3rem;
	display: flex;
}
#logo h1 {
	margin-top: 1rem;
	margin-left: 0.5rem;
}
nav ul {
	background: #005398;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}
nav li {
	flex-basis: 100%;
}
nav a {
	display: block;
	text-align: center;
	color: #fff;
	padding: 0.3rem 0;
}
nav a:hover {
	background: #003865;
	color: #fff;
}

/* Tables */
table {
	border-collapse: collapse;
	width: 100%;
	margin: 0 0 1em 0;
	background: white;
}
th,
td {
	border: 1px solid #d5d5d5;
	padding: 0.3em 0.5em;
	line-height: 1.6em;
}
table.invisible {
	background: transparent;
}
table.invisible th,
table.invisible td {
	border: 1px solid transparent;
}
tr:nth-child(even) td {
	background-color: #fcfcfc;
}
th,
td.title,
tr.title td,
table.vertical th,
table.vertical td.title,
table.vertical tr.title td {
	border: 1px solid #003865 !important;
	background: #005398;
	color: #fff;
	font-weight: bold;
}
th:first-child,
td.title:first-child,
tr.title td:first-child,
table.vertical th:first-child,
table.vertical td.title:first-child,
table.vertical tr.title td:first-child{
	border-left: 1px solid #d5d5d5;
}
th:last-child,
td.title:last-child,
tr.title td:last-child,
table.vertical th:last-child,
table.vertical td.title:last-child,
table.vertical tr.title td:last-child{
	border-right: 1px solid #d5d5d5;
}
td.subtitle,
tr.subtitle td {
	background: #efefef;
}
td.small,
tr.small td {
	font-size: 0.75em;
}
tfoot td {
	background: #fafafa;
	font-weight: bold;
}
table.hover tr:hover td {
	background: #fafafa;
}
th a,
td.title a,
tr.title td a {
	display: block;
	width: 100%;
	height: 100%;
	color: #484848 !important;
}

#saver {
	position: absolute;
	width: 90px;
	height: auto;
	background: green;
	color: #fff;
	top: 0;
	left: 170px;
	padding: 0.5rem;

	span {
		display: inline-block;
		vertical-align: middle;
	}
	span + span {
		margin-left: 5px;
	}
}