.flexcenter,
.flexleft,
.flexright,
.flexcentertop,
.flexcenterbottom {
	border: 0;
}
.gridded .flexcenter {
	border: 1px dotted red;
}
.gridded .flexleft {
	border: 1px dotted orange;
}
.gridded .flexright {
	border: 1px dotted blue;
}
.gridded .flexcentertop {
	border: 1px dotted green;
}
.gridded .flexcenterbottom {
	border: 1px dotted green;
}

body {
	font-family: Arial, sans-serif;
	color: #ddd;
}

div.gauge {
	position: static;
	width: 100%;
	min-width: 300px;
	height: calc(80vh - 10px);
	height: calc(80dvh - 10px);
	min-height: 430px;
	/* border: 1px solid #111; */
	border: 0;
	border-radius: 1rem;
}
.home div.gauge {
	min-width: 350px;
	height: 80vh;
	height: 80dvh;
	border-radius: 0;
	overflow: visible;
}
div.gauge .currenthumid {
	font-size: 28px;
	color: #ddd;
	position: relative;
}

input[type="checkbox"] {
	margin: 0 0 2px 0;
	height: 19px;
	width: 19px;
}

svg {
	width: 1em;
	height: 1em;
	vertical-align: -.125em;
}
.actOption:active svg,
.actOption:focus svg,
.actOption:hover svg,
.button-container:active .iconcommon,
.button-container:focus .iconcommon,
.button-container:hover .iconcommon {
	transform: scale(1.1);
}
#buttonCH svg {
	transform: scale(1.2);
}
/* #fanDecrease svg {
	transform: scale(.7);
}
#fanDecrease:active svg,
#fanDecrease:focus svg,
#fanDecrease:hover svg {
	transform: scale(.8);
} */
svg path {
	fill: #ddd;
}

#branding {
	display: none;
	text-align: center;
	position: absolute;
	bottom: 19px;
	left: 0;
	width: 100%;
	/* color: rgba(255, 255, 255, .5); */
	color: #144d53; /* rixens.com header background, too bright */
	color: #082022; /* classy and same as MCS7 header */
}
@media (min-height: 520px) {
	#branding {
		display: block;
	}
}
#branding .whs {
	font-size: 11px;
	display: inline-block;
	/* border-bottom: 1px solid rgba(255, 255, 255, .5); */
	border-bottom: 1px solid #082022;
	padding-bottom: 4px;
	margin-bottom: 4px;
}
#branding .rixens {
	font-size: 49px;
	font-weight: bold;
	line-height: .85;
}
#branding .rixens span {
	font-family: Trebuchet MS, sans-serif;
}
#branding .ei {
	font-size: 17px;
	font-weight: bold;
	letter-spacing: .85px;
}
#branding .ccc {
	font-size: 11px;
	display: inline-block;
	/* border-top: 1px solid rgba(255, 255, 255, .5); */
	border-top: 1px solid #082022;
	margin-top: 4px;
	padding-top: 5px;
}

#chkSendLocation,
#chkSendLocation2 {
	display: inline-block;
	margin-bottom: 20px;
}

#currentTemp {
	font-size: 144px;
	justify-content: center;
}
@media (max-width: 530px) {
	#currentTemp {
		font-size: 90px;
	}
	#currentTemp .context {
		margin-top: 38px;
	}
	
	.tableOuter {
		font-size: 1rem;
	}
}
#currentTemp #setPointUnit {
	font-size: 0.33em;
	top: -0.72em;
}

#fanDecrease,
#fanIncrease,
#setPointDecrease,
#setPointIncrease,
.setpointdiv {
	/* font-size: 24px; */
	/* background: #171717; */
	/* height: 90%;
	max-height: 135px; */
	/* padding: 0 16px; */
	/* border-bottom: 4px solid #082022;
	border-top: 1px solid #082022; */
	flex-basis: 33%;
	padding: 20px 0;
}
#fanDecrease,
#setPointDecrease {
	justify-content: flex-end;
	padding-right: 10px;
}
#fanIncrease,
#setPointIncrease {
	justify-content: flex-start;
	padding-left: 10px;
}
#fanDecrease {
	/* padding-right: 10px; */
	/* font-size: 23px; */
	font-size: 0.7em;
}
/* #fanDecrease,
.minus-icon {
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	border-left: 1px solid #082022;
} */
/* #fanIncrease {
	padding-left: 10px;
	font-size: 23px;
} */
/* #fanIncrease.auto {
	padding-left: 0 !important;
} */
/* #fanIncrease svg {
	font-size: 1.25em;
} */
/* #fanIncrease.auto svg {
	display: none !important;
} */
/* #fanIncrease,
.plus-icon {
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	border-right: 1px solid #082022;
} */
#fanSpeedSub,
#setPoint.disabled #setpointSub {
	color: #a0a0a0;
}
#fanSpeed.enabled #fanSpeedSub {
	color: #ddd;
}
/* .fancontrol.fan-icon path{
	stroke: #fff;
	stroke-width: 1px;
	fill: transparent;
} */
#fanSpeed .fan-icon {
	display: none;
}
#fanSpeed.percent .fan-icon {
	display: flex;
}
#fanSpeed .setpointdiv .fan-icon {
	display: block;
	padding-right: 10px;
}
#fanSpeed.percent .setpointdiv .fan-icon {
	display: none;
}
.setpoints {
	font-size: 27px;
	width: 100%;
}
.setpointdiv {
	height: 100%;
	cursor: pointer;
}

/* #fanIncrease svg,
#fanSpeed svg, */
.aux-zone-icon svg {
	transform: scale(-1, 1);
}
#fanSpeed path {
	fill: #a0a0a0;
	transform-origin: 50% 50%;
}
#fanSpeed.enabled path {
	fill: #ddd;
}
#fanSpeed.active path {
	/* fill: #2cff29; */
	/* fill: #00d409; */
	fill: #ddd;
	animation: spin 8s linear infinite;
}
	
@keyframes spin {
	0% { transform: rotate(0deg); }
	50% { transform: rotate(180deg); }
	100% { transform: rotate(360deg); }
}

#layout {
	opacity: 0;
	transition: all 1s ease-out;
}
#layout.loaded {
	opacity: 1;
}

#main.sleep {
	opacity: 1;
	pointer-events: none;
}
#main.sleep .flexcenter,
#main.sleep .willsleep {
	opacity: 0 !important;
}
#main.sleep .flexcenter.keepalive {
	opacity: 1 !important;
}
#main.sleep #currentTemp {
	opacity: 0.2 !important;
}
#main.sleep #the_orb {
	opacity: 0.3 !important;
}

@keyframes flame {
  0%   { text-shadow: -1px -1px 0 #082022, 1px -1px 0 #082022, -1px 1px 0 #082022, 1px 1px 0 #082022, 0 -1px 0 #082022, 0 1px 0 #082022, -1px 0 #082022, 1px 0 #082022; }
  50%  { text-shadow: 0 -1px 2px #fff, 0 -1px 5px #ff3, 0 -5px 10px #f90, 0 -10px 20px #c33; }
  100% { text-shadow: -1px -1px 0 #082022, 1px -1px 0 #082022, -1px 1px 0 #082022, 1px 1px 0 #082022, 0 -1px 0 #082022, 0 1px 0 #082022, -1px 0 #082022, 1px 0 #082022; }
}
#mcs7 {
	/* display: none; */
	width: 100%;
	height: 100%;
	font-size: 50px;
	font-weight: bold;
	/* color: #082022; */
	/* text-shadow: 0 0 2px #fff; */
	/* text-shadow: 0 -1px 2px #fff; */
	color: #000;
	/* text-shadow: 0 3px 0 #082022; */
	text-shadow: -1px -1px 0 #082022, 1px -1px 0 #082022, -1px 1px 0 #082022, 1px 1px 0 #082022, 0 -1px 0 #082022, 0 1px 0 #082022, -1px 0 #082022, 1px 0 #082022;
	/* transition: text-shadow 2s ease-in; */
}
#layout.loaded #mcs7 {
	animation-name: flame;
	animation-delay: 1s;
	animation-duration: 4s;
	animation-timing-function: ease-in-out;
}
#layout.loaded #mcs7.shy {
	animation: none;
}
#mcs7 span {
	cursor: pointer;
}

/* Menu */
#menu {
	/* background: linear-gradient(to right,  #000000 0%,#082022 100%); */
	background: #000;
	border-right: 1px solid #082022;
}
#menu .pure-menu li a:hover,
#menu .pure-menu-selected,
#menu .pure-menu-selected .pure-menu-link {
	background: transparent;
	color: #d4af37;
	border: 0;
}
#menuMask {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -1;
}
#menuMask.active {
	z-index: 999;
}
@media (min-width: 1px) {
	
	#menu,
	#menuLink {
		left: 0;
	}
	.layout.active #menu,
	.layout.active #menuLink {
		left: 210px;
	}
	#menuLink {
		position: relative;
		display: flex;
		padding: 0;
		align-items: center;
		justify-content: center;
		/* background: #082022;
		background: linear-gradient(to right,  rgba(8,32,34,1) 0%,rgba(8,32,34,1) 50%,rgba(8,32,34,0) 100%); */
		background: linear-gradient(to bottom, rgba(8,32,34,1) 0%,rgba(0,0,0,1) 90%);
		width: 100%;
		height: 100%;
	}
	.layout {
		padding-left: 0;
	}
	
	.back-link-container,
	.quick-send-form,
	.send-form {
		width: 100%;
		padding: 0 1rem 1rem;
	}
	.content table {
		width: 90%;
		margin: 0 auto;
		line-height: 1;
	}
	.content .diagnostics table {
		margin-bottom: 1rem;
	}
	
}
#menuLink .hamburger {
	display: block;
	position: relative;
	width: 40px;
	height: 30px;
}
#menuLink .hamburger span {
	background-color: #ddd;
	border-radius: 3px;
	display: block;
	opacity: 1;
	position: absolute;
	transform-style: preserve-3d;
	transition: all .2s ease-out;
	width: 100%;
	height: 4px;
}
#menuLink .hamburger .top {
	top: 0;
}
#menuLink.active .hamburger .top {
	top: 50%;
	transform: rotate(45deg);
}
#menuLink .hamburger .middle {
	top: 50%;
	margin-top: -2px;
}
#menuLink.active .hamburger .middle {
	margin-top: 0;
	top: 50%;
	transform: rotate(-45deg);
}
#menuLink .hamburger .bottom {
	bottom: 0;
}
#menuLink.active .hamburger .bottom {
	opacity: 0;
}
.menu-link,
.menu-link:focus,
.menu-link:hover {
	background-color: transparent;
}
.menu-link span,
.menu-link span:before,
.menu-link span:after {
	background: transparent;
}
.menu-trigger-container {
	padding: 0;
}
.pure-menu-item.text-any a {
	padding-left: 2.6em;
}
.pure-menu-item.text-any#menumailbox a {
	padding-left: 1.6em;
}
.pure-menu-item a {
	padding: 0.6em 0 0.6em 1.6em;
	color: #ddd;
}
.pure-menu-item:first-child a {
	padding-top: 1.6em;
}
@media (min-height:400px) {
	.pure-menu-item a {
		font-size: 18px;
	}
}
@media (min-height:600px) {
	.pure-menu-item a {
		font-size: 22px;
	}
}
@media (min-height:800px) {
	.pure-menu-item a {
		font-size: 22px;
	}
}

#statusbar.enabled .pagetitle {
	display: none;
	animation: none;
	pointer-events: none;
}

#modalHardwareSetup {
	font-size: 16px;
}
#modalHardwareSetup h5 {
	line-height: 2.25em;
	margin: 0.25em 0;
}

#pageTitle {
	font-size: 24px;
	font-weight: bold;
}

#selectSecurityType {
	margin-bottom: 1em;
}

#setPoint sup {
	font-size: 0.5em;
	top: -0.37em;
}
#setPoint .therm-icon,
#setPoint.disabled sup,
#setPoint.disabled .actOption {
	display: none;
}
#setPoint.disabled .therm-icon {
	display: block;
}
/* #setpointSub {
	display: flex;
	height: 100%;
	align-items: center;
} */
#setPointUnit span {
	display: none;
}
.legendary #setPointUnit span {
	display: inline;
}
#setPointValue,
.setpoints#fanSpeed .setpointdiv {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none;
}
#tempStat {
	line-height: 1;
}
#tempStat,
.flexcenter {
	position: relative;
}

#the_orb path {
	fill: #000;
	stroke: #a0a0a0;
	stroke-width: .7px;
	transition: fill 1s linear;
}
.sleep #the_orb path {
	stroke-width: 0;
}
#the_orb.yellow path {
	fill: #f1d130;
	stroke-width: 0;
}
#the_orb.blue path {
	fill: #143fff;
	stroke-width: 0;
}
#the_orb.red path {
	fill: #cc221e;
	stroke-width: 0;
}

#topright div {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
#topright .x-icon {
	display: flex;
	font-size: 48px;
}
#topright .info-icon,
#topright.homescreen .x-icon,
#layout.active #topright .x-icon {
	display: none ;
}
#topright.homescreen .info-icon {
	display: flex;
}

#txtEmailDiag {
	height: 52px;
}
#txtPassword {
	margin-bottom: 0;
}

.button-container {
	width: 100%;
	text-align: center;
	position: relative;
	padding: 20px 0;
}

.container {
	margin: 0 10px;
}
.home.container {
	margin: 0;
}

.content {
	margin: 0;
	padding: 0;
}

.content a.pure-button.inlined {
	width: auto;
}

.flexstretch {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 100%;
}
.flexstretch .middle {
	flex: 1;
}
.flexstretch #mainControls {
	flex-direction: column;
}

.gaugePreset span,
.gaugePreset .setpointunitPreset {
	color: #ddd !important; /* don't need this if thermostatpreset.css rules removed */
}

.gridheader h5 {
	font-size: 1.5rem;
}

.header {
	background: #082022;
	background: linear-gradient(to bottom,  rgba(8,32,34,1) 0%,rgba(8,32,34,0) 90%);
	height: 20vh;
	height: 20dvh;
	min-height: 80px;
	/* max-height: 130px; */
}
/* @media (min-height: 1000px) {
	#footer {
		background: linear-gradient(to top,  rgba(8,32,34,1) 0%,rgba(8,32,34,0) 100%);
	}
	#footer,
	.header {
		height: 8vh;
		height: 8dvh;
	}
} */

.iconcommon {
	display: inline-block;
	cursor: pointer;
}
.legendary .iconcommon:after {
	content: "Off";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 18px;
	color: #000;
	text-shadow: -1px -1px 0 #a0a0a0, 1px -1px 0 #a0a0a0, -1px 1px 0 #a0a0a0, 1px 1px 0 #a0a0a0, 0 -1px 0 #a0a0a0, 0 1px 0 #a0a0a0, -1px 0 #a0a0a0, 1px 0 #a0a0a0;
}
.legendary .iconcommon.enabled:after {
	content: "On";
	text-shadow: -1px -1px 0 #1a90ff, 1px -1px 0 #1a90ff, -1px 1px 0 #1a90ff, 1px 1px 0 #1a90ff, 0 -1px 0 #1a90ff, 0 1px 0 #1a90ff, -1px 0 #1a90ff, 1px 0 #1a90ff;
}
.legendary .iconcommon.active:after,
.legendary #buttonCH.iconcommon.enabled:after,
.legendary #buttonPH.iconcommon.enabled:after {
	content: "Active";
	text-shadow: -1px -1px 0 #ff7e08, 1px -1px 0 #ff7e08, -1px 1px 0 #ff7e08, 1px 1px 0 #ff7e08, 0 -1px 0 #ff7e08, 0 1px 0 #ff7e08, -1px 0 #ff7e08, 1px 0 #ff7e08;
}
.legendary #buttonH2.iconcommon.enabled:after {
	text-shadow: -1px -1px 0 #fff204, 1px -1px 0 #fff204, -1px 1px 0 #fff204, 1px 1px 0 #fff204, 0 -1px 0 #fff204, 0 1px 0 #fff204, -1px 0 #fff204, 1px 0 #fff204;
}
.iconcommon svg,
#the_orb svg {
	font-size: 48px;
}
.preset-icon path,
.sources .iconcommon path,
.zones .iconcommon path,
#buttonCH path,
#setPoint.disabled .therm-icon path {
	fill: #a0a0a0;
}
.sources .iconcommon.enabled path,
.zones .iconcommon.enabled path {
	fill: #1a90ff;
}
.preset-icon.enabled path,
.sources .iconcommon.active path,
.zones .iconcommon.active path,
#buttonCH.enabled path,
#buttonPH.enabled path {
	fill: #ff7e08;
}
#buttonH2.active path,
#buttonH2Preset.enabled path {
	fill: #fff204;
}

.context {
	font-size: 16px;
	font-weight: normal;
	position: absolute;
	top: 70px;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	padding: 5px 0;
	text-align: center;
	color: #ddd;
	display: none;
}
.legendary .context {
	display: block;
}
.legendary #menuLink .context {
	font-size: 16px !important;
	top: -80%;
}
.legendary #menuLink.active .context,
.legendary .sidebar.zones.hotwater #zonetext.context {
	display: none;
}
.context.special {
	top: 100%;
}
#currentTemp .context {
	width: 200px;
	top: 50%;
	margin-top: 60px;
}
.setpointdiv .context {
	width: auto;
	white-space: nowrap;
}
.setpointdiv .context.above {
	top: -5px;
}
.setpointdiv .context.below {
	top: auto;
	bottom: -3px;
}
.setpointdiv .context span {
	font-size: .8em;
}
.setpointdiv .context span i {
	font-style: normal;
	display: inline-block;
	transform: rotate(72deg);
	position: relative;
	top: 0.1em;
}

.info-icon svg {
	font-size: 30px;
	/* border-radius: 50%;
	border-bottom: 3px solid #082022; */
}

.invisible {
	opacity: 0;
}

.loading {
	opacity: 0.5;
}

.LogoText {
	position: static;
	text-align: right;
	padding: .5rem .75rem;
	line-height: 1.5rem;
}

.mail-icon {
	display: inline-block;
	width: 1em;
	margin-right: 2px;
}
.mail-container {
	position: relative;
	display: inline-block;
}

.mainContentSpot {
	position: static;
	width: 100%;
}
@media (max-width: 800px) {
	.mainContentSpot {
		position: static;
		width: 100%;
	}
}

.preset-icon {
	font-size: 48px;
}
.preset-icon.fan-icon {
	padding-right: 5px;
}
.preset-icon.labeled:after {
	content: "";
	position: absolute;
	width: 62px;
	height: 6px;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%) rotate(50deg);
	border-radius: 3px;
	background: #a0a0a0;
	border-bottom: 3px solid #000;
}
.preset-icon.labeled.enabled:after {
	display: none;
}
.preset-icon.white path {
	fill: #ddd;
}

.pure-form label.wifiSecurityMessage {
	margin: 0.5em 0 1em 0 !important;
}

.pure-g {
	font-family: Arial, sans-serif;
	letter-spacing: normal;
}

.remodal {
	padding: 2rem 1.5rem 1rem 1.5rem;
}
#disconnectmodal.remodal {
	font-size: 1em;
	line-height: 1.4;
}

.remodal .pure-form h5 {
	margin: 0;
	line-height: 32px;
}

/* Status bar */
.sb-item {
	display: flex;
	width: 50% !important; /* don't need !important if layout.css rules removed */
	text-align: center !important; /* don't need !important if layout.css rules removed */
	margin: 0 !important; /* don't need !important if layout.css rules removed */
	justify-content: center;
}
.sb-item span {
	font-size: 1em;
	line-height: 1.5rem;
	padding: 0;
	letter-spacing: 1px;
}
.statusbar {
	background: transparent;
	margin: 0;
	padding: 0;
}
.spanHeaterStatus {
	display: inline-block;
	font-size: 1em;
	font-weight: bold;
	padding: 0.125em .75em;
}
.statusbar.mail-disabled .spanHeaterStatus {
	font-size: 22px;
}
.spanSendCount {
	margin-left: 0;
	padding: 0.125em .75em !important;
}
@media (max-width: 768px) {
	.sb-item span {
		padding: 0;
		letter-spacing: 0;
	}
}
@media (max-width: 479px) {
	.sb-item {
		width: 100% !important;
	}
}
@media (max-width: 414px) { /* don't need this if layout.css rules removed */
	.sb-item .spanSendCount {
		font-size: 1em;
		padding: 0.125em .75em !important;
	}
}

.settings .flexleft {
	padding-left: 5px;
}
.settings .flexright {
	padding-right: 5px;
}

.settingsBox {
	width: 100%;
	overflow: hidden;
	/* border: 2px solid #262526; */
	border-radius: 1rem;
	box-shadow: 0 0 0px 2px #262526 inset;
}

.sidebar {
	flex-basis: 90px;
	flex-wrap: wrap;
}
.sidebar.sources > .context,
.sidebar.zones > .context {
	top: 0;
	background: #082022;
	border-top-right-radius: 16px;
}
.sidebar.sources > .context span,
.sidebar.zones > .context span {
	color: #ddd;
	font-size: .75em;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: 0 1px 0 #000;
}
.sidebar.sources {
	position: relative;
	border-top-right-radius: 16px;
	border-bottom-right-radius: 16px;
	box-shadow: 2px 0 0 0 #082022, -1px 0 0 1px #082022 inset;
}
.sidebar.zones {
	position: relative;
	border-top-left-radius: 16px;
	border-bottom-left-radius: 16px;
	box-shadow: -2px 0 0 0 #082022, 1px 0 0 1px #082022 inset;
}
.sidebar.zones.hotwater {
	box-shadow: none;
}
.sidebar.zones > .context {
	border-radius: 16px 0 0 0;
}

.tableOuter {
	margin: 0;
	border: 0;
	overflow: hidden;
	/* border: 2px solid #144d53; */
	border-radius: 16px;
	box-shadow: 0 0 0px 2px #144d53 inset;
}
@media (max-height: 500px) {
	.tableOuter {
		font-size: 1rem;
	}
}
#divFaultCodes1Outer.tableOuter #divFaultCodes1 {
	padding: 18px;
}
#divFaultCodes1Outer.tableOuter .gridheader {
	padding: .25em 1em;
	background: #144d53;
	font-weight: bold;
	text-align: center;
}
#divStatusCodes1Outer.tableOuter {
	padding: 18px;
}
#divFaultCodes1 > div,
#divStatusCodes1 > div {
	border-top: 1px solid #144d53;
	margin-top: 5px;
	padding-top: 5px;
}
#divFaultCodes1 > div.pure-u-1-5:first-child,
#divFaultCodes1 > div.pure-u-4-5 {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}
#divFaultCodes1 > div.pure-u-4-5 ~ .pure-u-4-5 {
	border-top: 1px solid #144d53;
	margin-top: 5px;
	padding-top: 5px;
}

/* @media (min-width: 350px) and (min-height: 500px) {
	#currentTemp {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
} */

@media (min-width: 390px) {
	
	.container {
		margin: 0 1rem;
	}
	
	.context {
		font-size: 18px;
	}
	
	.setpoints {
		font-size: 33px;
	}
	
	.sidebar {
		flex-basis: 100px;
	}
	
}

@media (min-width: 500px) {
	
	.context {
		font-size: 20px;
	}
	.legendary .iconcommon:after {
		font-size: 22px;
	}
	
	.setpoints {
		font-size: 40px;
	}
	
	.sidebar {
		flex-basis: 120px;
	}
	
}

@media (min-height: 500px) {
	#spanHeaterStatus1 {
		font-size: 22px;
	}
}

@media (min-width: 600px) {
	
	.mail-container {
		line-height: 32px;
	}
	.sb-item {
		font-size: 22px;
	}
	
}

@media (min-width: 600px) and (min-height: 600px) {
	div.gauge .currenthumid {
		font-size: 38px;
	}
	.setpoints {
		font-size: 63px;
	}
	.setpoints#fanSpeed .setpointdiv {
		font-size: 50px;
	}
	.setpoints#fanSpeed .setpointdiv .fan-icon {
		font-size: 63px;
	}
}

@media (min-width: 720px) {
	
	.context {
		font-size: 22px;
	}
	
	.sidebar {
		flex-basis: 150px;
	}
	
}

@media (min-width: 801px) {
	div.gauge {
		width: 100%;
	}
}

@media (min-width: 500px) and (min-height: 800px) {
	
	.context {
		top: 90px;
	}
	
	#mcs7 {
		font-size: 60px;
	}
	
	#menuLink .hamburger {
		width: 52px;
		height: 39px;
	}
	.info-icon svg {
		font-size: 39px;
	}
	.legendary #menuLink .context {
		font-size: 21px !important;
	}
	
	.iconcommon svg,
	#the_orb svg {
		font-size: 64px;
	}
	
}

@media (min-width: 600px) and (max-width: 999px) {
	
	#fanDecrease,
	#setPointDecrease {
		justify-content: flex-end;
	}
	#fanIncrease,
	#setPointIncrease {
		justify-content: flex-start;
	}
	
}

/* @media (min-height: 500px) and (max-width: 999px) {
	
	#fanDecrease,
	#fanIncrease,
	.setpointdiv {
		align-items: start;
	}
	
	#setPoint .setpointdiv,
	#setPointDecrease,
	#setPointIncrease {
		align-items: end;
	}
	
} */

@media (min-width: 1000px) {
	
	#currentTemp {
		flex-basis: 0;
	}
	.tripledigits #currentTemp {
		font-size: 111px;
	}
	.tripledigits #currentTemp .context {
		margin-top: 45px;
	}
	
	#fanDecrease,
	#fanIncrease,
	#setPointDecrease,
	#setPointIncrease,
	.setpointdiv {
		padding: 0;
		width: 100%;
		justify-content: center;
	}
	
	#fanSpeed,
	#setPoint {
		flex-basis: 50%;
		flex-direction: column-reverse;
		height: 100%;
		max-height: 364px;
		font-size: 83px;
	}
	
	.flexstretch #mainControls {
		flex-direction: row;
	}
	
	.setpoints#fanSpeed .setpointdiv {
		font-size: 63px;
	}
	.setpoints#fanSpeed .setpointdiv .fan-icon {
		font-size: 83px;
	}
	
}

@media (max-width: 400px) {
	
	div.gauge {
		font-size: 1rem;
	}
	.mailbox div.gauge {
		font-size: 0.75rem;
	}
	
	.tripledigits #currentTemp {
		font-size: 70px;
	}
	.tripledigits #currentTemp .context {
		margin-top: 26px;
	}
	
}

/* For later: allow smallest mobile device or split-screen width
div.gauge {
	min-width: 320px;
}

@media (max-width:800px) {
	.mainContentSpot {
		min-width: 320px;
	}
}
*/