/*
 * @file
 * Provides the layout styles for layout_twocol_bricks.
 *
 * @todo Using display: flex requires https://www.drupal.org/node/2842298 to be
 * in before this can be marked as stable.
 */

.layout--twocol-bricks-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.layout--twocol-bricks-sidebar>.area-container {
  display:block;
  width:100%;
}
.layout--twocol-bricks-sidebar .area-main{
  width:100%;
}
.layout--twocol-bricks-sidebar > .layout__region {
  width:100%;
}
.adminimal .layout--twocol-bricks-sidebar .layout__region {
  margin:4px;
  width:99%;
}

.layout--twocol-bricks-sidebar .layout__region--above,
.layout--twocol-bricks-sidebar .layout__region--middle,
.layout--twocol-bricks-sidebar .layout__region--below,
.layout--twocol-bricks-sidebar .layout__region--top,
.layout--twocol-bricks-sidebar {
  width: 100%;
}

@media screen and (min-width: 60rem) {
  .layout--twocol-bricks-sidebar .area-main {
    width:100%;
  }
  .area-main .area-container{
    display:flex;
    width:100%;
  }

  .layout--twocol-bricks-sidebar .sidebar {
    flex: 0 1 30%;
  }

  .layout--twocol-bricks-sidebar .layout__region--sidebar {
    width: 30%;
  }

  .layout--twocol-bricks-sidebar .area-main .layout__region--first-above,
  .layout--twocol-bricks-sidebar .area-main .layout__region--second-above,
  .layout--twocol-bricks-sidebar .area-main .layout__region--first-middle,
  .layout--twocol-bricks-sidebar .area-main .layout__region--second-middle,
  .layout--twocol-bricks-sidebar .area-main .layout__region--first-below,
  .layout--twocol-bricks-sidebar .area-main .layout__region--second-below {
    flex: 0 1 50%;
  }

  .xnode-portalseite-form .layout-region-node-main,
  .xnode-portalseite-form .layout-region-node-secondary,
  .xnode-portalseite-edit-form .layout-region-node-main,
  .xnode-portalseite-edit-form .layout-region-node-secondary {
    float: left;
    width: 100%;
  }

}
@media screen and (min-width: 80rem) {
  .layout--twocol-bricks-sidebar .area-container {
    display:flex;
  }
  .layout--twocol-bricks-sidebar .area-main {
    flex: 0 1 70%;
    width:70%;
  }
}