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


/*customer_status*/

/* Bootstrap
Breakpoints-sx: 0;
Breakpoints-sx: 576px;
Breakpoints-sx: 768px;
Breakpoints-sx: 992px;
Breakpoints-sx: 1200px;
Breakpoints-sx: 1400px;
*/


/* === RTR: etank-rtr buttons & layout === */
.etank-rtr { --gap:16px; }

.etank-rtr .toolbar {
	display:flex; align-items:center; justify-content:space-between;
	gap:var(--gap); padding:8px 0 12px;
}

.etank-rtr .toolbar .sort-group .btn + .btn { margin-left:8px; }

.etank-rtr .btn-outline-primary {
	background:#fff; border-color:#0d6efd; color:#0d6efd;
}

.etank-rtr .cta-row {
	display:flex; justify-content:center; padding:12px 0 16px;
}
.etank-rtr .cta-row .btn {
	font-size:1.1rem; font-weight:600; padding:.65rem 1.2rem;
	box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.etank-rtr .rounded-pill { border-radius:9999px; }

/* Optional: keep content a comfortable width so the center CTA lines up */
.etank-rtr .narrow {
	max-width:820px; margin:0 auto;
}

/*Tanks and gauge buttons on Index page*/
/* ========= Layout / cards ========= */
.dashboard {
	display: grid;
	grid-template-columns: 380px 1fr;
	gap: 20px;
}
@media (max-width: 980px){
	.dashboard { grid-template-columns: 1fr; }
}

.card {
	background:#fff; border:1px solid #e5e7eb; border-radius:14px;
	padding:16px; box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.section-title { margin:0 0 8px; font-weight:700; letter-spacing:.02em; color:#334155; }
.subtle { color:#64748b; font-size:12px; }
.kv { display:grid; grid-template-columns: 220px 1fr; gap:8px 16px; }
.kv dt { color:#475569; }
.kv dd { margin:0; color:#111827; font-weight:600; }

/* ========= View toggle (toolbar) ========= */
.etank-toolbar{
	display:flex; align-items:center; justify-content:space-between;
	gap:12px; margin:.5rem 0 .75rem;
}

.segmented{
	--seg-bg:#fff; --seg-bd:#cbd5e1;
	display:inline-grid; grid-auto-flow:column; gap:2px;
	padding:2px; border:1px solid var(--seg-bd); border-radius:999px;
	background:var(--seg-bg); box-shadow:inset 0 1px 0 rgba(0,0,0,.04);
}
.segmented .seg{
	appearance:none; border:0; border-radius:999px;
	padding:.4rem .9rem; background:transparent; cursor:pointer;
	font-weight:600; color:#334155; letter-spacing:.02em;
}
.segmented .seg.is-active{
	background:#0b6fd7; color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
}

/* ========= Visual toggle container ========= */
.visual-toggle{ margin:10px 0; }
[hidden]{ display:none !important; }

/* ========= Gauge overlay text ========= */


/* ========= Dark mode (optional) ========= */
@media (prefers-color-scheme: dark){
	.card { background:#0b1220; border-color:#1f2937; box-shadow:none; }
	.section-title { color:#e2e8f0; }
	.kv dt { color:#9ca3af; }
	.kv dd { color:#f3f4f6; }

	.segmented{ --seg-bg:#0b1220; --seg-bd:#334155; box-shadow:none; }
	.segmented .seg{ color:#e5e7eb; }
	.segmented .seg.is-active{ background:#0b6fd7; color:#fff; }

	.gauge-title{ color:#e2e8f0; }
	.gauge-units{ color:#cbd5e1; }
	.gauge-readout{ background:#0f172a; color:#fff; }
}

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

/* Style for the live button */
.live-button {
	background-color: #ff0000; /* red background */
	color: #ffffff;            /* white text */
	font-size: 16px;
	font-weight: bold;
	border: none;
	padding: 10px 20px;
	border-radius: 5px;
	cursor: pointer;
	text-transform: uppercase;
}

.dark-mode .card {
	background-color: #FFFFFF !important;
}
.dark-mode .card-body{
	background-color: #FFFFFF !important;
}
.subHeading {
	font-weight:700;
	font-size:1.05rem;
	margin:16px 0 8px;
	padding-bottom:4px;
	border-bottom:2px solid #0d6efd; /* brand blue */
	color:#0d6efd;
	background:none;
}

.listContainer{
	display:flex;
}
.complexName{
	display:flex;
	flex-wrap:wrap !important;
	justify-content:center !important;
	padding: 20px 20px 0 20px;
	line-height: 1.3 !important;
	font-size: 1.2em !important;
	font-weight: bold;
	text-align: center ;
	font-family: "Arial", serif;
	margin-bottom: 0;
}

.buildingName{
	display:flex;
	flex-wrap:wrap !important;
	justify-content:center !important;
	padding: 5px 20px 5px 20px;
	line-height: 1.3 !important;
	font-size: 1.2em !important;
	font-weight: bold;
	text-align: center ;
	font-family: "Arial", serif;
	margin-bottom: 0;

}
.dateUpdated{
	display:flex;
	flex-wrap:wrap !important;
	justify-content:center !important;
	margin-bottom:0;
	padding: 0 20px 10px 20px;
	line-height: 1.3 !important;
	font-size: 1em !important;
	font-weight: 400;
    text-align: center ;
	font-family: "Arial", serif;
	align-items:center;

}

.my-header-class {
	white-space: normal !important;
	word-wrap: normal  !important;
}

.tank-status-heading{
	display:flex;
	width:100%;
	justify-content:space-between;
	padding:0 20px 5px 5px;
	flex-wrap:wrap;
}

.content-container{

	border:none !important;
}

.accordion{
	display: flex;
	border-top: groove;
	width:100%;
	/*flex-direction: column-reverse;*/
}

.accordion-item {
	background: inherit;
	width: 100%
	/*backdrop-filter: blur(10px);*/
}


/*.accordion-header {*/
/*	display: none;*/
/*}*/

.accordion-content {
	/*max-height: 550px;*/
	max-height:fit-content;
	/*overflow: hidden;*/
	transition: max-height.8s ease-out;
	flex: 1 1;


}
.accordion-item{
	display:flex;
	flex-direction:row-reverse;
	justify-content:space-evenly;
}

.accordion-item.active{
	/*max-height: 650px; !* Specify a max-height matching content size *!*/
	/*max-height:fit-content;*/
}


.home-page-content {
	height: auto !important;/* replace with your image's height */
	padding-top:0 !important;
	/*margin-top:0 !important;*/
	/*margin:40px 100px 30px 70px !important;*/
	border-radius:20px;
	/*background: rgb(134, 134, 134); !* 0.5 is the opacity, adjust to your liking *!*/
	backdrop-filter: blur(10px);
	background-size: contain !important;

}

.grid-view [data-col-seq="6"] {
	white-space: normal !important;
	word-wrap: break-word !important;
	width: 100px !important;
}

.my-actionColumn-icons{
	margin-right: 10px;
}
.complex-name {
	font-weight: bold; font-size: 26px;
}
.details-link {
	text-decoration: underline;
}
.building{
	background: #d7d8d9;
	font-weight: bold;
	margin-bottom: 1em !important;
	text-align: center;
	padding: 5px 15px 5px 15px;
	border-radius: 3px;

}

.tank-capacity {

}

.tank-sim{
	/*margin-left: 20px;*/
	flex:1 1;

}

.textGroup{
	font-size:1.2em;
	line-height: .7em;
	font-weight: bold;
}
.tankA{
	line-height: .7em;
	font-family: "Arial", serif;
}
.tankB{
	line-height: .7em;
	font-family: "Arial", serif;
}

.pagination{
	font-size: 2rem !important; /* Reduced from 2.25rem */
}


.content-header{
	padding:15px 8px 0 8px !important;
}

.sensor-error {
	display: flex;
	justify-content: center;
	padding:8px;
}
.sensor-error > p {

	padding-bottom: 0 !important;
	margin-bottom: 0;

}
/* Error lines -> alert chips */
.sensor-error{ padding: 0 12px 12px; }
.sensor-error p{
	margin:.5rem 0 0;
	font-size:.9rem; line-height:1.3;
}
.sensor-error span{
	display:block; padding:.6rem .75rem; border-left:4px solid var(--bad);
	background:#fff1f2; color:#b91c1c; border:1px solid #fecaca; border-radius:10px;
}

.user-view {
	padding-left: 5%; /* an adjustment to prevent user-view and image-container sticking to each other */
}
.tank {
	max-width: 100%; /* takes full space in .image-container, this is default behavior */
	/* or you may want to specify a fixed width eg. width: 150px or any other value you want */
	justify-content: right; /* Aligns the tank(s) to the center */
	padding-right: 5%;
}
.LastReadingDate{
	display: flex;
	flex-direction:column;
	align-items:center;
	color:black;
}

.tank-text-LastReadingDate{
	margin-bottom: -15px;
	font-weight:bold;
	font-size:18px;
}
.image-container {
	display: flex;
	align-items:center;
	width: 100%;
	/*justify-content: end;*/
	justify-content: center;
	/*padding-right: 5%;*/
	flex-direction: column-reverse; /* stacks tanks right-to-left */
}
.image-container-second {
	/*display: flex;*/
	/*flex: 1;*/
	flex-direction: row-reverse; /* stacks tanks right-to-left */
	min-width: 100%;
	padding-top:10px;
	padding-bottom:10px;
	justify-content:center;
	/*justify-content: center; !* Aligns the tank(s) to the center *!*/
}
.fixed-width {
	/* <---This value is used to set the width of the tanks in a round about way*/
	/* Choose a monospace font */
	font-family: 'Courier New', monospace;
	/* Choose the width that fits 10 characters, may need some trial and error */
	width: 15ch; /* <---This value is used to set the width of the tanks in a round about way*/
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; /* Optional, shows ... if the text is longer than the space */
}
.tank-depth{
	padding-top: 5px;
	font-size: 1.2rem;
}
.tank-depth2{
	padding-top: 5px;
	color: black;
	font-size: 1.2rem;
}
.tank-name {
	text-align: center;
	word-wrap: break-word;
	margin-top:10px;
	font-weight:bold;
}
.tank-text2{
	display: block;
	color: black;
	padding-top: 10px;
}
.tank-values{
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	font-weight: bold;
	margin-top:20px;
	color:black;
}
.tank-values2 {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	font-weight: bold;
	margin-bottom:30px;
	margin-top:10px !important;
}
.tank-text {
	display: block;
}
.pageHeader{
	padding: 40px 0 0 0;
}
.water-status{
	left:20px;
	font-size: 30px;
}
.welcomeId{
	width:100%;
	display:flex;
	align-items:start;
	justify-content: space-between;
	flex-wrap:wrap;
	padding: 30px 18px 0 0;
}
.text-cardFooter {
	font-size: 14px; /* adjust as needed */
	line-height: 1.4; /* adjust as needed */
	display: block; /* can be inline-block if you want the small tag to sit inline with other elements */
	width: 100%; /* adjust as needed */
	/*padding: 10px; !* adjust as needed *!*/
	padding-left: 10px;
	padding-right:10px;
	color: #4d4d4d !important;
	teXt-align:left !important;
}
.tk:before, .tk1:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%,  rgba(255, 255, 255, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
	pointer-events: none;
	border-radius: inherit; /* to ensure the overlay follows the border radius of the container */
}
#chartDiv{
	margin-bottom: 50px;
	border-bottom: black solid 1.5px;
}
.tk{
	/*Liquid Section*/
	position: relative;
	width: 80%;
	height: 125px;
	padding-top: 50px;
	margin: 0 auto;
	background:
			linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, 3)),
			linear-gradient(to top, #0b6fd7, #0b6fd7, #0b6fd7);
	border-radius: 100%/35px;
	border: 1.5px solid rgba(115, 115, 115, 0.69);
	text-align: center;
	z-index: 1;
	overflow: hidden;
	font-size:20px;
	margin-bottom: 10px;
}
.tk:after, .lq{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20%;
	z-index: -1;
}
.lq{
	background: rgb(194, 194, 194);
	/*to get a water surface affect I don't like it just a reminder*/
	/*background: linear-gradient(180deg,*/
	/*rgba(194, 194, 194, 1) 83%,*/
	/*rgba(194, 194, 194, 0.0) 100%);*/
	height: 80%;
	top: -2px;
	border-radius: 100%/30px;
	border-bottom: 1px solid #0021fa;
	color: #fff;
}
.tk:after{
	height: 22%;
	border-bottom: 1px solid #050505;
	border-radius: 100%; /*makes circle at top*/
}
.tk1{
	/*Liquid Section*/
	position: relative;
	width: 80%;
	height: 125px;
	padding-top: 50px;
	margin: 0 auto;
	background:
			linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .3) 95%, rgba(255, 255, 255, 3)),
			linear-gradient(to top, #0b6fd7, #0b6fd7, #0b6fd7);
	/*background-image:*/
	/*		url('../images/v3060052.jpg'),*/
	/*		linear-gradient(to top, #0b6fd7, #0b6fd7, #0b6fd7);*/
	/*background-repeat: no-repeat;*/
	/*background-size: cover;*/

	border-radius: 100%/35px;
	border: 1.5px solid rgba(115, 115, 115, 0.69);
	text-align: center;
	z-index: 1;
	overflow: hidden;
	font-size:20px;
	margin-bottom: 10px;
}
.tk1:after, .lq1{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 20%;
	z-index: -1;
}
.lq1{
	background: rgb(194, 194, 194);
	/*to get a water surface affect I don't like it just a reminder*/
	/*background: linear-gradient(180deg,*/
	/*rgba(194, 194, 194, 1) 83%,*/
	/*rgba(194, 194, 194, 0.0) 100%);*/
	height: 80%;
	top: -2px;
	border-radius: 100%/30px;
	border-bottom: 1px solid #0021fa;
	color: #fff;
}
.tk1:after{
	height: 22%;
	border-bottom: 1px solid #050505;
	border-radius: 100%; /*makes circle at top*/
}
.column {
	column-width: min-content;
}
.center {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: middle;
}
.hdCentered{
	text-align: center;
	vertical-align: middle;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	word-wrap: normal;
	color: #000000;
	background-color: #0287cf; /*#3c6ca1;*/
	/*color: white;*/
	border-bottom: #000000 solid 1.5px;
	border-top: #000000 solid 1.5px;
}
.cardWrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
	width: 100%;
}
.card1{
	flex-grow: 1 !important;
	color: #fff !important;
	/*min-width: 200px !important;*/
	max-width: 30% ;
	background-color: #ffffff;
	/*border: 20px outset  #0288D1  !important;*/
	box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2)  !important;
	/*border-left: .5px outset #afafaf !important;*/
	margin-bottom: 30px;
	border-radius: 5px !important;
	padding-top:4px;
	border-top:#0287cf solid 8px;
}
.card2{
	flex-grow: 1 !important;
	color: #fff;
	/*min-width: 200px!important;*/
	max-width: 30%;
	background-color: #ffffff;
	/*border: 20px outset  #0288D1;*/
	box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2);
	margin-bottom: 30px;
	border-radius: 5px !important;
	padding-top:4px;
	border-top:#0287cf solid 8px;
}
.card-header{
	/*background-color: #0288D1 !important;!*#3c6ca1;*!*/
	padding: 1px 1px 10px !important;
	color: black !important;
	/*height: 50px !important;*/
	margin-bottom: 8px !important;
	border-bottom: 0 !important;
	font-size: 1rem;
	font-weight: bold;
	height:60px;
	/*border-radius:5px !important;*/
}
.tankNameHeading{
	display:flex;
	justify-content:center;
	background-color:#0287cf;
	padding-top:10px;
	height:50px;
	font-size:18px;
}
.card-body{
	margin-left: 5px;
	margin-right: 5px;
	padding-top:0 !important;
	padding-right:2px !important;
	padding-left:2px !important;
}
.card-footer{
	padding-top: 10px;
	padding-bottom: 5px;
	padding-right:0 !important;
	padding-left:0 !important;
	left: 0 !important;
	font-weight: bold;
	/*color: #000;*/
	text-align:left;
	column-width: min-content;
}
.card-title{
	padding-top: 2px;
	margin-left: 15px  !important;
	padding-bottom: 5px;
	font-weight: Bolder !important;;
	font-size: 15px;
	color: black;
	clear: both;
}
/*------------------------------------------------------ */
table{
	padding-bottom: 5px;
	font-size: 15px;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
table th{
	padding-right: 5px;
	word-wrap: break-word;
}
.table1{
	padding-bottom: 5px;
	font-size: 15px;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
.table2{
	margin-top: 20px;
	font-size: 15px;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
.table1 th{
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	word-wrap: break-word;
	color:black;
	width: 50%;
	border-bottom:#01507d solid 3px;
	border-top:#01507d solid 3px;
}
.table2 th{
	padding-right: 5px;
	padding-left: 5px;
	margin-left: 5px;
	word-wrap: break-word;
	width: 50%;
	color:black;
	border-bottom:#01507d solid 3px;
	border-top:#01507d solid 3px;
}
.break-wordDeptOfInc{
	word-wrap: break-word;
}
.tblData{
	/*background-color: #01507d;*/
	color: #000000;
	padding-top: 10px;
	font-size: 18px;
	/*background-color: #0288D1;*/
	padding-bottom: 10px;
	border-bottom: #000000 solid 1.5px;
}
.tableSpacer{
	padding-top:10px;
}
/*------------------------------------------------------ */
.weatherBlock{
	flex-grow: 1;
	box-shadow: 10px 10px 8px 0 rgba(0, 0, 0, 0.2);
	/*min-width: 200px;*/
	max-width: 45%;
	/*border: 20px outset  #0288D1;*/
	background-color: #dbe7e7; /*#54a3f7;*/
	border-radius:5px !important;
	padding:5px 0 0 0;
	border-top:8px solid #0288d1;
	margin-bottom: 30px;
	/*	z-index:1; */
}
.cardWrapper2 .card1{
	/*min-width: 380px;*/
	max-width: 45%;
}
.cardWrapper2 .weatherBlock{
	/*min-width: 330px;*/
	max-width: 45%;
	justify-content: center;
}
.two_tanks {
	min-width: 57% ;
}
.cardWrapper2 {
	display: flex;
	flex-shrink:1;
	justify-content:space-around;
	flex-wrap: wrap;
	align-content: center;
	width: 100%;
}
.cardWrapper .weatherBlock{

	/*min-width: 175px;*/
	max-width: 30%;
	justify-content: center;
}
.accordion-header {
	display: none !important;
}
/*------------------------------------------------------ */
@media screen and (max-width: 992px) {
	.accordion-header {
		display: block !important;
	}
	.two_tanks {
		/*min-width: 37% ;*/
	}
}
@media screen and (max-width: 873px){
	.cardWrapper2 .weatherBlock {
		margin-left: 0;
		max-width: 90% !important;
	}
	.cardWrapper .weatherBlock{
		margin-left: 0;
		max-width: 90% !important;
	}
	.cardWrapper2 .card1 {
		max-width: 90% !important;
		margin-bottom: 10px;
	}
	body {
		width: 100%; /* Or whatever width you want to set */
		margin: 0 auto; /* This centers your webpage if the screen is wider than 1000px */
	}
	.tank-sim{
		display:flex;
		flex-direction:column;
	}
	.accordion-button {
		/*display: flex;*/
		/*align-items: center;*/
		padding:5px 10px 5px 10px;
		/*overflow-anchor: none;*/
		/*transition: var(--bs-accordion-transition);*/
		transition: max-height 1s ease-out;
		/*justify-content: space-around;*/
		/*white-space: nowrap;*/
		font-weight: bolder;
		font-size: 2em;
		border-radius: 4px;
		background-color: #5e5d5d !important;
		color: white !important;
		text-align: center;
	}
	.accordion-content {
		max-height: 0;
		overflow:scroll;
		flex:1 1;
	}
	.accordion-item.active .accordion-content {
		/*max-height: 550px;*/
		max-height:fit-content;
	}
	.cardWrapper{
		display: flex;
		justify-content:space-between;
		flex-direction: row;
	}
	.accordion-item{
		display:flex;
		flex-direction:column-reverse;
		justify-content:center;
		align-items: stretch;
		border:none;
		flex: 1 1 auto;
	}
	.tank-sim{
		display:flex;
		justify-content:center;
		align-items: center;
	}
}
.heading_right {
	/*display: flex;*/
	/*flex-direction: row-reverse;*/
	/*align-items: center;*/
	width: 100%;
	text-align:center;
}
@media screen and (max-width: 768px) {
	.content-container{
		display: flex; /* This allows for the two child divs side by side */
		flex-wrap: wrap-reverse !important;/* Add this */
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		justify-content: center;
	}
	.two_tanks > div {
		display: flex; /* Arrange tanks vertically */
		flex-direction: column; /* Arrange tanks vertically */
		justify-content: flex-end;
		margin-right: 1px;
	}
	.content-wrapper {
		display: flex;
		justify-content: space-around;
	}
	.cardWrapper {
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	.cardWrapper .card1 {
		max-width: 90%;
		margin-bottom: 10px;
	}
	.cardWrapper .card2 {
		max-width: 90%;
		margin-bottom: 10px;
	}
	.cardWrapper2 .card2 {
		max-width: 80%;
		margin-bottom: 10px;
	}
}
/* Styles for screens smaller than 600px */
@media screen and (max-width: 576px) {
	.tank {
		/*max-width: 55%; !* takes full space in .image-container, this is default behavior *!*/
		/* or you may want to specify a fixed width eg. width: 150px or any other value you want */
		justify-content: right; /* Aligns the tank(s) to the center */
		padding-right: 5%;
		align-items: center;
	}
	.tank-status-heading h1{
		/*font-size: 10px; !* Adjust this to the size you want *!*/
		font-weight:bold;
		width:100%;
		display:flex;
		flex-direction:row;
		justify-content: center;
	}
	.tank-status-heading{
		padding: 0 0 10px 0;

	}
	body {
		width: 100%; /* Or whatever width you want to set */
		margin: 0 auto; /* This centers your webpage if the screen is wider than 1000px */
	}
	.user-view h4, .user-view h5, .user-view h6, .user-view p {
		font-size: smaller; /* Decrease font sizes for small screens */
	}
	.fixed-width {
		/* <---This value is used to set the width of the tanks in a round about way*/
		/* Choose a monospace font */
		font-family: 'Courier New', monospace;
		/* Choose the width that fits 10 characters, may need some trial and error */
		width: 15ch; /* <---This value is used to set the width of the tanks in a round about way*/
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis; /* Optional, shows ... if the text is longer than the space */
	}
	.image-container {
		display: flex;
		flex-shrink: 1;
		width: 100%;
		/*padding-right: 4%;*/
		justify-content:space-around;
		align-items: center;
		text-align:center;
		flex-direction: column-reverse;
	}
	.image-container-second {
		margin-right: 0;
	}
}
.wrapper{
	background-color: #ffe0e1;
}
/* =======================
   THEME TOKENS
   ======================= */
:root{
	--brand:#0b6fd7;
	--brand-2:#7f6000;
	--bg:#f8fafc;
	--card:#ffffff;
	--ink:#0f172a;
	--muted:#64748b;
	--line:#e2e8f0;
	--ok:#16a34a;
	--warn:#f59e0b;
	--bad:#ef4444;
	--shadow:0 8px 20px rgba(2, 8, 23, .06);
	--radius:16px;
}
/* Page frame */
.welcomeId{ row-gap: 12px; }
body{ background: var(--bg); }
/* Top “Live Updates” + header area */
.live-button{
	background:#ef4444; border:0; color:#fff; font-weight:800;
	border-radius:999px; padding:.55rem 1rem; letter-spacing:.02em;
	box-shadow:0 4px 12px rgba(239,68,68,.2);
}
.welcomeId h5{ color:var(--ink); margin:0.25rem 0; }
.welcomeId h5 b{ color:#111827; }

@media (max-width: 1199px){
	.cardWrapper, .cardWrapper2{ grid-template-columns: 1fr; }
}
/* Gauge area spacing */
.visual-toggle{ padding: 12px 12px 0; }
.gauge-wrap{ max-width: 260px; margin: .5rem auto 1rem; }

/* Segmented switch (unchanged API, nicer tap targets) */
.segmented{ gap:4px; padding:4px; border-radius:999px; background:#fff; box-shadow: var(--shadow); }
.segmented .seg{ padding:.5rem 1.1rem; font-weight:700; color:var(--muted); }
.segmented .seg.is-active{ background:var(--brand); color:#fff;}

	/* Weather column */
	.weatherBlock{
		background:var(--card);
		border:1px solid var(--line);
		border-radius:var(--radius);
		box-shadow:var(--shadow);
		padding: 8px;    /* to give the iframe/widget breathing room */
	}
	.weatherBlock iframe, .weatherBlock > div{ width:100%; }

	/* Tiny utility: align titles to same height on large screens */
	@media (min-width:1200px){
		.card1 .card-header, .card2 .card-header{ min-height:56px; display:flex; align-items:center; justify-content:center; }
	}
	/* Add breathing room below the toggle */
	.toggle-wrapper {
		margin-bottom: 12px; /* adjust to taste */
	}
	/* make the header row the positioning context */
	.welcomeId { position: relative; }
	/* desktop/tablet: pin toggle to far right, align with Last Updated */
	@media (min-width: 768px){
		.toggle-abs-md{
			position: absolute;
			right: 12px;       /* match the left inset of your date; tweak if needed */
			top: 0;            /* aligns with the baseline of the date */
			padding-bottom: 12px; /* breathing room above the cards below */
		}
	}
	/* mobile: drop the toggle under the date and left-align */
	@media (max-width: 767.98px){
		.toggle-abs-md{
			position: static;     /* back into normal flow */
			display: inline-flex; /* keeps the pill look */
			margin-top: .25rem;   /* a little gap under the date */
		}
	}
.live-button { margin-right: .5rem; }
.etank-global-toggle { margin-left: .5rem; }
/* ===============================
   INDEX PAGE ONLY: layout fixes
   Targets elements inside .vw-customer-status-res2-index
   =============================== */
/* 0) Base: keep the index page content nicely centered */
.vw-customer-status-res2-index{
	/*max-width: 560px;               !* same “phone card” width we used *!*/
	margin-left: auto;
	margin-right: auto;
	padding-left: 14px;
	padding-right: 14px;
}

/* 1) Center the two tanks block on all sizes */
.vw-customer-status-res2-index .image-container{
	display: flex !important;
	flex-direction: column-reverse;         /* phone/tablet: vertical stack */
	align-items: center;            /* ← centers the gauges/tanks */
	gap: 16px;
}
/* free the children so they can shrink/center */
.vw-customer-status-res2-index .two_tanks{
	/*width: auto !important;*/
	/*max-width: 100%;*/
	/*min-width: 0;*/
}
/* 1a) between 768px–991px it was drifting left — force centering */
@media (min-width: 768px) and (max-width: 991.98px){
	/*.vw-customer-status-res2-index{ max-width: 640px; } !* a touch wider is okay *!*/
	.vw-customer-status-res2-index .image-container{
		align-items: center;          /* keep centered in this band */
	}
}

/* 2) Small screens: give sort buttons breathing room + allow wrap */
.vw-customer-status-res2-index .etank-rtr .toolbar{
	flex-wrap: wrap;
}
.vw-customer-status-res2-index .etank-rtr .sort-group{
	display: flex; flex-wrap: wrap; gap: 8px;
}
@media (max-width: 580px){
	.vw-customer-status-res2-index .etank-rtr .sort-group .btn{
		margin: 0;                    /* gap handles spacing */
		flex: 1 1 auto;               /* they can grow to two lines if needed */
	}
}

/* 3) ≥992px: keep a vertical stack but flip order (Main on top, Reserve below)
      Your DOM is Reserve then Main; column-reverse displays Main first. */
@media (min-width: 992px){
	.vw-customer-status-res2-index{
		/*max-width: 720px;             !* a comfortable desktop column *!*/
	}
	.vw-customer-status-res2-index .image-container{
		flex-direction: column-reverse;  /* Main above Reserve */
		align-items: center;
	}
}

/* Gauges stay fluid & centered */
.vw-customer-status-res2-index .gauge-wrap{
	position: relative;
	width: 100%;
	max-width: 360px;
	margin: .25rem auto 1rem;
}
.vw-customer-status-res2-index .gauge-wrap canvas{
	display: block;
	width: 100% !important;
	height: auto !important;
}
/* Scope to the index page only */
.vw-customer-status-res2-index .tank-values2{
	position: relative;
	width: 100%;
	max-width: 360px;
	margin: .25rem auto 1rem;                /* center the sim block */
}
/* Tank “capsule” size ≈ gauge canvas (260×180 on phones, up to 360 wide) */
.vw-customer-status-res2-index .tank-values2 .tk,
.vw-customer-status-res2-index .tank-values2 .tk1{
	/*width: 100%;*/
	/*max-width: 360px;*/
	/*height: 180px;                  !* match gauge height *!*/
}
/* Water surface inside the sim must follow the new height */
.vw-customer-status-res2-index .tank-values2 .lq,
.vw-customer-status-res2-index .tank-values2 .lq1{
	/*height: 80%;                    !* keep your existing visual ratio *!*/
}
/* Tighten typography in the right-hand text column */
.vw-customer-status-res2-index .user-view p{
	margin: 6px 0;
	line-height: 1.28;
	font-size: 0.97rem;
}
/* Prevent ugly mid‑word breaks; allow natural wrapping at spaces */
.vw-customer-status-res2-index .user-view,
.vw-customer-status-res2-index .user-view p,
.vw-customer-status-res2-index .user-view a{
	word-break: normal;
	overflow-wrap: anywhere; /* lets long URLs/IDs break nicely without hyphenating common words */
	hyphens: auto;
}

/* Keep short labels on one line where possible */
.vw-customer-status-res2-index .complexName,
.vw-customer-status-res2-index .buildingName,
.vw-customer-status-res2-index .dateUpdated,
.vw-customer-status-res2-index .tank-name,
.vw-customer-status-res2-index .tank-depth{
	white-space: nowrap;
}

/* Align the “height/value + unit” overlays cleanly under the sim */
.vw-customer-status-res2-index .tank-depth,
.vw-customer-status-res2-index .tank-text{
	display: block;
	text-align: center;
	margin-top: 6px;
	line-height: 1.25;
	color: #111827;
	font-weight: 600;
}

/* Slightly heavier headings; consistent spacing */
.vw-customer-status-res2-index .subHeading{
	margin: 14px 0 6px;
	border: 0;
	color: #0d6efd;
	font-weight: 700;
}

/* Buttons/links in the details column—avoid line crowding */
.vw-customer-status-res2-index .details-link{
	display: inline-block;
	margin: 4px 0 10px;
}

/* Mobile: give the two columns a bit more breathing room vertically */
@media (max-width: 576px){
	.vw-customer-status-res2-index .content-container{
		row-gap: 10px;
	}
}
/* Let accordion header buttons wrap on narrow screens */
@media (max-width: 820px){
	/* if you still have .no-wrap anywhere, neutralize it */
	.no-wrap { white-space: normal !important; }

	.accordion-header { overflow: visible; }  /* avoid clipping */

	/* Your header button uses .accordion-button + .btn (+ .btn-block) */
	.accordion-header .accordion-button.btn {
		white-space: normal;           /* allow multi-line */
		word-break: break-word;        /* safe wrap */
		overflow: visible;             /* no clipping */
		display: block;                /* full width (btn-block already does this) */
		width: 100%;
		text-align: center;            /* center the copy */
		line-height: 1.25;
		padding: .6rem .75rem;         /* a bit more vertical room */
		min-height: 44px;              /* comfortable tap target */
		font-size: 1.05rem;            /* slightly smaller on phones */
	}
}

/* Optional: tablet-ish tweak so it doesn’t feel huge just under 992px */
@media (min-width: 821px) and (max-width: 991.98px){
	.accordion-header .accordion-button.btn{
		white-space: normal;
		text-align: center;
		line-height: 1.25;
		padding: .55rem .85rem;
	}
}
/* Allow the accordion button text to wrap on phones/tablets */
@media (max-width: 992px){
	.accordion-header { overflow: visible; } /* avoid clipping */

	.accordion-header .accordion-button.btn {
		white-space: normal !important;  /* override your nowrap */
		word-break: break-word;
		overflow: visible;
		display: block;
		width: 100%;
		text-align: center;
		line-height: 1.25;
		padding: .6rem .75rem;
		min-height: 44px;
		font-size: 1.05rem;              /* optional: back off from 2em */
		justify-content: center;         /* undo space-around from earlier rule */
	}
}
/* Mobile / tablet: let the accordion button take the full width and wrap */
@media (max-width: 992px){
	/* Put header on its own row and stop it shrinking */
	.accordion-item{
		display:flex;
		flex-direction: column;          /* was row/row-reverse earlier */
		align-items: stretch;
	}

	.accordion-header{
		display:block !important;
		width:100%;
		flex:0 0 auto;                   /* don't let flexbox shrink it */
		min-width:0;                     /* allow children to wrap instead of clip */
		margin:0 0 .5rem;
		overflow:visible;
	}

	.accordion-header .accordion-button{
		width:100%;
		display:block;                   /* simpler than flex here */
		white-space: normal !important;  /* override any nowrap */
		word-break: break-word;
		text-overflow: clip;
		overflow: visible !important;
		line-height:1.25;
		padding:.6rem .75rem;
		font-size: clamp(1rem, 2.5vw, 1.15rem); /* avoid the giant 2em that forces clipping */
		text-align:center;
	}

	/* If you still have a utility like .no-wrap anywhere, neutralize it */
	.no-wrap{ white-space: normal !important; }

	.item-actions{
		justify-content:space-between;
	}
}

/* Safety net: never cap width inside the header */
.accordion-header, .accordion-header * { max-width: 100% !important; }


/* Always center the gauge when there’s one or many */
.block-view.view-gauge{
	display: flex;
	justify-content: center;      /* center the gauge-wrap horizontally */
}

.block-view.view-gauge .gauge-wrap{
	width: 100%;
	max-width: 360px;
	margin: .25rem auto 1rem;     /* keep your existing spacing */
	position: relative;
}

.block-view.view-gauge .gauge-wrap canvas{
	display: block;
	margin: 0 auto;               /* center the canvas inside gauge-wrap */
}

/*===========================================================================*/
/* === Action bar inside the right column === */
.item-actions{
	display:flex;
	align-items:center;
	justify-content:flex-start;  /* primary left, secondary right */
	gap:.75rem;
	padding:.5rem 0 1rem;
}

/* the two sides */
.item-actions .left,
.item-actions .right{
	display:flex;
	align-items:center;
	gap:.5rem;
}

/* keep buttons compact and consistent */
.item-actions .btn{
	display:inline-block;   /* defend against theme flex/block */
	height:auto;
	min-height:0;
	line-height:1.2;
	white-space:nowrap;
}

/* optional spacer to push right-side buttons on wide screens */
.item-actions .spacer{
	flex:1 1 auto;
}

/* --- mobile behavior --- */
@media (max-width: 768px){
	.item-actions{
		/*flex-direction:column;*/
		/*align-items:stretch;*/
		gap:.5rem;
	}
	.item-actions .left,
	.item-actions .right{
		justify-content:space-between;
	}
	.item-actions .btn{
		flex:1 1 auto;      /* grow to equal widths if room */
		text-align:center;
	}
	.item-actions .spacer{
		display:none;       /* no gap needed on mobile */
	}
	.item-actions{
		justify-content:space-between;
	}
}
/*===========================================================================*/
/* === set-location headder styling === */
	 /* Floating, translucent toolbar matching your rounded-pill look */

.locbar{
	position:absolute; top:8px; left:8px; right:8px;
	display:flex; align-items:center; gap:.75rem;
	padding:.5rem .75rem;
	background: rgba(255,255,255,.88);
	backdrop-filter: saturate(180%) blur(8px);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	z-index: 10;
}
.locbar__title{font-weight:600}
.locbar__spacer{flex:1 1 auto}
.locbar__helpers, .locbar__actions{display:flex; align-items:center; gap:.5rem; white-space:nowrap}
.locbar__helpers .btn{margin:0}
.locbar__force .form-check-input{margin-right:.35rem}

@media (max-width: 768px){
	.locbar{flex-direction:column; align-items:stretch; gap:.5rem}
	.locbar__helpers, .locbar__actions{flex-wrap:wrap; white-space:normal}
	.locbar__actions .btn{flex:1 1 auto; text-align:center}
}

/*======================================================================*/
/* Use the existing .dashboard grid to lay out columns */
.content-container.dashboard{ display:grid; grid-template-columns: 380px 1fr; gap:20px; }
@media (max-width:980px){ .content-container.dashboard{ grid-template-columns: 1fr; } }

/* Make the accordion header visible only where you want it (you already do this below 992px) */
@media (min-width: 993px){
	.accordion-header{ display:none !important; }
}

/* Remove the old decorative top border on the accordion wrapper */
.accordion{ border-top: none; }