/* We need to add display:inline in order to align the '>>' of the 'read more' link */
.post-excerpt p {
  display: inline; }

*,
*::before,
*::after {
  box-sizing: border-box; }

.docs {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column-reverse;
  margin: 0; }

@media (min-width: 768px) {
  .docs {
    flex-direction: row;
    margin: 25px 0; } }
.docs__article-wrap {
  flex: 2;
  overflow-y: auto;
  background-color: #fff;
  box-shadow: none; }

@media (min-width: 768px) {
  .docs__article-wrap {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } }
.sidenav {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  overflow-y: auto;
  border-top: 1px solid #d3d3d3; }

.sidenav__list {
  width: 100%;
  margin: 0;
  padding: 40px 16px;
  list-style-type: none; }
  .sidenav__list > li {
    margin-bottom: 8px; }
    .sidenav__list > li > a:hover {
      color: #0785ce; }

@media (min-width: 768px) {
  .sidenav {
    border-right: 1px solid #d3d3d3;
    border-top: none; }

  .sidenav__list {
    width: 100%; } }
.sidenav__link {
  display: block;
  width: 100%;
  padding: 8px;
  margin: 0;
  border-radius: 5px;
  color: #505868;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none; }
  .sidenav__link:hover {
    background-color: #eee;
    text-decoration: none; }
  .sidenav__link.sidenav__link--selected {
    background-color: rgba(45, 156, 219, 0.1);
    color: #05659d; }

.article {
  width: 90%;
  max-width: 760px;
  padding: 16px; }
  .article img {
    max-width: 100%;
    margin: 8px 0;
    padding: 4px;
    border: 1px solid #d3d3d3;
    border-radius: 5px; }
  .article h1 {
    font-size: 3.6rem;
    font-weight: 600;
    color: #303848;
    margin: 0;
    margin-bottom: 1.4rem; }
  .article h2 {
    font-size: 2rem;
    font-weight: 600;
    color: #303848;
    margin: 0;
    margin-bottom: 1.2rem; }
  .article h3 {
    font-size: 1.6rem;
    font-weight: 600;
    color: #303848;
    margin: 0;
    margin-top: 1.4rem;
    margin-bottom: 1.1rem; }
  .article h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #303848;
    margin: 0;
    margin-top: 1.2rem;
    margin-bottom: 1rem; }
  .article h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #303848;
    margin: 0;
    margin-top: 1rem;
    margin-bottom: 0.8rem; }
  .article p {
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.7;
    color: #505868;
    margin: 0;
    margin-bottom: 1rem; }
  .article time {
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: #9098a8;
    margin: 0;
    margin-bottom: 1.2rem; }
  .article a {
    color: #05659d;
    text-decoration: underline;
    cursor: pointer; }
    .article a:visited {
      color: #03456c; }
    .article a:hover {
      color: #0785ce; }
  .article ul,
  .article ol {
    margin-bottom: .7rem;
    font-size: .9375rem;
    color: #505868; }
  .article li {
    font-size: .9375rem;
    line-height: 1.7;
    margin-bottom: .7rem; }
  .article code {
    font-size: .9375rem;
    line-height: 1.7;
    padding: 0.3rem;
    color: #d72b3f;
    background-color: #f6f8fA;
    border: 1px solid #eee;
    border-radius: 2px; }
  .article pre {
    padding: 1.6rem;
    margin: 1rem 0 1.6rem;
    background-color: #f6f8fA;
    border-radius: 5px;
    overflow-x: auto; }
    .article pre code {
      padding: 0;
      border: 0;
      background-color: transparent;
      color: #505868; }

@media (min-width: 768px) {
  .article {
    padding: 40px 40px 320px; } }