/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
	blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
	em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
	b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
	article, aside, canvas, details, embed, figure, figcaption, footer,
	header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
	audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
	menu, nav, section {
	display: block;
}

body {
	line-height: 1;
	font-family: "poppins";
	font-weight: 400;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

.button, .my-property {
	font-family: "poppins";
	font-weight: 400;
	line-height: 85px;
	padding: 0 20px;
	letter-spacing: 1px;
	text-align: center !important;
	min-width: 150px;
	height: 80px;
	white-space: normal;
	display: inline-block;
	text-decoration: none;
}

.my-buildings a.button {
	color: #ef4322;
}

.my-account a.button {
	color: #23b9a1;
}

.button img, .property-name img {
	padding-right: 10px;
	padding-bottom: 10px;
	vertical-align: middle;
}

.my-property {
	background-color: rgba(220, 220, 220, 0.60);
	min-width: 300px;
	padding: 0;
}

.my-property .property-image, .my-property .property-name {
	float: right;
}

td {
	font-family: 'poppins', sans-serif;
	font-weight: 400;
}

div {
	font-family: 'poppins', sans-serif;
	font-weight: 400;
}

.unit-cell-radius {
	border-radius: 7px;
}

td.unit-cell {
	vertical-align: top;
	height: inherit;
	font-size: 14px;
	color: white;
	 min-width: 80px;
}

.unit-cell-background {
	background-color: rgba(80, 225, 225, 0.8);
}


td.energy-state-row-label {
	background-color: rgba(238, 238, 238, 1);
	padding: 22px 10px 10px 10px;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	border-spacing: 2px;
	border-color: grey;
	border: 1px solid #a0a0a0;
	box-shadow: 3px 3px 5px #a0a0a0;
	margin-right: 10px;
	color: #000000;
	font-size: 30px;
	text-align: center;
}

.setbackwindow {
	width: 210px;
	margin-top: -50px;
	background-color: #FFF;
	padding: 10px;
	border: 0px solid transparent;
	border-radius: 5px;
	z-index: 1200;
	display: none;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
}

.defaultcurvehelpwindow {
	position: absolute;
	background-color: #FFF;
	padding: 10px;
	border: 0px solid transparent;
	border-radius: 5px;
	z-index: 1200;
	text-align: center;
	width: 680px;
	display: none;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
}

.outputatsetpointhelpwindow {
	position: absolute;
	background-color: #FFF;
	width: 600px;
	padding: 10px;
	border: 0px solid transparent;
	border-radius: 5px;
	z-index: 1200;
	display: none;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
}

.cutoffabovesetpointhelpwindow {
	position: absolute;
	background-color: #FFF;
	padding: 10px;
	border: 0px solid transparent;
	border-radius: 5px;
	z-index: 1200;
	width: 500px;
	display: none;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
}

td.curvecells, th.curvecells {
	font-size: 13px
}

table.curvebuttons {
	border-spacing: 5px;
}

div.edit-unit {
	margin: auto;
	max-width: 950px;
	background-color: rgba(215, 215, 215);
	border-radius: 10px;
	padding: 12px 10px 12px 10px;
	margin-top: -15px;
	-webkit-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.3);
}

div.edit-unit-inner-frame {
	display: flex;
	justify-content: center;
	width: 95%;
	border-radius: 10px;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
	border-width: 1px;
	border-color: rgb(200, 200, 200);
	border-style: solid;
}

span.unit_we_are_editing {
	font-size: 18px;
	text-align: left;
}

span#unit_we_are_editing {
	font-size: 24px;
	color: #ef4323;
	font-weight: 500;
	text-align: left;
	padding: 5px 10px;
	margin: 0 10px;
	border: 4px solid #ef4323;
}

td.submitcancelbuttons {
	background: rgb(200, 200, 200);
	width: 110px !important;
	height: 28px !important;
}

td.offsetbuttons {
	color: #333;
	font-size: 22px;
	text-align: center;
	height: 30px;
	width: 30px;
	border-radius: 0px;
	padding: 4px;
}

td.curvebuttons {
	color: #333;
	font-size: 22px;
	text-align: center;
	height: 30px;
	width: 30px;
	border-radius: 0px;
	padding: 4px;
}

td.curvebuttonsdefault {
	padding: 4px;
	width: 300px;
	background-color: #ef4323;
}

div.curvebuttonsdefaultextrapadding {
	padding: 4px;
}

td.curvebuttonselected {
	padding: 0px;
	border: 4px dashed #000000;
}

td.offsetbuttonselected {
	padding: 0px;
	border: 4px dashed #000000;
}

span.panel_selector_selected {
	height: 20px;
	background: rgb(200, 200, 200);
	padding: 10px;
}

span.panel_selector_not_selected {
	height: 20px;
	background: rgb(240, 240, 240);
	padding: 10px;
}

/* This gets rid of the blue border on the textarea for the unit notes field */
textarea:focus, input[type="text"]:focus, textarea[type="text"]:focus,
	input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus,
	input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus,
	input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus,
	input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
	input[type="color"]:focus, .uneditable-input:focus, .form-control:focus
	{
	border-color: none;
	box-shadow: none;
	outline: none;
}

/* Below here is a little bit of responsiveness for the narrower screergb(247, 186, 2)ng to view the building grid */
@media screen and (max-width: 1024px) {
	.property-image {
		display: none;
	}
}

@media screen and (max-width: 999px) {
	div.logo {
		display: none;
	}
}

@media screen and (max-width: 1099px) {
	div.property-throttle, div.property-default, div.property-usage, div.property-responding,
		div.property-heating {
		margin: 0px 5px 0px 5px;
	}
}

@media screen and (max-width: 899px) {
	span.my_buildings_words {
		display: none;
	}
	a.button {
		min-width: 60px;
	}
}

div.analytics_box {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0
		rgba(0, 0, 0, 0.19);
	text-align: center;
	background-color: #F8F8F8;
	padding: 10px;
	max-width: 1000px;
	border-radius: 18px;
}

.tooltipwrapper {
	position: relative;
}

.tooltipwrapper .tooltip {
	position: absolute;
	font-size: 14px;
	top: 0;
	background: #808080;
	color: #ffffff;
	padding: 5px 8px;
	border-radius: 5px;
	box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	text-align: center;
}

/* This makes the little down arrow */
.tooltipwrapper .tooltip::before {
	position: absolute;
	content: "";
	height: 8px;
	width: 8px;
	background: #808080;
	bottom: -3px;
	left: 50%;
	transform: translate(-50%) rotate(45deg);
	transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltipwrapper .tooltippeditem:hover .tooltip {
	top: -30px;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

div.page-title {
	text-decoration: none;
	color: white;
	font-size: 28px;
	padding-top: 25px;
}

div.top-right-menu {
	font-size: 20px;
	padding-top: 30px;
	padding-right: 20px;
}

a.top-right-menu {
	text-decoration: none;
	color: white;
	padding-right: 10px;
}

/* Below here is a little bit of responsiveness in the standard header */
@media screen and (max-width: 1400px) {
	div.page-title {
		font-size: 22px;
		padding-top: 29px;
	}
	div.top-right-menu {
		font-size: 18px;
		padding-top: 32px;
	}
}

@media screen and (max-width: 1150px) {
	div.analytics_icon {
		right: 30px;
	}
	div.home_icon {
		left: 30px;
	}
	img.header_ecovena_logo {
		display: none;
	}
	div.common_header {
		padding-left: 10px;
		padding-right: 10px;
	}
	div.page-title {
		font-size: 20px;
		padding-top: 30px;
	}
	div.top-right-menu {
		font-size: 15px;
		padding-top: 34px;
	}
}

@media screen and (max-width: 1000px) {
	div.page-title {
		font-size: 16px;
		padding-top: 31px;
	}
	div.top-right-menu {
		font-size: 12px;
	}
}

@media screen and (max-width: 850px) {
	div.page-title {
		font-size: 15px;
		padding-top: 32px;
	}
	div.top-right-menu {
		font-size: 10px;
		padding-top: 35px;
	}
}

/* 2023 starts here */
div.round-corners {
	border-radius: 12px;
}

div.light-border {
	border: 1px solid #d0d0d0;
}

div.drop-shadow {
	box-shadow: 3px 3px 5px #d0d0d0;
}

img.drop-shadow-soft {
	box-shadow: 3px 3px 12px #e0e0e0;
}

img.rounded-corners {
	border-radius: 10px;
}

td.building-param-name {
	font-size: 14px;
	height: 26px;
	color: #8b8b8b;
	font-weight: 400;
}

td.building-param-value {
	font-size: 14px;
	font-weight: normal;
	font-weight: 600;
}

span.unit-number {
	font-size: 17px;
}

span.unit-number-large {
	font-size: 20px;
}

div.white-box-drop-shadow-dark {
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.3);
	box-shadow: 5px 5px 12px rgba(0, 0, 0, 0.3);
	border-radius: 15px;
}

div.red-styled-background-dark {
	top: 0px;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url(../images/ecovena-background-red.png);
}

a.plain-link {
	text-decoration: none;
}

a.plain-link:visited {
	color: rgb(0, 0, 238);
}

div.div-button {
	border-radius: 18px;
	height: 30px;
	color: white;
}

a.a-button {
	text-decoration: none;
	color: white;
	/*
	padding-left: 5px;
	padding-right: 5px;
	*/
}

a.a-button-selected {
	text-decoration: none;
	color: black;
}

td.unit-cell-drop-shadow {
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

div.div-button-shadow {
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
}

div.div-button-selected {
	height: 29px;
	color: black;
	background-color: rgb(255, 255, 255);
	z-index: 2;
}

div.div-button-selected-shadow {
	box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
}

div.div-button-over-white {
	background-color: rgb(228, 228, 228);
}

div.div-slider {
	height: 40px;
	display: inline-flex;
	color: white;
}

div.div-slider-position {
	font-size: 20px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

i.ecovena-fa-shadow {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 1.0));
	font-size: 16px;
	margin-left: 3px;
	margin-top: 3px;
	position: absolute;
}

img.ecovena-icon-shadow {
	filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 1.0));
	position: absolute;
	width: 14px;
	margin-left: 3px;
	margin-top: 5px;
}

tr.icon-state-chart-row {
	height: 22px;
}

td.icon-state-chart-legend {
	width: 55px;
	text-align: right;
	padding-right: 5px;
}

div.icon-state-chart {
	height: 22px;
}

div.icon-state-chart-left-round {
	border-radius: 50% 0 0 50%;
}

/*

.stepper-wrapper {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  max-width: 575px;
}
.stepper-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

.stepper-item::before {
  position: absolute;
  content: "";
  border-bottom: 2px solid #ccc;
  width: 100%;
  top: 20px;
  left: -50%;
  z-index: 2;
}

.stepper-item::after {
  position: absolute;
  content: "";
  border-top: 4px solid #ccc;
  border-bottom: 4px solid #ccc;
  width: 100%;
  top: 16px;
  left: 50%;
  z-index: 2;
}

.stepper-item .step-counter {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ccc;
  margin-bottom: 6px;
}

.stepper-item.active {
  font-weight: bold;
}

.stepper-item.completed .step-counter {
  background-color: #4bb543;
}

.stepper-item.completed::after {
  position: absolute;
  content: "";
  border-top: 4px solid #4bb543;
  border-bottom: 4px solid #4bb543;
  width: 100%;
  top: 16px;
  left: 50%;
  z-index: 3;
}

.stepper-item:first-child::before {
  content: none;
}
.stepper-item:last-child::after {
  content: none;
}

*/
div.div-ecovena-slider {
	display: flex;
	border-radius: 18px;
	padding-right: 1px;
	padding-left: 1px;
}

div.div-ecovena-slider-shadow {
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
}

div.div-ecovena-slider-button-selected {
	height: 29px;
	background-color: rgb(255, 255, 255);
	z-index: 2;
}

div.div-ecovena-slider-button {
	display: flex;
	border-radius: 18px;
	height: 30px;
	justify-content: center;
	align-items: center;
}

div.div-ecovena-slider-button-shadow {
	box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.3);
}

div.div-ecovena-slider-branding-ecovena {
	background-color: rgb(25, 110, 110);
}

div.div-ecovena-slider-branding-bondi {
	background-color: rgb(50, 84, 92)
}

a.a-ecovena-slider-button {
	text-decoration: none;
	margin-left: 8px;
	margin-right: 8px;
	color: inherit;
}

section.ecovena-table {
	display: table;
	width: 100%;
}

section.ecovena-table>* {
	display: table-row;
}

section .ecovena-table-column {
	display: table-cell;
	padding: 3px 3px 3px 3px;
}

div.ecovena-table-column-header {
	text-align: right;
	font-weight: 600;
}

div.ecovena-show-when-loaded {
	visibility: hidden;
}

span.unit-cell-temperature-display-very-large {
	font-size: 26px;
	display: block;
	margin: 6px 0px 0px 0px;
}

span.unit-cell-temperature-display-large {
	font-size: 23px;
	display: block;
	margin: 2px 0px 2px 0px;
}

span.unit-cell-temperature-display-small {
	font-size: 20px;
	display: block;
	margin: 2px 0px 2px 0px;
}

.popup-panel {
	opacity: 0.0;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	height: auto;
	position: absolute;
	box-shadow: 2px 2px 15px #353535;
	border-radius: 10px;
	padding: 10px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.popup-close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;

  width: 32px;
  height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,1);
  cursor: pointer;

  font-size: 20px;      /* size of the × */
  color: #333;          /* darker X for visibility */
  line-height: 1;
  font-weight: bold;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: background 0.2s, transform 0.1s;
}

.popup-close-btn:hover { background: rgba(255,255,255,0.8); }
.popup-close-btn:active { transform: scale(0.95); }
.popup-close-btn:focus-visible {
  outline: 2px solid #2684ff;
  outline-offset: 2px;
}

.tempenergygrid {
  display: grid;
  grid-template-columns: auto auto; /* two columns */
  gap: 4px;
  padding-top: 7px;
  padding-bottom: 5px;
}
.tempenergygrid > div {
  border: 1px solid #666;
  padding: 6px;
}
.tempenergygrid > div:nth-child(2n-1) {
  text-align: right;
  font-weight: 500;
}

td.nostretch {
	min-height: 0px !important;
	padding: 0px !important;
}