Here is the CSS:
.thermkeypad{
min-width: 300px;
max-width: 500px;
width: 100%;
background-color: #000;
border-radius: 10px;
border: 4px solid #AAA;
left: 0;
top: 0;
white-space: nowrap;
padding: 3px;
margin-bottom: 10px;
}
.thermkeypad .thermkeypadRow {
width: calc(100% - 0px);
padding: 0px;
margin: 0px;
border-style: none;
padding: 0px;
text-align: center;
}
.thermkeypad .thermkeypadCell {
width: calc(25% - 10px);
padding: 0px;
margin: 0px;
border-style: none;
padding: 0px;
text-align: center;
display: inline-block;
vertical-align: middle;
}
.thermkeypad .adjustimg {
max-width: 100%;
min-width: 100%;
max-height: 100%;
min-height: 100%;
display: block;
}
.thermkeypad .adjustbtn {
width: 50%;
max-height: 30px;
margin: 0px 25% 0px 25%;
padding: 0px;
border: none;
outline: none;
display: block;
}
.thermkeypad button {
width: 90%;
border: 2px solid #AAA;
border-radius: 5px;
background-color: black;
outline: none;
}
.thermkeypad .LCDPNL_SP {
width: 50%;
background-color: #000;
border-radius: 10px;
color: #000;
border: 2px solid #AAA;
margin: 5px 25% 5px 25%;
color: white;
font-size: 1.25em;
/* display: inline-block; */
}
.thermkeypad .selected_mode {
background-color: #A00;
}
.thermkeypad .not_selected_mode {
background-color: #300;
}
And I do not have it is a json file. Sorry about that. If you want the timers to work, there is some rules that I use to make that work. Note that my HTML has all 3 units in it, so you may need to adjust as necessary.