html, body {
  min-height: auto;
  height: 100%;
}

html {
  background: #ddd !important;
  touch-action: none;
  overscroll-behavior-block: none !important;
  display: contents;
}

body.customer_portal {
  --offset-top-fullscreen: calc(var(--os-unit) / 2);
  margin: var(--os-unit) auto;
  max-width: 768px;
  max-height: calc(100vh - (var(--os-unit) * 2));
  inset: var(--os-unit) auto;
  width: 100%;
  background: white !important;
  display: grid;
  grid-auto-rows: auto 1fr auto auto;
  grid-auto-columns: 1fr;
  border-radius: calc(var(--os-unit) * .3);
  touch-action: none;
  overscroll-behavior-block: none !important;
  overflow: hidden;
  overflow-y: auto;
  min-width: 320px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  -webkit-touch-callout: none;
  overscroll-behavior: contain;
}

.fa { display: grid }

body.customer_portal > header {
  background-color: black;
  color: white;
  border-top-left-radius: calc(var(--os-unit) * .3);
  border-top-right-radius: calc(var(--os-unit) * .3);
}
body.customer_portal header strong {
  font-weight: 600;
}

body.customer_portal .defaultContainer header {
  background-color: #eee;
  color: black;
  position: sticky !important;
  top: 0;
  z-index: 999;
}
body.customer_portal .defaultContainer {
  overflow: auto;
  overscroll-behavior: none !important;
  position: relative;
  display: flex;
  flex-direction: column;
  color: black;
}
body.customer_portal .defaultContainer > form,
body.customer_portal .defaultContainer ._main-content:not(.os-list-item):not([hidden]),
body.customer_portal .defaultContainer ._creditCardContainer:not(.os-list-item):not([hidden]),
/* body.customer_portal .defaultContainer .receipt-container, */
body.customer_portal .defaultContainer ._inputs:not(.os-list-item):not([hidden])
{
  display: contents !important;
}
body.customer_portal .defaultContainer > .loading:not([hidden]) {
  position: absolute;
  inset: 0;
  display: grid;
  justify-content: center;
  align-content: center;
  background: rgba(255,255,255,.3);
  z-index: 6;
  border-bottom-left-radius: calc(var(--os-unit) * .3);
  border-bottom-right-radius: calc(var(--os-unit) * .3);
  --color-progress: black !important
}
body.customer_portal footer {
  position: sticky !important;
  margin-top: auto;
  top: auto;
  bottom: 0;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 768px) {
  html {
    background: black !important;
    padding: 0;
    margin: 0;
  }
  body.customer_portal > header {
    background-color: #232323;
  }
  body.customer_portal {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    height: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    inset: 0 !important;
    margin: 0 !important;
  }
  body.customer_portal .defaultContainer > .loading:not([hidden]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

}

/* INPUT & BORDER ADJUSTMENTS */
body.customer_portal .os-list-item .form-group label,
body.customer_portal .os-list-item .form-group.has-warning label,
body.customer_portal .os-list-item .form-group[required] label,
body.customer_portal .os-list-item .form-group .form-control {
  color: black !important;
}
body.customer_portal .os-list-item .form-group .form-control::placeholder {
  color: gray !important;
}
body.customer_portal .border-t:not([class*=color-ol-]),
body.customer_portal .border-top:not([class*=color-ol-])
{
  border-top-color: gray !important;
}
body.customer_portal .os-list-item .form-group>.input-group[class*=border]:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>os-select[class*=border]:not([class*=color-ol-]),
body.customer_portal .border-b:not([class*=color-ol-]),
body.customer_portal .border-bottom:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>.input-group[class*=border]:before,
body.customer_portal .os-list-item .form-group>os-select[class*=border]:before,
body.customer_portal .os-input-group-addon.borders:not([class*=color-ol-]),
body.customer_portal .os-input-group-addon[class*=border-]:not([class*=color-ol-]),
body.customer_portal [class*=border]:not(.color-ol-):not([class*=no-border])
{
  border-bottom-color: darkgray !important;
}
body.customer_portal .os-list-item .form-group>.input-group[class*=border].has-focus:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>.input-group[class*=border].os-menu-open:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>os-select[class*=border].has-focus:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>os-select[class*=border].os-menu-open:not([class*=color-ol-]),
body.customer_portal .os-list-item .form-group>.input-group[class*=border].has-focus:not([class*=color-ol-]):before,
body.customer_portal .os-list-item .form-group>os-select[class*=border].has-focus:not([class*=color-ol-]):before
{
  border-bottom-color: black !important;
}
body.customer_portal .os-list-item .form-group.has-warning>.input-group:before,
body.customer_portal .os-list-item .form-group.has-warning>os-select:before,
body.customer_portal .os-list-item .form-group>.input-group[required]:before,
body.customer_portal .os-list-item .form-group>os-select[required]:before,
body.customer_portal .os-list-item .form-group[required]>.input-group:before,
body.customer_portal .os-list-item .form-group[required]>os-select:before
{
  border-left-color: black !important;
}

body.customer_portal .os-list-item a:focus-visible {
  outline: 3px solid var(--color-info) !important;
  border-radius: 2em;
  outline-offset: -4px;
}

/* os.menu adjustments */

body.customer_portal .os-dropdown .os-menu-target {
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, .2) !important;
  background: #fdfdfd !important;
  opacity: .96
}
body.customer_portal .os-dropdown .os-menu-target .os-list-item {
  --os-unit:  2.5rem;
}
body.customer_portal .os-dropdown .os-menu-target .os-list-item ~ .os-list-item {
  border-top: 1px solid #e4e4e4 !important;
}
body.customer_portal .os-dropdown .os-menu-target .os-list-item.color-bg-white:not([class^=li-]):not([class*=" li-"]):not(.li-disc):not(.li-box) {
  background: #fdfdfd !important;
}

@media print {
  @page {
    size: auto;
    margin: 0;
  }
  @page :footer {
    display: none !important;
  }
  @page :header {
    display: none !important;
  }
  html {
    display: initial;
    background: none !important;
    margin: 1.5rem;
    align-content: normal;
    height: auto;
  }
  body.customer_portal {
    max-width: none;
    max-height: none;
    border-radius: 0;
    display: initial;
    overflow: initial;
    width: auto;
    margin: 0;
    height: auto;
  }
  body.customer_portal footer,
  body.customer_portal .defaultContainer > .pos-s-t:first-child,
  body.customer_portal .receiptHeader,
  body.customer_portal header {
    display: none !important;
  }
  body.customer_portal .defaultContainer {
    display: contents;
    overflow: initial;
  }

}


/* FIX OF OLD-vs-NEW CSS */

.os-list-item:has(.input-group.border-b) {
  .input-group.border-b {
    border-bottom: none !important;
  }
  border-bottom: 1px solid darkgray;
  &:focus-within {
   border-bottom-color: black !important;
  }
}
.os-list-item:has([required]) {
  border-left: 3px solid black !important;
  > div:first-child:not([slot]) {
    border-left: none !important;
    margin-right: -3px !important;
  }
}
.os-list-item .border-l:not([class*=color-ol-]),
.os-list-item .border-left:not([class*=color-ol-]) {
  border-left-color: darkgray !important;
}
.os-list-item .form-control[contenteditable] {
  line-height: calc(var(--os-unit, 3rem)) !important;
}

.control {
  &:focus-visible {
    outline: 3px solid var(--color-info) !important;
    border-radius: 100%;
  }
  .os-icon {
    --os-icon-unit: calc(var(--os-unit, 3rem));
    --icon-unit: calc(var(--os-unit, 3rem));
    --os-icon-margin: auto;
    --icon-spinner-size-override: var(--os-unit, 3rem);
    cursor: pointer;

    [class*=li-]:not(.li-badge).os-unit.li-rounded {
      --icon-unit: var(--icon-unit-override, calc(var(--os-unit, 3rem) * 0.6));
      height: auto !important;
      display: inline-grid;
      vertical-align: middle;
      margin: var(--inner-icon-padding);
      font-weight: 400;
      place-self: center;
      justify-self: center;
      align-self: center !important;
      min-width: unset !important;
      min-height: unset !important;
      width: var(--os-icon-unit, 1em) !important;
      place-items: center;
      font-size: var(--os-icon-unit, 1em) !important;
      scale: 1;
    }
  }
}