.tq-step h3+p {
    margin-top: 10px
}

.tq-step .btn {
    margin: 15px auto
}

.tq-step a.subscription-box-clickable {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    text-decoration: none;
    border: 0;
    z-index: 2
}

.PreLander {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100dvw;
    min-height: 100dvh
}

.PreLander .cog-loader {
    width: 150px;
    display: block;
    margin: 20px auto;
    transform-origin: center
}

.PreLander .cog-loader .cog path {
    fill: #0372e4
}

.PreLander .cog-loader .big-cog {
    transform-box: fill-box;
    transform-origin: center;
    animation: cogload 2s linear infinite
}

.PreLander .cog-loader .small-cog {
    transform-box: fill-box;
    transform-origin: center;
    animation: cogload2 3s linear infinite
}

.PreLander .bar {
    width: 220px;
    height: 15px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
    border: 1px solid #ccc;
    background-image: repeating-linear-gradient(-45deg, #0372e4, #0372e4 10px, #0061c1 10px, #0061c1 20px);
    animation: progress 2s linear infinite;
    background-size: 150% 100%
}

@keyframes progress {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: -70px 0px
    }
}

@keyframes cogload {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

@keyframes cogload2 {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(-360deg)
    }
}

.PreLander h2 {
    font-size: 2rem
}

.PreLander p {
    opacity: .6
}

.PreLander p strong {
    font-size: 1.1rem
}

*,
*::before,
*::after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
    text-size-adjust: none;
    -webkit-text-size-adjust: none
}

body {
    min-height: 100dvh;
    line-height: 1.1;
    font-weight: normal;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif !important;
    color: #2a3d50;
    background: #e1e6ee;
    letter-spacing: 0
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold
}

h1 {
    font-size: 2.125rem
}

h2 {
    font-size: 1.875rem
}

h3 {
    font-size: 1.5rem
}

h4 {
    font-size: 1.25rem
}

h5 {
    font-size: 1.125rem
}

h6 {
    font-size: 1rem
}

a {
    cursor: pointer;
    transition: .3s;
    color: #0372e4;
    text-decoration: none
}

a:hover,
a:focus {
    text-decoration: none
}

p+p {
    margin-top: 15px
}

p a {
    text-decoration: underline
}

input {
    flex: 1;
    min-width: 0;
    border: 0
}

input::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
    outline: none
}

input::placeholder {
    opacity: .5
}

button {
    appearance: none;
    border: 0;
    cursor: pointer
}

button.btn,
button[class$=btn-] {
    padding: 5px 15px;
    margin: 0 auto;
    min-height: 60px;
    background: #006ab1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .32);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.6rem;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none
}

button.btn>span,
button[class$=btn-]>span {
    display: block;
    font-size: .75rem
}

button.btn:disabled,
button[class$=btn-]:disabled {
    filter: grayscale(1);
    opacity: .5
}

button.btn:not(:disabled),
button[class$=btn-]:not(:disabled) {
    animation: heartbeat 2s linear infinite
}

button.btn+.btn,
button[class$=btn-]+.btn {
    margin-top: 15px
}

.error-msg {
    color: #f0506f;
    margin-top: 15px;
    font-weight: bold;
    font-size: .9rem
}

div[class^=label-] {
    margin: 0 auto 10px;
    font-size: 1.1rem;
    font-weight: bold
}

.disclaimer,
.price-point,
.top-legals {
    font-size: .7rem;
    display: block;
    text-align: justify;
    text-align-last: center
}

.disclaimer,
.disclaimer a,
.price-point,
.price-point a,
.top-legals,
.top-legals a {
    color: #999
}

.disclaimer a,
.price-point a,
.top-legals a {
    text-decoration: underline
}

.disclaimer img,
.price-point img,
.top-legals img {
    height: 14px;
    display: inline;
    margin-bottom: -3px
}

.container {
    padding: 0 15px;
    margin: 0 auto;
    width: 100%;
    max-width: 420px
}

.hidden {
    display: none !important
}

header .container {
    display: flex;
    justify-content: space-between;
    min-height: 60px;
    max-width: 1024px
}

header .header-left,
header .header-center,
header .header-right {
    display: flex;
    align-items: center;
    justify-content: center
}

header .header-left .service-logo {
    height: 25px;
    filter: brightness(0) saturate(100%) invert(66%) sepia(0%) saturate(1%) hue-rotate(166deg) brightness(90%) contrast(86%)
}

header .header-left .service-name {
    margin-left: 5px
}

header .header-center {
    width: 100%;
    padding: 0 5px
}

header .header-center .video-search {
    margin: 0 10px;
    width: 100%;
    max-width: 350px;
    height: 35px;
    border-radius: 5px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNTYgNjAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDU2IDYwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGlkPSJzZWFyY2giIGQ9Ik01MS4yLDUxLjhsLTEyLjUtMTNDNDYuMiwyOS45LDQ1LDE2LjUsMzYuMSw5UzEzLjksMi43LDYuNCwxMS43UzAsMzMuOSw5LDQxLjRjMy44LDMuMiw4LjYsNC45LDEzLjYsNC45CgljNC4zLDAsOC42LTEuMywxMi4xLTMuOGwxMi41LDEzYzEsMS4xLDIuOCwxLjIsMy45LDAuMlM1Mi4zLDUzLDUxLjIsNTEuOEw1MS4yLDUxLjhMNTEuMiw1MS44eiBNMjIuNiw5LjZjOC42LDAsMTUuNiw3LDE1LjYsMTUuNgoJcy03LDE1LjYtMTUuNiwxNS42UzcsMzMuOSw3LDI1LjJsMCwwQzcsMTYuNiwxMy45LDkuNiwyMi42LDkuNnoiLz4KPC9zdmc+Cg==) #d2d2d2 no-repeat;
    background-size: 25px;
    background-position: 8px
}

header .header-right .video-menu {
    width: 80px;
    height: 29px;
    margin-right: 10px;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIzLjAuNCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgMjMxIDgwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyMzEgODA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojRkZGRkZGO30KCS5zdDF7ZmlsbDojRkYzMzMzO30KPC9zdHlsZT4KPGcgaWQ9Ikdyb3VwZV80NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjg3Ljk1NSAxNikiPgoJPHJlY3QgaWQ9IlJlY3RhbmdsZV85IiB4PSItMjg0LjYiIHk9Ii02LjgiIGNsYXNzPSJzdDAiIHdpZHRoPSI2OS43IiBoZWlnaHQ9IjYzLjkiLz4KCTxnIGlkPSJ1c2VyLWFjY291bnQtYm94IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwKSI+CgkJPGcgaWQ9ImFjY291bnQtYm94Ij4KCQkJPHBhdGggaWQ9IlRyYWPDqV81OCIgY2xhc3M9InN0MSIgZD0iTS0yODcuNS02Ljd2NjEuNmMwLjEsNC45LDQuMiw4LjksOS4xLDguOGg2My42YzQuOSwwLjEsOS0zLjksOS4xLTguOFYtNi43CgkJCQljLTAuMS00LjktNC4yLTguOS05LjEtOC44aC02My42Qy0yODMuMy0xNS42LTI4Ny40LTExLjYtMjg3LjUtNi43eiBNLTIzMywxMC45YzAsNy4zLTUuOSwxMy4yLTEzLjEsMTMuMmMtMC4yLDAtMC4zLDAtMC41LDAKCQkJCWMtNy4zLDAuMi0xMy40LTUuNS0xMy42LTEyLjhzNS41LTEzLjQsMTIuOC0xMy42YzAuMywwLDAuNSwwLDAuOCwwYzcuMy0wLjIsMTMuNCw1LjQsMTMuNiwxMi43Qy0yMzMsMTAuNi0yMzMsMTAuNy0yMzMsMTAuOXoKCQkJCSBNLTI3My45LDQ2LjFjMC04LjgsMTguMi0xMy42LDI3LjMtMTMuNnMyNy4zLDQuOCwyNy4zLDEzLjZ2NC40aC01NC41di00LjRILTI3My45eiIvPgoJCTwvZz4KCTwvZz4KPC9nPgo8ZyBpZD0iR3JvdXBlXzQzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzMjkuMTA5IDE3LjkxNikiPgoJPHBhdGggaWQ9IlJlY3RhbmdsZV8xMiIgY2xhc3M9InN0MSIgZD0iTS0xOTMuNyw0NS41aDczLjZjMy45LDAsNywzLjEsNyw3bDAsMGMwLDMuOS0zLjEsNy03LDdoLTczLjZjLTMuOSwwLTctMy4xLTctN2wwLDAKCQlDLTIwMC43LDQ4LjYtMTk3LjYsNDUuNS0xOTMuNyw0NS41eiIvPgoJPHBhdGggaWQ9IlJlY3RhbmdsZV8xMyIgY2xhc3M9InN0MSIgZD0iTS0xOTMuNywxN2g3My42YzMuOSwwLDcsMy4xLDcsN2wwLDBjMCwzLjktMy4xLDctNyw3aC03My42Yy0zLjksMC03LTMuMS03LTdsMCwwCgkJQy0yMDAuNywyMC4yLTE5Ny42LDE3LTE5My43LDE3eiIvPgoJPHBhdGggaWQ9IlJlY3RhbmdsZV8xNCIgY2xhc3M9InN0MSIgZD0iTS0xOTMuNy0xMS40aDczLjZjMy45LDAsNywzLjEsNyw3bDAsMGMwLDMuOS0zLjEsNy03LDdoLTczLjZjLTMuOSwwLTctMy4xLTctN2wwLDAKCQlDLTIwMC43LTguMy0xOTcuNi0xMS40LTE5My43LTExLjR6Ii8+CjwvZz4KPC9zdmc+Cg==) no-repeat
}

header .switch-lang {
    padding: 5px 10px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .25)
}

main {
    min-height: 110vh;
    margin-bottom: 10px;
}

main section.creative-area .creative-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: -25px auto
}

main section.creative-area img {
    display: block;
    width: 100%;
    position: absolute;
    margin: auto
}

main section.creative-area .download-img {
    animation: 2.3s move-bottom;
    animation-fill-mode: forwards
}

main section.creative-area .folder-img {
    animation: 2.3s fadeIn;
    animation-fill-mode: forwards;
    opacity: 0;
    width: 150px
}

main .subscription-area {
    margin-top: 30px
}

main .subscription-area .subscription-box {
    position: relative;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, .25);
    padding: 0 0 30px
}

main .subscription-area .subscription-box .tq-step {
    padding: 30px 15px
}

main .subscription-area .subscription-box .link-try-again {
    margin-top: 15px;
    font-size: .8rem;
    display: inline-block
}

main .subscription-area .subscription-box .link-try-again.link {
    text-decoration: underline
}

main .subscription-area .subscription-box a *:not(button, .btn) {
    color: #44709c;
}

main .subscription-area .subscription-box .phone-input,
main .subscription-area .subscription-box .pin-input,
main .subscription-area .subscription-box button,
main .subscription-area .subscription-box div[class^=label-],
main .subscription-area .subscription-box .price-point {
    width: 100%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto
}

main .subscription-area .subscription-box div.label-msisdn,
main .subscription-area .subscription-box div.label-pin {
    background-color: #44709c;
    max-width: none;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 15px;
    margin-bottom: 20px
}

main .subscription-area .subscription-box .phone-input,
main .subscription-area .subscription-box .pin-input {
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #006ab1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    animation: pulse-border 2s linear infinite
}

main .subscription-area .subscription-box .input--error {
    border-color: #ff0000;
    animation: pulse-border-red 2s linear infinite
}

main .subscription-area .subscription-box .phone-input .phone,
main .subscription-area .subscription-box .phone-input .pin,
main .subscription-area .subscription-box .pin-input .phone,
main .subscription-area .subscription-box .pin-input .pin {
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0);
    margin-right: .5rem
}

main .subscription-area .subscription-box .phone-input .pin,
main .subscription-area .subscription-box .pin-input .pin {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik00MzIsMzI3SDgwYy00NC4xLDAtODAsMzUuOS04MCw4MHMzNS45LDgwLDgwLDgwaDM1MmM0NC4xLDAsODAtMzUuOSw4MC04MFM0NzYuMSwzMjcsNDMyLDMyN3ogTTEwNiw0MzIKCWMtMTMuOCwwLTI1LTExLjItMjUtMjVzMTEuMi0yNSwyNS0yNXMyNSwxMS4yLDI1LDI1UzExOS44LDQzMiwxMDYsNDMyeiBNMjA2LDQzMmMtMTMuOCwwLTI1LTExLjItMjUtMjVzMTEuMi0yNSwyNS0yNQoJczI1LDExLjIsMjUsMjVTMjE5LjgsNDMyLDIwNiw0MzJ6IE0zMDYsNDMyYy0xMy44LDAtMjUtMTEuMi0yNS0yNXMxMS4yLTI1LDI1LTI1czI1LDExLjIsMjUsMjVTMzE5LjgsNDMyLDMwNiw0MzJ6IE00MDYsNDMyCgljLTEzLjgsMC0yNS0xMS4yLTI1LTI1czExLjItMjUsMjUtMjVzMjUsMTEuMiwyNSwyNVM0MTkuOCw0MzIsNDA2LDQzMnogTTM1MSwxMjdoLTIwdi0yN2MwLTQxLjQtMzMuNi03NS03NS03NXMtNzUsMzMuNi03NSw3NXYyNwoJaC0yMGMtOC4zLDAtMTUsNi43LTE1LDE1djExOWMwLDguMyw2LjcsMTUsMTUsMTVoMTkwYzguMywwLDE1LTYuNywxNS0xNVYxNDJDMzY2LDEzMy43LDM1OS4zLDEyNywzNTEsMTI3eiBNMjcxLDIwNi4xdjUuOQoJYzAsOC4zLTYuNywxNS0xNSwxNXMtMTUtNi43LTE1LTE1di01LjljLTUuOC0yLjEtMTAtNy42LTEwLTE0LjFjMC04LjMsNi43LTE1LDE1LTE1aDIwYzguMywwLDE1LDYuNywxNSwxNQoJQzI4MSwxOTguNSwyNzYuOCwyMDQuMSwyNzEsMjA2LjFMMjcxLDIwNi4xeiBNMzAxLDEyN2gtOTB2LTI3YzAtMjQuOCwyMC4yLTQ1LDQ1LTQ1czQ1LDIwLjIsNDUsNDVWMTI3eiIvPgo8L3N2Zz4K)
}

main .subscription-area .subscription-box .phone-input input,
main .subscription-area .subscription-box .pin-input input {
    outline: none;
    font-size: 2.6ch;
    background-color: rgba(0, 0, 0, 0)
}

main .subscription-area .subscription-box .phone-input input::placeholder,
main .subscription-area .subscription-box .pin-input input::placeholder {
    font-size: 1.4ch
}

main .subscription-area .subscription-box .phone-input .checkmark-container,
main .subscription-area .subscription-box .pin-input .checkmark-container {
    margin-right: 5px
}

main .subscription-area .subscription-box .phone-input+button,
main .subscription-area .subscription-box .pin-input+button {
    margin-top: 15px
}

main .subscription-area .subscription-box .pin-input {
    max-width: 200px
}

main .subscription-area .subscription-box .pin-input input {
    text-align: center;
    padding-right: 38px
}

main .subscription-area .subscription-box .mo-instructions {
    margin-top: 15px
}

main .subscription-area .subscription-box a[class^=step-].show-true,
main .subscription-area .subscription-box a[class^=step-].hide-false {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

main .subscription-area .subscription-box a[class^=step-].show-false,
main .subscription-area .subscription-box a[class^=step-].hide-true {
    display: none
}

main .subscription-area .subscription-box .price-point {
    margin-top: 20px
}

footer {
    padding-bottom: 30px
}

.overlay-true::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .55);
    backdrop-filter: blur(5px);
    z-index: 1
}

.overlay-true .subscription-box {
    position: relative;
    animation: shake-horizontal .75s both;
    z-index: 2
}

.overlay-true footer,
.overlay-true .switch-lang {
    position: relative;
    z-index: 2
}

.skip-prelander-false header,
.skip-prelander-false main,
.skip-prelander-false footer {
    display: none
}

.page-ar {
    direction: rtl
}

.page-ar header {
    direction: ltr
}

.page-ar .phone-input,
.page-ar .pin-input {
    direction: ltr
}

@keyframes shake-horizontal {

    from,
    to {
        transform: translate(0, 0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        transform: translate(-10px, 0)
    }

    20%,
    40%,
    60%,
    80% {
        transform: translate(10px, 0)
    }
}

.heartbeat {
    animation: heartbeat 1.2s ease-in-out infinite both
}

@keyframes heartbeat {
    from {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-transform-origin: center center;
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    10% {
        -webkit-transform: scale(0.95);
        transform: scale(0.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    17% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }

    33% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    45% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
    }

    40% {
        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0), 0 0 0 0 #006ab1
    }

    80% {
        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0)
    }
}

@keyframes pulse-border-red {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0)
    }

    40% {
        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0), 0 0 0 0 #b10000
    }

    80% {
        box-shadow: 0 0 0 50px rgba(0, 0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0)
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0), 0 0 0 30px rgba(0, 0, 0, 0)
    }
}

@keyframes fadeIn {
    80% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes move-bottom {
    80% {
        transform: scale(1) translate(0)
    }

    100% {
        transform: scale(0.4) translate(147px, 82px)
    }
}

.Input-module_wrapper__bzo7K input,
.Input-module_wrapper__bzo7K select {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin: 8px 0;
    padding: 12px 20px;
    width: 100%
}

.Input-module_wrapper__bzo7K input[type=submit] {
    background-color: #4caf50;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin: 8px 0;
    padding: 14px 20px;
    width: 100%
}

.Input-module_wrapper__bzo7K input[type=submit]:hover {
    background-color: #005f96
}

.Input-module_wrapper__bzo7K .Input-module_error__rkwNz {
    color: red
}

.PINEntry-module_pinInputWrap__AqJGH {
    direction: ltr;
    margin: auto;
    max-width: 200px;
    position: relative
}

.PINEntry-module_pinInputWrap__AqJGH:after {
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNNDMyIDMyN0g4MGMtNDQuMTEyIDAtODAgMzUuODg4LTgwIDgwczM1Ljg4OCA4MCA4MCA4MGgzNTJjNDQuMTEyIDAgODAtMzUuODg4IDgwLTgwcy0zNS44ODgtODAtODAtODB6TTEwNiA0MzJjLTEzLjgwNyAwLTI1LTExLjE5My0yNS0yNXMxMS4xOTMtMjUgMjUtMjUgMjUgMTEuMTkzIDI1IDI1LTExLjE5MyAyNS0yNSAyNXptMTAwIDBjLTEzLjgwNyAwLTI1LTExLjE5My0yNS0yNXMxMS4xOTMtMjUgMjUtMjUgMjUgMTEuMTkzIDI1IDI1LTExLjE5MyAyNS0yNSAyNXptMTAwIDBjLTEzLjgwNyAwLTI1LTExLjE5My0yNS0yNXMxMS4xOTMtMjUgMjUtMjUgMjUgMTEuMTkzIDI1IDI1LTExLjE5MyAyNS0yNSAyNXptMTAwIDBjLTEzLjgwNyAwLTI1LTExLjE5My0yNS0yNXMxMS4xOTMtMjUgMjUtMjUgMjUgMTEuMTkzIDI1IDI1LTExLjE5MyAyNS0yNSAyNXptLTU1LTMwNWgtMjB2LTI3YzAtNDEuMzU1LTMzLjY0NS03NS03NS03NXMtNzUgMzMuNjQ1LTc1IDc1djI3aC0yMGMtOC4yODQgMC0xNSA2LjcxNi0xNSAxNXYxMTljMCA4LjI4NCA2LjcxNiAxNSAxNSAxNWgxOTBjOC4yODQgMCAxNS02LjcxNiAxNS0xNVYxNDJjMC04LjI4NC02LjcxNi0xNS0xNS0xNXptLTgwIDc5LjEyOFYyMTJjMCA4LjI4NC02LjcxNiAxNS0xNSAxNXMtMTUtNi43MTYtMTUtMTV2LTUuODcyYy01LjgyMi0yLjA2MS0xMC03LjYtMTAtMTQuMTI4IDAtOC4yODQgNi43MTYtMTUgMTUtMTVoMjBjOC4yODQgMCAxNSA2LjcxNiAxNSAxNSAwIDYuNTI4LTQuMTc4IDEyLjA2Ny0xMCAxNC4xMjh6TTMwMSAxMjdoLTkwdi0yN2MwLTI0LjgxMyAyMC4xODctNDUgNDUtNDVzNDUgMjAuMTg3IDQ1IDQ1djI3eiIvPjwvc3ZnPg==) no-repeat 50%;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 90%;
    bottom: 0;
    content: "";
    display: block;
    height: 40px;
    left: 20px;
    margin: auto 0;
    position: absolute;
    top: 0;
    width: 40px
}

.PINEntry-module_pinInput__TnMk7 {
    align-items: center;
    background-color: hsla(0, 0%, 93%, .8);
    border: 2px solid #0172e5;
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 1px 0 #fff;
    box-sizing: border-box;
    display: flex;
    font-size: 22px;
    height: 55px;
    justify-content: center;
    margin: auto;
    outline: none;
    padding: 8px;
    text-align: center;
    text-indent: 40px;
    width: 100%
}

.PINEntry-module_pinInput__TnMk7::-moz-placeholder {
    font-size: 20px
}

.PINEntry-module_pinInput__TnMk7::placeholder {
    font-size: 20px
}

.Select-module_wrapper__FuUXB input,
.Select-module_wrapper__FuUXB select {
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin: 8px 0;
    padding: 12px 20px;
    width: 100%
}

.Select-module_wrapper__FuUXB input[type=submit] {
    background-color: #4caf50;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    margin: 8px 0;
    padding: 14px 20px;
    width: 100%
}

.Select-module_wrapper__FuUXB input[type=submit]:hover {
    background-color: #005f96
}

.Select-module_wrapper__FuUXB .Select-module_error__GpAw6 {
    color: red
}

.phone-input {
    display: flex;
    margin: auto;
    overflow: hidden;
    border: 1px solid #dbdbdb;
    border-radius: 25px;
    align-items: center
}

.phone-input * {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em
}

.phone-input .phone {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI3LjQ0MiAyNy40NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI3LjQ0MiAyNy40NDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40OTQsMEg3Ljk0OEM2Ljg0MywwLDUuOTUxLDAuODk2LDUuOTUxLDEuOTk5djIzLjQ0NmMwLDEuMTAyLDAuODkyLDEuOTk3LDEuOTk3LDEuOTk3aDExLjU0NiAgIGMxLjEwMywwLDEuOTk3LTAuODk1LDEuOTk3LTEuOTk3VjEuOTk5QzIxLjQ5MSwwLjg5NiwyMC41OTcsMCwxOS40OTQsMHogTTEwLjg3MiwxLjIxNGg1LjdjMC4xNDQsMCwwLjI2MSwwLjIxNSwwLjI2MSwwLjQ4MSAgIHMtMC4xMTcsMC40ODItMC4yNjEsMC40ODJoLTUuN2MtMC4xNDUsMC0wLjI2LTAuMjE2LTAuMjYtMC40ODJDMTAuNjEyLDEuNDI5LDEwLjcyNywxLjIxNCwxMC44NzIsMS4yMTR6IE0xMy43MjIsMjUuNDY5ICAgYy0wLjcwMywwLTEuMjc1LTAuNTcyLTEuMjc1LTEuMjc2czAuNTcyLTEuMjc0LDEuMjc1LTEuMjc0YzAuNzAxLDAsMS4yNzMsMC41NywxLjI3MywxLjI3NFMxNC40MjMsMjUuNDY5LDEzLjcyMiwyNS40Njl6ICAgIE0xOS45OTUsMjEuMUg3LjQ0OFYzLjM3M2gxMi41NDdWMjEuMXoiIGZpbGw9IiMwMDAwMDAiLz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    width: 50px;
    height: 50px;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    background-color: #ececec;
    margin-right: .5em
}

.phone-input .flag {
    width: 50px;
    height: 50px;
    font-size: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center
}

.phone-input .country-code {
    color: #acacac;
    margin-left: .5em
}

.phone-input input.text-input {
    flex: 1;
    min-width: 0;
    margin-left: .5em;
    margin-right: 2px;
    border: 0;
    outline: none
}

.phone-input .checkmark-container {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.phone-input .checkmark-container img {
    width: 100%;
    height: 100%;
    display: inline-block
}

.checkmark__circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;
    fill: none;
    animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}

.checkmark__icon,
.errormark__icon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}

.checkmark__check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0
    }
}

@keyframes scale {

    0%,
    100% {
        transform: none
    }

    50% {
        transform: scale3d(1.1, 1.1, 1)
    }
}

@keyframes fill {
    100% {
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}


.loader {
    /* display: flex; */
     display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(3px);
}

.loader__inner {
    display: inline-block;
    width: 30vmin;
    height: 30vmin;
    border: 3vmin solid rgba(255, 255, 255, .3);
    border-radius: 65%;
    border-top-color: #00e2ff;
    border-bottom-color: #ffbb00;
    transition: border-radius 0.5s ease-in-out, transform 0.5s ease-in-out;
    -webkit-transition: border-radius 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
    animation: spin 1s ease-in-out infinite alternate;
    -webkit-animation: spin 1s ease-in-out infinite alternate;
}

@keyframes spin {
    to { 
        transform: rotate(360deg); border-radius: 20%; 
    }
}

@-webkit-keyframes spin {
    to { 
        -webkit-transform: rotate(360deg); border-radius: 20%; 
    }
}
.attention {
    font-size: 13px;
    line-height: 1;
    color: red;
    opacity: 0;
    margin: 10px;
    margin-top: 0;
    padding: 0;
}

.attention--show {
    -webkit-animation: blink-1 0.6s both;
    animation: blink-1 0.6s both;
}


@-webkit-keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

@keyframes blink-1 {

    0%,
    50%,
    100% {
        opacity: 1;
    }

    25%,
    75% {
        opacity: 0;
    }
}

.messageBox {
    /* display: flex; */
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(4.5px);
    background: rgba(0, 0, 0, .85);
    flex-direction: column;
    box-sizing: border-box;
}

.message__content {
    width: 90%;
    max-width: 350px;
    padding: 25px 20px;
    margin-top: calc( var(--vh,100vh) * -0.2);
    color: #000;
    background-color: #fff;
    border-radius: 15px;
    will-change: transform;
    place-self: center;
    animation-name: fadeInDown;
    animation-duration: 0.8s;
    animation-delay: 0.4s;
    animation-fill-mode: both;
    box-sizing: border-box;
}

.message__title {
    margin: 10px 0 5px;
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    color: #222222;
}

.message__close {
    position: absolute;
    width: 21px;
    height: 21px;
    font-size: 0;
    color: rgba(0, 0, 0, 0);
    cursor: pointer;
    padding: 12px;
    top: 0px;
    right: 0px;
    background: #ffffff;
    border: #fff 2px solid;
    box-sizing: border-box;
}
.message__close::before,
.message__close::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background-color: #393D3F;
    transform: translateX(-50%) rotate(-45deg);
}
  
.message__close::after {
    transform: translateX(-50%) rotate(45deg);
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    50% { opacity: 1; }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

