@media screen and (min-width: 769px) {
  .rest-api-container, .docs-container {
    article {
      @include shadow($shadow-size);
      padding: 2% 3%;
      margin-bottom: 50px;
    }
  }
}


.rest-api-container, .docs-container {
  margin-top: $top-margin;

  ul ul {
    margin-bottom: 10px;
  }

  article {
    section.docs-header {
      margin-bottom: 35px;
      //border: 1px solid blue;

      .tags {
        margin-top: 20px;

        button {
          padding: 4px 8px;
          font-size: 14px;
        }
      }

      h1.docs-title {
        font-size: 40px;
      }

      span.docs-lead {
        margin: 20px 0 0 0;
        font-size: 16px;
        font-weight: lighter;
      }

      .tag-group {
        margin-top: 20px;

        button.tag-btn {

        }
      }
    }

    section.content {
      font-size: 1rem;

      li {
        margin-left: 22px;
        font-size: 100%;
      }

      h3 + h4 {
        margin-top: 20px;
      }

      h2:not(.cli-command-title) {
        margin-top: 35px;
      }

      h3:not(.cli-command-title) {
        margin-top: 35px;
      }

      a:hover {
        text-decoration: none;
      }

      h2, h3, h4, h5, h6 {
        & + p {
          margin-top: 15px;
        }
      }

      .topic {
        color: $sx-light-gray;
        background-color: $black;
        font-size: $code-font-size;
        font-family: $font-family-monospace;
        padding: 10px 0 10px 20px;
        border-radius: 0;

        .property { color: $sx-olive; }
        .cluster { color: $sx-red; }
        .namespace { color: $sx-7; }
        .t { color: $sx-magenta; }

        & + p {
          margin-top: 20px;
        }
      }

      .highlighter-rouge {
        font-family: $font-family-monospace;
      
        & + h2 {
          margin-top: 40px;
        }

        .highlight {
          padding: 15px;

          code {
            font-size: $code-font-size;
          }
        }
      }

      code.highlighter-rouge {
        color: $pulsar-blue;
        padding: .2rem .3rem;
        background-color: lighten($sx-light-gray, 22%);
        border-radius: 0;
      }

      em {
        margin-right: 2px;
      }

      img {
        margin: 20px 0;
        width: 100%;

        &[alt="Maven Central"] {
          width: 20%;
          margin: 0;
          padding: 0;
        }
      }

      img.inline {
        margin: initial;
        width: initial;
      }

      p {
        font-size: $docs-font-size;

        & + .highlighter-rouge {
          margin-top: 15px;
        }
      }

      h2, h3 {
        & + p {
          margin-top: 20px;
        }
      }

      table {
        margin: 25px 0;
        width: 100%;

        thead {
          font-size: 16px;
          border-bottom: 1px solid black;

          tr th {
            padding-right: $table-right-padding;
          }
        }

        tbody {
          tr {
            td {
              padding: 5px $table-right-padding 5px 0;
              overflow-x: scroll;

              code {
                font-size: inherit;
              }

              em {
                font-size: 12px;
                font-style: normal;
              }
            }

            & + tr {
              border-top: 1px solid #ddd;
              margin-top: 10px;
            }
          }
        }

        &.config {
          overflow-x: scroll;
          width: 100%;

          thead {
            tr {
              th {
                &:nth-child(2), &:nth-child(3)  {
                  padding-left: 10px;
                }
              }
            }
          }

          td, td p {
            font-size: 12px;
          }

          td {
            padding: 5px 0;

            &:nth-child(1), &:nth-child(2) {
              max-width: 225px;
              overflow: auto;
              white-space: nowrap;
            }

            &:nth-child(2), &:nth-child(3)  {
              padding-left: 10px;
            }

            & + td {
              border-left: 1px solid #ddd;
            }
          }
        }

        &.env-var {
          th {
            &:first-child {
              min-width: 200px;
            }
          }
        }
      }

      p + table, table + p, table + h4, h4 + .highlighter-rouge {
        margin-top: 20px;
      }

      .highlighter-rouge + table, .highlighter-rouge + h4 {
        margin-top: 20px;
      }
    }
  }
}