/* Place the bot-navbar at the bottom of the page, and make it stick */
.bot-navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  display: inline-flex;
  overflow-x: auto;
  white-space: nowrap;
}



body {
  background-color: #cccccc;
}
/* Style the links inside the navigation bar */
.navbar-btn {
  float: right;
}
.navbar {
  /* display: block; */
  background-color: rgb(74, 74, 94);
}

.bot-navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

@media (min-width: 801px) {
  .mn-btn {
    height: 110px;
    width: 110px;
    margin: 8px;
  }
}
@media (max-width: 801px) {
  .mn-btn {
    height: 110px;
    width: 28%;
    margin: 8px;
  }
}

.sb-btn {
  height: 110px;
  width: 110px;
  margin: 8px;
}

/* Change the color of links on hover */
.bot-navbar a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.bot-navbar a.active {
  background-color: #04aa6d;
  color: white;
}

.template-1 {
  display: grid;
  /* grid-template-columns: 30% 30% 30%;
  grid-template-rows: 125px 125px 125px; */
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "on-btn bright-btn status"
    "off-btn dim-btn ."
    "brightness-slider brightness-slider brightness-slider";
}

.template-3 {
  display: grid;
  /* grid-template-columns: 30% 30% 30%;
  grid-template-rows: 125px 125px 125px; */
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "on-btn off-btn status"
    "on-btn-2 off-btn-2 status-2"
    "brightness-slider brightness-slider brightness-slider";
}
.template-5 {
  display: grid;
  /* grid-template-columns: 30% 30% 30%;
  grid-template-rows: 125px 125px 125px; */
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "btn-a btn-b status"
    "btn-c btn-d none"
    "btn-e btn-f none"
    "btn-g btn-h none";
}

.btn-a {
  grid-area: btn-a;
}
.btn-b {
  grid-area: btn-b;
}
.btn-c {
  grid-area: btn-c;
}
.btn-d {
  grid-area: btn-d;
}
.btn-e {
  grid-area: btn-e;
}
.btn-f {
  grid-area: btn-f;
}
.btn-g {
  grid-area: btn-g;
}
.btn-h {
  grid-area: btn-h;
}

.on-btn {
  grid-area: on-btn;
}

.off-btn {
  grid-area: off-btn;
}

.on-btn-2 {
  grid-area: on-btn-2;
}

.off-btn-2 {
  grid-area: off-btn-2;
}

.brightness-slider {
  grid-area: brightness-slider;
  margin-right: 100px;
}

.bright-btn {
  grid-area: bright-btn;
}

.dim-btn {
  grid-area: dim-btn;
}

.status {
  grid-area: status;
  height: 25px;
  width: 25px;
  background-color: rgb(239, 243, 10);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  /* left: 100px; */
}

.status-button {
  position: absolute;
  right: -12px;
  top: -30px;
}
.status-2 {
  grid-area: status-2;
  height: 25px;
  width: 25px;
  background-color: rgb(239, 243, 10);
  border-radius: 50%;
  display: inline-block;
  position: relative;
  /* left: 100px; */
}
.status-off {
  background-color: #bbb;
}
.status-on {
  background-color: green;
}
.status-pend {
  background-color: blue;
}
#log {
  padding-bottom: 80px;
  width: 100%;
}

.Template-5-status0 { grid-area: 1 / 1 / 2 / 2; }
.Template-5-status1 { grid-area: 1 / 3 / 2 / 4; }
.Template-5-status2 { grid-area: 2 / 1 / 3 / 2; }
.Template-5-status3 { grid-area: 2 / 3 / 3 / 4; }
.Template-5-status4 { grid-area: 6 / 1 / 6 / 2; }
.Template-5-status5 { grid-area: 6 / 3 / 6 / 4; }
.Template-5-status6 { grid-area: 7 / 1 / 7 / 2; }
.Template-5-status7 { grid-area: 7 / 3 / 7 / 4; }

.Template-5-DeviceButton {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  margin-top: -3px;
}


.Template-5-DeviceName {
  position: absolute;
  top: 50%; /* Centers vertically */
  left: 50%; /* Centers horizontally */
  transform: translate(-50%, -50%); /* Adjust for perfect centering */
  z-index: 2; /* Brings this div above the grid */
  text-align: center; /* Optional: Center text inside the div */
  /* color: #fff; */
}