/*
 * Replace this with your own classes
 *
 * e.g.
 * .container {
 * }
*/
.app-container {
  position: relative;
  min-height: 100vh;

  .app-content {
    position: relative;
    padding-top: 75.5px;
    min-height: calc(100vh - 189px);
  }
}

.without-headers {
  padding-top: 0;

  .app-content {
    padding-top: 0;
  }
}

.without-footer {
  padding-top: 0;

  .app-content {
    min-height: 100vh;
  }
}

@media (min-width: 453px) {
  .app-container:not(.without-footer) {
    .app-content {
      min-height: calc(100vh - 169px);
    }
  }
}

@media (min-width: 640px) {
  .app-container:not(.without-footer) {
    .app-content {
      min-height: calc(100vh - 133px);
    }
  }
}

@media (min-width: 768px) {
  .app-container:not(.without-headers) {
    .app-content {
      padding-top: 128px;
    }
  }
  .app-container:not(.without-footer) {
    .app-content {
      min-height: calc(100vh - 165px);
    }
  }
}

@media (min-width: 1024px) {
  .app-container:not(.without-footer) {
    .app-content {
      min-height: calc(100vh - 181px);
    }
  }
}