:root {
    --font-family: "HarmonyOS Sans",sans-serif;
    --second-family: "TT Firs Neue",sans-serif;
    --svetlo-seryy: #a8a8a8;
    --temno-seryy: rgba(37,37,37,.2);
    --content-width: 1180px;
    --container-offset: 24px;
    --container-width: calc(var(--content-width) + var(--container-offset)*2)
}

@media screen and (max-width: 768px) {
    :root {
        --container-offset:15px
    }
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/HarmonyOS_Sans_Medium_Italic.woff2?3369281451901269979bd04cdd933e41) format("woff2"),url(/fonts/HarmonyOS_Sans_Medium_Italic.woff?dd90f5020eafb9fcee449bbefa5fe51b) format("woff"),url(/fonts/HarmonyOS_Sans_Medium_Italic.ttf?924c0abeec955f58b6f917fb786b0827) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/HarmonyOS_Sans_Bold_Italic.woff2?e188253e77531bf1309237f642f783f6) format("woff2"),url(/fonts/HarmonyOS_Sans_Bold_Italic.woff?405a2f0cde338aef6c7034550f99d516) format("woff"),url(/fonts/HarmonyOS_Sans_Bold_Italic.ttf?1576b8096c83847a9e4418c947563b92) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/HarmonyOS_Sans.woff2?e9149e2afa65400a4ad8cef65a7a03f5) format("woff2"),url(/fonts/HarmonyOS_Sans.woff?b0da50cf610256be6dc8cef5e84cbe48) format("woff"),url(/fonts/HarmonyOS_Sans.ttf?e2f2b047bec0e1a8161038272ffe7995) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: TT Firs Neue;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/TTFirsNeue-Bold.woff2?3148af0abe4d69a0f94918f5f5a95494) format("woff2"),url(/fonts/TTFirsNeue-Bold.woff?7be6e794ec3ccf5c9e5b9b96325803d9) format("woff"),url(/fonts/TTFirsNeue-Bold.ttf?390c0ebe09a369c117213467bb5aa0ff) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/HarmonyOS_Sans_Medium.woff2?659054c1b3b4c259cd0c0a92e94f298d) format("woff2"),url(/fonts/HarmonyOS_Sans_Medium.woff?d15a477616751adcd22f600292d2396a) format("woff"),url(/fonts/HarmonyOS_Sans_Medium.ttf?4c6b5ce99f17fd5e2ed2f024ca754b15) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/HarmonyOS_Sans_Bold.woff2?479abdcaa4ff05ca72911731065f69a5) format("woff2"),url(/fonts/HarmonyOS_Sans_Bold.woff?06b86e6b74465eb17665e117a5040fbf) format("woff"),url(/fonts/HarmonyOS_Sans_Bold.ttf?1803fe5a7c39fc7ec3ae30298fbe7451) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: TT Firs Neue;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/TTFirsNeue-BoldItalic.woff2?b5daffd2e911f2dda773e83fe6f5b153) format("woff2"),url(/fonts/TTFirsNeue-BoldItalic.woff?6866ab6964c9c98b1888f750bd6d6d69) format("woff"),url(/fonts/TTFirsNeue-BoldItalic.ttf?3bbcb747c9a5ea37032d8134d08c96db) format("truetype")
}

@font-face {
    font-display: swap;
    font-family: HarmonyOS Sans;
    font-style: italic;
    font-weight: 400;
    src: url(/fonts/HarmonyOS_Sans_Italic.woff2?07a96abba3a68bfc0434e5cc7edf760f) format("woff2"),url(/fonts/HarmonyOS_Sans_Italic.woff?91e28f56e2f2302be50893784c737c7d) format("woff"),url(/fonts/HarmonyOS_Sans_Italic.ttf?6333e0b31fcad5ce59c6a1a1ecfb56fc) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: normal;
    font-weight: 700;
    src: url(/fonts/TTCommons-Bold.eot?57849dd2acc866a7fb3a74da77fb0563);
    src: local("TT Commons Bold"),local("TTCommons-Bold"),url(/fonts/TTCommons-Bold.eot?57849dd2acc866a7fb3a74da77fb0563?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-Bold.woff2?869ee89ffcd0bd8f7d13a9beae2e2291) format("woff2"),url(/fonts/TTCommons-Bold.woff?36b06bbb8c98131d5a5b0fc9d21234b7) format("woff"),url(/fonts/TTCommons-Bold.ttf?c9d4cd31e43277a536030d226e42fffd) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: italic;
    font-weight: 600;
    src: url(/fonts/TTCommons-DemiBoldItalic.eot?3a6ba1bb3e7f1c9dc89e30dabad3dba1);
    src: local("TT Commons DemiBold Italic"),local("TTCommons-DemiBoldItalic"),url(/fonts/TTCommons-DemiBoldItalic.eot?3a6ba1bb3e7f1c9dc89e30dabad3dba1?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-DemiBoldItalic.woff2?ca6c30fd26a16120c2b1a27d57bc9173) format("woff2"),url(/fonts/TTCommons-DemiBoldItalic.woff?f48970bd68b54415884b368c24968090) format("woff"),url(/fonts/TTCommons-DemiBoldItalic.ttf?940b167ed7663fd2f8df22b93e4cf739) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: italic;
    font-weight: 700;
    src: url(/fonts/TTCommons-BoldItalic.eot?b293b1efeddf568f58ba8ee26f4688e9);
    src: local("TT Commons Bold Italic"),local("TTCommons-BoldItalic"),url(/fonts/TTCommons-BoldItalic.eot?b293b1efeddf568f58ba8ee26f4688e9?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-BoldItalic.woff2?3fa41f744f3e667225aa0bee2f619363) format("woff2"),url(/fonts/TTCommons-BoldItalic.woff?7526ea12b689bce8027dbc76ce1698b2) format("woff"),url(/fonts/TTCommons-BoldItalic.ttf?b085635a51a2ba01f0a46e4224f6f61b) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: italic;
    font-weight: 500;
    src: url(/fonts/TTCommons-MediumItalic.eot?ab556421ca7540ed217c3d34b474186e);
    src: local("TT Commons Medium Italic"),local("TTCommons-MediumItalic"),url(/fonts/TTCommons-MediumItalic.eot?ab556421ca7540ed217c3d34b474186e?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-MediumItalic.woff2?a05817298661d6fdb972974d189aa18f) format("woff2"),url(/fonts/TTCommons-MediumItalic.woff?47abc8514f3149d282347cef826e895c) format("woff"),url(/fonts/TTCommons-MediumItalic.ttf?6850d9cd6dbf1d81a8bd0be638868cd3) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/TTCommons-Medium.eot?a1429a55638f728f75d1a524b7027d67);
    src: local("TT Commons Medium"),local("TTCommons-Medium"),url(/fonts/TTCommons-Medium.eot?a1429a55638f728f75d1a524b7027d67?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-Medium.woff2?68e987593063265c688c39c9d87aa40a) format("woff2"),url(/fonts/TTCommons-Medium.woff?8e7d7a3962646adbad25ae38905c6009) format("woff"),url(/fonts/TTCommons-Medium.ttf?e1e7a9ea102531b6154b75523cd0e421) format("truetype")
}

@font-face {
    font-family: TT Commons;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/TTCommons-DemiBold.eot?77635ccdbcb56d69529039a6db33390e);
    src: local("TT Commons DemiBold"),local("TTCommons-DemiBold"),url(/fonts/TTCommons-DemiBold.eot?77635ccdbcb56d69529039a6db33390e?#iefix) format("embedded-opentype"),url(/fonts/TTCommons-DemiBold.woff2?7f17e3b07384395da5846c03d76a4a98) format("woff2"),url(/fonts/TTCommons-DemiBold.woff?dbc16e7a4d4aa8da9b7d7febd8396ae2) format("woff"),url(/fonts/TTCommons-DemiBold.ttf?dfcdd7ec23075372dd2dcc8ee9ace5f9) format("truetype")
}

*,:after,:before,html {
    box-sizing: border-box
}

*,:after,:before {
    margin: 0;
    padding: 0
}

.page {
    -webkit-text-size-adjust: 100%;
    background-color: #0d0d0d;
    color: #fff;
    font-family: var(--font-family);
    height: 100%
}

h1,h2,h3,h4 {
    margin: 0
}

.page__body {
    font-size: 16px;
    margin: 0;
    min-height: 100%;
    min-width: 320px
}

.dora {
    background-image: url(/images/dora.svg?11c5653af5753b72728b4c0f227ad5e7);
    background-position: top;
    background-repeat: no-repeat
}

img {
    height: auto;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

a {
    text-decoration: none
}

.site-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 100vh;
    overflow: hidden;
    width: 100%
}

.is-hidden {
    display: none!important
}

.btn-reset {
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 0
}

.list-reset {
    list-style: none;
    margin: 0;
    padding: 0
}

.input-reset {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    border-radius: 0
}

.input-reset::-webkit-search-cancel-button,.input-reset::-webkit-search-decoration,.input-reset::-webkit-search-results-button,.input-reset::-webkit-search-results-decoration {
    display: none
}

.visually-hidden {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.container {
    margin: 0 auto;
    max-width: var(--container-width);
    padding: 0 var(--container-offset);
    width: 100%
}

.js-focus-visible :focus:not(.focus-visible) {
    outline: none
}

.centered {
    text-align: center
}

.dis-scroll {
    height: 100vh;
    left: 0;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    top: 0;
    width: 100%
}

.page--ios .dis-scroll {
    position: relative
}

picture {
    display: flex;
    height: 100%;
    max-width: 100%
}

.main {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%
}

.img-contain {
    height: auto;
    -o-object-fit: contain;
    object-fit: contain
}

.img-absolute,.img-contain {
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.img-absolute {
    height: 100%;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: absolute;
    top: 0
}

@media screen and (max-width: 768px) {
    .dora {
        background-image:unset
    }
}

.card-parallax {
    position: relative;
    transform-style: preserve-3d
}

.panel {
    align-items: center;
    display: flex;
    font-family: TT Commons;
    justify-content: center;
    min-height: 100vh;
    padding-bottom: 55px;
    padding-top: 55px;
    position: relative;
    width: 100%
}

.panel .star {
    pointer-events: none;
    position: absolute;
    z-index: -1
}

.panel .star>img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    will-change: transform
}

.panel .star:first-child {
    height: 32px;
    left: -32px;
    top: 40%;
    width: 32px
}

.panel .star:first-child.parallax-stars>img {
    animation: starsTwo 5s linear -1s infinite
}

.panel .star:nth-child(2) {
    height: 24px;
    right: 2%;
    top: 10%;
    width: 24px
}

.panel .star:nth-child(2).parallax-stars>img {
    animation: starsOne 5s linear 0s infinite
}

.panel .star:nth-child(3) {
    bottom: 18%;
    height: 36px;
    right: 4%;
    width: 36px
}

.panel .star:nth-child(3).parallax-stars>img {
    animation: starsOne 5s linear -1s infinite
}

.panel__content {
    align-items: flex-start;
    background: #05080c;
    border-radius: 60px;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%
}

.panel__content._active {
    animation: fadeIn .2s ease-in 0s forwards;
    display: flex
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: scale(.975);
        visibility: hidden
    }

    to {
        opacity: 1;
        transform: scale(1);
        visibility: visible
    }
}

.panel__pay {
    padding: 72px 100px 92px
}

.panel__methods {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    width: 100%
}

.panel__method {
    align-items: center;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    padding: 7px
}

.panel__method>img {
    height: 20px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: auto
}

.panel__info {
    gap: 24px 32px;
    justify-content: space-between;
    margin-top: 32px;
    width: 100%
}

.panel__info,.panel__summa {
    align-items: flex-start;
    display: flex
}

.panel__summa {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: flex-start
}

.panel__label {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 16px;
    opacity: .75;
    text-align: left;
    white-space: nowrap
}

.panel__amount {
    color: #fff;
    font-size: 64px;
    font-weight: 700;
    text-align: center
}

.panel__subtitle {
    color: hsla(0,0%,100%,.7);
    font-size: 16px;
    font-weight: 700;
    max-width: 505px;
    text-align: left;
    width: auto
}

.panel__timer {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.panel__timer .panel__label {
    text-align: right
}

.timer {
    align-items: flex-start;
    display: flex;
    gap: 16px;
    justify-content: center
}

.timer>img {
    height: 40px;
    margin-top: 10px;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 40px
}

.timer>span {
    color: #fff;
    display: inline-block;
    font-size: 64px;
    font-weight: 700;
    min-width: 160px;
    text-align: center
}

.panel__number {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 26px;
    justify-content: flex-start;
    margin-top: 80px;
    width: 100%
}

.panel__name {
    color: #fff;
    font-size: 32px;
    font-weight: 700;
    text-align: left;
    width: 100%
}

.order {
    align-items: center;
    background: linear-gradient(33deg,#e798ff,#ad41ff);
    border-radius: 10px;
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    max-width: 650px;
    padding: 25px 40px;
    position: relative;
    width: 100%
}

.order:before {
    background: #181818;
    border-radius: 10px;
    content: "";
    height: calc(100% - 4px);
    left: 2px;
    position: absolute;
    top: 2px;
    width: calc(100% - 4px)
}

.order>span {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: center
}

.order>button,.order>span {
    position: relative;
    z-index: 10
}

.order>button {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    width: 20px
}

.order>p {
    background: #fff;
    border-radius: 10px 10px 10px 0;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    position: absolute;
    right: -113px;
    text-align: center;
    top: -22px;
    z-index: 20
}

.copy {
    align-items: center;
    display: flex;
    height: 20px;
    justify-content: center;
    margin-bottom: 4px;
    width: 20px
}

.copy use {
    fill: #fff;
    transition: all .2s ease 0s
}

@media (any-hover: hover) and (pointer:fine) {
    .copy:hover:hover use {
        fill:#8b3ffe
    }
}

.requesites {
    gap: 24px;
    margin-bottom: 34px;
    margin-top: 80px
}

.requesites,.requesites__list {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%
}

.requesites__list {
    gap: 16px
}

.requesites__item {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    width: 100%
}

.requesites__item>button {
    align-items: center;
    display: flex;
    justify-content: center;
    margin-left: 14px
}

.requesites__item>p {
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    text-align: center
}

.requesites__icon {
    align-items: center;
    background: #8b3ffe;
    border-radius: 50%;
    display: flex;
    height: 36px;
    justify-content: center;
    padding: 5.5px;
    width: 36px
}

.requesites__icon>img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

.panel__btn {
    align-items: center;
    background: #8b3ffe;
    border-radius: 30px;
    color: #fff;
    display: flex;
    font-size: 24px;
    font-weight: 700;
    justify-content: center;
    margin-top: 20px;
    padding: 25px 2px;
    text-align: center;
    transition: all .2s ease 0s;
    width: 100%
}

@media (any-hover: hover) and (pointer:fine) {
    .panel__btn:hover {
        background:#a56cfb
    }
}

.panel__manual {
    align-items: center;
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: rgba(0,0,0,.9);
    border-radius: 30px;
    flex-direction: column;
    justify-content: center;
    max-width: 1048px;
    padding: 60px 95px 100px;
    width: 100%
}

.panel__title {
    color: #fff;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    width: 100%
}

.manual__items {
    align-items: flex-start;
    counter-reset: listCount;
    flex-direction: column;
    gap: 14px;
    margin: 45px 0 20px;
    width: 100%
}

.manual__item,.manual__items {
    display: flex;
    justify-content: flex-start
}

.manual__item {
    align-items: center;
    flex-wrap: wrap;
    gap: 0 40px;
    padding: 4px 0 4px 56px;
    position: relative
}

.manual__item:before {
    align-items: center;
    background: #8b3ffe;
    border-radius: 50%;
    color: #fff;
    content: counter(listCount);
    counter-increment: listCount;
    display: flex;
    font-size: 24px;
    font-weight: 600;
    height: 36px;
    justify-content: center;
    left: 0;
    min-width: 36px;
    padding: 5px 5px 0;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: 0
}

.manual__item>p {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    text-align: left
}

.manual__item>span {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    padding: 10px 10px 6px;
    text-align: center
}

.manual__item>span,.panel__message {
    background: #131313;
    border-radius: 10px
}

.panel__message {
    padding: 20px 30px;
    width: 100%
}

.panel__message p {
    color: #fff;
    font-size: 24px;
    font-weight: 600
}

.panel__message p>span {
    color: #e81f1f
}

.panel__expectation {
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    background: rgba(0,0,0,.9);
    border-radius: 30px;
    max-width: 1048px;
    min-height: 580px;
    padding: 90px 95px
}

.expectation__content,.panel__expectation {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%
}

.expectation__content {
    display: flex;
    margin: 42px 0 50px
}

.expectation__label {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    opacity: .75;
    text-align: center;
    width: 100%
}

.expectation__timer {
    font-size: 64px;
    margin: 16px 0 24px
}

.expectation__description,.expectation__timer {
    color: #fff;
    font-weight: 700;
    text-align: center;
    width: 100%
}

.expectation__description {
    font-size: 20px
}

.loader {
    animation: loader 1.25s linear 0s infinite;
    height: 150px;
    margin-top: 32px;
    width: 150px
}

.loader>img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: center;
    object-position: center;
    width: 100%
}

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

    to {
        transform: rotate(1turn)
    }
}

.order__info {
    color: hsla(0,0%,100%,.75);
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
    text-align: right
}

.order__info>span {
    background: #131313;
    border-radius: 10px;
    color: #fff;
    padding: 10px
}

.order__status {
    align-items: center;
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 30px;
    font-weight: 500;
    justify-content: center;
    padding: 12px 20px;
    width: auto
}

.order__status._success {
    background: #28be00
}

.order__status._error {
    background: #fb0303
}

@media (min-width: 979px) and (max-height:1260px) {
    .panel {
        padding-bottom:16px;
        padding-top: 16px
    }

    .panel__expectation {
        min-height: 520px
    }

    .panel__expectation,.panel__manual {
        padding-bottom: 24px;
        padding-top: 24px
    }

    .expectation__timer {
        margin-bottom: 12px
    }

    .expectation__content {
        margin: 32px 0
    }

    .panel__number,.requesites {
        margin-top: 24px
    }

    .panel__pay {
        padding-bottom: 24px;
        padding-top: 24px
    }

    .requesites {
        margin-bottom: 0;
        margin-top: 24px
    }

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

@media (min-width: 979px) and (max-height:920px) {
    .panel__amount,.timer>span {
        font-size:48px
    }

    .timer>img {
        margin-top: 2px
    }

    .timer>span {
        min-width: 140px
    }

    .panel__label {
        font-size: 20px;
        margin-bottom: 12px
    }

    .panel__number {
        gap: 16px
    }

    .panel__name {
        font-size: 28px
    }

    .order {
        padding: 20px
    }

    .requesites__list {
        gap: 12px
    }

    .panel__info {
        margin-top: 16px
    }

    .panel__btn {
        padding-bottom: 16px;
        padding-top: 16px
    }

    .requesites {
        gap: 20px;
        margin-top: 20px
    }
}

@media screen and (max-width: 978px) {
    .panel__expectation,.panel__pay {
        padding:24px
    }

    .panel__number,.requesites {
        margin-top: 40px
    }

    .panel {
        padding-bottom: 16px;
        padding-top: 16px
    }

    .panel .star {
        display: block!important
    }

    .order>p {
        right: -20px
    }

    .panel__manual {
        padding: 24px
    }
}

@media screen and (max-width: 768px) {
    .panel {
        padding:0
    }

    .panel__content {
        border-radius: 0;
        min-height: 100vh;
        padding: 24px 15px
    }

    .panel__methods {
        gap: 6px;
        margin-top: 24px
    }

    .panel__method {
        border-radius: 3px;
        padding: 5px
    }

    .panel__method>img {
        height: 12px
    }

    .panel__info {
        margin-top: 12px
    }

    .panel__label {
        font-size: 12px;
        margin-bottom: 6px
    }

    .panel__amount {
        font-size: 36px
    }

    .panel__subtitle {
        font-size: 12px;
        margin-top: 8px;
        max-width: 240px
    }

    .timer {
        gap: 10px
    }

    .timer>img {
        height: 24px;
        margin-top: 5px;
        width: 24px
    }

    .timer>span {
        font-size: 36px;
        min-width: 92px
    }

    .panel__number {
        gap: 12px;
        margin-top: 38px
    }

    .panel__name {
        font-size: 20px
    }

    .order {
        gap: 10px;
        padding: 12px 20px
    }

    .order>p {
        border-radius: 5px 5px 5px 0;
        font-size: 10px;
        font-weight: 500;
        padding: 5px 10px;
        right: -5px;
        top: -15px
    }

    .order>span {
        font-size: 20px
    }

    .order:before {
        background: #0d0d0d
    }

    .requesites {
        gap: 24px;
        margin-bottom: auto;
        margin-top: 38px;
        padding-bottom: 16px
    }

    .requesites .panel__name {
        max-width: 270px
    }

    .requesites__list {
        gap: 12px
    }

    .requesites__item>button {
        margin: 0
    }

    .requesites__item>p {
        font-size: 18px
    }

    .requesites__icon {
        height: 30px;
        padding: 5px;
        width: 30px
    }

    .panel__btn {
        border-radius: 10px;
        font-size: 20px;
        margin-top: 12px;
        padding: 12px 4px
    }

    .panel__message,.panel__title {
        margin-top: auto
    }

    .panel__title {
        font-size: 28px
    }

    .expectation__label {
        font-size: 20px
    }

    .expectation__timer {
        font-size: 54px;
        margin: 12px 0 16px
    }

    .loader {
        height: 75px;
        margin-bottom: auto;
        margin-top: 24px;
        width: 75px
    }

    .manual__items {
        gap: 18px;
        margin-top: 26px
    }

    .manual__item {
        gap: 4px 20px;
        padding: 0 0 0 38px
    }

    .manual__item:before {
        bottom: 0;
        font-size: 14px;
        font-weight: 600;
        height: 26px;
        margin: auto 0;
        min-width: 26px;
        padding: 8px 8px 4px
    }

    .manual__item>p {
        font-size: 18px
    }

    .manual__item>span {
        border-radius: 10px;
        font-size: 16px;
        padding: 6px 10px 5px
    }

    .panel__message {
        border-radius: 10px;
        padding: 10px 20px
    }

    .panel__message>p {
        font-size: 16px
    }

    .panel__expectation {
        -webkit-backdrop-filter: unset;
        backdrop-filter: unset;
        background: transparent
    }

    .panel .star:first-child {
        left: 5%
    }

    .panel .star:nth-child(3) {
        right: 15%
    }

    .expectation__content {
        margin-bottom: auto
    }

    .order__status {
        font-size: 24px;
        padding: 12px 16px
    }
}

@media (max-width: 768px) and (max-height:700px) {
    .panel__methods {
        margin-top:0
    }

    .panel__number,.requesites {
        margin-top: 24px
    }

    .requesites {
        gap: 20px
    }
}