@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css');
.spinner {
    -webkit-animation: rotate 1.5s linear infinite;
    animation: rotate 1.5s linear infinite;
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
}
.spinner .path {
    stroke: #2f00c8;
    stroke-linecap: round;
    -webkit-animation: dash 1.2s ease-in-out infinite;
    animation: dash 1.2s ease-in-out infinite;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
/* spinner */
.loader-div {
    width: 100%;
    min-height: 200px;
}
.loader-inner-div {
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.img-size {
    width: 60px;
    height: 60px;
}
.first-part {
    position: absolute;
    top: -10px;
    left: -10px;
    animation: movefirst 3s linear infinite;
}
.second-part {
    position: absolute;
    top: -10px;
    right: -10px;
    animation: movesecond 3s linear infinite;
    animation-delay: 0.5s;
}
.third-part {
    position: absolute;
    bottom: -10px;
    left: 0px;
    animation: movethird 3s linear infinite;
    animation-delay: 1s;
}
@keyframes movefirst {
    0% {
        transform: translate(0, 0);
    }
    17% {
        transform: translate(10px, 10px);
    }
    50% {
        transform: translate(10px, 10px);
    }
    67% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes movesecond {
    0% {
        transform: translate(0, 0);
    }
    17% {
        transform: translate(-16px, 10px);
    }
    50% {
        transform: translate(-16px, 10px);
    }
    67% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
@keyframes movethird {
    0% {
        transform: translate(0, 0);
    }
    17% {
        transform: translate(0, -14px);
    }
    50% {
        transform: translate(0, -14px);
    }
    67% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
/* spinner */
/* zoom app style */
html {
    zoom: 1;
}

#zoom-sdk-body-element {
    zoom: 1.5 !important;
}

@media (max-width: 1000px) {
    html {
        zoom: 1;
    }
    #zoom-sdk-body-element {
        zoom: 1 !important;
    }
    .how-to-component {
        width: 100%;
    }
}
html,
body {
    background: #f9fafc;
    height: 100%;
}
#app {
    font-family: 'GothamBlack', sans-serif !important;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #5a567c;
    padding: 30px 40px;
    background: #f9fafc;
}
.btn {
    text-transform: uppercase;
}
.btn-deep-purple {
    color: #fff;
    background-color: #512da8 !important;
}
.btn-deep-purple:hover {
    color: #fff;
    background-color: #5b32bc;
}
.browser-logo {
    max-width: 30px;
    max-height: 82px;
}
.howto-tab {
    width: 100%;
    margin-bottom: 10px;
    border-bottom: 1px solid lightgray;
}
.howto-tab.active {
    border-bottom: 3px solid;
}
.howto-image {
    width: 100%;
}
.howto-image img {
    width: 100%;
}
.card {
    background: transparent;
    border-radius: 0;
    border: none;
}
.howto-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
}
.howto-icon.more1 {
    background: url('../img/howto/android_icon.png') no-repeat center center;
}
.howto-icon.more2 {
    background: url('../img/howto/ios_icon1.png') no-repeat center center;
}
.howto-icon.then {
    background: url('../img/howto/ios_icon2.png') no-repeat center center;
}
.howto-icon.ios-info {
    background: url('../img/howto/ios_icon.png') no-repeat center center;
}
.howto-icon.info {
    background: url('../img/howto/info_icon.png') no-repeat center center;
}
.howto-icon.padlock {
    background: url('../img/howto/lokot_icon.png') no-repeat center center;
}
.howto-icon.danger {
    background: url('../img/howto/danger_icon.svg') no-repeat center center;
}
.howto-icon.samsung {
    background: url('../img/howto/samsung_icon1.png') no-repeat center center;
}
.roticon {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

    display: inline-block;
    height: 150px;
    width: 150px;
}
.view-unsupported-browser {
    max-width: 450px;
    margin: 0 auto;
    width: 100%;
}
.font-gotham-black {
    font-family: 'Gotham-Black', sans-serif !important;
    font-weight: normal;
}
.font-gotham-bold {
    font-family: 'Gotham-Bold', sans-serif !important;
    font-weight: bold;
}

/* actual style file */
.spinner {
    -webkit-animation: rotate 1.5s linear infinite;
    animation: rotate 1.5s linear infinite;
    z-index: 2;
    position: relative;
    width: 100%;
    height: 100%;
}
.spinner .path {
    stroke: #2f00c8;
    stroke-linecap: round;
    -webkit-animation: dash 1.2s ease-in-out infinite;
    animation: dash 1.2s ease-in-out infinite;
}
@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-webkit-keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
.blur {
    -webkit-filter: blur(3px);
    filter: blur(3px);
}
.iframe-body {
    background: transparent;
}
.icon {
    display: block;
    height: 100%;
    width: auto;
}
.widget-commands-label {
    clear: both;
    width: 100%;
    padding: 10px;
    min-height: 50px;
}
.widget-commands-label .start-over {
    color: #444;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
    max-width: 120px;
    width: 100%;
    height: 30px;
    padding: 4px 0 4px 6px;
    text-align: left;
    border-radius: 100px;
}
.widget-commands-label .start-over img {
    width: 20px;
    height: 20px;
    margin-top: -3px;
}
.widget-commands-label .start-over:hover {
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4);
    color: black;
}
.widget-commands-label .start-over a,
.widget-commands-label .start-over a:hover {
    text-decoration: none;
}
.widget-commands-label form.delete-process {
    position: absolute;
    top: 10px;
    right: 10px;
}
.consent-wrapper {
    display: block;
    max-width: 90%;
    width: 100%;
    height: auto;
    margin: 10px auto;
}
.consent-wrapper .consent-box {
    display: block;
    width: 100%;
    padding: 10px;
}
.consent-wrapper h3 {
    text-align: center;
    font-weight: 400;
    color: #0b0b0b;
    margin: 30px;
}
.consent-wrapper .consent-inner-box {
    max-width: 360px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.iproov-step {
    min-height: 270px;
}

iproov-me {
    text-align: center;
    margin: 0 auto;
    display: block;
}
.id-verfy-button,
.continue-button {
    background: #9494d3;
    border: #9494d3 solid 1px;
    display: inline-block;
    text-align: center;
    max-width: 180px;
}
.id-verfy-button:hover,
.continue-button:hover {
    background: #7b78d3;
    border: #7b78d3 solid 1px;
}
input#iban_number {
    text-transform: uppercase;
}
button.btn-expanding span {
    max-width: 0;
    transition: max-width 0.3s;
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    padding: 0;
}
button.btn-expanding:hover span {
    max-width: 200px;
    padding-right: 7px;
}
.outer-border {
    border: 1px solid gray;
    border-radius: 3px;
}

/*idy theme*/
html,
body,
:root {
    font-family: 'GothamBlack', sans-serif !important;
}
.background-logo {
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/identyum-logo.svg') no-repeat center center;
    background-size: contain;
    width: 100%;
    height: 90%;
    margin: 1% 0 0 0;
    z-index: -2;
}
.background-logo-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fcfcfc;
    opacity: 0.91;
    z-index: -1;
}
.bg-idy-primary {
    background: #512da8;
}
.bg-idy-secondary {
    background: #3e2ada;
}
.bg-idy-info {
    background: #5a567c;
}
button.btn:hover {
    filter: brightness(115%);
}
button:focus {
    filter: brightness(107%);
    border: 1px solid #0062cc;
    border-image-repeat: stretch stretch;
    -webkit-box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}
.btn {
    box-sizing: border-box;
}
.btn.btn-flat {
    font-weight: 500;
    color: inherit;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
}
.hover-darken:hover {
    filter: brightness(95%);
}
.btn {
    padding: 0.74rem 2.14rem;
    font-size: 0.95rem;
}
.btn-idy-primary {
    color: #fff;
    background-color: #4531e1 !important;
    font-family: 'Gotham-Bold', sans-serif !important;
    font-style: normal;
    letter-spacing: 1.09px;
}
.btn-idy-primary:hover {
    color: rgb(224, 224, 224) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 15px rgba(109, 99, 255, 0.55)) !important;
}
.btn-idy-primary:focus {
    color: #fff;
    background-color: #4531e1 !important;
}
.btn-idy-secondary {
    color: #2b1f86;
    background-color: #ededf4 !important;
    border: 1px solid #cdc3ea;
    box-shadow: none;
    font-family: 'Gotham-Bold', sans-serif !important;
}
.btn-idy-secondary:hover {
    color: #3e2ada !important;
    box-shadow: none !important;
    filter: drop-shadow(0 3px 15px rgba(109, 99, 255, 0.1)) !important;
}
.no-outline:focus,
button:focus {
    outline: none !important;
    box-shadow: none !important;
    color: #2b1f86;
    background-color: #ededf4 !important;
    border: 1px solid #cdc3ea;
}
.link-idy-info {
    color: #5a567c !important;
    font-family: 'Gotham-Bold', sans-serif !important;
    text-decoration: underline;
}
.link-idy-info:hover {
    color: #2b1f86 !important;
    text-decoration: none;
}
.link-idy-info.disabled {
    color: currentColor;
    cursor: not-allowed;
    opacity: 0.5;
    text-decoration: none;
}
.link-idy-info.small {
    font-size: 15px;
}
.btn.btn-lg {
    padding: 0.95rem 2.4rem;
    font-size: 1rem;
}
.btn.btn-sm {
    padding: 0.4rem 1.5rem;
    font-size: 0.75rem;
}
.btn-rounded {
    border-radius: 9000px;
}
.btn-rounded1 {
    border-radius: 4px;
}
.btn-rounded2 {
    border-radius: 8px;
}
.btn-rounded3 {
    border-radius: 12px;
}
.btn-rounded4 {
    border-radius: 20px;
}
.faster1 {
    -webkit-animation-duration: 0.1s;
    -moz-animation-duration: 0.1s;
    -o-animation-duration: 0.1s;
    animation-duration: 0.1s;
}
.faster15 {
    -webkit-animation-duration: 0.15s;
    -moz-animation-duration: 0.15s;
    -o-animation-duration: 0.15s;
    animation-duration: 0.15s;
}
.faster2 {
    -webkit-animation-duration: 0.2s;
    -moz-animation-duration: 0.2s;
    -o-animation-duration: 0.2s;
    animation-duration: 0.2s;
}
.faster3 {
    -webkit-animation-duration: 0.3s;
    -moz-animation-duration: 0.3s;
    -o-animation-duration: 0.3s;
    animation-duration: 0.3s;
}
:root,
.mdc-checkbox {
    --mdc-theme-secondary: #512da8 !important;
}
.mdc-menu {
    min-width: 75px;
}
.mdc-menu-surface--open {
    z-index: 10;
}
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: #b00020;
    border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: #b00020;
    border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
    .mdc-notched-outline__leading,
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--textarea.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
    .mdc-notched-outline__trailing {
    border-color: #b00020;
    border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: #b00020;
    border-color: var(--mdc-theme-error, #b00020);
}
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
    .mdc-notched-outline__leading,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined.is-invalid:not(.mdc-text-field--disabled).mdc-text-field--focused
    .mdc-notched-outline__trailing {
    border-color: #b00020;
    border-color: var(--mdc-theme-error, #b00020);
}
.is-invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #b00020;
}
.consent-wrapper {
    position: relative;
}
.consent-wrapper .consent-box {
    position: absolute;
    width: 100%;
}
.text-idy-default {
    color: #545454 !important;
}
.text-idy-primary {
    font-family: 'Gotham-Black', sans-serif !important;
    font-weight: bold;
    color: #2b1f86 !important;
}
.text-idy-info {
    font-family: 'Gotham-Book', sans-serif !important;
    color: #5a567c !important;
    padding: 0 20px 0 20px;
}
.idy-icon {
    height: 14px;
    width: auto;
    display: inline-block;
}
.idy-icon svg {
    width: auto;
    height: 100%;
    margin-top: -2px;
}
.idy-icon-1 {
    height: 14px;
    width: auto;
    display: inline-block;
}
.idy-icon-1 svg {
    width: auto;
    height: 100%;
    margin-top: -6px;
}
.alert-idy {
    color: #512da8 !important;
    background-color: #e1bee7;
    border-color: #ce93d8;
}
.idy-floating-logo {
    background: url('/img/identyum-logo-new.svg') no-repeat center center;
    background-size: contain;
    width: 68px;
    height: 58px;
    margin: 0;
}