html, body {
  margin: 0;
  padding: 0;
  font-size: 10px;
  background-color: white;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

/* for wallpaper */
#wallpapers {
  position: absolute;
  overflow: auto;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--background, #26272c);
}

.wallpaper {
  background-size:cover;
  background-repeat: no-repeat;
  border-bottom: 0.1rem solid #000000;
  border-right: 0.1rem solid #000000;
  position: relative;
  overflow: hidden;
  height: 15.9rem;
  float: left;
  width: 33%;
}

#wallpapers .wallpaper:nth-child(3n) {
  border-right: none;
}

/* for ringtones */
ul {
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

ul li {
  -moz-box-sizing: border-box;
  position: relative;
  min-height: 6rem;
  margin: 0 1.5rem;
  border-bottom: 0.1rem solid #e6e6e3;
  color: #000;
}

ul li label:not([for]) {
  background: none;
}

ul li > a,
ul li > span {
  display: block;
  text-decoration: none;
  outline: 0;
  color: #000;
  -moz-box-sizing: border-box;
  height: 6rem;
  font-size: 1.9rem;
  line-height: 6rem;
  padding: 0 1.5rem;
}

ul li.disabled > a {
  color: #797e80;
  opacity: 0.6;
  pointer-events: none;
}

/* text ellipsis */
ul li > * {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/******************************************************************************
 * Boolean inputs
 */

gaia-radio label {
  /* TODO: Currently this app uses the media theme, which expects a dark list and light labels.
     That would make the label invisible, so instead we need to use !important to override the scoped style of the component.  */
  color: #222 !important;
}

/* Setting panels: full-size <section role="region"> blocks */
section[role="region"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: url(images/document_bg.png);
  overflow: auto;
}

/**
 * Headers should not scroll with the rest of the page
 */
section[role="region"] > header {
  position: absolute;
}

#ringtones {
  position: absolute;
  top: 5rem;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: calc(100% - 5rem);
  font-size: 1.9rem;
}