/*
 * Add theme specific styles for Layout Paragraph editor UI
 */

/**
 * Add spacing to top and bottom of pages.
 */

.page-content {
  margin-bottom: 80px;
}

@media screen and (min-width: 38em) {
  .page-content {
    margin-top: 2rem;
  }
}

/**
 * Change color on LP labels for better readability
 */

.lpb-controls.is-layout .lpb-controls-label {
  color: var(--color-white);
}

/**
 * Add color to layout icons.
 */

.layout-icon__region {
  fill: #f5f5f2;
  stroke: #666;
}

/**
 * Align different layouts when editing in display view
 */

.layout-select.form-boolean-group {
  -webkit-box-align: baseline;
          align-items: baseline;
}

/**
 * Align dialog buttons for readability
 */

.ui-dialog-buttonset.form-actions {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-flow: row;
}

/**
* Adjust max with of two column layout for readability
*/

.l--prototype-layouts-twocolumn-halves .l__main {
  grid-template-columns: 48% 48%;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.oursecurefuture-org .partner-field-content {
  text-align: center;
  border: 4px solid rgb(206, 206, 206);
  padding: 1rem;
  margin-right: 2rem;
  min-height: 180px;
  margin-bottom: 0.5rem;
  margin-top: 4rem;
}

@media screen and (max-width: 38em) {
  .oursecurefuture-org .path-partner .views-col {
    width: 100%;
  }
}

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
  /* Force grid to not be like grid anymore */

  .oursecurefuture-org .partner-field-content {
    width: 100%;
  }
}