ux-iws-sf-page {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  background-image: var(--ux-sf-background-image, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
@media (max-width: 767px) {
  ux-iws-sf-page ux-button {
    width: 100%;
  }
}

.ux-iws-sf-page__sidebar {
  flex: 1 0 auto;
  display: none;
}
.ux-iws-sf-page__inner {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  gap: 30px;
  box-sizing: border-box;
  margin: 0;
  padding: 60px 30px;
}
@media (min-width: 768px) {
  .ux-iws-sf-page__inner {
    padding: 60px 40px;
  }
}
@media (min-width: 1440px) {
  .ux-iws-sf-page__inner {
    padding: 60px 8.3333333333%;
  }
}

ux-iws-sf-page[variant$=light] .ux-iws-sf-page__inner {
  background-color: #eff0f4;
}

ux-iws-sf-page[variant$=gradient] .ux-iws-sf-page__inner {
  background: linear-gradient(180deg, #edeef2 0%, rgba(255, 255, 255, 0) 100%);
}

ux-iws-sf-page[variant^=center] .ux-iws-sf-page__inner {
  justify-content: center;
  align-items: center;
}

ux-iws-sf-page[full-height]:not([data-header]) .ux-iws-sf-page__inner {
  min-height: 100vh;
}

ux-iws-sf-page[full-height][data-header] .ux-iws-sf-page__inner {
  min-height: calc(100vh - var(--ux-header-height, 100px));
}

ux-iws-sf-page[data-sidebar=true] .ux-iws-sf-page__sidebar {
  display: block;
}
@media (max-width: 767px) {
  ux-iws-sf-page[data-sidebar=true] .ux-iws-sf-page__sidebar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
  }
}