.loader {
    text-align: center;
    padding: 15px 0;
}

.loader-spinner {
    position: relative;
    margin: auto;
    width: 200px;
    height: 64px;
    transform: translate(-100px, -100px) scale(1) translate(100px, 100px);
}

.loader-spinner div {
    left: 0;
    right: 0;
    top: 0;
    margin: auto;
    position: absolute;
    animation: spinner linear 1s infinite;
    background: #0372e4;
    width: 6px;
    height: 12px;
    border-radius: 40%;
    transform-origin: 3px 27px;
}

@keyframes spinner {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.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: 0.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: #333;
    background-color: #f3f3f3;
    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;
}

h3.c2sms-keyword-code {
    font-size: 1.17em;
    line-height: 1.5em;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

a {
    cursor: pointer;
    transition: 0.3s;
    color: #0372e4;
    text-decoration: none;
}

a:hover,
a:focus {
    text-decoration: none;
}

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: 0.5;
}

button {
    appearance: none;
    border: 0;
    cursor: pointer;
}

button.btn,
button[class$="btn-"] {
    width: 100%;
    margin: 0 auto;
    min-height: 55px;
    background: linear-gradient(-180deg, #e8c818 0%, #e87615 100%);
    box-shadow: 0px 2px 6px rgba(90, 77, 1, 0.3);
    border: 2px solid #fcc601;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

button.btn>span,
button[class$="btn-"]>span {
    display: block;
    font-size: 0.5rem;
}

button.btn:disabled,
button[class$="btn-"]:disabled {
    filter: grayscale(1);
    opacity: 0.5;
}

button.btn+.btn,
button[class$="btn-"]+.btn {
    margin-top: 15px;
}

button.btn.revisit {
    font-size: 24px;
    margin-top: 15px;
}

.error-msg {
    color: #f0506f;
    margin-top: 15px;
    font-weight: bold;
    font-size: 0.9rem;
}

.instructions,
.pin_instruction {
    margin: 10px auto;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.1;
    color: #222;
    width: 100%;
    max-width: 300px;
}

.disclaimer,
.price_point,
.top-legals {
    font-size: 0.7rem;
    display: block;
}

.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: 16px;
    filter: brightness(1.1);
    display: inline;
    margin-bottom: -3px;
}

.disclaimer {
    padding: 10px 0;
    color: #999;
    text-align: center;
    width: 500px;
    max-width: 100dvw;
    font-size: 12px;
    line-height: 1.5;
    margin: auto;
}

.disclaimer a {
    color: #1e87f0;
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: 360px;
}

.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;
}

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;
}

main {
    margin-bottom: 97px;
}

main section.creative-area .header-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 15px;
    min-height: auto;
    width: 100%;
    padding: 50px 15px 32px;
    margin-bottom: 30px;
    background-color: #e7e7e7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1;
}

main section.creative-area .header-wrapper img.creative-img {
    display: block;
    height: 64px;
    object-fit: contain;
}

main section.creative-area .header-wrapper .header-desc-wrapper {
    text-align: left;
}

main section.creative-area .header-wrapper .header-desc-wrapper h1 {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #000;
}

main section.creative-area .header-wrapper .header-desc-wrapper .file-detail-wrapper p {
    font-size: 12px;
}

main section.creative-area .header-wrapper .header-desc-wrapper .file-detail-wrapper p em {
    font-style: normal;
    color: #3c70e5;
}

main .subscription-area {
    margin-top: 30px;
}

main .subscription-area .subscription-box {
    position: relative;
    padding: 20px 15px;
}

main .subscription-area .subscription-box .link-try-again {
    margin-top: 15px;
    font-size: 0.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: #222;
}

main .subscription-area .subscription-box .phone-input,
main .subscription-area .subscription-box .pin-input,
main .subscription-area .subscription-box .instructions .pin_instruction {
    width: 100%;
    max-width: 300px;
}

main .subscription-area .subscription-box .phone-input,
main .subscription-area .subscription-box .pin-input {
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid #0372e4;
    border-radius: 8px;
    display: flex;
    align-items: center;
}

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: #ececec;
    margin-right: 0.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 input {
    text-align: center;
    padding-right: 50px;
}

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: 15px;
}

footer {
    padding-bottom: 30px;
}

.overlay-true::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.overlay-true .subscription-box {
    position: relative;
    animation: shake-horizontal 0.75s both;
    z-index: 2;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

.overlay-true footer,
.overlay-true .switch-lang {
    position: relative;
    z-index: 2;
}

.overlay-true .switch-lang {
    padding: 5px 10px;
    border-radius: 4px;
}

.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);
    }
}

.waitResponse {
    font-style: italic;
    margin: 0;
    margin-left: -2em;
}

.waitResponse:before {
    content: "";
    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46YXV0bztiYWNrZ3JvdW5kOjAgMCIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCIgZGlzcGxheT0iYmxvY2siPgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjMiIHJ5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzcxYjNmZSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjkxNjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIzIiByeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM3MWIzZmUiIHRyYW5zZm9ybT0icm90YXRlKDMwIDUwIDUwKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjgzMzMzMzMzMzMzMzMzMzRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIzIiByeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM3MWIzZmUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDUwIDUwKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjc1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iMyIgcnk9IjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzFiM2ZlIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA1MCA1MCkiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC42NjY2NjY2NjY2NjY2NjY2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iMyIgcnk9IjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzFiM2ZlIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjAgNTAgNTApIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuNTgzMzMzMzMzMzMzMzMzNHMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjMiIHJ5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzcxYjNmZSIgdHJhbnNmb3JtPSJyb3RhdGUoMTUwIDUwIDUwKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjVzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIzIiByeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM3MWIzZmUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA1MCkiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC40MTY2NjY2NjY2NjY2NjY3cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iMyIgcnk9IjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzFiM2ZlIiB0cmFuc2Zvcm09InJvdGF0ZSgyMTAgNTAgNTApIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMzMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjMiIHJ5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzcxYjNmZSIgdHJhbnNmb3JtPSJyb3RhdGUoMjQwIDUwIDUwKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49Ii0wLjI1cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3JlY3Q+CiAgPHJlY3QgeD0iNDciIHk9IjI0IiByeD0iMyIgcnk9IjYiIHdpZHRoPSI2IiBoZWlnaHQ9IjEyIiBmaWxsPSIjNzFiM2ZlIiB0cmFuc2Zvcm09InJvdGF0ZSgyNzAgNTAgNTApIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMTswIiBrZXlUaW1lcz0iMDsxIiBkdXI9IjFzIiBiZWdpbj0iLTAuMTY2NjY2NjY2NjY2NjY2NjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KICA8cmVjdCB4PSI0NyIgeT0iMjQiIHJ4PSIzIiByeT0iNiIgd2lkdGg9IjYiIGhlaWdodD0iMTIiIGZpbGw9IiM3MWIzZmUiIHRyYW5zZm9ybT0icm90YXRlKDMwMCA1MCA1MCkiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIxOzAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMXMiIGJlZ2luPSItMC4wODMzMzMzMzMzMzMzMzMzM3MiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9yZWN0PgogIDxyZWN0IHg9IjQ3IiB5PSIyNCIgcng9IjMiIHJ5PSI2IiB3aWR0aD0iNiIgaGVpZ2h0PSIxMiIgZmlsbD0iIzcxYjNmZSIgdHJhbnNmb3JtPSJyb3RhdGUoMzMwIDUwIDUwKSI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjE7MCIga2V5VGltZXM9IjA7MSIgZHVyPSIxcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcmVjdD4KPC9zdmc+Cg==) no-repeat center;
    background-size: 110%;
    display: inline-block;
    width: 4em;
    height: 4em;
    vertical-align: middle;
}

.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;
}

/* ADDED */

.header {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 99;
    max-width: 600px;
}

.header-right {
    width: 83px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.langBtn {
    position: absolute;
    top: 0px;
    right: 20px;
    padding: 6px;
    border-radius: 5px;
    width: 50px;
    float: right;
    z-index: 0;
    font-size: 11px;
    border: 1px solid rgb(0 0 0 / 50%);
    color: rgb(0 0 0 / 50%);
}

.button {
    width: 100%;
    margin: 0 auto;
    min-height: 55px;
    background: linear-gradient(-180deg, #e8c818 0%, #e87615 100%);
    box-shadow: 0px 2px 6px rgba(90, 77, 1, 0.3);
    border: 2px solid #fcc601;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 24px;
    color: #fff;
    text-decoration: none;
}

select#select {
    margin: 10px auto;
    width: 100%;
    max-width: 280px;
    margin-bottom: 15px;
    height: fit-content;
    min-height: 40px;
    border-radius: 10px;
    text-align: center;
    font-size: 20px;
}

.price_points {
    font-size: 0.7rem;
    display: block;
    color: #999;
    margin-top: 15px;
}

.formElm {
    width: 100%;
    max-width: 310px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
    justify-content: center;
}


.formElm--prefix .msisdn {
    padding: 15px 15px 18px 115px;
    display: block;
    font-size: 23px;
    background-color: rgba(239, 239, 239, 0.83);
}

.formElm--prefix .prefixCode {
    display: block;
}

.formElm--prefix .prefixCode {
    background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI3LjQ0MiAyNy40NDIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI3LjQ0MiAyNy40NDI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiPgo8Zz4KCTxwYXRoIGQ9Ik0xOS40OTQsMEg3Ljk0OEM2Ljg0MywwLDUuOTUxLDAuODk2LDUuOTUxLDEuOTk5djIzLjQ0NmMwLDEuMTAyLDAuODkyLDEuOTk3LDEuOTk3LDEuOTk3aDExLjU0NiAgIGMxLjEwMywwLDEuOTk3LTAuODk1LDEuOTk3LTEuOTk3VjEuOTk5QzIxLjQ5MSwwLjg5NiwyMC41OTcsMCwxOS40OTQsMHogTTEwLjg3MiwxLjIxNGg1LjdjMC4xNDQsMCwwLjI2MSwwLjIxNSwwLjI2MSwwLjQ4MSAgIHMtMC4xMTcsMC40ODItMC4yNjEsMC40ODJoLTUuN2MtMC4xNDUsMC0wLjI2LTAuMjE2LTAuMjYtMC40ODJDMTAuNjEyLDEuNDI5LDEwLjcyNywxLjIxNCwxMC44NzIsMS4yMTR6IE0xMy43MjIsMjUuNDY5ICAgYy0wLjcwMywwLTEuMjc1LTAuNTcyLTEuMjc1LTEuMjc2czAuNTcyLTEuMjc0LDEuMjc1LTEuMjc0YzAuNzAxLDAsMS4yNzMsMC41NywxLjI3MywxLjI3NFMxNC40MjMsMjUuNDY5LDEzLjcyMiwyNS40Njl6ICAgIE0xOS45OTUsMjEuMUg3LjQ0OFYzLjM3M2gxMi41NDdWMjEuMXoiIGZpbGw9IiMwMDAwMDAiLz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KCTxnPgoJPC9nPgoJPGc+Cgk8L2c+Cgk8Zz4KCTwvZz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);
    width: 53px;
    height: 40px;
    background-position: center;
    background-size: 70%;
    background-repeat: no-repeat;
    margin-right: 0.5em;
}

.smartphone {
    top: -6px;
}

.prefixCode {
    padding: 8px;
    pointer-events: none;
    color: #000000;
    border: 1px solid #1A1A1A;
    border-right: 0px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.prefixCode img {
    width: 17px;
    vertical-align: middle;
    display: inline-block;
}

.prefixCode span {
    vertical-align: middle;
    padding-right: 2px;
    font-size: 23px;
    padding-left: 30px;
    color: #000;
}

.prefixCode::before {
    content: "";
    position: absolute;
    background-image: url("https://netssero.com/1000374/05ph15082025/phdcb/phone.png");
    background-repeat: no-repeat;
    display: flex;
    margin-right: 6px;
    width: 16px;
    height: 28px;
    background-size: contain;
    left: 10;
}

.msisdn {
    border: 1px solid #1A1A1A;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 8px;
    font-size: 18px;
}

.msisdn.pin {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.btn-wrapper {
    width: 100%;
}

.file-detail-wrapper .file-status {
    font-size: 16px !important;
    font-weight: bold;
    margin-bottom: 5px;
}



/* ADDED */
/* ====== INPUT CSS ====== */

@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type=checkbox],
    input[type=radio] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.switch),
    input[type=radio]:not(.switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.switch):after,
    input[type=radio]:not(.switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.switch):checked,
    input[type=radio]:not(.switch):checked {
        --o: 1;
    }

    input[type=checkbox]+label,
    input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.switch) {
        border-radius: 7px;
    }

    input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }

}

/* ====== EXTRA DEFAULT CSS ====== */


.lds-dual-ring {
    display: inline-block;
    width: 80px;
    height: 80px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 64px;
    height: 64px;
    margin: 8px;
    border-radius: 50%;
    border: 6px solid #fff;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.button_tnc {
    padding: 8px 15px;
    font-weight: bold;
    color: rgb(127, 127, 127);
    text-align: center;
    margin: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

// =============== CHECKBOX INPUT =========================
@supports (-webkit-appearance: none) or (-moz-appearance: none) {

    input[type=checkbox],
    input[type=radio] {
        --active: #275EFE;
        --active-inner: #fff;
        --focus: 2px rgba(39, 94, 254, .3);
        --border: #BBC1E1;
        --border-hover: #275EFE;
        --background: #fff;
        --disabled: #F6F8FF;
        --disabled-inner: #E1E6F9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }

    input[type=checkbox]:after,
    input[type=radio]:after {
        content: "";
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }

    input[type=checkbox]:checked,
    input[type=radio]:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: .3s;
        --d-t: .6s;
        --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
    }

    input[type=checkbox]:disabled,
    input[type=radio]:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }

    input[type=checkbox]:disabled:checked,
    input[type=radio]:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }

    input[type=checkbox]:disabled+label,
    input[type=radio]:disabled+label {
        cursor: not-allowed;
    }

    input[type=checkbox]:hover:not(:checked):not(:disabled),
    input[type=radio]:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }

    input[type=checkbox]:focus,
    input[type=radio]:focus {
        box-shadow: 0 0 0 var(--focus);
    }

    input[type=checkbox]:not(.switch),
    input[type=radio]:not(.switch) {
        width: 21px;
    }

    input[type=checkbox]:not(.switch):after,
    input[type=radio]:not(.switch):after {
        opacity: var(--o, 0);
    }

    input[type=checkbox]:not(.switch):checked,
    input[type=radio]:not(.switch):checked {
        --o: 1;
    }

    input[type=checkbox]+label,
    input[type=radio]+label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }

    input[type=checkbox]:not(.switch) {
        border-radius: 7px;
    }

    input[type=checkbox]:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }

    input[type=checkbox]:not(.switch):checked {
        --r: 43deg;
    }

    input[type=checkbox].switch {
        width: 38px;
        border-radius: 11px;
    }

    input[type=checkbox].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }

    input[type=checkbox].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }

    input[type=checkbox].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }

    input[type=radio] {
        border-radius: 50%;
    }

    input[type=radio]:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }

    input[type=radio]:checked {
        --s: .5;
    }

    //=========================================

    //== TOP POSITION ==
    .top_left {
        position: absolute;
        top: 10px;
        left: 10px;
    }

    .top_middle {
        position: relative;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 10px;
    }

    .top_right {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .top_left_text {
        font-size: 10px;
    }

    .top_right_text {
        font-size: 10px;
    }

    .top_middle_text {
        font-size: 10px;
    }


    //== CROSS BUTTON ==
    .close {
        width: 100%;
        max-width: 780px;
        margin: 0 auto;
        padding: 0 25px;
        text-align: ;
    }

    .cross_btn {
        position: absolute;
        top: 0;
        height: 24px;
        overflow: hidden;
        padding: 15px;
        cursor: pointer;
        z-index: 100;
        margin: 0;
    }

    .cross_btn::before,
    .cross_btn::after {
        content: "";
        position: absolute;
        height: 4px;
        width: 80%;
        top: 50%;
        left: 0;
        margin-top: -1px;
        background: ;
        border-radius: 5px;
    }

    .cross_btn::before {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .cross_btn::after {
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .cross_btn::before,
    .cross_btn::after {
        height: 4px;
        margin-top: -4px;
    }

    //================

    .disabled_btn {
        background: #C0C0C0 !important;
    }

    .rate_above_instructions {
        font-size: 11px;
    }

    .instructions {
        font-size: 15px;
        font-weight: bold;
    }

    .tnc_above_btn {
        font-size: 11px;
    }

    .checkbox_above_btn {
        font-size: 10px;
    }

    .rate_above_btn {
        font-size: 11px;
    }

    .exit_above_btn {
        font-size: 11px;
    }

    .exit_below_btn {
        font-size: 11px;
    }

    .checkbox_below_btn {
        font-size: 10px;
    }

    .rate_below_btn {
        font-size: 11px;
        font-weight: normal;
    }

    .tnc_below_btn {
        font-size: 11px;
    }

    .tnc_text {
        cursor: pointer;
        display: inline-block;
        padding: 15px;
        vertical-align: middle;
    }

    .tnc_btm {
        color: white;
        width: 100%;
        padding: 10px;
        display: block;
        max-width: 780px;
        text-align: center;
    }

    .lds-dual-ring {
        display: inline-block;
        width: 80px;
        height: 80px;
    }

    .lds-dual-ring:after {
        content: " ";
        display: block;
        width: 64px;
        height: 64px;
        margin: 8px;
        border-radius: 50%;
        border: 6px solid #fff;
        border-color: #fff transparent #fff transparent;
        animation: lds-dual-ring 1.2s linear infinite;
    }

    @keyframes lds-dual-ring {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .error {
        color: red;
    }

    .check_box_text {
        font-size: 10px;
        color: rgb(0 0 0 / 30%);
        max-width: 600px;
        margin: auto;
        margin-top: -20px;
        text-align: center;
        margin: auto;
    }
}