// Becareful using this file, it may overwrite by other application's layout css file.
// Layout Variables
$app-header-height: 70px; // 70px

.app-container{
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

.layout-wrapper{
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

.app-header{
  flex: 0 0 auto;
  height: $app-header-height;
  z-index: 2;
}

.warning-bar{
  flex: 1 1 auto;
  margin-top: $app-header-height // Offset the height of the fixed header
}

.app-body{
  flex: 1 1 auto;
  margin-top: $app-header-height // Offset the height of the fixed header
}

@media (min-width: 1264px){
  .app-body__inner
    > .container:first-child {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }
}

.app-footer{
  flex: 0 0 auto
}

.container{
  padding-right: 1rem;
  padding-left: 1rem;
  max-width: 1360px;
}

// Page Layout
.view-container{
  display: flex;
  flex-flow: column nowrap;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;

  article{
    flex: 1 1 auto;

    section{
      margin-top: 2.25rem;
    }
  }

  aside{
    flex: 0 0 auto;
    width: 20rem;
    margin-top: 3rem;

    .affix{
      width: 20rem;
    }
  }
}

@media (max-width: 768px){
  .view-container{
    aside{
      width: 100%;

      .affix{
        position: relative;
        top: 0 !important;
        width: 100%
      }
    }
  }
}

@media (min-width: 960px){
  .view-container{
    flex-flow: row nowrap;

    article{
      margin-right: 2rem;
    }

    aside{
      margin-top: 0;
      width: 20rem
    }
  }
}

// Form Layout
.form__row + .form__row{
  margin-top: 0.25rem
}

.form__btns{
  display: flex;

  .v-btn{
    margin: 0;

    + .v-btn{
      margin-left: 0.5rem
    }

    &.form-primary-btn{
      margin-left: auto
    }
  }
}