/*
 * Core: General Layout Style
 * -------------------------
 */
html,
body {
  height: 100%;
}

html,
body,
.wrapper {
  height: 100%;
  overflow-x: hidden;
}

.layout-boxed {
  background: url('#{$boxed-layout-bg-image-path}') #ccc repeat;
}

.wrapper {
  //min-height: 100%;
  .layout-boxed & {
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    &,
    &:before {
      margin: 0 auto;
      max-width: $boxed-layout-max-width;
    }
  }
}

.wrapper:before,
.main-sidebar:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.wrapper:before {
  background: $main-bg;
  width: 100%;
}

.main-sidebar:before {
  left: 0;
  width: $sidebar-width;
}

.content-wrapper,
.main-footer {
  margin-left: $sidebar-width;
  z-index: 3000;
  .sidebar-collapse & {
    margin-left: 0;
  }
}

.content-wrapper,
.main-sidebar {
  @include calc("min-height", "100% - #{$main-header-height + $main-footer-height}");
}

.content-wrapper {
  background: $main-bg;
  > .content-header,
  > .content {
    display: table;
    width: 100%;
  }

  > .content {
    padding: 15px;
  }
}

.main-sidebar {
  width: $sidebar-width;
  float: left;
  .sidebar-collapse & {
    &,
    &:before {
      margin-left: -$sidebar-width;
    }
  }
}

.main-footer {
  padding: $main-footer-padding;
  color: #555;
  border-top: $main-footer-border-top;
  background: #fff;
  margin-left: $sidebar-width;
}

.content-header {
  padding: 15px;
  background: #fff;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.2);
  h1 {
    font-size: 1.8rem;
    margin: 0;
  }
  .breadcrumb {
    margin-bottom: 0;
    padding: 0;
    background: transparent;
    line-height: 1.8rem;
    @include media-breakpoint-down(sm) {
      float: none !important;
      margin-top: 15px;
      line-height: 1;
    }
  }
}