/* These style overrides are necessary so that the Onfido modal looks nice */
:root {
    --ods-color-border-separator: transparent;
}

.onfido-sdk-ui-Modal-inner {
    border-style: none !important;
    width: 100% !important;
}

/* The Tips badge on the Onfido Mobile-notification-sent screen is currently positioned absolutely, causing it possibility to float when the screen is scrolled.
 This css will make the Tips badge positioned relative to nearest wrapper html tag so that it keeps position of the Tips badge when Onfido screen is scrolled */
.onfido-sdk-ui-Modal-inner div[data-page-id="MobileNotificationSent"] {
    position: relative;
}

#onfido-mount button:focus,
#onfido-mount button:focus[data-focusvisible-polyfill],
#onfido-mount button:active {
    box-shadow: none !important;
}

#onfido-mount .-action--primary:focus,
#onfido-mount .-action--primary:focus[data-focusvisible-polyfill],
#onfido-mount .-action--primary:active {
    border-color: transparent;
}

#onfido-mount button:focus-visible {
    outline: 0;
    box-shadow: inset 0px 0px 0px 1px #5AB0FF !important;
}

/* This is needed to disable the blue outline that shows up once the payment page is opened through keyboard */
#onfido-mount [tabindex="-1"]:focus-visible,
#onfido-mount [tabindex="-1"]:focus[data-focusvisible-polyfill] {
    box-shadow: none !important;
}

.onfido-sdk-ui-NavigationBar-iconBack {
    /* Onfido's back icon with our theme colors. */
    /* cspell:disable-next-line */
    --back-icon-svg: url("data:image/svg+xml,%3Csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='none' cx='16' cy='16' r='16'/%3E%3Cpath d='M16.668 11.811L11.738 16l4.93 4.189a1.014 1.014 0 0 1 0 1.5 1.191 1.191 0 0 1-1.604 0l-5.736-4.873A1.01 1.01 0 0 1 9.003 16a1.01 1.01 0 0 1 .325-.816l5.736-4.873a1.191 1.191 0 0 1 1.604 0 1.014 1.014 0 0 1 0 1.5z' fill='%238B9C8F' fill-rule='nonzero'/%3E%3Crect fill='%238B9C8F' fill-rule='nonzero' x='9' y='15' width='16' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E");
    background-image: var(--back-icon-svg) !important;
}

.onfido-sdk-ui-Theme-root .ods-button.-action--primary:disabled {
    opacity: 0.5 !important;
    background-color: var(--osdk-color-background-button-primary) !important;
}

.onfido-sdk-ui-crossDevice-CrossDeviceLink-sending::before {
    margin-left: 0 !important;
}

@media only screen and (max-width: 600px) {
    .onfido-sdk-ui-Modal-inner {
        /* This keeps the bottom of the Onfido window from being cut off on mobile web because the height was being
         set to 100%, but we have a header on the top of the page that can be used to cancel out of the flow. This
         spacing makes room for the header without cutting off the bottom of the Onfido window. */
        height: 92% !important;
    }

}

#onfido-mount {
    height: 100%;
}

#onfido-sdk {
    min-height: initial !important;
    max-height: initial !important;
}