#pageContainer {
width: 100%;
display: table;
clear: both;
/*border-bottom: 3px solid gray;  Add a thin vertical line */ 
}

#buttonContainer {
width: 100%;
display: table;
float:left;

}

.mqtt-button-container {
    position: relative;
    display: inline-block; /* Ensures the button and its overlay are grouped together */
}

.mqtt-button {
transition: background-color 0.3s ease; /* Smooth transition effect */
cursor: pointer;
position: relative;
cursor: pointer;
border-radius: 10pt;
overflow: hidden; /* Prevents text from spilling out of the button */
text-transform: uppercase; /* Converts text to uppercase */
font-weight:900;
display:inline-block;
}

.mqtt-button.gray {
background-color: #404040;
color: #808080;
margin-bottom:5px;
}

.mqtt-button.dark-on {
background-color: #008080;
color: #ffffff;
margin-bottom:5px;
}

.mqtt-button.dark-off {
background-color: #404040;
color: #808080;
margin-bottom:5px;
}	

.mqtt-button:disabled {
cursor: not-allowed;
opacity: 0.6; /* Visually indicate the button is disabled */
margin-bottom:5px;
}

.mqtt-button:hoverxxx {
cursor: pointer;
background-color: #ffffff;
opacity: 0.2;
}

.button-status {
position: absolute; /* Enables precise positioning inside the button */
bottom: 10px; /* Places the text exactly 5 pixels from the bottom of the button */
left: 10px; /* Horizontally centers the text */
font-size: 10pt; /* Adjust font size as needed */
color:  #e0e0e0; /* b0b0b0 Makes text more readable (adjust based on button color) */
pointer-events: none; /* Prevents interference with button clicks */
text-transform: uppercase; /* Converts text to uppercase */
font-weight:900;
z-index: 500;
}

.countdown-status {
position: absolute; /* Enables precise positioning inside the button */
bottom: 10px; /* Places the text exactly 5 pixels from the bottom of the button */
font-size: 10pt; /* Adjust font size as needed */
color: #e0e0e0; /* Makes text more readable (adjust based on button color) */
pointer-events: none; /* Prevents interference with button clicks */
text-transform: uppercase; /* Converts text to uppercase */
right:10px; /* Distance from the right edge */
font-weight:900;z-index: 500;
}

/* Ensure the parent contains the floated elements */
.data-Container {
color: #ffffff;
width: 30%;
float: left;
border-left: 2px solid orange; /* Add a thin vertical line */
padding-left: 4px; /* Add space between the line and the content */
font-weight:900;margin-top:10pt;
}

	.sensor-titles {
	font-size: 8pt;
	color: #b0b0b0;
	line-height:14pt;
	margin-top:0pt;
	}

	.sensor-data {
	font-size: 8.5pt;
	color: #e0e0e0;
	line-height:14pt;
	font-weight:900;
	}

a[href^="tel"] {
    pointer-events: none;
    cursor: default;
    color: inherit; /* Match surrounding text */
    text-decoration: none; /* Remove underline */
}

/* Ensure the parent contains the floated elements */
.smallgray {
background-color: #202020;
color: #b0b0b0;
font-size: 10pt;
float: left;
width: 90px;
padding: 4px;
border-radius: 4pt;
margin-top: -12pt;
cursor: pointer;
transition: background-color 1s ease;
}

  .collapsible-container {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #f1f1f1;
            border-top: 0px solid #ccc;
            box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.2);
            z-index: 1000;
            border-radius: 10pt;


        }

        .collapsible-btn {
            width: 100%;
            background-color: #000000;
            color: white;
            text-align: center;
            border: 1px solid orange;
            padding: 10px;
            font-size: 16px;
            cursor: pointer;
            border-radius: 10pt;
            margin-bottom:10pt;

        }

        .collapsible-content {
            display: none;
            padding: 5px;
            overflow: hidden; /* Disable scrolling */
            /*overflow-y: auto;*/
            max-height: 400px;
            border-radius: 10pt;
            margin-bottom:10pt;
       /*     border-bottom: 1px solid orange;*/
            }