@charset "UTF-8";
a#settings-show-sections {
  background: #d6d6d6;
  color: #000;
  display: inline-block;
  padding: 3px 12px;
  border-radius: 3px;
  font-size: 0.9rem;
  float: right; }

#settings {
  padding: 0 1em; }
  #settings #settings-sections {
    margin: 0;
    padding: 0;
    list-style: none; }
    #settings #settings-sections.mobile-hidden {
      display: none; }
    #settings #settings-sections li a {
      display: block;
      color: #000;
      padding: 1em;
      background: #f7f7f7;
      border: 1px solid #ddd;
      border-top: none;
      cursor: pointer;
      user-select: none; }
      #settings #settings-sections li a.selected {
        font-weight: bold; }
      #settings #settings-sections li a:hover {
        background: #f0f0f0;
        text-decoration: none; }
      #settings #settings-sections li a:before {
        content: '»';
        float: right; }
  #settings #settings-contents h3 {
    margin: 1rem 0 0 0; }
    #settings #settings-contents h3 span {
      font-weight: normal; }
    #settings #settings-contents h3 i {
      margin-right: 0.25rem; }
  #settings #settings-contents > h4 {
    font-size: 1.1rem;
    margin: 2rem 0 0 0; }

@media screen and (min-width: 64em) {
  a#settings-show-sections {
    display: none; }

  #settings {
    max-width: 57rem;
    margin: 1.5rem auto 0 auto; }
    #settings #settings-sections {
      padding-right: 3rem;
      box-sizing: border-box; }
      #settings #settings-sections.mobile-hidden {
        display: block; }
      #settings #settings-sections > li:first-child {
        border-top: 1px solid #ddd; } }