:root {
	--grey-status-color: rgb(120,120,120);
	--green-status-color: rgb(47,204,102);
	--green-border-color: rgb(41,183,92);
	--yellow-status-color: rgb(241,196,15);
	--yellow-border-color: rgb(209,171,9);
	--red-status-color: rgb(241,76,60);
	--red-border-color: rgb(220,53,69);
}

body {
	font-family: sans-serif;
	font-size: 11pt;
	background-color: rgb(245,245,245);
	width: 850px;
	margin: 50px auto;
}

a {
	text-decoration: none;
	color: rgb(35,133,208);
}

a:hover {
	text-decoration: underline;
	cursor: pointer;
}

/* Header */

div.header {
	color: black;
	font-size: 30pt;
	font-weight: 500;
	margin-bottom: 40px;
	display: flex;
	align-items: baseline;
}

div.header img {
	width: 15%;
	position: relative;
	float: left;
	border-right: 2px solid black;
	padding-right: 10px;
	margin-right: 10px;
}

div.header span {
	position: relative;
	top: -3px
}

/* Global Status */

div.status {
	padding: 10px;
	padding-left: 15px;
	margin-bottom: 50px;
	border-radius: 5px;
	color: white;
	font-size: 16pt;
	font-weight: 500;
	line-height: 20pt;
}

div.status-green {
	background-color: var(--green-status-color);
	border: 1px solid var(--green-border-color);
}

div.status-yellow {
	background-color: var(--yellow-status-color);
	border: 1px solid var(--yellow-border-color);
}

div.status-red {
	background-color: var(--red-status-color);
	border: 1px solid var(--red-border-color);
}

/* List of Services */

table.services {
	border-collapse: separate;
	border-radius: 5px;
	border: 1px solid rgb(244,224,224);
	background-color: white;
	margin-bottom: 50px;
	width: 100%;
}

table.services td {
	padding: 15px;
	border-bottom: 1px solid rgb(244,224,224);
}

table.services tr:last-child td {
	border: 0px;
}

table.services span.name {
	position: relative;
	float: left;
	font-weight: 500;
}

table.services span.status {
	position: relative;
	float: right;
}

table.services span.green {
	color: var(--green-status-color);
}

table.services span.yellow {
	color: var(--yellow-status-color);
}

table.services span.red {
	color: var(--red-status-color);
}

table.services span.grey {
	color: var(--grey-status-color);
}

/* Events */

#events div.month {
	font-size: 16pt;
	border-bottom: 2px solid #ccc;
	width: 100%;
	padding-bottom: 5px;
	margin-bottom: 0;
}

#events span.period {
	display: block;
	line-height: 14pt;
	color: #787878;
	margin-bottom: 10px;
}

#events span.summary {
	display: block;
	line-height: 14pt;
	margin-bottom: 3px;
	color: #444;
}

#events span.summary p {
	margin: 0;
	margin-bottom: 10px;
}

#events span.summary p:last-child {
	margin: 0;
}

#events div.circle-parent {
	position: relative;
	left: -51px;
	top: -7px;
}

#events div.circle {
	display: block;
	position: absolute;
	height: 20px;
	width: 20px;
	border: 5px solid #ccc;
	border-radius: 20px;
	margin-right: 20px;
	margin-left: 10px;
}

#events div.circle-sev-1 {
	background-color: #e12729;
}

#events div.circle-sev-2 {
	background-color: #f14c3c;
}

#events div.circle-sev-3 {
	background-color: #e16b1d;
}

#events div.circle-sev-4 {
	background-color: #dbab09;
}

#events div.circle-sev-5 {
	background-color: #009879;
}

#events h2 {
	font-size: 14pt;
	font-weight: normal;
	margin: 0px;
	margin-bottom: 5px;
	width: fit-content;
}

#events h2.expand {
	cursor: pointer;
}

#events h2.expand:hover {
	text-decoration: underline;
}

#events h3 {
	font-size: 14pt;
	font-weight: normal;
	margin: 0px;
	margin-bottom: 5px;
	margin-top: 5px;
}

#events div.details {
	height: 0;
	overflow: hidden;
	transition: height 1s;
	line-height: 16pt;
}

#events ul.hist {
	border-left: 2px solid #ccc;
	margin-left: 25px;
	margin-top: 0;
	list-style: none;
	padding-inline-start: 25px;
	padding-top: 25px;
}

#events ul.hist li {
	margin-bottom: 15px;
}