@font-face {
    font-family: "SFPro Regular";
    src: url("../fonts/SF-Pro-Display-Regular.otf");
    font-weight: 400;
}
@font-face {
    font-family: "SFPro Light";
    src: url("../fonts/SF-Pro-Display-Light.otf");
    font-weight: 300;
}
@font-face {
    font-family: "SFPro Medium";
    src: url("../fonts/SF-Pro-Display-Medium.otf");
    font-weight: 500;
}
@font-face {
    font-family: "SFPro SemiBold";
    src: url("../fonts/SF-Pro-Display-Semibold.otf");
    font-weight: 600;
}
@font-face {
    font-family: "SFPro Bold";
    src: url("../fonts/SF-Pro-Display-Bold.otf");
    font-weight: 700;
}
@font-face {
    font-family: "SFPro ExtraBold";
    src: url("../fonts/SF-Pro-Display-Heavy.otf");
    font-weight: 800;
}


@font-face {
    font-family: "SFProText Regular";
    src: url("../fonts/SFProText-Regular.ttf");
    font-weight: 400;
}
@font-face {
    font-family: "SFProText Light";
    src: url("../fonts/SFProText-Light.ttf");
    font-weight: 300;
}
@font-face {
    font-family: "SFProText Medium";
    src: url("../fonts/SFProText-Medium.ttf");
    font-weight: 500;
}
@font-face {
    font-family: "SFProText SemiBold";
    src: url("../fonts/SFProText-Semibold.ttf");
    font-weight: 600;
}
@font-face {
    font-family: "SFProText Bold";
    src: url("../fonts/SFProText-Bold.ttf");
    font-weight: 700;
}
@font-face {
    font-family: "SFProText ExtraBold";
    src: url("../fonts/SFProText-Heavy.ttf");
    font-weight: 800;
}

body{
    font-family: "SFPro Regular", sans-serif;
    font-size: 13px;
    background: black;
    color: white;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield;
}

#pageContent{
    max-width: 450px;
    width: 100%;
    height: 100%;
    margin: auto;
    background: rgba(32, 32, 32, 1);
    position: fixed;
    overflow-x: hidden;
    overflow-y: auto;

    left: 50%;
    transform: translateX(-50%);
}

#pageContent.auth{
    background-image: url("../images/blurBackground.png");
    background-size: cover;
}
/*
#pageContent.auth::after{
    content: "";
    background: black;
    backdrop-filter: blur(10px);
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

 */

#pageContent.main{
    background: rgba(33, 28, 136, 1) url("../images/mainBackground.png");
    background-size: cover;
    color: white;
}

#pageContent.mainBlur{
    background: rgba(33, 28, 136, 1) url("../images/blurMain.png");
    background-size: cover;
    color: white;
}

#loaderBox{
    background: url("../images/blurBackground.png"), rgba(20, 20, 20, 1);
    background-size: cover;

    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 111;
}
#loaderBox::after {
    content: "";
    background: black;
    backdrop-filter: blur(10px);
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
}
#loaderBox > img{
    width: 80%;
    height: auto;
    z-index: 12;
}

.authContent{
    display: none;
    z-index: 15;
    position: relative;
}

.m-t-75{
    margin-top: 75px;
}

.authTitle{
    font-family: "SFPro ExtraBold", sans-serif;
    font-size: 30px;
}

.f-control{
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    background: rgba(82, 22, 48, 1);
    border-radius: 8px;
    border: 1.5px solid white;
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    transition: 0.25s all;
}
.f-control.focus{
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    transition: 0.25s all;
}
.f-control.t-center > select,
.f-control.t-center > input{
    text-align: center;
}
.f-control > input{
    width: 100%;
    background: none;
    color: white;
    font-size: 14px;
    border: none;
}
.f-control > select{
    width: 100%;
    background: #521630;
    color: white;
    font-size: 14px;
    border: none;
}
.f-control > select::placeholder,
.f-control > input::placeholder{
    color: #999999;
}
.f-control > select:focus,
.f-control > input:focus{
    outline: none;
}

.f-control > img:first-child {
    height: 13px;
    margin-right: 12px;
}
.f-control > input + img,
.f-control > select + img{
    height: 13px;
    margin-left: 12px;
}

.f-control.success{
    background: rgba(44, 44, 44, 1);
    transition: 0.25s all;
    border: 1.5px solid rgba(30, 255, 0, 1);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
    box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
}
.f-control.error{
    background: rgba(44, 44, 44, 1);
    transition: 0.25s all;
    border: 1.5px solid rgba(255, 53, 53, 1);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
    box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
}

.f-control > .success,
.f-control > .error {
    height: 26px;
    width: auto;
    margin-left: 16px;
    right: -12px;
    position: relative;
    display: none;
    transform: scale(1.75);
}
.f-control.success > .success{
    display: block;
}
.f-control.error > .error{
    display: block;
}

.f-btn{
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(0deg, #EBB04D, #EBB04D), linear-gradient(90deg, rgba(241, 193, 105, 0.2) 30%, rgba(204, 111, 36, 0.2) 100%);
    /*background: linear-gradient(0deg, #E6A547, #E6A547), linear-gradient(90deg, rgba(241, 193, 105, 0.2) 30%, rgba(204, 111, 36, 0.2) 100%);*/
    color: white;

    font-family: "SFPro Medium", sans-serif;
    font-size: 14px;
    border: none;
    transition: 0.25s;
}
.f-btn.high{
    background: linear-gradient(90deg, #FFC070 0%, #FF8F00 100%);
}
.f-btn:disabled{
    opacity: 0.75;
    transition: 0.25s;
}

.authImages{
    bottom: 24px;
    position: fixed;
    width: 100%;
    height: 37%;
    z-index: -1;
}
.authImages > .tiger{
    position: absolute;
    right: 15px;
    height: 112%;
    width: auto;
    bottom: 0;
}
.authImages > .cat{
    position: absolute;
    left: 0px;
    height: 92%;
    width: auto;
    bottom: -2px;
}
.authImages > .coinRight{
    position: absolute;
    right: -15px;
    height: 30%;
    width: auto;
    top: -20%;
}
.authImages > .coinRight > img{
    height: 100%;
    width: auto;
}
.authImages > .coinRight > div{
    width: 100%;
    height: 100%;
    background: none;
    backdrop-filter: blur(2px);
    position: absolute;
    left: 0;
    top: 0;
}
.authImages > .coinLeft{
    position: absolute;
    left: -26px;
    height: 40%;
    width: auto;
    top: -10%;
}
.authImages > .coinLeft > img{
    height: 100%;
    width: auto;
}
.authImages > .coinLeft > div{
    width: 100%;
    height: 100%;
    background: none;
    backdrop-filter: blur(2px);
    position: absolute;
    left: 0;
    top: 0;
}

#backButton{
    display: flex;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: rgba(29, 29, 29, 1);

    position: fixed;
    left: 12px;
    top: 20px;

    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: center;
    z-index: 20;
}
#backButton > img{
    height: 18px;
    width: 21px;
}

.genderDiv{
    background: url("../images/blurBackground.png"), rgba(32, 32, 32, 1);
    background-size: cover;
    color: white;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*
.genderDiv::after{
    content: "";
    background: black;
    backdrop-filter: blur(10px);
    opacity: 0.3;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}*/

.staticIcon.lightning{
    position: fixed;
    left: 0;
    bottom: 20%;
    z-index: -1;
}

.staticIcon.hearth{
    position: fixed;
    right: 0;
    bottom: 3%;
    z-index: -1;
}

.genderContent{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.genders{
    height: 40%;
    margin-top: 40px;
    margin-bottom: 40px;
    position: relative;
    width: 100%;
    display: flex;

}

.gender{
    position: relative;
    height: 100%;
    width: 50%;
    color: rgba(128, 191, 255, 1);
}
.gender.active{
    color: rgba(252, 220, 44, 1);
}
.gender > .shape{
    position: absolute;
    bottom: -40px;
    left: 0;
    height: auto;
    width: 120%;
}
.gender > .platform{
    position: absolute;
    bottom: 10%;
    left: 6%;
    height: auto;
    width: 100%;
}
.gender > .avatar{
    position: absolute;
    bottom: 20%;
    left: 4%;
    height: auto;
    width: 100%;
}
.gender > .avatar.female{
    position: absolute;
    bottom: 18%;
    left: 0;
    height: auto;
    width: 100%;
}
.gender > .genderName{
    position: absolute;
    font-size: 13px;
    font-family: "SFPro SemiBold", sans-serif;
    bottom: 6%;
    left: 50%;
    transform: translateX(-33%);
}

.bottomSide{
    width: 100%;
    height: auto;
}

.tabBar{
    margin-bottom: 16px;
    width: 100%;
    padding: 12px 10px;
    border-radius: 10px;
    background: rgba(29, 29, 29, 1);

    display: flex;
    justify-content: space-between;
    z-index: 20;
    position: relative;
}
.tabBar > button{
    padding: 9px;
    background: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: none;
}
.tabBar > button.active{
    background: linear-gradient(90deg, rgba(241, 193, 105, 0.2) 30%, rgba(204, 111, 36, 0.2) 100%), linear-gradient(0deg, #E6A547, #E6A547);
}
.tabBar > button > img{
    height: 27px;
    width: 27px;
}

.subscribeProgress{
    height: 10px;
    margin-bottom: 15px;
    border-radius: 20px;
    background: rgba(59, 24, 45, 1);
    overflow: hidden;
}
.subscribeProgress > div{
    height: 10px;
    border-radius: 20px;
    background: linear-gradient(90deg, #FF5900 0%, #FBFF00 100%);
    width: 50%;
}
.premiumExpirationText{
    margin-bottom: 3px;
    font-family: "SFProText Bold", sans-serif;
    font-size: 11px;
}

.boosts{
    margin-bottom: 18px;
    display: flex;
    justify-content: space-between;
}

.boostBox{
    height: 90px;
    width: 90px;
    background: rgba(29, 29, 29, 1);
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 0;
    border-left-width: 0;
    border-style: solid;
    border-radius: 9px;

    border-color: rgba(255, 255, 255, 1);
    position: relative;
}
.boostBox.active{
    background: url("../images/boost_background.jpg");
    background-size: cover;
    border-color: rgba(252, 193, 44, 1);

    -webkit-box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
    -moz-box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
    box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
}
.boostBox > .light{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #FFD800;
    background: radial-gradient(circle,rgba(255, 216, 0, 0.25) 0%, rgba(29, 29, 29, 0.01) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "SFProText Bold", sans-serif;
    font-size: 34px;
}
.boostBox.active > .light{
    background: none;
}

.boostBox > .content{
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(145, 145, 145, 1);
    font-family: "SFPro Medium", sans-serif;
    font-size: 9.9px;
}
.boostBox > .content{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.boostBox.active > .content{
    color: rgba(252, 220, 44, 1);
}

.boostBox > .coin{
    display: none;
    height: 28px;
    width: 28px;
    position: absolute;
    right: -14px;
    top: -14px;
}
.boostBox.active > .coin{
    display: block;
}

.mainContent{
    display: flex;
    flex-direction: column;
    overflow: auto;
    height: 100%;
}
.mainContent > .page{
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}

.avatarBox{
    height: 100%;
    width: 100%;
    position: relative;
}
.avatarBox > img.shape{
    position: absolute;
    width: auto;
    height: 55%;
    top: 66%;
    left: 50%;
    transform: translateX(-50%);
}
.avatarBox > img.platform{
    position: absolute;
    width: auto;
    height: 26%;
    top: 77%;
    left: 50%;
    transform: translateX(-50%);
}
.avatarBox > img.avatar.male{
    position: absolute;
    width: auto;
    height: 80%;
    top: 6%;
    left: 47%;
    transform: translateX(-50%);
}
.avatarBox > img.avatar.female{
    position: absolute;
    width: auto;
    height: 80%;
    top: 6%;
    left: 51%;
    transform: translateX(-50%);
}

button.takeBtn{
    margin-top: 16px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
    border: none;
    outline: none;
    background: linear-gradient(180deg, #1EFF00 0%, #14A001 100%);


    color: white;
    font-family: "SFProText Bold", sans-serif;
    font-size: 16px;

    -webkit-box-shadow: 0px 0px 18px 1px rgba(30, 255, 0, 1);
    -moz-box-shadow: 0px 0px 18px 1px rgba(30, 255, 0, 1);
    box-shadow: 0px 0px 18px 1px rgba(30, 255, 0, 1);
}
button.takeBtn:disabled{
    margin-top: 16px;
    height: 40px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 20px;
    border: none;
    outline: none;
    background: rgba(29, 29, 29, 1);


    color: rgba(92, 92, 92, 1);
    font-family: "SFProText Bold", sans-serif;
    font-size: 16px;

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.profileScore{
    margin-top: 16px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profileScore > img{
    height: 64px;
    width: 69px;
}
.profileScore > span{
    margin-left: 16px;

    color: white;
    font-family: "SFProText Bold", sans-serif;
    font-size: 40px;
    text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

.flexContent{
    display: flex;
    justify-content: center;
}


/* 1. Анимация градиента (оставляем как есть) */
@keyframes skeleton-loading {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

/* 2. Стили для самого блока с классом .sk-loader */
.sk-loader {
    position: relative; /* Контекст для позиционирования ::after */
    overflow: hidden;  /* Обрезка градиента */
}

/* 3. Стили для псевдоэлемента-оверлея */
.sk-loader::after {
    border-radius: 12px;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    background: linear-gradient(
            90deg,
            rgba(51, 61, 76, 0.1) 25%,
            rgba(187, 187, 187, 0.1) 50%,
            rgba(51, 61, 76, 0.1) 75%
    );

    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear; /* Анимация */
}

/* 4. Стили для непосредственных дочерних элементов блока .sk-loader */
.sk-loader > * {
    /* Применяем размытие и полупрозрачность */
    filter: blur(3px);  /* Сила размытия */
    opacity: 0.5;       /* Прозрачность контента */

    position: relative;
    z-index: 1;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.flow{
}
.boostPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}
.premiumPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}


.flowTitle{
    font-family: "SFProText Bold", sans-serif;
    font-size: 30px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boostInfo{
    margin-top: 20px;
    background: rgba(29, 29, 29, 1);
    border-radius: 10px;
    padding-top: 10px;
}
.boostInfo > .title{
    font-family: "SFProText Bold", sans-serif;
    font-size: 16px;
    display: flex;
    justify-content: center;

    background: linear-gradient(90deg, #FFC070 0%, #B37C38 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.boostInfo > img{
    margin-top: 10px;
    width: 100%;
    height: auto;
}
.boostInfo > .description{
    background: rgba(29, 29, 29, 1);

    border-radius: 10px;
    padding: 10px 10px 0 10px;

    font-family: "SFProText Regular", sans-serif;
    font-size: 16px;
    color: white;

    position: relative;
    top: -16px;
}

.premiumContent{
    margin-top: 20px;
    padding-bottom: 16px;
}

.premiumContent > .banner{
    width: 100%;
    height: auto;
}

.premiumContent > .limitInfo{
    font-family: "SFProText SemiBold", sans-serif;
    font-size: 11px;
    color: white;
    margin-top: 5px;
}

.flexWrapper{
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.premiumsList{
    margin-top: 15px;
}

.premBox{
    margin-top: 15px;
    height: 70px;
    background: rgba(29, 29, 29, 1);
    border-top-width: 2px;
    border-right-width: 2px;
    border-bottom-width: 0;
    border-left-width: 0;
    border-style: solid;
    border-radius: 10px;

    border-color: rgba(255, 255, 255, 1);
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 10px;
}
.premBox.active{
    background: url("../images/prem_background.jpg");
    background-size: cover;
    border-color: rgba(252, 193, 44, 1);

    -webkit-box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
    -moz-box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
    box-shadow: 0px 0px 8px 4px rgba(255, 240, 155, 1);
}

.premBox > .priceForDay{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    font-family: "SFProText SemiBold", sans-serif;
    font-size: 16px;
    color: white;
}
.premBox > .description{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.premBox > .description > .period{
    font-family: "SFProText Bold", sans-serif;
    font-size: 20px;
    color: white;
}
.premBox > .description > .price{
    font-family: "SFProText SemiBold", sans-serif;
    font-size: 13px;
    color: white;
}

.premBox > .coin{
    display: none;
    height: 28px;
    width: 28px;
    position: absolute;
    right: -14px;
    top: -14px;
}
.premBox.active > .coin{
    display: block;
}

.paymentInfoPage{}
.paymentInfoPage > .title{
    margin-top: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "SFPro ExtraBold", sans-serif;
    font-size: 30px;
    color: white;
}
.paymentInfoPage > .label{
    font-family: "SFPro Regular", sans-serif;
    font-size: 13px;
    color: white;
}

.iconPayTiger{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: -1;
}

.iconPayCCLeft{
    position: absolute;
    bottom: 4%;
    left: 3%;
    z-index: -1;
}

.iconPayCCRight{
    position: absolute;
    bottom: 2%;
    right: 2%;
    z-index: -1;
}

.iconPayCoinLeft{
    position: absolute;
    bottom: 35%;
    left: 0;
    z-index: -1;
}

.iconPayCoinRight{
    position: absolute;
    bottom: 40%;
    right: 0;
    z-index: -1;
}

#qrScannerWrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    z-index: 15;
    display: none;
}

#qrScanner {
    width: 100%;
    height: 100%;
}

#qrScanner video,
#qrScanner canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#qrScannerWrapper > .title{
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    font-family: "SFPro Bold", sans-serif;
    font-size: 30px;
    color: white;
    z-index: 15;
    position: fixed;
}

#qrScannerWrapper > .rect{
    position: fixed;
    width: 250px;
    height: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
}

.scanError{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 3, 0.3);
    backdrop-filter: blur(6px);
    justify-content: center;
    align-items: center;
    z-index: 25;

    font-family: "SFProText Bold", sans-serif;
    font-size: 26px;
}

.scanError > .f-btn{
    position: absolute;
    bottom: 80px;
    left: 20px;
    width: calc(100% - 40px);
}

.scanError > span{
    padding: 0 40px;
    text-align: center;
}

#scanResultPage{
    background: rgba(33, 28, 136, 1) url("../images/mainBackground.png");
    background-size: cover;
    color: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#scanResultPage > .content{
    background: radial-gradient(circle,rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 60%);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#scanResultPage > .content > .tabBar{
    position: fixed;
    bottom: 0;
    left: 12px;
    width: calc(100% - 24px);
}

.scanIcon{
    z-index: 1;
}
.scanIcon.shape{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 100%;
}
.scanIcon.platform{
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 230px;
}
.scanIcon.box{
    position: fixed;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 55%;
}
.scanIcon.result{
    opacity: 0;
    position: fixed;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 55%;
}
.scanIcon.result.win{
    position: fixed;
    left: 55%;
    top: 40%;
    transform: translate(-50%, -50%);
    height: auto;
    width: 63%;
}

.openButton{
    width: 70%;
    left: 15%;
    z-index: 2;
    top: 75%;
    position: fixed;
}

#scanResultPage > .content > .amountsBox{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 64px;
    top: 75%;
    position: fixed;
    z-index: 2;
}
#scanResultPage > .content > .amountsBox > .amount{
    margin-left: 20px;
    width: 40px;
    height: 64px;
    background: rgba(44, 44, 44, 1);
    border-radius: 12px;
    border: 1px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;

    font-family: "SFPro Regular", sans-serif;
    font-size: 23px;

    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 1);
    transition: 0.25s all;
}
#scanResultPage > .content > .amountsBox > .amount.error{
    border: 1px solid rgba(255, 53, 53, 1);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
    box-shadow: 0px 0px 12px 0px rgba(255, 53, 53, 1);
}
#scanResultPage > .content > .amountsBox > .amount.success{
    border: 1px solid rgba(30, 255, 0, 1);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
    -moz-box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
    box-shadow: 0px 0px 12px 0px rgba(30, 255, 0, 1);
}
#scanResultPage > .content > .amountsBox > .amount:first-child{
    margin-left: 0;
}

#scanResultPage > .content > .title{
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    font-family: "SFProText Bold", sans-serif;
    font-size: 26px;
    z-index: 40;
}

#scanResultPage > .content > .blur{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(6px);

    z-index: 30;
}
#scanResultPage > .content > .blur > .title{
    position: fixed;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 40px;

    font-family: "SFProText Bold", sans-serif;
    font-size: 26px;
}
#scanResultPage > .content > .blur > .newBalance{
    position: fixed;
    top: 60%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 40px;

    font-family: "SFProText Bold", sans-serif;
    font-size: 40px;
}

#scanResultPage > .content > .blur > .winIcon{
    position: fixed;
}
#scanResultPage > .content > .blur > .winText{
    position: fixed;
    top: 40%;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 0 40px;

    font-family: "SFProText Bold", sans-serif;
    font-size: 26px;
}


.profilePage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}
.profilePage > #historyButton{
    display: flex;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background: rgba(29, 29, 29, 1);

    position: fixed;
    right: 12px;
    top: 20px;

    box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: center;
    z-index: 20;
}
.profilePage > #historyButton > img{
    height: 18px;
    width: 21px;
}

.profileSummary{
    margin-top: 20px;

    background: rgba(29, 29, 29, 0.7);
    border-radius: 10px;
    padding: 0;
}
.profileSummary > .info{
    padding: 15px;
    display: flex;
}
.profileSummary > .info > img{
    height: 60px;
    width: auto;
}
.profileSummary > .info > .names{
    height: 60px;
    margin-left: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.profileSummary > .info > .names > .name{
    font-family: "SFProText SemiBold", sans-serif;
    font-size: 16px;
}
.profileSummary > .info > .names > .ident{
    font-family: "SFProText Regular", sans-serif;
    font-size: 13px;
}
.profileSummary > .divider{
    background: rgba(255, 255, 255, 0.3);
    height: 1px;
    width: 100%;
}
.profileSummary > .footer{
    padding: 15px;
    display: flex;
    justify-content: space-between;
}

.profileBox{
    margin-top: 20px;
    border-radius: 10px;
    padding: 14px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.profileBox > .icon{
    width: 60px;
    height: auto;
}
.profileBox > span{
    font-family: "SFProText Bold", sans-serif;
    font-size: 40px;
}
.profileBox > div{
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.profileBox > div > span:first-child{
    font-family: "SFProText SemiBold", sans-serif;
    font-size: 16px;
}
.profileBox > div > span:last-child{
    margin-top: 10px;

    font-family: "SFProText Medium", sans-serif;
    font-size: 13px;
}

.profileBox.balance{
    background: rgba(0, 0, 0, 0) url("../images/profileBalance.png");
    background-size: cover;
}

.profileBox.tg{
    background: rgba(30, 19, 247, 0.3) url("../images/profileTg.png");
}

.profileBox.ref{
    background: rgba(0, 0, 0, 0) url("../images/profileRef.png");
    background-size: cover;
}

.profileBox.boosts{
    background: rgba(0, 0, 0, 0) url("../images/profileBoosts.png");
    background-size: cover;
}


.historyPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}

.transactionBox{
    margin-top: 20px;
    background: rgba(29, 29, 29, 0.7);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
}
.transactionBox > img{
    height: 40px;
    width: 40px;
}
.transactionBox > .transactionInfo{
    margin-left: 10px;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
}
.transactionBox > .transactionInfo > .line{
    display: flex;
    justify-content: space-between;
}
.transactionBox > .transactionInfo > .line > .transactionName{
    font-family: "SFPro SemiBold", sans-serif;
    font-size: 16px;
}
.transactionBox > .transactionInfo > .line > .transactionAmount{
    font-family: "SFPro SemiBold", sans-serif;
    font-size: 16px;
}
.transactionBox > .transactionInfo > .line > .transactionDescription{
    font-family: "SFPro Regular", sans-serif;
    font-size: 13px;
}
.transactionBox > .transactionInfo > .line > .transactionType{
    font-family: "SFPro Regular", sans-serif;
    font-size: 13px;
}
.transactionBox > .transactionInfo > .line > .transactionType.orange{
    background: linear-gradient(90deg, #FFC070 0%, #FF8F00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.transactionBox > .transactionInfo > .line > .transactionType.pink{
    color: rgba(255, 0, 161, 1)
}


.editUserPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}

.userDataBox{
    margin-top: 20px;
    background: rgba(29, 29, 29, 0.7);
    border-radius: 10px;
    padding: 0;
}
.userDataBox > .line{
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-family: "SFProText Regular", sans-serif;
    font-size: 13px;
    color: white;
}
.userDataBox > .line.b-line{
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.userDataBox > .line > img{
    height: 60px;
    width: auto;
}
.userDataBox > .line > div > input{
    background: none;
    border: none;
    text-align: right;
}
.userDataBox > .line > div > input:focus{
    outline: none;
}

.profilePhoto{
    border-radius: 50%;
}


.refsPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}
.refsPage > img{
    width: 100%;
    height: auto;
    margin-top: 20px;
}


.rulesPage{
    height: 100%;
    width: 100%;
    padding-top: 20px;
}

.rulesBox{
    background: rgba(82, 22, 48, 0.9);
    border-radius: 10px;
    padding: 12px 15px;
    margin-top: 20px;
}
.rulesBox > .title{
    display: flex;
    align-items: center;
}
.rulesBox > .title > img{
    height: 31px;
    width: 31px;
}
.rulesBox > .title > span{
    margin-left: 12px;
    font-family: "SFPro SemiBold", sans-serif;
    font-size: 16px;
    line-height: 20px;
}
.rulesBox > .content{
    margin-top: 12px;
    font-family: "SFPro Medium", sans-serif;
    font-size: 13px;
}