@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:wght@400;800&display=swap');

        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline
        }

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block
        }

     

        body * {
            line-height: 135%;
            box-sizing: border-box
        }

        body {
            background: #F8F8F8;
            font-family: 'Inter', sans-serif;
            font-size: 12px;
            font-weight: 400;
            color: #000;
            text-align: center;
            -webkit-touch-callout: none;
            -webkit-text-size-adjust: none;
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        * {
            outline: 0
        }

        ol,
        ul {
            list-style: none
        }

        blockquote,
        q {
            quotes: none
        }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: '';
            content: none
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        .clearfix::after {
            content: "";
            clear: both;
            display: table
        }

        #directsubscribe,
        #doubleconfirmation,
        #numberentry,
        #pinentry,
        #mo,
        #congrats,
        #clicktag,
        #subscriptionpolling,
        #blocker,
        #popup,
        #redirect,
        #redirectreturn,
        #redirectservice,
        #redirectxhrreturn,
        #immediatesubscribe,
        #alreadysubscribed,
        #no3g,
        #wifipolling,
        #close,
        #terminate {
            display: none
        }

        .show-directsubscribe #directsubscribe,
        .show-doubleconfirmation #doubleconfirmation,
        .show-numberentry #numberentry,
        .show-pinentry #pinentry,
        .show-mo #mo,
        .show-congrats #congrats,
        .show-clicktag #clicktag,
        .show-subscriptionpolling #subscriptionpolling,
        .blocker #blocker,
        .show-popup #popup,
        .show-redirect #blocker,
        .show-redirectreturn #blocker,
        .show-redirectservice #blocker,
        .show-redirectxhrreturn #blocker,
        .show-immediatesubscribe #blocker,
        .show-alreadysubscribed #alreadysubscribed,
        .show-no3g #no3g,
        .show-wifipolling #wifipolling,
        .show-terminate #terminate {
            display: flex;
            flex-direction: column
        }

        #numberentry,
        #pinentry,
        #congrats,
        #directsubscribe,
        #doubleconfirmation {
            gap: 15px
        }

        #container {
            display: flex;
            flex-direction: column;
            min-height: 100%;
            overflow-x: hidden
        }

        .states_wrap {
            display: flex;
            flex-direction: column;
            width: 100%;
            max-width: 420px;
            padding: 0px;
            gap: 20px;
            justify-items: center;
            justify-content: center;
            align-items: center
        }

        #creative_wrap {
            display: flex;
            flex-direction: column;
            flex: 1;
            align-items: center;
            background-color: #F8F8F8
        }

        #close {
            width: 20px;
            height: 20px;
            background: #000;
            border-radius: 100%;
            border: 1px solid #fff;
            text-align: center;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 99
        }

        #close::after {
            content: "x";
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            font-weight: bold;
            color: #fff;
            text-decoration: none;
            display: inline-block;
            padding: 1px 0 0
        }

        .show-terminate::after {
            background-color: rgba(39, 39, 39, 0)
        }

        #service-content-wrap {
            background-color: #fff
        }

        .header {
            background: #fff;
            text-align: left;
            display: flex;
            padding: 20px 10px;
            width: 100%;
            gap: 12px;
            justify-content: space-between;
            align-items: center;
            opacity: .5;
            position: relative
        }

        .logo {
            width: 80px;
            height: 20px;
            margin: 0 !important;
            flex-shrink: 0;
            background-size: contain;
            border-radius: 4px;
        }

        .content {
            width: 48px;
            color: #000
        }

        #terminate-title p {
            font-size: 14px
        }

        #blocker,
        #terminate {
            width: 300px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate3d(-50%, -50%, 0) !important;
            z-index: 9999
        }

        #blocker p,
        #terminate p {
            display: block;
            font-size: 9pt;
            color: #fff;
            padding: 0
        }

        .review {
            padding: 20px
        }

        h1.quote {
            font-size: 30px
        }

        .box-top {
            padding-bottom: 10px;
            text-align: left
        }

        .profile {
            display: flex
        }

        .name-user {
            font-weight: 900;
            padding: 10px 0 0 20px;
            display: flex;
            flex-direction: column
        }

        .profile-img {
            padding-bottom: 10px
        }

        p.contents {
            text-align: left
        }

        .preloader {
            width: 60px;
            height: 60px;
            background: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/loader.svg) center no-repeat;
            background-size: 60px auto;
            position: relative;
            margin: 0 auto 10px;
            box-sizing: inherit
        }

        .player__loader {
            width: 60px;
            height: 60px;
            background: url('//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/loader.svg') center no-repeat;
            background-size: 60px auto;
            position: absolute;
            top: calc(50% - 30px);
            right: calc(50% - 30px)
        }

        .show {
            display: block !important
        }

       


        .fade-in {
            -webkit-animation: fade-in .3s cubic-bezier(0.39, 0.575, 0.565, 1) 1s both;
            animation: fade-in .3s cubic-bezier(0.39, 0.575, 0.565, 1) 1s both
        }

        .player__loader {
            display: none
        }

        .player__play {
            background: url('//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/play-icon.svg') no-repeat center;
            background-size: contain;
            width: 100px;
            height: 100px;
            position: relative
        }

        .player__direct,
        .player__direct_design {
            width: 100%;
            height: 100%;
            position: absolute;
            background: #000;
            background-size: cover;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 999
        }

        @-webkit-keyframes scroller {
            0% {
                -webkit-transform: translate3d(0, 0, 0)
            }

            99% {
                -webkit-transform: translate3d(0, -400px, 0)
            }

            100% {
                -webkit-transform: translate3d(0, 0, 0)
            }
        }

        @keyframes scroller {
            0% {
                transform: translate3d(0, 0, 0)
            }

            99% {
                transform: translate3d(0, -400px, 0)
            }

            100% {
                transform: translate3d(0, 0, 0)
            }
        }

        #creative {
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            gap: 20px;
            padding: 20px;
            align-items: center;
            align-self: center;
            margin: 0 auto;
            border-top-right-radius: 20px;
            border-top-left-radius: 20px;
            background-color: #fff
        }

        #design {
            position: relative;
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            flex: 1 1
        }

        .show-doubleconfirmation #design,
        .show-numberentry #design,
        .show-pinentry #design,
        .show-congrats #design,
        .show-subscriptionpolling #design {
            flex: none
        }

        #external-links {
            display: flex;
            padding: 10px 10px 0;
            justify-content: center;
            flex-direction: row;
            gap: 10px
        }

        #external-links li {
            display: inline-block
        }

        #external-links li a {
            color: #aaa
        }

        #footer {
            display: flex;
            flex-direction: column;
            max-width: 1200px;
            font-size: 11px;
            color: #aaa;
            gap: 10px;
            border-top: 1px solid #e6e6e6;
            padding: 20px 20px 0
        }

        .player-wrap {
            height: 100%
        }

        .creative_header {
            width: 100%;
            align-items: center;
            align-self: center;
            background: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/hero.svg);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            aspect-ratio: 2 / 1;
            width: 100%;
            max-width: 480px
        }

        .design__header_wrap {
            display: flex;
            justify-content: space-between;
            width: 100%
        }

        .design__title {
            display: flex;
            font-size: 9pt;
            line-height: 140%;
            text-align: left;
            color: #fff;
            flex-grow: 1;
            justify-content: center;
            flex-direction: column
        }

        .design__price-point {
            padding: 2px 10px;
            text-align: center;
            color: #ccc;
            border-bottom: 3px solid #36ab04;
            background-color: #2b2b2b
        }

        .price-point {
            font-size: 12px;
            display: none
        }

        #pin-msg,
        #resend-msg {
            color: #005CEA
        }

        #resend-msg span {
            text-decoration: underline
        }

        .show-numberentry .price-point,
        .show-terminate .price-point,
        .show-pinentry .price-point,
        .show-directsubscribe .price-point,
        .show-doubleconfirmation .price-point {
            display: flex;
            flex-direction: column
        }

        .message {
            color: #ccc
        }

        .congrats-msg {
            font-family: 'Inter', sans-serif;
            font-weight: 700;
            color: #fff;
            font-size: 10.5pt;
            line-height: calc(10.5pt * 1.3);
            padding: 0 10px;
            display: none
        }

        .show-congrats .congrats-msg {
            display: block
        }

        .msg {
            margin-top: 10px
        }

        @keyframes fill-bar-buffer {
            from {
                width: 0
            }

            to {
                width: 100%
            }
        }

        @keyframes fill-bar {
            from {
                width: 0
            }

            to {
                width: 2%
            }
        }

        .states {
            width: 100%;
            padding: 20px;
            border-radius: 18px;
            background: #fff;
            border: 1px solid #e6e6ea;
            box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
            max-width: 420px;
            z-index: 25;
            font-size: 13px;
            color: black;
            font-weight: 500;
            font-family: 'Inter', sans-serif
        }

        .btn {
            display: flex;
            flex-direction: column;
            border-radius: 10px;
            border: 0;
            height: 70px;
            width: 100%;
            max-width: 420px;
            color: #fff;
            background-color: #5fbd15;
            text-decoration: none;
            font-family: 'Inter', sans-serif;
            font-size: 24px;
            font-weight: 700;
            flex-grow: 1;
            justify-content: center;
            align-items: center;
            position: relative;
            text-align: center;
            margin: 0 auto;
            animation: pulse 1s ease-in-out infinite;
            -webkit-animation: pulse 1s ease-in-out infinite;
            transition: .2s
        }

        .btn div {
            width: 100%;
            display: flex;
            align-items: center
        }

        .btn span.subtxt {
            display: block;
            font-size: .9rem;
            font-weight: 400;
            text-transform: none;
            opacity: .7
        }

        .submit-pin_disabled,
        button:disabled,
        .btn_disable {
            background: #D0D0D0 !important;
            cursor: not-allowed;
            color: #fff;
            animation: none;
            -webkit-animation: none
        }

        .submit-pin_disabled div span,
        button:disabled div span {
            text-indent: unset
        }

        .submit-pin_disabled div::after,
        button:disabled div::after {
            display: none
        }

        #submit-pin.btn div::after {
            background: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/btn-play_dark.svg) center no-repeat;
            background-size: contain
        }

        #submit-number p {
            font-size: 13px;
            font-weight: normal;
            text-transform: none;
            line-height: 11px
        }

        .numberentry-message,
        .pinentry-message {
            margin: 5px 0 10px;
            padding: 0 10px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 10.5pt;
            line-height: calc(10.5pt * 1.3);
            font-weight: 700;
            text-shadow: 0 0 5px #000
        }

        .numberentry-acceptmsg {
            display: none;
            font-size: 10.5pt;
            line-height: calc(10.5pt * 1.3);
            color: #fff;
            font-weight: 300;
            margin: 10px 0 0;
            padding: 0 10px
        }

        .show-numberentry .state-header,
        .show-pinentry .state-header {
            display: flex
        }

        input#input-number::placeholder {
            font-weight: 500;
            color: #5fbd15
        }

        #readMoreToggle {
            font-size: 11px;
            color: #aaa;
            text-decoration: underline;
            margin-bottom: 10px
        }

        #congrats-title,
        .form_header h1 {
            color: #000;
            font-size: 20px;
            line-height: 130%;
            font-family: 'Poppins', sans-serif !important;
            font-weight: 800;
            letter-spacing: -0.01em
        }

        .state-header {
            display: flex;
            flex-direction: column;
            gap: 10px;
            color: #000;
            display: none
        }

        .state-header p {
            display: none;
            font-size: 13px
        }

        .pin-state-message {
            display: none;
            margin: 10px 0 0;
            color: #b5b1b1
        }

        .pin-state-message div {
            color: #b5b1b1;
            text-decoration: underline
        }

        .show-pinentry .pin-state-message {
            display: block
        }

        #operatorselection-message {
            margin: 0 0 10px;
            font-size: 14px
        }

        input::placeholder {
            color: #c1c1c17d
        }

        input,
        .text-input {
            font-family: 'Inter', sans-serif;
            background: 0;
            position: relative;
            border: 0;
            font-weight: 600;
            font-size: 14px;
            box-sizing: border-box;
            width: 100%
        }

        .text-input.pin_input {
            justify-content: center
        }

        #input-number::before {
            content: '';
            background: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/phone-icon.png) left no-repeat;
            position: absolute;
            height: 10px;
            width: 10px;
            left: 0
        }

        .input-label {
            background: #d0021b;
            color: #fff;
            padding: 5px;
            font-weight: bold;
            font-size: 10pt
        }

        .input-wrapper .input-label {
            width: 100%
        }

        .input-wrap {
            display: flex;
            width: 100%;
            position: relative
        }

        .input-wrapper {
            display: grid;
            grid-template-columns: 60px 1fr;
            grid-template-columns: 60px 1fr;
            width: 100%;
            height: 120px;
            max-width: 420px;
            margin: auto;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            gap: 10px;
            align-self: center;
            position: relative;
            border-radius: 40px
        }

        .input-wrapper .prefix-number {
            width: 50px;
            height: 60px;
            background-position: center;
            background-size: 70%;
            background-repeat: no-repeat;
            background-color: #f0efef;
            border-right: 1px solid #d6d6d6;
            font-size: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 10px
        }

        input#input-pin {
            text-align: center;
            letter-spacing: 6px;
            display: inline-block;
            vertical-align: bottom;
            align-items: center
        }

        .text-input.pin_input,
        .input-wrapper.pinentry_inputwrap {
            text-align: center
        }

      .states.pinentry_form_dummy.dnone {
            opacity: .3;
            pointer-events: none
        }

        .numberentry_form_dummy.dnone{
            opacity: .3;
            pointer-events: none
        }

        .show-numberentry.blocker .states.pinentry_form_dummy {
            opacity: 1;
            pointer-events: none
        }

        input#input-pin::placeholder {
            font-size: 22px;
            transform: translateY(6px);
            display: inline-block
        }

        .show-congrats .states.pinentry_form_dummy,
        .show-subscriptionpolling .states.pinentry_form_dummy,
        .show-redirectservice .states.pinentry_form_dummy,
        .show-alreadysubscribed .states.pinentry_form_dummy {
            display: none
        }

        #numberentry #input-number,
        .text-input.phone_placeholder {
            letter-spacing: normal;
            font-size: 16px;
            text-align: left
        }

        .show-pinentry .btn.btn_disable {
            background-color: #5fbd15 !important
        }

        .text-input.phone_placeholder {
            line-height: normal !important;
            letter-spacing: normal !important
        }

        .input-wrapper .text-input {
            height: 60px;
            border-radius: 10px;
            background: #e7fad9;
            font-size: 16px;
            color: #5fbd15;
            outline: 0;
            display: flex;
            align-items: center;
            letter-spacing: 6px;
            vertical-align: bottom
        }

        .input-wrapper .phone {
            height: 60px;
            border-radius: 10px;
            background: #f4f5f8;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9aa1a9;
            font-weight: 600;
            font-size: 16px
        }

        .input-wrapper .checkmark-container {
            width: 20px;
            height: 20px;
            position: absolute;
            right: 10px;
            display: -webkit-flex;
            display: flex;
            -webkit-align-items: center;
            align-items: center;
            -webkit-justify-content: flex-end;
            justify-content: flex-end;
            transform: translate(0, -50%);
            border-radius: 50px;
            box-shadow: 0 0 10px rgba(122, 193, 66, 0.4)
        }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            -webkit-box-shadow: 0 0 0 30px #f4f5f8 inset !important;
            box-shadow: 0 0 0 30px #f4f5f8 inset !important
        }

        #checkmark {
            display: none
        }

        #checkmark,
        #checkmark_terminate,
        #checkmark_dummy {
               right: 11px;

        }

        .checkmark__circle {
            stroke-dasharray: 166;
            stroke-dashoffset: 166;
            stroke-width: 5;
            stroke-miterlimit: 10;
            stroke: #7ac041;
            fill: none;
            -webkit-animation: stroke .6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
            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: 4;
            stroke: #fff;
            stroke-miterlimit: 10;
            -webkit-animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
            animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
        }

        .checkmark__check {
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            stroke-dasharray: 48;
            stroke-dashoffset: 48;
            -webkit-animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards;
            animation: stroke .3s cubic-bezier(0.65, 0, 0.45, 1) .8s forwards
        }

        @-webkit-keyframes stroke {
            100% {
                stroke-dashoffset: 0
            }
        }

        @keyframes stroke {
            100% {
                stroke-dashoffset: 0
            }
        }

        @-webkit-keyframes scale {

            0%,
            100% {
                -webkit-transform: none;
                transform: none
            }

            50% {
                -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1)
            }
        }

        @keyframes scale {

            0%,
            100% {
                -webkit-transform: none;
                transform: none
            }

            50% {
                -webkit-transform: scale3d(1.1, 1.1, 1);
                transform: scale3d(1.1, 1.1, 1)
            }
        }

        @-webkit-keyframes fill {
            100% {
                box-shadow: inset 0 0 0 30px #7ac142
            }
        }

        @keyframes fill {
            100% {
                box-shadow: inset 0 0 0 30px #7ac142
            }
        }

        #terminate {
            display: none !important
        }

        @media(orientation:landscape) {
            .design__header {
                padding: 10px 10px 0 !important;
                max-width: unset
            }

            section.hero {
                padding: 10px !important
            }

            .card__cover {
                background-size: cover !important
            }
        }

        .range__control {
            -webkit-align-self: center;
            align-self: center;
            width: 100%;
            height: 2em;
            padding: 0;
            font-size: inherit;
            background: 0;
            border: 0;
            border-radius: .25rem;
            cursor: pointer;
            -ms-flex-item-align: center
        }

        .range__control:disabled {
            cursor: default;
            opacity: .5;
            pointer-events: none
        }

        #msisdnvalue {
            direction: ltr !important;
            unicode-bidi: embed
        }

        [id$="-error"],
        [id*="-error "] {
            color: #d04141;
            display: none;
            font-weight: bold
        }

        #congrats h4 {
            font-size: 20px;
            font-weight: bold;
            color: #fff
        }

        .exit,
        .additional__exit,
        .btn-secondary {
            display: inline-block;
            min-width: 50px;
            border-radius: 4px;
            text-align: center;
            max-width: 160px;
            font-size: 10px;
            opacity: 1;
            margin: 9px auto;
            text-decoration: none;
            text-transform: uppercase;
            background-color: #000;
            color: #666;
            border: 1px solid #666;
            padding: 0 5px
        }

        .additional__price {
            color: #bbb;
            font-size: 12px;
            padding-top: 20px
        }

        .show-pinentry .additional__exit,
        .show-pinentry .exit1 {
            display: none
        }

        #alreadysubscribed-title {
            margin-bottom: 10px
        }

        @keyframes animation-ripple {
            0% {
                opacity: .8;
                -webkit-transform: scale(0.9);
                transform: scale(0.9)
            }

            75% {
                opacity: 0;
                -webkit-transform: scale(1.3);
                transform: scale(1.3)
            }

            100% {
                opacity: 0
            }
        }

        @keyframes preloader {
            0% {
                transform: rotate(0deg)
            }

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

        @keyframes fade-in {
            0% {
                opacity: 1
            }

            100% {
                opacity: 0
            }
        }

        @keyframes shake-horizontal {

            0%,
            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }

            10%,
            30%,
            50%,
            70% {
                -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
            }

            20%,
            40%,
            60% {
                -webkit-transform: translateX(5px);
                transform: translateX(5px)
            }

            80% {
                -webkit-transform: translateX(8px);
                transform: translateX(8px)
            }

            90% {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px)
            }
        }

        @keyframes pulse {
            0% {
                transform: scale(1, 1)
            }

            50% {
                transform: scale(0.95, 0.95)
            }

            100% {
                transform: scale(1, 1)
            }
        }

        #design {
            padding: 10px;
            display: none
        }

        .show-terminate #terminate-message h3 {
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px
        }

        @media only screen and (max-height:570px) and (min-width:451px) and (orientation :landscape) {
            #creative {
                min-height: 450px
            }
        }

        @media only screen and (min-width:800px) {
            #creative {
                min-height: calc(100% - 125pt)
            }

            .design__header_wrap {
                width: 1000px;
                display: flex;
                justify-content: space-between;
                margin: 0 auto
            }
        }

        .show-terminate #creative_wrap {
            display: flex;
            flex-direction: column;
            order: 2;
            background-color: #fff
        }

        .show-terminate #creative {
            padding: 20px;
            border-radius: 0;
            flex-direction: column;
            gap: 0
        }

        @media screen and (orientation:portrait) {
            .show-terminate #creative_wrap {
                min-height: unset
            }

            .show-terminate #creative {
                min-height: unset;
                flex-direction: column
            }
        }

        span.bold.serif {
            padding-right: 3px
        }

        .btn.highlight {
            transition: .25s;
            box-shadow: 0 0 60px rgba(238, 46, 3, 1), inset 0 0 0 1px red
        }

        .disabled {
            cursor: not-allowed
        }

        .show-terminate .creative_header {
            display: none
        }

        .numberentry_form h2 {
            font-size: 14px;
            font-weight: 600;
            text-align: left
        }

        .numberentry_form_dummy,
        .pinentry_form_dummy {
            display: flex;
            flex-direction: column;
            gap: 15px
        }

        .pinentry_form_dummy_wrapper {
            display: flex;
            flex-direction: column;
            max-width: 420px;
            width: 100%;
            gap: 20px
        }

        .pinentry_form_dummy_wrapper .input-wrapper,
        .show-pinentry .input-wrapper.pinentry_inputwrap {
            display: flex;
            flex-direction: column;
            width: 100%
        }

        .show-pinentry .states.numberentry_form_dummy {
            display: flex
        }

        .pin_input,
        input#input-pin::placeholder {
            font-size: 24px !important;
            color: #5fbd15
        }

        .states.numberentry_form_dummy h2 {
            text-align: left
        }

        #pinentry .input-wrapper {
            display: flex
        }

        

        .prepayment_msg,
        .payment_msg {
            display: none
        }

       
        #numberentry #input-number {
            letter-spacing: normal;
            font-size: 16px
        }

        .states.pinentry_form_dummy h2,
        .state-header h4 {
            text-align: left;
            font-size: 14px;
            font-weight: 600
        }

        div#pin-msg {
            display: none
        }

        .show-pinentry .states.pinentry_form_dummy {
            display: none
        }

        .show-numberentry.blocker #subscr-flow-states {
            opacity: .3;
            pointer-events: none
        }

        .show-numberentry.blocker .pinentry_form_dummy_wrapper {
            opacity: 1;
            pointer-events: none
        }

        .show-numberentry #blocker {
            display: none !important
        }

        .show-numberentry.blocker .prepayment_msg {
            color: #6623DC;
            font-size: 14px;
            font-weight: 600;
            --thick: 3px;
            --accent: #5b2dcc;
            --track: #e1e2ea;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #1a1a1a
        }

        .show-numberentry.blocker .btn {
            animation: none
        }

        .hide {
            display: none !important;
        }


        .stopanimation {
            animation: none
        }

        .pinentry_msg {
            font-weight: 500;
            color: black;
            font-size: 13px
        }

        .show-numberentry.blocker .prepayment_msg.done::after {
            content: none
        }

        #pinentry-disclaimer-text {
            display: none
        }

        .payment_msg {
            color: #6623DC;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
            gap: 5px
        }

        #name::placeholder,
        #email::placeholder,
        #mobile::placeholder {
            color: #fff
        }

        .show-congrats .pinentry_form_dummy_wrapper,
        .show-redirectservice .pinentry_form_dummy_wrapper,
        .show-subscriptionpolling .pinentry_form_dummy_wrapper,
        .show-alreadysubscribed .pinentry_form_dummy_wrapper {
            display: none
        }

        .show-terminate .states_wrap {
            display: none
        }

        .show-numberentry #myMsisdn {
            display: none
        }

        .show-pinentry #myMsisdn {
            display: flex;
            color: #6623dc7d
        }

        .show-pinentry #placeholder_text {
            display: none
        }

        .show-pinentry #myMsisdn {
            display: inline-block
        }

        .show-numberentry.blocker .prepayment_msg {
            color: #6623DC;
            font-size: 14px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 10px
        }

        .show-numberentry.blocker .prepayment_msg::after {
            content: "";
            width: 22px;
            height: 22px;
            display: inline-block;
            background-image: url("../img/loader_p.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            animation: spin .9s linear infinite;
            transform-origin: center center
        }

        .pinentry_msg {
            font-weight: 500;
            color: #000;
            font-size: 13px
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        @media(prefers-reduced-motion:reduce) {
            .show-numberentry.blocker .prepayment_msg::after {
                animation: none
            }
        }

        .payment_msg::before,
        .payment_msg::after {
            content: "";
            width: 20px;
            height: 20px;
            display: inline-block;
            background-image: url("../img/download_P.svg");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            animation: downUp .5s ease-in-out infinite alternate
        }

        @keyframes downUp {
            from {
                transform: translateY(0)
            }

            to {
                transform: translateY(5px)
            }
        }


        .show-numberentry .payment_msg {
            display: none
        }

        .show-numberentry .pinentry_msg {
            opacity: .3
        }

        .show-numberentry.blocker .pinentry_msg {
            opacity: 1
        }

        .show-redirecttosecure #subscr-flow-states,
        .show-redirect #subscr-flow-states,
        .show-redirectservice #subscr-flow-states {
            display: none
        }

        .show-redirecttosecure .states.numberentry_form_dummy {
            display: flex
        }

        .show-redirect::after,
        .show-redirectreturn::after,
        .show-redirectxhrreturn::after,
        .show-immediatesubscribe::after {
            content: '';
            background-color: rgba(39, 39, 39, 0.95);
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 999
        }

        .logo_section {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90px
        }

        .logoname {
            font-size: 6px
        }

        .game-categories {
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 5px;
            position: absolute;
            left: 50%;
            transform: translate3d(-50%, 0, 0)
        }

        .category {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            border-radius: 50%;
            padding: 4px;
            border: 1px solid #414141
        }

        .iconset {
            width: 18px;
            height: 18px;
        }

        .icon_g1 {
            background: url("../img/ico1.svg") center no-repeat;
            background-size: 80% auto
        }

        .icon_g2 {
            background: url("../img/ico2.svg") center no-repeat;
            background-size: 80% auto
        }

        .icon_g3 {
            background: url("../img/ico3.svg") center no-repeat;
            background-size: 80% auto
        }

        .icon_g4 {
            background: url("../img/ico4.svg") center no-repeat;
            background-size: 80% auto
        }

        :root {
            --primary-color: #02b41c;
            --accent-color: #ee7b00;
            --accent-color-tint: #615ee8;
            --accent-color-faded: #605ee866;
            --white: #191919;
            --font-black: #191919;
            --background-color: black;
            --card-background-color: #f0f0f0;
            --default-text-color: var(--white);
            --heading-text-color: var(--white);
            --body-font-family: "Inter", sans-serif;
            --heading-font-family: "Inter", sans-serif;
            --hero-background-image: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/hero-bg.png);
            --font-normal: 400;
            --font-medium: 600;
            --font-bold: 700;
            --font-extra-bold: 800;
            --font-black: 900;
            --regular-text-size: 16px;
            --sections-margin: 2.5em;
            --sections-content-margin-lg: 30px;
            --sections-content-margin: 10px;
            --sections-content-margin-sm: 25px;
            --features-container-padding: 5em 3em;
            --sections-title-font-size: 24px;
            --section-padding-lg: 1.5em;
            --section-padding-sm: 1em;
            --primary-btn-padding: 1em 5em;
            --logo-height-desktop: 6vh;
            --logo-height-mobile: 4vh;
            --icons-height: 30px;
            --avatars-width: 40%;
            --border-radius: .4em;
            --text-line-height: 130%;
            --hero-carousel-max-height: 400px;
            --padding: 20px
        }

        .accent {
            color: var(--accent-color-tint)
        }

        .bold {
            font-weight: var(--font-bold)
        }

        .page-content {
            padding: var(--section-padding-lg);
            padding-top: 0;
            max-width: 1200px;
            margin: auto;
            text-align: left !important
        }

        .page-content>*:not(:last-child) {
            margin-bottom: var(--sections-margin)
        }

        .about-us__title::before,
        .features__title::before,
        .testimonials__title::before {
            content: "✦";
            margin-right: 10px;
            color: var(--accent-color-tint)
        }

        .about-us__title::after,
        .features__title::after,
        .testimonials__title::after {
            content: "✦";
            margin-left: 10px;
            color: var(--accent-color-tint)
        }

        .pricing__text::before {
            content: "✦";
            margin-right: 2px;
            color: var(--accent-color-tint)
        }

        .hero {
            color: white;
            min-height: 50vh;
            padding: var(--section-padding-lg);
            display: flex;
            text-align: center;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: var(--hero-background-image), linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
            background-blend-mode: multiply;
            background-size: cover;
            background-position: center;
            margin: calc(var(--section-padding-lg) * -1);
            position: relative;
            right: 50%;
            left: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            max-width: 100vw;
            width: 100vw;
            margin-top: 0;
            margin-bottom: 0;
            display: none
        }

        .show-terminate {
            display: flex !important;
            flex-direction: column
        }

        .show-terminate .hero {
            display: flex
        }

        .show-terminate .header {
            display: none
        }

        .hero>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin-lg)
        }

        .hero header {
            width: 100%;
            display: flex
        }

        .header__logo {
            margin: auto;
            max-height: var(--logo-height-desktop)
        }

        .hero__title {
            font-family: var(--heading-font-family);
            font-size: 45px;
            text-transform: capitalize;
            font-weight: var(--font-extra-bold);
            line-height: 1.2em;
            max-width: 900px
        }

        .hero__title span {
            font-weight: var(--font-extra-bold)
        }

        .hero__subtitle {
            font-size: 16px;
            font-weight: 600;
            max-width: 900px
        }

        .hero__button {
            background-color: var(--accent-color);
            color: white;
            font-size: 18px;
            font-family: var(--heading-font-family);
            font-weight: var(--font-bold);
            text-transform: uppercase;
            border: 0;
            cursor: pointer;
            border-radius: .2em;
            padding: var(--primary-btn-padding)
        }

        .about-us>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin-lg)
        }

        .about-us__title {
            text-align: center;
            font-weight: var(--font-extra-bold);
            font-family: var(--heading-font-family);
            font-size: 35px;
            font-weight: var(--font-bold);
            color: var(--heading-text-color)
        }

        .about-us__description {
            font-size: 15px;
            text-align: center;
            color: var(--seasalt-color)
        }

        .about-us__image {
            max-height: 250px;
            width: 100%;
            object-fit: cover;
            border-radius: var(--border-radius)
        }

        .about-us__banner {
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            border-radius: var(--border-radius)
        }

        .game {
            flex-basis: 25%;
            width: 100%
        }

        .game img {
            width: 100%
        }

        .features>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin-lg)
        }

        .features__title {
            text-align: center;
            font-family: var(--heading-font-family);
            font-size: 35px;
            font-weight: var(--font-extra-bold)
        }

        .features__description {
            text-align: center;
            color: var(--seasalt-color);
            font-size: 15px
        }

        .features__container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .features__container>* {
            margin-bottom: 20px
        }

        .feature {
            background-color: var(--accent-color);
            padding: var(--section-padding-lg) var(--section-padding-sm);
            border-radius: 1em;
            flex-basis: calc((100% - var(--sections-content-margin-lg)) / 3);
            justify-self: stretch;
            align-self: stretch;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: stretch;
            position: relative
        }

        .feature>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin)
        }

        .feature__icon img {
            height: var(--icons-height)
        }

        .feature__title {
            font-family: var(--heading-font-family);
            font-weight: var(--font-medium);
            color: white;
            font-size: 17px
        }

        .feature__title::before {
            content: "✦";
            margin-right: 10px;
            color: white
        }

        .feature__description {
            font-size: 14px;
            color: var(--seasalt-color);
            opacity: .9
        }

        .pricing {
            padding: var(--section-padding-lg);
            background-color: var(--card-background-color)
        }

        .pricing>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin)
        }

        .pricing__title {
            font-family: var(--heading-font-family);
            font-size: 22px;
            font-weight: var(--font-extra-bold);
            color: var(--heading-text-color)
        }

        .pricing__item {
            color: var(--regular-text-color);
            margin-bottom: var(--sections-content-margin-sm);
            font-size: 15px
        }

        .pricing__list>* {
            margin-bottom: var(--sections-content-margin-sm);
            list-style: none
        }

        .unsubscribe {
            padding: var(--section-padding-lg);
            background-color: var(--card-background-color)
        }

        .unsubscribe>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin)
        }

        .unsubscribe .unsubscribe__heading {
            font-family: var(--heading-font-family);
            font-size: 22px;
            color: var(--heading-text-color);
            font-weight: var(--font-extra-bold)
        }

        .unsubscribe p {
            color: var(--regular-text-color);
            font-size: 15px
        }

        .unsubscribe p span {
            opacity: 1;
            font-weight: var(--font-medium);
            color: var(--accent-color-tint)
        }

        .testimonials>*:not(:last-child) {
            margin-bottom: var(--sections-content-margin-lg)
        }

        .testimonials__title {
            text-align: center;
            font-weight: var(--font-extra-bold);
            font-family: var(--heading-font-family);
            font-size: 35px;
            font-weight: var(--font-extra-bold);
            color: var(--heading-text-color)
        }

        .testimonials-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap
        }

        .testimonial {
            display: flex;
            justify-content: space-between;
            text-align: center;
            align-self: stretch;
            flex-basis: calc(33.3% - 1em);
            background-color: white;
            padding: var(--section-padding-lg);
            border-radius: var(--border-radius);
            border: 2px solid #f4f4f4
        }

        .testimonial__star-img {
            width: 10px
        }

        .testimonial__info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: .5em
        }

        .testimonial__name {
            font-family: var(--heading-font-family);
            font-weight: var(--font-medium);
            color: var(--heading-text-color);
            font-size: 17px
        }

        .testimonial__rating {
            display: flex
        }

        .testimonial .testimonial__content {
            margin: 0;
            font-size: 14px
        }

        .testimonial__rating {
            display: flex;
            gap: 2px;
            align-self: center
        }

        .testimonial__star-img {
            height: 15px;
            width: 15px;
            background: url(//lppeucdn1.c4dn.co/Content/Creatives/WhoopGames/Number_Pin_SameEntry_Greenbtn_ABT4/assets/img/star_24dp_FILL0_wght400_GRAD0_opsz24.svg);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 12px
        }

        @media screen and (max-width:630px) {
            .testimonials-container {
                flex-direction: column
            }

            .testimonials-container>*:not(:last-child) {
                margin-bottom: var(--sections-content-margin-sm)
            }

            .feature {
                padding: calc(var(--section-padding-lg) - 0.5em) var(--section-padding-sm);
                flex-basis: calc(50% - 0.5em)
            }

            .features__container>* {
                margin-bottom: var(--sections-content-margin-sm)
            }

            .pricing,
            .pricing-guarantee,
            .note,
            .unsubscribe {
                padding: var(--section-padding-sm)
            }

            .pricing__list .pricing__item,
            .pricing-guarantee__item,
            .note__item,
            .unsubscribe p {
                color: var(--regular-text-color);
                margin-bottom: var(--sections-content-margin-sm);
                font-size: 13px
            }
        }

        @media screen and (max-width:550px) {
            .feature {
                flex-basis: 100%
            }

            .feature:last-child {
                margin-bottom: 0
            }

            .testimonials-container:not(:last-child) {
                margin-bottom: 0
            }

            .testimonial {
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                padding: var(--section-padding-lg) var(--section-padding-sm)
            }

            .testimonial__avatar {
                flex-basis: 10%;
                max-width: 100px
            }

            .testimonial__avatar-img {
                border-radius: 50%
            }

            .testimonial__info {
                flex-basis: 10%;
                text-align: center;
                align-items: center;
                justify-content: center
            }
        }

        @media screen and (max-width:945px) {
            .about-us {
                flex-direction: column
            }
        }

        @media screen and (max-width:890px) {
            .testimonial {
                padding: var(--section-padding-lg) var(--section-padding-sm)
            }
        }

        @media screen and (max-width:450px) {

            .about-us__title::before,
            .features__title::before,
            .testimonials__title::before {
                content: "✦";
                margin-right: 10px;
                color: var(--accent-color-tint)
            }

            .about-us__title::after,
            .features__title::after,
            .testimonials__title::after {
                display: none
            }

            .page-content {
                padding: var(--section-padding-sm)
            }

            .page-content>*:not(:last-child) {
                margin-bottom: var(--sections-content-margin-sm)
            }

            .hero>*:not(:last-child),
            .about-us>*:not(:last-child),
            .features>*:not(:last-child),
            .testimonials>*:not(:last-child) {
                margin-bottom: var(--sections-content-margin)
            }

            .hero {
                padding: var(--section-padding-sm);
                min-height: 45vh
            }

            .header__logo {
                max-height: var(--logo-height-mobile)
            }

            .hero__title {
                font-size: 28px
            }

            .hero__subtitle {
                font-size: 14px
            }

            .hero__button {
                font-size: 16px
            }

            .about-us__title,
            .features__title,
            .testimonials__title {
                font-size: 28px
            }

            .about-us__description,
            .features__description {
                font-size: 14px
            }

            .note__title,
            .pricing__title,
            .pricing-guarantee__title,
            .unsubscribe .unsubscribe__heading {
                font-size: 22px
            }
        }

        @media screen and (max-width:335px) {
            .hero__title {
                font-size: 22px
            }

            .hero__button {
                font-size: 14px
            }

            .features__container {
                flex-direction: column
            }
        }

        @media screen and (max-width:450px) and (orientation:portrait) {
            .hero {
                margin-top: calc(var(--section-padding-sm) * -1)
            }
        }

        .modal {
            box-sizing: border-box;
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - calc(var(--padding) * 2));
            max-width: calc(var(--padding) * 35);
            height: auto;
            background: #000;
            padding: 30px var(--padding);
            border-radius: 12px;
            z-index: 99999;
            overflow: hidden;
            text-align: left;
            border: 1px solid #fff
        }

        .modal-content {
            overflow: auto;
            scrollbar-width: none;
            width: 100%;
            max-height: calc(100vh * 0.6);
            color: var(--text-color)
        }

        .close-btn {
            position: absolute;
            top: calc(var(--padding) * 0.25);
            right: calc(var(--padding) * 0.25);
            height: calc(var(--padding) * 1.25);
            width: calc(var(--padding) * 1.25);
            cursor: pointer;
            border: 2px solidwhite;
            border-radius: 50%
        }

        .close-btn::before,
        .close-btn::after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 2px;
            height: 10px;
            background: #fff
        }

        .close-btn::before {
            transform: translate(-50%, -50%) rotate(45deg)
        }

        .close-btn::after {
            transform: translate(-50%, -50%) rotate(-45deg)
        }

        .modal-content {
            width: 100%;
            max-height: calc(100vh * 0.6);
            overflow: auto;
            scrollbar-width: none;
            color: var(--text-color)
        }

        .modal-content_section>* {
            margin: 0 0 var(--padding)
        }

        .modal-content_section h2 {
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-bold)
        }

        .form-group {
            flex-basis: 100%;
            height: 70px;
            display: flex;
            align-items: stretch;
            justify-content: stretch
        }

        .form-group input,
        .form-group textarea {
            flex: 1;
            width: 100%;
            border: 0;
            resize: none;
            padding: 0;
            font-size: 16px;
            padding: 30px 10px;
            margin: 0;
            color: var(--text-color);
            height: calc(var(--padding) * 0.9);
            font-weight: 600;
            width: 100% !important;
            background: 0;
            border-bottom: 1px #302f2f solid;
            border-radius: 0;
            color: white
        }

        form-group input::placeholder,
        .form-group textarea::placeholder {
            color: #c2c2c2
        }

        .submit__btn {
            height: calc(var(--padding) * 3);
            width: 100%;
            max-width: calc(var(--padding) * 16);
            margin: calc(var(--padding) * 2) auto 0;
            background-color: red;
            text-decoration: none;
            box-shadow: none;
            color: #ffff;
            animation: none
        }

        .mandatory-msg {
            margin-top: 10px;
            font-size: 13px;
            display: none;
            color: red;
            text-align: center
        }

        .show-message {
            display: block
        }

        .form-content {
            text-align: center;
            margin-top: 20px;
            color: white
        }

        .form-content p {
            font-size: 12px
        }

        .bold-price {
            font-size: 16px !important;
            margin-bottom: 10px
        }

        .entry-content .price-point {
            margin-top: 20px;
            font-size: 14pt;
            color: var(--black);
            color: var(--primary-color);
            font-weight: 700
        }

        .success {
            display: none;
            margin: 0 auto;
            text-align: center;
            color: var(--success-color);
            padding: calc(var(--padding) * 1.5) 0;
            background: white
        }

        .success p {
            font-weight: var(--font-weight-medium);
            padding: 0 !important
        }

        .success-checkmark {
            width: calc(var(--padding) * 4);
            height: calc(var(--padding) * 5.75);
            margin: 0 auto
        }

        .success-checkmark .check-icon {
            position: relative;
            box-sizing: content-box;
            width: calc(var(--padding) * 4);
            height: calc(var(--padding) * 4);
            border-radius: 50%;
            border: var(--checkmark-border)
        }

        .success-checkmark .check-icon::before {
            top: calc(var(--padding) * 0.15);
            left: calc(-0.1 * var(--padding));
            width: calc(var(--padding) * 1.5);
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px
        }

        .success-checkmark .check-icon::after {
            top: 0;
            left: calc(var(--padding) * 1.5);
            width: calc(var(--padding) * 3);
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in
        }

        .success-checkmark .check-icon::before,
        .success-checkmark .check-icon::after {
            content: "";
            height: calc(var(--padding) * 5);
            position: absolute;
            background: white;
            transform: rotate(-45deg)
        }

        .success-checkmark .check-icon .icon-line {
            height: calc(var(--padding) * 0.125);
            background-color: var(--success-color);
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10
        }

        .success-checkmark .check-icon .icon-line.line-tip {
            top: calc(var(--padding) * 2.3);
            left: calc(var(--padding) * 0.7);
            width: calc(var(--padding) * 1.25);
            transform: rotate(45deg);
            animation: icon-line-tip .75s
        }

        .success-checkmark .check-icon .icon-line.line-long {
            top: calc(var(--padding) * 1.9);
            right: calc(var(--padding) * 0.4);
            width: calc(var(--padding) * 2.35);
            transform: rotate(-45deg);
            animation: icon-line-long .75s
        }

        .success-checkmark .check-icon .icon-circle {
            position: absolute;
            box-sizing: content-box;
            z-index: 10;
            top: calc(-0.2 * var(--padding));
            left: calc(-0.2 * var(--padding));
            width: calc(var(--padding) * 4);
            height: calc(var(--padding) * 4);
            border-radius: 50%;
            border: var(--checkmark-icon-border)
        }

        .success-checkmark .check-icon .icon-fix {
            top: calc(var(--padding) * 0.4);
            width: calc(var(--padding) * 0.25);
            left: calc(var(--padding) * 1.3);
            z-index: 1;
            height: calc(var(--padding) * 4.25);
            position: absolute;
            transform: rotate(-45deg);
            background-color: white
        }

        @keyframes rotate-circle {
            0% {
                transform: rotate(-45deg)
            }

            5% {
                transform: rotate(-45deg)
            }

            12% {
                transform: rotate(-405deg)
            }

            100% {
                transform: rotate(-405deg)
            }
        }

        @keyframes icon-line-tip {
            0% {
                width: 0;
                left: calc(10px * 0.1);
                top: calc(10px * 1.9)
            }

            54% {
                width: 0;
                left: calc(10px * 0.1);
                top: calc(10px * 1.9)
            }

            70% {
                left: calc(-0.8 * 10px);
                width: calc(10px * 5);
                top: calc(10px * 3.7)
            }

            84% {
                width: calc(10px * 1.7);
                left: calc(10px * 2.1);
                top: calc(10px * 4.8)
            }

            100% {
                width: calc(10px * 2.5);
                left: calc(10px * 1.4);
                top: calc(10px * 4.5)
            }
        }

        @keyframes icon-line-long {
            0% {
                width: 0;
                right: calc(10px * 4.6);
                top: calc(10px * 5.4)
            }

            65% {
                width: 0;
                right: calc(10px * 4.6);
                top: calc(10px * 5.4)
            }

            84% {
                width: calc(10px * 5.5);
                right: 0;
                top: calc(10px * 3.5)
            }

            100% {
                width: calc(10px * 4.7);
                right: calc(10px * 0.8);
                top: calc(10px * 3.8)
            }
        }

        .success {
            display: none;
            margin: 20px auto;
            color: #0f041e;
            padding: 30px;
            border-radius: 6px;
            max-width: 750px;
            width: 100%;
            background: var(--black);
            text-align: center
        }

        .success p {
            font-size: 10pt !important;
            padding: 0 !important;
            color: #02b41c
        }

        .success-checkmark {
            width: 80px;
            height: 115px;
            margin: 0 auto
        }

        .success-checkmark .check-icon {
            width: 80px;
            height: 80px;
            position: relative;
            border-radius: 50%;
            box-sizing: content-box;
            border: 4px solid red
        }

        .success-checkmark .check-icon::before {
            top: 3px;
            left: -2px;
            width: 30px;
            transform-origin: 100% 50%;
            border-radius: 100px 0 0 100px
        }

        .success-checkmark .check-icon::after {
            top: 0;
            left: 30px;
            width: 60px;
            transform-origin: 0 50%;
            border-radius: 0 100px 100px 0;
            animation: rotate-circle 4.25s ease-in
        }

        .success-checkmark .check-icon::before,
        .success-checkmark .check-icon::after {
            content: "";
            height: 100px;
            position: absolute;
            background: #0d0912;
            transform: rotate(-45deg)
        }

        .success-checkmark .check-icon .icon-line {
            height: 5px;
            background-color: var(--primary-color);
            display: block;
            border-radius: 2px;
            position: absolute;
            z-index: 10
        }

        .success-checkmark .check-icon .icon-line.line-tip {
            top: 46px;
            left: 14px;
            width: 18pt;
            transform: rotate(45deg);
            animation: icon-line-tip .75s
        }

        .success-checkmark .check-icon .icon-line.line-long {
            top: 38px;
            right: 8px;
            width: 47px;
            transform: rotate(-45deg);
            animation: icon-line-long .75s
        }

        .success-checkmark .check-icon .icon-circle {
            top: -4px;
            left: -4px;
            z-index: 10;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            position: absolute;
            box-sizing: content-box;
            border: 4px solid var(--primary-color)
        }

        .success-checkmark .check-icon .icon-fix {
            top: 8px;
            width: 5px;
            left: 26px;
            z-index: 1;
            height: 85px;
            position: absolute;
            transform: rotate(-45deg);
            background-color: #0d0912
        }

        @keyframes rotate-circle {
            0% {
                transform: rotate(-45deg)
            }

            5% {
                transform: rotate(-45deg)
            }

            12% {
                transform: rotate(-405deg)
            }

            100% {
                transform: rotate(-405deg)
            }
        }

        @keyframes icon-line-tip {
            0% {
                width: 0;
                left: 1px;
                top: 19px
            }

            54% {
                width: 0;
                left: 1px;
                top: 19px
            }

            70% {
                width: 50px;
                left: -8px;
                top: 37px
            }

            84% {
                width: 17px;
                left: 21px;
                top: 48px
            }

            100% {
                width: 18pt;
                left: 14px;
                top: 45px
            }
        }

        @keyframes icon-line-long {
            0% {
                width: 0;
                right: 46px;
                top: 54px
            }

            65% {
                width: 0;
                right: 46px;
                top: 54px
            }

            84% {
                width: 55px;
                right: 0;
                top: 35px
            }

            100% {
                width: 47px;
                right: 8px;
                top: 38px
            }
        }

        .error-message {
            flex-basis: 100%;
            color: #e53030;
            margin: 10px 0 0;
            text-align: center;
            display: none
        }

        .overlay::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: rgb(0 0 0 / 88%);
            z-index: 9999
        }

        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: calc(100% - 40px);
            max-width: 1000px;
            height: auto;
            box-sizing: border-box;
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            z-index: 99999;
            overflow: hidden;
            text-align: left;
            scrollbar-width: 0
        }

        .popup::-webkit-scrollbar {
            width: 0
        }

        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            height: 25px;
            width: 25px;
            cursor: pointer;
            border: 2px solid #000;
            background: #fff;
            border-radius: 50%
        }

        .close-button::before,
        .close-button::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 50%;
            width: 2px;
            height: 16px;
            background: #000
        }

        .close-button::before {
            transform: translate(-50%, -50%) rotate(45deg)
        }

        .close-button::after {
            transform: translate(-50%, -50%) rotate(-45deg)
        }

        .popup-content {
            width: 100%;
            max-height: 60vh;
            overflow: auto;
            scrollbar-width: none;
            color: #000;
            line-height: 130%
        }

        .popup-content p {
            margin: 10px 0
        }

        @media only screen and (max-width:480px) and (orientation:portrait) {
            .popup-content {
                max-height: 70vh
            }
        }

        .popup-content>* {
            margin: 0 0 20px
        }

        .popup-content>*:last-child {
            margin: 0
        }

        .popup-content h1,
        .popup-content h2,
        .popup-content h3,
        .popup-content h4,
        .popup-content h5,
        .popup-content h6 {
            color: #000;
            font-weight: 700;
            line-height: 130%;
            font-size: 18px
        }

        .popup-content a {
            text-decoration: underline;
            color: #6c6c6c
        }

        .show-terminate #service-content-wrap {
            display: block !important
        }

        .show-terminate .read-more {
            display: none
        }

        .pop {
            -webkit-animation: shake-horizontal 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite;
            animation: shake-horizontal 2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both infinite
        }

        @-webkit-keyframes shake-horizontal {

            0%,
            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }

            10%,
            30%,
            50%,
            70% {
                -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
            }

            20%,
            40%,
            60% {
                -webkit-transform: translateX(5px);
                transform: translateX(5px)
            }

            80% {
                -webkit-transform: translateX(8px);
                transform: translateX(8px)
            }

            90% {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px)
            }
        }

        @keyframes shake-horizontal {

            0%,
            100% {
                -webkit-transform: translateX(0);
                transform: translateX(0)
            }

            10%,
            30%,
            50%,
            70% {
                -webkit-transform: translateX(-5px);
                transform: translateX(-5px)
            }

            20%,
            40%,
            60% {
                -webkit-transform: translateX(5px);
                transform: translateX(5px)
            }

            80% {
                -webkit-transform: translateX(8px);
                transform: translateX(8px)
            }

            90% {
                -webkit-transform: translateX(-3px);
                transform: translateX(-3px)
            }
        }