html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.htmx-indicator{
  display:none;
}
.htmx-request .htmx-indicator{
  display:inline;
}
.htmx-request.htmx-indicator{
  display:inline;
}

.door .btn {
  width: 200px;
  font-size: 18px;
  margin: 4px 10px;
}

.door .btn.htmx-request .label {
    display: none !important;
}

button.open {
  background-color: #4caf50;
  color: white;
}

button.open:hover {
  background-color: #3fdd40;
}

button.toggle {
  background-color: wheat;
  color: black;
}

button.toggle:hover {
  background-color: rgb(248, 219, 164);
}

button.stop {
  background-color: #cc2115;
  color: black;
}

button.stop:hover {
  background-color: #ff1105;
}

button.close {
  background-color: orange;
  color: black;
}

button.close:hover {
  background-color: #ffbb11;
  color: black;
}

.door img {
  width: 100px;
}

.door .warning {
  color: red;
  font-weight: bold;
}

.control {
  margin-top: 8px;
}