/* Globals */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font_general: 'Roboto', sans-serif;
    --color_orange-accent: #FFC107;
    --color_blue-accent: #4E9FE2;
    --color_black: #212529;
    --color_white: #FFFFFF;
    --color_mid-gray: #6C757D;
    --linear_blue-purple: linear-gradient(270deg, #984EE2 0%, #4E9FE2 100%);
}

*, a:focus {
    outline: none !important;
}
/* .modal {
    top: 1%;
    left: 8%;
}
@media screen and (max-width: 768px) {
    .modal {
        left: 0;
    }
} */

.btn:focus {
    outline: none;
    box-shadow: none;
}

img {
    max-width: 100%;
}

body {
    font-family: var(--font_general);
    color: var(--color_black);
    background-image: var(--linear_blue-purple);
}

.btn--reset {
    padding: 0;
    outline: none;
    border: none;
    margin: 0;
    background: transparent;
}

.btn--full {
    font-weight: 700;
    border-radius: 10px;
    padding: 9px;
    font-size: 14px;
    line-height: normal;
    transition: all .3s ease-in-out;
}

.btn--full_orange {
    background-color: var(--color_orange-accent);
    color: var(--color_black);
}

    .btn--full_orange:hover, .btn--full_orange:focus {
        background-color: #e5ad06;
    }

.btn--full_blue {
    background-color: var(--color_blue-accent);
    color: var(--color_white);
}

    .btn--full_blue:hover, .btn--full_blue:focus {
        background-color: #468fcb;
        color: var(--color_white);
    }

    .btn--full_blue:disabled {
        pointer-events: none;
        opacity: .5;
    }

.btn--full_vivid-blue {
    background: #0D6EFD;
    color: var(--color_white);
}

    .btn--full_vivid-blue:hover, .btn--full_vivid-blue:focus {
        background-color: var(--color_blue-accent);
        color: var(--color_white);
    }

.btn--border {
    background-color: transparent;
    transition: all .3s ease-in-out;
    border-radius: 11px;
}

.btn--border_blue {
    border: 1.5px solid var(--color_blue-accent);
    color: var(--color_black);
}

    .btn--border_blue:hover, .btn--border_blue:focus {
        background-color: var(--color_blue-accent);
        color: var(--color_white);
    }

.main-content {
    background-color: var(--color_white);
    border-radius: 16px 16px 0 0;
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
    margin-block-start: 48px;
    position: relative;
    z-index: 2;
    margin-block-end: 52px;
    max-width: 1320px;
    margin-inline: auto;
    min-height: calc(100vh - 46px - 52px);
    display: flex;
    flex-direction: column;
}

.main-content__title-wr {
    position: relative;
    padding-block: 10px 8px;
}

.main-content__title {
    font-size: 13px;
    font-weight: 900;
    line-height: 118%;
    color: #212529;
    text-align: center;
    margin: 0;
}

.main-content__close-btn {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
}

.main-content__back-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 18px;
    height: 18px;
}

    .main-content__close-btn svg, .main-content__back-btn svg {
        width: 100%;
        height: 100%;
    }
/* main-content */

.content-block {
    border-radius: 16px 16px 0px 0px;
    background: rgba(78, 159, 226, 0.15);
    padding: 4.5px;
    flex-grow: 1;
}

.content-block__inner {
    background-color: var(--color_white);
    border-radius: 10px;
    padding: 10px;
}

.content-block__title {
    color: var(--color_black);
    font-size: 13px;
    font-weight: 700;
    line-height: 123%;
    text-align: center;
    margin: 0;
}
/* content-block */

@media screen and (min-width: 768px) {
    .btn--full {
        font-size: 20px;
        padding: 12px;
    }

    .main-content {
        margin-block: 64px 75px;
        padding-inline: 24px;
        min-height: calc(100vh - 64px - 75px);
    }

    .main-content__title-wr {
        position: relative;
        padding-block: 16px 12px;
    }

    .main-content__title {
        font-size: 24px;
    }

    .main-content__close-btn {
        width: 24px;
        height: 24px;
    }

    .content-block {
        padding: 10px;
    }

    .content-block__title {
        font-size: 22px;
    }
}

.grad-btn-out {
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    overflow: hidden;
    padding: 1px;
    display: inline-block;
    border-radius: 8px;
}

    .grad-btn-out input {
        border-radius: 8px;
        background: #fff !important;
        border: none;
        padding: 10px 30px;
        display: inline-block;
    }

#nav-wraper .container-lg {
    display: none;
}

.blue-gradient-text {
    background: linear-gradient(270deg, #4E9FE2 0%, #BC4EE2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #BC4EE2;
    display: table;
}

.bigTitle {
    font-style: normal;
    font-weight: 800;
    font-size: 65px;
    line-height: 79px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: #4E9FE2;
}

@supports (-webkit-text-stroke: 1px rgba(78, 159, 226, 0.15)) {
    .bigTitleOverlay {
        color: transparent;
        -webkit-text-stroke: 1px rgba(78, 159, 226, 0.15);
        font-size: 100px;
        font-weight: bold;
        line-height: 79px;
        /* text-align: left; */
        text-transform: uppercase;
        margin-block-end: -9rem;
    }
}

@media screen and (max-width: 768px) {
    .bigTitle {
        font-size: 32px;
        line-height: 39px;
    }

    .bigTitleOverlay {
        font-size: 45px;
        line-height: 55px;
    }
}

.blueGradBtn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    width: 309px;
    height: 48px;
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    margin: 2rem 0;
    width: 100%;
    max-width: 300px;
}

    .blueGradBtn:hover {
        color: #dfdfdf;
    }
/* Quick Buttons */
.quick-buttons {
    margin-block-start: 2.4rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    text-align: center;
    width: 100%;
    max-width: 328px;
}

.market {
    padding: 12px 16px;
    /* width: 99px;
    height: 46px; */
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    /* margin-inline-end: 24px; */
}

    .market:hover, .auction:hover, .activity:hover, .race:hover {
        color: #E7E7E7;
        transition: .9s;
    }

.auction {
    padding: 12px 16px;
    /* width: 107px;
    height: 46px; */
    background: linear-gradient(55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    /* margin-inline-end: 24px; */
}

.activity {
    padding: 12px 16px;
    /* width: 105px;
    height: 46px; */
    background: linear-gradient(55.34deg, #89C865 3.28%, #B4F091 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    /* margin-inline-end: 24px; */
}

.race {
    padding: 12px 16px;
    /* width: 79px;
    height: 46px; */
    background: linear-gradient(55.34deg, #FF8979 3.28%, #FFBBB1 92.44%), linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
}

@media screen and (min-width: 768px) {
    .quick-buttons {
        display: flex;
        max-width: auto;
    }

        .quick-buttons a {
            min-width: 80px;
        }
}

/* ----------- FRONT PAGE --------- */
/* NAV */
.start-link {
    background: #FFAD01;
    color: #ffffff;
    padding: 8px 16px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    width: 79px;
    display: flex;
    justify-content: center;
}

.nav-item {
    font-weight: 600;
}

    .nav-item a {
        color: #ffffff !important;
    }

        .nav-item a:hover {
            color: #fdfdfd !important;
            transition: .6s;
        }

.dash-user-drop {
    display: flex;
    align-items: center;
}

.dropdown .dashboard-user-info__avatar {
    border-radius: 50%;
}

.dropdown .dash-user-drop {
    font-weight: 600;
    color: #ffffff;
}

.dropdown .main-avatar {
    margin-inline-end: 10px;
}

.dropdown .main-avatar__icon {
    width: 32px;
    height: 32px;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        left: -18px;
    }

    .navbar-expand-lg .navbar-nav {
        align-items: center;
    }
}

/* Header */
.header-top {
    /* background: linear-gradient(92.46deg, #4E9FE2 9.84%, #984EE2 84.58%); */
    position: fixed;
    z-index: 4;
    top: 0;
    width: 100%;
    left: 0;
    right: 0;
    background: var(--linear_blue-purple);
}

.header__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    max-width: 1320px;
    margin-inline: auto;
    padding-block: 10px 13px;
    padding-inline: 20px 14px;
}

.header__progress-wr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.header__settings-link svg {
    width: 24px;
    height: 24px;
}

.progress-bar {
    position: relative;
    color: var(--color_white);
    text-transform: uppercase;
    line-height: 122%;
    font-weight: 900;
    font-size: 10px;
    display: block;
    background: transparent;
    overflow: visible;
}

.progress-bar__bg {
    border-radius: 21px;
    border: 1.2px solid var(--color_white);
    background: var(--color_mid-gray);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
}

.progress-bar__progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    background-color: #FD7E14;
}

.progres-bar__inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    position: relative;
    padding-inline-end: 4px;
}

.progress-bar--hp .progres-bar__inner {
    padding-inline-end: 22px;
}


.progress-bar__icon svg {
    width: 24px;
    height: 24px;
}

.progress-bar__icon {
    margin-inline-start: -5px;
}

.progress-bar__btn svg {
    width: 18px;
    height: 18px;
}


@media screen and (min-width: 768px) {
    .header__container {
        padding: 16px 14px 16px 20px;
    }

    .header__progress-wr {
        gap: 32px;
    }

    .header__settings-link svg {
        width: 32px;
        height: 32px;
    }

    .progress-bar {
        font-size: 16px;
    }

    .progres-bar__inner {
        gap: 12px;
    }

    .progress-bar__icon svg {
        width: 32px;
        height: 32px;
    }

    .progress-bar__icon {
        margin-inline-start: -8px;
    }

    .progress-bar__btn svg {
        width: 24px;
        height: 24px;
    }
}

/* Hero block */
.hero-block {
    background: url(../img/hero-bg.png) no-repeat;
    background-position: top center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 40px;
}

.hero-logo {
    max-width: 450px;
    margin: 4rem 0 2rem 0;
}

.hero-dogs {
    /* margin: 0 0 -67px 0; */
}

@media screen and (max-width: 768px) {
    .hero-logo {
        max-width: 100%;
    }
}
/* What is */
.whatIs {
    background: url(../img/bg.jpeg) no-repeat;
    background-size: cover;
    padding-top: 77px;
    margin-block-start: -67px;
    padding-block-end: 3rem;
}

.wiBlock01 {
    margin: 0 auto;
    /* width: 1126px;
    height: 232px; */
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.15);
    border-radius: 32px;
    padding-block-end: 2rem;
}

.wiRow01 {
    margin-block-start: 3rem;
}

.wiBlock01 .blueGradBtn {
    margin: 32px auto;
}

.wi01-l {
    align-items: flex-end;
}

    .wi01-l span, .wi01-r span {
        display: flex;
        align-items: center;
        font-size: 18px;
    }

        .wi01-l span img, .wi01-r span img {
            margin-inline-end: 5px;
            width: 21px;
        }

.wi01-l, .wi01-r {
    display: flex;
    flex-direction: column;
}

.wiBlock02 {
    background: url(../img/wib02-bg.png), #ffffff;
    background-position: right;
    background-size: cover;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    border-radius: 64px;
    padding: 48px 55px 0 55px;
    display: flex;
}

.wib-left {
    width: 70%;
}

.wib-left-text {
    color: #636363;
    font-weight: 300;
}

.wib-right {
    width: 30%;
    margin-left: -2rem;
    display: flex;
    align-items: flex-end;
}

.today-top {
    display: flex;
    flex-direction: column;
    padding: 32px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.15);
    border-radius: 32px;
}

.tt-title {
    font-size: 38px;
    font-weight: 600;
    line-height: 55px;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    color: #4E9FE2;
}

.today-top .card {
    overflow: hidden;
    border-radius: 16px;
}

.create-by {
    color: #636363;
    font-size: 14px;
    font-weight: 300;
}

.owner {
    color: #FFAD01;
    font-size: 14px;
    font-weight: 300;
}

.tt-bottom {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #4C4C4C;
    margin-block-start: 16px;
}

@media screen and (max-width:768px) {
    .wi01-l, .wi01-r {
        align-items: flex-start;
        padding: 0 28px;
    }

        .wi01-l span, .wi01-r span {
            font-size: 14px;
            line-height: 30px;
            word-spacing: 0 !important;
        }
}

/* What you can do  */
.whatUCan {
    margin-block-start: 3rem;
    /* width: 1456px;
    height: 774px; */
    padding: 48px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.15);
    border-radius: 64px;
}

    .whatUCan .bigTitleOverlay {
        margin-block-end: -15rem;
    }

    .whatUCan .bigTitle, .whatUCan .bigTitleOverlay {
        text-align: center;
    }

.wuRow {
    margin-block-start: 2rem;
    justify-content: space-between;
}

    .wuRow .card {
        text-align: center;
        border: 0;
        max-width: 350px;
    }

.whatUCan .blueGradBtn {
    margin: 2rem auto;
}

@media screen and (max-width: 768px) {
    .whatUCan {
        padding: 1rem;
    }

        .whatUCan .blueGradBtn {
            max-width: 255px;
        }

    .wiBlock02 {
        flex-direction: column-reverse;
        background-position: 25% 24%;
        background-size: contain;
        background-repeat: no-repeat;
        text-align: center;
        align-items: center;
        padding: 10px 10px 10px 17px;
    }

    .wib-left, .wib-right {
        width: 100%;
    }

        .wib-left .blueGradBtn {
            margin: 3rem 0 3rem 0;
        }

    .wuRow .card {
        max-width: 100%;
        width: 100%;
        ;
    }

    .today-top {
        margin-block-start: 4rem;
    }

    .whatUCan .bigTitleOverlay {
        margin-block-end: -15rem;
    }
}

/* Gameplay */
.gameplay {
    padding: 4rem 0;
}

.gTitle {
    margin: 0 0 4rem 0;
    /* padding: 3rem 0; */
}

    .gTitle .bigTitleOverlay, .hwTitle .bigTitleOverlay {
        margin-block-end: -4.5rem;
    }

.hwTitle {
    margin: 3rem 0;
}

    .hwTitle .bigTitleOverlay {
    }

.howToWin {
    color: #3d3d3d;
    font-weight: 300;
}

    .howToWin .card {
        padding: 0 1rem;
        border: 0;
    }

        .howToWin .card .card-img-top {
            width: 160px;
            margin: 0 auto;
        }

        .howToWin .card .card-title {
            color: #1f1f1f;
            font-weight: 600;
        }

.gpBottom {
    color: #818181;
    text-align: center;
    margin-block-start: 1.5rem;
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    .gameplay {
        padding: 4rem 3rem;
    }

    .howToWin .card .card-img-top {
        width: 320px;
    }

    .gTitle .bigTitleOverlay {
        margin-block-end: -2.5rem;
    }

    .hwTitle .bigTitleOverlay {
        margin-block-end: -9rem;
    }

    .gTitle {
        margin: 0;
        margin-block-end: 2rem;
    }

    .gameplay .blueGradBtn {
        max-width: 276px;
    }
}

/* Pimp block */
.pimp {
    padding: 64px 0 92px 0;
    background: url(../img/bg.jpeg);
    background-size: cover;
}

.pimpContent {
    max-width: 1456px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.15);
    border-radius: 64px;
    padding: 3rem 8.75rem;
    margin: 0 auto;
}

    .pimpContent .bigTitleOverlay {
        font-size: 5.5em;
    }

.pimpBottom {
    color: #494949;
    font-size: 18px;
    line-height: 22px;
    display: flex;
    align-items: center;
    text-align: center;
}

.pimpDogsList {
    display: flex;
    justify-content: center;
    margin: 2rem 0;
}

@media screen and (min-width: 1440px) {
    .pimp {
        padding-left: 5rem;
        /* padding-inline-end: 5rem; */
    }
}

@media screen and (max-width: 1440px) {
    .pimp {
        padding-left: 4rem;
        /* padding-inline-end: 4rem; */
    }
}

@media screen and (max-width:768px) {
    .pimp {
        padding-left: 1.6rem;
        /* padding-inline-end: 1.6rem; */
    }

    .pimpContent {
        padding: 2rem;
        text-align: center;
    }

    .pimp img {
        max-width: 100%;
    }

    .pimpContent .bigTitle {
        font-weight: 800;
        font-size: 32px;
        line-height: 39px;
    }

    .pimpContent .bigTitleOverlay {
        font-size: 42px;
        margin-block-end: -16rem;
        font-weight: 800;
        line-height: 55px;
    }

    .pimpDogsList {
        display: flex;
        flex-direction: column-reverse;
        margin: 2rem 0;
    }
}

/* Special rare block */
.special {
    padding: 4rem 0.8rem;
}

.spec-title {
    margin-block-end: 3rem;
    text-align: center;
}

.spec-row .card {
    border: 0;
}

    .spec-row .card .card-img-top {
        max-width: 250px;
        margin: 0 auto;
    }



/* Start bottom section */
.start-bottom {
    background: url(../img/bg.jpeg);
    padding-top: 48px;
    background-size: cover;
}

.startContent {
    max-width: 1456px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 32px;
    text-align: center;
    padding: 48px;
    margin: 0 auto;
}

    .startContent .bigTitleOverlay {
        text-align: center;
    }

.startDogsList {
    justify-content: space-between;
    margin: 3rem 0;
    text-align: left;
}

    .startDogsList .card {
        width: 274px;
        height: 389px;
        background: #FFFFFF;
        border: 2px solid #C9C9C9;
        box-sizing: border-box;
        border-radius: 16px;
        padding-top: 8px;
    }

    .startDogsList .card-title {
        background: #FFAD01;
        color: #ffffff;
        font-weight: 600;
        margin-block-start: 2px;
        text-align: center;
    }

        .startDogsList .card-title::before {
            content: url(../img/bit-round.svg);
            position: absolute;
            left: 7px;
            top: 211px;
        }

.start-card-descr {
    color: #4E9FE2;
    font-size: 18px;
    font-weight: 700;
    margin: 9px 0;
}

.startDogsList .card-body {
    padding: 0;
}

.startDogsList .card-text {
    font-size: 14px;
}

.startContent .blueGradBtn {
    margin: 0 auto;
}

.get-your-dog {
    max-width: 1128px;
    height: 600px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 64px;
    margin: 4rem auto;
    padding: 30px 69px 0 69px;
}

.gd-title {
    text-align: center;
}

    .gd-title .bigTitle {
        font-size: 45px;
        display: block;
    }

    .gd-title .bigTitleOverlay {
        font-size: 70px;
    }

.gd-parents {
    margin-block-start: 5rem;
}

.after-start {
    width: 100%;
    height: 329px;
    background: linear-gradient(9.03deg, #4E9FE2 -21.41%, #984EE2 123.21%), #4E9FE2;
    margin-block-start: -190px;
    border-top-width: 2px;
    /* border-width: 3px; */
    border-top-style: solid;
    border-image: linear-gradient(to top, #4E9FE2 -21.41%, #984EE2 123.21%);
}

    .after-start .blueGradBtn {
        position: relative;
        margin: 0 auto;
    }

.front-page-footer, .front-page-footer a {
    color: #ffffff !important;
}

@media screen and (max-width: 768px) {
    .startContent .bigTitleOverlay {
        text-align: center;
        margin-block-end: -16rem;
    }

    .startContent {
        padding: 40px 20px;
    }

    .start-text {
        margin-block-start: 3rem;
    }

    .startDogsList {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

        .startDogsList .card {
            display: inline-block;
        }

        .startDogsList .card-title::before {
            top: 191px;
        }

        .startDogsList .card-text {
            white-space: pre-wrap;
        }

    .get-your-dog {
        padding: 10px;
        height: auto;
        overflow: hidden;
    }

    .gd-title .bigTitle {
        font-size: 32px;
    }

    .gd-title .bigTitleOverlay {
        font-size: 45px;
        line-height: 55px;
        margin-block-end: -9rem;
    }

    .gd-parents {
        margin-block-start: 4rem;
        margin-left: -7rem;
        width: 37rem;
        max-width: initial;
    }

    .after-start .blueGradBtn {
        margin: 27px auto;
    }

    .cd-frontpage-all {
        max-width: 100%;
    }
}


/* Footer */
.footer {
    position: fixed;
    z-index: 4;
    bottom: 0;
    width: 100%;
    background: var(--color_white);
}

    .footer::before {
        content: "";
        left: 0;
        width: 100%;
        top: -5px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0.05);
        position: absolute;
        z-index: 1;
    }

.footer__container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding-inline: 15px;
    max-width: 1320px;
    margin-inline: auto;
}

.footer__btns {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-basis: 30%;
    justify-content: space-between;
    gap: 10px;
    list-style-type: none;
    padding-inline: 0;
    margin: 0;
}

.footer__play-btn {
    margin-block-start: -15px;
    position: relative;
    z-index: 1;
    transition: all .3s ease-in-out;
}

    .footer__play-btn:hover, .footer__play-btn:focus {
        transform: scale(1.1);
    }

    .footer__play-btn svg {
        width: 60px;
        height: 60px;
    }

.page-link {
    padding: 0;
    margin: 0;
    border: none;
}

    .page-link a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border: none;
        gap: 3px;
        font-size: 9px;
        line-height: 126%;
        color: var(--color_black);
        padding: 7px 12px;
        position: relative;
        text-decoration: none;
    }

    .page-link svg {
        width: 25px;
        height: 25px;
        transition: all .3s ease-in-out;
    }

    .page-link a::after {
        content: "";
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 5px;
        background-color: transparent;
        transition: all .3s ease-in-out;
    }

    .page-link a.active {
        color: var(--color_blue-accent);
        font-weight: 500;
    }

        .page-link a.active::after {
            background-color: var(--color_blue-accent);
        }

    /* home link */
    .page-link svg {
        fill: none;
        stroke: var(--color_mid-gray);
    }

    .page-link a.active svg {
        fill: var(--color_blue-accent);
        stroke: transparent;
    }

/* shop link */
.page-link--shop svg path {
    fill: var(--color_mid-gray);
    stroke: none;
}

.page-link--shop a.active svg path {
    fill: var(--color_white);
}
/* city link */

.page-link--city svg circle {
    fill: var(--color_mid-gray);
    stroke: none;
}

.page-link--city svg path {
    fill: var(--color_white);
}

.page-link--city a.active circle {
    fill: var(--color_white);
}

.page-link--city a.active path {
    fill: var(--color_blue-accent);
    stroke: var(--color_white);
    stroke-width: 1px;
}

/* faq link */

.page-link--faq svg rect {
    fill: var(--color_mid-gray);
}

.page-link--faq a.active svg rect {
    fill: var(--color_white);
}

@media screen and (min-width: 768px) {
    .footer__container {
        gap: 64px;
        justify-content: center;
    }

    .footer__btns {
        flex-basis: 15%;
    }

    .footer__play-btn svg {
        width: 78px;
        height: 78px;
    }

    .page-link a {
        font-size: 14px;
        gap: 6px;
        padding: 10px 16px;
    }

    .page-link svg {
        width: 32px;
        height: 32px;
    }
}
/* 
.wrapper {
    display: flex;
    justify-content: space-between;
    background: transparent;
    margin-block-start: -40px;
}

.links {
    list-style: none;
    display: flex;
    width: 33%;
    justify-content: space-between;
}
.links a {
    color: #333333;
    text-decoration: none;
}
.links a:hover {
    color: #000000;
    transition: .7s;
} */
/* 
@media screen and (max-width: 768px) {
    .wrapper {
        flex-direction: column;
        margin-block-start: -80px;
    }
    .copyright {
        text-align: center;
    }
    .links {
        width: 100%;
        width: 100%;
        justify-content: space-evenly;
        margin: 0;
        padding: 0;
    }
} */



/* --- LOGIN PAGE --- */
.main-content.faq-page {
    /* padding: 3.8rem 0 4rem 0; */
    /* width: 98vw; */
}

.login-row {
    height: 94vh;
}

.left-login-block {
    background: linear-gradient(111.11deg, #4E9FE2 9.24%, #984EE2 79.63%);
    display: flex;
    justify-content: flex-end;
    padding: 2rem 3rem 4rem 0;
}

    .left-login-block img {
        max-width: 409px;
        max-height: 617px;
    }

.form-login-block {
    padding: 4rem 0 0 4rem;
}

.login-title {
    text-align: center;
    margin-block-end: 2.5rem;
}

.form-login-block .bigTitle {
    display: block;
}

.form-login-block .bigTitleOverlay {
    margin-block-end: -5rem;
}

.pure-g {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.form-space {
    width: 448px;
    display: flex;
    flex-direction: column;
}

.css-checkbox input {
    margin-inline-end: 5px;
}

.form-line {
    margin: 17px 0;
}

.rme-forgot-line {
    margin-block-end: 1.5rem;
}

    .rme-forgot-line a, .create-account a {
        color: #FFAD01;
        text-decoration: none;
    }

.form-submit .blueGradBtn {
    width: 100%;
    margin: 1rem 0 2rem 0;
}

.delimeter p {
    display: flex;
    align-items: center;
    color: #6F6F6F;
    margin-block-end: 1.5rem;
}

    .delimeter p::before, .delimeter p::after {
        background-color: #6F6F6F;
        content: "";
        display: inline-block;
        height: 1px;
        position: relative;
        vertical-align: middle;
        width: 100%;
        margin: 0 15px;
    }

.g-button {
    color: #4E9FE2;
    border: 2px solid #4E9FE2;
    box-sizing: border-box;
    border-radius: 8px;
}

    .g-button:hover {
        color: #984EE2;
        border: 2px solid #984EE2;
        transition: .85s;
    }

    .g-button i {
        margin-inline-end: 1rem;
    }

.create-account {
    margin-block-start: 4rem;
    text-align: center;
}

.front-page-footer, .login-page-footer {
    font-weight: 600;
}

    .login-page-footer p, .login-page-footer p a {
        color: #ffffff;
    }

@media screen and (max-width:768px) {
    .form-login-block {
        padding-left: 2rem;
        /* padding-inline-end: 1rem; */
    }

    .pure-g {
        align-items: center;
    }

    .form-space {
        width: 100%;
        max-width: 448px;
    }

    .form-login-block .bigTitleOverlay {
        margin-block-end: -3rem;
    }

    .left-login-block {
        display: none;
    }

    .create-account {
        margin-block-end: 4rem;
    }
}

/* -------- FORGOT PAGE ---------- */
.forgot {
    padding-top: 4rem;
}

.forgot-page {
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

    .forgot-page a {
        color: #FFAD01;
        text-decoration: none;
    }

.fg-title {
    display: block;
    text-align: center;
}

    .fg-title .bigTitle {
        font-size: 45px;
        display: block;
    }

    .fg-title .bigTitleOverlay {
        font-size: 70px;
        margin-block-end: -5rem;
    }

.fg-form {
    text-align: center;
    padding-top: 30px;
    max-width: 640px;
}

.fg-field {
    max-width: 448px;
    margin: 3rem auto;
}

.fg-button input {
    float: none;
    margin: 4rem auto;
}

.issues {
    margin-block-end: 3rem;
}

@media screen and (max-width: 768px) {
    .fg-title .bigTitle {
        font-size: 32px;
        display: block;
    }

    .fg-title .bigTitleOverlay {
        font-size: 45px;
        margin-block-end: -6rem;
    }
}

/* -------- ABOUT US PAGE ---------- */
.about-page {
    padding-top: 7rem;
}

.about-title {
    margin-block-start: 3rem;
    text-align: center;
}

    .about-title .bigTitle {
        display: block;
    }

    .about-title .bigTitleOverlay {
        margin-block-end: -5rem;
    }

.about-page-top {
    text-align: center;
    margin: 4rem 0 3rem 0;
}

.page-about-content {
    max-width: 930px;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .about-page {
        padding: 4rem 1.5rem 7rem 1.5rem;
    }

    .about-title .bigTitleOverlay {
        margin-block-end: -3rem;
    }
}

/* -------- FAQ PAGE ----------- */


/* -------- PARENT SELECTION - START PAGE -------- */
/* .parent-selection-wrappper {
    padding: 5rem 0;
    text-align: center;
    height: auto;
} */
.breed-page {
    font-size: 12.5px;
}

    .breed-page a {
        text-decoration: none;
    }

    .breed-page .content-block {
        padding-block: 11px 45px;
    }

    .breed-page .content-block__title {
        margin-block-end: 22px;
        font-weight: 600;
    }

.breed-page__btn {
    width: 100%;
    margin: 21px auto 0;
}

.breed-page__disclaimer {
    text-align: center;
    margin-block-start: 21px;
    max-width: 400px;
    margin-inline: auto;
}

.breed-page__skip-btn {
    font-size: 12px;
    line-height: 120%;
    text-align: center;
    color: #494949;
    font-weight: 600;
    margin: 20px auto;
    display: block;
    width: max-content;
    padding: 0;
}

.breed-page__invite-code-wr {
    margin-block-start: 32px;
}

    .breed-page__invite-code-wr label {
        color: var(--color_mid-gray);
        font-size: 13px;
        font-weight: 500;
    }

.breed-page__invitecode {
    padding: 5px;
    font-size: 12px;
    width: 120px;
    margin: 3px auto 0;
}
/* .start-page-title {
    margin-block-end: 3rem;
}
.start-page-title .bigTitle {
    display: block;
    font-size: 45px;
}

.start-page-title .bigTitleOverlay {
    font-size: 70px;
    margin-block-end: -5rem;
} */

.ps-card-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    max-width: 292px;
    margin-inline: auto;
    position: relative;
}

.ps-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 31px;
    height: 31px;
    z-index: 1;
}

    .ps-heart img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* --- PARENT CARD ---- */
.parent-card:not(.disabled) {
    cursor: pointer;
}

.parent-card__title, .parent-card__price {
    font-size: 9.5px;
    color: var(--color_mid-gray);
    line-height: 125%;
    text-align: center;
    text-decoration: none;
}

.parent-card__title {
    margin: 0 0 3px;
}

.parent-card__price {
    margin: 3px 0 0;
}

.parent-card__img-wr {
    border: 1.2px dashed var(--color_mid-gray);
    border-radius: 19px;
    overflow: hidden;
    position: relative;
    padding-block-start: 123%;
}

.parent-card__bg {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 177px;
    position: absolute;
    top: 0;
    left: 0;
}

.parent-card__bg--red {
    background: linear-gradient(270deg, #FEBAAF 0%, #FF8F81 100%);
}

.parent-card__bg--purple {
    background: linear-gradient(270deg, #816AA4 0%, #6058D5 100%);
}

.card-price {
    display: none;
}

.ps-card .dog-img-wrap {
    margin: 0;
    height: auto;
}

.parent-plus {
    width: 31px;
    height: 31px;
}

@media screen and (min-width: 768px) {
    .breed-page {
        font-size: 16px;
    }

        .breed-page .content-block {
            padding-block: 24px 64px;
        }

    .breed-page__btn {
        max-width: 320px;
        display: block;
    }

    .breed-page__disclaimer {
        max-width: 880px;
    }

    .breed-page__skip-btn {
        font-size: 16px;
    }

    .breed-page__invite-code-wr {
        margin-block: 48px;
    }

    .breed-page__invitecode {
        font-size: 15px;
        margin: 8px auto 0;
    }

    .breed-page__invite-code-wr label {
        font-size: 15px;
    }

    .ps-card-wrap {
        gap: 10px;
        max-width: 560px;
    }

    .ps-heart {
        width: 64px;
        height: 64px;
    }

    .parent-card__title, .parent-card__price {
        font-size: 14px;
    }
}

/* .dog-parent-select .market-label{
    display: none;
} */
/* .offer-description {
    margin-block-start: 2rem;
} */
/* @media screen and (max-width: 768px) {
    .ps-heart {
        margin: 0 -10px;
        z-index: 1;
    }
    .start-page-title .bigTitle {
        font-size: 32px;
    }

    .start-page-title .bigTitleOverlay {
        font-size: 45px;
        line-height: 55px;
        margin-block-end: -6rem;
    }
    .parent-container {
        width: 190px;
    }
    .ps-card-title {
        text-align: center;
        font-size: 13px;
    }
} */

/* Parents modal */

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(72, 72, 72, 0.3);
    display: none;
}

.modal--dog-select {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    height: 80vh;
    overflow: visible;
}

    .modal--dog-select .modal__wrapper {
        position: relative;
        width: 90vw;
        /* height: 1020px; */
        overflow-y: scroll;
        /* padding: 0 48px; */
        padding: 0 8px 8px;
        height: 100%;
        background: var(--color_white);
        border-radius: 16px;
        border: 2px solid rgba(0, 0, 0, 0.05);
        max-width: 1200px;
    }

@media screen and (min-width: 768px) {
    .modal--dog-select .modal__wrapper {
        padding: 0 24px 16px;
    }
}

.modal__wrapper::-webkit-scrollbar {
    display: none;
}

.modal--dog-select .modal__title-wr {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 2;
    background: var(--color_white);
}

/* .modal-wrapper .dim {
    margin-block-end: 0;
} */

/* .modal-parent-head {
    display: flex;
    justify-content: space-between;
    padding: .4rem 0 1rem;
    align-items: center;
    position: sticky;
    top: 0;
    margin: 1rem auto;
    height: 60px;
    width: 100%;
    background: #ffffff;
    z-index: 999;
} */

/*! --- FILTERING IN MODAL */
.modal.dog-parent-select .filtering {
    /* position: sticky;
    top: 58px; */
    background: #ffffff;
    /* z-index: 999; */
    padding-block-end: 24px;
    padding-inline: 0;
}


.filtering {
    display: flex;
    justify-content: space-between;
    padding-block-end: 32px;
}

.filter-left-block, .filter-right-block {
    display: flex;
    gap: 8px;
}

.filter-left-block {
    margin-block-end: 8px;
}


.opt-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid;
    padding-block-end: 1rem;
    margin-block-end: 1rem;
    position: sticky;
    top: -15px;
    background: #ffffff;
}

.dogs-quantity {
    text-align: left;
    font-weight: 600;
    display: none;
}
/* 
.modal-title {
    font-size: 28px;
    line-height: 34px;
    font-weight: 600;
}
.close-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    width: 74px;
    height: 40px;
    background: #FFAD01;
    border: 2px solid #FFAD01;
    box-sizing: border-box;
    border-radius: 8px;
    color: #ffffff;
} */

.rounded-control {
    height: 50px;
    padding: 0 1.4rem;
    border: 1px solid var(--color_blue-accent);
    box-sizing: border-box;
    border-radius: 10px;
    box-sizing: border-box;
    /* border-image-source: linear-gradient(rgba(78, 159, 226, 1), rgba(152, 78, 226, 1)); */
    cursor: pointer;
}

select.sorting-select {
    -webkit-appearance: none;
}

    select.sorting-select::after {
        content: "▼";
        padding: 0 8px;
        font-size: 12px;
        position: absolute;
        right: 8px;
        top: 4px;
        z-index: 1;
        text-align: center;
        width: 10%;
        height: 100%;
        pointer-events: none;
        box-sizing: border-box;
    }
/* input.search-dog.rounded-control {
    width: 383px;
} */
/* .select-filter-wrap {
    margin-left: 32px;
} */
.sorting-select {
    /* padding-inline-end: 2rem; */
}

.card-wrap {
    display: grid;
    gap: 10px 6px;
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
}

@media screen and (min-width: 768px) {
    .card-wrap {
        grid-template-columns: repeat(4, 1fr);
        gap: 32px 6px;
    }
}

.card-container-wrapper {
    /* height: 293px; */
    border-radius: 8px;
    margin-block-start: 2rem;
    overflow: hidden;
}

.card-wrap-overlay {
    display: none;
}

.dogs-section .card {
    border: 0;
}

.dog-img-wrap {
    height: 293px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.dogs-section .card-body {
    padding: 16px 0 0 0;
}

.dogs-section .card-img-top {
    height: 293px;
    border-radius: 10px;
}

.gen-text {
    margin-block-start: 8px;
    font-size: 14px;
    color: #A7A7A7;
}

.genn {
    margin-inline-end: 8px;
}

.lazy-dog {
    margin: 0 11px 0 26px;
}

.pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 64px;
    padding-block-end: 48px;
}

.pagination {
    align-items: center;
    margin: 0;
    padding: 0;
}

    .pagination li {
        margin-inline-end: 8px;
        cursor: pointer;
    }

    .pagination a.active {
        display: flex;
        padding: 2px;
        width: 24px;
        height: 24px;
        background: var(--color_blue-accent);
        border-radius: 4px;
        color: var(--color_white);
        font-weight: 600;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        cursor: pointer;
    }

.search_previous, .search_next {
    cursor: pointer;
}

.pager {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .pager a {
        font-size: 13px;
        line-height: 120%;
        display: flex;
        align-items: center;
        color: var(--color_mid-gray);
        margin-left: 16px;
        text-decoration: none;
        cursor: pointer;
    }
/* 
@media screen and (min-width: 1441px) {
    .modal.dog-parent-select {
        height: 765px;
    }
    .modal.dog-parent-select .modal-wrapper {
        height: 765px;
    }
}
@media (min-width: 769px) and (max-width: 1440px) {
    .modal.dog-parent-select {
        height: 730px;
    }
    .modal.dog-parent-select .modal-wrapper {
        height: 730px;
    }
    .dog-parent-select .modal-wrapper {
        width: 100%;
    }
    .modal.dog-parent-select {
        left: 0;
    }
}
@media screen and (max-width:768px) {
    .modal-wrapper {
        width: 100%;
        padding: 2rem 1rem;
    }
    main.grid {
        display: flex;
        flex-direction: column;
    }
    .card-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
    .select-filter-wrap {
        max-width: 100px;
    }
    .opt-container {
        flex-direction: column;
    }
    .genn {
        margin-inline-end: 3px;
        max-width: 17px;
    }
    .lazy-dog {
        max-width: 17px;
        margin: 0 3px 0 6px;
    }
    .gen-text {font-size: 12px;}
    .dog-parent-select .modal-wrapper {
        width: 100%;
        padding: 0;
        height: 720px;
    }
    .dog-parent-select .modal-wrapper .dog-img-wrap {
        height: 200px;
    }
    .modal-parent-head {
        padding: 5px 1rem;
    }
} */

/* --- ANIMAL CARD ---- */

.animal-card {
    font-size: 11px;
    display: flex;
    flex-direction: column;
}

.animal-card__title {
    color: var(--color_black);
    text-align: center;
    margin-block-end: 5px;
    font-weight: 600;
}

.animal-card__img-wr {
    position: relative;
    padding-block-start: 130%;
    border-radius: 16px;
    cursor: pointer;
    margin-block-start: auto;
}

.animal-card__img, .animal-card__runway, .animal-card__badges {
    position: absolute;
}

.animal-card__img {
    object-fit: contain;
    left: 0;
    /* top: 50%;
    transform: translateY(-50%); */
    width: 100%;
    bottom: 16px;
    z-index: 1;
}

.animal-card__badges {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 3px;
    top: 6px;
    left: 6px;
}

.animal-card__runway {
    width: 80%;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

    .animal-card__runway svg {
        width: 100%;
        height: 100%;
    }

.animal-card__info {
    padding: 0;
    margin: 10px 0 0;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding-inline: 3px;
}

.badge {
    padding: 3px;
    border-radius: 4px;
    background-color: var(--color_white);
    top: 4px;
    color: var(--color_black);
    font-size: 8px;
}

    .badge img {
        width: 10px;
        height: 10px;
    }

@media screen and (min-width: 768px) {
    .animal-card {
        font-size: 16px;
    }

    .animal-card__info {
        gap: 12px;
    }

    .animal-card__badges {
        top: 10px;
        left: 6px;
        width: calc(100% - 12px);
        justify-content: space-between;
    }

    .badge {
        padding: 6px;
        font-size: 16px;
        font-weight: 400;
        border-radius: 8px;
    }

        .badge img {
            width: 16px;
            height: 19px;
            object-fit: contain;
        }
}

@media screen and (min-width: 992px) {
    .badge {
        padding: 6px;
        font-size: 16px;
        font-weight: 400;
        border-radius: 8px;
    }

    .animal-card__badges {
        top: 12px;
        width: calc(100% - 24px);
        left: 12px;
    }
}

/* -------- DASHBOARD PAGE ---------- */
.dash-content {
    /* padding-top: 7rem; */
    padding-block-start: 14px;
}

@media screen and (min-width: 768px) {
    .dash-content {
        padding-block-start: 32px;
    }
}

.dash-content .hide-soba-dtf {
    display: none;
}

.dash-content .dogs-list-title {
    font-size: 18px;
}

.dashboard-page__dogs-list .earned,
.dashboard-page__dogs-list .price.topstatus {
    display: none;
}

.dash-content .price.dtf,
.dash-content .price.sell,
.dash-content .health-points {
    display: none;
}

.dash-content .dim {
    margin-block-end: 0;
}
/* --- */
.dashboard-slider__navs {
    text-align: center;
    margin-block-start: 2px;
    font-size: 0;
}

.dashboard-slider__nav-link {
    background-color: transparent;
    border: 0;
    width: 30px;
    display: inline-block;
    height: 30px;
    background-image: url(../img/controls.png);
    cursor: pointer;
    opacity: .5;
    transition: opacity .35s linear 0s;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: .8rem;
    z-index: 2;
}

.dashboard-slider__nav-link--right {
    background-position: -34px 0;
    left: auto;
    right: 0.8rem;
}

.dashboard__slider-wr {
    align-items: center;
}

.dashboard__slide-inner {
    justify-content: center;
}

.lSSlideWrapper {
    padding-top: 1rem;
}

.slider-cd-news.bigTitleOverlay {
    text-align: center;
    margin-block-end: 0;
    font-weight: 600;
    line-height: 1.5;
    font-size: 28px;
    -webkit-text-stroke: 1px rgba(250, 250, 250, 0.5);
}
/* --- */
.main-pagination__pages {
    display: none;
}

.user-info-ava {
    /* width: 96px;
    height: 96px; */
    display: flex;
}

    .user-info-ava .main-avatar {
        /* width: 96px;
    height: 96px; */
        width: 70px;
        height: 70px;
        border-radius: 50%;
    }

    .user-info-ava .main-avatar__icon {
        /* width: 93px;
    height: 93px; */
        width: 67px;
        height: 67px;
    }

.name-and-rank {
    /* max-width: 250px; */
    /* margin-left: 2rem; */
    margin-inline-start: 14px;
}

.uname {
    /* font-size: 35px; */
    /* line-height: 43px; */
    /* color: #0D090E; */
    /* font-weight: 600; */
    font-weight: 900;
    font-size: 16px;
    line-height: 120%;
    color: var(--color_black);
}

.urank {
    /* width: 200px; */
    /* font-size: 18px; */
    font-size: 14px;
    line-height: 150%;
    color: #797979;
    display: block;
    margin-block-start: 5px;
}

@media screen and (min-width: 768px) {
    .user-info-ava .main-avatar__icon {
        width: 93px;
        height: 93px;
    }

    .user-info-ava .main-avatar {
        width: 96px;
        height: 96px;
    }

    .uname {
        font-size: 32px;
        font-weight: 700;
    }

    .urank {
        font-size: 16px;
    }

    .dashboard__slider {
        margin-block: 32px;
    }
}

.medals {
    margin-block-start: 1.3rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

    .medals img {
        width: 23px;
        margin-inline-end: 9px;
    }

        .medals img:nth-child(2) {
            margin-left: 35px;
        }

        .medals img:nth-child(3) {
            margin-left: 35px;
        }

.exp-block {
    margin-left: 25px;
}

.dashboard-user-info__experience-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse;
    /* margin-left: 35px; */
    font-size: 14px;
    line-height: 120%;
    font-weight: 600;
    color: #535A6A;
    margin-block-start: 21px;
}

@media screen and (min-width: 768px) {
    .dashboard-user-info__experience-wrapper {
        font-size: 18px;
    }
}

.explabel {
    display: flex;
    align-items: center;
}

.dashboard-user-info__progress-bar {
    background: rgba(196, 196, 196, 0.25);
    border-radius: 6px;
    margin-block-start: 11px;
}

.dashboard-user-info__progress-level, .dashboard-user-info__progress-level2 {
    height: 9px;
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%), #C4C4C4;
    border-radius: 6px;
}

.dashboard-slider__avatar {
    min-height: 94px;
}

.dashboard-page__main-slider {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    border-radius: 16px;
    overflow: hidden;
    color: #ffffff;
    position: relative;
}

.dashboard-slider__item {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .dashboard-slider__item.active {
        margin-left: 1.4rem;
    }

h4.dashboard-slider__title {
    margin-block-end: 10px;
    font-size: 22px;
    padding-top: 1rem;
}

.dashboard-slider__left-part {
    width: 22%;
}

.dashboard-slider__avatar img {
    width: 100% !important;
}

.dashboard-slider__description {
    width: 60%;
    /* height: 154px; */
}

.lightSlider {
    /* height: 12rem !important; */
    overflow: visible !important;
}

.d-wrapper {
    padding-block-end: 4rem;
}

.divider {
    width: 100%;
    height: 2px;
    opacity: 0.25;
    border: 1px solid #919191;
    margin-block-end: -2rem;
}

/* Dogs */
.dashboard-page__section .card-head-icon {
    display: none;
}

.dashboard-page__section .card-container-wrapper {
    display: flex;
    flex-direction: column;
    width: 232px;
    height: 396px;
    text-align: center;
    margin: 10px auto;
}

.all-gens2 {
    display: none;
}

.type-filter {
    list-style: none;
}

    .type-filter a {
        font-weight: 500;
        font-size: 23px;
        line-height: 28px;
        color: #9C9EA0;
        text-decoration: none;
    }

        .type-filter a.active {
            font-weight: 500;
            font-size: 23px;
            line-height: 17px;
            color: #535A6A;
            text-decoration: none;
            border-bottom: 2px solid;
            padding-block-end: 8px;
            border-image: linear-gradient(rgba(78, 159, 226, 1), rgba(152, 78, 226, 1));
            border-image-slice: 1;
        }

@media screen and (min-width:1440px) {
    .dashboard-page__main-slider {
        max-width: 778px;
        /* height: 274px; */
    }
}

@media screen and (max-width: 1440px) {
    /* .dashboard-page__main-slider {
        width: 678px;
        height: 283px;
    } */

    .medals img:nth-child(2), .medals img:nth-child(3) {
        margin-left: 20px;
    }
}

@media screen and (max-width: 768px) {
    .dashboard-page__left-part .user-info, .user-info .medals {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dashboard-user-info__experience-wrapper {
        margin: 18px 0 0 0;
    }

    .market, .auction, .activity, .race {
        /* width: 84px;
        margin-inline-end: 3px; */
        padding: 10px;
        font-size: 14px;
        /* margin-inline-end: 1px; */
    }
    /* 
    .race {
        width: 68px;
        padding: 12px;
        margin-inline-end: 1px;
    } */

    .dashboard-page__main-slider {
        max-width: 328px;
        width: 100%;
        margin: 2rem auto;
        /* height: 350px; */
        height: auto;
    }

    .dashboard-page__section .card-container-wrapper {
        width: 168px;
    }

    .type-filter a {
        font-size: 14px;
    }
    /* slider mobile */
    .dashboard-slider__item.row {
        display: flex;
        flex-direction: column;
        padding-inline: 16px;
    }

    .dashboard-slider__left-part {
        width: 50%;
        margin-inline: auto;
    }

    .dashboard__slide {
        padding: 0 1rem;
        text-align: center;
    }

    .db-slider-l, .db-slider-r {
        display: none;
    }

    .dashboard-slider__description {
        font-size: 13px;
        /* margin-left: -1rem; */
        width: 100%;
    }

    h4.dashboard-slider__title {
        font-size: 18px;
    }

    /* .lightSlider {
        height: 17rem !important;
    } */

    .dashboard-slider__avatar img {
        max-width: 66%;
    }
}

.select-filter-wrap {
    max-width: inherit;
    width: 50%;
}

.filtering {
    flex-direction: column;
}

.select-filter-wrap {
    margin-left: 0;
}

.all-gens {
    display: none;
}

.all-gens2 {
    display: block;
}

    .all-gens2 .rounded-control {
        /* width: 174px; */
        width: 100%;
        padding: 4px 8px;
        height: auto;
    }

input.search-dog.rounded-control {
    /* width: 199px; */
    width: 50%;
    padding: 4px 8px;
    height: auto;
}

.sorting {
    width: 50%;
}

.youngest {
    /* width: 147px; */
    /* margin-left: 8px; */
    width: 100%;
    padding: 4px 8px;
    height: auto;
}

#BodyContent_ctl00_selectbreed {
    /* width: 123px; */
    /* width: 50%; */
    /* margin-left: 8px; */
    width: 100%;
    padding: 4px 8px;
    height: auto;
}

@media screen and (min-width: 768px) {
    .filtering {
        flex-direction: row;
    }
}

/* --------- REGISTER PAGE --------- */
.reg-page {
    height: 93vh;
}

.reg-header {
    padding-top: 5rem;
    font-size: 30px;
    text-align: center;
    padding-block-end: 1rem;
}

/* --------- USER PROFILE PAGE -------- */
/* .profile-row {
    padding: 3rem 0;
} */

.profile-achiv .main-title {
    display: none;
}

.profile-achiv .main-text {
    display: flex;
}

.profile-row .dashboard-user-info__experience-wrapper {
    margin: 25px 0 0 0;
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 768px) {
    .dashboard-user-info {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .user-info-ava {
        justify-content: center;
    }
}

/* --------- GAME ONE PAGE -------- */
.game-one {
    text-align: center;
    background: url('../img/game-one-bg.png');
}

.game-one-title {
    margin: 64px 0 47px 0;
}

    .game-one-title .bigTitle {
        font-size: 45px;
        display: block;
    }

    .game-one-title .bigTitleOverlay {
        font-size: 70px;
        margin-block-end: -5rem;
    }

.game-one-text {
    margin: 3rem 0;
}

.game-one-footer {
    font-weight: 600;
}

@media screen and (max-width: 768px) {
    /* .umob {
        orientation: landscape;
    } */
    .game-one-title {
        margin: 35px 0 47px 0;
    }

        .game-one-title .bigTitle {
            font-size: 32px;
        }

        .game-one-title .bigTitleOverlay {
            font-size: 45px;
            margin-block-end: -3rem;
        }
    /* .unity-container {
        position: absolute;
        left: 0;
        top: 43px;
        width: 100vw;
        height: 100vh;
    } */
}



/* ------- MARKETPLACE ---------- */
.market-top {
    display: flex;
    padding: 14px 0 2px;
    align-items: baseline;
    border-bottom: 2px solid;
    border-color: rgba(145, 145, 145, 0.25);
    margin-block-end: 32px;
}

    .market-top a {
        margin-inline-end: 24px;
    }

.card-head-icon {
    display: none;
}

.marketplace-page .card {
    border: 0;
}

.marketplace-page .card-img-top {
    height: 293px;
    border-radius: 10px;
}

.marketplace-page .dog-img-wrap {
    position: absolute;
    top: 1rem;
}

.marketplace-page .card-container-wrapper {
    width: 232px;
    height: 390px;
    margin: 0 auto;
    position: relative;
}

.sobamarket .market-label {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    position: absolute;
    width: 170px;
    height: 40px;
    left: calc(50% - 170px/2);
    top: calc(50% - 40px/2 - 157.5px);
    background: #FFFFFF;
    border-radius: 4px;
    filter: drop-shadow(0px 16px 32px rgba(0, 0, 0, 0.15));
}

.sobamarket .dim .mrkt-d-img {
    max-width: 270px;
    margin-block-start: -2rem;
}

.sobamarket .market-label::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    left: calc(50% - 17px/2 + 2.5px);
    top: calc(50% - 17px/2 - -20.02px);
    background: #FFFFFF;
    transform: rotate(135deg);
}

.sobamarket .price.dtf, .sobamarket .price.sell {
    display: flex;
    align-items: center;
    font-size: 18px;
    color: #383838;
}

    .sobamarket .price.dtf img {
        margin-inline-end: 10px;
    }

    .sobamarket .price.sell img {
        margin-inline-end: 10px;
        margin-left: 16px;
    }

.marketplace-page .pagination-wrapper {
    padding-block-end: 5rem;
}

.marketplace-page .card-body {
    width: 232px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 50;
    /* text-align: center;
    position: absolute;
    bottom: 15px;
    left: 0px;
    width: 232px;
    padding-top: 0; */
}

.dim {
    margin-block-end: -23px;
}


@media screen and (max-width:768px) {
    .marketplace-page .card-container-wrapper {
        width: 168px;
    }

    .sobamarket .market-label {
        width: 146px;
        left: calc(50% - 146px/2);
    }

    .marketplace-page .card-body {
        width: 168px;
        background: transparent;
    }

    .market-top {
        justify-content: space-around;
    }

        .market-top a {
            margin-inline-end: 0;
            font-size: 12px;
        }

            .market-top a.active {
                font-size: 14px;
            }
}

@media screen and (min-width: 768px) {
    .market-top {
        padding: 32px 0 7px;
    }
}

.marketplace-page .bottom-bar.health-block-only {
    display: none;
}

/* -------- AUCTION PAGE --------- */
.puppy-box {
    display: flex;
}

.auc-title {
    margin-block-start: 64px;
    text-align: center;
}

    .auc-title .bigTitle {
        display: block;
    }

.page-puppy-shopping__mute-btn {
    width: 31px;
    height: 32px;
    border: 0;
    border-radius: 50%;
}

.auc-title .bigTitleOverlay {
    margin-block-end: -5rem;
}

/* .page-puppy-shopping__main-row {
    padding: 5rem 0;
} */

.puppy-box__clouds {
    display: none;
}

.puppy-box__content {
    display: flex;
    flex-direction: column;
    /* align-items: flex-end; */
    align-items: center;
    /* padding-inline-end: 2rem; */
}

.puppy-box__dog-row.animate-float {
    width: 300px;
    height: 300px;
    background: #D3EAFD;
    border: 3px solid #E5E5E5;
    box-sizing: border-box;
    border-radius: 16px;
}

.puppy-box__name {
    font-weight: bold;
    font-size: 28px;
    line-height: 34px;
    display: flex;
    align-items: center;
    color: #151515;
}

.puppy-box__header-left {
    list-style: none;
    margin: 0;
    padding: 2rem 0;
    font-size: 18px;
    line-height: 2;
    font-weight: 400;
    color: #6D6D6D;
}

.letter-p {
    font-weight: bold;
    font-size: 18px;
    line-height: 120%;
    color: #6D6D6D;
    display: flex;
    align-items: center;
}

    .letter-p .puppy-box__purity-v {
        margin-left: 5px;
    }

.puppy-box__analysis-table .puppy-box__analysis-level {
    width: 280px;
}

    .puppy-box__analysis-table .puppy-box__analysis-level .main-level {
        display: -webkit-inline-box;
    }

        .puppy-box__analysis-table .puppy-box__analysis-level .main-level .main-level__text {
            margin-left: 8px;
        }

.dna-analyze {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    line-height: 2;
    color: #6D6D6D;
}

    .dna-analyze img {
        margin-inline-end: 8px;
    }

.letter-p img {
    margin-inline-end: 8px;
}

.main-level {
    display: flex;
}

.main-level__line {
    height: 16px;
    background: linear-gradient( 92.46deg, rgb(78, 159, 226) 9.84%, rgb(152, 78, 226) 84.58%);
    border-radius: 32px;
    margin-left: 8px;
}

.bid-and-count {
    display: flex;
    justify-content: space-between;
    width: 340px;
    text-align: center;
    /* padding-inline-end: 0.9rem; */
    margin-block-start: 16px;
}

.time-left-text, .my-bid-text {
    font-size: 18px;
    line-height: 22px;
    color: #151515;
    font-weight: 600;
}

.puppy-box__time {
    display: flex;
    font-weight: bold;
    font-size: 28px;
    line-height: 34px;
    justify-content: center;
    color: #FFAD01;
    margin-block-start: 16px;
}

.puppy-box__footer-coin-text {
    display: flex;
    font-weight: bold;
    font-size: 28px;
    line-height: 34px;
    justify-content: center;
    color: #151515;
    margin-block-start: 16px;
}

.footer-status__place-bid, .footer-status__highest-bid.footer-status--hidden,
.footer-status__you-highest.footer-status--hidden, .puppy-box__footer-status {
    display: none;
}

.page-puppy-shopping__explanation-text {
    margin-block-start: 34px;
    display: flex;
}

    .page-puppy-shopping__explanation-text img {
        margin: 2rem;
    }

.warn-left {
    display: block;
    position: relative;
    top: -25px;
}

.warn-right {
    color: #acacac;
}

.page-puppy-shopping__main-row .btn--c-pink {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    width: 300px;
    height: 48px;
    background: #FFAD01;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
    margin: 16px 0 32px 0;
}

.btn--c-pink img {
    margin-inline-end: 18px;
}

@media screen and (max-width: 768px) {
    .auc-title .bigTitle {
        font-size: 32px;
        display: block;
    }

    .auc-title .bigTitleOverlay {
        font-size: 45px;
        margin-block-end: -3rem;
    }

    .puppy-box__content {
        align-items: center;
    }

    .bid-and-count {
        /* padding-inline-end: 2.3rem; */
    }

    .puppy-box__name {
        justify-content: center;
    }
}

/* ------- DOG PAGE -------- */
.avhieves-block {
    margin-block-start: 2rem;
}

.top-dog-status {
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 4%;
    padding-inline: 12px;
    font-size: 12px;
    width: 100%;
}

@media screen and (max-width: 375px) {
    .top-dog-status {
        font-size: 8px;
    }
}

.healt-bar-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.dog-page-container .main-info__left-name {
    font-weight: bold;
    font-size: 36px;
    line-height: 43px;
    color: #000000;
    text-transform: uppercase;
    margin-block-end: 12px;
}

.dog-page-container .main-info__right {
    display: flex;
    font-size: 18px;
    line-height: 22px;
    color: #636363;
    margin-block-end: 32px;
}

    .dog-page-container .main-info__right a {
        font-size: 18px;
        line-height: 22px;
        color: #FFAD01;
        text-decoration: none;
        margin-left: 8px;
    }

.dog-bottom-container .main-avatar {
    display: none;
}

/* .dog-page-container {
    padding: 5rem 0 0 0;
} */
.top-dogpage-row {
    padding: 2rem 0;
}

.buttons-section__right.buttons-section__right_a #PlayActivity {
    /* width: 100%; */
    color: #ffffff;
    display: flex;
    justify-content: center;
    gap: 16px;
    align-items: center;
    box-shadow: 0px 0px 16px rgb(0 0 0 / 5%);
    border-radius: 8px;
    background: linear-gradient( 55.34deg, #a21240 3.28%, #fb0051c4 92.44%);
}

.buttons-section__right.buttons-section__right_a #goNFT {
    display: none;
}

.sparkle {
    position: relative;
    display: flex;
    justify-content: center;
    background: linear-gradient( 55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
    border-radius: 32px;
    margin-block-end: 32px;
}

.big-red-social {
    display: flex;
    margin-block-end: 1rem;
    margin-left: -24px;
}

.soc-dog-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
}

.dp-social-text {
    font-size: 18px;
    line-height: 22px;
    color: rgba(99, 99, 99, 0.55);
    margin-block-end: 1rem;
}

.dp-dogspeed {
    display: flex;
}

.smallmedal {
    display: flex;
    border-right: 0 !important;
}

    .smallmedal img {
        width: 23px;
        margin: 0 4px;
    }

#BodyContent_RACING_STATS {
    margin-block-start: 1rem;
}

.dog-sellrent-button {
    display: flex;
    flex-direction: row;
    /* justify-content: space-evenly; */
    justify-content: center;
    gap: 12px;
    align-items: center;
    padding: 12px;
    width: 111px;
    height: 48px;
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.dog-pimp-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    align-items: center;
    padding: 12px;
    width: 144px;
    height: 48px;
    background: linear-gradient(55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.dog-breed-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    align-items: center;
    padding: 12px;
    /* max-width: 121px; */
    height: 48px;
    background: linear-gradient(55.34deg, #89C865 3.28%, #B4F091 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.dog-race-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    align-items: center;
    padding: 12px;
    width: 150px;
    height: 48px;
    background: linear-gradient(55.34deg, #FF8979 3.28%, #FFBBB1 92.44%), linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.dog-gift-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    align-items: center;
    padding: 12px;
    width: 99px;
    height: 48px;
    background: linear-gradient(55.34deg, #6058D5 3.28%, #b49dda 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.buttons-section__right.buttons-section__right_a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.buttons-section__btn {
    width: 100%;
}

@media (max-width:768px) {
    .buttons-section__right.buttons-section__right_a {
        grid-template-columns: repeat(2, 1fr);
    }
}

.buttons-section__right.buttons-section__right_a a {
    margin: 0 auto;
    /* width: 144px; */
    height: 48px;
}

.dpage-top-left .buttons-section__right a {
    margin-inline-end: 20px;
    white-space: nowrap;
}

    .dpage-top-left .buttons-section__right a:hover {
        color: #dfdfdf;
        transition: .9s;
    }

.dpage-top-left .buttons-section__right {
    display: flex;
}

.dog-achiv-list .main-text {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

.dog-achiv-list .achiv {
    max-width: 128px;
}

.dpage-name {
    font-weight: bold;
    font-size: 36px;
    line-height: 43px;
    color: #000000;
    text-transform: uppercase;
}

.dog-page-container .main-avatar__inner,
.dog-page-container .main-info__user-position {
    display: none;
}

.main-info__param-list {
    display: flex;
    /* flex-direction: row; */
    align-items: center;
    justify-content: space-evenly;
    padding: 16px 32px;
    width: 385px;
    height: 84px;
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    border-radius: 16px;
    color: #ffffff;
}

.dp-bio-block {
    margin: 2rem 0;
}

.main-info__param-list .main-info__param-item {
    display: flex;
    flex-direction: column;
}

.dp-puriage {
    list-style: none;
    display: flex;
}

.lishniy-blok {
    display: none;
}

.main-info__extra-info {
    display: flex;
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

ul.main-info__extra-info li:nth-child(1),
ul.main-info__extra-info li:nth-child(2) {
    border-right: 1px solid;
    margin-inline-end: 8px;
    /* padding-inline-end: 8px; */
}

.btn--like {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 8px 16px;
    position: static;
    width: 107px;
    height: 80px;
    left: 0px;
    top: 0px;
    background: #FF6A6A;
    border-radius: 16px;
    flex: none;
    order: 0;
    flex-grow: 0;
    margin: 0px 24px;
    color: #ffffff;
}

/* .buttons-section__right {
    padding: 0 1rem;
} */

.dp-price-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #636363;
    text-align: center;
    margin-block-end: 8px;
}

.puppy-box__footer-coin-info button {
    margin: 0 12px;
}

.buy-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    width: 101px;
    height: 48px;
    background: linear-gradient(109.76deg, #4E9FE2 9.28%, #984EE2 109.79%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.breed-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 16px;
    width: 121px;
    height: 48px;
    background: linear-gradient(55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    color: #ffffff;
}

.dp-bio-block {
    margin-block-end: 24px;
}

.ACGT {
    display: flex;
    height: 144px;
    margin-block-start: 1rem;
}

.analysis-section__table {
    width: 100%;
}

.analysis-section__col {
    width: 50%;
}

.analysis-section__level-wrapper {
    width: 160px;
    display: flex;
    align-items: center;
}

.analysis-section__level-line {
    background: linear-gradient( 92.46deg, #4E9FE2 9.84%, #984EE2 84.58%);
    border-radius: 32px;
    height: 16px;
    margin: 0 8px;
}

.analysis-section__top-text {
    margin-block-end: 1rem;
}

.dp-darents a {
    text-decoration: none;
}

.dp-darents .cards-section {
    display: flex;
    text-align: center;
    justify-content: space-evenly;
}

.dp-darents .ps-card {
    width: 232px;
}

.dp-darents .card-info {
    font-size: 20px;
    line-height: 34px;
    text-align: center;
    color: #303030;
    font-weight: 600;
    padding: 10px 0;
}

.dog-page-container .main-section.dp-darents {
    margin-block-end: 2rem;
}

@media screen and (max-width:768px) {
    .dog-page-container {
        width: 94vw;
    }

        .dog-page-container .main-info__left-name {
            text-align: center;
            margin-block-start: 2rem;
        }

    .buttons-section__right.buttons-section__right_a a {
        margin-inline-end: 1px;
    }

    .dog-page-container .main-info__right {
        justify-content: center;
    }

    .dog-page-container .buttons-section__left {
        text-align: center;
    }

    .dog-page-container .main-title {
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        color: #000000;
        margin: 1rem 0;
        font-weight: 600;
    }

    /* .top-dog-status {
        font-size: 12px;
        justify-content: center;
    } */

    .top-dog-status .time-big {
        margin-left: 5px;
    }

    .main-info__param-list {
        padding: 16px 2px;
        width: 100%;
    }

    .dp-energy {
        text-align: center;
    }

    .big-red-social, .main-info__extra-info {
        justify-content: center;
    }

    .dp-bio-block {
        text-align: center;
    }

    .analysis-section__col {
        width: 100%;
    }

    .puppy-box__footer-coin-info {
        justify-content: center;
    }

    .avhieves-block h2 {
        text-align: center;
    }

    .dp-darents .ps-card {
        width: 168px;
        height: 172px;
    }

    .dp-darents .card-info {
        font-size: 15px;
    }
}

/* ------- RACE TRACK PAGE ------- */
.page-race-track {
    padding-block-start: 20px;
}

    .page-race-track .icon.icon--play {
        padding: 5px 15px;
        background: red;
        color: #ffffff;
        border-radius: 8px;
        font-size: 14px;
    }

    .page-race-track .js-replay-race {
        background: red;
        color: var(--color_white);
        font-size: 24px;
    }

    .page-race-track .material-symbols-outlined {
        font-family: 'Material icons';
    }

.page-race-track__play-btn {
    width: 100%;
    line-height: 1;
}

.winners-row__title {
    font-size: 18px;
    margin-block: 10px;
}

.page-race-track__winners-box, .page-race-track__winners-img {
    position: relative;
}

.yourcolor {
    position: absolute;
    top: 10px;
    left: 20px;
    border-radius: 10px;
    padding: 1px 7px;
    color: #ffffff;
    font-size: 10px;
}

.raceid {
    position: absolute;
    top: 10px;
    right: 17px;
    background: #595959;
    color: #ffffff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
}

.page-race-track__winners-box .center-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.top-rt-row {
    /* padding-top: 5rem; */
    justify-content: center;
}

.races-table {
    display: flex;
    justify-content: center;
}

.races-table__table {
    width: 100%;
    font-size: 10px;
}

    .races-table__table th, .races-table__table td {
        white-space: normal;
        padding-inline: 1px;
        text-align: center;
    }

.winners-row__coins-list {
    display: flex;
    /* margin-block-start: 22px; */
}

.winners-row__coins-item {
    display: flex;
    align-items: center;
    margin-inline-end: 8px;
    gap: 8px;
    font-size: 12px;
    line-height: 120%;
}

.medal-winner {
    width: 20px;
    height: 20px;
    /* margin-inline-end: 8px; */
}

.next-and-queue {
    /* display: flex; */
    margin-block-start: 14px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    max-width: 320px;
    margin-inline: auto;
}

.nex-race-block {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    /* margin-inline-end: 32px; */
}

.next-race-title {
    font-size: 16px;
    font-weight: 600;
    line-height: 120%;
    text-align: center;
    color: #636363;
    margin-block-start: 5px;
}

.nex-race-block img {
    width: 19px;
    height: 20px;
    margin: 5px auto;
}

.queue-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    background: var(--color_orange-accent);
    border-radius: 8px;
    color: #ffffff;
}

.queue-block, .nex-race-block {
    width: max-content;
    min-width: 80%;
    margin-inline: auto;
    font-size: 12px;
}

    .queue-block a {
        color: #ffffff;
        text-decoration: none;
    }

    .queue-block img {
        width: 20px;
        height: 20px;
        margin: 5px auto;
    }

    .queue-block #QueuedDogs {
        text-decoration: underline;
        margin: 3px auto;
    }

.queue-block-title {
    font-weight: bold;
    font-size: 16px;
    line-height: 1.2;
    text-align: center;
}

.races-table__table a {
    font-size: 18px;
    text-decoration: none;
    color: #141414;
}

.races-table__table tbody tr:nth-child(1) {
    background: rgba(255, 173, 1, 0.25);
    border-radius: 0px 0px 12px 12px;
}

.races-table__table thead {
    border-bottom: 1px solid #4E9FE2;
}

.races-table__table .icon--winner-1, .races-table__table .icon--winner-2, .races-table__table .icon--winner-3 {
    width: 23px;
    height: 23px;
    /* background-image: url(/Content/images/icon-winner-1.svg); */
    display: inline-flex;
    vertical-align: text-bottom;
}

tbody, td, tfoot, th, thead, tr {
    white-space: nowrap;
}

.winners-row__col .blueGradBtn {
    /* max-width: 205px;
    width: auto;
    margin-inline-end: 10px; */
    width: 100%;
    margin-block: 0;
}

.winners-row__col.winners-row__col--right {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-block-end: 14px;
    gap: 12px;
    font-size: 14px;
    line-height: 1.2;
    margin-block-start: 24px;
}

.entry-race-title {
    font-weight: bold;
    font-size: 14px;
    line-height: 120%;
    display: flex;
    align-items: center;
    color: #4E9FE2;
}

.page-race-track__races-table {
    margin-block-start: 2rem;
}

#confetti {
    position: absolute;
    display: inline;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.spinnerbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* @media screen and (max-width:1399px) {
    .page-race-track__races-table.races-table {
        overflow-x: scroll;
    }
} */

@media screen and (min-width: 768px) {
    .yourcolor, .raceid {
        font-size: 16px;
    }

    .winners-row__title {
        font-size: 24px;
    }

    .winners-row__coins-item {
        font-size: 16px;
    }

    .medal-winner {
        width: 30px;
        height: 30px;
    }

    .next-and-queue {
        display: flex;
        flex-direction: row;
        gap: 16px;
        max-width: auto;
        margin-inline: 0;
    }

    .winners-row__col.winners-row__col--right {
        flex-wrap: nowrap;
        justify-content: flex-start;
        font-size: 16px;
    }

    .queue-block, .nex-race-block {
        width: 200px;
        margin: 0;
        min-width: auto;
        font-size: 16px;
    }

    .queue-block-title, .next-race-title {
        font-size: 20px;
    }

    .winners-row__col .blueGradBtn {
        max-width: 250px;
    }

    .races-table__table {
        font-size: 16px;
    }

        .races-table__table th, .races-table__table td {
            padding-inline: 10px;
        }
}

@media screen and (max-width: 768px) {
    .winners-row__title {
        text-align: center;
    }

    .winners-row__coins-list {
        justify-content: center;
    }

    .next-and-queue {
        justify-content: center;
    }

    .entry-race-row {
        justify-content: center;
    }
    /* 
    .entry-race-title {
        font-size: 18px;
    } */

    .winners-row__col.winners-row__col--right {
        text-align: center;
    }
}

/* ------- STATS PAGE ---------- */
.chartjs-wrapper {
    padding: 5rem 1rem;
}

.stats-page-title {
    padding: 2rem 0;
    text-align: center;
}

    .stats-page-title .bigTitle {
        display: block;
    }

    .stats-page-title .bigTitleOverlay {
        margin-block-end: -5rem;
    }

/* ------- SETTINGS PAGE -------- */
/* .settings-page-title {
    padding: 2rem 0;
    text-align: center;
}
.settings-page-title .bigTitle {
    display: block;
    font-size: 45px;
}
.settings-page-title .bigTitleOverlay {
    margin-block-end: -5rem;
    font-size: 70px;
} */
.main-content--page_settings {
    font-size: 11px;
}

    .main-content--page_settings .content-block {
        padding-block: 14px 32px;
    }

    .main-content--page_settings section {
        text-align: center;
        margin-block-end: 35px;
    }

    /* .settings-page-content h2.title {
    font-weight: bold;
    font-size: 28px;
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    color: #252525;
    margin-block-end: 2.5rem;
} */
    /* .settings-page-content .blueGradBtn {
    max-width: 258px;
    padding: 0;
    height: 40px;
    margin: 0 auto;
} */
    .main-content--page_settings .main-avatar {
        border-radius: 50%;
        width: 68px;
        height: 68px;
        margin: 0 auto;
        border: 2px solid #6C757D;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .main-content--page_settings .avatar-picker-button {
        margin-block: 6px 16px;
        display: block;
    }

/* .settings-page-content .main-avatar__icon {
    width: 64px;
    height: 64px;
} */
/* .settings-page-content .form-line {
    max-width: 448px;
    margin: 0 auto;
} */

/* invite section */
.settings-page__invite-wr .content-block__inner {
    margin-block: 12px;
    font-weight: 500;
}

.settings-page__disclaimer {
    font-size: 10px;
    line-height: 150%;
    color: #6C757D;
    margin-block-end: 10px;
}

    .settings-page__disclaimer a {
        text-decoration: underline;
        color: #0D6EFD;
    }
/* references section */
.settings-page__references-list {
    margin: 11px 0 0;
    padding: 0;
}

.settings-page__references-item {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 18px;
}

    .settings-page__references-item span:first-child {
        text-align: right;
    }

    .settings-page__references-item span:last-child {
        text-align: left;
    }

/* balance section */
.settings-page__balance {
    margin-block-start: 12px;
    max-width: 185px;
    margin-inline: auto;
}

    .settings-page__balance #balanceAmount {
        font-weight: 500;
    }

.settings-page input[type="text"], .settings-page input[type="password"] {
    border-radius: 5px;
    border: .6px solid #AAACAE;
    padding: 7px;
    font-size: 11px;
    font-weight: 500;
}

    .settings-page input[type="text"]::placeholder, .settings-page input[type="text"]::-moz-placeholder, .settings-page input[type="password"]::placeholder, .settings-page input[type="password"]::-moz-placeholder {
        color: #AAACAE;
    }

.settings-page__top-acc input[type="submit"] {
    width: 100%;
    margin-block-start: 16px;
}

/* passwd section */
.settings-page__passwd .form-line {
    display: flex;
    flex-direction: column;
    text-align: left;
    margin: 0;
}

    .settings-page__passwd .form-line:first-of-type {
        margin-block: 11px 7px;
    }

.settings-page__passwd label {
    padding-inline: 7px;
    line-height: 144%;
}

.settings-page__form-submit input {
    width: 100%;
}

.settings-page__switchers {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 60px;
    justify-content: center;
}

/* SWICTHER */
.switcher__title {
    margin-block-end: 5px;
}

.switcher input {
    /* opacity: 0;
    width: 0;
    height: 0; */
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    appearance: none;
    z-index: 2;
    cursor: pointer;
}

    .switcher input:checked + .switcher__icons-wr {
        background: var(--linear_blue-purple);
    }

    .switcher input:not(:checked) + .switcher__icons-wr .switcher__active-icon {
        opacity: 0;
        visibility: hidden;
    }

    .switcher input:checked + .switcher__icons-wr .switcher__dis-icon {
        opacity: 0;
        visibility: hidden;
    }

    .switcher input:checked + .switcher__icons-wr + .switcher__btn {
        transform: translateY(-50%) translateX(50px);
    }

.switcher__wrapper {
    position: relative;
    display: inline-block;
}

.switcher__icons-wr {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 13px;
    background: linear-gradient(270deg, #AAACAE 0%, #AAACAE 100%);
    padding: 8px 16px;
    border-radius: 46px;
    transition: all .3s ease-in-out;
}

.switcher__icon {
    transition: all .3s ease-in-out;
}

    .switcher__icon svg {
        width: 22px;
        height: 22px;
    }

.switcher__btn {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background-color: var(--color_white);
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: all .3s ease-in-out;
    left: 5px;
}

.switcher--type_empty .switcher__icons-wr {
    padding: 10px 19px;
    width: max-content;
}

.switcher--type_empty .switcher__btn {
    width: 17px;
    height: 17px;
    left: 2px;
}

.switcher--type_empty .switcher__title {
    text-align: left;
    margin: 0;
}

.switcher.switcher--type_empty input:checked + .switcher__icons-wr + .switcher__btn {
    transform: translateY(-50%) translateX(17px);
}

@media screen and (min-width: 768px) {
    .main-content--page_settings {
        font-size: 16px;
    }

        .main-content--page_settings .content-block {
            padding-block: 20px 56px;
        }

        .main-content--page_settings section {
            margin-block-end: 64px;
            max-width: 640px;
            margin-inline: auto;
        }

        .main-content--page_settings .main-avatar {
            width: 96px;
            height: 96px;
            border-width: 4px;
        }

        .main-content--page_settings .main-avatar__icon svg {
            width: 64px;
            height: 64px;
        }

        .main-content--page_settings .avatar-picker-button {
            margin-block: 16px 32px;
        }

    .settings-page__invite-wr .content-block__inner {
        margin-block: 24px;
    }

    .settings-page__disclaimer {
        font-size: 14px;
    }

    .settings-page__references-list {
        margin-block-start: 24px;
    }

    .settings-page__balance {
        margin-block-start: 24px;
        max-width: 320px;
    }

    .settings-page input[type="text"], .settings-page input[type="password"] {
        padding: 10px;
        font-size: 15px;
        width: 100%;
    }

    .settings-page__top-acc input[type="submit"] {
        margin-block-start: 24px;
    }

    .settings-page__form-submit input {
        max-width: 640px;
        margin-inline: auto;
        display: block;
    }

    .settings-page__switchers {
        gap: 96px;
    }

    .switcher__title {
        margin-block-end: 16px;
    }

    .switcher input:checked + .switcher__icons-wr + .switcher__btn {
        transform: translateY(-50%) translateX(60px);
    }

    .switcher.switcher--type_empty input:checked + .switcher__icons-wr + .switcher__btn {
        transform: translateY(-50%) translateX(17px);
    }

    .switcher__icons-wr {
        gap: 16px;
    }

    .switcher__icon svg {
        width: 32px;
        height: 32px;
    }

    .switcher__btn {
        width: 38px;
        height: 38px;
    }
}

/* old settings styles */
.phone-chbox, .email-chbox {
    max-width: 390px;
    margin: 1.5rem auto;
}

.css-checkbox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}

    .css-checkbox input {
        margin-left: 10px;
        width: 20px;
        height: 20px;
        background: #FFFFFF;
        border: 2px solid #CBCBCB;
        box-sizing: border-box;
        border-radius: 4px;
    }

.settings-page-content input.phonenumber {
    width: 448px;
}

.setti-bottom {
    margin: 0 auto;
}

@media screen and (max-width:768px) {
    .settings-page-content .form-line {
        max-width: 328px;
        margin: 0 auto;
    }

    .settings-page-content input.phonenumber {
        width: 328px;
    }

    .settings-page-title .bigTitleOverlay {
        margin-block-end: -3rem;
    }
}

/* ------- TRANSACTION PAGE -------- */
.tranz-page {
    padding-block-end: 3rem;
}

    .tranz-page tr.Completed td:nth-child(4) {
        /* color: #FF1001; */
        color: #4E9FE2;
    }

    .tranz-page tr.Expired td:nth-child(4) {
        color: #FF1001;
    }

    .tranz-page table a {
        color: #000000;
    }

.tranz-title {
    padding: 2rem 0;
    text-align: center;
}

    .tranz-title .bigTitle {
        display: block;
        font-size: 45px;
    }

    .tranz-title .bigTitleOverlay {
        margin-block-end: -5rem;
        font-size: 70px;
    }

.buy-and-cancel {
    display: grid;
    grid-template-columns: .6fr .4fr;
    gap: 5px;
    margin-block-start: 20px;
}

.awaiting-payment__form {
    text-align: center;
}

/* ------- PAYMENT -------- */

/* .payment-page {
    padding: 5rem 0;
} */

/* .pay-title {
    padding: 2rem 0;
    text-align: center;
}
.pay-title .bigTitle {
    display: block;
    font-size: 45px;
}
.pay-title .bigTitleOverlay {
    margin-block-end: -5rem;
    font-size: 70px;
} */
/* .payment-page .dogs-list__card {
    width: 228px;
    height: 293px;
    border-radius: 8px;
    margin-inline-end: 5px;
} */

.payment-page .dogs-list__item {
    width: calc((100% - 2 * 20px) / 2);
    margin: 5px 10px;
}

.payment-page__content-block {
    padding-block-end: 64px;
}

.payment-page .dogs-list__name {
    font-size: 12px;
    color: var(--color_mid-gray);
    line-height: 125%;
    text-align: center;
    text-decoration: none;
    margin: 0 0 10px;
}

.payment-page .dogs-list__card {
    padding-block-start: 123%;
    border-radius: 19px;
    position: relative;
}

    .payment-page .dogs-list__card .dog-img-wrap {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        min-height: 177px;
        position: absolute;
        top: 0;
        left: 0;
    }

.payment-page .dogs-list__card--unknown .dog-img {
    height: 60%;
}

#BodyContent_box_dognew .dogs-list__name {
    color: var(--color_black);
}

.payment-page #BodyContent_doglist, .payment-page #BodyContent_race_registration {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 340px;
    margin-inline: auto;
}

#QUICKPAYBOX {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.payment-page .bsn-td {
    margin-block-end: 6px;
}

/* .blue-gradient-text a {
    background: linear-gradient(270deg, #4E9FE2 0%, #BC4EE2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #BC4EE2;
    display: table;
    font-size: 18px;
    text-decoration: underline;
} */
.awaiting-payment.row {
    justify-content: center;
    margin-block-start: 48px;
}

#awaitingtext, .fixed-clock {
    font-size: 14px;
    line-height: 22px;
    color: #000000;
}

.awaiting-payment__description {
    font-size: 12px;
}

.awaiting-payment__input {
    border: 1px solid var(--color_blue-accent);
    border-right: none;
    height: 100%;
    flex-grow: 1;
}

.awaiting-payment__form-row {
    display: flex;
    align-items: center;
    width: 90%;
    height: 80px;
}

.awaiting-payment__btn {
    background-color: var(--color_blue-accent);
    color: var(--color_white);
    border: none;
    width: 48px;
    padding: 8px;
    height: 100%;
}

.awaiting-payment__copy-icon.material-icons {
    font-size: 20px;
}

#timer {
    font-weight: 600;
}

.awaiting-payment__title {
    margin-block-start: 15px;
}

.payment-page__dogs-info .dogs-info {
    margin-block-start: 30px;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    font-size: 12.5px;
}

.payment-page__dogs-info .buy-sell-name .bsn-td:nth-child(1) {
    font-weight: 600;
}

.buy-sell-total {
    display: flex;
    font-weight: 600;
    justify-content: space-between;
    border-top: 1px solid #c3c3c3;
    padding: 7px 0;
    -moz-border-image: url(../img/paym-br-line.png) 30 round round;
    -webkit-border-image: url(../img/paym-br-line.png) 30 round round;
    -o-border-image: url(../img/paym-br-line.png) 30 round round;
    border-image: url(../img/paym-br-line.png) 30 round round;
}

.buy-sell-name div td:nth-child(2) {
    display: none;
}

.needhelp {
    font-size: 12px;
    line-height: 22px;
    color: #6A6A6A;
    text-decoration: none;
    display: flex;
    margin-block-start: 3rem;
    justify-content: center;
}

    .needhelp img {
        margin-inline-end: 8px;
    }

@media screen and (min-width: 992px) {
    .payment-page #BodyContent_doglist, .payment-page #BodyContent_race_registration {
        max-width: 100%;
    }

    .payment-page .dogs-list__item {
        width: calc((100% - 3 * 20px) / 3);
    }

    .payment-page .dogs-list__name {
        font-size: 16px;
    }

    .payment-page__dogs-info .dogs-info {
        font-size: 14px;
    }

    .awaiting-payment__description {
        font-size: 14px;
    }

    #awaitingtext, .fixed-clock {
        font-size: 18px;
    }

    .needhelp {
        font-size: 14px;
    }
}
/* @media screen and (max-width:768px) {
    .payment-page {
        width: 94vw;
        padding: 5rem 1rem;
    }
    .pay-title .bigTitle {
        display: block;
        font-size: 32px;
    }
    .pay-title .bigTitleOverlay {
        margin-block-end: -6rem;
        font-size: 45px;
    }
    .payment-page .dogs-list__card {
        width: 128px;
        height: 172px;
    }
    .payment-page #BodyContent_doglist {
        justify-content: center;
    }
    .payment-page__dogs-info .dogs-info {
        height: auto;
        margin-block-start: 2rem;
    }
    .awaiting-payment.row {
        text-align: center;
    }
    .needhelp {
        justify-content: center;
    }
    #BodyContent_box_doga,
    #BodyContent_box_dogb,
    #BodyContent_box_dognew {
        text-align: center;
    }
} */

/* ------- LEADER BOARD PAGE ------- */
/* .leaderboard-page {
    background: url(../img/bg.jpeg);
    margin: 0;
    padding: 7rem 0;
} */

.leaderboard-page a {
    text-decoration: none;
}
/* 
.leaderboard {
    max-width: 1128px;
    background: #FFFFFF;
    border: 3px solid #E7E7E7;
    box-sizing: border-box;
    box-shadow: 0px 32px 32px rgba(0, 0, 0, 0.15);
    border-radius: 64px;
    margin: 0 auto;
    padding: 0 2rem;
} */

.leaderboard__title {
    font-weight: bold;
    font-size: 24px;
    line-height: 120%;
    text-align: center;
    text-transform: uppercase;
    color: #4E9FE2;
    margin: 24px 0;
}

.leaderboard-under-title {
    font-weight: bold;
    font-size: 14px;
    line-height: 120%;
    text-align: center;
    color: var(--color_black);
    margin-block-end: 24px;
    text-align: center;
}



.lb-rt {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin: 0 auto;
}

@media screen and (max-width: 767px) {
    .lb-rt {
        width: max-content;
        height: auto;
        padding: 10px 16px;
        font-size: 14px;
        gap: 14px;
    }
}

.leaderboard__desc {
    border-bottom: 1px solid #545454;
    margin-block-start: 24px;
    display: flex;
    font-size: 12px;
    padding-block-end: 10px;
}

.leaderboard__row, .leaderboard__desc {
    /* display: flex; */
    display: grid;
    grid-template-columns: 10% 50% auto auto auto;
    align-items: center;
}

.leaderboard__row {
    padding-block: 12px;
    border-bottom: 1px solid rgba(108, 117, 125, .3);
}

.leaderboard__number {
    font-weight: bold;
    /* font-size: 80px; */
    font-size: 20px;
    /* line-height: 98px; */
    line-height: 150%;
    color: #4E9FE2;
    opacity: 0.25;
    /* width: 160px; */
    text-align: center;
}

.lb-col-dog {
    /* width: 350px; */
    display: flex;
    align-items: center;
    /* padding-left: 1rem; */
    /* padding-inline-start: 10px; */
}

.leaderboard__pic {
    flex-shrink: 0;
}

    .leaderboard__pic img {
        background: linear-gradient(55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
        /* width: 96px;
    height: 96px; */
        width: 32px;
        height: 32px;
        border-radius: 50%;
        margin-inline-end: 10px;
    }

.leaderboard__dog a {
    text-decoration: none;
}

.leaderboard__name {
    font-weight: bold;
    /* font-size: 18px;
    line-height: 22px; */
    font-size: 12px;
    line-height: 120%;
    color: var(--color_black);
}

.leaderboard__medals {
    display: flex;
    align-items: center;
    /* margin: 9px 0 0 -8px; */
    gap: 4px;
}

.leaderboard__medal {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    font-size: 9px;
}

.bt-medal {
    /* width: 24px;
    height: 24px; */
    width: 12px;
    height: 12px;
    /* margin: 0 8px; */
}

.leaderboard__time {
    font-weight: bold;
    /* font-size: 28px; */
    font-size: 12px;
    /* line-height: 34px; */
    line-height: 150%;
    color: #4E9FE2;
    /* width: 200px; */
    text-align: center;
}

.leaderboard__bread {
    /* width: 150px; */
    text-align: center;
    font-size: 12px;
    line-height: 150%;
}

.leaderboard__buy {
    /* width: 150px; */
    text-align: center;
}

.lbtc01, .lbtc02, .lbtc03, .lbtc04 {
    text-align: center;
    font-weight: 600;
}

/* .lbtc01 {
    width: 480px;
}

.lbtc02 {
    width: 250px;
}

.lbtc03 {
    width: 110px;
}

.lbtc04 {
    width: 180px;
} */

@media screen and (min-width: 768px) {
    .leaderboard__title {
        font-size: 32px;
    }

    .leaderboard__desc {
        font-size: 16px;
        margin-block-start: 32px;
    }

    .leaderboard__number {
        font-size: 80px;
    }

    .leaderboard__pic img {
        width: 96px;
        height: 96px;
    }

    .leaderboard__name {
        font-size: 18px;
        margin-block-end: 12px;
    }

    .leaderboard__medals {
        gap: 8px;
    }

    .leaderboard__medal {
        font-size: 12px;
        gap: 8px;
    }

    .bt-medal {
        width: 24px;
        height: 24px;
    }

    .leaderboard__time {
        font-size: 20px;
    }

    .leaderboard__bread {
        font-size: 16px;
    }
}

/* ------- REGISTER RACE PAGE ------- */
/* .register-race-page {
    padding-top: 7rem;
} */

.register-race-page .card-info {
    text-align: center;
}

/* .rqheadline {
    text-align: center;
    margin-block-end: 3rem;
    font-size: 20px;
    font-weight: 600;
} */

.rfr-title {
    text-align: center;
}

    .rfr-title .bigTitle {
        display: block;
        font-size: 32px;
    }

    .rfr-title .bigTitleOverlay {
        font-size: 45px;
        margin-block-end: -5rem;
    }

.recerqdata {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-left: 20px;
}

    .recerqdata img {
        border-radius: 50%;
        width: 96px;
        height: 96px;
    }

    .recerqdata .namenumber {
        font-weight: 600;
    }

#racerequests {
    display: flex;
    justify-content: center;
}

.rqtotalpanel {
    text-align: center;
    padding-block-end: 2rem;
    border-bottom: 2px solid rgba(145, 145, 145, 0.25);
    margin-block-end: 2rem;
}

.rqdelete img {
    border-radius: 0;
    width: auto;
    height: auto;
    margin: 8px 0;
}

.rfr-line {
    margin: 1.2rem 0;
}

.letsracebutton.blueGradBtn {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-block-start: 1rem;
    margin: 0 auto;
}

.rqtotal {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    /* display: flex;
    align-items: center; */
    color: #000000;
}
/* .register-race-page main.grid .price.sell, 
.register-race-page main.grid .price.dtf{
    display: none;
} */

/* ------- COIN PAYMENTS PAGE ------- */
.coin-payments-page {
    height: 94vh;
}

/* .coin-payments-page .btn-group {
    align-items: center;
} */
.p-coin {
    background: transparent;
    color: #363636;
    font-weight: 600;
    border: 0;
    display: none;
}

.coin-payments-page .dropdown {
    height: 350px;
}

.coin-payments-page .btn-group {
    width: 100%;
    text-align: center;
}

.coin-payments-page .btn-group, .coin-payments-page .btn-group-vertical {
    display: initial;
}

.coin-payments-page #cursel {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 1em;
    grid-row-gap: 2em;
    width: 100%;
    height: 216px;
    text-align: center;
    border: 0;
    position: absolute;
    top: 2rem;
}

    .coin-payments-page #cursel li {
        border: 1px solid transparent;
        padding: 8px;
    }

        .coin-payments-page #cursel li.active {
            border: 1px dashed #dfdfdf;
            border-radius: 8px;
            padding: 8px;
        }

.coin-payments-page .pure-g {
    align-items: center;
}

.coin-payments-page .form-space {
    align-items: center;
}

@media screen and (max-width: 768px) {
    .coin-payments-page #cursel {
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 1em;
        grid-row-gap: 0;
    }
}


/* ------- DRESS UP PAGE --------- */
.dressup-page {
    padding-block-start: 24px;
}

.dressup-wrapper {
    flex-direction: column;
    padding-block-start: 0;
}

.dog-dress-up .dog-container {
    width: min(460px, 100%);
    /* height: 466px; */
    background: rgba(255, 255, 255, 0.05);
    /* border: 2px solid #E5E5E5; */
    border: 2px dashed var(--Grey, #6C757D);
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    border-radius: 16px;
    margin: 0 auto;
}

.dress-up-top {
    margin-block-end: 32px;
}
/* .dress-up-top, .dress-up-bottom {
    margin: 0 auto;
} */
.shop-container {
    max-width: 460px;
    /* padding: 2rem 0; */
    margin: 0 auto;
}

    .shop-container .shop-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin: 0 auto;
        gap: 8px;
    }

.items-block-wrapper {
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 2px solid #AAACAE;
    box-sizing: border-box;
    /* box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.05); */
    border-radius: 16px;
}

.dressup-bottom .pagination {
    margin-block-start: 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

    .dressup-bottom .pagination li {
        margin-inline-end: 0;
    }

        .dressup-bottom .pagination li a {
            font-size: 14px;
            line-height: 1.1;
            display: flex;
            align-items: center;
            text-align: center;
            color: #828282;
            text-decoration: none;
            padding: 8px;
        }

            .dressup-bottom .pagination li a.active {
                color: #ffffff;
            }

.dress-up-top .btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-end: 9px;
    gap: 16px;
}
/* .dress-up-top .save-btn, .dress-up-top .cancel-btn {
    width: 117px;
    height: 48px;
} */

.dress-up-top .save-btn {
    font-size: 16px;
    padding-inline: 20px;
}

.dressup-bottom select.sorting-select {
    -webkit-appearance: auto;
    /* border-bottom: 1px solid;
    padding-block-end: 8px;
    border-image: linear-gradient(rgba(78, 159, 226, 1), rgba(152, 78, 226, 1));
    border-image-slice: 1; */
    border: 1px solid var(--Grey-Light, #AAACAE);
    background: var(--White, #FFF);
    padding: 8px 24px 8px 8px;
    border-radius: 8px;
}
/* @media screen and (max-width: 768px) {
    .shop-container .shop-items {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
} */

@media screen and (min-width: 640px) {
    .shop-container .shop-items {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (min-width: 768px) {
    .shop-container .shop-items {
        grid-template-columns: repeat(4, 1fr);
    }

    .shop-container {
        max-width: 960px;
    }

    .dress-up-top .save-btn, .dress-up-top .cancel-btn {
        font-size: 16px;
        padding: 12px 20px;
        line-height: 1.2;
        min-width: 120px;
    }

    .dressup-bottom .pagination li a {
        padding: 12px;
        font-size: 16px;
    }

    .shop-controls {
        margin-block-start: 16px;
        margin-block-end: 32px;
    }
}

@media screen and (min-width: 960px) {
    .shop-container .shop-items {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media screen and (min-width: 1024px) {
    .shop-container .shop-items {
        grid-template-columns: repeat(6, 1fr);
    }
}

/* ! --- CUSTOM CHECKBOX ---- */
.custom-checkbox {
    position: relative;
    width: 16px;
    height: 16px;
}

    .custom-checkbox input {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        appearance: none;
    }

.custom-checkbox__wr {
    background-color: var(--color_mid-gray);
    border-radius: 3px;
    transition: all .3s ease-in-out;
    width: 100%;
    height: 100%;
}

    .custom-checkbox__wr::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: 80%;
        background-position: center;
        transition: al .3s ease-in-out;
        top: 0;
        left: 0;
    }

.custom-checkbox input:checked + .custom-checkbox__wr {
    background-color: #FFC107;
}

    .custom-checkbox input:checked + .custom-checkbox__wr::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M4.56938 6.93345C4.10329 7.4169 3.32903 7.4169 2.86293 6.93345L1.08854 5.09299C0.791142 4.78452 0.791143 4.29603 1.08854 3.98756C1.40172 3.66272 1.92196 3.66272 2.23513 3.98756L3.71616 5.52373L8.35768 0.709389C8.67085 0.384552 9.19109 0.384552 9.50427 0.709389C9.80167 1.01786 9.80167 1.50635 9.50427 1.81482L4.56938 6.93345Z' fill='%23212529'/%3E%3C/svg%3E");
    }


/*!  ------ PAGE SELL \ RENT A DOG ----- */
/* .psr-pt {
    padding-top: 6rem;
} */
/* .page-sell-rent__col {
    display: flex;
} */

/* .page-sell-rent__bottom-description {
    font-size: 18px;
    line-height: 22px;
    color: #ACACAC;
}
.rsell-tabs {
    margin-block-start: -17px;
    padding-top: 2rem;
    border-top: 2px solid rgba(145, 145, 145, 0.25);
}
.page-sell-rent .nav-pills .nav-link.active, .page-sell-rent .nav-pills .show>.nav-link {
    background: transparent;
    font-size: 23px;
    line-height: 28px;
    color: #535A6A;
    border-image-slice: 1;
    border-bottom: 2px solid #000;
    border-image-source:url('../img/tab-active-bb.png');
    
}

.page-sell-rent .nav-pills .nav-link {
    font-size: 23px;
    line-height: 28px;
    color: #9C9EA0;
} */

.rent-page {
    font-size: 12.5px;
}

.rent-bio {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    max-width: 420px;
    margin-inline: auto;
}

.rent-bio__img {
    border-radius: 12px;
    background: linear-gradient(270deg, #FFE38F 0%, #FFD304 100%);
    flex-shrink: 0;
    width: 50%;
    position: relative;
    padding-block: 10px;
}

    .rent-bio__img img {
        width: 100%;
        height: auto;
    }

.rent-bio__info {
    font-size: 10px;
    line-height: 150%;
    color: var(--color_black);
}


/* .psr-dname-bio {
    display: flex;
}
.psr-soba-img {
    padding: 2rem;
}
.psr-dname-bio .sparkle {
    width: 250px;
    
}
.psr-soba-info {
    max-width: 610px;
    padding: 2rem;
}
.psr-soba-title {
    font-weight: bold;
    font-size: 36px;
    line-height: 43px;
    color: #000000;
    margin-block-end: 1.5rem;
} */

.rent-page__nav {
    width: 100%;
    border-radius: 9px;
    border: 1.2px solid var(--color_white);
    background: var(--color_blue-accent);
    padding: 3px;
    margin-block: 24px;
}

    .rent-page__nav .nav-item {
        width: 50%;
    }

    .rent-page__nav .nav-link {
        font-size: 10px;
        font-weight: 500;
        color: var(--color_white);
        padding: 8px;
        border-radius: 7px;
        width: 100%;
    }

        .rent-page__nav .nav-link.active {
            background-color: var(--color_white);
            color: var(--color_black);
            font-weight: 700;
        }

.rent-page__descr {
    line-height: 138%;
    font-weight: 400;
    color: var(--color_black);
    padding-inline: 5px;
}

    .rent-page__descr p:not(:last-child) {
        margin-block-end: 10px;
    }

.rent-page__bottom-descr {
    color: var(--color_mid-gray);
}

    .rent-page__bottom-descr b, .rent-page__bottom-descr strong {
        font-weight: 700;
    }

.rent-page__tab-content {
    display: flex;
    flex-direction: column-reverse;
    gap: 21px;
}

.rent-page__buttons-wr {
    display: grid;
    grid-template-columns: .6fr .4fr;
    gap: 5px;
    margin-block-start: 20px;
}

.rent-page__btn {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    padding: 9px;
}

    .rent-page__btn.btn--full {
        font-weight: 700;
    }

.rent-page__form-line {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: left;
    gap: 6px;
    padding-inline: 5px;
    align-items: center;
}

    .rent-page__form-line:not(:last-of-type) {
        margin-block-end: 14px;
    }

.rent-page__label {
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    line-height: 121%;
}


.rent-page__input-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.rent-page__measure {
    font-size: 10px;
    margin-inline-start: 8px;
    line-height: 123%;
}

.rent-page__input-wrap .ui-spinner-button {
    display: none;
}

.rent-page__input-wrap .ui-spinner {
    border-radius: 3px;
    border: 0.6px solid #AAACAE;
    background-color: var(--color_white);
    max-width: 240px;
}

    .rent-page__input-wrap .ui-spinner input {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: var(--font_general);
        padding: 5px;
        font-weight: 500;
        font-size: 11px;
        line-height: 121%;
        color: var(--color_black);
        text-align: center;
    }

@media screen and (min-width: 768px) {
    .rent-page {
        font-size: 16px;
    }

        .rent-page .content-block {
            padding-block-end: 64px;
        }

    .rent-bio {
        gap: 16px;
        /* max-width: 640px; */
        max-width: 90%;
        display: grid;
        grid-template-columns: 400px 1fr;
        margin: 0;
    }

    .rent-bio__info {
        font-size: inherit;
    }

    .rent-bio__img {
        width: 100%;
    }

    /* .rent-page__nav {
        max-width: 640px;
        margin-inline: auto;
    } */

    .rent-page__nav .nav-link {
        font-size: 14px;
        padding: 12px;
    }

    .rent-page__descr p:not(:last-child) {
        margin-block-end: 16px;
    }

    .rent-page__tab-content {
        gap: 32px;
    }

    .rent-page__buttons-wr {
        gap: 12px;
        margin-block-start: 32px;
    }

    .rent-page__btn {
        font-size: 18px;
        padding: 12px;
    }

    .rent-page__form-line:not(:last-of-type) {
        margin-block-end: 24px;
    }

    .rent-page__label {
        font-size: 14px;
    }

    .rent-page__measure {
        font-size: 13px;
    }

    .rent-page__input-wrap .ui-spinner {
        max-width: 160px;
        width: 100%;
    }

        .rent-page__input-wrap .ui-spinner input {
            font-size: 16px;
            padding: 8px;
        }
}

/* 
.page-sell-rent__bottom-buttons {
    display: flex;
    align-items: center;
}
.page-sell-rent__inputs .blueGradBtn{
    width: 177px;
    height: 48px;
}
.page-sell-rent__inputs .grad-btn-out {
    height: 48px;
    margin-left: 10px;
}
.page-sell-rent__inputs .grad-btn-out span {
    border-radius: 8px;
    background: #fff!important;
    border: none;
    padding: 10px 30px;
    display: inline-block;
}
.tgl {
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    color: #3F3F3F;
}
.page-sell-rent__input-wrap .css-checkbox input {
    margin-left: 0;
}
.page-sell-rent__input-wrap .css-checkbox {
    flex-direction: unset;
}
.psr-controls {
    max-width: 320px;
    margin-left: 5rem;
} */

/* @media screen and (max-width:768px) { */
/* .page-sell-rent__col {
        flex-direction: column-reverse;
    }
    .page-sell-rent__title {
        font-size: 18px;
        line-height: 22px;
        text-align: center;
        color: #000000;
    } */
/* .psr-dname-bio {
        flex-direction: column;
    }
    .psr-soba-img {
        padding: 0 1rem;
    }
    .psr-dname-bio .sparkle {
        width: auto;
    }
    .psr-soba-info {
        text-align: center;
        padding: 1rem;
    }
    .psr-soba-title {
        margin-block-end: 0;
    }
    .psr-controls {
        margin-left: 1rem;
    }
    .psell-right-side {
        padding: 1rem;
    } */
/* } */

/* ------- REGULAR FOOTER -------- */
/* .regular-footer {
    font-weight: 600;
    /* margin-block-start: 3rem; */
/* } */
/* .regular-footer, .regular-footer a {
    color: #333333;
} */ */
/* ! --------- DOGS LIST --------- */
.dogs-list-title {
    /* font-weight: bold; */
    font-size: 18px;
    line-height: 22px;
    text-align: center;
    color: #303030;
    margin-block-start: 16px;
}

.card-bgr-green {
    background: linear-gradient(55.34deg, #89C865 3.28%, #B4F091 92.44%);
    border-radius: 8px;
}

.card-bgr-red {
    background: linear-gradient(55.34deg, #FF8979 3.28%, #FFBBB1 92.44%);
    border-radius: 8px;
}

.card-bgr-blue {
    background: linear-gradient(55.34deg, #6058D5 3.28%, #816BA4 92.44%);
    border-radius: 16px;
}

.card-bgr-yellow {
    background: linear-gradient(55.34deg, #FFD34E 3.28%, #FFE38F 92.44%);
    border-radius: 8px;
}

.card-body {
    background: #ffffff;
}

.dog-parent-select .price.sell,
.dog-parent-select .health-points {
    display: none;
}

/* .achievements-list-page {
    padding: 5rem 15px;
} */

.achievements-list-page a {
    color: #333333;
}

.achievements-list-page img {
    max-width: 100%;
}

.ach-row {
    display: flex;
    align-items: center;
}

    .ach-row img {
        margin-inline-end: 2rem;
    }

@media screen and (max-width: 768px) {
    .ach-row {
        font-size: 14px;
        margin-block-end: 1rem;
    }

        .ach-row img {
            max-width: 90px;
        }
}


/* --- Modal Activity in Dashboard --- */
.modal.modal-activity {
    left: 0;
}

    .modal.modal-activity .modal-header, .modal.modal-activity .modal-body, .modal.modal-activity .modal-footer {
        padding: 10px;
    }

    .modal.modal-activity .modal-title {
        font-size: 12px;
    }

.modal-activity a {
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    color: #303030;
}

.modal.modal-activity .dashboard-activity__table-wrap {
    overflow: visible;
    width: 100%;
}

.modal-activity .js-pagination-prev {
    margin-inline-end: 8px;
}

.modal-activity .dashboard-activity__table {
    display: flex;
    align-items: center;
    font-size: 12px;
}

    .modal-activity .dashboard-activity__table td, .modal-activity .dashboard-activity__table th {
        white-space: normal;
    }

    .modal-activity .dashboard-activity__table a {
        color: #4E9FE2;
        text-decoration: none;
    }

.dashboard-activity__amount-change--green,
.modal-activity .dashboard-activity__amount-change--red {
    font-weight: bold;
    font-size: 12px;
    line-height: 1.2;
    color: #4E9FE2;
    display: flex;
    justify-content: center;
}

.modal-activity .dashboard-activity__date {
    font-size: 12px;
    font-weight: 300;
    padding: 0 10px;
}

.modal-activity .dashboard-activity__rate {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 6px;
    font-size: 11px;
    font-weight: bold;
}

.modal-activity .dashboard-activity__icon {
    width: 32px;
    height: 24px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.modal-activity .icon--activity-1 {
    background-image: url(../img/act-m-breed.svg);
    /* margin: 5px; */
}

.modal-activity .icon--activity-3 {
    background-image: url(../img/act-m-paid.svg);
}

.modal-activity .icon--activity-4 {
    background-image: url(../img/act-m-info.svg);
}

.modal-activity .icon--star {
    background-image: url(../img/act-m-star.svg);
    width: 14px;
    height: 14px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-inline-end: 5px;
}

.modal-activity .dashboard-activity__pagination.main-pagination.main-pagination--small {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.modal-activity .modal-footer .main-pagination__pages {
    display: block;
}

.modal-activity .paginationjs-pages ul {
    display: flex;
    justify-content: space-between;
    list-style: none;
    text-decoration: none;
    align-items: center;
    padding: 0;
    margin: 0;
}

    .modal-activity .paginationjs-pages ul a {
        text-decoration: none;
    }

.modal-activity .paginationjs-page.J-paginationjs-page, .modal-activity .paginationjs-ellipsis {
    padding-inline: 4px;
}

    .modal-activity .paginationjs-page.J-paginationjs-page.is-active {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5px 10px;
        font-weight: 600;
        background: var(--color_blue-accent);
        border-radius: 4px;
        color: #ffffff;
    }

@media (min-width: 576px) {
    .modal-activity .modal-dialog {
        max-width: 1200px;
    }
}

@media screen and (min-width: 768px) {
    .modal.modal-activity .modal-header, .modal.modal-activity .modal-body, .modal.modal-activity .modal-footer {
        padding: 16px;
    }

    .modal.modal-activity .modal-title {
        font-size: 22px;
    }

    .modal-activity a {
        font-size: 16px;
    }

    .modal-activity .dashboard-activity__table, .dashboard-activity__amount-change--green, .modal-activity .dashboard-activity__amount-change--red, .modal-activity .dashboard-activity__date, .modal-activity .dashboard-activity__rate {
        font-size: 16px;
    }

    .modal-activity .dashboard-activity__icon {
        width: 48px;
        height: 36px;
    }

    .modal-activity .dashboard-activity__table td, .modal-activity .dashboard-activity__table th {
        padding: 5px;
    }

    .modal-activity .paginationjs-page.J-paginationjs-page, .modal-activity .paginationjs-ellipsis {
        padding-inline: 10px;
    }
}
/* ! ---- TON PAYMENT PAGE ---- */

.ton-payment-page__content-block {
    display: flex;
    flex-direction: column;
    padding-block-end: 72px;
    padding-block-start: 14px;
}

.ton-payment-page__content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
    margin-block-start: 24px;
}

.ton-payment-page__heading {
    text-align: center;
}

.ton-payment-page__title {
    line-height: 111%;
    font-weight: 400;
    color: var(--color_mid-gray);
    font-size: 10px;
    margin-block: 0 7px;
}

.ton-payment-page__order-amount {
    margin-block: 0;
    font-size: 11px;
    line-height: 115%;
    font-weight: 700;
    color: var(--color_black);
}

.wallet__connect-btn {
    width: 100%;
    gap: 7px;
    padding: 9px;
    font-size: 15px;
    font-weight: 500;
    margin-block-start: 27px;
}

.ton-payment-page__submit {
    margin-block-start: auto;
    width: 100%;
}

.ton-payment-page__submit-btn:disabled {
    background-color: #B5D6F1;
    color: #EAF2F9;
    pointer-events: none;
}

.ton-payment-page__submit-btn {
    width: 100%;
}

.ton-payment-page__status {
    font-size: 10px;
    text-align: center;
    line-height: 122%;
    color: #0D6EFD;
    margin-block-start: 7px;
}

    .ton-payment-page__status.error {
        color: #DC3545;
    }

    .ton-payment-page__status.success {
        color: #198754;
    }

    .ton-payment-page__status p {
        margin: 0;
    }

@media screen and (min-width: 768px) {
    .ton-payment-page__content-block {
        padding-block-end: 120px;
        padding-block-start: 24px;
    }


    .ton-payment-page__content {
        width: 320px;
        margin-inline: auto;
    }

    .ton-payment-page__title {
        font-size: 15px;
        margin-block: 0 7px;
    }

    .ton-payment-page__order-amount {
        font-size: 16px;
    }

    .wallet__connect-btn {
        font-size: 18px;
    }

    .ton-payment-page__status {
        font-size: 14px;
    }
}


/* CITY DOG---- */
.city-dog {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 7px;
    padding: 5px;
    border-radius: 16px;
    background: var(--blue-15, rgba(78, 159, 226, 0.15));
}

    .city-dog.locked {
        position: relative;
    }

.city-dog--empty {
    background-color: var(--color_white);
    padding: 11px;
    border-radius: 16px;
    border: 1.8px dashed var(--color_mid-gray);
    position: relative;
    min-height: 84px;
}

.city-dog.locked::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: inherit;
    background: rgba(33, 37, 41, 0.50);
    backdrop-filter: blur(5px);
}

.city-dog__lock-sign, .city-dog__add-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 0;
}

.city-dog__icon svg {
    width: 100%;
    height: 100%;
}

.city-dog__icon {
    width: 44px;
    height: 44px;
}

.city-dog__lock-message, .city-dog__add-text {
    font-size: 11px;
    font-weight: 600;
    line-height: 121%;
    margin-block: 5px 0;
}

.city-dog__lock-message {
    color: var(--color_white);
}

.city-dog__img-wr {
    border-radius: 16px;
    background: linear-gradient(270deg, #FFE38F 0%, #FFD304 100%);
    width: 92px;
    height: 75px;
}

.city-dog__img {
    width: 100%;
    height: 100%;
}

    .city-dog__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.city-dog__info {
    flex-grow: 1;
}

.city-dog__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 117%;
    margin-block: 0 9.5px;
}

.city-dog__details {
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    line-height: 122.2%;
}

    .city-dog__details span {
        font-weight: 400;
        color: var(--color_mid-gray);
    }

    .city-dog__details li:not(:last-child) {
        margin-block-end: 7px;
    }

.city-dog__btn {
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 9.5px;
    margin-inline-start: auto;
    display: block;
    width: max-content;
}

/* ---city page */

.city-page__main-content {
    padding-block-start: 9.5px;
    margin-block: 0;
}

.city-page__grid {
    display: flex;
    flex-direction: column;
    gap: 9.5px;
}

.city-page__heading {
    padding-block: 53px 12px;
}

.city-page__map-wr {
    width: 100%;
    border: .2rem solid var(--color_mid-gray);
    border-radius: 16px;
    height: 110%;
    position: relative;
    overflow: hidden;
}

/* .city-page__map {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
} */

.city-page__map img {
    object-fit: cover;
}

.map-dog {
    position: absolute;
    z-index: 1;
    top: 0;
}

.city-page__input {
    display: none;
    pointer-events: none;
}

.map-dog__inner {
    clip-path: polygon( 98.945% 40.697%,98.945% 40.697%,97.945% 46.56%,95.185% 52.905%,91.027% 59.535%,85.833% 66.255%,79.964% 72.868%,73.781% 79.178%,67.646% 84.988%,61.921% 90.102%,56.966% 94.324%,53.144% 97.458%,53.144% 97.458%,52.637% 97.806%,52.085% 98.077%,51.498% 98.27%,50.888% 98.386%,50.268% 98.425%,49.647% 98.386%,49.037% 98.27%,48.451% 98.077%,47.898% 97.806%,47.391% 97.458%,47.391% 97.458%,43.569% 94.324%,38.615% 90.102%,32.889% 84.988%,26.755% 79.178%,20.572% 72.868%,14.702% 66.255%,9.508% 59.535%,5.35% 52.905%,2.591% 46.56%,1.59% 40.697%,1.59% 40.697%,1.743% 37.58%,2.197% 34.503%,2.945% 31.477%,3.98% 28.517%,5.296% 25.635%,6.885% 22.845%,8.742% 20.16%,10.859% 17.594%,13.23% 15.158%,15.848% 12.867%,15.848% 12.867%,18.681% 10.751%,21.693% 8.834%,24.868% 7.122%,28.189% 5.621%,31.64% 4.336%,35.204% 3.272%,38.865% 2.435%,42.607% 1.83%,46.413% 1.463%,50.268% 1.34%,50.268% 1.34%,54.122% 1.463%,57.928% 1.83%,61.67% 2.435%,65.331% 3.272%,68.896% 4.336%,72.346% 5.621%,75.667% 7.122%,78.842% 8.834%,81.854% 10.751%,84.688% 12.867%,84.688% 12.867%,87.305% 15.158%,89.676% 17.594%,91.793% 20.16%,93.65% 22.845%,95.24% 25.635%,96.555% 28.517%,97.591% 31.477%,98.339% 34.503%,98.792% 37.58%,98.945% 40.697% );
    background-color: var(--color_blue-accent);
    width: 40px;
    height: 52px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(37, 43, 92, .35);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(37, 43, 92, 0);
    }

    100% {
        box-shadow: 0 0 0 0px rgba(37, 43, 92, .0);
    }
}

.map-dog::after {
    content: "";
    width: 18px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color_blue-accent);
    opacity: .5;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: -3px;
    animation: pulse 1.5s infinite linear;
}

.map-dog__dog {
    width: 35px;
    height: 35px;
    background-color: rgba(#fff, .25);
    background: rgba(255, 255, 255, .25);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block-start: 3px;
}

.map-dog__img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color_white);
    background: linear-gradient(270deg, #FFE38F 0%, #FFD304 100%);
}

    .map-dog__img img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.city-page__place-title {
    color: var(--color_white);
    font-size: 14px;
    line-height: 116%;
    margin-block: 5px 0;
    padding-inline-start: 12px;
    font-weight: 600;
}

.city-page__map-wr img {
    width: 100%;
    height: 100%;
}

@media screen and (min-width: 768px) {
    .city-dog {
        padding: 12px;
        gap: 16px;
    }

    .city-page__map-wr {
        max-height: 60vh;
    }

    .city-dog--empty {
        padding: 16px;
        min-height: 160px;
    }

    .city-dog__icon {
        width: 52px;
        height: 52px;
    }

    .city-dog__lock-message, .city-dog__add-text {
        font-size: 18px;
        margin-block-start: 8px;
    }

    .city-dog__img-wr {
        width: 160px;
        height: 140px;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0px rgba(37, 43, 92, .35);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(37, 43, 92, 0);
        }

        100% {
            box-shadow: 0 0 0 0px rgba(37, 43, 92, .0);
        }
    }

    .map-dog__inner {
        width: 82px;
        height: 106px;
    }

    .map-dog::after {
        width: 52px;
        height: 29px;
        bottom: -10px;
    }

    .map-dog__dog {
        width: 70px;
        height: 70px;
        margin-block-start: 5px;
    }

    .map-dog__img {
        width: 64px;
        height: 64px;
        border-width: 3px;
    }

    .city-dog__name {
        font-size: 20px;
    }

    .city-dog__details {
        font-size: 14px;
    }

    .city-dog__btn {
        padding: 3px 20px;
        font-size: 14px;
    }

    /* -- city page */
    .city-page__heading {
        padding-block: 72px 24px;
    }

    .city-page__main-content {
        padding-block-start: 20px;
    }

    .city-page__grid {
        gap: 16px;
    }

    .city-page__place-title {
        font-size: 20px;
    }
}

@media screen and (min-width: 960px) {

    .city-page__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}