/**
 * @file
 * Is the responsive layout composition.
 *
 * Is intented to set basic layout rules to regions and global blocks.
 * Also add grid common rules.
 */



/**
 * Layout content
 */
.main {
  position: relative;
}
.main__content {
  padding-top: 90px;
}
@media all and (min-width: 900px){
  .main__content {
    padding-top: 99px;
  }
}
.layout-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.user-logged-in .layout-container {
  min-height: calc(100vh - 39px);
}
.user-logged-in.toolbar-tray-open .layout-container {
  min-height: calc(100vh - 79px);
}
.main__content {
  max-width: 1920px;
  margin: 0 auto;
  width: 100%;
}


/**
 * Style applied to the body for menu in mobile
 */

body.is-hidden {
  overflow: hidden;
  position: relative;
}
body .dialog-off-canvas-main-canvas {
  position: relative;
}
body .dialog-off-canvas-main-canvas::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  opacity: 0;

  transition: ease-in-out 170ms;
  visibility: hidden;
}
body.is-hidden .dialog-off-canvas-main-canvas::after {
  opacity: 70%;
  background-color: black;
  visibility: visible;
}


/**
 * Grid row
 */


.grid-row {
	padding: 0 1rem;
}

@media all and (min-width: 700px) {
  .grid-row {
  	padding: 0;
    width: 90%;
    margin: 0 auto;
  }
  .grid-row--12 {
    max-width: 1399px;
  }
  .grid-row--10 {
    max-width: 1161px;
  }
  .grid-row--8 {
    max-width: 923px;
  }
  .grid-row--6 {
    max-width: 685px;
  }
}

/**
 * Vertical spacing
 */

.top-spacing--xs {
 margin-top: .25rem;
}
.top-spacing--s{
 margin-top: .5rem;
}
.top-spacing--m {
 margin-top: 1rem;
}
.top-spacing--l {
 margin-top: 2rem;
}
.top-spacing--xl {
 margin-top: 4rem;
}
.bottom-spacing--xs {
 margin-bottom: .25rem;
}
.bottom-spacing--s {
 margin-bottom: .5rem;
}
.bottom-spacing--m {
 margin-bottom: 1rem;
}
.bottom-spacing--l {
 margin-bottom: 2rem;
}
.bottom-spacing--xl{
 margin-bottom: 4rem;
}
@media all and (min-width: 1300px) {
  .top-spacing--xs {
    margin-top: .33rem;
  }
  .bottom-spacing--xs {
    margin-bottom: .33rem;
  }
}


/**
 * Internal spacing
 */

.top-internal-spacing--xs {
  padding-top: .25rem;
}
.top-internal-spacing--s{
  padding-top: .5rem;
}
.top-internal-spacing--m {
  padding-top: 1rem;
}
.top-internal-spacing--l {
  padding-top: 2rem;
}
.top-internal-spacing--xl {
  padding-top: 3rem;
}
.bottom-internal-spacing--xs {
  padding-bottom: .25rem;
}
.bottom-internal-spacing--s {
  padding-bottom: .5rem;
}
.bottom-internal-spacing--m {
  padding-bottom: 1rem;
}
.bottom-internal-spacing--l {
  padding-bottom: 2rem;
}
.bottom-internal-spacing--xl{
  padding-bottom: 3rem;
}
@media all and (min-width: 900px) {
  .top-internal-spacing--xs {
    padding-top: .5rem;
  }
  .top-internal-spacing--s{
    padding-top: 1rem;
  }
  .bottom-internal-spacing--xs {
    padding-bottom: .5rem;
  }
  .bottom-internal-spacing--s {
    padding-bottom: 1rem;
  }
  .top-internal-spacing--m {
    padding-top: 2rem;
  }
  .top-internal-spacing--l {
    padding-top: 4rem;
  }
  .bottom-internal-spacing--m {
    padding-bottom: 2rem;
  }
  .bottom-internal-spacing--l {
    padding-bottom: 4rem;
  }
  .top-internal-spacing--xl {
    padding-top: 6rem;
  }
  .bottom-internal-spacing--xl{
    padding-bottom: 6rem;
  }
}
@media all and (min-width: 1300px) {
  .top-internal-spacing--xs {
    padding-top: 1rem;
  }
  .top-internal-spacing--s{
    padding-top: 2rem;
  }
  .bottom-internal-spacing--xs {
    padding-bottom: 1rem;
  }
  .bottom-internal-spacing--s {
    padding-bottom: 2rem;
  }
  .top-internal-spacing--m {
    padding-top: 4rem;
  }
  .top-internal-spacing--l {
    padding-top: 8rem;
  }
  .bottom-internal-spacing--m {
    padding-bottom: 4rem;
  }
  .bottom-internal-spacing--l {
    padding-bottom: 8rem;
  }
  .top-internal-spacing--xl {
    padding-top: 12rem;
  }
  .bottom-internal-spacing--xl{
    padding-bottom: 12rem;
  }
}


/**
 * Layout
 */
.layout--fourcol {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media screen and (min-width: 500px) {
  .layout--fourcol {
    gap: 1.875rem;
    display: grid;
  }
}
@media screen and (min-width: 1000px) {
  .layout--fourcol {
    grid-template-columns: repeat(2, calc(50% - 0.9125rem));
  }
}
@media screen and (min-width: 1300px) {
  .layout--fourcol {
    grid-template-columns: repeat(4, calc(25% - 0.9125rem));
  }
}