body {
	background-color:		#000000;
	color:					#FFFFFF;
	font-family: 			"Inter", sans-serif;
	font-optical-sizing: 	auto;
	font-weight: 			400;
	font-style: 			normal;
	font-size:				14px;
}

td {
	text-align:				center;
	font-size:				11px;
}

td {
	text-align:				center;
	font-size:				11px;
}

table.serverInfo {
	width:					100%;
}

table.serverInfo td {
	text-align:				left;
	font-size:				11px;
}

canvas {
  overflow: visible !important;
}

.verticalAlign {
	height:					inherit;
	display: 				flex;
	align-items: 			center;
}

.loginContainer {
  display: flex;
  justify-content: center; /* center horizontally */
  align-items: center;     /* center vertically */
  height: 100vh;           /* take full viewport height */
}

.desktopBar {
    height: 100vh;
    background-color: #161616;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 170px;
    overflow-y: auto;
    scrollbar-color: #000000 #444444;
    scrollbar-width: thin;
    padding-bottom: 30px;
    padding: 5px 15px;
    border-right: 1px solid #353535;
}

.serverContainer {
	margin:					2px;
	height:					50px;
	background-color:		#1f1f1f;
}

.serverContainer:hover {
	background-color:		#353535;
}

.serverDetails {
    font-weight: 			500;
    font-size: 				9px;
    line-height: 			140%;
    letter-spacing: 		0.08em;
    color: 					#868686;
}

.deviceContainer {
	height:					50px;
}


.gpuContainer {
	margin:					2px;
	background-color:		#1f1f1f;
	cursor:					pointer;
	overflow: 				visible;
}

.gpuContainer:hover {
	background-color:		#2a2a2a;
}

.gpuHistorical {
	position: relative;
	overflow: visible;
	display: none;
	transition: opacity 0.3s ease;
	opacity: 0;
}
.gpuContainer.expanded .gpuHistorical {
	display: block;
	opacity: 1;
}

.gpuDataContainer {
	justify-content:		center;
	float:					left;
	border-left: 			1px solid #353535;
	font-size:				12px;
	width:					50px;
}

.gpuInfo {
	text-align:				center;
}

.gpuDetails {
    font-weight: 			600;
    font-size: 				9px;
    line-height: 			140%;
    letter-spacing: 		0.08em;
    text-transform: 		uppercase;
    color: 					#868686;
}

.informationHeader {
	margin:					0px 8px;
	font-weight: 			600;
    font-size: 				10px;
    line-height: 			140%;
    letter-spacing: 		0.08em;
    text-transform: 		uppercase;
    color: 					#868686;
}

.informationContainer {
	margin:					4px;
	padding:				4px;
	background-color:		#1f1f1f;
}

.reset {
	margin:					0px 4px;
	font-weight: 			600;
    font-size: 				9px;
    line-height: 			140%;
    letter-spacing: 		0.08em;
    text-transform: 		uppercase;
    color: 					#FA4616;
}

.fading-red {
  background: linear-gradient(to right, #8B0000, #1f1f1f);
}
.fading-red:hover {
  background: linear-gradient(to right, #8B0000, #353535);
}