@media only screen and (min-width: 0px) and (min-height: 0px) {
div[id^='wrapper-sevio-d55ef119-794c-4215-9dd2-a5da488fdafc'] {
  width: 320px;
  height: 100px;
}
}
@media only screen and (min-width: 728px) and (min-height: 0px) {
div[id^='wrapper-sevio-d55ef119-794c-4215-9dd2-a5da488fdafc'] {
  width: 728px;
  height: 90px;
}
}

body {
	background-color:		#000000;
	color:					#FFFFFF;
	font-family: 			"Inter", sans-serif;
	font-optical-sizing: 	auto;
	font-weight: 			400;
	font-style: 			normal;
}

ul {
	list-style-type: 	none;
	padding: 			0;
	margin: 			0;
}

li {
	display: 			block;
}

hr {
	border: 			none;
	height: 			1px;
	background-color: 	#1f1f1f;
}

a {
	text-decoration:		none;
}

a:hover {
	text-decoration:		none;
}

.orange {
	color:					#FA4616;
}

.orange-border {
	border: 				1px solid #FA4616;
}

.orange-underline {
	text-decoration:		underline;
	text-decoration-color: 	#FA4616;
}


.green {
	color:					#66b95d;
}

.green-border {
	border: 				1px solid #66b95d;
}

.container {
  display: 					grid;
  grid-template-columns: 	minmax(180px, 1fr) minmax(0, 1152px) minmax(180px, 1fr);
  gap: 						0; /* Adjust the gap if needed */
}

.gradient {
	padding-top: 			96px;
	padding-bottom: 		10px;
	background: 			radial-gradient(70.95% 100% at 50% 0%, #303030 0%, #000000 73.62%);
}

/* Remove left and right columns on smaller screens */
@media (max-width: 992px) {
  .container {
	display: 					grid;
    grid-template-columns: 		minmax(0, 1fr); /* Only the middle column remains */
  }
}

.left {
	padding-top:			82px;
	margin-right:			5px;
	height:					inherit;
}

}

.center {
	padding-top:			0px;
	max-width: 				1152px;
	margin: 				0 auto; /* Ensures proper centering */
}

.right {
	padding-top:			82px;
	margin-left:			5px;
	height:					inherit;
}

.sticky {
	position: 				sticky;
	top: 					0;
	
}

.navigationContainer {
  position: relative;
  z-index: 999;
  will-change: transform;
}

.menuHidden {
  visibility: hidden;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.menuVisible {
  visibility: visible;
  opacity: 1;
  display: block;
  pointer-events: auto;
}

.menuBarContainer {
	position: 				fixed;
	width:					100%;
	height:					74px;
    top: 					0;
    z-index: 				100;
	border-bottom: 			1px solid #292929;
}

.menuBar {
	height:					inherit;
}

.menuBarLogo {
	padding:				4px 32px;
}

.menuAd {
	padding: 				4px 8px;
	border-radius: 			0.375rem;
	cursor: 				pointer; 		
}

.menuAdContent {
	display: 				none; 
	position: 				absolute; 
	top: 					100%; 
	left: 					50%; 
	transform: 				translateX(-50%); 
	width: 					270px;
	padding:				8px;
	background: 			#000000;
	margin-top: 			4px;
	border: 				1px solid #292929; 
	border-radius: 			0.375rem;
	z-index: 				100;
}

.menuAdContentButton {
	display: 				block;
	width: 					100%;
	background-color: 		#1F87FF;
	color: 					white;
	text-align: 			center;
	padding: 				6px;
	text-decoration: 		none;
	border-radius: 			4px;
}

@media (max-width: 992px) {
	.menuBarLogo {
		border-right: 			none;
	}
	.indexWhite {
		font-size: 				32px; 
	}
	.indexGrey {
		font-size: 				12px; 
	}	
}

@media (min-width: 993px) {
	.menuBarLogo {
		border-right: 			1px solid #292929;
	}
	.indexWhite {
		font-size: 				64px; 
	}
	.indexGrey {
		font-size: 				14px; 
	}
}

.menuBarItem {
	justify-content:		center;
	margin:					0px 0px;
	border-left: 			1px solid #292929;
	width:					74px;
}

.menuArrow {
	max-width: 				8px; 
	max-height: 			8px;
	margin-top: 			0px;
}

.arrow {
	display: 				inline-block;
	filter: 				brightness(0) invert(1);
	transition: 			transform 0.3s ease, filter 0.3s ease;
}

.rotate {
	transform: 				rotate(180deg);
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.navigationOptions {
	font-size:				12px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
	background-repeat: 		no-repeat; 
	background-position: 	center center; 
	background-size: 		16px 16px;
}

.navigationOptionsOpen {
	color:					#fa4616;
}

.triggerContainer {
	color:					#FFFFFF;
	font-size:				12px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
	background-repeat: 		no-repeat; 
	background-position: 	center center; 
	background-size: 		16px 16px;
}

.activeTrigger {
	color:					#fa4616;
}

.activeImage {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.menuHiddenMobile {
  visibility: hidden;
  opacity: 0;
  display: none;
  pointer-events: none;
}

.menuVisibleMobile {
  visibility: visible;
  opacity: 1;
  display: block;
  pointer-events: auto;
}

@media (max-width: 992px) {
  .menuContentContainer {
		z-index: 				110;
		position: 				fixed;
		width:					100%;
	}
	.buttonMenus {
		width:					100%;
	}
}

@media (min-width: 993px) {
  .menuContentContainer {
	z-index: 				110;
	position: 				fixed;
	width:					300px;
	}
	.buttonMenus {
		width:					300px;
	}
}

.menuContent {
	z-index: 				110;
	position: 				absolute; 
	left:					0px;
	right:					0px;
	margin:					auto;
	margin-top:				0px;
	padding:				0px;
	max-width:				100%;
	background-color:		#000000;
	border: 				1px solid #292929;
}

.menuContentChoice {
	margin:					2px;
}

.menuContentChoice:hover {
	background-color:		#292929;
}

.menuContentChoice:hover .menuContentLogoContainer {
	background-color:		#353535;
	border: 				1px solid #353535;
}

.menuContentLogoContainer {
	border: 				1px solid #292929;
	margin:					10px;
	padding:				7px;
	line-height:			0px;
}

.menuContentLogo {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
	max-width:				12px;
	max-height:				12px;
}

.menuContentLogoGrey {
	filter: 				brightness(0) saturate(100%) invert(53%) sepia(0%) saturate(0%) hue-rotate(170deg) brightness(97%) contrast(88%);
	max-width:				12px;
	max-height:				12px;
}

.menuContentHeader {
	margin-top:				10px;
}

.menuContentText {
	font-size:				11px;
	color:					#868686;
	margin-bottom:			5px;
}

.coinBar {
	padding:				2px;
	justify-content:		center;
	border-bottom: 			1px solid #292929;
	z-index:				70;
}

.coinBarItem {
	margin:					0px 2px;
	font-size:				11px;
}

.coinBarLogo {
	max-width:				16px;
	max-height:				16px;
}

.welcome {
	background-image: 		url('/gfx/circles.png'); /* replace with your image path */
	background-repeat: 		no-repeat;
	background-position: 	center;
	background-size: 		contain;
}

@media (max-width: 502px) {
  .welcome {
	height:					350px;
  }
}

@media (min-width: 503px) {
  .welcome {
    height:					503px;
  }
}


.menuContentImageContainer {
	width: 100%;         /* or any responsive width you prefer */
	aspect-ratio: 1 / 1; /* ensures height equals width */
	padding: 0px 8px 8px 0px;
}

.menuContentImage {
	border: 				1px solid #36373f;
	padding:				5px;
	background-size: 		100% 100%;
	background-repeat:		no-repeat;
	width:					100%;
	height:					100%;
}

.menuContentImage:hover {
	border: 				1px solid #56575f;
}

.menuMobileContent {
	overflow-x: 			hidden;
	overflow-y: 			auto;
	scrollbar-color: 		#16171f #36373f;
	max-height:				80vh;
}

.menuMobileItem {
	margin:					1px 0px;
	padding:				10px 10px 10px 10px;
	background-color:		#36373f;
}

.menuMobileItem:hover {
	background-color:		#468189;
}

.menuBarHorizontal {
	padding:				4px;
	background-color:		#1f1f1f;
	margin:					20px 0px 0px 0px;
}

.menuBarHorizontalItem {
	height:					46px;
	justify-content:		center;
	font-weight: 			400;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	color: 					#868686;
}

.menuBarHorizontalItem:hover {
	background-color:		#353535;
	color:					#FFFFFF;
}

.menuBarHorizontalItemSelected {
	justify-content:		center;
	background-color:		#e33e11;
	font-weight: 			400;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
}

.search {
	width:					100%;
    font-weight: 			500;
    font-style: 			normal;
	border: 				2px solid #FA4616;
	border-radius:			6px;
}

.headerInfoContainer {
	margin-top:				20px;
	border: 				1px solid var(--grey-500);	
	min-height: 			71px;
	display: 				flex;
	flex-direction: 		row;
	background-color:		#161616;
}

.headerInfoSymbol {
	filter: 				brightness(0) saturate(100%) invert(39%) sepia(94%) saturate(3276%) hue-rotate(349deg) brightness(100%) contrast(101%);
}

.headerInfoHeader {
	font-weight: 			500;
	font-size: 				16px;
	line-height: 			140%;
	margin-bottom:			3px;
}

.headerInfoText {
	padding-right:			8px;
	font-weight: 			500;
	font-size: 				13px;
	line-height:		 	1.2;
	letter-spacing: 		0.02em;
	color: 					#868686;
}

.verticalAlign {
	height:					inherit;
	display: 				flex;
	align-items: 			center;
}

.headerOptionContainer {
	width:					170px;
	font-weight: 			400;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color:					#FFFFFF;
	border: 				1px solid #1f1f1f;
	padding: 				8px 12px;
	height: 				38px;
	background-color:		#000000;
}

.headerOptionSelect {
	height:					100%;
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				0px;
	background-color:		#000000;
}

.optionContainer {
	float:					left;
	width:					170px;
	padding-left:			8px;
}

.optionHeader {
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	margin-bottom:			8px;
}

.optionHeaderFocus {
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	margin-bottom:			8px;
	padding: 				6px;
	background-color:		#e33e11;
	float:					left;
}

.optionSelectContainer {
	font-weight: 			400;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				8px 12px;
	background-color:		#1f1f1f;
}

.optionSelect {
	width:					100%;
	color:					#FFFFFF;
	border:					0px;
	padding: 				0px;
	background-color:		#1f1f1f;
}

.searchField {
	border: 				1.50px solid #353535;
	padding: 				8px 10px;
	width: 					100%;
	height: 				38px;
	font-weight: 			600;
	font-size: 				16px;
	line-height: 			140%;
	text-align: 			left;
	color: 					#868686;
	background-color:		#000000;
}


.expandedClosed {
	cursor: 				pointer;
	line-height:			1;
	height:					34px;
	padding:				0px 12px 8px 12px;
}

.expandedClosed:hover {
	background-color:		#36373f;;
}

.expandedOpen {
	background-color: 		#16171f;
}

.eContent {
	display: 				none;
	padding: 				10px;
	background-color: 		#161616;
	transition: 			max-height 0.3s ease-in-out;
	font-size:				11px;
	color:					lightgrey;
	white-space: 			pre-wrap;
}

.menuExit {
	position: 			fixed; 
	top:				0px;
    left:				0px;
	height: 			100vh;
	background: 		rgba(0,0,0,0.4);
	z-index:			1;
}

.indexMenuOption {
	margin-right: 		5px; 
	float: 				left; 
	height: 			inherit; 
	padding: 			8px 14px 8px 8px;
	cursor:				pointer;
}

.indexMenuOption:hover {
	background-color: 	#292929;
}

.indexMenuOptionSelected {
	margin-right: 		5px; 
	float: 				left; 
	background-color: 	#292929;
	height: 			inherit; 
	padding: 			8px 14px 8px 8px;
}

.contentPreviewItem {
	margin:				0px;
	padding:			10px;
}

.contentPreviewItem:hover .contentPreviewItemHeader {
	text-decoration:	underline;
}

.contentPreviewItemImage {
	position: relative;
  display: inline-block; /* or block, depending on your layout */
}

.contentPreviewItemImage img {
	display: 			block;
	width: 				100%;
	height:				auto;
}

.contentPreviewItemImageOverlay {
	position: 			absolute;
	bottom: 			0;
	left: 				0;
	padding: 			10px;
	color: 				white;
	z-index: 			1px;
}

.contentPreviewBarHeader {
	text-align:			center;
	padding:			30px;
	background-color:	#eed9c4;
	
	font-weight: 		500;
	font-style: 		normal;
	font-size:			1.6em;
}

.contentPreviewBar {
	padding:			20px 50px;
	background-color:	#faf0e6
}
.contentPreviewContainer {
	margin:				auto;
	max-width:			1400px;
}

.contentPreviewItemHeader {
	float: 				left; 
	margin-top: 		10px;
	color: 				#000000;
	font-weight: 		500; 
	font-size: 			22px; 
	line-height: 		140%; 
	text-transform: 	capitalize;
}

.contentPreviewType {
	margin-top:			5px;
	padding:			0px 10px;
	font-size:			0.7em;
	font-weight:		500;
	background-color:	#444444;
}

.contentPreviewItemPreamble {
	color:				#868686;
	margin:				5px 0px 10px 0px;
	padding-bottom:		5px;
	padding:			0px 10px 10px 10px;
	font-size:			0.8em;
	font-weight:		400;
	height:				36px;
	overflow: 			hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.contentPreviewItemAuthor {
	font-size:			0.7em;
	font-weight:		400px;
	color:				#ababab;
	padding:			2px 20px 0px 20px;
}

/* Needed for contentSystem */
.contentSystemContainer {
	
}

.contentSystemBars {
	height: 			inherit;
	max-width:			300px;
}

.contentSystemBarsContainer {
	width:				250px;
	margin:				10px;
	padding-top:		10px;
	text-align:			center;
	border-radius: 		0px;
	font-size: 			1em;
	position: 			sticky;
	top: 				30px;
}

.contentSystemHeader {
	padding:			10px 0px;
	font-weight: 		700;
	font-style: 		normal;
	font-size:			1.8em;
}

.contentSystemAuthorContainer {
	margin-top:			20px;
	padding:			20px 10px;
	border-top:			1px solid #ececec;
}

.contentSystemSection {
	color:				#000000;
	background: 		white; 
	padding: 			3px 6px; 
	display: 			inline; 
	box-decoration-break: clone; 
	-webkit-box-decoration-break: clone;
	font-size: 			32px;
	font-weight: 		500;
}

.contentSystemSection2 {
	padding: 			3px 6px; 
	background-color: 	#e33e11; 
	font-weight: 		500; 
	font-size: 			16px; 
	line-height: 		140%; 
	letter-spacing: 	0.08em; 
	display: 			inline; 
}

.contentSystemLink {
	text-decoration:	underline;
}

.sectionItem {
	text-align:			left;
	padding:			2px 10px;
	margin:				2px;
	border-left: 		2px solid white;
	cursor:				pointer;
	color:				#000000;
	background-color:	#FFFFFF;
	font-size:			1em;
	font-weight: 		500;
	font-style: 		normal;
}

.sectionItem2 {
	text-align:			left;
	padding:			2px 10px 2px 25px;
	margin:				2px;
	border-left: 		2px solid white;
	cursor:				pointer;
	color:				#000000;
	background-color:	#FFFFFF;
	font-size:			0.8em;
	font-weight: 		400;
	font-style: 		normal;
}

.sectionItemActive {
	border-left: 		2px solid #FA4616;
	color:				#FFFFFF;
	background-color:	#FA4616;
}

.authorHeader {
	font-size:			0.8em;
	font-weight: 		500;
	font-style: 		normal;
}

.authorAbout {
	margin-top:			10px;
	font-size:			0.8em;
	font-weight: 		300;
	font-style: 		normal;
}

.articleCopy {
	background-color:	#1F1F1F;
	padding:			2px 4px;
	margin:				6px 0px;
}

.top10pct {
	width:				60px;
	font-size:			12px;
	text-align:			right;
}

.top10value {
	font-size:			12px;
}

.top10name {
	font-size:			12px;
}

.top10info {
	color:				#868686;
}

.top10 {
	padding:			1px 2px;
}

.top10:hover {
	background-color:	#353535;
}

.pageHeader {
	
}

.pageHeaderOptions {
	font-family: 			"Roboto Flex", serif;
	font-optical-sizing: 	auto;
	font-weight: 			400;
	font-style: 			normal;
	font-size:				16px;
	padding:				12px 10px 10px 10px;
}

.pageHeaderText {
	font-family: 			"Roboto Flex", serif;
	font-optical-sizing: 	auto;
	font-weight: 			700;
	font-style: 			normal;
	font-size:				24px;
	line-height:			1;
	padding:				10px;
}

.pageHeaderDescription {
	font-weight: 			600;
	font-size: 				16px;
	line-height: 			140%;
	color:					#868686;
	text-transform: 		uppercase;
}

.estimateHeaderContainer {
	height:					inherit;
	margin:					5px 5px;
	overflow:				hidden;
	background-color:		#16171F;
	border: 				0px solid #36373f;
	border-radius:			6px;
}

.estimateHeaderHeader {
	font-weight: 			600;
	font-size: 				14px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	text-align: 			center;
}

.estimatesHeader {
	height:					calc(100% - 10px);
	padding:				0px 0px;
	overflow:				hidden;
	font-size:				12px;
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	color:					#868686;
}

.name {
	font-weight: 			500;
	font-size: 				18px;
	line-height: 			1;
}

.ticker {
	font-size:				12px;
	font-weight: 			700;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		1px;
	text-transform: 		uppercase;
	color:					#868686;
}

.brand {
	font-weight: 			700;
	font-size: 				14px;
	line-height: 			100%;
	letter-spacing: 		-0.02em;
}

.model {
	font-weight: 			700;
	font-size: 				14px;
	line-height: 			100%;
	letter-spacing: 		-0.02em;
}

.roi {
	font-size:				12px;
	color:					#96979f;
}

.estimates {
	font-weight: 			400;
	font-size: 				13px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
}

.estimatesDescription {
	font-weight: 			600;
	font-size: 				9px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	color:					#868686;
}

.estimatesModel {
	height:					80px;
	display: 				flex;
	align-items: 			center;
}

.estimatesPartner {
	height:					40px;
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
}

.estimatesLogo {
	text-align:				center;
	width:					50px;
	height:					80px;
	display: 				flex;
	align-items: 			center;
	justify-content: 		center;
}

.estimatesCurrent {
	overflow:				hidden;
	margin:					0px 3px;
	height:					40px;
	padding-top:			3px;
}

.estimates24h {
	overflow:				hidden;
	border-top: 			0px solid #36373f;
	height:					40px;
	margin:					0px 3px;
	padding-top:			3px;
}

.inStock {
	border-radius: 			8px;
	padding: 				2px 6px;
	height: 				21px;
	background: 			rgba(17, 227, 62, 0.16);
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color: 					#11e33e;
}

.outOfStock {
	border-radius: 			8px;
	padding: 				2px 6px;
	height: 				21px;
	background: 			rgba(227, 62, 17, 0.16);
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	color: 					#e33e11;
}

.blueBadge {
	border-radius: 8px;
	padding: 2px 6px;
	height: 21px;
	background: rgba(17, 62, 227, 0.30); /* light blue background */
	font-weight: 600;
	font-size: 12px;
	line-height: 140%;
	letter-spacing: 0.02em;
	color: #118EE3; /* blue text */
}

.buyNow {
	padding: 				6px 10px;
	height: 				38px;
	background-color:		#e33e11;
	font-weight: 			600;
	font-size: 				14px;
	line-height: 			160%;
	letter-spacing: 		0.02em;
	text-align: 			center;
}

.ocDescription {
	font-size:					12px;
	font-weight: 				400;
	font-style: 				normal;
	text-align:					left;
	width:						50%;
	border: 					0px solid #56575f;
	line-height:				1;
}

.ocValue {
	font-size:					12px;
	font-weight: 				700;
	font-style: 				normal;
	width:						50%;
	border: 					0px solid #56575f;
	line-height:				1;
}

.ocID {
	font-size:				10px;
	color:					#96979f;
}

.ocSet {
	background-color:			#292929;
	cursor: 					pointer;
	line-height:				1;
	height:						34px;
	padding:					0px 12px 4px 12px;
	overflow:					hidden;
}

.estimate:hover .ocSet {
	background-color:			#353535;
}

.estimate:hover .eContent {
	background-color:			#1f1f1f;
}

.ocSetOpen {
	background-color: 			#292929;
}

.calculatorItemContainer {
	min-height:				36px;
	margin:					5px;
	padding:				5px;
	background-color:		#161616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.calculatorItemContainer:hover {
	background-color:		#1f1f1f;
	border: 				0px solid #56575f;
}

.calculatorStatsContainer {
	margin: 				3px;
	padding: 				5px; 
	background-color: 		#222222;
	font-size:				12px;
	text-align:				center;
}

.calculatorStatsHeader {
	font-weight:			700;
}

.calculatorStatsText {
	background-color:		#36373f;
	border: 				1px solid #56575f;
	margin-bottom:			1px;
}

.slider-container {
	display: 				flex;
	flex-direction: 		column;
	width: 					100%;
}
.slider-value {
	text-align:				center;
	font-size: 				12px;
}

.slider-button {
	width:					100px;
	margin-top:				5px;
	padding:				0px;
	color:					#FFFFFF;
	background-color:		#36373f;
	border: 				1px solid #56575f;
	border-radius:			6px;
	cursor:					pointer;
}

.watermark {
	margin-top:				20px;
	padding:				10px;
    width: 					100%;
    height: 				100%;
    display: 				flex;
    justify-content: 		center;
    align-items: 			center;
    background: 			url('https://new.hashrate.no/gfx/logo.png') no-repeat center center;
	background-size: 		250px;
    position: 				relative;
	background-color: 		rgba(22, 22, 22, 0.8);
    background-blend-mode: 	multiply;
}

.legends {
	border-top: 			1px solid #292929;
	background-color: 		rgba(22, 22, 22, 0.8);
	padding: 				20px 24px;
	font-weight: 			600;
	font-size: 				12px;
	line-height: 			100%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
}

.scrollHorizontal {
	min-width:				0px;
	max-width:				100%;
	overflow-x: 			auto;
	scrollbar-color: 		#16171f #36373f;
}

.estimateInfo {
	border: 				0px solid #353535;
	padding: 				0px 2px;
	text-align: 			left;
	font-size:				11px;
	line-height: 			1;
	color:					#C3C3C3;
}

.estimateData {
	border: 				0px solid #353535;
	padding: 				0px 2px;
	text-align: 			left;
	font-size:				11px;
	line-height: 			1;
	color:					#FFFFFF;
}

table {
	border-collapse: 		collapse;
	font-size:				12px;
	white-space: 			nowrap;
	width:					100%;
}

th, td {
	border: 				0px solid #353535;
	padding: 				8px;
	text-align: 			left;
}

th {
	border: 				1px solid #353535;
	background-color: 		#1f1f1f;
	color:					#868686;
	font-weight: 			700;
	font-size: 				11px;
	line-height: 			140%;
	letter-spacing: 		0.08em;
	text-transform: 		uppercase;
	text-align: 			center;
	cursor: 				pointer;
	position: 				relative;
	padding-right: 			20px;
}

th:hover {
	background-color: 		#353535;
}

.sort-indicator {
	display: inline-block;
	width: 12px; /* Fixed width so it doesn't shift */
	text-align: left;
	visibility: hidden; /* Hide by default but keep space */
}
th.sorted .sort-indicator {
	visibility: visible; /* Show when sorting */
}

/* Own buttons */
.buttonGrey {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#1f1f1f;
	color:					#FFFFFF;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

.buttonWhite {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Default button styles */
button {
	cursor: 				pointer;
	transition: 			background 0.2s ease-in-out;
	padding: 				8px 12px;
	background-color:		#1f1f1f;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#1f1f1f;
	color:					#FFFFFF;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Active dataset button */
button.toggle-dataset.active {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

/* Active metric button */
button.toggle-metric.active {
	margin:					2px;
	padding: 				6px 10px;
	background-color:		#FFFFFF;
	color:					#000000;
	font-weight: 			500;
	font-size: 				14px;
	line-height: 			140%;
	text-align: 			center;
	border: 				0px;
}

.map-container {
	position: 				relative;
	width: 					100%;
	
}

svg {
	width: 					100%;
	height: 				auto;
}

.continent {
	fill: 					#3D77B0;
	stroke: 				white;
	stroke-width: 			1px;
	transition: 			fill 0.3s ease-in-out;
	cursor: 				pointer;
}

.continent:hover {
	fill: 					#FA4616;
}

/* Tooltip Styling */
.tooltip {
	display:				none;
	position: 				absolute;
	border: 				1px solid #56575f;
	background-color: 		rgba(0,0,0,0.8);
	padding: 				8px;
	border-radius: 			5px;
	box-shadow: 			0px 0px 5px rgba(0,0,0,0.3);
	font-size: 				14px;
	pointer-events: 		none;
	transition: 			opacity 0.2s ease-in-out;
	transform: 				translate(-50%, -50%); /* ✅ Center the tooltip */
}

.disclaimer {
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.04em;
	color:					#666666;
}

.footerContainer {
	position: 				absolute;
	width: 					100%;
	z-index: 				5;
	background-color:		#000000;
	border-top: 			1px solid #292929;
}

.footerBarContainer {
	width:					100%;
	height:					74px;
	border-bottom: 			1px solid #292929;
}

.footerBar {
	height:					inherit;
}

.footerBarLogo {
	padding:				4px 12px;
}

.footerBarItem {
	justify-content:		center;
	border-left: 			1px solid #292929;
}

.footerOptions {
	z-index:				120;
	position: 				relative;
	font-size:				12px;
	margin:					0px 25px 0px 25px;
	padding: 				0px 0px 0px 0px;
	cursor:					pointer;
	display: 				inline-block;
	transition: 			color 0.3s ease;
}


.footer {
	max-width:				1280px;
	margin:					auto;
}
.footerContent {
	padding:				0px 15px 0px 15px;
	margin:					30px 0px;
}

.footerMenuHeader {
	margin-bottom:			6px;
	font-weight: 			500;
	font-size: 				16px;
	line-height: 			120%;
	letter-spacing: 		0.02em;
}

.footerMenuContent {
	display:				inline-block;
	margin-bottom:			8px;
	color:					#868686;
	font-weight: 			500;
	font-size:				14px;
	line-height: 			120%;
	letter-spacing: 		0.02em;
}

.footerDisclaimer {
	border-top: 			1px solid #292929;
	text-align:				center;
	color:					#666666;
	font-weight: 			500;
	font-size: 				12px;
	line-height: 			140%;
	letter-spacing: 		0.02em;
	text-align: 			center;
	padding:				0px 15px 0px 15px;
	margin:					0px 0px 110px 0px;
}

.estimate {
	min-height:				90px;
	margin:					5px;
	padding:				5px;
	background-color:		#161616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.estimate:hover {
	background-color:		#1f1f1f;
	border: 				0px solid #56575f;
}

.estimateWarning {
	min-height:				90px;
	margin:					5px;
	padding:				5px;
	background-color:		#301616;
	border: 				0px solid #161616;
	overflow:				hidden;
	transition: 			transform 0.2s ease;
}

.estimateWarning:hover {
	background-color:		#4a1f1f;
	border: 				0px solid #56575f;
}

.raleway-normal {
  font-family: 				"Raleway", serif;
  font-optical-sizing: 		auto;
  font-weight: 				400;
  font-style: 				normal;
}

.raleway-bold {
  font-family: 				"Raleway", serif;
  font-optical-sizing: 		auto;
  font-weight: 				700;
  font-style: 				normal;
}

.roboto-flex-normal {
  font-family: "Roboto Flex", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0,
    "wdth" 100,
    "GRAD" 0,
    "XOPQ" 96,
    "XTRA" 468,
    "YOPQ" 79,
    "YTAS" 750,
    "YTDE" -203,
    "YTFI" 738,
    "YTLC" 514,
    "YTUC" 712;
}

.flash-green {
	animation: 			flash-green 2s forwards;
}

@keyframes flash-green {
	0% { background-color: #66b95d; } 
	100% { background-color: transparent; }
}

.flash-orange {
	animation: 			flash-orange 2s forwards;
}

@keyframes flash-orange {
	0% { background-color: #FA4616; } 
	100% { background-color: transparent; }
}

.flash-yellow {
	animation: 			flash-yellow 2s forwards;
}

@keyframes flash-yellow {
	0% { background-color: #ffc600; } 
	100% { background-color: transparent; }
}