#app .page { padding-bottom: 0; }
#app .sidebar { width: 15rem; }
#app .content:not(.custom) { max-width: 850px; }
#app .custom-block.tip, #app .custom-block.warning, #app .custom-block.danger { padding: 0.1rem 1rem; border-left-width: 0.2rem; }
#app blockquote { font-size: 15px; }
#app table, #app thead, #app tr { width: 100% }

#app {
  .badge {
    font-size: 12px;
  }
  .warning .custom-block-title {
    padding-left: 21px;
    color: #606273;
    background: url(https://gw.alicdn.com/tfs/TB1tbEwACzqK1RjSZFjXXblCFXa-16-16.svg) 0 5px no-repeat;
  }
  .danger {
    border-color: #FF6633;
    background-color: #FFF2EE;
    .custom-block-title {
      padding-left: 21px;
      color: #606273;
      background: url(https://gw.alicdn.com/tfs/TB1mwIBAwHqK1RjSZJnXXbNLpXa-16-16.svg) 0 5px no-repeat;
    }
  } 
  .tip {
    border-color: #00B4FF;
    .custom-block-title {
      padding-left: 21px;
      color: #606273;
      background: url(https://gw.alicdn.com/tfs/TB1nbAzApzqK1RjSZFoXXbfcXXa-16-16.svg) 0 5px no-repeat;
    }
  }
}

.theme-container.page-module-modal {
  table th:last-of-type {
    width: 15%;
  }
}

.theme-container.page-vue-in-weex {
  table th:first-of-type {
    width: 40%;
    & + th {
      width: 20%;
    }
  }
  table th:last-of-type {
    width: 40%;
  }
}

#app .demo-wrapper .content:not(.custom) {
  max-width: 1100px;
}

#app .demo-wrapper .page-nav {
  max-width: 1100px;
}

#app .demo-wrapper .content {
  h2, h3 {
    margin-top: -3.1rem;
    padding-top: 2rem;
    margin-bottom: 0;
  }
  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 40px -13px;
    li {
      margin-left: 13px;
      margin-right: 13px;
    }
  }
}

#app .help .page {
  padding-bottom: 0;
  padding-right: 0;
  .content {
    margin: 0;
    padding: 0;
    max-width: 10000px;
  }
  .page-edit {
    padding: 0;
  }
  .render-md p {
    margin: 0;
  }
}

#app .tool .page {
  padding-bottom: 0;
  padding-right: 0;
  .content {
    margin: 0;
    padding: 0;
    max-width: 10000px;
  }
  .page-edit, .page-nav, .license-wrap {
    display: none;
  }
}

#app .tool-ide .page {
  padding: 0;
  .content {
    margin: 0;
    padding: 0;
    padding-left: 15rem;
    max-width: 10000px;
  }
  .page-edit, .page-nav, .license-wrap {
    display: none;
  }
  h1 {
    display: none;
  }
}

#app .tool-kit .page {
  padding: 0;
  .content {
    margin: 0;
    padding: 0;
    padding-left: 15rem;
    max-width: 10000px;
  }
  img {
    width: 100%;
  }
  .page-edit, .page-nav, .license-wrap {
    display: none;
  }  
}

#app .noFooter .page {
  .page-edit, .page-nav, .license-wrap {
    display: none;
  } 
}

#app .community .page {
  .tag {
    background: rgb(234,249,255);
    color: #00b4ff;
    .content {
      padding: 0;
      & > *:first-child {
        margin-top: 0;
      }
    }
    .actions {
      color: #979A9C;
      font-size: .85em;
      margin-left: 10px;
    }
  }
  .vue-tags-input .input {
    border-radius: 4px;
    padding: 2px 4px;
    ul {
      line-height: 1;
    }
    .new-tag-input {
      min-width: 300px;
      height: 14px;
    }
  }
}

.md h2 {
  padding-top: 0;
}
.md pre {
  background-color #f8f9fb;
  padding: 1rem;
  code {
    display: block;
    color: #828282;
    width: 100%;
    overflow: auto; 
  }
}

@media screen and (max-width: 1700px)
  #app .demo-wrapper .content:not(.custom)
    margin-left 13rem

  #app .demo-wrapper .page-nav
    margin-left 13rem

@media (max-width: 719px)
  #app .demo-wrapper .content:not(.custom)
    margin-left 0

  #app .demo-wrapper .page-nav
    margin-left 0

@media screen and (max-width: 1400px) 
  #app .tags .content:not(.custom)
    margin-left 0

//
// Pagination (multiple pages)
// --------------------------------------------------
.pagination-wrap {
  text-align: center;
}
.pagination {
  display: inline-block;
  margin: 20px auto;
  border-radius: 4px;
  overflow: hidden;

  > li {
    display: inline; // Remove list-style and block-level defaults
    > a,
    > span {
      position: relative;
      float: left; // Collapse white-space
      padding: 6px 12px;
      line-height: 1.4;
      text-decoration: none !important;
      color: #00b4ff;
      background-color: #fff;
      border: 1px solid #ddd;
      margin-left: -1px;
    }
    &:first-child {
      > a,
      > span {
        margin-left: 0;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
      }
    }
    &:last-child {
      > a,
      > span {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
      }
    }
  }

  > li > a,
  > li > span {
    outline: none;
    &:hover,
    &:focus {
      z-index: 3;
      color: #23527c;
      background-color: #eee;
      border-color: #ddd;
    }
  }

  > .active > a,
  > .active > span {
    &,
    &:hover,
    &:focus {
      z-index: 2;
      color: #fff;
      background-color: #00b4ff;
      border-color: #ddd;
      cursor: default;
    }
  }

  > .disabled {
    > span,
    > span:hover,
    > span:focus,
    > a,
    > a:hover,
    > a:focus {
      color: #777;
      border-color: #ddd;
      cursor: not-allowed;
    }
  }
}