/***
===== APP LAYOUT =====
***/

.app-content{

  ._title-container{
    background: $color-white;
    border-bottom: 1px solid $color-title-container-border;

    ._heading{

      font-size: 1.2rem;
      font-weight: normal;
      color: $color-blue-gray;
      padding: 23px 27px 22px;
      margin-bottom: 0;

    }

  }

  ._content-container {
    background: $color-white;
    display: flex;

    ._sidebar {
      flex-basis: 30%;
      flex-shrink: 0;
      max-width: 300px;
      padding: $gutter * 1.5;
      background-color: $color-light-blue-gray;
    }

    ._content {
      flex-grow: 1;
      width: calc(100vw - 300px - 300px - 20px);
      min-height: calc( 100vh - 57px );

      @include fadeInContent;

      ._section{

        @include fadeInContent;

        background-color: $color-extra-light-gray;
        margin: $gutter;
        padding: $gutter $gutter * 1.5;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.06);

        &:first-child{
          padding-top: $gutter * 1.5;
        }

        &:last-child{
          margin-bottom: $gutter * 6;
        }

        .caret{
          @include defaultTransition;
          display: block;
          float: right;
          margin: 8px;
        }

        & > h3{
          @include _section_heading;
          margin-bottom: 0;

          & > .form-step-count{
            @include steps;
          }
        }

        & ._indented {
          padding-left: $gutter * 3;
        }

        &._active {

          .caret{
            @include defaultTransition;
            transform: rotate(180deg);
          }

          ._indented {
            padding-top: $gutter;
            padding-bottom: $gutter / 2;
          }
        }

      }

    }

  }

}