/* ============================================================

  Grid Layout Page

  Datei     :   layout.less
  Datum     :   2020-04-30
  Autor     :   Christine Slotty
  Copyright :   Gradio

   ============================================================*/

/*====================================
=            BREAK POINTS            =
====================================*/

/* https://scotch.io/courses/getting-started-with-less/responsive-and-media-queries */
@wide-screen-down: ~'(max-width:1199px)';
@desktop-down: ~'(max-width:991px)';
@tablet-down: ~'(max-width:767px)';
@phone-down: ~'(max-width:480px)';
@small-phone-down: ~'(max-width:320px)';

/* GRID */
.layout {
  display: grid;
  grid-template-rows: [top] 8vh [line2] 86vh [footer1] 3vh [footer2] 5vh [end];
  grid-template-columns: [left1] auto [left2] 1fr [left3] 12fr [right3] 1fr [right2] auto [right1];
  grid-template-areas: "header header header header header"
  "left . center center ."
  "footer footer footer footer footer"
  "bottom bottom bottom bottom bottom";
  margin: 0;
  padding: 0;
}

@media @wide-screen-down {
  .layout {
    grid-template-areas: "header header header header header"
    "left . center center center"
    "footer footer footer footer footer"
    "bottom bottom bottom bottom bottom";
  }

}

@media @tablet-down {
  .layout {
    position: relative;
    display: grid;
    grid-template-rows: [top] 12vh [line2] 80vh [footer1] 3vh [footer2] 8vh [end];
    grid-template-columns: [left1] 100vw [right1];
    grid-template-areas: "header"
    "center"
    "footer"
    "bottom";
    margin: 0;
    padding: 0;
  }

}

.header-notify {
  grid-area: header;
  grid-column-start: right3;
  grid-column-end: right2;
}

.header-user {
  grid-area: header;
  grid-column-start: right2;
  grid-column-end: right1;
}

.sidebar1 {
  grid-area: left;
  grid-row-start: top;
  grid-row-end: end;
}

@media @tablet-down {
  .sidebar1 {
    position: relative;
    grid-area: header;
    z-index: 2;
    top: -300px;
    right: 0px;
  }

  .header-user,
  .header-notify {
    grid-area: header;
  }

}

.center-form-single,
.content {
  grid-area: center;
  grid-row-start: line2;
  grid-row-end: footer1;
}

.footer {
  grid-area: footer;
  grid-row-start: footer1;
  grid-row-end: footer2;
}

.nav-bottom {
  grid-area: bottom;
  grid-row-start: footer2;
  grid-row-end: end;
}