#onfido-sdk {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100dvh;

  @media only screen and (width >= 933px) {
    min-height: 600px;
  }

  @media only screen and (width >= 768px) {
    max-width: 600px;
    max-height: 800px;
    overflow: hidden;
    
    /* Border is shown on large and desktop breakpoints */
    border-color: var(--ods-color-border-separator, rgb(233, 236, 240));
    border-width: 1px;
    border-style: solid;
    border-radius: var(--ods-border-radius-large, 8px);
  }
}

#onfido-sdk.dark {
  @media only screen and (width >= 768px) {
    border-color: var(--ods-color-border-separator, rgb(71, 73, 82));
  }
}

@supports (-webkit-touch-callout: none) {
  #onfido-sdk {
    min-height: -webkit-fill-available;
  }
}

#onfido-sdk.loading::after {
  position: absolute;
  width: 100%;
  height: 100%;
  content: '';
  background: rgba(255, 255, 255, 1)
    url('https://sdk.onfido.com/assets/icons/spinner.svg') center center
    no-repeat;
  cursor: progress;
}

#onfido-sdk.loading.light {
  background-color: var(--ods-color-background-surface, #fcfcfd);
}

#onfido-sdk.loading.dark {
  background-color: var(--ods-color-background-surface, #2b2d33);
}