/****** Hides the Revert to Defaults Button ******/
FORM.node-layout-builder-form DIV#edit-actions INPUT#edit-revert {
  display: none;
}


/****** Hides the Revisioning Block ******/

FORM.node-layout-builder-form DIV.js-form-type-vertical-tabs {
  display: none;
}


/****** Overrides Layout of Layout Selection Modal ******/

UL.layout-selection {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: stretch;
}

UL.layout-selection LI {
  flex: 0 1 49%;
}


/****** Overrrides Positioning of 'Remove' Button for Media Uploads ******/
  
FORM.js-media-library-add-form DIV.item-list UL LI INPUT.js-form-submit {
  display: none;
}

DIV.media-library-item--grid INPUT.form-submit {
  float: right;
}

DIV.media-library-selection > DIV {
  border-top: solid thin #dddddd;
  padding-top: 12px;
  padding-bottom: 12px;
}

DIV.media-library-selection > DIV:last-child {
  border-bottom: solid thin #dddddd;
  margin-bottom: 12px;
}


/****** Overrrides for Layout Builder Column Definitions ******/

BODY .layout--threecol-section {
  justify-content: space-between;
}

BODY .layout--fourcol-section {
  justify-content: space-between;
}



/* Two Column Layouts in CSS Grid */

@supports (display: grid) {

  @media handheld, only screen and (min-width: 630px) {

    HTML .layout--twocol-section {
      display: grid;
      grid-gap: 0.8rem;
      justify-content: space-between;
    }

    BODY .layout--twocol-section.layout--twocol-section--50-50 {
      grid-template-columns: 49% 49%;
    }

  }

  @media handheld, only screen and (min-width: 860px) {

    BODY .layout--twocol-section.layout--twocol-section--33-67 {
      grid-template-columns: 32.65% 65.35%;
    }

    BODY .layout--twocol-section.layout--twocol-section--67-33 {
      grid-template-columns: 65.35% 32.65%;
    }

  }

  @media handheld, only screen and (min-width: 966px) {

    BODY .layout--twocol-section.layout--twocol-section--25-75 {
      grid-template-columns: 24.5% 73.5%;
    }

    BODY .layout--twocol-section.layout--twocol-section--75-25 {
      grid-template-columns: 73.5% 24.5%;
    }

  }

}

/* Three and Column Layouts in CSS Grid */

@supports (display: grid) {

  @media handheld, only screen and (min-width: 630px) {

    HTML .layout--threecol-section,
    HTML .layout--fourcol-section {
      display: block;
    }

  }

  @media handheld, only screen and (min-width: 966px) {

    HTML .layout--threecol-section,
    HTML .layout--fourcol-section {
      display: grid;
      grid-gap: 0.8rem;
      justify-content: space-between;
    }

    BODY .layout--threecol-section.layout--threecol-section--25-50-25 {
      grid-template-columns: 24% 48% 24%;
    }

    BODY .layout--threecol-section.layout--threecol-section--25-25-50 {
      grid-template-columns: 24% 24% 48%;
    }

    BODY .layout--threecol-section.layout--threecol-section--50-25-25 {
      grid-template-columns: 48% 24% 24%;
    }

    BODY .layout--threecol-section.layout--threecol-section--33-34-33 {
      grid-template-columns: repeat(3, 32%);
    }

    BODY .layout--fourcol-section {
      grid-template-columns: repeat(4, 23.5%);
    }

  }

}