* {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}
html {
	min-height:100%;
	overflow-x:hidden;
}
body {
	display:flex;
	flex-flow:column nowrap;
	align-items: center;
	background-color: rgb(3 7 18);
	color:#d6d6d6;
	gap:25px;
	font-family: "IBM Plex Sans", "Roboto", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
	padding:40px 20px;
	min-height:100vh;
	overflow-x:hidden;
}

a:has(>.icon:only-child) {
	display:inline-flex;
	text-decoration: none;
}

a {
	color: rgb(51 91 185);
	text-decoration-style: dotted;
	&:hover {
		text-decoration-style:solid;
	}
}

header {
	&>h1 {
		font-weight:600;
	}
	& img {
		width: 50px;
		vertical-align: middle;
		margin-right: 8px;
	}
}

error-notice {
	border-radius: 3px;
	background:rgb(159, 20, 20);
	padding:5px 12px;
	&:empty {
		display:none;
	}
}

main {
	max-width: 900px;
	width: 85%;
	flex-grow: 1;
	& .site {
		& + .site {
			margin-top:50px;
		}
	}
}

.site {
	padding: 10px;
	background-color: rgb(9 14 26);
	border-radius: 0.5rem;
	border: 1px solid rgb(17 24 39);
}

h1 {
	margin-bottom: 5px;
}

.a-link {
	margin-left: 5px;
	top: 2px;
	position: relative;
}

footer {
	text-align: center;
	color: rgb(64 72 91);
}


.status {
	display: flex;
	flex-direction: row;
}

@media (max-width: 850px) {
	.status {
		width: fit-content;
		font-size: 0.8em;
	}
}

.p-status {
	color: rgb(91 91 91);
	font-size: 0.9em;
}

.split-status {
    width: 100%;
    height: 1px;
    background-color: rgb(177 177 177);
    margin-top: 5px;
    margin-bottom: 5px;
}

.latency-status {
	color: rgb(91 91 91);
	font-size: 0.8em;
}

.status-decor {
	width: 0.25rem;
	flex-shrink: 0;
	border-radius: 0.25rem;
	margin-right: 7px;
	&[data-status="outage"] {
		background:#cf0505;
	}
	&[data-status="highly-degraded"] {
		background:#ff651d;
	}
	&[data-status="degraded"] {
		background:#ffae19;
	}
	&[data-status="healthy"] {
		background:#11b066;
	}
	&[data-status="none"] {
		background:#141720;
	}
}

.endpoint-content {
	display: flex;
	justify-content: space-between;
}

.uptime {
	font-size: 1em;
	top: 2px;
	position: relative;
}

status-bar {
	display:flex;
	flex-flow:row nowrap;
	align-items:center;
	justify-content:space-between;
	margin: 10px 0px;
	user-select:none;
	& status-bar-entry {
		display:block;
		flex:1 1 0px;
		width:0px;
		max-width: 7px;
		height:25px;
		border-radius:2px;
		position:relative;
		&[data-status="outage"] {
			background:#890303;
			border: 1px solid #fd0000;
		}
		&[data-status="highly-degraded"] {
			background:#e25919;
		}
		&[data-status="degraded"] {
			background:#eba117;
		}
		&[data-status="healthy"] {
			background:#10b568;
		}
		&[data-status="none"] {
			background:#232a39;
		}
		& > div {
			color: rgb(17 7 27);
			flex-direction: row;

			position: absolute;
			left: 50%;
			bottom: 100%;
			transition: transform 0.25s, opacity 0.25s;
			transform: translate(-50%, 0px);
			opacity:0;
			pointer-events: none;
			padding: 6px;
			background: #d9d9d9;
			border-radius: 4px;

			display: flex;
			flex-flow: column nowrap;
			width: max-content;
			max-width: 500px;

			font-size: 0.9em;
			z-index: 1;
			user-select: text;
			& strong {
				font-weight: 400;
				font-size: 1.05em;
			}
			& em {
				font-style: normal;
				opacity: 0.8;
			}
		}
		&:focus {
			box-shadow:0px 0px 0px 1.5px #d6d7d8;
		}
		&:hover > div, &:focus > div {
			pointer-events:initial;
			transform:translate(-50%, -5px);
			opacity:1;
		}
		&:hover > div {
			z-index:2;
		}
	}
}

.div-comment {
	background-color: #4d370e;
	border-radius: 5px;
	border: 1px solid #c58612;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 5px;
}

.svg-comment {
	height: 25px;
	width: 25px;
	fill: #ee9f0a;
	margin-right: 10px;
}

.comment {
	color: #ee9f0a;
	font-size: 20px;
}

.endpoint-comment {
	background-color: #5b320952;
	border-radius: 5px;
	padding: 10px;
	border: 1px solid #4f391f;
}