.crowi { // {{{
  &.main-container { // {{{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    border: 0;
    border-top: solid $crowiTopBorderHeight $crowiHeaderBackground;
    border-image: linear-gradient(90deg,
      $crowiHeaderBackground,
      lighten(saturate(adjust-hue($crowiHeaderBackground, -60deg), 25%), 30%),
      lighten(saturate(adjust-hue($crowiHeaderBackground, 25deg), 25%), 40%),
      lighten($crowiHeaderBackground, 40%)
    ) 3;

    .v2-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    // TODO: move those kind of logic to components and styled-component
    // sm menu opened
    @include media-breakpoint-down(sm) {
      &.navigation-drawer-open {
        max-height: 100vh;
        overflow: hidden;
      }
    }

    .v2-crowi-header { // {{{
      z-index: 1040;
      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.4);
      background: #fff;
      height: $crowiHeaderHeight;
      color: #333;
      padding: 0;

      .crowi-navbar-brand {
        @include media-breakpoint-down(sm) {
          display: none;
        }
      }

      .crowi-menu-main {
        display: flex;
        flex: 1;
      }
      @include media-breakpoint-down(sm) {
        .crowi-menu-sm { // for moblie
          display: flex;
          align-items: center;
          margin-left: 1rem;
          margin-right: 1rem;
          > a {
            font-size: 1.1rem;
            cursor: pointer;
          }
        }
        .crowi-menu-md { // for pc
          display: none;
        }
      }
      @include media-breakpoint-up(md) {
        .crowi-menu-sm { // for moblie
          display: none;
        }
        .crowi-menu-md { // for pc
          display: flex;
        }
      }

      .crowi-navbar-brand {
        margin-left: 1rem;
        font-weight: 600;
        img {
          margin-right: 8px;
        }
      }

      .navbar-nav {
        padding-left: 1rem;
        padding-right: 1rem;
        color: $primary;
      }

      .nav-divider {
        border-right: solid 1px #ccc;
        margin-right: 10px;
        margin-left: 20px;
        height: 30px;
        margin-top: 6px;
      }

      .confidential {
        a {
          display: inline-block;
          border: dotted 1px #f00;
          color: #f00;
          font-weight: bold;
          padding: 7px;
        }
      }

      .dropdown-menu {
        border: none;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.2);
      }

      .header-user {
        .dropdown-item:active {
          background: inherit;
          color: inherit;
        }
        .dropdown-toggle::after {
          // don't show caret
          display: none;
        }
        .dropdown-item {
          a {
            display: block;
          }
        }

        .dropdown-menu-right {
          .picture {
            width: 48px;
            height: 48px;
          }

          .header-user-name {
            font-weight: 600;
          }
          .header-user-username, .header-user-email, .header-user-socialid {
            color: #777;
          }
        }

      }
    } // }}}

    .v2-contents-container {
      flex: 1;
      display: flex;
    }
  } // }}}
} // }}}

.crowi { // {{{
  &.main-container { // {{{
    .main {
      padding: 0; // cancel bootstrap padding

      .header-wrap {
        padding: 1em 1em 0 1em;
      }

      .content-main {
        padding: 1em;
      }
    }

    .layout-control { // {{{
      transition: .3s ease;
      -webkit-transition: .3s ease;
      position: fixed;
      display: block;
      text-align: center;
      right: 25%;
      bottom: 25px;
      padding: 5px 8px;
      border: solid 1px #ccc;
      border-right: none;
      background: $crowiAsideBackground;
      border-radius: 5px 0 0 5px;
      z-index: 1039;
      font-size: .8em;

      color: darken($link-color, 15%);

      &:hover {
        color: darken($link-color, 25%);
        background: darken($crowiAsideBackground, 10%);
        text-decoration: none;
        cursor: pointer;
      }

      @include media-breakpoint-down(sm) {
        display: none;
      }
    } // }}}

    .page-list {
      .page-list-link {
      }
      .page-list-meta {
        font-size: .9em;
        color: #999;
      }
    }

  } // }}}
} // }}}

@keyframes LoginScreenBackgroundGradients {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

.crowi.single.nologin { // {{{
  background: lighten($crowiHeaderBackground, 15%);
  background:
    linear-gradient(215deg,
      lighten($crowiHeaderBackground, 30%),
      lighten(saturate(adjust-hue($crowiHeaderBackground, 15deg), 25%), 10%),
      $crowiHeaderBackground
    ),
    linear-gradient(135deg,
      $crowiHeaderBackground,
      lighten(saturate(adjust-hue($crowiHeaderBackground, 15deg), 25%), 50%),
      lighten($crowiHeaderBackground, 20%)
    ),
    linear-gradient(335deg,
      lighten($crowiHeaderBackground, 60%),
      $crowiHeaderBackground,
      lighten(saturate(adjust-hue($crowiHeaderBackground, 10deg), 20%), 30%)
    )
  ;
  border-image: none;
  border-top: none;
  background-size: 100% 100%;
  @include media-breakpoint-up(md) {
    animation: LoginScreenBackgroundGradients 20s linear infinite;
    background-size: 200% 200%;

    @media (max-height: 823px) {
      animation: none;
    }
  }

  .v2-contents-container {
    align-items: center;
    justify-content: center;
  }

  .v2-single-page-container {
    padding: 2em;
    margin-top: calc(-66px - 2em);
    @media (max-height: 823px) {
      margin-top: 0;
      h1.register-page {
        display: none;
      }
    }

    @include media-breakpoint-up(md) {
      width: 560px;
    }
    @include media-breakpoint-down(sm) {
      padding: 1em;
      width: 100%;
    }
  }

  .installer-header {
    text-align: center;

    h1 {
      margin: 40px 0 40px;
      color: #fff;
      font-size: 1.2em;
    }
  }

  .main {
    margin: 0;
    padding: 0;
  }

  h1.login-page {
    color: #fff;
    font-size: 1.6em;
    padding: 10px;
    margin-bottom: 2em;
    text-align: center;
    text-shadow: 0px 1px 8px rgba(0,0,0,.2);
    line-height: 100%;
  }


  .login-dialog {
    position: relative;
    padding: 2em;
    background: #fff;
    box-shadow: 0 1px 40px 0 rgba(0,0,0,0.3);
    border-radius: 3px;

    form {
      margin-top: 10px;
      .input-group {
        margin-bottom: 10px;
      }
    }


    h2 {
      margin: 0 0 28px;
      font-size: 1.3em;
      text-align: center;
    }

    p.bottom-text {
      text-align: right;
      margin: 20px 0 0;
    }
  }


} // }}}

// Tablet
@include media-breakpoint-only(sm) {
  .crowi.main-container {
    .main {
      article  {
        .header-wrap.sps--blw {
          width: 100%;
        }

        header {
          .bookmark-link {
            font-size: 1.3em;
          }
          h1 {
            font-size: 1.4em;
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

// Smartphone
@include media-breakpoint-only(xs) {
  .crowi.main-container {
    .main {
      article {
        .header-wrap.sps--blw {
          h1 {
            font-size: 1.1em;
          }

          width: 100%;
          padding: 5px;
          box-shadow: 0 0px 2px #999;

          p.stopper {
            right: 20px;
          }
        }

        header {
          .bookmark-link {
            font-size: 1em;
          }
          h1 {
            font-size: 1.1em;
          }
        }
      }
    }
  }
}

// smartphone input size adjustment
@include media-breakpoint-down(md) {
  input[type=password], input[type=text], textarea {
    font-size: 1rem !important;
  }
}

// {{{ printable style
@media print {
  .crowi.main-container {
    padding: 30px;

    a:after {
      display: none !important;
    }
    .main {
      article header {
        border-bottom: solid 1px #666;
        h1 {
          font-size: 2em;
          color: #000;
        }
      }

      .revision-toc {
        float: none;
        font-size: .9em;
        border: solid 1px #aaa;
        border-radius: 5px;
        max-width: 100%;
        margin-bottom: 20px;

        .revision-toc-head {
          display: inline-block;
          float: none;
        }

        .revision-toc-content.collapse {
          display: block;
          height: auto;
        }
      }

      .meta {
        border-top: solid 1px #ccc;
        margin-top: 32px;
        color: #666;
      }
    }
  }
} // }}}
