#customcontrols {
  z-index: 40;
  position: fixed;
  left: 70px;
  bottom: 30px;
  text-align: center;
  font-size: 24px;
  visibility: hidden;
}

#customcontrols button {
  background: none;
  color: var(--r-link-color);
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  z-index: 40;
}

#customcontrols button:hover {
  color: var(--r-link-color-hover);
}

#customcontrols > ul {
  position: fixed;
  left: 54px;
  bottom: 64px;
  list-style-type: none;
  overflow: hidden;
  margin: 0;
  padding: 0;
  border: 1px solid var(--r-link-color);
  border-radius: 5px;
  padding: 10px;
  background-color: var(--r-background-color);
}

#customcontrols ul > li {
  margin: 0px 5px;
  padding: 0px 5px;
  float: left;
}

#customcontrols.collapsed #collapse-customcontrols,
#customcontrols.collapsed > ul {
  display: none;
}

#customcontrols:not(.collapsed) #expand-customcontrols {
  display: none;
}

@media only screen and (min-width: 500px) {
  #customcontrols > button {
    display: none;
  }
  #customcontrols > ul {
    bottom: 20px;
    border: none;
    background: none;
  }
}