/*
 * @file
 * Provides the layout styles for layout builder sections.
 */
/**
 * Mixins
 */
/**
 * CSS  & SASS Variables.
 */
:root {
  --screen-sm: 100%;
  --screen-md: 100%;
  --screen-lg: 100%;
  --screen-xl: 1468px;
  --shweb-gutter: 16px;
  --shweb-double-gutter: 32px;
  --shweb-main-col-border-radius: 5px;
  --shweb-white: #ffffff;
  --shweb-black: #000000;
  --shweb-light-grey: #cccccc;
  --shweb-body-bg-color: rgb(40.8, 159.8, 231.2);
  --shweb-header-element-bg-color: #ce2a77;
  --shweb-navigation-bg-color: #116699;
  --shweb-utility-wrapper-bg-col: #ffffff;
  --shweb-main-wrapper-bg-col: #ffffff;
  --shweb-page-title-background-color: #fff4f9;
  --shweb-main-col-bg-color: #ffffff;
  --shweb-content-area-bg-color: #ffffff;
  --shweb-layout-content-bg-color: transparent;
  --shweb-sidebar-first-bg-color: transparent;
  --shweb-sidebar-second-bg-color: transparent;
  --shweb-footer-bg-color: transparent;
  --shweb-header-fg-color: #ffffff;
  --shweb-main-nav-link-color: #ffffff;
  --shweb-body-fg-color: #483d3f;
  --shweb-footer-fg-color: #333333;
  --shweb-page-title-color: #116699;
  --shweb-header-link-color: #ffffff;
  --shweb-header-is-active-link-color: #fdde7f;
  --shweb-link-color: #116699;
  --shweb-link-hover-color: #fdde77;
  --shweb-footer-link-color: #333333;
  --shweb-footer-is-active-link-color: #ce2a77;
  --shweb-status-border-col: #77b259;
  --shweb-warning-border-col: #e09600;
  --shweb-error-border-col: #e62600;
  --shweb-sidebar-block-bg-color: #116699;
  --shweb-sidebar-block-fg-color: #ffffff;
  --shweb-sidebar-block-border-color: #ce2a77;
  --shweb-sidebar-block-border-radius-tl: 0;
  --shweb-sidebar-block-border-radius-tr: 0;
  --shweb-sidebar-block-border-radius-br: 10px;
  --shweb-sidebar-block-border-radius-bl: 10px;
  --shweb-sidebar-block-link-color: #ffffff;
  --shweb-sidebar-block-link-hover-color: #fdde77;
  --shweb-button-border-color: #ffffff;
  --shweb-button-face-color: #116699;
  --shweb-button-face-hover-color: #ce2a77;
  --shweb-button-text-color: #ffffff;
  --shweb-sidr-bg-color: #116699;
  --shweb-sidr-fg-color: #ffffff;
  --shweb-sidr-border-color: #ce2a77;
  --shweb-sidr-menu-color: #ffffff;
  --shweb-sidr-menu-hover-color: #fdde77;
  --shweb-sidr-menu-divider-color: #29a0e7;
}

/* --- TWO COL LAYOUTS --- */
.layout--twocol-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.layout--twocol-section > .layout__region {
  flex: 0 1 100% !important;
}

@media screen and (min-width: 768px) {
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--50-50 > .layout__region--second {
    flex: 0 1 49% !important;
  }
  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--second {
    flex: 0 1 32% !important;
  }
  .layout--twocol-section.layout--twocol-section--33-67 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--67-33 > .layout__region--first {
    flex: 0 1 66% !important;
  }
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--first,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--second {
    flex: 0 1 24% !important;
  }
  .layout--twocol-section.layout--twocol-section--25-75 > .layout__region--second,
  .layout--twocol-section.layout--twocol-section--75-25 > .layout__region--first {
    flex: 0 1 74% !important;
  }
}
/* --- THREE COL LAYOUTS --- */
.layout--threecol-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.layout--threecol-section > .layout__region {
  flex: 0 1 100% !important;
}

@media screen and (min-width: 768px) {
  .layout--threecol-section--25-50-25 > .layout__region--first,
  .layout--threecol-section--25-50-25 > .layout__region--third,
  .layout--threecol-section--25-25-50 > .layout__region--first,
  .layout--threecol-section--25-25-50 > .layout__region--second,
  .layout--threecol-section--50-25-25 > .layout__region--second,
  .layout--threecol-section--50-25-25 > .layout__region--third {
    flex: 0 1 24% !important;
  }
  .layout--threecol-section--25-50-25 > .layout__region--second,
  .layout--threecol-section--25-25-50 > .layout__region--third,
  .layout--threecol-section--50-25-25 > .layout__region--first {
    flex: 0 1 49% !important;
  }
  .layout--threecol-section--33-34-33 > .layout__region--first,
  .layout--threecol-section--33-34-33 > .layout__region--third {
    flex: 0 1 32% !important;
  }
  .layout--threecol-section--33-34-33 > .layout__region--second {
    flex: 0 1 33% !important;
  }
}
/* --- FOUR COL LAYOUT --- */
.layout--fourcol-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.layout--fourcol-section > .layout__region {
  flex: 0 1 100% !important;
}

@media screen and (min-width: 768px) {
  .layout--fourcol-section > .layout__region {
    flex: 0 1 49% !important;
  }
}
@media screen and (min-width: 1200px) {
  .layout--fourcol-section > .layout__region {
    flex: 0 1 24% !important;
  }
}