:root {
	--border: #e5e7eb;
	--code: #f3f4f6;
	--link: rgb(71 70 69);
	--link-hover: rgb(0 0 0);
	--code-text: #302c2c;
}

body {
	max-width: 60rem;
	margin-left: auto;
	margin-right: auto;
	padding: 3rem 1rem 8rem;
	line-height: 1.4;
	font-size: 1rem;
	font-weight: 400;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

h1 {
	font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.135rem;
}

h2>a {
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.48px;
}

h3 {
	font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.48px;
}

a {
	color: var(--link);
	font-weight: 400;
	text-decoration-color: #00000040;
	text-decoration-line: underline;
    text-underline-offset: 4px;
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .3s;
}

a:hover {
	color: var(--link-hover);
	text-decoration-color: var(--link);
}

hr {
	border-style: solid;
	border-color: var(--border);
}

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

ul>li::before {
	position: absolute;
	top: .625rem;
	left: .125rem;
	height: .375rem;
	width: .375rem;
	border-radius: 9999px;
	background-color: currentColor;
	opacity: .4;
	content: "";
}

ul>li {
	position: relative;
	padding-left: 1.25rem;
}

pre {
	overflow-wrap: normal;
	word-break: normal;
	border-radius: .375rem;
	border-width: 1px;
	border-style: solid;
	border-color: var(--border);
	background-color: var(--code);
	line-height: 1.5;
	word-spacing: normal;
	-moz-tab-size: 4;
    -o-tab-size: 4;
	tab-size: 4;
	padding: 1em;
	overflow: auto;
	font-family: SF Mono, SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	color: var(--code-text);
    font-size: .95em;
    text-align: left;
    white-space: pre;
    word-wrap: normal;
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
    margin: .5em 0;
    overflow: auto;
    border: 1px solid var(--border);
}

table, th, td {
  border: 1px solid #dddddd;
  border-collapse: collapse;
  padding: 8px;
  margin: 0;
}

td.outdated-version {
  color: red;
}

td.known-outdated-version {
  color: #aaaaaa;
}

.hidden {
	display: none;
}

/* OS Group Styles using <details> */
#os_groups {
	padding: 24px 0 0 0;
}

.os-group {
	width: 100%;
	margin-bottom: 10px;
	border: 1px solid #ccc;
}

.os-group > summary {
	height: 45px;
	line-height: 45px;
	padding-left: 40px;
}

.os-group summary {
	cursor: pointer;
	background: #f5f5f5;
	user-select: none;
	list-style: none;
	position: relative;
}

.os-group summary::-webkit-details-marker,
.os-group summary::marker {
	display: none;
}

.os-group > summary::before {
		position: absolute;
	left: 15px;
}

.os-group summary:before {
	content: "\25B6 ";
	font-size: 14px;
	color: black; /* force black instead of accent color */
    font-family: "Segoe UI Symbol", "Segoe UI", sans-serif; /* stable symbol font */
}

.os-group[open] > summary::before {
	content: "\25BC ";
}

.os-group-content {
	border-top: 1px solid #ccc;
	padding: 0 10px 10px 10px;
}

.os-group-content ul {
	margin-top: 0;
}

.os-group-content section {
	margin-top: 0;
}

.os-group-content > p,
.os-group-content > ul,
.os-group-content > h3 {
	padding: 0 12px;
}

.os-group-content > ul {
	padding-left: 2rem;
}

/* Summary links should not look like links */
.os-group > summary > a,
details.linux-distro summary > a {
	color: inherit;
	text-decoration: none;
	font-weight: inherit;
}

/* Linux distro details */
details.linux-distro {
	margin: 10px 0;
	border: 1px solid #ddd;
	border-radius: 4px;
}

details.linux-distro summary {
	padding: 8px 12px;
	cursor: pointer;
	background: #fafafa;
	user-select: none;
	font-weight: 500;
	list-style: none;
}

details.linux-distro summary::-webkit-details-marker,
details.linux-distro summary::marker {
	display: none;
}

details.linux-distro summary::before {
	content: "\25B6 ";
	display: inline-block;
	width: 1em;
	margin-right: 0.25em;
	transition: transform 0.2s;
}

details.linux-distro[open] summary::before {
	transform: rotate(90deg);
}


details.linux-distro summary:hover {
	background: #f0f0f0;
}

details.linux-distro pre {
	margin: 0;
	border: none;
	border-top: 1px solid #ddd;
	border-radius: 0 0 4px 4px;
}

details.linux-distro p {
	padding: 0;
}

details.linux-distro ul {
	padding-left: 2rem;
}

details.linux-distro > *:not(summary,p) {
	padding: 20px 20px 20px 0;
}

details.linux-distro > *:not(summary) {
	padding-left: 30px;
}