.sticky-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.hide-sticky-footer {
  display: none;
}

.sticky-footer-parent {
  padding-top: 16px;
  padding-bottom: 16px;
}

/* inline padding to line up with footer in beacon MO v1&v2 templates & iprc template page but NOT in generic pages*/

.sticky-footer-parent {
  padding-inline: var(--beacon-system-space-organism-maxi);

  .genericpage & {
    padding-inline: 0;
  }
}

.genericpage
  .sticky-footer
  .container.responsivegrid.aem-GridColumn--extraLarge--12 {
  padding: 0 0;
}

.sticky-footer .cmp-container {
  margin: 0 0;
  max-width: unset;
}

.sticky-footer-child {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sticky-footer-box1 p,
.sticky-footer-box1 a,
.sticky-footer-box1 h1,
.sticky-footer-box1 h2,
.sticky-footer-box1 h3,
.sticky-footer-box1 h4,
.sticky-footer-box1 h5,
.sticky-footer-box1 h6 {
  color: var(--beacon-system-color-text-standard);
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

.sticky-footer-box2 > div {
  display: flex;
  flex-direction: column;
  margin: 0 -0.5rem !important;
  text-align: center;
}

/*To keep spacing between 2 buttons*/
.sticky-footer-box2 .button {
  padding: 8px;
}

@media (max-width: 959px) {
  .sticky-footer-child.b-grid {
    gap: 2px;
  }
}

@media (min-width: 640px) {
  .sticky-footer-box2 > div {
    flex-direction: row;
  }
}

@media (min-width: 960px) {
  /*To achieve the same margin on the same element in Site Footer XF*/
  .sticky-footer .xf-content-height > .aem-Grid {
    margin: 0;
  }

  .sticky-footer-child {
    flex-direction: row;
  }

  .sticky-footer-parent {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sticky-footer-box1 p,
  .sticky-footer-box1 h1,
  .sticky-footer-box1 h2,
  .sticky-footer-box1 h3,
  .sticky-footer-box1 h4,
  .sticky-footer-box1 h5,
  .sticky-footer-box1 h6 {
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .sticky-footer-parent {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

@media (min-width: 1600px) {
  .sticky-footer.responsivegrid
    .aem-Grid.aem-Grid--default--12
    > .aem-GridColumn.aem-GridColumn--default--12 {
    width: unset;
    float: none;
  }
}

/*to line up with new beacon footer in generic template page*/
@media (min-width: 1920px) {
  .genericpage .sticky-footer.container {
    margin: 0 -8rem;
  }
}

.sticky-footer-background {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  position: absolute;
  max-width: none;
  height: 100%;
  margin-left: calc(-50vw + 50%);
  z-index: -2;
  background: var(
    --beacon-system-color-background-1
  ); /*with darker theme it should be #0C2A4D;*/
}