.app-header{
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: $nav-header-height;
  padding: $gutter / 2 $gutter + 10;
  background-color: $color-light-gray;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.23);
  z-index: $z-nav-header;

  .app-header-left, .app-header-right{
    display: flex;
    align-content: flex-end;
  }

  .app-header-left{
  }
  .app-header-right{

    & > *{
      margin-left: $gutter / 2;
    }
  }

  .app-logo{
    height: 100%;
    max-height: calc(#{$nav-header-height} - 20px);
    margin-top: 1px;
  }

  .app-profile{
    height: 100%;
    max-width: 50px;

    img{
      height: 100%;
    }
  }

  .app-notification{
    height: 100%;
    width: 50px;
    background: $color-blue-gray;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    @include fadeInContent;

    i{
      color: $color-white;
    }

    .app-notification-list {
      position: absolute;
      width: 300px;
      background: white;
      right: 0;
      top: 55px;
      border-radius: 3px;
      z-index: $z-mini-notification;
      font-size: 14px;
      box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.06);

      :before{
        content: '';
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #ffffff;
        margin: 0 0 15px 0;
        position: absolute;
        top: -5px;
        right: 17px;
      }

      ul {
        padding: 0;
        margin: 0;

        li {
          list-style: none;
          padding: 10px 20px 10px 32px;
          line-height: 1.5em;
          position: relative;

          :hover {
            background: #f3f3f3;
          }

          :first-child, :last-child{
            padding-top: $gutter;
          }

          &.unread-message:before {
            height: 8px;
            width: 8px;
            background: #dc3535;
            position: absolute;
            left: 12px;
            margin-top: 1px;
            top: 44%;
            transform: translateY(-50%);
            border-radius: 50px;
            content: '';
          }
        }
      }

      .app-notification-backdrop{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }
  }
  /* end app-notification */

  @include mediaQuery(max, iPad){
    padding: $gutter/2 10px;
    align-items: center;

    .app-logo{
      max-height: 100%;
      width: 140px;
      height: auto;
      margin-top: -3px;
    }

    .app-header-right{
      align-items: center;
    }

    .app-profile, .app-notification{
      height: 29px;
      width: 28px;
    }

    .app-notification{

      .app-notification-list{
        position: fixed;
        width: 100%;
      }
    }
  }

}

.app-navigation{
  position: fixed;
  width: $nav-panel-width;
  padding-top: $nav-header-height;
  background-color: $color-blue-gray;
  height: 100%;
  z-index: $z-nav-panel;
  transition: width 300ms;

  .app-links-container {
    height: 100%;

    ._main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-content: space-between;
      height: 100%;
      overflow-y: auto;

      .app-links {
        padding: 0;
        margin: 0;
        list-style: none;

        & > li {
          border-bottom: 1px solid #5C6A8B;
        }

        li {
          padding: 0;

          &.fake {
            display: block;
            width: 100%;
            padding: $gutter + 1;
            padding-left: 80px;
            font-family: $nav-font-family;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            color: $color-white;
            position: relative;
            letter-spacing: 1px;
            opacity: .6;

            @include mediaQuery(max, iPhone){
              padding: 14px;
              padding-left: 67px;
            }

            .nav-icons {
              position: absolute;

              &:before {
                content: '';
                width: 28px;
                height: 28px;
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                left: -46px;

                @include mediaQuery(max, iPad){
                  left: -53px;
                }
              }

              &.icon-home {
                &:before {
                  background-image: $dashboard;
                }
              }
              &.icon-integrations {
                &:before {
                  background-image: $integrations;
                }
              }
              &.icon-manage {
                &:before {
                  background-image: $services;
                }
              }
              &.icon-settings {
                &:before {
                  background-image: $settings;
                }
              }
              &.icon-subscriptions {
                &:before {
                  background-image: $subscriptions;
                }
              }
              &.icon-users {
                &:before {
                  background-image: $users;
                }
              }
              &.icon-embed {
                &:before {
                  background-image: $embed;
                }
              }
              &.icon-helpcenter {
                &:before {
                  background-image: $helpcenter;
                }
              }
            }

            .title {
              background: #a8adb9;
              width: 100px;
              height: 20px;
              margin: 5px 0;
              border-radius: 10px;

              &.micro {
                width: 60px;
              }

              &.small {
                width: 90px;
              }

              &.large {
                width: 150px;
              }
            }
          }

          a {
            display: block;
            width: 100%;
            padding: $gutter + 1;
            padding-left: 80px;
            font-family: $nav-font-family;
            font-size: 16px;
            font-weight: 500;
            text-transform: uppercase;
            color: $color-white;
            position: relative;
            letter-spacing: 1px;

            &:hover {
              background: #374a75;
            }

            .nav-icons {
              position: absolute;

              &:before {
                content: '';
                width: 28px;
                height: 28px;
                background-size: contain;
                background-repeat: no-repeat;
                position: absolute;
                left: -46px;

                @include mediaQuery(max, iPad){
                  left: -53px;
                }
              }

              &.icon-home {
                &:before {
                  background-image: $dashboard;
                }
              }
              &.icon-integrations {
                &:before {
                  background-image: $integrations;
                }
              }
              &.icon-manage {
                &:before {
                  background-image: $services;
                }
              }
              &.icon-settings {
                &:before {
                  background-image: $settings;
                }
              }
              &.icon-subscriptions {
                &:before {
                  background-image: $subscriptions;
                }
              }
              &.icon-users {
                &:before {
                  background-image: $users;
                }
              }
              &.icon-embed {
                &:before {
                  background-image: $embed;
                }
              }
              &.icon-helpcenter {
                &:before {
                  background-image: $helpcenter;
                }
              }

            }

            &.nav-link-parent {

              .caret {
                @include defaultTransition;
                margin-left: 50px;
                transform: scale(1.5) translateY(-1px);
                border-top-color: $color-white;
              }

              & ~ ul {
                @include defaultTransition(130ms);
                height: 0;
                overflow: hidden;
              }
            }

            &.active {
              background-color: $color-nav-parent-active;
              color: $color-white;

              .caret {
                @include defaultTransition;
                transform: rotate(180deg) scale(1.6) translateY(1px);
              }

              & ~ ul {
                @include defaultTransition(130ms);
                height: auto;
                overflow: hidden;
              }
            }


          }



          .app-dropdown {
            padding: 0;

            li {

              &:last-child a {
                padding-bottom: 17px;
              }

              a {
                @include defaultTransition;
                font-size: 14px;
                font-weight: 500;
                color: $color-white;
                text-transform: capitalize;
                padding-top: $gutter / 2;
                padding-bottom: $gutter / 2;

                &.active, &:hover {
                  @include defaultTransition;
                  background-color: $color-nav-child-active;
                  color: $color-white;
                }
              }
            }
          }
        }
      }
    }
  }

  @include mediaQuery(max, iPad){
    width: $nav-panel-width-collapsed;

    .app-links-container {

      ._main {

        .app-links {

          & > li {

          }

          li {

            &.fake {

              .nav-icons {

                &:before {
                  width: 24px;
                  height: 24px;
                }
              }
            }

            a{
              padding: 14px;
              padding-left: 67px;

              .nav-icons {

                &:before {
                  width: 24px;
                  height: 24px;
                }
              }
            }
          }
        }
      }
    }

    .nav-footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      padding: 8px 0;
      background: white;
      font-size: 11px;
      line-height: 18px;
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.23);
      z-index: 9900;

      a{
        font-size: 9px;
      }
    }
  }
}

.nav-footer{
  padding-top: $gutter * 2;
  padding-bottom: $gutter;
  text-align: center;
  width: 100%;

  .navvbar-badge{
    padding: 0;
  }

  a{
    font-size: 12px;
    margin-bottom: $gutter / 2;
    color: #90a3d0;
    letter-spacing: 1px;
  }
}

.nav-setup-checklist{

  .app-navigation .app-links-container ._main .app-links &{

    .nav-link-parent{
      font-size: 1.25em;
      padding-left: $gutter * 2.5;
      text-transform: capitalize;
    }

    .nav-link-parent, .nav-link-child {
      background-color: $color-nav-checklist;
      color: $color-nav-checklist-text;
    }

    ._list{
      background-color: $color-nav-checklist;
      padding-bottom: $gutter;

      .nav-link-child {
        padding: $gutter/2 $gutter $gutter/2 $gutter*2+2;
        text-transform: none;
        font-size: 0.9em;

        ._step-count {
          color: $color-white;
          @include steps;
          line-height: 23px;
          padding-right: 0;
          margin-right: $gutter / 2;
        }

        &._completed {
          opacity: 0.5;

          ._step-count {
            border-color: $color-white;
            background-color: $color-white;
            color: $color-blue-gray;
          }
        }
      }
    }
  }

  .app-navigation .app-links-container ._main .app-links & {
    .nav-link-child {

      &._completed {

      }
    }
  }
}

.app-dashboard .app-body{
  padding-top: $nav-header-height;
  //padding-left: $nav-panel-width;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  width: calc(100% - 280px);
  margin-right: 0;
  margin-left: auto;

  @include fadeInContent;

  .loader, .page-loader{
    position: fixed;
    height: 100%;
    width: calc(100% - 280px);
    max-width: 100%;
    margin-top: 0;
    left: $nav-panel-width;
    top: 0;
    z-index: $z-loader;

    @include mediaQuery(max, iPad){
      width: calc(100% - 80px);
    }

    .lds-ellipsis{
      margin-top: 0;
    }
  }

  .page-loader{
    left: $nav-panel-width;
    top: $nav-header-height;

    @include mediaQuery(max, iPad){
      left: $nav-panel-width-collapsed;
    }
  }

  @include mediaQuery(max, iPad){
    //padding-left: $nav-panel-width-collapsed;
    width: calc(100% - 50px);
    padding-bottom: 60px;
  }
}

.caret{
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid\9;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  border-top-color: $color-dark-blue;
}

/* todo: To be cleaned up */
.app-dashboard .servicetron{
  display: none !important;
}
.app-dashboard .navvbar-badge {
  margin-top: 0;
  display: block;
  float: none !important;
  width: 100%;
  text-align: center;
}
//.nav-link li a.app-link-parent .caret{
//  display: none;
//}