@import url(https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap);

html {
	background-color: var(--bg-color);
	color-scheme: var(--color-scheme);
}

body {
	background-color: var(--bg-color);
	color: var(--fg-color);
	font-family: JetBrains Mono, monospace;
	font-size: 10pt;
	line-height: 150%;
	margin: 0;
}

body,
html {
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

main {
	flex-grow: 1;
	padding: 0 20px 20px;
}

#root,
main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#root {
	min-height: 100vh;
}

a:active,
a:hover,
a:link,
a:visited {
	color: #f77669;
	text-decoration: none;
}

a:active,
a:hover {
	border-bottom: 1px solid #f77669;
}

button,
input,
select {
	background-color: var(--secondary-bg);
	border-radius: 6px;
	border-style: none;
	color: #ccc;
	font-family: JetBrains Mono, monospace;
	padding: 5px;
}

button :focus,
input :focus,
select :focus {
	outline: none;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZmlsbD0iI2I1YjViNSIgZD0iTTIwNy4wMjkgMzgxLjQ3NiAxMi42ODYgMTg3LjEzMmMtOS4zNzMtOS4zNzMtOS4zNzMtMjQuNTY5IDAtMzMuOTQxbDIyLjY2Ny0yMi42NjdjOS4zNTctOS4zNTcgMjQuNTIyLTkuMzc1IDMzLjkwMS0uMDRMMjI0IDI4NC41MDVsMTU0Ljc0NS0xNTQuMDIxYzkuMzc5LTkuMzM1IDI0LjU0NC05LjMxNyAzMy45MDEuMDRsMjIuNjY3IDIyLjY2N2M5LjM3MyA5LjM3MyA5LjM3MyAyNC41NjkgMCAzMy45NDFMMjQwLjk3MSAzODEuNDc2Yy05LjM3MyA5LjM3Mi0yNC41NjkgOS4zNzItMzMuOTQyIDB6Ii8+PC9zdmc+);
	background-position: 97%;
	background-repeat: no-repeat;
	background-size: 10px;
	padding-right: 20px;
}

button {
	cursor: pointer;
}

hr {
	border: 2px solid #252b2d;
}

header {
	background: #181d1f;
	box-shadow: 0 0 4px #130b00;
	color: #ccc;
	font-weight: 400;
	gap: 10px;
	justify-content: space-between;
	line-height: 100%;
	margin: 0;
	padding: 5px 20px;
	z-index: 20;
}

header,
header > #header-logo > .logo {
	align-content: center;
	justify-content: center;
}

header > #header-logo > .logo {
	background-color: var(--logo-bg);
	border: 0;
	border-radius: 5px;
	padding: 6px 3px;
}

header > #header-logo > .logo > h1 {
	color: #fff;
	font-size: 14pt;
	font-weight: 400;
	margin: 0;
	padding: 0 3px;
}

header img {
	-webkit-filter: invert(0);
	filter: invert(0);
	padding-right: 5px;
	align-self: center;
}

header > #header-logo > .logo img {
	padding: 0;
}

/* this is only used in landing as of 2024-03-31 */
footer {
	color: #888;
	font-size: 10pt;
	font-weight: 400;
	margin-top: 30px;
	padding: 0 20px 20px;
	text-align: right;
}

/* this is only used in landing as of 2024-03-31 */
article {
	font-size: 120%;
	margin: 20px auto;
	max-width: 900px;
}

article h1:before,
article h2:before {
	color: #ffc93a;
	content: "# ";
}

optgroup {
	width: auto;
	font-style: normal;
}

.homepage-header > div {
	display: flex;
	flex-grow: 1;
	justify-content: space-around;
	max-width: 900px;
	padding: 50px 0;
}

.homepage-header > div > img {
	width: 25%;
}

.homepage-header > div > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	width: 60%;
}

.homepage-header > div > div > h1 {
	font-size: min(15vw, 150px);
	line-height: 1em;
	margin: 0 0 15px;
}

.homepage-header > div > div > div {
	font-size: min(2vw, 20px);
	line-height: 1.1;
}

.homepage .link {
	height: 75px;
}

.homepage .link .link-description {
	font-weight: 400;
	width: 280px;
}

.homepage section {
	background-color: #252b2d;
	border-radius: 15px;
	margin: 25px 0;
	padding: 0.1px 15px;
}

.homepage .feature {
	display: flex;
	gap: 20px;
	margin: 30px 0;
	padding-left: 20px;
}

.homepage .feature > svg {
	color: #7e7e7e;
	font-size: 70px;
	margin: auto 0;
}

.homepage .feature > div {
	max-width: 70%;
}

.homepage .feature > div h3 {
	color: #ffc93a;
	margin: 0;
}

.downloads h3 > span {
	color: #888;
	font-size: 75%;
}

.downloads .link-description {
	width: 250px;
}

/* this is only used in homepage used as of 2024-03-31 */
.link {
	align-items: center;
	background-color: #252b2d;
	border-radius: 15px;
	display: flex;
	gap: 15px;
	height: 95px;
	justify-content: space-between;
	margin: 10px 0;
	padding: 0 15px;
}

.link:link,
.link:visited {
	border-bottom: none;
	color: #ccc;
}

.link:hover {
	background-color: hsla(0, 0%, 61%, 0.1);
}

.link .link-title {
	align-items: center;
	-webkit-column-gap: 15px;
	column-gap: 15px;
	display: flex;
	flex-direction: row;
	font-size: 150%;
}

.link .link-title svg {
	color: #f77669;
	font-size: 40px;
}

.link .link-description {
	color: #7e7e7e;
}

.link .link-description code {
	color: #ccc;
}

.file-picker em {
	font-size: 60%;
}

@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;700&display=swap";
:host,
:root {
	--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Solid";
	--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Regular";
	--fa-font-light: normal 300 1em/1 "Font Awesome 6 Light";
	--fa-font-thin: normal 100 1em/1 "Font Awesome 6 Thin";
	--fa-font-duotone: normal 900 1em/1 "Font Awesome 6 Duotone";
	--fa-font-sharp-solid: normal 900 1em/1 "Font Awesome 6 Sharp";
	--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}

body {
	font-family: JetBrains Mono, monospace;
	font-size: 10pt;
	line-height: 150%;
	margin: 0;
}

body,
html {
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

main {
	padding: 0 20px 20px;
	flex-grow: 1;
}

#__next,
main {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#__next {
	min-height: 100vh;
}

a:active,
a:hover,
a:link,
a:visited {
	color: var(--link-secondary);
	text-decoration: none;
}

a:active,
a:hover {
	border-bottom: 1px solid var(--link-secondary);
}

button,
input,
select {
	font-family: JetBrains Mono, monospace;
	background-color: var(--secondary-bg);
	border-style: none;
	color: var(--button-fg);
	border-radius: 6px;
	padding: 5px;
}

button :focus,
input :focus,
select :focus {
	outline: none;
}

select {
	-webkit-appearance: none;
	appearance: none;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48cGF0aCBmaWxsPSIjYjViNWI1IiBkPSJNMjA3LjAyOSAzODEuNDc2TDEyLjY4NiAxODcuMTMyYy05LjM3My05LjM3My05LjM3My0yNC41NjkgMC0zMy45NDFsMjIuNjY3LTIyLjY2N2M5LjM1Ny05LjM1NyAyNC41MjItOS4zNzUgMzMuOTAxLS4wNEwyMjQgMjg0LjUwNWwxNTQuNzQ1LTE1NC4wMjFjOS4zNzktOS4zMzUgMjQuNTQ0LTkuMzE3IDMzLjkwMS4wNGwyMi42NjcgMjIuNjY3YzkuMzczIDkuMzczIDkuMzczIDI0LjU2OSAwIDMzLjk0MUwyNDAuOTcxIDM4MS40NzZjLTkuMzczIDkuMzcyLTI0LjU2OSA5LjM3Mi0zMy45NDIgMHoiPjwvcGF0aD48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: 97%;
	background-size: 10px;
}

button {
	cursor: pointer;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
hr {
	border: 2px solid #252b2d;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
article {
	max-width: 900px;
	margin: 20px auto;
	font-size: 120%;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
article h1:before,
article h2:before {
	content: "# ";
	color: #ebcb8b;
}

.textbox {
	font-size: 130%;
	letter-spacing: -1px;
	color: var(--secondary-fg);
	background: var(--secondary-bg);
	padding: 8px;
	margin: 12px 0;
	border-radius: 6px;
}

.tablebox {
	overflow: scroll;
	padding-top: 1rem;
}

.dataTables_wrapper > div {
	margin: 0;
}

.tabbed-info {
	padding: 24px;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
.link {
	background-color: #252b2d;
	border-radius: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	height: 95px;
	margin: 10px 0;
	padding: 0 15px;
}

.link:link,
.link:visited {
	border-bottom: none;
	color: #ccc;
}

.link:hover {
	background-color: hsla(0, 0%, 61%, 0.1);
}

.link svg {
	color: #f77669;
	font-size: 40px;
}

.link .link-title {
	display: flex;
	flex-direction: row;
	align-items: center;
	-webkit-column-gap: 15px;
	column-gap: 15px;
	font-size: 150%;
}

.link .link-description {
	color: #7e7e7e;
}

.link .link-description code {
	color: #ccc;
}

#header-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	background: var(--header-bg);
	/*color: #ccc;*/
	padding: 5px 20px;
	margin: 0;
	font-weight: 400;
	box-shadow: 0 0 4px var(--box-shadow);
	z-index: 20;
	line-height: 100%;
}

#header-header > #header-logo > a {
	align-self: center;
	background-color: var(--logo-bg);
	border-radius: 5px;
	padding: 6px 3px;
	border: 0;
	display: inline-flex;
}

#header-header > :first-child, #header-header > :last-child {
	flex-grow: 1;
	flex-basis: 0;
}

#style-toggles {
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
}

#header-buttons {
	display: flex;
	gap: 8px;
	flex-flow: wrap;
	justify-content: center;
}

#header-header select > option {
    background-color: var(--header-dropdown);
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
#header-header > a > h1 {
	padding: 0 3px;
	font-size: 14pt;
	margin: 0;
	font-weight: 400;
	color: #fff;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
#header-header svg {
	-webkit-filter: invert(0);
	filter: invert(0);
	padding-right: 5px;
}

.header-homepage {
	background: #181d1f;
	display: flex;
	justify-content: center;
}

.header-homepage > div {
	display: flex;
	justify-content: space-around;
	flex-grow: 1;
	max-width: 900px;
	padding: 50px 0;
}

.header-homepage > div > svg {
	width: 25%;
}

.header-homepage > div > div {
	width: 60%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

.header-homepage > div > div > h1 {
	font-size: min(15vw, 150px);
	line-height: 1em;
	margin: 0 0 15px;
}

.header-homepage > div > div > div {
	font-size: min(2vw, 20px);
	line-height: 1.1;
}

@media screen and (max-width: 880px) {
}

.sampler_version-warning__7BkIx > svg {
	float: right;
	padding: 10px;
	color: #b5b5b5;
	cursor: pointer;
}

.widgets-widgets {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.widgets-widgets[data-hide="true"] :nth-child(n + 6) {
	display: none;
}

@media screen and (max-width: 1450px) {
	.widgets-widgets[data-hide="true"] :nth-child(n + 5) {
		display: none;
	}
}

@media screen and (max-width: 1160px) {
	.widgets-widgets[data-hide="true"] :nth-child(n + 4) {
		display: none;
	}
}

@media screen and (max-width: 880px) {
	.widgets-widgets[data-hide="true"] :nth-child(n + 3) {
		display: none;
	}
}

.widgets-widgets .widget {
	color: var(--secondary-fg);
	background: var(--secondary-bg);
	padding: 2px 5px;
	border-radius: 6px;
	width: 260px;
	max-width: 340px;
	flex-grow: 1;
}

.widgets-widgets .widget h1 {
	margin: 0;
	padding-top: 5px;
	padding-bottom: 8px;
	font-size: 13pt;
	font-weight: 400;
	color: var(--widget-emph);
	text-align: center;
}

.widgets-widgets .widget h1 span {
	vertical-align: middle;
	padding-left: 6px;
	font-size: 11pt;
	color: var(--secondary-fg);
}

.widgets-widgets .widget .widget-values {
	display: flex;
}

.widgets-widgets .widget .widget-value {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: center;
}

.widgets-widgets .widget .widget-value div:first-child {
	font-size: 16pt;
}

.widgets-widgets .widget .widget-value div:nth-child(2) {
	color: var(--secondary-fg);
}

.widgets-widgets .widget .widget-single-value {
	display: flex;
	justify-content: center;
}

.widgets-widgets .widget .widget-single-value span:nth-child(2) {
	color: var(--secondary-fg);
	padding: 0 5px;
}

.widgets-widgets .widget .widget-single-value span:first-child {
	text-align: right;
}

.widgets-widgets .widget .widget-single-value span:nth-child(3) {
	text-align: left;
}

.widgets-widgets .widget .widget-single-value span:nth-child(2n-1) {
	flex-grow: 100;
	flex-basis: 0;
}

.metadata-metadata .metadata-detail {
	margin-top: 0;
}

.metadata-metadata .metadata-detail p {
	margin: 0;
}

.metadata-metadata .metadata-detail p span {
	color: var(--widget-emph);
}

.metadata-metadata .metadata-detail .metadata-detail-controls {
	padding: 0;
	margin: 10px 0 15px;
}
/* 
.metadata-metadata .metadata-detail .metadata-detail-controls li {
	list-style-type: none;
	display: inline;
	cursor: pointer;
	margin: 0 3px;
	background-color: #293134;
	padding: 7px 15px;
	border-radius: 5px;
}

.metadata-metadata .metadata-detail .metadata-detail-controls li.selected {
	color: #fff;
} */

.metadata-metadata .metadata-detail .metadata-detail-controls button {
	list-style-type: none;
	display: inline;
	cursor: pointer;
	margin: 0 3px;
	margin-bottom: 5px;
	background-color: var(--tertiary-bg);
	padding: 7px 15px;
	border-radius: 5px;
}

.metadata-metadata .metadata-detail .metadata-detail-controls button.selected {
	color: var(--widget-emph);
}

.metadata-metadata
	.metadata-detail
	.metadata-detail-content
	> .configurations
	> p,
.metadata-metadata .metadata-detail .metadata-detail-content > p {
	margin: 0 5px;
}

.metadata-metadata .metadata-detail .configurations ul {
	padding-left: 20px;
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
.metadata-metadata .metadata-detail .configurations ul ul {
	border-left: 1px solid #3c3f41;
}

.metadata-metadata .metadata-detail .configurations li {
	list-style: none;
}

.metadata-metadata .metadata-detail .entity-counts > div {
	width: 100%;
}

.metadata-metadata .metadata-detail .entity-counts .button {
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	padding: 0 5px;
}

.metadata-metadata .metadata-detail .entity-counts .detail-lists > div {
	width: 100%;
	margin: 0 10px;
}

.metadata-metadata .metadata-detail .entity-counts .detail-lists ul {
	margin-top: 5px;
	list-style-type: none;
	padding-left: 15px;
}

.metadata-metadata .metadata-detail .entity-counts .detail-lists span {
	color: #fff;
}

.controls {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin: 10px 0;
	flex-wrap: wrap;
	flex-basis: 1;
}

.controls > div,
.controls > input {
	flex-grow: 1;
	flex-shrink: 1;
	height: 40px;
}

.controls .textbox {
	padding: 0;
	margin: 0;
}

.controls .button {
	max-width: 40px;
	width: 40px;
	cursor: pointer;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.controls .button > svg {
	padding: 0 5px;
}

.controls .title {
	text-align: center;
	flex-grow: 2;
	vertical-align: middle;
	display: flex;
	justify-content: center;
	flex-direction: column;
	min-height: 40px;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
}

.controls .title > span {
	padding: 5px;
}

.controls .title img {
	vertical-align: top;
	padding-right: 3px;
}

.controls .searchbar {
	flex-grow: 2;
	padding: 0 0 0 28px;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYjViNWI1IiBkPSJNNTA1IDQ0Mi43TDQwNS4zIDM0M2MtNC41LTQuNS0xMC42LTctMTctN0gzNzJjMjcuNi0zNS4zIDQ0LTc5LjcgNDQtMTI4QzQxNiA5My4xIDMyMi45IDAgMjA4IDBTMCA5My4xIDAgMjA4czkzLjEgMjA4IDIwOCAyMDhjNDguMyAwIDkyLjctMTYuNCAxMjgtNDR2MTYuM2MwIDYuNCAyLjUgMTIuNSA3IDE3bDk5LjcgOTkuN2M5LjQgOS40IDI0LjYgOS40IDMzLjkgMGwyOC4zLTI4LjNjOS40LTkuNCA5LjQtMjQuNi4xLTM0ek0yMDggMzM2Yy03MC43IDAtMTI4LTU3LjItMTI4LTEyOCAwLTcwLjcgNTcuMi0xMjggMTI4LTEyOCA3MC43IDAgMTI4IDU3LjIgMTI4IDEyOCAwIDcwLjctNTcuMiAxMjgtMTI4IDEyOHoiPjwvcGF0aD48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position: 8px;
	background-size: 15px;
}

.hover {
	border-size: 5px;
	border-style: solid;
	border-color: transparent;
}
.hover:hover {
	transition-duration: 0.1s;
	border-size: 5px;
	border-style: solid;
	border-color: var(--select-color);
}

/* not used in viewer (may be used elsewhere) as of 2024-03-31 */
.drive-span:hover {
	color: #ffffffbf !important;
}

#pups {
	display: none;
}
#variables {
	display: none;
}
#browsers {
	display: none;
}
#startup {
	display: none;
}
#updates {
	display: none;
}

.accordion-button {
	background: none !important;
    color: var(--widget-emph) !important;
}
.accordion-button:hover {
	background: var(--select-color) !important;
}
.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#btn-back-to-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 999;
	
	opacity: 0;
	visibility: hidden;

	transition: opacity 0.1s ease-in;
  	will-change: opacity, visibility;
}

#btn-back-to-top svg {
    height: 20px;
}

#archive {
	margin: auto;
	width: 80%;
}
#login-form {
	background-color: #2e383e;
	width: 20%;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

/* initial property, will be changed when the button is clicked */
#collapse-toggle-hide {
	display: none;
}

#download:hover {
	text-decoration: none;
	border-bottom: none;
}

.even {
	background-color: var(--tr-even);
}

.previous {
	margin-left: auto;
}

.form-control {
	width: auto;
	margin-left: 1rem;
	display: inline-block;
}

.form-select {
	width: auto;
	display: inline-block;
}

label {
	font-size: 10pt;
}

table {
	border: 1px var(--border-color) solid;
	border-radius: 5px;
	border-collapse: collapse;
}

.table td,
.table th {
	font-size: 10pt;
	font-weight: normal;
	padding: 0.125rem 0.25rem;
	border: 1px var(--border-color) solid;
}

.table > :not(:last-child) > :last-child > * {
    border-bottom-color: var(--border-color);
}

.json-data table {
	background: none;
}

.table {
	table-layout: auto;
    color: var(--table-color);
    background: transparent;
}

.nic {
	width: 50%;
	display: inline-block;
	margin: auto;
}

.nic td:not(:first-child){
	width: 100%;
}

.dataTables_info {
	font-size: 10pt;
	padding-left: 0.5rem;
}

.dataTables_length {
	margin-bottom: 0.5rem;
}

.dataTables_filter {
	float: right;
}

#blanket{
    display:none;
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    z-index:9999;
    background-color:black;
}

.modal-content {
    background-color: var(--modal-color);
}

.modal-column {
    float: left;
}

.modal-column:not(:first-of-type) {
    margin-left: 1rem;
}

.smart-table-wrapper {
    display: flex;
    gap: 1rem;
}

.partition-whole-bar {
    height: 64px;
    background-color: inherit;
    border: 2px var(--border-color) solid;
    margin-bottom: 0.5rem;
}

.partition-one-bar {
    background-color: inherit;
    border-right: 2px var(--border-color) solid;
    position: relative;
    height: 100%;
}

.partition-space-bar {
    height: 100%;
    background-color: var(--partition-bar-filled);
}

.partition-bar-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.green { color: var(--green) !important; }
.yellow { color: var(--yellow) !important; }
.red { color: var(--red) !important; }
.amd { color: var(--amd) !important; }
.intel { color: var(--intel) !important; }