@import './fonts.css';
@import './utilities.css';

/* reset */
html, body { margin: 0;	padding: 0; }
* {	box-sizing: border-box; }

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
}

:root {
	/*  STT Colours 
		use https://mdigi.tools/lighten-color
		< 100 is lighter
		> 100 is darker
	*/
	--colour-field: #35b98b;
	--colour-field-80: #56cfa4;
	--colour-field-60: #80dbbb;
	--colour-field-40: #aae7d2;
	--colour-field-20: #d5f3e8;
	--colour-field-110: #30a67d;
	--colour-field-120: #2a946f;
	--colour-night-sky: #002957;
	--colour-night-sky-80: #335479;
	--colour-nice-day: #4779e0;
	--colour-nice-day-20: #dae4f9;
	--colour-nice-day-40: #b5c9f3;
	--colour-nice-day-60: #91afec;
	--colour-nice-day-80: #6c94e6;
	--colour-trunk: #cfccba;
	--colour-trunk-80: #d9d6c7;
	--colour-trunk-60: #e2e1d5;
	--colour-trunk-40: #ecebe3;
	--colour-trunk-20: #f5f5f1;
	--colour-trunk-120: #bebca1;
	--colour-trunk-140: #8b8761;
	--colour-deep-forest: #18494d;
	--colour-deep-forest-90: #22676c;
	--colour-deep-forest-80: #2b848b;
	--colour-deep-forest-70: #35a2ab;
	--colour-deep-forest-20: #c1e8ec;

	/* Standard UI Colours */
	--colour-danger: #dc3545;
	--colour-danger-20: #f8d7da;

	--colour-success: var(--colour-field); /* was: #28a745 */
	--colour-success-40: #9de8ae;
	--colour-success-20: #cef3d7;

	--colour-warning: #ffc107;
	--colour-warning-120: #d29d00;
	--colour-warning-40: #ffe69c;
	--colour-warning-20: #fff3cd;

	--colour-disabled: #6c757d;

	--colour-danger-light: hsl(354, 70%, 90%);
	--colour-danger-dark: hsl(354, 70%, 40%);
}

a {
	color: var(--colour-deep-forest-80);
}

a:visited {
	color: var(--colour-night-sky-80);
}

a.back {
	display: block;
	font-size: 1rem;
	font-weight: bold;
	text-decoration: none;
	color: var(--colour-deep-forest-80);
	padding-left: 20px;
	position: relative;
}

	a.back:before {
		content: '\3008';
		position: absolute;
		left: -6px;
		transform: scaleX(1.6);
		font-weight: normal;
	}

ul {
	padding-left: 24px;
	list-style-type: disc;
}
	li {
		margin: 6px 0;
	}
	::marker {
		color: rgba(0,0,0,0.3);
	}

p:first-child {
	margin-top: 0;
}
p:last-child {
	margin-bottom: 0;
}

.page {
	display: flex;
	min-height: 100vh;
}

.page nav {
	width: 250px;
	flex-grow: 0;
	flex-shrink: 0;
	background: var(--colour-trunk);
	background-image: url('/images/rings.svg');
    background-repeat: no-repeat;
    background-size: 3000px 3000px;
    background-position: -1300px -1300px;

	border-right: 1px solid var(--colour-trunk-120);
	color: rgba(0,0,0,0.5);
	font-weight: 500;
	height: 100vh;
	height: 100dvh; /* newer browsers */
	position: fixed;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

	.page nav ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	.page nav li {
		margin: 0;
		display: block;
	}

	.page nav li.spacer {
		flex-grow: 1;
	}

	.page nav li.text {
		padding: 10px;
		font-weight: normal;
	}
		.page nav li.text a {
			display: initial;
			text-decoration: initial;
			padding: 0;
		}
		.page nav li.text a:hover {
			background-color: initial;
		}

	.page nav a {
		display: block;
		color: rgba(0,0,0,0.7);
		text-decoration: none;
		padding: 10px;
		position: relative;
	}

	.page nav a.active:after {
		content: '\3009';
		position: absolute;
		width: 8px;
		right: 16px;
		color: var(--colour-trunk);
		transform: scaleX(1.6);
	}

	.page nav > ul a:hover {
		background-color: var(--colour-trunk-80);
	}

	.page nav > ul a.active {
		background-color: var(--colour-trunk-60);
	}

		.page nav > ul a.sub-active {
			background-repeat: no-repeat;
			background-position: 10px 7px;
			background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%2221%22%20height%3D%2241%22%20viewBox%3D%220%200%2021%2041%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%2010.5%2026%20L%2010.5%2041%20L%209%2041%20L%209%2026%20L%2010.5%2026%20Z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%220.3%22%20%2F%3E%3C%2Fsvg%3E');
		}

	.page nav svg.icon {
		margin: 0 4px;
		color: rgba(0,0,0,0.3);
	}

	.page nav .logo {
		padding: 10px;
	}

	/* sub nav */
	.page nav ul ul li a {
		padding-left: 40px;
		font-weight: normal;
		color: rgba(0,0,0,0.5);
		background-repeat: no-repeat;
	}

	.page nav ul ul li a:hover {
		background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9%207.75C9%207.33579%209.33579%207%209.75%207V7C10.1642%207%2010.5%207.33579%2010.5%207.75V9.95C10.5%2010.8025%2010.5006%2011.3967%2010.5384%2011.8593C10.5755%2012.3132%2010.6446%2012.574%2010.7452%2012.7715C10.961%2013.1948%2011.3052%2013.539%2011.7285%2013.7548C11.926%2013.8554%2012.1868%2013.9245%2012.6407%2013.9616C13.1033%2013.9994%2013.6975%2014%2014.55%2014H17.9393L16.2197%2012.2803C15.9268%2011.9874%2015.9268%2011.5126%2016.2197%2011.2197C16.5126%2010.9268%2016.9874%2010.9268%2017.2803%2011.2197L20.2803%2014.2197C20.5732%2014.5126%2020.5732%2014.9874%2020.2803%2015.2803L17.2803%2018.2803C16.9874%2018.5732%2016.5126%2018.5732%2016.2197%2018.2803C15.9268%2017.9874%2015.9268%2017.5126%2016.2197%2017.2197L17.9393%2015.5H14.5179C13.705%2015.5%2013.0494%2015.5%2012.5185%2015.4566C11.9719%2015.412%2011.4918%2015.3176%2011.0475%2015.0913C10.3419%2014.7317%209.76825%2014.1581%209.40873%2013.4525C9.18239%2013.0082%209.08803%2012.5281%209.04336%2011.9815C8.99999%2011.4506%208.99999%2010.795%209%209.98212V7.75Z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%220.2%22%2F%3E%3C%2Fsvg%3E');
		background-position: 10px 7px;
		color: rgba(0,0,0,0.7);
	}

	.page nav ul ul li a.active {
		color: rgba(0,0,0,0.7);
		font-weight: 500;
		background-position: 10px 0px;
		background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%2221%22%20height%3D%2228%22%20viewBox%3D%220%200%2021%2028%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%2019%2021.25%20L%2019.75%2021.25%20L%2019.75%2022.75%20L%2019%2022.75%20L%2019%2021.25%20Z%20M%2010.077%2020.362%20L%2010.745%2020.022%20L%2010.077%2020.362%20Z%20M%2011.388%2021.673%20L%2011.729%2021.005%20L%2011.388%2021.673%20Z%20M%2010.5%200%20L%2010.5%2017.2%20L%209%2017.2%20L%209%200%20L%2010.5%200%20Z%20M%2014.55%2021.25%20L%2019%2021.25%20L%2019%2022.75%20L%2014.55%2022.75%20L%2014.55%2021.25%20Z%20M%2010.5%2017.2%20C%2010.5%2018.053%2010.501%2018.647%2010.538%2019.109%20C%2010.576%2019.563%2010.645%2019.824%2010.745%2020.022%20L%209.409%2020.703%20C%209.182%2020.258%209.088%2019.778%209.043%2019.232%20C%208.999%2018.694%209%2018.028%209%2017.2%20L%2010.5%2017.2%20Z%20M%2014.55%2022.75%20C%2013.722%2022.75%2013.056%2022.751%2012.519%2022.707%20C%2011.972%2022.662%2011.492%2022.568%2011.048%2022.341%20L%2011.729%2021.005%20C%2011.926%2021.105%2012.187%2021.175%2012.641%2021.212%20C%2013.103%2021.249%2013.698%2021.25%2014.55%2021.25%20L%2014.55%2022.75%20Z%20M%2010.745%2020.022%20C%2010.961%2020.445%2011.305%2020.789%2011.729%2021.005%20L%2011.048%2022.341%20C%2010.342%2021.982%209.768%2021.408%209.409%2020.703%20L%2010.745%2020.022%20Z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%220.3%22%20%2F%3E%3Cpath%20d%3D%22M%2017%2019%20L%2020%2022%20L%2017%2025%22%20stroke%3D%22%23000000%22%20stroke-opacity%3D%220.3%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
	}

	.page nav ul ul li a.before-active {
		background-position: 10px 0px;
		background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%2221%22%20height%3D%2241%22%20viewBox%3D%220%200%2021%2041%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%2010.5%200%20L%2010.5%2041%20L%209%2041%20L%209%200%20L%2010.5%200%20Z%22%20fill%3D%22%23000000%22%20fill-opacity%3D%220.3%22%20%2F%3E%3C%2Fsvg%3E");
		background-repeat: repeat-y;
	}

		.page nav ul ul li a.before-active:hover {
			background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20width%3D%2221px%22%20height%3D%2241px%22%20viewBox%3D%220%200%2021%2041%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M%2010.539%2018.859%20C%2010.576%2019.313%2010.645%2019.574%2010.745%2019.771%20C%2010.961%2020.195%2011.305%2020.539%2011.729%2020.755%20C%2011.926%2020.855%2012.187%2020.924%2012.641%2020.961%20C%2013.104%2020.999%2013.698%2021%2014.55%2021%20L%2017.94%2021%20L%2016.22%2019.28%20C%2015.927%2018.987%2015.927%2018.512%2016.22%2018.219%20C%2016.513%2017.927%2016.988%2017.927%2017.281%2018.219%20L%2020.281%2021.219%20C%2020.573%2021.512%2020.573%2021.987%2020.281%2022.28%20L%2017.281%2025.28%20C%2016.988%2025.573%2016.513%2025.573%2016.22%2025.28%20C%2015.927%2024.987%2015.927%2024.512%2016.22%2024.219%20L%2017.94%2022.5%20L%2014.518%2022.5%20C%2013.705%2022.5%2013.05%2022.5%2012.519%2022.456%20C%2011.972%2022.412%2011.492%2022.317%2011.048%2022.091%20C%2010.855%2021.993%2010.672%2021.878%2010.5%2021.749%20L%2010.5%2016.95%20C%2010.5%2017.802%2010.501%2018.396%2010.539%2018.859%20Z%22%20style%3D%22fill%3A%20rgb(0%2C%200%2C%200)%3B%20fill-opacity%3A%200.2%3B%22%2F%3E%3Cpath%20d%3D%22M%2010.507%200%20L%2010.507%2041%20L%209.007%2041%20L%209.007%200%20L%2010.507%200%20Z%22%20style%3D%22stroke-miterlimit%3A%202.01%3B%20fill%3A%20rgb(0%2C%200%2C%200)%3B%20fill-opacity%3A%200.3%3B%22%2F%3E%3C%2Fsvg%3E");
		}

	.page nav .toggle-mobile-nav {
		display: none;
	}

/* user context dropdown menu */
.user-context-menu {
	margin-bottom: 18px;
}
.user-context-menu > a {
	font-weight: 700;
	display: flex !important;
	align-items: center;
	color: var(--colour-deep-forest) !important;
	padding-left: 4px !important;
	padding-right: 18px !important;
}
	.user-context-menu a div {
		flex-grow: 1;
	}

	.user-context-menu > a:hover {
		background-color: var(--colour-trunk-80);
	}

	.user-context-menu > a svg {
		fill: var(--colour-deep-forest);
		transition: transform .2s ease-out;
	}

	.user-context-menu.active > a > svg {
		transform: rotate(180deg);
	}

	.user-context-menu .username {
		display:flex;
		align-items: center;
		gap: 6px;
	}

	.user-context-menu .username svg.icon {
		border: 2px solid rgba(0,0,0,0.3);
		border-radius: 50%;
		padding: 2px;
		background-color: rgba(0,0,0,0.1);
		flex-shrink: 0;
	}

.user-context-menu ul {
	pointer-events: none;
	position: absolute;
	background: white;
	z-index: 1;
	color: rgb(0,0,0,0.7);
	margin-left: 10px !important;
	border-radius: 8px;
	transform: scale(.9);
	transform-origin: top;
	opacity: 0;
	transition: transform .2s ease-out, opacity .2s ease-out;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	overflow: hidden;
}

.user-context-menu.active ul {
	pointer-events: unset;
	transform: scaleY(1);
	opacity: 1;
}

.user-context-menu ul a:hover {
	background: rgba(0,0,0,0.05);
}


.page .content {
	margin-left: 250px; /* make room for fixed nav */
	padding: 20px 20px;
	flex-grow: 1;
	background-color: var(--colour-trunk-20);
}

.page .content h1, .page .content h3 {
	color: rgba(0,0,0,0.8);
}

.page .content h1:first-of-type {
	margin-top: 0;
}

/* layout (columns and boxes) */
.content-wrap {
	max-width: 1000px;
	margin: 0 auto;
}
.layout {
	display: flex;
	width: 100%;
	column-gap: 32px;
}

.section {
	flex-grow: 1;
}

.section.one-third {
	flex-grow: 0;
	flex-shrink: 0;
	width: 33.33333333%;
}

.block-stack {
	display: flex;
	flex-direction: column;
	row-gap: 16px;
	height: 100%;
}

.box {
	border: 1px solid rgba(0,0,0,0.1);
	background-color: white;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05);
	font-size: 15px;
	padding: 16px;
	border-radius: 12px;
}

.box .box {
	box-shadow: none;
}

.box header {
	margin: -16px -16px 16px -16px;
	padding: 16px;
	background-color: rgba(243, 243, 243, 1);
	border-bottom: 1px solid rgba(227, 227, 227, 1);
	color: rgb(48,48,48);
	font-weight: 500;
}

.box footer {
	margin: 16px -16px -16px -16px;
	padding: 16px;
	border-top: 2px solid rgb(227, 227, 227);
}


.box h4 {
	margin: 0 0 8px 0;
	font-size: 16px;
	font-weight: 500;
}
.box h4:not(:first-child) {
	margin-top: 12px;
}

.box h1:first-child, .box h2:first-child, .box h3:first-child {
	margin-top: 0;
}

/* modal page (e.g. login) */
body.modal {
	height: 100vh;
	background-color: var(--colour-deep-forest);
	background-image: url(/images/rings.svg);
	background-size: 180%;
	background-position: bottom right;
	background-repeat: no-repeat;
	min-height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding: 0 20px;
}

body.modal .modal-box {
	width: 500px;
	border-radius: 20px;
	padding: 40px;
	background-color: white;
	box-shadow: 0 0 20px #000;
}

	body.modal .modal-box h1 {
		margin-bottom: 0;
	}

	body.modal .modal-box h4 {
		margin-top: 0;
		color: rgba(0,0,0,0.5);
	}

.text-success, .text-success a { color: var(--colour-success) !important; }
 .text-danger,  .text-danger a { color: var(--colour-danger) !important; }
.text-warning,    .text-warn a { color: var(--colour-warning) !important; }
  .text-muted,   .text-muted a { color: rgba(0,0,0,0.5) !important; }

.text-right { text-align: right }
.text-centre { text-align: center }
.text-center { text-align: center }

.light { font-weight: 300; }
.normal { font-weight: 400; }
.semibold { font-weight: 500; }
.bold { font-weight: 700; }
.italic { font-style: italic; }

.bg-success { background-color: var(--colour-success) !important; color: white; }
.bg-danger  { background-color: var(--colour-danger) !important; color: white; }
.bg-disabled { background-color: var(--colour-disabled) !important; color: white; }

tr.bg-danger td { background-color: var(--colour-danger) !important; }

/* tables */
table {
	border-collapse: collapse;
}
th {
	text-align: left;
	color: rgba(0,0,0,0.5);
	padding: 5px;
	font-weight: 500;
}
td {
	vertical-align: top;
	padding: 5px;
}
th.border, td.border {
	border: 1px solid rgba(0,0,0,0.1);
}
th.border-left, td.border-left {
	border-left: 1px solid rgba(0,0,0,0.1);
}
table.striped tr:nth-of-type(2n+1) td {
	background-color: rgba(0, 0, 0, 0.02);
}
tbody tr td {
	border-top: 1px solid rgba(0,0,0,0.1);
}
table.sticky-head {
	border-collapse: separate;
	border-spacing: 0;
	border-width: 0;
}
	table.sticky-head thead tr {
		position: sticky;
		top: 0;
	}
	table.sticky-head th {
		background-color: white;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	table.sticky-head tr:first-of-type td {
		border-top: none;
	}
	table.sticky-head thead.stuck tr {
		box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		z-index: 1;
	}

table.clickable-rows tr[data-row-href] {
	cursor: pointer;
}

	table.clickable-rows tr[data-row-href]:hover {
		background-color: rgba(0, 0, 0, 0.02);
	}

.box > table thead:not(.stuck) th:first-of-type {
	border-top-left-radius: 12px;
}
.box > table thead:not(.stuck) th:last-of-type {
	border-top-right-radius:12px;
}

/* tooltips */
*[tooltip] {
	--tooltip-bg: white;
	--tooltip-fg: rgba(0,0,0,0.6);
	cursor: default;
}
	/* tooltip text */
	*[tooltip]:not(.tooltip-before):after {
		opacity: 0;
		z-index: 1;
		position: absolute;
		margin-left: 10px;
		content: attr(tooltip);
		
		background: var(--tooltip-bg);
		transition: opacity .2s ease;
		color: var(--tooltip-fg);
		font-weight: 700;
		font-size: 13px;
		border-radius: 5px;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow: 0 5px 10px -5px rgba(0,0,0,0.2);
		padding: 5px;
		pointer-events: none;
	}
	*[tooltip]:hover:after {
		opacity: 1;
	}

	*[tooltip].tooltip-before:before {
		opacity: 0;
		z-index: 1;
		position: absolute;
		margin-left: -10px;
		transform: translateX(-100%);
		content: attr(tooltip);
		
		background: var(--tooltip-bg);
		transition: opacity .2s ease;
		color: var(--tooltip-fg);
		font-weight: 700;
		font-size: 13px;
		border-radius: 5px;
		border: 1px solid rgba(0,0,0,0.2);
		box-shadow: 0 5px 10px -5px rgba(0,0,0,0.2);
		padding: 5px;
		pointer-events: none;
	}
	*[tooltip].tooltip-before:hover:before {
		opacity: 1;
	}

	*[tooltip].tooltip-above:after {
		transform: translate(-50%, calc(-100% - 4px));
	}

/* help icon (circle info) */
.help-info {
	cursor: pointer;
	vertical-align: middle;
}
	html a.help-info {
	color: rgba(0,0,0,0.4);
	}

	.help-info svg {
		width: 16px;
		height: 16px;
	}

/* icons */
svg.icon {
	width: 24px;
	height: 24px;
	vertical-align: text-bottom;
}

	svg.icon.medium {
		width: 18px;
		height: 18px;
	}

	svg.icon.small {
		width: 12px;
		height: 12px;
		vertical-align: baseline;
	}

	

/* alerts */
.alert {
	display: inline-block;
	padding: 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: var(--colour-deep-forest-20);
	color: var(--colour-deep-forest-80);
}

	.alert.success {
		color: var(--colour-success);
		background-color: var(--colour-success-20);
	}

	.alert.danger {
		color: var(--colour-danger);
		border-color: var(--colour-danger);
		background-color: var(--colour-danger-light);
	}

	.alert.warning {
		color: var(--colour-warning-120);
		background-color: var(--colour-warning-20);
	}

	.alert.secondary {
		color: rgb(60,60,60);
		background-color: rgba(0,0,0,0.05);
	}

	.alert a {
		color: inherit !important;
	}

	.alert :first-child {
		margin-top: 0;
	}

	.alert :last-child {
		margin-bottom: 0;
	}

/* pagination */
.pagination {
	margin-top: 16px;
}
.pagination .summary {
	text-align: center;
	margin-bottom: 8px;
}
.pagination .buttons {
	display: flex;
	justify-content: center;
	gap: 4px;
	--button-radius: 8px;
}
.pagination .buttons a {
	background: var(--colour-trunk-40);
	color: rgba(0,0,0,0.6);
	padding: 6px 10px;
}
.pagination .buttons a[href]:hover {
	background: var(--colour-trunk-80);
	color: rgba(0,0,0,0.8);
}
.pagination .buttons a.prev {
	border-radius: var(--button-radius) 0 0 var(--button-radius);
}
.pagination .buttons a.next {
	border-radius: 0 var(--button-radius) var(--button-radius) 0;
}
.pagination .buttons a:not([href]) {
	color: rgba(0,0,0,0.2);
}
.pagination .buttons a svg {
	height: 12px;
	width: 12px;
}

/* badges */
.badge {
	display: inline-block;
	font-size: 14px;
	line-height:14px;
	background: rgba(0,0,0,0.05);
	border-radius: 8px;
	padding: 4px 8px;
	color: rgba(0,0,0,0.6);
	font-weight: 500;
}
.badge.success {
	color: var(--colour-success);
	background-color: var(--colour-success-20);
}
.badge.warning {
	color: var(--colour-warning-120);
	background-color: var(--colour-warning-20);
}
.badge.danger {
	color: var(--colour-danger);
	background-color: var(--colour-danger-20);
}
.small .badge, .badge.small {
	font-size: 12px;
}

/* timelines */
.timeline {
	font-size: 15px;
}

.timeline .event {
	position: relative;
	display: flex;
	padding-left: 80px;
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40px, rgb(227, 227, 227) 40px, rgb(227, 227, 227) 42px, rgba(0, 0, 0, 0) 42px);
	padding-bottom:  16px;
}

.timeline .event:first-of-type {
	background-position: 0 10px;
	background-repeat: no-repeat;
}

.timeline .event:last-of-type {
	padding-bottom:  0;
	background-size: 100% 10px;
	background-repeat: no-repeat;
}

/* timeline markers */
.timeline .event:before {
	content: '';
	display: block;
	width: 14px;
	height: 14px;
	position: absolute;
	left: 34px;
	top: 4px;
	border: 3px solid rgb(227, 227, 227);
	background-color: rgb(100, 100, 100);
	border-radius: 50%;
	box-sizing: border-box;
}

.timeline .event-detail {
	flex-grow: 1;
	flex-shrink: 1;
}

.timeline .event-when {
	flex-shrink: 0;
	color: rgba(0,0,0,0.6);
	width: 130px;
	text-align: right;
}

/* tabs */
.tabs {
	display: flex;
	column-gap: 6px;
}

.tabs button {
	border: none;
	border-radius: 8px;
	background: none;
	font-size: 14px;
	color: rgba(0,0,0,0.5);
	box-shadow: none;
	font-weight: 700;
}

.tabs button:not([disabled]):hover {
	background-color:rgba(0,0,0,0.05);
}

.tabs button.active {
	background-color:rgba(0,0,0,0.1) ;
}

/* help icon */
.help-icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	margin: 2px;
	vertical-align: text-bottom;
	cursor: pointer;
}
	.help-icon:before {
		content: '';
		display: inline-block;
		width: 100%;
		height: 100%;
		background: url(/images/help-icon.svg);
		background-size: cover;
	}

/* mode switch/toggle (mobile/desktop mode) */
.mode-switch {
	background-color: var(--colour-trunk-40);
	border-radius: 8px;
	display: inline-block;
	padding: 4px;
}

	.mode-switch button {
		color: var(--colour-trunk-140);
		background-color: transparent;
		border: none;
		border-radius: 8px;
		box-shadow: none;
		cursor: pointer;
		padding: 6px 10px;
	}

	.mode-switch button.active {
		background-color: white;
	}

	.mode-switch button:hover:not(.active) {
		background-color: rgba(255,255,255,0.3);
	}

/* diffs */
table.diff {
	border: 1px solid rgba(0,0,0,0.2);
	width: 100%;
	border-radius: 4px;
	color: rgba(0,0,0,0.8);
	font-size: 12px;
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
	table.diff tbody tr td {
		border: none;
		background-color: white;
	}
	
	table.diff td { white-space: pre }
	table.diff tr.del td { background-color: #ffebe9; }
	table.diff tr.del td.num { background-color: #ffcecb; }
	table.diff tr.add td { background-color: #dafbe1; }
	table.diff tr.add td.num { background-color: #d1f8d9; }
	table.diff tr.new-chunk td { background-color: #ddf4ff; }
	table.diff tr.new-chunk td.num { background-color: #bbdfff; text-align: center; }

/* forms */
input[type=text],input[type=password],input[type=email],input[type=number],input[type=search],input[type=file],input[type=date],select,textarea {
	padding: 10px;
	border-radius: 8px;
	display: block;
	border: 1px solid rgba(0,0,0,0.5);
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	margin-bottom: 4px;
}
input:focus,select:focus,textarea:focus,a:focus-visible,button:focus-visible {
	outline-color: var(--colour-deep-forest-70);
}

input[type=search] {
	background-image: url(/images/search.svg);
	background-repeat: no-repeat;
	background-position: 10px 10px;
	background-size: 14px 14px;
	padding-left: 30px;
}
input[type=file] {
	cursor: pointer;
}
input[type=file]::file-selector-button {
	cursor: pointer;
	padding: 10px;
	margin: -10px;
	margin-right: 10px;
	border-radius: 0;
	border: none;
	border-inline-end: 1px solid rgba(0,0,0,0.5);
	background: #fff;
	font-family: inherit;
}
input[type=file].invalid::file-selector-button {
	color: var(--color-danger);
	border-inline-end-color: var(--colour-danger);
}

input[readonly] {
	background-color: #efefef;
	color: rgba(0,0,0,0.6);
}

label {
	display: block;
	margin-bottom: 4px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
}

label.required:after {
	content: '*';
	color: var(--colour-danger);
	margin-left: 4px;
}

button, a.button, select.button {
	--padding-y: 6px;
	--padding-x: 12px;

	border: 1px solid var(--colour-deep-forest-90);
	border-radius: 8px;
	background-color: var(--colour-deep-forest-90);
	color: white;
	padding: var(--padding-y) var(--padding-x);
	box-shadow: -1px -1px 1px inset rgba(0,0,0,0.3), 1px 1px 1px inset rgba(255,255,255,0.2);
	cursor: pointer;
	vertical-align: middle;
	font-family: inherit;
	font-size: 14px;
}

a:visited.button {
	color: white;
}

a.button {
	text-decoration: none;
	display: inline-block;
}

button.secondary, a.button.secondary, select.button.secondary {
	background: rgb(255, 255, 255) !important;
	color: rgb(48, 48, 48);
	border: none;
	font-weight: 500;
	box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;
	padding: calc(var(--padding-y) + 1px) calc(var(--padding-x) + 1px); /* match height of normal button which has a border */
}

	button.secondary:hover, a.button.secondary:hover, select.button.secondary:hover {
		background: rgb(250, 250, 250) !important;
	}

	button.secondary:active, a.button.secondary:active {
		padding-top: calc(var(--padding-y) + 2px);
		padding-bottom: var(--padding-y);
	}

	button.secondary.danger, a.button.secondary.danger {
		color: var(--colour-danger) !important;
		font-weight: 700;
	}

select.button {
	width: auto;
	background-color: var(--colour-deep-forest-90);
	color: white;
	font-weight: 500;
	border: none;
	box-shadow: -1px -1px 1px inset rgba(0,0,0,0.3), 1px 1px 1px inset rgba(255,255,255,0.2);
	margin-bottom: 0;
}
select.button:focus {
	background-color: white;
	color: rgb(48, 48, 48);
	box-shadow: rgb(181, 181, 181) 0px -1px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgb(255, 255, 255) 0px 0.5px 0px 1.5px inset;
}

button.small, a.button.small {
	--padding-y: 5px;
	--padding-x: 8px;
}

button.danger, a.button.danger {
	background-color: var(--colour-danger);
	border-color: var(--colour-danger);
}

button:not([disabled]):hover, a.button:not([disabled]):hover {
	border-color: var(--colour-deep-forest);
	background-color: var(--colour-deep-forest);
}

button.danger:hover, a.button.danger:hover {
	border-color: var(--colour-danger-dark);
	background-color: var(--colour-danger-dark);
}

button:active, a.button:active {
	box-shadow: inset 0 1px 0 1px rgba(0,0,0,0.4);
	padding-top: calc(var(--padding-y) + 1px);
	padding-bottom: calc(var(--padding-y) - 1px);
}

button[disabled] {
	background-color: rgba(0,0,0,0.2);
	color: rgba(0,0,0,0.4);
	cursor: default;
	border-color: rgba(0,0,0,0.2);
	box-shadow: none;
}

.icon-button, button.icon-button {
	background-color: transparent;
	color: rgb(138,138,138);
	cursor: pointer;
	transition: background-color .1s ease;
	border: none;
	box-shadow: none;
	padding: 6px;
	line-height: 14px;
	height: 26px;
	border-radius: 8px;
}
	a.icon-button {
		border-radius: 4px;
		display: inline-block;
	}

	a.icon-button:visited {
		color: rgb(138,138,138);
	}
	.icon-button svg, button.icon-button svg {
		width: 14px;
		height: 14px;
	}

	.icon-button:hover, button.icon-button:hover {
		background-color: rgba(0,0,0,0.05);
	}

	.icon-button[tooltip]:before, button.icon-button[tooltip]:before,
	.icon-button[tooltip]:after, button.icon-button[tooltip]:after {
		margin-top: -5px;
	}

/* toggle switch (checkbox) */
.switch input[type=checkbox] {
        appearance: none;
        border: 3px solid rgba(0,0,0,0.25);
        background-position: left center;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        width: 50px;
        height: 30px;
        border-radius: 15px;
        cursor: pointer;
        transition: background-position .1s ease-in-out;
        vertical-align: bottom;
		background-color: rgba(0,0,0,0.05);
    }

    .switch input[type=checkbox]:checked {
        border-color: var(--colour-field-120);
        background-color: var(--colour-field);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23000000' fill-opacity='0.25'/%3e%3c/svg%3e");
        background-position: right center;
    }

	.switch input[type=checkbox]:disabled {
		cursor: default;
	}

	.switch.labelled input[type=checkbox] {
		width: 80px;
	}
	.switch.labelled input[type=checkbox]:before {
		content: attr(data-no, 'No');
		display: block;
		color: rgba(0,0,0,.4);
		font-size: 16px;
		font-weight: 700;
		padding: 4px 8px;
		padding-left: 30px;
	}
	.switch.labelled input[type=checkbox]:checked:before {
		content: 'Yes';
		padding-left: 14px;
		color: rgb(255,255,255);
	}

/* form validation */
input.invalid, select.invalid, textarea.invalid {
	border-color: var(--colour-danger);
	color: var(--colour-danger);
	background-color: var(--colour-danger-20);
}
.invalid-message {
	color: var(--colour-danger);
	padding: 4px 2px;
}
.invalid-message:before {
	content: '';
	background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4KPHBhdGggZmlsbD0iI2RjMzU0NSIgZD0iTTI1NiA1MTJBMjU2IDI1NiAwIDEgMCAyNTYgMGEyNTYgMjU2IDAgMSAwIDAgNTEyem0wLTM4NGMxMy4zIDAgMjQgMTAuNyAyNCAyNFYyNjRjMCAxMy4zLTEwLjcgMjQtMjQgMjRzLTI0LTEwLjctMjQtMjRWMTUyYzAtMTMuMyAxMC43LTI0IDI0LTI0ek0yMjQgMzUyYTMyIDMyIDAgMSAxIDY0IDAgMzIgMzIgMCAxIDEgLTY0IDB6Ii8+Cjwvc3ZnPg==');
	background-size: contain;
	display: inline-block;
	width: 16px;
	height: 16px;
	margin-right: 4px;
	position: relative;
	top: 3px;
}

/* autogrow */
.autogrow-wrap {
	position: relative;
}

.autogrow-mirror {
	display: block;
	color: red;
	white-space: pre-wrap;
}
textarea.autogrow.init {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	background: transparent;
	appearance: none;
	resize: none;
}

/* search bar */
.search-bar {
	display: flex;
	width: 100%;
	column-gap: 16px;
	margin-bottom: 10px;
}

.search-bar input {
	flex-grow: 1;
	border-color: white;
}

.search-bar a {
	text-decoration: none;
	font-weight: 500;
	line-height: 36px;
}

/* autocomplete */
.autocomplete {
	margin-bottom: 4px;
	position: relative;
	width: 100%;
	--border-radius: 8px;
	--input-height: 37px;
}
	.autocomplete input {
		margin-bottom: 0;
	}

	.autocomplete.has-suggestions {
		border-top-left-radius: var(--border-radius);
		border-top-right-radius: var(--border-radius);
	}

	.autocomplete.has-suggestions input:focus {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		position: relative;
		z-index: 4; /* rise above the box-shadow from suggestions */
		outline: none;
		border-color: #ccc;
		border-bottom-color: #fff;
	}

	.autocomplete .suggestions {
		border: 1px solid #ccc;
		border-top-width: 0;
		z-index: 3;
		background: #fff;
		position: absolute;
		width: 100%;
		display: none;
		border-radius: var(--border-radius);
		box-shadow: 0 0 20px rgba(0,0,0,0.2);
		overflow: hidden;
		padding-top: var(--input-height);
		margin-top: calc(var(--input-height) * -1);
	}

	.autocomplete.has-suggestions .suggestions {
		display: block;
	}

	.autocomplete .suggestion {
		padding: 6px;
		cursor: default;
	}

		.autocomplete .suggestion.selected {
			background: var(--colour-trunk-20);
		}

		.autocomplete .suggestion:hover {
			background: var(--colour-trunk-40);
		}

/* toast (flash messages) */
.toast-wrap {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
	z-index: 3;
	display: flex;
	flex-direction: column;
	justify-content: center;
	pointer-events: none;
	align-items: center;
}

.toast {
	display: inline-flex;
	background: var(--colour-field);
	color: rgba(255, 255, 255, 1);
	padding: 12px;
	margin-bottom: 20px;
	border-radius: 8px;
	box-shadow: rgba(26,26,26,0.22) 0px 8px 16px -4px;
	font-weight: 400;
	transform: translateY(64px);
	opacity: 0;
	transition: transform 0.4s cubic-bezier(0.19, 0.91, 0.38, 1),
		opacity 0.4s cubic-bezier(0.19, 0.91, 0.38, 1);
	pointer-events: auto;
}

.toast.error {
	background-color: var(--colour-danger);
}

.toast.in {
	transform: translateY(0);
	opacity: 1;
}

.toast.in.out {
	transform: scale(0.85);
	opacity: 0;
}

.toast.in.out.hide {
	display: none;
}

.toast .close {
	margin-left: 8px;
	width: 20px;
	height: 20px;
	cursor: pointer;
}

audio::-webkit-media-controls-enclosure {
	background-color: var(--colour-trunk-40);
}

/* modal dialog box */
.modal-dialog-backdrop {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #00000080;
	opacity: 0;
	transition: opacity 200ms;
	z-index: 1;
}
	.modal-dialog-backdrop.entering {
		display: block;
	}

	.modal-dialog-backdrop.show {
		opacity: 1;
	}

.modal-dialog-wrap {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
	justify-content: center;
	z-index: 2;
}

.modal-dialog-wrap.entering .modal-dialog {
	display: block;
}

.modal-dialog-wrap.show .modal-dialog {
	/*transform: translateY(0);*/
	transform: scale(1);
	opacity: 1;
}

.modal-dialog {
	display: none;
	min-width: 300px;
	max-width: 620px;
	box-sizing: content-box;
	position: relative;
	margin: 0 auto;
	pointer-events: initial;
	opacity: 0;
	/*transform: translateY(600px);*/
	transform: scale(.85);
	transition: transform 200ms, opacity 200ms;
	padding: 16px; /* leave space on small screens */
}

.modal-dialog.large {
	max-width: 980px;
}

.modal-dialog .box {
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* slightly darker shadow */
	overflow: hidden;
}

.modal-dialog .modal-close {
	float: right;
	padding: 0;
	background: none;
	border: none;
	box-shadow: none;
	border-radius: 8px;
	padding: 4px;
	margin: -4px;
}

.modal-dialog .modal-close:hover {
	background-color: rgba(0,0,0,0.05);
}

.modal-dialog .modal-close .icon {
	color: rgb(150, 150, 150);
	width: 20px;
	height: 20px;
}

/* data list */
dl {
	margin: 0;
}
dl dt {
	color: rgba(0,0,0,0.5);
}
dl dd {
	margin-left: 0;
	margin-bottom: 12px;
}
dl dd:last-of-type {
	margin-bottom: 0;
}

/* action header */
.action-header {
	display: flex;
	align-items: flex-start;
}

	.action-header *:first-child {
		flex-grow: 1;
	}

	.action-header .actions .action {
		display: inline-block;
		background-color: rgb(227,227,227);
		color: rgb(48,48,48);
		text-decoration: none;
		border-radius: 8px;
		padding: 4px 12px;
		font-size: 14px;
		font-weight: 500;
	}

		.action-header .actions .action[disabled], .action-header .actions .action.disabled {
			color: rgb(128,128,128);
			cursor: default;
		}

		.action-header .actions .action:not([disabled]):not(.disabled):hover {
			background-color: rgb(212,212,212);
		}

		.action-header .actions .action:not([disabled]):not(.disabled):active {
			box-shadow: inset 0 1px 0 1px rgba(0,0,0,0.2);
		}

		.action-header .actions .button {
			font-size: 14px;
			--padding-x: 11px;
			--padding-y: 3px;
		}

		.action-header .actions button.action, .action-header .actions .button.action {
			border: none;
			box-shadow: none;
			vertical-align: baseline;
		}

		.action-header .actions select.button.action:focus:hover {
			background-color: rgb(227,227,227);
		}

/* progress bar */
.progress {
	background-color: rgb(0,0,0,0.1);
	height: 10px;
	border-radius: 5px;
	--percent-complete: 0%;
	overflow: hidden;
	box-shadow: 2px 2px 2px rgba(0,0,0,0.2) inset;
}

.progress.slim {
	height: 6px;
}

.progress:before {
	content: '';
	display: block;
	height: 10px;
	width: var(--percent-complete);
	background-color: var(--colour-field);
	transition: width .3s ease-out;
}

/* mobile layout */
@media screen and (max-width: 767px) {
	.page {
		flex-direction: column;
	}
	.page nav {
		height: auto;
		max-height: 60px;
		width: 100%;
		position: unset;
		transition: max-height .3s;
		overflow:hidden;
		position: absolute;
		display: block;
	}
		.page nav > ul {
			opacity: 0;
			transition: opacity .3s;
		}

		.page nav .toggle-mobile-nav {
			display: inline-block;
			background-color: var(--colour-trunk);
			box-shadow: unset;
			float: left;
			margin-top: 16px;
			margin-left: 12px;
			padding: 6px 4px;
		}
			.page nav .toggle-mobile-nav svg.icon {
				color: var(--colour-deep-forest)!important;
				width: 16px;
				height: 16px;
			}

		.page nav .logo {
			display: inline-block;
			width: 140px;
			margin: 0;
			padding: 10px;
		}

		.page nav.show {
			max-height: 100vh;
			box-shadow: 0 -10px 10px 10px rgba(0,0,0,0.5);
		}
			.page nav.show > ul {
				opacity: 1;
			}

	.page .content {
		margin-top: 60px;
		margin-left: 0;
	}

	.layout {
		flex-direction: column;
		row-gap: 16px;
	}

	.section.one-third {
		width: auto;
	}
}