html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-size: 10px;
  overflow: hidden;
}
section[role="region"] {
  position: absolute;
  top: 0;
  offset-inline-start: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background-color: #f4f4f4;
  overflow: hidden;
}
section[role="region"] > header {
  position: absolute;
}
section[role="region"] > div {
  position: absolute;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 5rem);
  overflow-y: scroll;
  will-change: scroll-position;
}
.explanation {
  padding: 0.5rem 3rem;
  font-style: italic;
  font-size: 1.4rem;
  color: #505859;
}
.description {
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
  -moz-hyphens: auto;
}
.description p,
.description a,
.description label {
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
}
.description label {
  padding: 0;
}
.description label span {
  height: auto;
  min-height: 6rem;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
  font-size: 1.7rem;
  line-height: 2.3rem;
  white-space: normal;
}
.description small {
  font-size: 1.7rem;
  color: #505859;
}
.hint label span {
  top: 2.9rem !important;
}
.hint span {
  line-height: 6rem;
}
.hint .explanation {
  font-style: normal;
  position: relative;
  margin-top: -2rem;
  padding: 0.5rem 4rem 1.3rem;
  padding-inline-start: 1.5rem;
  white-space: normal;
}
.hint > gaia-switch ~ .explanation,
.hint > label:not([for]) ~ .explanation {
  padding-inline-end: 8rem;
}
.hint .explanation[hidden] {
  display: none;
}
#update-device-name > section input {
  margin: 1rem 0;
}