/*
$breakpoint-largest: 1200px;
$breakpoint-large: 1020px;
$breakpoint-mediumish: 991px;
$breakpoint-mediumish2: 861px;
$breakpoint-medium: 768px;
$breakpoint-smallish: 767px;
$breakpoint-smaller: 480px;
*/

/* -087fcb -> -387dc5 */
/* -066ba9 -> -2e69a4 */
/* -044e7b -> -294c73 */
/* -ff5d00 -> -f26927 */
/* -addfff -> -c3d8ee */
/* -3a8ac3 -> -5892ce horizontal border*/

* {
  scrollbar-width: none;
  scrollbar-color: rgba(0,0,0,0) rgba(0,0,0,0);
}
*:hover {
  scrollbar-color: #ffffff33 transparent;
}

@media (hover: hover) {
  * {
    scrollbar-width: thin;
  }
}

body {
	margin: 0;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center top;
	background-color: #294c73;
  font-family: sans-serif, Arial;
	color: #fefefc;
  height: 100vh;
}

#screen {
	user-select: none;
}

#screen > * {
	color: #fffdff;
}

.header,
.dash {
	overflow: hidden;
}

p {
	padding: 2.24vh 6% 1.3vh;
  margin: 0 0 1px -2%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
	align-items: center;
	gap: 2vw;
	white-space: nowrap;
}

#hist-detailed-totals {
	display: grid;
	padding: 0.75em 0;
	grid-template-rows: 50% 50%;
	grid-template-columns: 1fr;
}
.last-30-days-history #hist-detailed-totals p {
	padding-left: 0;
}
.last-30-days-history #hist-detailed {
  grid-template-rows: 1fr 4.75em;
}
.locked-fullscreen.last-30-days-history #hist-detailed {
	grid-template-rows: 1fr 52px;
}
@media (min-width: 1001px) {
	.last-30-days-history #hist-detailed {
    grid-template-rows: 1fr min-content;
	}
	#hist-detailed-totals {
    grid-template-columns: 47% 47%;
    grid-template-rows: 1fr;
    gap: 3%;
	}
	.last-30-days-history #hist-detailed-totals p {
		padding-left: 3%;
	}
}

.details input {
	all: unset;
  width: 100%;
}

.details h4 {
  padding: min(1.3vh,2.2vw) 3.9%;
  padding-right: 5%;
  margin: 0;
  background-color: #ffffff1b;
  color: #c3d8ee;
  font-weight: normal;
  font-size: min(1.46vh,12.3px);
  max-height: 2em;
  box-shadow: 0px 0.5px 0.5px #0001;
}
.details .editable h4:first-child {
	display: grid;
	grid-template-columns: 1fr 2em;
}
.details .editable .button {
	justify-self: right;
}
.details .editable .button::after {
  content: "✔";
	display: block;
	color: white;
	height: 1em;
	width: 1em;
	line-height: 1em;
}
.details .editable [disabled] + .button::after {
	content: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggc3R5bGU9ImZpbGw6I2MzZDhlZSIgZD0iTTQ3MS42IDIxLjdjLTIxLjktMjEuOS01Ny4zLTIxLjktNzkuMiAwTDM2Mi4zIDUxLjdsOTcuOSA5Ny45IDMwLjEtMzAuMWMyMS45LTIxLjkgMjEuOS01Ny4zIDAtNzkuMkw0NzEuNiAyMS43em0tMjk5LjIgMjIwYy02LjEgNi4xLTEwLjggMTMuNi0xMy41IDIxLjlsLTI5LjYgODguOGMtMi45IDguNi0uNiAxOC4xIDUuOCAyNC42czE1LjkgOC43IDI0LjYgNS44bDg4LjgtMjkuNmM4LjItMi43IDE1LjctNy40IDIxLjktMTMuNUw0MzcuNyAxNzIuMyAzMzkuNyA3NC4zIDE3Mi40IDI0MS43ek05NiA2NEM0MyA2NCAwIDEwNyAwIDE2MEwwIDQxNmMwIDUzIDQzIDk2IDk2IDk2bDI1NiAwYzUzIDAgOTYtNDMgOTYtOTZsMC05NmMwLTE3LjctMTQuMy0zMi0zMi0zMnMtMzIgMTQuMy0zMiAzMmwwIDk2YzAgMTcuNy0xNC4zIDMyLTMyIDMyTDk2IDQ0OGMtMTcuNyAwLTMyLTE0LjMtMzItMzJsMC0yNTZjMC0xNy43IDE0LjMtMzIgMzItMzJsOTYgMGMxNy43IDAgMzItMTQuMyAzMi0zMnMtMTQuMy0zMi0zMi0zMkw5NiA2NHoiLz48L3N2Zz4K);
}
.details input:not([disabled]) {
  color: white;
  border: 1px solid white;
  padding: 4px;
	margin: -5px;
	border-radius: 4px;
	background: #0003;
}

.details > * {
  align-content: center;
}

label {
	color: #afcbe9;
	display: flex;
	gap: 1em;
	font-size: min(4vw,100%,4vh);
}
label svg {
	height: 1.3em;
}

.value {
  font-size: min(6vw,5.5vh,2em,24px);
	color: #ffffff;
}

#gauge {
  display: block;
  margin: auto;
	fill: none;
	stroke-linecap: round;
}
#gauge #dial {
	stroke-width: 3.5;
	stroke: #ffffff40;
	stroke-dasharray: 252 360;
}
#gauge #power {
	stroke-width: 2.5;
	stroke: #fffdff;
	stroke-dasharray: 0 360;
}
#gauge text {
	user-select: none;
}
#gauge text tspan {
	font-weight: normal;
	font-size: 20px;
	text-anchor: middle;
	fill: #fefefc;
}
#gauge text .tsmall {
	font-size: 85%;
	fill: #ffffff60;
}
#screen.history-only {
	grid-template-rows: 0 1fr;
}
#screen.history-only .history {
  grid-area: 1 / 1 / span 3 / span 2;
}
#screen.history-only .header {
	display: none;
}
.btn[data-state=disabled] {
	color: #ffffff50;
}
.btn[data-state=enabled] {
	user-select: none;
	cursor: pointer;
}
.body {
	scroll-snap-type: x mandatory;
}
.body > * {
	scroll-snap-type: x;
  scroll-snap-align: start;
	scroll-snap-stop: always;
}
#scroll_container {
	scroll-snap-type: y mandatory;
	overflow-y: auto;
	scroll-behavior: smooth;
}
.body,
.history {
	overscroll-behavior: contain;
}
.history {
	display: grid;
}
#hist-menu {
  grid-area: 1 / 1 / span 1 / span 1;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto 1fr;
	gap: 0.8em;
}
#hist-days,
#hist-detailed {
	grid-area: 2 / 1 / span 1 / span 1;
}

#hist-detailed {
	display: grid;
	grid-template-rows: 1fr 5.5em;
	grid-template-columns: 4.4em 1fr;
}
#hist-detailed-axis {
	grid-area: 1 / 1 / span 1 / span 1;
	border-right: 1px solid #ffffff30;
	overflow-x: visible;
	z-index: 100;
	font-size: 12px;
	color: #c0d2e4;
	text-align: right;
  padding-right: 10.5px;
	line-height: 1.45em;
}
.last-30-days-history #hist-detailed-axis {
	padding-right: 1.5em;
}
.last-30-days-history #hist-detailed-axis {
	border-right: 0 none;
}
#hist-detailed-axis,
#hist-detailed-graph > * {
	display: grid;
	grid-template-rows: min(6vh,51px) 1fr 81px 63px 58px;
	position: relative;
}

.last-30-days-history #hist-detailed-axis,
.last-30-days-history #hist-detailed-graph > * {
	grid-template-rows: 10px 1fr 42px;
}

.last-30-days-history #hist-detailed-axis > :nth-child(n+4),
.last-30-days-history #hist-detailed-graph > * > :nth-child(n+4) {
	display: none;
}

#hist-detailed-axis > *:nth-child(1) {
  align-content: end;
  margin-bottom: -0.7em;
}
#hist-detailed-axis > *:nth-child(2) {
  align-content: center;
}
.detailed-history #hist-detailed-axis > *:nth-child(3) {
	display: none;
}
#hist-detailed-axis > *:nth-child(4),
#hist-detailed-axis > *:nth-child(5) {
	position: relative;
	align-content: end;
  padding-bottom: 0.5em;
}
#hist-detailed-axis > *:nth-child(4) > label,
#hist-detailed-axis > *:nth-child(5) > label {
	position: absolute;
	top: 0;
}

#hist-detailed-axis label {
	font-size: 13.8px;
	gap: 0;
	color: #90b4d5;
	pointer-events: none;
}
#hist-detailed-axis label svg {
	height: 1.8em;
	margin-right: -5px;
}
#hist-detailed-wrapper {
	grid-area: 1 / 2 / span 1 / span 1;
	overflow-x: auto;
}
.last-30-days-history #hist-detailed-wrapper,
.last-30-days-history #hist-detailed-totals {
	padding-left: 0.5em;
  margin: 0 0.5em 0 -1em;
}
#hist-detailed-graph {
	height: 100%;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: 100%;
	justify-content: start;
}
#hist-detailed-graph > * {
	width: 72px;
}
.last-30-days-history #hist-detailed-graph {
	grid-template-columns: repeat(32, 1fr);
}
.last-30-days-history #hist-detailed-graph > * {
	width: unset;
  min-width: 1.3em;
}
#hist-detailed-graph > :nth-child(odd) {
	background-color: #2b6298;
}
#hist-detailed-graph > :nth-child(even) {
	background-color: #2e69a3;
}
.last-30-days-history #hist-detailed-graph > * {
	background-color: unset;
}
#hist-detailed-graph > * > :not(:last-child) {
  font-size: 12px;
  align-content: center;
	position: relative;
}
.last-30-days-history #hist-detailed-graph > * > :nth-child(3) {
	font-size: 12px;
	color: #81a5c9;
	text-align: center;
	align-self: start;
	padding: 3px 0px;
}
.last-30-days-history #hist-detailed-graph > * > :nth-child(3)[data-month]:after {
	content: attr(data-month);
  display: block;
  background-color: #ffffff12;
}
.detailed-history #hist-detailed-graph > * > :not(:last-child) {
	border-bottom: 1px solid #ffffff30;
}
#hist-detailed-graph > * > :nth-child(2) {
	min-height: max(48px,5em);
}
#hist-detailed-graph > * > :nth-child(1) {
	text-align: center;
	color: #97b4d2;
}
.last-30-days-history #hist-detailed-graph > * > :nth-child(1) {
	overflow: hidden;
	color: transparent;
	border-bottom: 1px solid #ffffff30;
}
#hist-detailed-graph > * > :nth-child(2) {
	border-bottom: 2px solid white !important;
}
#hist-detailed-graph > * > :nth-child(2) > hr {
	border: 1px solid #ffffff30;
	border-top: 0 none;
	border-left: 0 none;
	border-right: 0 none;
	position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
	margin: 0;
}
#hist-detailed-graph > * > :nth-child(2) > div {
	display: flex;
  flex-direction: column-reverse;
	position: absolute;
  bottom: 0;
  width: 80%;
  margin: 0 10%;
	z-index: 1;
	transition: width 0.2s ease, margin-left 0.2s ease;
}
#hist-detailed-graph > * > :nth-child(2) > div:not(.legend) > div > * {
	display: none;
}
#hist-detailed-graph > * > :nth-child(2) > div {
	height: calc(var(--myyield) / var(--maxyield) * 100%);
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(1) {
	height: var(--bulk);
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(2) {
	height: var(--absorb);
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(3) {
	height: var(--float);
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(1) {
	height: max(1.5em, var(--bulk));
	line-height: 1.5em;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(2) {
	height: max(1.5em, var(--absorb));
	line-height: 1.5em;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(3) {
	height: max(1.5em, var(--float));
	line-height: 1.5em;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > div > * {
	display: unset;
	white-space: nowrap;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend {
	width: 132px;
	font-size: 14px;
	min-height: 4.5em;
  z-index: 2;
	box-shadow: 0px 0px 8px 8px #0004;
  color: #2a6298;
}

#hist-detailed-graph > * > :nth-child(2) > div.legend > div {
  display: grid;
  grid-auto-flow: column;
  justify-content: space-evenly;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(1)::before {
	content: "Bulk";
	display: inline-block;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(2)::before {
	content: "Abs";
	display: inline-block;
}
#hist-detailed-graph > * > :nth-child(2) > div.legend > :nth-child(3)::before {
	content: "Float";
	display: inline-block;
}
#hist-detailed-graph > * > :nth-child(2):hover > div:not(.legend) {
	filter: brightness(0.919);
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(1) {
	background: white;
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(2),
.last-30-days-history #hist-detailed-graph > * > :nth-child(2) > .legend > :nth-child(2) {
	background: #c1d2e4;
}
#hist-detailed-graph > * > :nth-child(2) > div > :nth-child(3),
.last-30-days-history #hist-detailed-graph > * > :nth-child(2) > .legend > :nth-child(3) {
	background: #81a5c9;
}
.last-30-days-history #hist-detailed-graph > * > :nth-child(2) > div > :nth-child(2) {
	background: #ffffffb5;
}
.last-30-days-history #hist-detailed-graph > * > :nth-child(2) > div > :nth-child(3) {
	background: #ffffff65
}
#hist-detailed-graph > :nth-child(odd) .bars {
  color: #2b6298;
}
#hist-detailed-graph > :nth-child(even) .bars {
  color: #2e69a3;
}
.last-30-days-history #hist-detailed-graph .bars > :nth-child(1),
#hist-detailed-graph .bars > :nth-child(2),
#hist-detailed-graph .bars > :nth-child(3) {
	box-shadow: inset 0 -0.7px 0 0;
}
.detailed-history #hist-detailed-graph > * > :nth-child(3) {
	display: none;
}
#hist-detailed-graph > * > :nth-child(4),
#hist-detailed-graph > * > :nth-child(5) {
	align-content: end;
	line-height: 1.45em;
	padding-left: 16px;
	padding-bottom: 0.5em;
	color: #ffffffd9;
}
#hist-detailed-graph .error {
	text-align: center;
	padding-left: 7px;
}
#hist-detailed-graph .error {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  justify-items: center;
}
#hist-detailed-graph .error > span {
	font-size: 12px;
	font-weight: bold;
  padding: 3px;
  border-radius: 50%;
  width: 14px;
  display: inline-block;
  margin: 2px;
}
#hist-detailed-graph .has-errors > span {
	background-color: #fd903d;
  font-weight: normal;
	cursor: help;
}
#hist-detailed-graph .error .expand {
	transform: scale(0);
  position: absolute;
	bottom: 0.2em;
	white-space: nowrap;
	text-align: left;
	font-size: 12px;
	padding: 1em 2em;
	border-radius: 4px;
	box-shadow: 1px 1px 2px 0px #0004;
	background-color: #fd903d;
	z-index: 100;
}
#hist-detailed-graph [data-day]:nth-child(2) .error .expand {
	left: -100%;
}
#hist-detailed-graph [data-day]:first-child .error .expand {
	place-self: start;
}
#hist-detailed-graph [data-day]:nth-last-child(2) .error .expand {
	right: -100%;
}
#hist-detailed-graph [data-day]:last-child .error .expand {
	place-self: end;
}
#hist-detailed-graph .error.show .expand {
	transform: scale(1);
	transition: transform 0.1s ease;
}
#hist-detailed-graph .error.show .expand > * {
	filter: drop-shadow(0px 0px 1px #0004);
}
#hist-detailed-totals {
	grid-area: 2 / 1 / span 1 / span 2;
}
.last-30-days-history #hist-detailed-totals {
	grid-area: 2 / 2 / span 1 / span 2;
}
.last-30-days-history #hist-detailed-totals {
  padding-top: 0;
}
.detailed-history #hist-detailed-totals {
	background-color: #387dc5;
}

.locked-fullscreen.last-30-days-history #hist-detailed-totals {
	grid-area: 2 / 2 / span 1 / span 1;
  grid-template-rows: 1fr;
  grid-template-columns: 50% 50%;
	background-color: unset;
}
.locked-fullscreen.last-30-days-history #hist-detailed-totals p {
	padding: 0 25px 0 15px;
}

/* =========================================== */

@media (max-width: 767px) {

	#screen {
	  height: 100vh;
	  display: grid;
	  grid-template-columns: 100vw;
	  grid-template-rows: 11.8vh auto;
	  gap: 0px;
		width: 100vw;
		margin: auto;
		overflow: hidden;
	}
	.header {
	  grid-area: 1 / 1 / span 1 / span 1;
		background-color: #387dc5;
		box-shadow: 0 0 8px #003052;
		display: grid;
		grid-template-rows: min(6.5vh,71px) auto;
		z-index: 100;
	}
	.header #name {
    font-size: min(2.4vh,23px,7vw);
    line-height: min(6.5vh,71px);
    white-space: nowrap;
		text-align: center;
	}
	.header .menu {
    display: grid;
		font-size: min(3vh,14.5px,7vw);
    grid-auto-flow: row;
    grid-template-rows: auto 3px;
    grid-template-columns: 1fr 1fr 1fr;
	}
	.header .menu > * {
		text-align: center;
    height: 100%;
    align-content: center;
		box-sizing: border-box;
	}
	.header .marker {
    background-color: #f26927;
    grid-area: 2 / 1 / span 1 /span 2;
    width: 50%;
		margin-left: 0%;
	}
	.body {
    grid-area: 2 / 1 / span 1 / span 1;
    overflow: auto;
    display: grid;
    grid-template-rows: 0px 1fr;
    grid-template-columns: 100vw 100vw;
    scroll-behavior: smooth;
		margin-top: -0.3vh;
	}
	#scroll_container {
		grid-area: 2 / 1 /span 1 / span 1;
	}
	#scroll_container > * {
		scroll-snap-align: start;
		scroll-snap-stop: normal;
	}
	#dash-compressed {
		grid-area: 1 / 1 / span 1 / span 1;
		align-self: end;
    width: 100vw;
    background: #2e69a4;
    box-shadow: 0 0 3px #003052;
    height: 6.65vh;
    z-index: 2;
	}
	#dash-compressed p {
    padding-top: 1.35vh;
	}
	.last-30-days-history #dash-compressed {
		display: none;
	}
	#ppv2 {
		font-size: 3.8vh;
	}
	.trends {
		grid-area: 1 / 3 / span 2 / span 1;
		background-color: #2e69a4;
		border-left: 1px solid #ffffff30;
		display: none;
	}
	.body .menu {
		display: none;
	}
	.dash {
		height: 25vh;
		background-color: #2e69a4;
		position: relative;
	}
	#gauge {
		height: 104%;
		max-width: 100%;
	}
	.details {
		background-color: #387dc5;
		min-height: 100%;
    position: relative;
		z-index: 2;
	}
	.history {
		grid-area: 1 / 2 / span 2 / span 1;
		background-color: #2e69a4;
		border-left: 1px solid #ffffff30;
	}
	.lightning {
		position: absolute;
    top: 2.3vh;
    text-align: left;
    color: #81b0cf;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 1.3vh;
    left: 4%;
	}
	.history {
		grid-template-rows: 2.65em 1fr;
	}
	.last-30-days-history .history {
		grid-template-rows: 7em 1fr;
	}

	#hist-menu {
		font-size: 11.6px;
		align-items: center;
		background-color: #2e69a4;
    z-index: 1;
		border-bottom: 1px solid #ffffff30;
	}
	.last-30-days-history #hist-menu {
    grid-template-rows: 4.9em 1fr;
    border-bottom: 0 none;
    grid-template-columns: 4.9em 1fr;
    align-items: start;
	}

	#days,
	#detailed {
		margin: 6px 22px 0px;
    width: 18.5px;
    height: 18.5px;
		display: grid;
    justify-content: space-between;
    align-content: space-between;
    grid-template-columns: 34% 34%;
    grid-template-rows: 34% 34%;
	}
	#days > span,
	#detailed > span {
    border-color: white;
    border-style: solid;
	}
	#days > span:nth-child(1),
	#detailed > span:nth-child(1) {
    border-width: 2.5px 0 0 2.5px;
  }
	#days > span:nth-child(2),
	#detailed > span:nth-child(2) {
    border-width: 2.5px 2.5px 0 0;
  }
	#days > span:nth-child(3),
	#detailed > span:nth-child(3) {
    border-width: 0 0 2.5px 2.5px;
  }
	#days > span:nth-child(4),
	#detailed > span:nth-child(4) {
    border-width: 0 2.5px 2.5px 0;
  }
  .last-30-days-history #detailed > span {
    transform: rotate(180deg);
  }

	#title,
	.detailed-history #detailed,
	.last-30-days-history #days {
		display: none;
	}
	.last-30-days-history #detailed {
    display: grid;
    grid-area: 1 / 1 / span 1 / span 1;
    margin: 2.2em 0 0 2em;
	}
	.last-30-days-history #title {
		font-size: 20px;
		display: initial;
		grid-area: 2 / 2 / span 1 / span 1;
	}

	.last-30-days-history#screen {
		grid-template-rows: 0 1fr;
	}
	.last-30-days-history .body {
		grid-template-rows: 0 1fr;
		grid-template-columns: 0 1fr;
	}
}

/* =========================================== */


@media (min-width: 768px) {

	#screen {
	  height: 100vh;
	  display: grid;
	  grid-template-columns: 100vw;
	  grid-template-rows: min(12vh,63px) 1fr;
	  gap: 0px;
		width: 100vw;
		margin: auto;
		overflow: hidden;
	}
	.header {
	  grid-area: 1 / 1 / span 1 / span 1;
		background-color: #387dc5;
		box-shadow: 0 0 10px #003052;
	  font-size: min(6vh,23px);
		padding: 0 4.1em;
    align-content: center;
		white-space: nowrap;
		z-index: 100;
	}
	.header .menu {
		display: none;
	}
	.body {
		grid-area: 2 / 1 / span 1 / span 1;
		overflow-y: auto;
		display: grid;
		grid-template-rows: min(12vh,65px) minmax(20.4vh,174px) 1fr;
		grid-template-columns: 1fr 22.5em;
	}
	.body .menu {
    grid-area: 1 / 2 / span 1 / span 1;
    background-color: #387dc5;
    display: grid;
    font-size: min(3vh,19px,7vw);
    grid-auto-flow: row;
    grid-template-rows: auto 2.5px;
    grid-template-columns: 50% 50%;
	}
	.body .marker {
    background-color: #f26927;
    grid-area: 2 / 1 / span 1 /span 2;
		width: 50%;
    margin-left: 0%;
	}
	.btn {
		text-align: center;
    height: 100%;
    align-content: center;
		box-sizing: border-box;
	}
	.dash {
	  grid-area: 1 / 1 / span 2 / span 1;
		background-color: #2e69a4;
		border-bottom: 1px solid #ffffff30;
	}
	#gauge {
		height: 100%;
		max-width: 100%;
	}
	#scroll_container {
		grid-area: 2 / 2 / span 2 / span 1;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 100% auto;
		overflow: auto;
    scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		background-color: #387dc5;
	}
	#dash-compressed {
		display: none;
	}
	.trends {
		background-color: #2e69a4;
		display: none;
	}
	.details {
		background-color: #387dc5;
	}
	.history {
		grid-area: 3 / 1 / span 1 / span 1;
		background-color: #2e69a4;
	}
	.lightning {
		margin-top: -3.5vh;
		text-align: center;
		font-size: 1.7vh;
		color: #81b0cf;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
	}
	.lightning svg {
		height: 2.5vh;
		width: 3.28vh;
	}
	.history {
		grid-template-rows: 2em 1fr;
	}

	#days,
	#detailed {
		padding: 0 0.35em;
	}
	#detailed::before {
		content: "Detailed";
	}
	#days::before {
		content: "Last 30 days";
	}
	#title {
		display: none;
	}

	.locked-fullscreen #days,
	.locked-fullscreen #detailed {
		padding: unset;
	}
	.locked-fullscreen #detailed::before {
		content: unset;
	}
	.locked-fullscreen #days::before {
		content: unset;
	}
	.locked-fullscreen #title {
		display: unset;
	}

	#hist-menu {
		font-size: 11.6px;
		align-items: center;
		border-bottom: 1px solid #ffffff30;
		padding: 4px 5em;
	}
	.locked-fullscreen.last-30-days-history .history {
		grid-template-rows: 7em 1fr;
	}
	.locked-fullscreen #hist-menu {
		padding: initial;
	}
	.locked-fullscreen.last-30-days-history #hist-menu {
    border-bottom: 0 none;
    grid-template-columns: 4.9em 1fr;
		grid-template-rows: 4.9em 1fr;
    align-items: start;
	}


	.locked-fullscreen #days,
	.locked-fullscreen #detailed {
		margin: 5px 1.5em 0px;
		width: 18.5px;
		height: 18.5px;
		display: grid;
		justify-content: space-between;
		align-content: space-between;
		grid-template-columns: 34% 34%;
		grid-template-rows: 34% 34%;
	}
	.locked-fullscreen #days > span,
	.locked-fullscreen #detailed > span {
		border-color: white;
		border-style: solid;
	}
	.locked-fullscreen #days > span:nth-child(1),
	.locked-fullscreen #detailed > span:nth-child(1) {
		border-width: 2.5px 0 0 2.5px;
	}
	.locked-fullscreen #days > span:nth-child(2),
	.locked-fullscreen #detailed > span:nth-child(2) {
		border-width: 2.5px 2.5px 0 0;
	}
	.locked-fullscreen #days > span:nth-child(3),
	.locked-fullscreen #detailed > span:nth-child(3) {
		border-width: 0 0 2.5px 2.5px;
	}
	.locked-fullscreen #days > span:nth-child(4),
	.locked-fullscreen #detailed > span:nth-child(4) {
		border-width: 0 2.5px 2.5px 0;
	}
	.locked-fullscreen.last-30-days-history #detailed > span {
		transform: rotate(180deg);
	}

	.locked-fullscreen #title,
	.locked-fullscreen.detailed-history #detailed,
	.locked-fullscreen.last-30-days-history #days {
		display: none;
	}
	.locked-fullscreen.last-30-days-history #detailed {
		display: grid;
		grid-area: 1 / 1 / span 1 / span 1;
		margin: 2.2em 0 0 2.2em;
	}
	.locked-fullscreen.last-30-days-history #title {
		font-size: 20px;
		display: initial;
		grid-area: 2 / 2 / span 1 / span 1;
	}

	.locked-fullscreen.last-30-days-history#screen {
		grid-template-rows: 0 1fr;
	}

	.detailed-history #days,
	.last-30-days-history #detailed {
		color: #ffffff40;
	}
	#days:hover,
	#detailed:hover {
		background-color: #00000020;
		border-radius: 3px;
	}

	#hist-detailed {
		grid-template-rows: 1fr;
	}
	.detailed-history #hist-detailed-totals {
		display: none;
	}
	.locked-fullscreen #hist-detailed-totals {
		display: grid;
	}
}