@font-face {
            font-family: "Mikado-Black";
            font-style: black;
            font-weight: 900;
            src: url("../../fonts/Mikado/Mikado-Black.woff2") format("woff2");
        }

        .flexPopup * {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .flexPopupSP {
            --cl_red: #FF5A56;
            --cl_blue: #210A74;
            --cl_l-blue: #C6D2FF;
            --cl_white: #ffffff;
            --cl_violet: #9694FF;
            --cl_yellow: #FFE60A;
            --cl_green: #79FD7F;
            --cl_d-green: #19AA20;

            width: 375px;
            height: 670px;
            background: var(--cl_red);
            border-radius: 48px;

            font-family: "Mikado-Black", sans-serif;
            position: relative;
            overflow: hidden;


            user-select: none;

        }

        .flexPopupSP__closeBtn,
        .spPage2-button {
            position: absolute;
            right: 33px;
            top: 31px;
            width: 36px;
            height: 36px;
            z-index: 20;
            cursor: pointer;
        }

        .flexPopupSP__closeBtn svg {

            max-width: 100%;

        }

        .flexPopupSP svg,
        .flexPopupSP img {
            max-width: 100%;
        }

        .spPage1 {
            display: grid;
            grid-template-rows: 99px 260px 208px 60px;
            grid-template-columns: 1fr;
            padding: 30px;
            align-items: center;
            height: 100%;
            transition: opacity .2s ease-in-out;
        }

        .spPage2 {
            transition: opacity .2s ease-in-out;
        }

        .flexPopupSP__title {
            display: block;
            width: 100%;
            color: var(--cl_white);
            font-size: 39px;
            line-height: 46px;
            text-align: center;
            padding-inline: 40px;
            position: relative;

            --stroke: 0px;

            -moz-text-stroke-width: var(--stroke);
            -webkit-text-stroke-width: var(--stroke);
            -moz-text-stroke-color: var(--cl_blue);
            -webkit-text-stroke-color: var(--cl_blue);

            text-transform: uppercase;
            text-align: center;


            letter-spacing: 0.07em;

            filter: drop-shadow(2px 0 0 var(--cl_blue)) drop-shadow(1px 0 1px var(--cl_blue)) drop-shadow(0 1px 0 var(--cl_blue)) drop-shadow(0 1px 0px var(--cl_blue)) drop-shadow(-1px 0 0 var(--cl_blue)) drop-shadow(-1px 0 0px var(--cl_blue)) drop-shadow(0 -1px 0 var(--cl_blue)) drop-shadow(0 -1px 0px var(--cl_blue));


        }

        .arrow {
            content: "";
            position: absolute;
            display: block;
            left: 0;
            top: 100px;
            width: 123px;
            height: 123px;
            background: url('spPopup-arrow.svg');
            background-size: contain;
            background-repeat: no-repeat;
            filter: none;
        }

        .flexPopupSP__wheel {
            height: 260px;
            width: 100%;
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .flexPopupSP__wheel .spinner {
            width: 250px;
        }

        .flexPopupSP__wheel #sectors {
            width: 155px;
            position: absolute;
            top: 48px;
            left: 80px;
            animation-timing-function: cubic-bezier(0, 0.4, 0.4, 1.04);
            animation-duration: 5s;
            animation-fill-mode: forwards;
            animation-iteration-count: 1;
            cursor: pointer;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        .sectors-stop {
            animation-duration: 0;
        }

        .flexPopupSP__wheel .pointer {
            width: 50px;
            position: absolute;
            top: 95px;
            left: 138px;
            pointer-events: none;
        }

        .flexPopupSP__wheel .flash {
            position: absolute;
            top: 0px;
            right: -5px;
            width: 90px;
            height: 70px;
        }

        .flexPopupSP__wheel .stripes {
            position: absolute;
            top: 150px;
            right: 50px;
            width: 45px;
            height: 70px;
            transform: rotate(-5deg);
        }

        .flexPopupSP__wheel .star1 {
            position: absolute;
            bottom: 50px;
            left: 15px;
            width: 29px;
            height: 50px;
        }

        .flexPopupSP__wheel .star2 {
            position: absolute;
            bottom: 40%;
            right: 0px;
            width: 25px;
            height: 30px;
        }

        .flexPopupSP__wheel .dot {
            position: absolute;
            bottom: 48%;
            left: 0px;
            width: 12px;
            height: 12px;
            background: var(--cl_white);
            border-radius: 50%;
        }

        .flexPopupSP__legend {
            background: var(--cl_white);
            border-radius: 28px;
            font-family: "Mikado-Regular", sans-serif;
            font-weight: 400;
            padding: 8px 28px;
            counter-reset: custom-counter;
            list-style: none;
            position: relative;
            top: -30px;
            z-index: 2;
        }

        .flexPopupSP__legend li {
            line-height: 17px;
            font-size: 14px;
            counter-increment: custom-counter;
            padding: 4px 0;
            overflow: visible;
            display: flex;
            flex-direction: row;
            align-items: center;
            color: var(--cl_blue);
        }

        .onlyOne li:not(.onlyActiveLi) {
            color: var(--cl_l-blue);
        }

        .flexPopupSP__legend li:before {
            content: counter(custom-counter);
            position: relative;
            width: 22px;
            min-width: 22px;
            height: 22px;
            line-height: 22px;
            margin-right: 14px;
            left: 0;
            top: 0;
            background: var(--cl_yellow);
            border-radius: 50%;
            display: inline-block;
            text-align: center;
            --stroke: 2px;

            font-family: "Mikado-Black", sans-serif;

            color: var(--cl_white);
            -moz-text-stroke-width: var(--stroke);
            -webkit-text-stroke-width: var(--stroke);
            -moz-text-stroke-color: var(--cl_blue);
            -webkit-text-stroke-color: var(--cl_blue);


        }

        .flexPopupSP__legend li:nth-child(even)::before {
            background: var(--cl_green);
        }

        .onlyOne li:not(.onlyActiveLi)::before {
            background: var(--cl_violet) !important;
            opacity: .4;
        }

        .flexPopupSP__legend .tryAgain {
            border-bottom: none;
        }

        .flexPopupSP__again {
            top: -15px;
            position: relative;
            text-align: center;
        }

        .flexPopupSP__button {
            background-color: var(--cl_blue);
            color: var(--cl_white);
            border-radius: 100px;
            font-size: 19px;
            line-height: 36px;
            text-transform: uppercase;
            font-weight: 900;
            min-height: 56px;
            padding-inline: 20px;

        }

        .flexPopupSP__button strong {
            color: var(--cl_green);
            font-size: 31px;
        }

        .spPage2 {
            height: 100%;
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: 99px 240px 100px 150px;
            padding: 40px;
            box-sizing: border-box;
        }

        .spPage2 .flexPopupSP__title {
            font-size: 26px;
            padding: 30px 0 0 0;
        }

        .spPage2 .flexPopupSP__cover {
            display: inline-block;
            border-radius: 11px;
            background-color: var(--cl_white);
            padding: 10px;
            box-shadow: 5px 5px 10px rgba(30, 30, 30, .2);
            font-size: 0;
            transform: rotate(11deg);
            position: relative;
            left: -20px;
            height: fit-content;
        }

        .spPage2 .flexPopupSP__cover img {
            margin-bottom: 0;
            max-width: 224px;
            max-height: 171px;
            border-radius: 5px;
        }

        .spPage2 .flexPopupSP__page {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            z-index: 2;
            position: relative;
            top: 10px;
        }

        .spPage2 .flexPopupSP__page .flash {
            max-width: 87px;
            transform: rotate(-110deg);
            position: relative;
            top: -130px;
            right: -60px;
            min-width: 30px;
        }

        .spPage2 .star1,
        .spPage2 .star3 {
            display: none;
        }

        .spPage2 .star2 {
            position: absolute;
            right: -10px;
            top: 60px;
        }

        .spPage2 .dot {
            display: block;
            position: absolute;
            width: 12px;
            height: 12px;
            bottom: -170px;
            left: -20px;
            z-index: 1;
            background: var(--cl_white);
            border-radius: 50%;
        }

        .spPage2 .flexPopupSP__text {
            position: relative;
            overflow: visible;
            color: var(--cl_blue);
            font-size: 21px;
            line-height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .spPage2 .flexPopupSP__text::before {
            content: "";
            display: block;
            position: absolute;
            width: calc(100% + 140px);
            height: 320%;
            left: -50px;
            top: -120%;
            background: url('spPopup-boom.svg');
            background-size: contain;
            background-repeat: no-repeat;
            z-index: -1;
            transform: rotate(15deg);
        }

        .spPage2 .flexPopupSP__text p {
            position: relative;
            z-index: 2;
            display: block;
            width: 240px;
            text-align: center;
            font-family: "Mikado-Regular", sans-serif;
            font-weight: 700;
        }

        .spPage2 .flexPopupSP__download {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            z-index: 3;

        }

        .spPage2 .flexPopupSP__download a {
            min-height: 72px;
            font-size: 20px;
            display: flex;
            align-items: center;
            text-align: center;
            text-decoration: none;
            padding-inline: 50px;
        }


        @media (max-width: 390px) {
            .flexPopupSP {
                transform: scale(.9);
            }
        }

        @media (max-height: 655px) and (orientation: portrait) {
            .flexPopup {
                align-items: flex-start;
                overflow: scroll;
            }
        }

        @media (max-height: 655px) and (orientation: landscape) {
            .flexPopupSP {
                transform: scale(.5);
            }
        }



        @media (min-width: 1025px) {
            .flexPopupSP {
                width: 800px;
            }
        }

        @media (min-width: 656px) {
            .flexPopupSP {
                width: 700px;
                height: 600px;
            }

            .spPage1 {
                flex-direction: row;
                display: grid;
                box-sizing: border-box;
                height: 100%;
                overflow: visible;
                margin: 0px 50px 0 50px;
                padding: 0;
                gap: 0 0%;
                grid-template-rows: 106px auto;
                grid-template-columns: 60% 40%;
                grid-template-areas:
                    "title title"
                    "wheel actions"
                    "wheel button";
            }

            .flexPopupSP__title {
                grid-area: title;
                font-size: 41px;
                line-height: 66px;
                overflow: visible;
                padding-top: 50px;
                padding-bottom: 0px;

                filter: drop-shadow(1px 0 0 var(--cl_blue)) drop-shadow(2px 0 1px var(--cl_blue)) drop-shadow(2px 0 0 var(--cl_blue)) drop-shadow(0 1px 0 var(--cl_blue)) drop-shadow(0 2px 0px var(--cl_blue)) drop-shadow(0 2px 0 var(--cl_blue)) drop-shadow(-1px 0 0 var(--cl_blue)) drop-shadow(-2px 0 0px var(--cl_blue)) drop-shadow(-2px 0 0 var(--cl_blue)) drop-shadow(0 -1px 0 var(--cl_blue)) drop-shadow(0 -2px 0px var(--cl_blue)) drop-shadow(0 -2px 0 var(--cl_blue));
            }

            .arrow {
                width: 160px;
                height: 160px;
                top: 70px;
            }

            .flexPopupSP__wheel {
                width: 100%;
                height: 100%;
                grid-area: wheel;
                left: -80px;
                bottom: -25px;
            }

            .flexPopupSP__wheel .flash {
                top: -10px;
                right: -60px;
                width: 115px;
                height: 90px;
            }

            .flexPopupSP__wheel #sectors {
                width: 296px;
                top: 82px;
                left: 82px;
            }

            .flexPopupSP__wheel .pointer {
                width: 90px;
                top: 173px;
                left: 195px;
            }

            .flexPopupSP__wheel .spinner {
                width: 461px;
                max-width: 461px;
                position: relative;
                bottom: 0px;
            }

            .flexPopupSP__wheel .stripes {
                width: 70px;
                height: 90px;
                top: 325px;
                right: -35px;
                transform: rotate(0);
            }

            .flexPopupSP__wheel .dot {
                left: 50px;
                bottom: 30%;
            }

            .flexPopupSP__wheel .star1 {
                left: 70px;
                bottom: 70px;
            }

            .flexPopupSP__wheel .star2 {
                right: -355px;
                bottom: 30%;
            }

            .flexPopupSP__actions {

                grid-area: actions;
            }

            .flexPopupSP__legend {
                font-weight: 700;
                top: 0;

                font-size: 17px;
                padding: 8px 20px;
            }

            .flexPopupSP__again {
                width: 140%;
                right: 40%;
                top: -40px;
                text-align: right;
            }

            .flexPopupSP__button {
                min-height: 63px;
                cursor: pointer;
                min-width: 255px;
            }

            .flexPopupSP__legend li {
                border-bottom: 1px var(--cl_violet) solid;
                padding: 8px 0;
            }

            .flexPopupSP__legend li:last-child {
                border-bottom: none;
            }

            .flexPopupSP__legend li::before {
                width: 35px;
                min-width: 35px;
                height: 35px;
                line-height: 35px;
                font-size: 21px;
            }

            .spPage2 {
                grid-template-areas:
                    "title title"
                    "text page"
                    "download download";
                grid-template-columns: 60% 40%;
                grid-template-rows: 120px 280px 107px;
            }

            .spPage2 .flexPopupSP__title {
                font-size: 49px;
                line-height: 66px;
                z-index: 10;
                grid-area: title;
            }

            .spPage2 .flexPopupSP__text p {
                font-size: 26px;
                line-height: 31px;
                top: 10%;
                grid-area: text;
            }

            .spPage2 .flexPopupSP__text::before {
                width: 125%;
                height: 150%;
                left: 0%;
                transform: translate(-6%, -5%);
                top: 0;
            }

            .spPage2 .flexPopupSP__page {
                flex-direction: row;
                grid-area: page;
            }

            .spPage2 .flexPopupSP__page .flash {
                max-width: 55px;
                top: -30px;
                right: 20px;
                transform: rotate(0);
            }

            .spPage2 .flexPopupSP__page {
                right: -40px;
                top: 20px;
            }

            .spPage2 .flexPopupSP__cover {}

            .spPage2 .flexPopupSP__cover img {
                max-height: 242px;
            }

            .spPage2 .flexPopupSP__download {
                grid-area: download;
            }

            .spPage2 .flexPopupSP__download a {
                min-height: 88px;
                font-size: 34px;
                line-height: 36px;
            }

            .spPage2 .star1 {
                position: absolute;
                display: block;
                right: 90px;
                top: 320px;
            }

            .spPage2 .star2 {
                right: 30px;
                top: 260px;
            }

            .spPage2 .dot {
                bottom: -70px;
                left: -370px;
            }
        }

        @media (min-width: 1025px) {
            .flexPopupSP {
                width: 800px;
                height: 600px;
            }

            .flexPopupSP__title {
                font-size: 59px;
            }


            .flexPopupSP__wheel .spinner {
                width: 481px;
                max-width: 481px;
            }

            .flexPopupSP__wheel .dot {
                left: 40px;
                bottom: 33%;
            }

            .flexPopupSP__wheel .flash {
                top: 10px;
            }

            .flexPopupSP__wheel #sectors {
                width: 315px;
                top: 82px;
                left: 82px;
            }

            .flexPopupSP__wheel .pointer {
                width: 100px;
                top: 178px;
                left: 199px;
            }

            .flexPopupSP__wheel .stripes {
                right: -25px;
                transform: rotate(-5deg);
            }

            .flexPopupSP__wheel .star1 {
                bottom: 110px;
            }

            .flexPopupSP__wheel .star2 {
                right: -385px;
                bottom: 32%;
            }

            .arrow {
                width: 180px;
                height: 180px;
                left: 0;
            }

            .flexPopupSP__legend {
                padding: 8px 20px;
            }

            .spPage1 {
                margin: 0px 65px 0 65px;

            }

            .spPage2 .flexPopupSP__title {
                font-size: 51px;
                padding: 0;
            }

            .spPage2 .flexPopupSP__text p {
                font-size: 28px;
                line-height: 34px;

            }

            .spPage2 .flexPopupSP__text:before {
                transform: translate(-5%, -12.5%);
            }



            .spPage2 .flexPopupSP__download a {
                font-size: 34px;
                min-height: 99px;
                min-width: 350px;
                justify-content: center;
            }

            .spPage2 .star1 {
                position: absolute;
                display: block;
                right: 110px;
                top: 320px;
                transform: scale(1.2);
            }

            .spPage2 .star2 {
                right: 40px;
                top: 260px;
            }

            .spPage2 .star3 {
                display: block;
                position: absolute;
                left: -470px;
                top: -80px;
            }

            .spPage2 .dot {
                bottom: -60px;
                left: -410px;
            }

            .spPage2 .flexPopupSP__cover {

                top: -40px;
            }

            .spPage2 .flexPopupSP__cover img {
                max-height: 262px;
                max-width: 260px;
            }

            .spPage2 .flexPopupSP__page .flash {
                top: -70px;
            }


        }

        .spPage1 {

            /* display: none !important;*/
        }

        .spPage2 {
            display: grid;
            display: none;
        }

        .number-1 {
            animation-name: number-1;
        }

        .number-2 {
            animation-name: number-2;
        }

        .number-3 {
            animation-name: number-3;
        }

        .number-4 {
            animation-name: number-4;
        }

        .number-5 {
            animation-name: number-5;
        }

        .number-6 {
            animation-name: number-6;
        }

        @keyframes number-1 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3600deg);
            }
        }

        @keyframes number-2 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3540deg);
            }
        }

        @keyframes number-3 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3480deg);
            }
        }

        @keyframes number-4 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3420deg);
            }
        }

        @keyframes number-5 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3360deg);
            }
        }

        @keyframes number-6 {
            from {
                transform: rotate(0);
            }

            to {
                transform: rotate(3300deg);
            }
        }

        .slide_hide {
            display: none;
            opacity: 0;
            z-index: -1;
        }

        .slide_show {
            display: grid;
            opacity: 1 !important;
            z-index: 10;
        }

        html[dir="rtl"] {
            direction: ltr;
        }

        html[dir="rtl"] .flexPopupSP__title,
        html[dir="rtl"] .flexPopupSP__again,
        html[dir="rtl"] .flexPopupSP__legend {
            direction: rtl !important;
        }

        html[dir="rtl"] .flexPopupSP__legend li::before {
            margin-right: 0;
            margin-left: 14px;
        }

        @media (min-width: 656px) {
            html[dir="rtl"] .spPage1 {
                grid-template-columns: 40% 60%;
                grid-template-areas:
                    "title   title"
                    "actions wheel"
                    "button  wheel";
            }

            html[dir="rtl"] .spPage2 {
                direction: rtl;
                grid-template-areas:
                    "title    title   "
                    "page     text   "
                    "download download";
                grid-template-columns: 40% 60%;
            }

            html[dir="rtl"] .flexPopupSP__page {
                flex-direction: row-reverse;
            }

            html[dir="rtl"] .flexPopupSP__wheel {
                left: -20px;
            }

            html[dir="rtl"] .stripes {
                transform: scale(-1, 1);
                right: 235px;
            }

            html[dir="rtl"] .flash {
                transform: scale(-1, 1);
                right: 205px;
            }

            html[dir="rtl"] .dot {
                transform: scale(-1, 1);
                left: 385px
            }

            html[dir="rtl"] .star1 {
                left: 345px
            }

            html[dir="rtl"] .star2 {
                right: 585px
            }

            html[dir="rtl"] .arrow {
                transform: scale(-1, 1);
                left: 540px;
            }

            html[dir="rtl"] .flexPopupSP__again {
                text-align: left;
                right: 0;
            }
        }

        @media (min-width: 1025px) {
            html[dir="rtl"] .arrow {
                left: 600px;
            }

            html[dir="rtl"] .stripes {
                right: 275px;
            }

            html[dir="rtl"] .flash {
                right: 255px;
            }

            html[dir="rtl"] .dot {
                left: 425px
            }

            html[dir="rtl"] .star1 {
                left: 385px;
                bottom: 100px;

            }

            html[dir="rtl"] .star2 {
                right: 665px
            }
        }

        .spPage2 .hideCover {
            display: none;
        }