* {
    /* Disable selection/Copy of UIWebView */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.overflow-hidden {
    overflow: hidden;
}

button:focus {
    outline: none;
}

*:focus {
    outline: none;
}

.navbar .menu-left a:not([href]):not([class]):hover {
    color: #009ea2;
}

.popover {
    border: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    max-width: 210px;
    border-radius: 11px;
}

.bs-popover-auto[x-placement^=top]>.arrow::before,
.bs-popover-top>.arrow::before {
    bottom: 0;
    border-width: 0;
    border-top-color: rgba(0, 0, 0, .25);
}

.popover-body {
    color: #212529;
    font-size: 12px;
    padding: 5px 10px;
}

.popover-header {
    padding: 4px 10px;
    margin-bottom: 0;
    line-height: normal;
    font-size: 12px;
    background-color: #009ea2;
    color: #ffffff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.test-banner {
    width: 100%;
    text-align: center;
    color: #ffffff;
    background-color: #cb0000;
    padding: 1px 0;
    font-weight: 500;
    top: 66px;
    height: 20px;
    bottom: 0;
    left: 0;
    right: 0;
}

.test-banner span {
    display: block;
    margin: 0 auto;
}

#nav-icon1 {
    display: none;
    width: 23px;
    height: 15px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon1 span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: #009ea2;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .30s ease-in-out;
    -moz-transition: .30s ease-in-out;
    -o-transition: .30s ease-in-out;
    transition: .30s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
    top: 0px;
}

#nav-icon1 span:nth-child(2) {
    top: 7px;
}

#nav-icon1 span:nth-child(3) {
    top: 14px;
}

/*#nav-icon1.open span:nth-child(1) {
    top: 10px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}

#nav-icon1.open span:nth-child(2) {
    opacity: 0;
}

#nav-icon1.open span:nth-child(3) {
    top: 10px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}*/

select,
option {
    -webkit-appearance: none;
}

input,
textarea {
    /* Exception for input areas */
    -webkit-touch-callout: default !important;
    -webkit-user-select: text !important;
}

body {
    background-color: #fafafa;
    background-color: #ffffff;
    font-family: 'Roboto', sans-serif;
    line-height: normal;
    font-size: 15px;
    font-weight: 400;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    color: #000000;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    width: 100%;
    height: 100vh;
    background-image: url(../img/bg5.png);
    background-size: 70% auto;
    background-repeat: repeat;
    background-position: top;
    background-attachment: fixed;
    padding-top: env(safe-area-inset-top, 30px);
}

.sticky-header {
    --safe-area-inset-top: env(safe-area-inset-top);
    position: fixed;
    width: 100%;
    height: calc(35px + var(--safe-area-inset-top));
    background-color: #ffffff;
    top: 0;
    display: block;
    z-index: 99;
}

.sticky-header-active {
    display: block;
}

.form-control:focus {
    border: 1px solid;
    border-color: #eef2f3 !important;
    box-shadow: none;
}

a {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

a:focus {
    text-decoration: none;
}

.btn-link.focus,
.btn-link:focus {
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: none;
}

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

.scroll-hidden {
    overflow: hidden;
    touch-action: none;
}

.logo-div {
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
    font-size: 17px;
    width: 250px;
    display: inline-block;
}

.logo-div img {
    width: 110px;
}

.logo-div span {
    font-size: 17px;
    font-weight: 500;
    color: #009ea2;
}

.navbar {
    --safe-area-inset-top: calc(env(safe-area-inset-top) - 15px);
    margin-top: 0;
    height: 80px;
    position: fixed;
    width: 100%;
    left: 0;
    top: max(0px, var(--safe-area-inset-top));
    padding: 0 15px;
    transition: 0.5s;
    z-index: 999;
    background-color: #ffffff;
    border-bottom: 1px solid #f7f7f7;
}

.product-detail-nav {
    z-index: 0;
}

.navbar .menu-left {
    z-index: 10;
}

.navbar .medal-navbar-img {
    width: 45px;
    position: absolute;
    left: 50px;
    top: 15px;
}

.navbar .medal-navbar-img.zoom-out {
    animation: crescendo2 2s infinite;
}

.navbar .menu-left a {
    font-size: 23px;
    color: #009ea2;
}

.navbar .menu-left a .pp-div{
    position: relative;
}

.navbar .menu-left a .pp-div .profile-picture-span{
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    font-size: 20px;
    width: 47px;
    height: 47px;
    align-items: center;
    justify-content: center;
}

.navbar.scrolled{
    height: 60px;
}

.navbar .logo-div .logo-scrolled {
    display: none;
}

.navbar.scrolled .logo-div .logo-scrolled {
    display: block;
}

.navbar.scrolled .logo-div .logo-scrolled {
    display: n;
}

.navbar.scrolled .menu-left a .pp-div{
    display: none;
}

.navbar.scrolled .menu-left a #nav-icon1{
    display: block;
}


.navbar .menu-left a .pp-div img{
    width: 47px;
    height: 47px;
    border-radius: 25px;
}

.navbar .menu-left a .pp-div .medal-item{
    position: absolute;
    right: -9px;
    bottom: -10px;
    width: 32px;
}

.navbar .menu-right .money-menu {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 4px 8px;
    -webkit-box-shadow: 2px 2px 5px 0px rgb(189 189 189);
    -moz-box-shadow: 2px 2px 5px 0px rgba(189, 189, 189, 1);
    box-shadow: 2px 2px 5px 0px rgb(189 189 189);
    color: #009a53;
}

.navbar .menu-right .first-div {
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 15px;
}

.navbar .menu-right .first-div span {
    margin-left: 5px;
    font-weight: 900;
    color: #009a53;
    display: inline-flex;
    align-items: flex-end;
}

.navbar .menu-right .second-div {
    display: block;
    padding-left: 5px;
    padding-top: 2px;
}

.navbar .menu-right .second-div span {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.navbar .menu-right-product {
    display: flex;
    align-items: center;
}

.product-detail-top {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    position: relative;
    height: 65px;
    padding-bottom: 10px;
    z-index: 2;
}

.product-detail-top .new-product-box {
    top: 0;
}

.product-detail-top .fav-a {
    display: inline-block;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    font-size: 18px;
    color: #ff4e00;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    margin-left: 20px;
    z-index: 9;
    position: absolute;
    right: 15px;
    top: 0;
}

.product-detail-top .fav-a.fav-active {
    right: 60px;
}

.product-detail-top .share-a {
    z-index: 9;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    line-height: 30px;
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 0;
    text-align: center;
    right: 15px;
}

.product-detail-top .share-a img {
    width: 20px;
}

.navbar .menu-right-product .i-none {
    color: #c5c5c5;
}

.menu-bottom {
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    bottom: 0;
    background-color: #eefaff;
    bottom: -1px;
    z-index: 11;
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    padding-bottom: min(env(safe-area-inset-bottom), 20px)
}

.menu-bottom .sm-icon-menu-bottom {
    font-size: 23px;
}


.menu-bottom .active-menu-bottom::after {
    content: "";
    color: #009ea2;
    font-weight: bold;
    height: 8px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    width: 40px;
    display: block;
    margin: 0 auto;
}

.menu-bottom-div {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.menu-bottom-div .bottom-icon img {
    width: 50px;
    filter: invert(72%) sepia(76%) saturate(7080%) hue-rotate(154deg) brightness(94%) contrast(101%);
    margin-top: -3px;
}

.menu-bottom a {
    padding: 15px 0;
    cursor: pointer;
    color: #009ea2;
    text-decoration: none;
    position: relative;
    font-size: 25px;
    width: 20%;
    height: 65px;
}

.menu-bottom a span {
    position: absolute;
    background: #ff4200;
    animation: leaves 1.2s ease-in-out infinite alternate;
    font-size: 12px;
    color: #ffffff;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    line-height: 18px;
    font-weight: 700;
    top: 10px;
    right: 20%;
}

.menu-bottom .center-home {
    position: relative;
    background: rgb(0, 123, 133);
    background: linear-gradient(0deg, rgba(0, 123, 133, 1) 0%, rgba(0, 158, 162, 1) 50%);
    color: #ffffff;
    bottom: 35px;
    border-radius: 50%;
    width: 75px;
    font-size: 40px;
    height: 75px;
    -webkit-box-shadow: 0 2px 5px 0 rgb(171 171 171);
    -moz-box-shadow: 0 2px 5px 0 rgb(171 171 171);
    box-shadow: 0 2px 5px 0 rgb(171 171 171);
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-bottom .center-home img {
    width: 38px;
}

.home-chart-wrap {
    position: relative;
    width: 235px;
    height: 120px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.home-chart-wrap .chart-stars i {
    position: absolute;
    z-index: 9;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}

.home-chart-wrap .chart-stars .star-icon1 {
    right: -6px;
    bottom: 34px;
    font-size: 24px;
}

.home-chart-wrap .chart-stars .star-icon2 {
    right: 13px;
    bottom: 10px;
    font-size: 20px;
}

.home-chart-wrap .chart-stars .star-icon3 {
    right: -9px;
    bottom: -3px;
    font-size: 16px;
}

@keyframes myfirst3 {
    0% {
        color: #ffe600;
    }

    50% {
        color: #ff9900;
    }

    100% {
        color: #ffe600;
    }
}


.fire1 {
    font-size: 7px;
    bottom: -15px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    position: absolute;
    width: 8em;
    height: 9em;
    left: -16px;
    margin: 0 auto;
}

.fire2 {
    font-size: 7px;
    bottom: -15px;
    filter: blur(0.02em);
    -webkit-filter: blur(0.02em);
    position: absolute;
    width: 8em;
    height: 9em;
    right: -16px;
    margin: 0 auto;
}

.particle {
    animation: rise 1s ease-in infinite;
    background-image: radial-gradient(#ff3c00 20%, rgba(255, 80, 0, 0) 70%);
    border-radius: 50%;
    mix-blend-mode: screen;
    opacity: 0;
    position: absolute;
    bottom: 0;
    width: 5em;
    height: 5em;
}

.particle:nth-of-type(1) {
    animation-delay: 0.6447668641s;
    left: calc((100% - 5em) * 0);
}

.particle:nth-of-type(2) {
    animation-delay: 0.2286919008s;
    left: calc((100% - 5em) * 0.02);
}

.particle:nth-of-type(3) {
    animation-delay: 0.3101439542s;
    left: calc((100% - 5em) * 0.04);
}

.particle:nth-of-type(4) {
    animation-delay: 0.7248343264s;
    left: calc((100% - 5em) * 0.06);
}

.particle:nth-of-type(5) {
    animation-delay: 0.0374268254s;
    left: calc((100% - 5em) * 0.08);
}

.particle:nth-of-type(6) {
    animation-delay: 0.081073683s;
    left: calc((100% - 5em) * 0.1);
}

.particle:nth-of-type(7) {
    animation-delay: 0.7440237846s;
    left: calc((100% - 5em) * 0.12);
}

.particle:nth-of-type(8) {
    animation-delay: 0.7986880765s;
    left: calc((100% - 5em) * 0.14);
}

.particle:nth-of-type(9) {
    animation-delay: 0.4845859905s;
    left: calc((100% - 5em) * 0.16);
}

.particle:nth-of-type(10) {
    animation-delay: 0.949613098s;
    left: calc((100% - 5em) * 0.18);
}

.particle:nth-of-type(11) {
    animation-delay: 0.3351093841s;
    left: calc((100% - 5em) * 0.2);
}

.particle:nth-of-type(12) {
    animation-delay: 0.3817435826s;
    left: calc((100% - 5em) * 0.22);
}

.particle:nth-of-type(13) {
    animation-delay: 0.248240727s;
    left: calc((100% - 5em) * 0.24);
}

.particle:nth-of-type(14) {
    animation-delay: 0.4281804933s;
    left: calc((100% - 5em) * 0.26);
}

.particle:nth-of-type(15) {
    animation-delay: 0.8445710964s;
    left: calc((100% - 5em) * 0.28);
}

.particle:nth-of-type(16) {
    animation-delay: 0.0153354319s;
    left: calc((100% - 5em) * 0.3);
}

.particle:nth-of-type(17) {
    animation-delay: 0.3717046314s;
    left: calc((100% - 5em) * 0.32);
}

.particle:nth-of-type(18) {
    animation-delay: 0.7486692647s;
    left: calc((100% - 5em) * 0.34);
}

.particle:nth-of-type(19) {
    animation-delay: 0.6640574168s;
    left: calc((100% - 5em) * 0.36);
}

.particle:nth-of-type(20) {
    animation-delay: 0.9654532415s;
    left: calc((100% - 5em) * 0.38);
}

.particle:nth-of-type(21) {
    animation-delay: 0.8377427673s;
    left: calc((100% - 5em) * 0.4);
}

.particle:nth-of-type(22) {
    animation-delay: 0.1223463132s;
    left: calc((100% - 5em) * 0.42);
}

.particle:nth-of-type(23) {
    animation-delay: 0.4192609696s;
    left: calc((100% - 5em) * 0.44);
}

.particle:nth-of-type(24) {
    animation-delay: 0.4156799014s;
    left: calc((100% - 5em) * 0.46);
}

.particle:nth-of-type(25) {
    animation-delay: 0.3160208533s;
    left: calc((100% - 5em) * 0.48);
}

.particle:nth-of-type(26) {
    animation-delay: 0.213649079s;
    left: calc((100% - 5em) * 0.5);
}

.particle:nth-of-type(27) {
    animation-delay: 0.6292547603s;
    left: calc((100% - 5em) * 0.52);
}

.particle:nth-of-type(28) {
    animation-delay: 0.3781087051s;
    left: calc((100% - 5em) * 0.54);
}

.particle:nth-of-type(29) {
    animation-delay: 0.5656390168s;
    left: calc((100% - 5em) * 0.56);
}

.particle:nth-of-type(30) {
    animation-delay: 0.6818173113s;
    left: calc((100% - 5em) * 0.58);
}

.particle:nth-of-type(31) {
    animation-delay: 0.6122379053s;
    left: calc((100% - 5em) * 0.6);
}

.particle:nth-of-type(32) {
    animation-delay: 0.2448326914s;
    left: calc((100% - 5em) * 0.62);
}

.particle:nth-of-type(33) {
    animation-delay: 0.9651704387s;
    left: calc((100% - 5em) * 0.64);
}

.particle:nth-of-type(34) {
    animation-delay: 0.0965377529s;
    left: calc((100% - 5em) * 0.66);
}

.particle:nth-of-type(35) {
    animation-delay: 0.2598497611s;
    left: calc((100% - 5em) * 0.68);
}

.particle:nth-of-type(36) {
    animation-delay: 0.0949417494s;
    left: calc((100% - 5em) * 0.7);
}

.particle:nth-of-type(37) {
    animation-delay: 0.1585137435s;
    left: calc((100% - 5em) * 0.72);
}

.particle:nth-of-type(38) {
    animation-delay: 0.4985780882s;
    left: calc((100% - 5em) * 0.74);
}

.particle:nth-of-type(39) {
    animation-delay: 0.9477096623s;
    left: calc((100% - 5em) * 0.76);
}

.particle:nth-of-type(40) {
    animation-delay: 0.939270518s;
    left: calc((100% - 5em) * 0.78);
}

.particle:nth-of-type(41) {
    animation-delay: 0.6946313893s;
    left: calc((100% - 5em) * 0.8);
}

.particle:nth-of-type(42) {
    animation-delay: 0.0827202458s;
    left: calc((100% - 5em) * 0.82);
}

.particle:nth-of-type(43) {
    animation-delay: 0.0731003558s;
    left: calc((100% - 5em) * 0.84);
}

.particle:nth-of-type(44) {
    animation-delay: 0.9578996754s;
    left: calc((100% - 5em) * 0.86);
}

.particle:nth-of-type(45) {
    animation-delay: 0.9782870206s;
    left: calc((100% - 5em) * 0.88);
}

.particle:nth-of-type(46) {
    animation-delay: 0.3328614636s;
    left: calc((100% - 5em) * 0.9);
}

.particle:nth-of-type(47) {
    animation-delay: 0.2084380693s;
    left: calc((100% - 5em) * 0.92);
}

.particle:nth-of-type(48) {
    animation-delay: 0.3751326135s;
    left: calc((100% - 5em) * 0.94);
}

.particle:nth-of-type(49) {
    animation-delay: 0.5022508709s;
    left: calc((100% - 5em) * 0.96);
}

.particle:nth-of-type(50) {
    animation-delay: 0.97855664s;
    left: calc((100% - 5em) * 0.98);
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(0) scale(1);
    }

    25% {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-10em) scale(0);
    }
}

.home-chart {
    width: 65%;
    animation: left 2s ease-in-out infinite;
    margin: 0 auto;
}


@keyframes left {
    0% {
        transform: translatex(5px);
    }

    50% {
        transform: translatex(0px);
    }

    100% {
        transform: translatex(5px);
    }
}

.step-chart {
    width: 100%;
    position: relative;
    margin-top: 20px;
}

.step-chart canvas {
    pointer-events: none;
}

.step-chart .chartWrapper {
    overflow-x: scroll;
    width: 100%;
    height: auto;
}

.content {
    padding-bottom: 125px;
    width: 100%;
    padding-top: 95px;
}

.counter-div {
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.counter-div .total-step {
    margin-bottom: 20px;
}

.counter-div .total-step .step-info-text {
    width: max-content;
    margin: 0 auto;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}

.counter-div .total-step .step-info-text.yellow-info {
    color: #ff8100;
}

.counter-div .total-step .step-info-text.green-info {
    color: #009a53;
}

.counter-div .total-step .step-info-text.red-info {
    color: #ff0000;
}


.counter-div .total-step span {
    display: block;
}

.counter-div .total-step .total-h {
    font-weight: 500;
    font-size: 15px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
}

.counter-div .total-step .total-h .info-modal {
    padding-left: 5px;
}

.counter-div .total-step .total-c {
    font-size: 32px;
    font-weight: 600;
    color: #009ea2;
}

.counter-div .total-step .total-c.end-step {
    color: rgb(255 78 0);
}

.counter-div .total-step .total-c2 {
    color: rgb(255 78 0);
}

.counter-div .total-step .total-c2.end-step {
    color: #009a53;
}

.counter-div .undo-btn {
    font-size: 40px;
    background: rgb(255 82 0);
    background: linear-gradient(0deg, rgba(255, 82, 0, 1) 40%, rgb(255 3 3) 100%);
    color: #ffffff;
    height: 75px;
    width: 75px;
    line-height: 75px;
    border-radius: 50%;
    /* animation: leaves 1.8s ease-in-out infinite alternate; */
    display: inline-block;
    position: absolute;
    bottom: 0;
    z-index: 9;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    border: 0;
}

.counter-div .undo-btn:active {
    -webkit-box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
    -moz-box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
    box-shadow: 0px 0px 15px 0px rgba(130, 130, 130, 1);
    background: #ff4800;
}

.counter-div .undo-btn.hourglass:active {
    box-shadow: none;
    background: #e9e9e9;
}

.counter-div .undo-btn.undo-btn.disable-counter {
    animation: none;
}

.counter-div .undo-btn.undo-btn.info-counter {
    animation: none;
    background: #e9e9e9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 60px;
}

.counter-div .undo-btn.undo-btn.info-counter i {
    color: #009a53;
}

.counter-div .undo-btn.undo-btn.info-counter:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.counter-div .undo-btn.info-counter img {
    filter: none;
    width: 52px;
    height: 52px;
    margin-top: 0;
}

.counter-div .video-play-btn {
    background: #009ea2;
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: 10px;
    transform: translate(0%, -50%);
    z-index: 9;
    left: 0;
    right: 0;
    margin-left: auto;
    border-radius: 50%;
    margin-right: auto;
    font-size: 24px;
    text-align: center;
    color: #ffffff;
    font-weight: 500;
    border: 0;
}

.counter-div .video-play-btn i {
    padding-left: 5px;
}

.counter-div .battery-btn {
    display: block;
    position: absolute;
    z-index: 9;
    left: 0;
    width: 40px;
    height: 40px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #000000;
    top: -5px;
}

.counter-div .battery-btn i {
    font-size: 30px;
    animation: crescendo 1.8s infinite, myanimation 1.8s infinite;
}

.counter-div .battery-btn .chart-play-btn {
    font-size: 11px;
    position: absolute;
    left: 12px;
    color: #ffffff;
    top: 6px;
    z-index: 999;
    animation: crescendo 1.8s infinite;
}

.counter-div .battery-btn.disable-play i {
    color: #000000;
    animation: none;
}

.counter-div .battery-btn.disable-play {
    animation: none;
}

@keyframes crescendo {
    0% {
        transform: scale(1.2);
    }

    50% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1.2);
    }
}

@keyframes crescendo2 {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

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

@keyframes myanimation {
    0% {
        color: #000000;
    }

    55% {
        color: #ffae00;
    }

    100% {
        color: #000000;
    }
}

@keyframes progresslight {
    0% {
        filter: none;
    }

    50% {
        filter: drop-shadow(0 0 0.5rem #ff5216);
    }

    100% {
        filter: none;
    }
}

.counter-div .battery-btn .progress {
    background-color: #ffffff;
    border-radius: 5px;
    height: 25px;
    border: 1px solid #4e4e4e;
}

.counter-div .battery-btn .progress::before {
    left: -2px;
    bottom: 0;
    top: 0px;
    content: " ";
    position: absolute;
    width: 3px;
    height: 8px;
    background-color: #4e4e4e;
    border-radius: 10px 0 0 10px;
    z-index: 9;
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
    display: block;
}

.counter-div .battery-btn .bg-battery-green {
    background-color: #00ca2e;
}

.counter-div .battery-btn .bg-battery-yellow {
    background-color: #f3c029;
}

.counter-div .battery-btn .bg-battery-red {
    background-color: #f11b30;
}

.counter-div .undo-btn.disable-counter {
    background: #e9e9e9;
}

.counter-div .video-play-btn.disable-play {
    background: #b7b7b7;
}

.counter-div .undo-btn img {
    filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg) brightness(111%) contrast(101%);
    width: 60px;
    height: 60px;
    margin-top: -3px;
}

.counter-div .undo-btn .chart-play-btn {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 10px;
    font-size: 15px;
}

.banner1 {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 5px 5px rgb(236 236 236);
    margin-bottom: 20px;
    position: relative;
}

.draw-banner {
    background-color: #eefaff;
}

@keyframes limitedanimate-bg3 {
    0% {
        border: 2px solid #ffcebd;
        box-shadow: 0px 0px 5px 3px rgb(255, 228, 220);
    }

    50% {
        border: 2px solid #ff9f80;
        box-shadow: 0px 0px 5px 3px rgb(255, 182, 160);
    }

    100% {
        border: 2px solid #ffcebd;
        box-shadow: 0px 0px 5px 3px rgb(255, 228, 220);
    }
}



.banner1.draw-banner .banner1-img-div {
    /* border-radius: 25px; */
    /* overflow: hidden; */
}


.banner1.banner-active .banner-name {
    color: #009a53;
}

.banner1.banner-active .banner-bottom2 .product-play i {
    color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play i {
    color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play2 {
    background-color: #dadada;
}

.banner1.banner-lock .banner-bottom2 .product-play2 i {
    color: #ffffff;
}

.banner1 .banner1-img-div img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
}

.banner1-img-div {
    background-image: url(../img/load-icon.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 41%;
    margin-bottom: 12px;
    background-color: #e8e8e8;
}

.single-banner .banner1-img-div {
    background-image: url(../img/single-banner-load.jpg);
    padding-top: 100%;
}


.product-detail .banner1-img-div {
    margin-top: -45px;
    margin-bottom: 15px;
}

.banner1 .banner-name {
    font-size: 14px;
    display: block;
    font-weight: 500;
}

.exit-bonus-div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner1 .banner-bottom {
    background-color: #ffffff;
    color: #008447;
    border-radius: 20px;
    margin-top: 10px;
    text-align: center;
}

.banner1 .banner-bottom .banner-count {
    text-align: right;
    position: absolute;
    right: 15px;
    color: #000000;
}

.banner1 .banner-bottom2 .product-play i {
    color: #019da1;
    font-size: 50px;
}

.banner1 .banner-bottom2 .active-bonus {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #00b562;
    padding: 7px 10px;
    border-radius: 10px;
    width: 75px;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    color: #ffffff;
}

.banner1 .banner-bottom2 .exit-bonus {
    display: inline-block;
    top: 45px;
    right: 10px;
    background-color: #fa0d0d;
    border-radius: 25px;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    width: 75px;
    padding: 7px 15px;
    font-size: 13px;
    margin-right: 8px;
}

.banner1 .banner-bottom2 .exit-bonus i {
    font-size: 18px;
}

.banner1 .banner-bottom2 .product-play2.product-play-plane i {
    margin-right: 3px;
}

.banner1 .banner-bottom2 .product-play2.product-play-man i {
    margin-left: 1px;
}

.banner1 .banner-bottom2 .product-play2 {
    background-color: #019da1;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 62px;
    display: inline-block;
}

.banner1 .banner-bottom2 .product-play2 i {
    color: #ffffff;
    font-size: 28px;
    display: inline-block;
}

.banner1.banner-shop .banner-bottom {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.banner1.banner-shop .banner-bottom .temin-ediliyor {
    margin: 0;
    margin-left: auto;
    font-size: 12px;
    padding: 6px 10px;
}

.banner1.banner-shop .banner-bottom .temin-ediliyor svg {
    width: 20px;
}

.banner1.banner-shop.banner-multi .banner-bottom .temin-ediliyor {
    text-align: center;
    margin: 0 auto;
}

.banner-multi .product-price {
    font-weight: 900;
    justify-content: center;
    color: #009a53;
    position: relative;
    display: flex;
    align-items: center;
}

.banner-multi {
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 15px 3px;
}

.banner-multi .product-price .first-div .money {
    margin-right: 3px;
}

.banner-multi .banner1-img-div {
    background-image: url(../img/single-banner-load.jpg);
    padding-top: 100%;
}

.banner-multi .banner-name {
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-weight: 500;
    padding: 0 3px;
    margin: 6px 0;
    height: 38px;
}

.banner1.banner-shop.draw-banner .banner-bottom {
    /* justify-content: space-between; */
    background-color: transparent;
}

.banner1.banner-shop.draw-banner .draw-div {
    font-size: 12px;
    background-color: #4ec900;
    border-radius: 10px;
    padding: 5px 10px;
    color: #ffffff;
    font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.waiting {
    background-color: #b3b3b3;
}

.banner1.banner-shop.draw-banner .draw-div.end {
    background-color: #009ea2;
    color: #ffffff;
    font-size: 14px;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.win {
    background-color: #12d068;
    color: #ffffff;
    font-size: 14px;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
}

.banner1.banner-shop.draw-banner .draw-div.lose {
    background-color: #f82c2c;
    color: #ffffff;
    font-size: 14px;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
}

.banner1.banner-shop.draw-banner .banner1-img-div {
    /* padding-top: 41%; */
    border: 3px solid #ffffff;
}

.banner1.banner-shop.draw-banner.single-banner .banner1-img-div {
    border: 0;
}

.shop-row {
    justify-content: space-evenly;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.cargo-info-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffc300;
    width: 32px;
    height: 32px;
    display: flex;
    color: #ffffff;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.cargo-info-btn:hover {
    color: #ffffff;
}

.shop-page .row .col-6,
.shop-page .row .col-12 {
    padding: 0 9px;
}

.banner-multi.banner-shop .banner-bottom {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
}

.banner-shop .fav-div {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffffff;
    padding: 8px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
}

.banner-shop .fav-div i {
    font-size: 20px;
    color: #ff2f00;
}

.product-sale-box {
    font-weight: 900;
    font-size: 11px;
    color: #ffffff;
    background-color: #ff2f00;
    padding: 5px 8px;
    border-radius: 10px;
    margin-right: 12px;
}

.product-medal-box {
    display: flex;
    align-items: center;
}

.product-medal-box span {
    font-weight: bold;
    color: #009ea2;
    margin-right: 10px;
    display: block;
}

.product-medal-box .img-div {
    margin-left: -15px;
}

.product-medal-box .img-div img {
    display: block;
    width: 36px;
}

.lastStock {
    text-align: center;
    display: block;
    font-size: 10px;
    font-weight: 500;
    background-color: #00bfe4;
    width: max-content;
    padding: 4px;
    border-radius: 10px;
    position: absolute;
    left: 5px;
    top: 5px;
    color: #ffffff;
}

.lastStock b {
    font-weight: 700;
}

.limitedStock {
    text-align: center;
    display: block;
    font-weight: 500;
    width: max-content;
    border-radius: 10px;
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: #009ea2;
    font-size: 12px;
    padding: 4px 6px;
    color: #ffffff;
    animation: limitedanimate-bg 1.5s infinite;
}

.limited-product-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    animation: limitedanimate 1.5s infinite;
    font-size: 24px;
}


@keyframes limitedanimate {
    0% {
        fill: #00b8bb;
    }

    50% {
        fill: #00e2e6;
    }

    100% {
        fill: #00b8bb;
    }
}

@keyframes limitedanimate-bg {
    0% {
        background-color: #00b8bb;
    }

    50% {
        background-color: #00e2e6;
    }

    100% {
        background-color: #00b8bb;
    }
}


.limited-product-icon svg {
    width: 30px;
}

.banner-multi .new-product-box {
    left: 5px;
}

.new-product-box {
    position: absolute;
    text-align: center;
    background-color: #ffc200;
    color: #ffffff;
    font-size: 11px;
    font-weight: bolder;
    border-radius: 50px;
    height: 35px;
    line-height: 35px;
    width: 35px;
    left: 15px;
    top: -10px;
}

.star-product-icon {
    position: absolute;
    top: 7px;
    right: 7px;
    animation: myfirst3 1.5s infinite;
    font-size: 24px;
}


.banner-shop .product-price {
    font-weight: 900;
    color: #009a53;
    position: relative;
    display: inline-flex;
    align-items: center;
}

.price-div .old-price {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin-bottom: 2px;
    color: #cfcfcf;
}

.price-div .old-price i {
    font-size: 14px;
}

.price-div .old-price b {
    font-size: 15px;
    margin-left: -2px;
}

.price-div .old-price .first-div {
    display: flex;
    align-items: center;
    font-weight: 900;
    font-size: 14px;
}

.price-div .old-price .first-div .money {
    margin-left: 5px;
}

.price-div .old-price .second-div span {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.price-div .old-price .second-div {
    display: inline-block;
    padding-left: 3px;
}

.banner-shop .product-price .first-div {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.banner-shop .product-price .first-div .money {
    margin-left: 5px;
}

.banner-shop .product-price .second-div span {
    display: block;
    font-size: 13px;
    font-weight: 600;
}

.banner-shop .product-price .second-div {
    display: inline-block;
    padding-left: 3px;
}

.banner-shop .end-product {
    background-color: #929292;
    color: #ffffff;
    font-size: 14px;
    border-radius: 20px;
    padding: 4px 10px;
    font-weight: 500;
}

.banner-shop .notification-product {
    display: inline-block;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ffffff;
    padding: 8px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    width: 36px;
    text-align: center;
    color: #009ea2;
}

.banner-shop .notification-product.fav-active {
    top: 55px;
}

.banner-shop .notification-product i {
    font-size: 20px;
}

.banner-shop .end-product i {
    font-size: inherit;
    color: #000000;
    margin-right: 2px;
}

.none-banner-div {
    text-align: center;
    margin: 15px 0;
}

.none-banner-div p {
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 10px;
}

.none-banner-div p.text2 {
    margin-top: 15px;
    font-size: 18px;
    color: #00979b;
}

.none-banner-div p.text2 img {
    width: 25px;
    margin-left: 5px;
}

.app-btn {
    text-align: center;
    font-size: 14px;
    color: #ffffff;
    background: #009ea2;
    color: #ffffff;
    padding: 10px 25px;
    font-weight: 500;
    display: block;
    width: 150px;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 25px;
}

.app-btn.buy-btn {
    width: 100%;
    height: 43px;
    padding: 0;
    border-radius: 10px;
    line-height: 43px;
}

.app-btn.edit-btn {
    color: #ffffff;
    background: rgb(255 78 0);
    padding: 15px 10px;
}

.app-btn.buy-btn.end-activty-btn {
    background: rgb(163 163 163);
}

.app-btn i {
    margin-right: 5px;
}

.app-btn:hover {
    color: #ffffff;
}

.banner-bottom .banner-summary a {
    display: inline-flex;
    align-items: center;
    color: #000000;
    font-weight: 500;
}

.banner-bottom .banner-summary i {
    padding-left: 3px;
    font-size: 13px;
}


.product-detail {
    margin-top: -10px;
}

.product-detail .league-page .friends {
    margin-top: 30px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 5px 5px rgb(236 236 236);
    border-radius: 10px;
    background-color: #eefaff;
    padding: 10px;
}

.product-detail .league-page .friends .first-league-table li .inside {
    align-items: center;
}

.product-detail .league-page .friends .first-league-table li .name {
    width: 220px;
}

.product-detail .league-page .friends ul li .number {
    width: 25px;
    height: 25px;
    font-size: 13px;
}

.product-detail .league-page .friends ul li {
    /* box-shadow: none; */
}

.product-detail .league-page .friends ul {
    padding-bottom: 0;
    height: auto;
}

.product-detail .league-page .friends .draw-list-title {
    text-align: center;
    display: flex;
    margin: 0 auto;
    margin-bottom: 10px;
    color: #009ea2;
    width: max-content;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
}

.product-detail .league-page .friends .draw-list-title img {
    width: 19px;
    margin-left: 3px;
}

.product-detail .index-top-info-box {
    margin-top: 20px;
    height: 30px;
    border-radius: 10px;
    width: max-content;
    padding: 5px 10px;
    font-weight: 400;
    background-color: white;
    color: #009ea2;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 6px 2px rgb(235 235 235);
}

.product-detail .draw-page-sticker-date {
    margin: 0 auto;
    margin-top: 20px;
    height: 30px;
    border-radius: 10px;
    width: max-content;
    padding: 5px 10px;
    font-weight: 400;
    background-color: #dbf4fe;
    color: #000000;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 5px 0px rgb(235 235 235);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail .draw-page-sticker-date.waiting {
    background-color: #ffcf4b;
}

.product-detail .index-top-info-box span b {
    font-weight: 800;
}

.product-detail .banner1-img-div img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
}

.product-detail .brand-name {
    font-weight: 900;
    font-size: 15px;
    color: #f27a1a;
    margin-bottom: 2px;
    display: block;
}

.product-detail h2 {
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 10px;
    margin: 0;
}

.product-detail p {
    font-size: 15px;
    text-align: left;
    padding-bottom: 12px;
    font-weight: 400;
    margin: 0;
}

.product-detail ul {
    padding: 0;
    font-size: 15px;
    text-align: left;
    padding-bottom: 12px;
    font-weight: 400;
    margin: 0;
    padding-left: 15px;
}

.product-detail .product-date {
    text-align: center;
    display: block;
    font-weight: 400;
    font-size: 15px;
    padding-bottom: 10px;
}

.product-detail .product-price {
    font-size: 20px;
    font-weight: 900;
    color: #009a53;
    display: inline-flex;
    align-items: center;
    position: relative;
}

.product-detail .product-price .first-div {
    display: flex;
    align-items: center;
    font-size: 15px;
}

.product-detail .product-price .first-div .money {
    margin-left: 5px;
}

.product-detail .product-price .second-div span {
    display: block;
    font-size: 15px;
    font-weight: 600;
}

.product-detail .product-price .second-div {
    display: inline-block;
    padding-left: 3px;
}

.product-detail .product-price i {
    font-size: 15px;
}

.product-detail-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-detail-bottom.medal-bottom-piece{
    margin-top: -25px;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div{
    margin-left: -15px;
    text-align: center;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div img{
    display: block;
    width: 42px;
}

.product-detail-bottom.medal-bottom-piece .product-medal-box .img-div b{
    color: #009a53;
    font-size: 15px;
    display: block;
}

.product-detail .limitedStockCost-div {
    margin-top: 25px;
    margin-bottom: 25px;
}

.product-detail .limitedStockCost-table {
    background: #bff2f4;
    text-align: center;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: max-content;
    padding: 8px 30px;
    margin: 0 auto;
}

.product-detail .limitedStockCost-table .text1 {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-right: 10px;
    color: #00b6bb;
}

.product-detail .limitedStockCost-table .text2 {
    font-size: 26px;
    background-color: #00bcbf;
    display: block;
    width: max-content;
    color: #ffffff;
    padding: 5px 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    font-weight: 600;
}

.product-detail .limitedStockCost-table .text2::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.5px;
    left: 0;
    top: 50%;
    background: rgb(255 255 255 / 3%);
    z-index: 0;
}

.product-detail .limitedStockCost-table .text2::after {
    content: "";
    background: linear-gradient(to bottom, rgb(255 255 255 / 16%) 0%, rgb(0 192 197) 100%);
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
    z-index: 0;
}

.product-detail .limitedStockCost-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.product-detail .limitedStockCost-title svg {
    width: 30px;
    animation: limitedanimate 1.5s infinite;
    margin-right: 10px;
}

.product-detail .limitedStockCost-title span {
    text-align: center;
    display: block;
    font-weight: 500;
    width: max-content;
    border-radius: 10px;
    background-color: #009ea2;
    font-size: 15px;
    padding: 6px 15px;
    color: #ffffff;
    animation: limitedanimate-bg 1.5s infinite;
}

/* ürün detay 2 */

.product-detail2 {
    margin-top: -10px;
}

.product-detail2 .app-btn.view-btn {
    width: 100%;
    height: 43px;
    padding: 0;
    border-radius: 0;
}

.product-detail2 .product-detail-top .share-a img {
    width: 20px;
    padding-right: 1px;
    padding-bottom: 1px;
}

.product-detail2 .app-btn.view-btn i {
    padding-bottom: 2px;
}

.product-detail2 .app-btn.buy-btn {
    width: 100%;
    height: 43px;
    padding: 0;
    border-radius: 0;
    line-height: 43px;
}

.product-detail2 .product-detail-top {
    display: flex;
    justify-content: flex-end;
    padding: 0;
    position: relative;
    height: 45px;
    padding-bottom: 10px;
}

.product-detail2 .product-image {
    margin-top: -45px;
    margin-bottom: 10px;
}

.product-detail2 .product-image img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
}

.product-detail2 .brand-name {
    font-weight: 900;
    font-size: 15px;
    color: #f27a1a;
    margin-bottom: 2px;
    display: block;
}

.product-detail2 .product-detail-top .share-a {
    z-index: 9;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    width: 35px;
    height: 35px;
    position: absolute;
    text-align: center;
    top: 60px;
    right: 15px;
}

.product-detail2 .product-detail-top .fav-a {
    z-index: 9;
    position: absolute;
    right: 15px;
    top: 15px;
}

.product-detail2 .product-price {
    font-size: 20px;
    font-weight: 900;
    color: #009a53;
    display: inline-flex;
    align-items: center;
    margin-bottom: 15px;
}

.product-detail2 .product-price .first-div {
    display: flex;
    align-items: center;
    font-size: 16px;
}

.product-detail2 .product-price .first-div .money {
    margin-left: 5px;
}

.product-detail2 .product-price .second-div span {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

.product-detail2 .product-price .second-div {
    display: inline-block;
    padding-left: 3px;
}

.product-detail2 .product-price i {
    font-size: 16px;
}

.product-detail2 h2 {
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 10px;
    margin: 0;
}

.product-detail2 p {
    font-weight: 300;
}

.product-detail .more-info-div p {
    font-weight: 400;
    font-size: 13px;
}

.more-info-div {
    text-align: left;
    font-size: 15px;
    margin-top: 25px;
}

.more-info-div .accordion {
    list-style-type: none;
    margin: 0;
    padding: 0;
    color: #404040;
}

.more-info-div .accordion .link p {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 8px;
    margin-bottom: 0;
    margin-right: 5px;
}

.more-info-div .accordion .link-noAccordion p {
    text-align: left;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    padding-bottom: 5px;
    margin-right: 5px;
}

.more-info-div .accordion .link i {
    color: #3b3b3b;
    font-size: 12px;
}

.more-info-div .accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.more-info-div .submenu {
    display: none;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.more-info-div .submenu li p {
    text-align: left;
    color: #727272;
    font-size: 13px;
    padding-bottom: 5px;
}

.more-info-div .submenu a {
    display: block;
    text-decoration: none;
    color: #d9d9d9;
    padding: 12px;
    padding-left: 42px;
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.more-info-div .submenu a:hover {
    color: #FFF;
}

.product-detail .app-btn {
    background: #009ea2;
    margin-top: 20px;
}

.product-detail .app-btn.draw-btn {
    /* background-color: #ff4200; */
}

.product-detail .app-btn.star-btn-product {
    animation: myfirst5 1.5s infinite;
}

.app-btn.view-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 15px;
    font-size: 14px;
    border: 1px solid #f27a1a;
    color: #f27a1a;
    background: #fff;
    width: 100%;
    height: 43px;
    padding: 0;
    border-radius: 0;
    border-radius: 10px;
}

.app-btn.draw-view-btn {
    /* border: 1px solid #009ea2; */
    /* color: #009ea2; */
}

.app-btn.view-btn:active {
    border: 2px solid #f27a1a;
    color: #f27a1a;
    background: #fff;
}

.app-btn.view-btn i {
    margin-left: 5px;
    margin-right: 0;
    font-size: 18px;
}

.app-btn.view-btn span {
    padding-top: 2px;
}

.product-detail-end .product-price {
    color: #c5c5c5;
}

.product-detail-end .app-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 15px;
    font-size: 14px;
    border: 2px solid #f27a1a;
    color: #f27a1a;
    background: #fff;
    width: 100%;
    height: 43px;
    padding: 0;
    border-radius: 0;
}

.product-detail-end .app-btn.follow-product-click {
    background-color: #f27a1a;
    color: #fff;
}

.product-detail-end .app-btn:hover {
    border: 2px solid #f27a1a;
    color: #f27a1a;
    background: #fff;
}

.invite-page {
    text-align: center;
}

.invite-page .banner1-img-div img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
    background-color: #fafafa;
}

.invite-page .banner1-img-div {
    margin-bottom: 15px;
}

.invite-page p {
    margin: 0;
    font-size: 16px;
    padding-bottom: 20px;
}

.invite-page b {
    color: #009ea2;
    font-weight: 500;
}

.friends h2 {
    font-size: 16px;
    color: #009ea2;
    padding-bottom: 10px;
    padding-top: 30px;
    margin: 0;
}

.friends ul {
    padding: 0;
    text-align: left;
}

.friends ul li {
    list-style-type: none;
    background-color: #ffffff;
    border-radius: 25px;
    padding: 5px 6px;
    position: relative;
    margin-bottom: 20px;
    height: 52px;
    display: flex;
    z-index: 9;
    align-items: center;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 1px rgb(235 235 235);
    overflow: hidden;
}

.friends ul .date-end-challenge {
    font-size: 11px;
    font-weight: 600;
    display: block;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    margin: 0;
    height: auto;
    margin-bottom: 10px;
    border-radius: 0;
}

.friends ul li .list-inside {
    display: flex;
    align-items: center;
    width: 100%;
}

.friends ul li .step-count-list {
    font-weight: 600;
    color: #ff4e00;
    font-size: 13px;
    position: absolute;
    right: 60px;
}

.friends ul li .pp-lig {
    width: 42px;
    float: none;
    display: inline-block;
    margin-left: 10px;
}

.friends ul li .pp-div {
    position: relative;
}

.friends ul li .pp-div .medal-item {}

.friends ul li .number {
    width: 60px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eefaff;
    border-radius: 25px;
    color: #009ea2;
}

.friends ul li .number img {
    width: 26px;
}

.friends ul li .profile-picture {
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    text-align: center;
    margin-left: 6px;
    width: 33px;
    height: 33px;
    line-height: 33px;
    font-size: 13px;
}

.friends ul li .name-div .step-div {
    margin-left: 8px;
    font-weight: 700;
    color: #ff4e00;
    font-size: 11px;
}

.friends .remove-follower {
    position: absolute;
    right: 20px;
    font-size: 20px;
    color: #f00000;
}

.bg1 {
    background: #8930ff;
}

.bg2 {
    background: #ff8d00;
}

.bg3 {
    background: #00c0ff;
}

.bg4 {
    background: #ff1a5f;
}

.bg5 {
    background: #ffc400;
}

.bg6 {
    background: #00e97c;
}

.friends ul li .name {
    margin-left: 8px;
    font-weight: 500;
    font-size: 13px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 175px;
    max-width: 100%;
}

.friends ul li .waiting-step {
    position: absolute;
    right: 10px;
    width: 105px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    color: #ffb000;
    background-color: #ffffff;
    padding: 5px 3px;
    border-radius: 10px;
}

.friends ul li .completed-step {
    position: absolute;
    right: 15px;
    color: #009a53;
    font-size: 12px;
    font-weight: 700;
    background-color: #ffffff;
    padding: 5px 3px;
    border-radius: 10px;
}

.friends ul li .i-lig {
    color: #c9c9c9;
    font-size: 18px;
    position: absolute;
    right: 20px;
}

.friends ul li .list-unfollow-btn {
    color: #515151;
    position: absolute;
    right: 15px;
    border: 1px solid #cbcbcb;
    padding: 5px;
    border-radius: 15px;
    font-size: 12px;
    width: 65px;
    text-align: center;
    font-weight: 500;
}

.friends ul li .medal {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    right: 5px;
    margin-left: auto;
    margin-right: auto;
}

.league-page h2 {
    text-align: center;
    padding-top: 0;
    font-weight: 700;
    margin: 0;
    color: #ff9100;
    font-size: 16px;
}

.friends .league-date {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

.friends .league-date a {
    background-color: #b8b8b8;
    color: #ffffff;
    border-radius: 50px;
    width: 70px;
    text-align: center;
    font-weight: 500;
    font-size: 13px;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-right: 10px;
}

.friends .league-date a:hover {
    color: #ffffff;
}

.friends .league-date .date-active {
    background-color: #009ea2;
}

.friends .league-date a:last-child {
    margin-right: 0;
}

.league-page h2 img {
    padding-right: 5px;
    width: 30px;
}

.bg-icon {
    position: fixed;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    display: none;
    min-height: 10em;
    width: 70%;
    top: 50%;
    transform: translate(0, -50%);
    color: #ffffff;
    font-weight: 500;
    opacity: 0.02;
    filter: invert(0%) sepia(0%) saturate(28%) hue-rotate(284deg) brightness(0) contrast(101%);
    z-index: 10;
    pointer-events: none;
}

.form-page .login-top-text {
    text-align: center;
    margin-bottom: 20px;
}

.form-page .login-top-text h2 {
    font-size: 22px;
    font-weight: 600;
}

.form-page .login-top-text h3 {
    font-size: 16px;
    margin-top: 5px;
    font-weight: 400;
}

form small {
    color: red;
}

.form-page .sm-login {
    text-align: center;
    padding: 13px 0;
    font-size: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
}

.form-page .sm-login i {
    margin-right: 10px;
    font-size: 23px;
}

.form-page .sm-login.fb-login {
    background-color: #0062e8;
    padding: 13px 0;
    color: #ffffff;
}

.form-page .sm-login.g-login {
    background-color: #e94235;
    color: #ffffff;
}

.form-page .sm-login.adimpara-login {
    background-color: #009ea2;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-page .sm-login.adimpara-login img {
    margin-right: 5px;
    display: inline-block;
    width: 25px;
    filter: invert(100%) sepia(20%) saturate(2%) hue-rotate(252deg) brightness(111%) contrast(101%);
}

.form-page .sm-login.adimpara-login span {
    display: inline-block;
}

.invite-code-box {
    margin-bottom: 25px;
    text-align: center;
    padding: 6px;
    width: max-content;
    margin: 0 auto;
    margin-bottom: 20px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.invite-code-box label {
    font-size: 18px;
    margin: 0;
    color: #ffffff;
    padding-bottom: 6px;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 0;
}

.invite-code-box i {
    font-size: 30px;
    margin-right: 7px;
    color: #ffab00;
}

.invite-code-box .form-control {
    background-color: #ffab00;
    border: 1px solid;
    resize: none;
    border-radius: 0;
    padding: 5px 15px;
    border-color: #ffab00;
    font-size: 15px;
    text-align: center;
    margin: 0 auto;
    border-radius: 0;
    font-weight: 400;
    font-size: 18px;
    padding: 0;
    color: #ffffff;
    line-height: normal;
    height: 40px;
    padding: 6px 10px;
    box-shadow: none;
    border-radius: 10px;
}

.invite-code-box .form-control:focus {
    background-color: #ffffff;
    color: #000000;
    border-color: rgb(231, 231, 231);
}

.invite-code-box .form-control::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: #ffffff;
    font-weight: 600;
    opacity: 1;
    /* Firefox */
}

.invite-code-box .form-control:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #ffffff;
}

.invite-code-box .form-control::-ms-input-placeholder {
    /* Microsoft Edge */
    color: #ffffff;
}

.form-page .sm-login.apple-login {
    background-color: #000000;
    color: #ffffff;
    border: 1px solid #000000;
}

.form-page .login-center-text {
    text-align: center;
    display: block;
    margin-bottom: 15px;
}

.login-contract {
    text-align: center;
    display: block;
    font-weight: 400;
    margin-bottom: 20px;
    font-size: 14px;
}

 .login-contract a {
    font-weight: 500;
    color: #009ea2;
}

.form-page form .app-btn {
    margin-bottom: 20px;
}

.form-page.profile-page .form-control {
    color: #989898;
}

.form-page.profile-page2 .form-control {
    color: #000000;
}

.form-page.profile-page2 .form-control {
    resize: none;
}

.form-control {
    background-color: #eef2f3;
    border: 0;
    resize: none;
    border-radius: 15px;
    padding: 5px 15px;
    border: 1px solid #eef2f3;
    font-size: 15px;
}

.profile-page .profile-top {
    text-align: center;
}

.profile-page .profile-top .pp-area {
    position: relative;
    width: 140px;
    margin: 0 auto;
}

.profile-page .profile-top .pp-area .pp-div {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.profile-page .profile-top .pp-area .pp-div .medal-item {
    width: 50px;
    right: -15px;
    position: absolute;
    bottom: -5px;
    border-radius: 0;
    display: block;
    height: auto;
}


input[type="file"] {
    display: none;
}

.profile-page .profile-top .short-name {
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    font-size: 50px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    padding: 0;
}

.profile-page .profile-top img {
    width: 115px;
    height: 115px;
    border-radius: 50%;
}

.profile-page .profile-top .add-pp {
    position: absolute;
    bottom: 0;
    font-size: 22px;
    background-color: #e6e6e6;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding-left: 2px;
    font-weight: 700;
    color: #000000;
    right: 0;
    border-radius: 50%;
}

.profile-page .profile-picture-change-btn {
    text-align: center;
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #009ea2;
    padding: 10px 0;
}

.proifle-alerts-box {
    border-radius: 10px;
    padding: 6px 0;
    display: block;
    margin-top: 35px;
    text-align: center;
}

.proifle-alerts-box .delete-account-btn {
    margin-top: 10px;
    font-size: 14px;
}


.proifle-alerts {
    margin-top: 35px;
}

.proifle-alerts-box.profile-point {
    background-color: #ff4b4b;
    color: #ffffff;
}

.proifle-alerts-box.profile-coin-day {
    background-color: #ffffff;
    color: #000000;
    padding: 20px 10px;
    border-radius: 25px;
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.proifle-alerts-box img {
    width: 20px;
}

.proifle-alerts-box span {
    font-weight: 500;
    font-size: 12px;
    padding-left: 7px;
}

.proifle-alerts-box span b {
    font-weight: 800;
    font-size: 14px;
}

.first-page-content {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
    height: 100vh;
}

.first-page-content .first-page-div {
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    z-index: 9;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.first-page-content .first-page-div img {
    width: 140px;
}

.first-page-content .first-page-div .first-btn1 {
    text-align: center;
    font-size: 16px;
    background: #009ea2;
    color: #ffffff;
    padding: 7px 10px;
    display: block;
    width: 150px;
    margin: 20px auto;
    border-radius: 10px;
}

.first-page-content .first-page-div .first-btn2 {
    text-align: center;
    font-size: 16px;
    background: rgb(255 78 0);
    color: #ffffff;
    padding: 7px 10px;
    display: block;
    width: 150px;
    font-weight: 500;
    margin: 20px auto;
    border-radius: 10px;
}

.sum-step {
    text-align: center;
}

.sum-step .sum-step-text {
    font-size: 17px;
    font-weight: 400;
    display: block;
}

.sum-step .sum-step-number {
    margin: 5px 0;
}

.sum-step .sum-step-number span {
    font-size: 22px;
    display: inline-block;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 5px;
    font-weight: 700;
    background-color: #000000;
    background: linear-gradient(0deg, #000000 0%, #4e4e4e 50%);
    margin: 0 2px;
}

.sum-step .sum-step-number .dot-step {
    background: transparent;
    color: #000000;
    padding: 0;
    margin: 0;
}

.app-tabs .nav-tabs {
    border-radius: 15px;
    margin-bottom: 15px;
    justify-content: center;
    padding-bottom: 1px;
    background-color: #ffffff;
    border: 2px solid #ffffff;
}

.app-tabs .nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: #ffffff;
    background-color: #ff4e00;
    border: 0;
    border-radius: 15px;
}

.stats-page .wrapper {
    margin-bottom: 20px;
}

.stats-page .tab-content {
    position: relative;
}

.color-info {
    display: flex;
    padding-bottom: 10px;
}

.color-info .info-div {
    display: flex;
    align-items: center;
    padding-right: 10px;
}

.color-info .color-area1 {
    width: 40px;
    height: 15px;
    display: inline-block;
    background-color: #009ea2;
}

.color-info .color-area2 {
    width: 40px;
    height: 15px;
    display: inline-block;
    background-color: #ff4e00;
}

.color-info .text-area {
    font-weight: 400;
    font-size: 13px;
    padding-left: 5px;
    display: inline-block;
}

.app-tabs .nav-item {
    font-size: 13.5px;
    font-weight: 500;
    height: 30px;
    width: 50%;
    text-align: center;
    padding: 7px 0;
    border: 0;
}

.nav-drill .nav-drill-wrapper {
    z-index: 9;
}

.nav-drill .custom-switch {
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #0f6bd0;
    background-color: #0f6bd0;
}

.custom-control-input:focus~.custom-control-label::before {
    box-shadow: none;
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #848484;
}

.custom-switch .custom-control-label::after {
    background-color: #848484;
}

.custom-control-label::before {
    border: #848484 solid 1px;
}

.nav-drill .custom-switch .switch-text {
    position: absolute;
    top: 2px;
}

.nav-top {
    position: relative;
}

.nav-drill {
    margin-top: 50px;
    transform: translateX(-100%);
}

.nav-is-toggled .nav-drill {
    transform: translateX(0);
}

.nav-is-toggled::after {
    opacity: 1;
    visibility: visible;
}

.nav-drill {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    height: 100vh;
    background: #00bfc3;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: 0.30s;
    margin: 0;
    padding: 0px 15px;
    z-index: 1001;
    padding-top: 70px;
}

.nav-drill .nav-drill-top {
    text-align: center;
}

.nav-drill .nav-drill-top .pp-div {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.nav-drill .nav-drill-top .pp-div .medal-item {
    width: 50px;
    right: -15px;
    position: absolute;
    bottom: -10px;
    border-radius: 0;
    display: block;
}

.nav-drill .nav-drill-top .profile-picture-span {
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    position: relative;
    font-size: 40px;
    width: 90px;
    height: 90px;
    line-height: 90px;
}

.nav-drill .nav-drill-top img {
    width: 90px;
    border-radius: 50%;
    display: inline-block;
}

.nav-drill .nav-drill-top .name-user {
    display: block;
    margin-top: 10px;
    color: #ffffff;
    font-weight: 500;
    font-size: 18px;
    margin-bottom: 20px;
}

.nav-drill .nav-items {
    flex: 0 0 100%;
}

.nav-drill ul {
    padding: 0;
}

.nav-drill .nav-item {
    list-style-type: none;
}

.nav-drill .nav-item i {
    display: inline-block;
    margin-right: 5px;
}

.nav-drill .nav-link {
    display: block;
    color: #ffffff;
    font-size: 17px;
    font-weight: 300;
    padding: 13px 0;
}

.nav-drill .dark-mod {
    border-top: 1px solid #00cbd0;
    display: block;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    padding: 13px 0;
    display: flex;
    align-items: flex-end;
}

.nav-drill .dark-mod img {
    width: 26px;
    padding-right: 5px;
}

body.nav-is-toggled {
    overflow: hidden;
}

.menu-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    display: block;
    position: fixed;
    z-index: 999;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    display: none;
}

.menu-overlay.active-menu-overlay {
    display: block;
}

.share-overlay {
    top: 0;
    left: 0;
    width: 100vw;
    display: block;
    position: fixed;
    z-index: 999;
    height: 100vh;
    background: rgba(0, 0, 0, .5);
    display: none;
    transition: opacity .15s linear;
}

.share-overlay.active-share-overlay {
    display: block;
}

.fade {
    transition: none;
}

.contact-page .contact-box {
    text-align: center;
}

.contact-page .contact-box .title-contact {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
}

.contact-page .contact-box .text-contact {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
}

.contact-page .contact-box span {
    display: block;
}

.contact-page .contact-box a {
    display: inline-block;
    width: auto;
}

.contact-page .contact-box i {
    color: #009ea2;
    margin-right: 6px;
    font-size: 26px;
}

.contact-page .contact-logo {
    width: 120px;
    margin: 0 auto;
    margin-bottom: 20px;
    display: block;
}

.contact-page .bg-icon {
    position: absolute;
    opacity: 0.03;
    pointer-events: none;
}

.contact-page hr {
    margin: 15px 0;
    border-color: #efefef;
}

.contact-page {
    border-radius: 10px;
    position: relative;
    z-index: 9;
    text-align: center;
    margin-bottom: -50px;
    padding: 0 10px;
    min-height: 75vh;
}

.info-app {
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    padding: 10px;
    background-color: #ffffff;
    display: flex;
    justify-content: space-around;
}

.info-app i {
    font-size: 35px;
    display: inline-block;
    color: #ffc800;
}

.info-app span {
    font-weight: 400;
    font-size: 15px;
    padding-left: 10px;
}

.modal-emoji-div {
    margin-top: -60px;
}

.app-modal1b .modal-emoji-div img {
    margin-bottom: 0;
    width: 70px;
}

.app-modal1b.rozet-modal3 .img-div {
    padding: 5px;
}

.app-modal1b.rozet-modal3 .modal-body {
    padding: 20px 10px;
}

.app-modal1b.rozet-modal3 .medals-div-inside {
    margin-bottom: 20px;
}


.app-modal1b.rozet-modal3 .title {
    margin-bottom: 15px;
    font-size: 16px;
}

.app-modal1b.rozet-modal2 .modal-emoji-div img {
    margin-bottom: 0;
    width: 100px;
}

.app-modal1b.rozet-modal2 .title {
    font-weight: 400;
    display: block;
    font-size: 17px;
    margin-top: 6px;
    margin-bottom: 15px;
}

.overlay-modal {
    z-index: 1;
}

.app-modal1 {
    text-align: center;
    color: #000000;
}

.app-modal1 .app-modal1-div {
    position: relative;
}

.app-modal1 .bg-icon {
    position: absolute;
    display: none;
    min-height: auto;
    opacity: 0.06;
    display: none;
}

.app-modal1 .bg-icon img {
    width: 80px;
    margin: 0 auto;
}

.app-modal1 .profil-bonus-modal .bg-icon img {
    width: 80px;
    margin: 0 auto;
}

.app-modal1 .modal-header {
    border: 0;
    padding: 0;
}

.app-modal1 .modal-content {
    border-radius: 10px;
    border: 0;
}

.app-modal1 .modal-header .close {
    position: absolute;
    right: 10px;
    font-size: 25px;
    top: -31px;
    color: #ffffff;
    opacity: 1;
}

.app-modal1 .modal-t1 {
    color: #ff4e00;
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 5px;
    display: block;
}

.app-modal1 .modal-t3 {
    color: #000000;
    font-size: 16px;
    display: block;
    margin-bottom: 10px;
}

.app-modal1 .modal-t4 {
    display: flex;
    color: #000000;
    margin-bottom: 10px;
    font-weight: 500;
    align-items: center;
    font-size: 15px;
    justify-content: center;
}

.app-modal1 .modal-t4 i {
    font-size: 18px;
    color: #009ea2;
    background-color: #eaeaea;
    width: 35px;
    text-align: center;
    margin-left: 8px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    display: inline-block;
}

.app-modal1 .modal-t6 {
    display: flex;
    align-items: center;
    font-weight: 500;
    margin-bottom: 10px;
    font-size: 18px;
    justify-content: center;
}

.app-modal1 .modal-t6 img {
    margin-left: 5px;
    width: 25px;
}

.app-modal1 .modal-t7 {
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
    color: #848484;
    font-size: 15px;
}

.app-modal1 .modal-t5 {
    font-size: 14px;
    display: block;
    color: #494949;
    margin-bottom: 15px;
}

.app-modal1 .modal-btn {
    margin-top: 10px;
}

.app-modal1 .modal-t2 {
    color: #009a53;
    font-size: 18px;
    display: block;
}

.app-modal1 .modal-t2 {
    color: #009a53;
    font-size: 16px;
    display: block;
}

.app-modal1 .modal-price {
    font-size: 16px;
    font-weight: 900;
    color: #009a53;
    display: inline-flex;
    align-items: center;
    margin-bottom: 5px;
}

.app-modal1.rozet-modal .close-modal-btn-top {
    top: 30px;
}

.app-modal1.rozet-modal .modal-emoji-div img {
    width: 130px;
}

.app-modal1.rozet-modal .modal-price .money {
    margin-left: 0;
}

.app-modal1 .modal-price .money {
    margin-left: 5px;
}

.app-modal2-div {
    text-align: left;
}

.app-modal2-div .app-btn {
    display: block;
    width: 150px;
}

.app-modal2-div p {
    margin-bottom: 15px;
}

.app-modal2-div input {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: block;
}

.app-modal3-div .profile-picture-span {
    line-height: 100px;
    background: #009ea2;
    border-radius: 50%;
    color: #ffffff;
    display: inline-block;
    position: relative;
    width: 100px;
    font-size: 40px;
    height: 100px;
    margin-bottom: 10px;
}

.app-modal3-div img {
    width: 100px;
    display: inline-block;
}

.app-modal3-div .name-user {
    display: block;
    color: #000000;
    font-weight: 500;
    font-size: 18px;
}

.app-modal3-div ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-top: 18px;
}

.app-modal3-div .modal-follow-btn {
    color: #ffffff;
    background: #009ea2;
    border-radius: 15px;
    padding: 5px 10px;
    display: inline-block;
    font-size: 16px;
    margin-top: 8px;
    font-weight: 500;
}

.app-modal3-div .modal-follow-btn i {
    padding-right: 4px;
}

.app-modal3-div ul li {
    margin: 0 3px;
    width: 33.3%;
    padding: 10px 4px;
    background-color: rgba(239 239 239 / 60%);
    border-radius: 5px;
}

.app-modal3-div ul li .lig-modal-h {
    display: block;
    font-weight: 400;
    font-size: 15px;
    margin-bottom: 2px;
    height: 60px;
}

.app-modal3-div ul li .lig-modal-data {
    display: block;
    font-weight: 600;
    font-size: 20px;
    color: #ff4e00;
}

.app-modal4-div p {
    font-size: 15px;
    text-align: center;
    margin: 0;
    margin-bottom: 10px;
    padding-top: 0;
}

.invitation-modal-btn {
    width: 200px;
    font-weight: 500;
    background-color: #009ea2;
    color: #ffffff !important;
}

.invitation-modal-btn i {
    color: #ffc903;
    font-size: 15px;
    margin: 0;
    margin-left: 2px;
}

.invitation-modal-div label {
    text-align: left;
    width: 80%;
}

.invitation-modal-div input {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: block;
}

.share-div-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    text-align: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #ffffff;
    padding: 30px 10px;
    display: none;
    justify-content: space-between;
}

.share-div-bottom a {
    display: inline-block;
    text-align: center;
    width: 70px;
}

.share-div-bottom a i {
    display: block;
    margin: 0 auto;
    font-size: 50px;
}

.share-div-bottom a i.whatsapp {
    color: #15bf00;
}

.share-div-bottom a i.facebook {
    color: #3338d0;
}

.share-div-bottom a i.twitter {
    color: #1da1f2;
}

.share-div-bottom a i.mail {
    color: #ffb100;
}

.share-div-bottom a span {
    display: block;
    font-size: 14px;
    font-weight: 400;
    padding-top: 3px;
}

.share-active {
    display: flex;
}

.faq-page .accordion {
    width: 100%;
    max-width: 360px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
}

.faq-page .accordion .link {
    display: block;
    padding: 10px 15px;
    font-size: 14px;
    position: relative;
    background-color: #009ea2;
    border-radius: 15px;
    margin-bottom: 15px;
    color: #ffffff;
}

.faq-page .accordion .link p {
    width: 90%;
    font-weight: 400;
    margin: 0;
}

.faq-page .accordion li:last-child .link {
    border-bottom: 0;
}

.faq-page .accordion li i {
    position: absolute;
    top: 10px;
    left: 12px;
    font-size: 18px;
}

.faq-page .accordion li i.fa-chevron-down {
    right: 12px;
    left: auto;
    font-size: 16px;
}

.faq-page .accordion li.open i {
    color: #ffffff;
}

.faq-page .accordion li.open i.fa-chevron-down {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.faq-page .submenu {
    display: none;
    font-size: 14px;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    padding-top: 0;
}

.faq-page .submenu a {
    font-weight: 500;
    color: #007bff;
    text-decoration: revert;
}

.invite-box {
    height: 58px;
    display: flex;
    background-color: #ffffff;
    border: 1px solid #ececec;
    align-items: center;
    justify-content: center;
}

.invite-box .code-div {
    padding-right: 10px;
}

.invite-box .code-div label {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
}

.invite-box .invite-code {
    font-size: 20px;
    font-weight: 300;
}

.invite-box .invite-icon {
    font-size: 18px;
    color: #009ea2;
    background-color: #eaeaea;
    width: 35px;
    margin-left: 12px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
}

.invite-box .invite-icon img {
    width: 18px;
    padding: 0;
    display: inline-block;
    margin-top: -3px;
}

.introjs-tooltipReferenceLayer * {
    font-family: 'Roboto' !important;
}

.introjs-helperLayer {
    box-shadow: rgb(33 33 33 / 0) 0px 0px 1px 2px, rgb(33 33 33 / 65%) 0px 0px 0px 5000px !important;
}

.introjs-tooltipbuttons {
    border-top: 0 !important;
}

.introjs-button {
    background-color: #009ea2 !important;
    color: #ffffff !important;
    border: 0 !important;
    text-shadow: none !important;
}

.introjs-tooltiptext {
    padding: 10px !important;
    font-size: 15px;
}

.introjs-bullets {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.introjs-button:focus {
    box-shadow: none !important;
}

.introjs-skipbutton {
    color: #000000 !important;
    font-size: 28px !important;
    padding: 0 !important;
}

.introjs-tooltip-title {
    background-color: #009ea2 !important;
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
    line-height: 35px !important;
    color: #ffffff !important;
    border-radius: 50% !important;
}

.introjs-tooltip-header {
    padding-left: 10px !important;
    padding-right: 15px !important;
    padding-top: 15px !important;
}

.brands-follow-page .brands-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    margin-bottom: 15px;
    position: relative;
}

.brands-follow-page .brands-box img {
    width: 70px;
    border-radius: 10px;
}

.brands-follow-page .brands-box .notification-product {
    display: inline-block;
    background-color: #ffffff;
    padding: 8px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    width: 36px;
    text-align: center;
    color: #009ea2;
    right: 10px;
}

.content-body .content {
    padding: 15px;
}

.content-body .logo-div span {
    font-size: 17px;
    width: 250px;
    display: inline-block;
}

.helpvideo-div p {
    text-align: center;
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 18px;
}

.helpvideo-div .app-btn {
    margin-bottom: 15px;
    width: 170px;
}

.helpvideo-div img {
    width: 100%;
    margin: 0 auto;
    display: block;
    border-radius: 40px;
    padding: 3px;
}

.iphone-x {
    position: relative;
    margin: 35px auto;
    width: 80%;
    border-radius: 40px;
    box-shadow: 0px 0px 0px 5px #b2b2b2, 0px 0px 0px 5px #b2b2b2, 0px 0px 0px 5px #b2b2b2;
}

.iphone-x:before,
.iphone-x:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.iphone-x:after {
    bottom: 7px;
    width: 140px;
    height: 4px;
    border-radius: 10px;
}

.iphone-x:before {
    top: 0px;
    width: 56%;
    height: 30px;
    background-color: #b2b2b2;
    border-radius: 0px 0px 40px 40px;
}

.adres-page .adres-btn {
    width: 200px;
    margin-top: 20px;
}

.adres-list .card {
    margin: 0;
    list-style-type: none;
    text-align: left;
    padding: 0;
}

.adres-list .card {
    background-color: #efefef;
    border-radius: 5px;
    padding: 5px 10px;
    margin-bottom: 15px;
    position: relative;
}

.adres-list .card span {
    display: block;
    padding: 2px 0;
    font-size: 14px;
}

.adres-list .adres-name {
    font-weight: 600;
}

.adres-list .card .adres-trash {
    position: absolute;
    right: 0;
    bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background-color: #eef2f3;
    display: inline-block;
    border-radius: 25px;
    font-weight: 500;
    text-align: center !important;
    font-size: 16px;
    width: 35px;
    color: #000000;
    padding: 0;
    height: 35px;
}

.adres-list .card .adres-edit span {
    padding: 0;
    display: inline-block;
}

.adres-list .card .adres-edit {
    position: absolute;
    right: 45px;
    bottom: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    background-color: #eef2f3;
    display: inline-block;
    border-radius: 25px;
    font-weight: 500;
    font-size: 16px;
    text-align: -webkit-center;
    text-align: center;
    width: 35px;
    padding: 0;
    height: 35px;
}

.adres-list .card .adres-edit i {
    color: #000000;
}

.adres-list .accordion .card.active-adres .card-body {
    padding: 15px 0;
    background-color: #ffffff;
    color: #000000;
    padding: 10px;
    margin-top: 10px;
}

.adres-list .accordion .card.active-adres {
    background-color: #00c76a;
    color: #ffffff;
}

.adres-list .accordion .card.active-adres::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    font-weight: 900;
    left: 3px;
    width: 20px;
    line-height: 20px;
    margin-top: 13px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 25px;
    top: 0;
    background-color: #00c76a;
    color: #ffffff;
}

.adres-list .accordion .card.active-adres button {
    background-color: #ffffff;
}

.adres-list .accordion .card.active-adres .adres-name {
    padding-left: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 19px;
    max-width: 190px;
}

.adres-list .accordion .card.active-adres .adres-city {
    padding-left: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 19px;
    max-width: 190px;
}

.adres-list .accordion .adres-name {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 19px;
    max-width: 190px;
}

.adres-list .accordion .adres-city {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 19px;
    max-width: 190px;
}

.app-modal4-div .adres-list .accordion {
    max-height: 350px;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow-y: auto;
}

.app-modal4-div .adres-list .accordion.accordion-height-change {
    height: auto;
}

.alert-modal1.x10-adimpara-modal img {
    margin-bottom: 0;
    width: 70px;
    background-color: #defeff;
    border-radius: 50%;
    padding: 10px;
}

.alert-modal1.x10-adimpara-modal .modal-t3 {
    font-size: 16px;
}

.alert-modal1.x10-adimpara-modal .modal-t3 b {
    font-size: 16px;
}

.alert-modal1.x10-adimpara-modal .modal-t4 {
    color: #ff4e00;
    font-size: 17px;
}

.alert-modal1 .modal-t3 {
    font-size: 15px;
}

.app-modal1b .alert-modal1 .modal-emoji-div {
    margin-bottom: 10px;
}

.adres-list .accordion {
    text-align: left !important;
}

.adres-list .accordion .card.add-adres {
    text-align: center;
    background-color: #ffffff;
}

.adres-list .accordion .card.add-adres button {
    width: 100%;
    text-align: center;
    background: #ffffff;
    height: 100%;
}

.adres-list .accordion .card.add-adres i {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 19px;
    background-color: #ededed;
    padding: 0px 12px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
}

.adres-list .accordion .card {
    background-color: #ffffff;
    border: 1px solid #ededed;
    border-radius: 10px;
    padding: 5px 10px;
    margin-bottom: 15px;
    position: relative;
    box-shadow: 0px 0px 8px 0px rgb(235 235 235);
}

.adres-list .accordion .card button {
    border: 0;
}

.adres-list .accordion .card .card-body {
    padding: 10px;
    margin-top: 10px;
    text-align: left;
}

.adres-list .accordion .card .card-top {
    position: relative;
}

.big-info-modal b {
    margin-bottom: 10px;
    display: block;
}

.big-info-modal .change-step-btn {
    width: 200px;
    background-color: #e40000;
}

.big-info-modal .change-step-btn:active {
    background-color: #e40000 !important;
}

.big-info-modal .energy-full-btn:active {
    background-color: #04ab5f !important;
}

.big-info-modal .energy-full-btn {
    width: 200px;
    background-color: #04ab5f;
}

.sms-modal .countdown {
    color: #019fa3;
    font-size: 15px;
    font-weight: 600;
}

.sms-modal .countdown-div {
    display: flex;
    align-items: center;
}

.sms-modal .countdown-div .countdown-text {
    padding-right: 5px;
}

.sms-modal .ref-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.sms-modal .ref-div p {
    margin: 0;
}

.search {
    width: 100%;
    position: relative;
    display: flex;
}

.searchTerm {
    width: 100%;
    height: 40px;
    border-radius: 25px;
    outline: none;
    color: #212529;
    -webkit-appearance: none;
    background-color: #ffffff;
    resize: none;
    padding: 5px 15px;
    border: 0;
    font-size: 15px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.searchButton {
    width: 40px;
    height: 40px;
    background: transparent;
    text-align: center;
    border: 0;
    color: #b3b3b3;
    border-radius: 0px 10px 10px 0px;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 15px;
}

.searchClose {
    width: 40px;
    height: 40px;
    background: transparent;
    text-align: center;
    border: 0;
    color: #b3b3b3;
    border-radius: 0px 10px 10px 0px;
    cursor: pointer;
    font-size: 20px;
    position: absolute;
    right: 15px;
}

.stats-page .social-nav .nav-tabs .nav-item.show .nav-link,
.stats-page .nav-tabs .nav-link.active {
    color: #000000 !important;
    background: rgb(255 255 255) !important;
}

.stats-page .app-tabs .nav-tabs {
    margin-top: 15px;
}

.social-nav .nav-tabs .nav-item.show .nav-link,
.social-nav .nav-tabs .nav-link.active {
    color: #ffffff;
    background: rgb(255 78 0);
    border: 0;
    border-radius: 15px;
}

.social-nav .nav-item {
    font-size: 13px;
    position: relative;
    width: 25%;
}

.lig-nav .nav-item span,
.social-nav .nav-item span {
    position: absolute;
    background: #ff5216;
    font-size: 10px;
    color: #ffffff;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-weight: 700;
    top: -9px;
    right: 10px;
}

.social-nav .nav-tabs {
    background-color: #ffffff;
    border: 2px solid #ffffff;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.activity-tab .app-btn {
    margin-top: 30px;
    margin-bottom: 30px;
}

.activty-ul {
    padding: 0;
    margin: 0;
}

.activty-ul a {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.activty-ul li {
    list-style-type: none;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 5px 10px;
    position: relative;
    margin-bottom: 20px;
    display: flex;
    z-index: 9;
    height: 65px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    align-items: center;
}

.activty-ul li .location-activity {
    font-weight: 400;
    padding-bottom: 5px;
    color: #5c5c5c;
    display: block;
}

.activty-ul li .location-activity i {
    padding-right: 4px;
}

.activty-ul li .h-activity {
    font-weight: 500;
    display: -webkit-inline-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
    width: 175px;
}

.activty-ul li .h-activity.start-activity {
    color: #06ab5f;
}

.follow-request .activty-ul li .h-activity {
    display: block;
    margin-bottom: 8px;
}

.follow-request .activty-ul li {
    height: 100px;
}

.activty-ul li .date-activity-div {
    text-align: right;
    width: 135px;
    display: flex;
    align-items: center;
}

.activty-ul li .date-activity {
    display: block;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}

.activty-ul li i {
    color: #ff4e00;
    padding-right: 8px;
    font-size: 16px;
}

.activty-ul li .date-activity img {
    width: 25px;
}

.social-page .search-bar-open-div .search-list-item {
    margin-bottom: 15px;
}

.social-page .search-bar-open-div .search-list-item .friends ul {
    margin: 0;
}

.social-page .search-bar-open-div .search-list-item .friends ul li {
    margin: 0;
}

.social-page .follow-request {
    border-bottom: 1px solid #e1e1e1;
    margin-bottom: 1rem;
}

.social-page .follow-request-line-none {
    border: 0;
}

.social-page .follow-request .users-piece {
    margin-bottom: 15px;
    display: block;
    margin-top: 25px;
    font-weight: 500;
    font-size: 12px;
}

.social-page .follow-request .accept-follower {
    background-color: #009ea2;
    color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    font-size: 12px;
    width: 65px;
    font-weight: 500;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}

.social-page .follow-request .delete-follower {
    background-color: #909090;
    color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    font-weight: 500;
    width: 45px;
    font-size: 12px;
    display: inline-block;
    text-align: center;
}

.social-page .friends ul.follow-request li .name {
    width: 130px;
}

.social-page .follow-request .request-select {
    position: absolute;
    right: 15px;
}

.social-page.league-page .friends {
    height: 100vh;
    overflow: auto;
    padding-bottom: 300px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.social-page.league-page .friends::-webkit-scrollbar {
    display: none;
}

.social-page.league-page .friends ul {
    height: auto;
    overflow: hidden;
    padding: 0;
}

.activty-detail h2 {
    font-size: 17px;
    font-weight: 500;
    padding-bottom: 8px;
    margin: 0;
    text-align: center;
}

.activty-detail p {
    font-size: 16px;
    font-weight: 300;
    padding-bottom: 5px;
    margin: 0;
    text-align: center;
}

.activty-detail .activty-detail-span {
    display: block;
    margin-bottom: 2px;
    margin-top: 15px;
    color: #009ea2;
    font-weight: 500;
    font-size: 14px;
}

.activty-detail .date-div {
    width: 200px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.activty-detail .date {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    padding-top: 5px;
}

.activty-detail .add-calendar-activty {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: 15px;
    font-size: 13px;
    color: #ffffff;
    font-weight: 500;
    background: #b4b4b4;
    border-radius: 15px;
    padding: 8px 10px;
    width: 150px;
}

.activty-detail .add-calendar-activty i {
    margin-right: 5px;
    font-size: 18px;
}

.activty-detail .date i {
    color: #ff4e00;
    padding-right: 6px;
    font-size: 20px;
}

.activty-detail .clock {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 16px;
    padding-top: 20px;
}

.activty-detail .clock i {
    color: #ff4e00;
    padding-right: 8px;
    font-size: 28px;
}

.activty-detail .creative-activty-user {
    font-size: 14px;
    margin-top: 15px;
    display: block;
}

.activty-detail .creative-activty-user b {
    font-weight: 500;
}

.activty-detail .users {
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 20px;
    margin: 0;
    display: block;
    margin-top: 10px;
}

.activty-detail .activity-date-live {
    font-size: 13px;
    font-weight: 500;
    margin: 0;
    display: block;
    margin-top: 10px;
    text-align: right;
}

.activty-detail .users b {
    font-weight: 500;
}

.new-profile-page .profile-chart {
    margin-top: 35px;
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    background-color: #ffffff;
    padding: 20px 10px;
    border-radius: 25px;
}

.new-profile-page .profile-header-wrap .profile-code {
    font-size: 14px;
    font-weight: 500;
    display: block;
    text-align: center;
    margin-bottom: 13px;
}

.new-profile-page .profile-header-wrap .profile-code b {
    margin-left: 5px;
    background-color: #ffca22;
    padding: 3px 8px;
    border-radius: 10px;
}

.new-profile-page .profile-follow-accept-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    background-color: white;
    padding: 10px 15px;
    border-radius: 25px;
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.new-profile-page .profile-follow-accept-btn .followers-name-div {
    width: 50%;
    font-size: 13px;
    font-weight: 600;
}

.new-profile-page .profile-follow-accept-btn .followers-name-div .text-btn {
    font-weight: 400;
}

.new-profile-page .profile-follow-accept-btn .btn-div {
    width: 50%;
    text-align: right;
    font-size: 13px;
}

.new-profile-page .profile-follow-accept-btn .btn-div .accept-btn-profile {
    background-color: #009ea2;
    color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    font-weight: 500;
    font-size: 13px;
    width: 65px;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}

.new-profile-page .profile-follow-accept-btn .btn-div .reject-btn-profile {
    background-color: #b4b4b4;
    color: #ffffff;
    padding: 5px;
    font-weight: 500;
    border-radius: 15px;
    width: 45px;
    font-size: 13px;
    display: inline-block;
    text-align: center;
}

.new-profile-page .profile-name {
    font-weight: 500;
    margin-top: 8px;
    font-size: 17px;
}

.new-profile-page .profile-header {
    display: block;
    margin: 0 auto;
    margin-bottom: 15px;
    max-width: 100%;
}

.new-profile-page .profile-header .pp-div {
    position: relative;
    width: max-content;
    margin: 0 auto;
}

.new-profile-page .profile-header .pp-div .medal-item {
    width: 65px;
    right: -15px;
    position: absolute;
    bottom: -10px;
}

.new-profile-page .profile-header-wrap .follow-btn {
    color: #ffffff;
    background: #009ea2;
    border-radius: 25px;
    padding: 5px 10px;
    font-size: 14px;
    width: 165px;
    font-weight: 500;
    text-align: center;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    height: 36px;
}

.new-profile-page .profile-header-wrap .share-btn {
    color: #ffffff;
    background: #ffffff;
    border-radius: 25px;
    font-size: 14px;
    text-align: center;
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    max-width: 100%;
    height: 36px;
    box-shadow: 0px 0px 4px 3px rgb(235 235 235);
}

.new-profile-page .profile-header-wrap .challenge-btn {
    background-color: #ffffff;
    border: 1px solid #ffffff;
    color: #20acb0;
    font-weight: 500;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    max-width: 100%;
    margin: 0 5px;
    box-shadow: 0px 0px 4px 3px rgb(235 235 235);
}

.new-profile-page .profile-header-wrap .challenge-btn.waiting {
    background-color: #ffbf00;
    color: #000000;
    border: 1px solid #ffbf00;
}

.new-profile-page .profile-header-wrap .challenge-btn.reject {
    background-color: #e42727;
    color: #ffffff;
    border: #e42727;
}

.new-profile-page .profile-header-wrap .challenge-btn.started {
    background-color: #14c257;
    color: #ffffff;
    border: #14c257;
}

.new-profile-page .profile-header-wrap .challenge-btn.lock {
    background-color: #cbcbcb;
    color: #ffffff;
    border: #cbcbcb;
}

.new-profile-page .profile-header-wrap .challenge-btn img {
    fill: #20acb0;
    width: 24px;
}

.new-profile-page .profile-header-wrap .share-btn img {
    width: 22px;
}

.new-profile-page .profile-header-wrap .edit-btn {
    color: #ffffff;
    background: rgb(0 158 162);
}

.new-profile-page .profile-header-wrap .unfollow-btn {
    color: #ffffff;
    background: #b4b4b4;
}

.new-profile-page .profile-header-wrap .waiting-btn {
    color: #ffffff;
    background: #ffbf00;
    border-radius: 25px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    width: 150px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    height: 33px;
}

.new-profile-page .profile-header .profile-picture {
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    text-align: center;
    width: 130px;
    height: 130px;
    font-size: 50px;
    align-items: center;
    justify-content: center;
}

.new-profile-page .profile-header .followers-info-div {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.new-profile-page .profile-header .my-followers {
    text-align: center;
    margin-right: 35px;
}

.new-profile-page .profile-header .my-followers:last-child {
    margin-right: 0px;
}

.new-profile-page .profile-header .my-followers .span1 {
    display: block;
    font-weight: 900;
    font-size: 22px;
    margin-bottom: 2px;
}

.new-profile-page .profile-header .my-followers .span2 {
    display: block;
    font-weight: 400;
    font-size: 13px;
    color: #535353;
}

.new-profile-page .profile-header .edit-btn i {
    padding-right: 2px;
}

.new-profile-page .profile-step {
    margin-top: 30px;
    display: flex;
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    background-color: #ffffff;
    padding: 10px 5px;
    border-radius: 25px;
}

.new-profile-page .medals-div {
    margin-top: 35px;
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    background-color: #ffffff;
    padding: 20px 5px;
    border-radius: 25px;
}

.medals-div .title {
    display: block;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: #009ea2;
    margin-bottom: 5px;
}

.medals-div .box {
    width: 33.3%;
    text-align: center;
    padding: 10px;
    position: relative;
}

.medals-div .box .img-div {
    position: relative;
}

.medal-page .medals-div .medals-div-inside .img-div{
    padding: 10px;
}

.medal-page .medals-div .medals-div-inside .img-div a{
    padding: 10px;
}

.medals-div .medals-div-inside {
    display: flex;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}

.new-profile-page .medals-div .medals-div-inside {
    margin-bottom: 10px;
}

.medals-div .img-div img {
    width: 90px;
}

.medals-div .img-div b {
    position: absolute;
    right: 0;
    bottom: 15px;
    background: #ff5216;
    color: #ffffff;
    font-weight: revert;
    border-radius: 25px;
    font-size: 14px;
    min-width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 2px;
    left: 0;
    width: max-content;
}

.medals-div .img-div.lock-item img {
    -webkit-filter: grayscale(100%);
    /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.medals-div .img-div.lock-item a {
    background-color: #c0c0c0;
}

.medals-div .box span {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-top: 6px;
}

.medals-div .box span b {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #009ea2;
}

.new-profile-page .user-link {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 17px;
    justify-content: center;
    margin-top: 10px;
}

.new-profile-page .user-link i {
    font-size: 22px;
    color: #009ea2;
    margin-left: 7px;
}

.new-profile-page .profile-hidden {
    text-align: center;
    color: #4a4a4a;
    margin-top: 25px;
}

.new-profile-page .profile-hidden i {
    display: block;
    font-size: 40px;
    margin-bottom: 8px;
}

.new-profile-page .profile-hidden .span1 {
    display: block;
    font-size: 17px;
    margin-bottom: 5px;
    font-weight: 500;
}

.new-profile-page .profile-hidden .span2 {
    display: block;
    font-size: 15px;
}

.new-profile-page .profile-step .profile-step-box {
    list-style-type: none;
    position: relative;
    z-index: 9;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
    width: 33.3%;
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
}

.new-profile-page .profile-step .profile-step-box .span1 {
    display: block;
}

.new-profile-page .profile-step .profile-step-box .span1 {
    display: block;
    font-weight: 500;
    font-size: 13px;
    margin-top: 4px;
    text-align: l;
}

.new-profile-page .profile-step .profile-step-box .span2 {
    display: block;
    font-weight: 600;
    font-size: 20px;
    color: #ff4e00;
}

.lig-nav .nav-tabs .nav-item.show .nav-link,
.lig-nav .nav-tabs .nav-link.active {
    color: #ffffff;
    background: rgb(255 78 0);
    border: 0;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lig-nav .nav-tabs {
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    border: 2px solid #ffffff;
}

.lig-nav .nav-tabs {
    margin-top: 0;
}


.lig-nav .league-arrows-bottom {
    margin-left: 5px;
}

.lig-nav .target-svg {
    width: 16px;
    margin-left: 5px;
}

.lig-nav .nav-item {
    font-size: 13px;
    padding: 7px 0;
    position: relative;
    width: 33.33%;
}

.remove-followers-modal .alert-followers {
    font-size: 16px;
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
    display: block;
}

.remove-followers-modal .remove-followers {
    display: block;
    width: max-content;
    background: #ff0000;
    margin-bottom: 10px;
    max-width: 100%;
}

.remove-followers-modal .protect-followers {
    display: block;
    width: max-content;
    max-width: 100%;
}

.form-page .add-user-activty {
    color: #ffffff;
    background: rgb(255 78 0);
    border-radius: 15px;
    font-size: 14px;
    padding: 7px 17px;
    font-weight: 500;
    display: inline-block;
    box-shadow: none;
    margin-bottom: 1rem;
    border: 0;
}

.form-page .friends {
    max-height: 280px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.add-activty-modal .friends {
    max-height: 270px;
    margin-top: 20px;
    margin-bottom: 10px;
    overflow-y: auto;
}

.modal-add-adres-btn {
    padding: 7px 15px;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #000000;
    border-radius: 5px;
    display: inline-block;
    font-size: 14px;
    background-color: #eef2f3;
    font-weight: 500;
    border-radius: 25px;
}

.add-activty-modal .friends label {
    display: block;
}

.add-activty-modal .friends .form-check-inline {
    margin: 0;
}

.app-modal1 .close-btn {
    background: #909090;
    color: #ffffff;
}

.app-modal1 .modal-footer {
    border: 0;
    padding-top: 0;
}

.activty-detail .friends {
    max-height: 280px;
    margin-bottom: 10px;
    position: relative;
    overflow-y: auto;
}

.activty-detail.activty-detail-end .friends {
    margin-top: 15px;
}

.activty-detail .step-count {
    position: absolute;
    right: 32px;
    font-weight: 600;
    color: #ff4e00;
    padding-bottom: 2px;
    font-size: 14px;
}

.activty-detail.activty-detail-end .users {
    padding-bottom: 0px;
}

.friends .users-piece {
    margin-bottom: 15px;
    display: block;
    margin-top: 0;
    font-weight: 500;
    font-size: 12px;
}

.new-profile-page .profile-header-wrap .profile-buttons-div {
    display: flex;
    justify-content: center;
    padding: 5px;
    width: 100%;
}

.league-number-modal p {
    padding: 0;
}

.follow-btn-friends {
    color: #ffffff;
    background: #009ea2;
    width: 33px;
    height: 33px;
    text-align: center;
    position: absolute;
    right: 20px;
    border-radius: 50%;
    line-height: 31px;
}

.follow-btn-friends img {
    width: 15px;
}

.send-btn-friends {
    color: #ffffff;
    background: #ffbf00;
    width: 33px;
    height: 33px;
    text-align: center;
    position: absolute;
    right: 20px;
    border-radius: 50%;
    line-height: 31px;
}

.send-btn-friends img {
    width: 15px;
}

.follow-btn-friends i {
    font-size: 20px;
    color: #b9b9b9;
}

.unfollow-btn-friends {
    color: #ffffff;
    background: #00c78c;
    width: 33px;
    height: 33px;
    text-align: center;
    position: absolute;
    right: 20px;
    border-radius: 50%;
    line-height: 31px;
}

.lock-btn-friends {
    color: #ffffff;
    background: #cbcbcb;
    width: 33px;
    height: 33px;
    text-align: center;
    position: absolute;
    right: 20px;
    border-radius: 50%;
    line-height: 31px;
}

.lock-btn-friends img {
    width: 15px;
}

.unfollow-btn-friends img {
    width: 15px;
}

.league-page .challenge-league {
    height: 100vh;
    overflow: auto;
    padding-bottom: 350px;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.league-page .challenge-league::-webkit-scrollbar {
    display: none;
}

.league-page .challenge-league .challenge-text span {
    font-size: 16px;
    text-align: center;
    display: block;
    margin-bottom: 15px;
    margin-top: 30px;
}

.league-page .challenge-league .challenge-request {
    height: auto;
    padding: 0;
}

.league-page .challenge-league .title-challenge1 {
    margin-bottom: 15px;
    display: block;
    margin-top: 15px;
    font-weight: 500;
    text-align: center;
    font-size: 14px;
}

.league-page .challenge-league .users-piece {
    margin-bottom: 15px;
    display: block;
    margin-top: 15px;
    font-weight: 500;
    font-size: 12px;
}

.league-page .friends.continue-challenge ul {
    height: auto;
    padding-bottom: 0;
}

.continue-challenge ul li .step-div {
    position: absolute;
    right: 20px;
    top: 18px;
    font-size: 13px;
}

.challenge-end-page .friends ul li .name {
    width: 135px;
}

.challenge-end-page .card-body {
    padding: 0;
}

.challenge-end-page .continue-challenge:first-child .users-piece {
    margin: 5px 0;
    margin-top: 20px;
}


.challenge-end-page .continue-challenge li {
    padding: 5px;
    margin: 10px 0;
    background-color: #ffffff;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
}

.challenge-end-page .continue-challenge {
    background-color: transparent;
    border-bottom: 1px solid #dbdbdb;
    border-radius: 0;
    padding: 0 5px;
}

.challenge-end-page .continue-challenge ul {
    padding-bottom: 10px;
}

.challenge-end-page .continue-challenge:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.challenge-end-page .continue-challenge:last-child {
    border: 0;
}

.challenge-end-page .continue-challenge .end {
    background-color: #96e9cb;
}

.challenge-end-page .users-piece {
    margin: 10px 0;
    display: block;
}

.end-challenge .winner {
    background-color: #96e9cb;
}

.league-page .friends .end-challenge ul:first-child {
    padding-top: 0;
}

.friends .end-challenge-out {
    margin-top: 30px;
}


.league-page .friends .end-challenge ul {
    height: auto;
    padding: 20px 0;
    border-bottom: 1px solid #d2d2d2;
}

.league-page .friends .end-challenge ul li:last-child {
    margin-bottom: 0;
}

.continue-challenge {
    background-color: #96e9cb;
    border-radius: 25px;
    margin-bottom: 20px;
}

.continue-challenge ul li {
    box-shadow: none;
    margin: 10px;
}

.league-page .challenge-league .challenge-request .request-select {
    position: absolute;
    right: 15px;
}

.league-page .challenge-league .challenge-request .accept-follower {
    background-color: #009ea2;
    color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    font-size: 12px;
    width: 65px;
    font-weight: 500;
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}

.league-page .challenge-league .challenge-request .delete-follower {
    background-color: #909090;
    color: #ffffff;
    padding: 5px;
    border-radius: 15px;
    font-weight: 500;
    width: 65px;
    font-size: 12px;
    display: inline-block;
    text-align: center;
}

.league-page .step-count {
    position: absolute;
    right: 75px;
    font-weight: 600;
    color: #ff4e00;
    font-size: 14px;
    padding-bottom: 2px;
}

.league-page .friends ul {
    height: 100vh;
    padding-bottom: 300px;
    overflow: auto;
    margin: 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.league-page .friends ul::-webkit-scrollbar {
    display: none;
}


.league-page .friends ul.follow-request {
    height: auto;
    padding-bottom: 0;
    overflow: hidden;
    margin: 0;
    margin-bottom: 30px;
}

.league-page .friends ul li .name {
    width: 120px;
}

.league-page .friends.duello-challenge2 {
    margin-bottom: 25px;
}

.league-page .friends.duello-challenge2 ul {
    height: auto;
    padding-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 10px 0px rgb(235 235 235);
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px 5px;
    margin: 5px;
    overflow: hidden;
    margin-bottom: 15px;
    position: relative;
}

.league-page .friends.duello-challenge2 ul li {
    display: block;
    background-color: transparent;
    text-align: center;
    height: auto;
    box-shadow: none;
    margin-bottom: 0;
    border-radius: 0;
    width: 33.3%;
}

.league-page .friends.duello-challenge2 .draw-icon {
    width: 50px;
    position: absolute;
    top: 0;
}

.league-page .friends.duello-challenge2 ul li .profile-picture {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    margin-bottom: 5px;
    font-size: 22px;
}

.league-page .friends.duello-challenge2 ul li .list-picture-img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    margin-left: 0 !important;
    margin-bottom: 5px;
    font-size: 22px;
}

.league-page .friends.duello-challenge2 ul li .name {
    margin-left: 0;
    font-size: 12px;
}

.league-page .friends.duello-challenge2.duello-end ul li .name-div .step-div {
    margin-left: 0;
    color: #ef0000;
}

.league-page .friends.duello-challenge2 .winner-finish-text {
    font-size: 15px;
    font-weight: 700;
    color: #0dc28d;
    background-color: rgb(13 194 141 / 20%);
    border-radius: 25px;
    padding: 5px 10px;
}

.league-page .friends.duello-challenge2 .date-end {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 11px;
}

.league-page .friends.duello-challenge2 .lose-finish-text {
    font-size: 15px;
    font-weight: 700;
    color: #ef0000;
    background-color: rgb(239 0 0 / 20%);
    border-radius: 25px;
    padding: 5px 10px;
}

.league-page .friends.duello-challenge2 ul li.winner-challenge .name-div .step-div {
    color: #0dc28d;
}

.league-page .friends.duello-challenge2 ul li.draw-challenge .name-div .step-div {
    color: #ffa700;
}

.league-page .friends.duello-challenge2 li {
    width: 30%;
}

.league-page .friends.duello-challenge2 .progress-area {
    width: 40%;
}

.league-page .friends.duello-challenge2 .progress-area .vs-img {
    width: 36px;
    display: block;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 8px;
}

.league-page .friends.duello-challenge2 .progress-area .step-winner {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    color: #0dc28d;
    font-weight: 500;
}

.league-page .friends.duello-challenge2 .progress-area .step-draw {
    display: block;
    font-size: 13px;
    margin-top: 8px;
    color: #ffa700;
    font-weight: 500;
}


.league-page .friends.duello-challenge2 .progress-area .step-lose {
    display: block;
    font-size: 13px;
    margin-top: 5px;
    color: #ef0000;
    font-weight: 500;
}

.league-page .friends.duello-challenge2 ul li .name-div .step-div {
    color: #009ea2;
    margin-left: 0;
}

.league-page .friends.duello-challenge2 ul li .end-cup {
    position: absolute;
    right: 5px;
    width: 40px;
    top: 0;
}

.league-page .friends.duello-challenge2 .progress-area .progress {
    height: 10px;
    border-radius: 25px;
}

.league-page .friends.duello-challenge2 .progress-area .bg-winner {
    background-color: #0dc28d;
}

.league-page .friends.duello-challenge2 .progress-area .bg-lose {
    background-color: #ef0000;
}


.izle-kazan-modal .video-modal-img {
    background: linear-gradient(0deg, rgb(252 167 51) 0%, rgb(254 213 133) 50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: -55px;
    line-height: 67px;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img {
    background: transparent;
    border-radius: initial;
    width: 110px;
    height: 80px;
    margin: 0 auto;
    position: relative;
    margin-top: -55px;
    line-height: normal;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .modal-t1 {
    color: #ffb300;
    font-size: 22px;
    padding: 0;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 10px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul {
    list-style-type: none;
    padding: 0;
    justify-content: space-between;
    display: flex;
    align-items: center;
    width: 100%;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul li .day {
    font-size: 9px;
    font-weight: 600;
    margin-top: 3px;
    margin-bottom: 0;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .watching .win {
    color: #009a53;
    display: block;
    font-weight: 800;
    margin-bottom: 0;
    margin-top: 5px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .watching .win i {
    color: #009a53;
    font-size: 16px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .wait-watch .win {
    color: #bfbfbf;
    display: block;
    font-weight: 800;
    margin-bottom: 0;
    margin-top: 5px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus ul .wait-watch .win i {
    color: #bfbfbf;
    font-size: 16px;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .watching span {
    color: #008547;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .info-text {
    background-color: #fff0b6;
    border-radius: 25px;
    padding: 5px 10px;
    margin-bottom: 15px;
}

.app-modal1b .izle-kazan-modal.yeni-modal-bonus .info-text a {
    font-weight: 600;
    color: rgb(255 78 0);
    padding: 5px 0;
    text-decoration: underline;
    display: block;
}

.yeni-modal-bonus .lock-daily-bonus {
    margin: 0;
    font-size: 50px;
    color: #dadada;
}

.yeni-modal-bonus .error-text-bonus {
    margin: 0;
    margin-top: 10px;
    font-weight: 500;
    color: #000000;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .wait-watch i {
    color: #bfbfbf;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .wait-watch span {
    color: #878787;
}

.yeni-modal-bonus .clock-bonus {
    position: absolute;
    top: 8px;
    left: 8px;
    display: flex;
    font-weight: 900;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.yeni-modal-bonus .clock-bonus span {
    font-weight: 900;
    padding-left: 3px;
    display: block;
    font-size: 11px;
    margin: 0;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 15px;
    left: 0;
    background-color: #ffe994;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    bottom: 3px;
}

.izle-kazan-modal.yeni-modal-bonus .video-modal-img img {
    margin-bottom: 0;
    width: 70px;
    z-index: 999;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: 10px;
}

.app-modal1b .izle-kazan-modal .modal-t1 {
    color: #000000;
    font-size: 18px;
    padding-top: 10px;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.izle-kazan-modal .video-modal-img img {
    margin-bottom: 0;
    width: 43px;
}

.izle-kazan-modal p {
    padding: 0;
}

.app-modal1b img {
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 10px;
}

.app-modal1b .modal-t1 {
    color: #ff4e00;
    font-size: 17px;
    padding-top: 10px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.app-modal1b .modal-content {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
}


.extra-bonus-page {
    text-align: center;
}

.extra-bonus-page .app-btn {
    background: rgb(255, 181, 0);
    background: linear-gradient(79deg, rgba(255, 181, 0, 1) 0%, rgba(255, 207, 0, 1) 93%);
    animation: myfirst5 1.8s infinite;
}

@keyframes myfirst5 {
    0% {
        background: #ffd000;
    }

    50% {
        background: #ffbb00;
    }

    100% {
        background: #ffd000;
    }
}


.extra-bonus-page .list-video {
    margin-bottom: 15px;
}

.extra-bonus-page .list-video i {
    font-size: 35px;
    margin: 0 2px;
}

.extra-bonus-page .list-video .watching {
    color: #009a53;
    animation: myfirst4 1.4s infinite;
}

@keyframes myfirst4 {
    0% {
        color: #009a53;
    }

    50% {
        color: #00ca6c;
    }

    100% {
        color: #009a53;
    }
}


.extra-bonus-page .list-video .wait-watch {
    color: #bfbfbf;
}

.extra-bonus-page .extra-bonus-banner {
    background-image: url(../img/load-icon.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 41%;
    background-color: #e8e8e8;
}

.extra-bonus-page .extra-bonus-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
}


.extra-bonus-page .video-modal-img {
    background: linear-gradient(0deg, rgb(252 167 51) 0%, rgb(254 213 133) 50%);
    border-radius: 50%;
    width: 70px;
    height: 70px;
    margin: 0 auto;
    margin-top: -55px;
    line-height: 67px;
}

.extra-bonus-page .extra-bonus-t1 {
    color: #ffb000;
    font-size: 18px;
    padding-top: 10px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.extra-bonus-page .extra-bonus-t2 {
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 10px;
    display: block;
}

.extra-bonus-page .video-modal-img img {
    margin-bottom: 0;
    width: 43px;
}

.extra-bonus-page p {
    padding: 0;
}


.app-modal2 .modal-content {
    border-radius: 10px;
    border: 0;
    margin-top: 25%;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.app-modal1b img {
    display: inline-block;
    margin: 0 auto;
    margin-bottom: 10px;
}

.app-modal1b .modal-t1 {
    color: #ff4e00;
    font-size: 17px;
    padding-top: 10px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
}

.app-modal1b .modal-content {
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: inherit;
}


.izle-kazan-modal .list-video {
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.izle-kazan-modal .list-video i {
    font-size: 25px;
    display: block;
    margin: 0 2px;
}

.izle-kazan-modal .list-video .watching {
    color: #009a53;
}

.izle-kazan-modal .list-video .wait-watch {
    color: #bfbfbf;
}

.izle-kazan-modal .list-video li {
    position: relative;
}

.izle-kazan-modal .list-video li:last-child i {
    font-size: 45px;
}

.izle-kazan-modal.yeni-modal-bonus .list-video .today-watch span {
    color: #009ea2;
}

.izle-kazan-modal .today-watch-div {
    width: 27px;
    height: 27px;
    position: relative;
    background-color: #009ea2;
    border-radius: 50%;
    margin: 0 auto;
}

.izle-kazan-modal .today-watch-div img {
    width: 15px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.izle-kazan-modal .end-watch-div {
    width: 27px;
    height: 27px;
    position: relative;
    background-color: #bfbfbf;
    border-radius: 50%;
    margin: 0 auto;
}

.izle-kazan-modal .end-watch-div img {
    width: 15px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.izle-kazan-modal li:last-child .today-watch-div {
    width: 47px;
    height: 47px;
}

.izle-kazan-modal li:last-child .today-watch-div img {
    width: 24px;
}

.izle-kazan-modal li:last-child .end-watch-div {
    width: 47px;
    height: 47px;
}

.izle-kazan-modal li:last-child .end-watch-div img {
    width: 24px;
}



.izle-kazan-modal .list-video .last-stars-div {
    position: absolute;
    top: -19px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside {
    display: flex;
    position: relative;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside i {
    font-size: 16px;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon1 {
    font-size: 13px;
    position: absolute;
    top: 7px;
    left: -4px;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}

.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}


.izle-kazan-modal .list-video .last-stars-div .last-stars-inside .star-icon3 {
    font-size: 13px;
    position: absolute;
    top: 7px;
    right: -4px;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}


.izle-kazan-modal.yeni-modal-bonus .list-video .crown-i {
    position: absolute;
    top: -29px;
    left: 0;
    color: #ffc800 !important;
    font-size: 26px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.izle-kazan-modal.yeni-modal-bonus p {
    margin: 4px 0;
    font-size: 14px;
}

.izle-kazan-modal.yeni-modal-bonus p:first-child {
    font-weight: 600;
}

.acitve-bonus-x2 {
    color: white;
    background-color: #ff4200;
    width: 295px;
    display: flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
}

.index-top-info-box.adimpara-sifirlanma {
    color: #009ea2;
    background-color: #eefaff;
    width: 295px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid #93d5d7;
    font-weight: 700;
    font-size: 13px;
}

.index-top-info-box.adimpara-sifirlanma span {
    padding: 10px;
    right: 10px;
    display: block;
}

.index-top-info-box.adimpara-sifirlanma .close-btn {
    position: absolute;
    right: 0;
    font-size: 14px;
    color: #666666;
    top: -10px;
    background-color: #ffffff;
    border-radius: 25px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #93d5d7;
}

.page-top-alert-box {
    color: #000000;
    background-color: #dddddd;
    width: 295px;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-top-alert-box img {
    width: 20px;
    margin-left: 3px;
}

.index-top-info {
    margin-bottom: 40px;
    margin-top: 0;
}

.index-top-info-box {
    border-radius: 10px;
    font-size: 12px;
    text-align: center;
    font-weight: 500;
    padding: 8px 5px;
    margin: 0 auto;
    margin-bottom: 10px;
    border-radius: 25px;
}

.index-top-info-box.active-btn-alert {
    background-color: #009ea2;
    color: #ffffff;
    width: max-content;
    padding: 4px 30px;
    animation: alertanimate 1s infinite;
}

.league-page .league-refresh-waiting {
    margin-top: 20px;
}

.league-page .league-refresh-waiting span {
    text-align: center;
    display: block;
    color: #009ea2;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -1px;
}

.league-page .league-refresh-waiting span b {
    display: block;
    font-weight: 700;
    color: #ff4e00;
    font-size: 26px;
}

.league-page .league-refresh-waiting img {
    width: 270px;
    display: block;
    margin: 0 auto;
    margin-top: 5px;
    max-width: 100%;
}

@keyframes alertanimate {
    0% {
        background: #00bb64;
    }

    50% {
        background: #00d471;
    }

    100% {
        background: #00bb64;
    }
}

.activity-start-home {
    color: white;
    background-color: #00b562;
    width: 295px;
    display: flex;
    align-items: center;
    max-width: 100%;
    justify-content: center;
}

.activity-start-home img {
    width: 20px;
    margin-left: 5px;
}

.sale-product-home {
    color: white;
    background-color: #00bec3;
    width: 295px;
    display: flex;
    align-items: center;
    max-width: 100%;
    justify-content: center;
}

.sale-product-home img {
    width: 20px;
    margin-left: 5px;
}

.acitve-bonus-x2 img {
    width: 20px;
    margin-left: 5px;
}

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

    50% {
        transform: scale(1.3);
    }

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

.ptr--ptr {
    box-shadow: none !important;
}

.new-profile-page .profile-header-wrap .follow-btn:active {
    background: #028994;
}

.follow-btn-friends:active {
    background: #028994;
}

.banner-getmoney .banner-bottom3 {
    text-align: center;
}

.banner-getmoney .getmoney-bottom {
    display: inline-block;
    position: relative;
}

.banner-getmoney .getmoney-bottom a {
    display: block;
    margin: auto;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    border-radius: 25px;
    background-color: #00b562;
    z-index: -1;
    animation: myfirst 1.8s infinite, leaves 1.8s ease-in-out infinite alternate;
    background-size: 300% 300%;
}

@keyframes myfirst {
    0% {
        background: #00b562;
    }

    50% {
        background: #00d471;
    }

    100% {
        background: #00b562;
    }
}

@keyframes leaves {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }

    50% {
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
    }

    100% {
        transform: scale(1.1);
        -webkit-transform: scale(1.0);
    }
}



.banner-getmoney .money-banner {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #009a53;
    font-size: 14px;
    margin-top: 5px;
    position: absolute;
    right: 0;
}

.banner-getmoney .money-banner i {
    font-size: 13px;
}

.banner-getmoney .money-banner .money {
    margin-left: 3px;
    font-weight: 900;
    color: #009a53;
    display: inline-flex;
    align-items: flex-end;
}

.banner-getmoney .money-banner span .small-money {
    margin-left: 0;
    font-size: 10px;
}

.introjs-button:active {
    background: #028994 !important;
}

.new-profile-page .profile-follow-accept-btn .btn-div .accept-btn-profile:active {
    background: #028994;
}

.app-btn:active {
    background: #028994;
}


.new-profile-page .profile-follow-accept-btn .btn-div .reject-btn-profile:active {
    background: rgb(144, 144, 144);
}

.social-page .follow-request .delete-follower:active {
    background: rgb(144, 144, 144);
}

.unfollow-btn-friends:active {
    background: #aaaaaa;
}

.social-page .follow-request .accept-follower:active {
    background: #028994;
}

.new-profile-page .profile-header-wrap .unfollow-btn:active {
    background: #e70000;
}

.remove-followers-modal .remove-followers:active {
    background: #e70000;
}

.new-profile-page .profile-header-wrap .waiting-btn:active {
    background: #f0b400;
}

.send-btn-friends:active {
    background: #f0b400;
}

.activty-detail .add-calendar-activty:active {
    background: rgb(144, 144, 144);
}

.friends ul li .list-unfollow-btn:active {
    color: #515151;
    border: 1px solid #cbcbcb;
    background-color: #dddddd;
}


.form-page .add-user-activty:active {
    background: #e54600;
}

.invite-page .invite-info-text {
    font-size: 15px;
}

.invite-page .friends ul li .name {
    width: 160px;
}

.followers-page .search {
    margin-bottom: 25px;
}

.app-modal-bottom .modal-dialog {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
}

.app-modal-bottom2 .modal-dialog {
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 0;
    right: 0;
}

.app-modal-bottom2 .app-btn {
    display: inline-block;
    width: auto;
    min-width: 150px;
}

.app-modal-bottom2 .icon-modal-div {
    background-color: #ffffff;
    display: block;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    padding: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -20px;
}

.app-modal-bottom2 .icon-modal-div img {
    width: 50px;
}

.app-modal-bottom2 .modal-content {
    border-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border: 0;
}

.app-modal-bottom2 .modal-body {
    padding-bottom: 100px;
    padding-top: 70px;
}

.agreement-page {
    padding-top: 15px;
    font-size: 14px;
}

.agreement-page p {
    margin-bottom: 8px;
}

.agreement-page ol {
    margin-bottom: 8px;
    padding-inline-start: 30px;
}

.agreement-page ul {
    padding-inline-start: 30px;
}

.green-dot i {
    color: #0f9e30;
    font-size: 16px;
    margin-right: 3px;
}

.yellow-dot i {
    color: #e4ad08;
    font-size: 16px;
    margin-right: 3px;
}

.red-dot i {
    color: #ce1022;
    font-size: 16px;
    margin-right: 3px;
}

.snowflakes {
    position: absolute;
    color: #009a53;
    font-size: 30px;
}

#site {
    width: 100%;
    height: 100vh;
    position: absolute;
    overflow: hidden;
    top: 0;
}

.loader-wrap {
    position: fixed;
    height: 100%;
    width: 100%;
    background-color: #fafafa;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999999999999;
    opacity: 1;
    padding-top: env(safe-area-inset-top, 30px);
    background-image: url(../img/bg2.png);
    background-size: 70% auto;
    background-repeat: repeat;
    background-position: top;
    background-attachment: fixed;
}

.banner1 .loader-wrap img {
    top: 50%;
    transform: translateY(-50%);
}

.banner1 .loader-wrap {
    background-color: transparent;
    opacity: 1;
}

.circle-div {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
}

.loader-wrap img {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 45%;
    transform: translateY(-45%);
    width: 60px;
}

.circle-loader {
    border: 5px solid #e2e2e2;
    border-left-color: #009ea2;
    animation: loader-spin 1.2s infinite linear;
    display: inline-block;
    border-radius: 50%;
    width: 105px;
    height: 105px;
    background-color: #e9e9e9;
}

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

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

/* DARK THEME */

body.dark-theme {
    background-color: #14202b;
    color: #ffffff;
}

.dark-theme .product-detail .product-price {
    color: #12ca74;
}

.dark-theme .brands-follow-page .brands-box .notification-product {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.dark-theme .sticky-header {
    background-color: #14202b;
}

.dark-theme .navbar .menu-right .money-menu {
    background-color: #253138;
    color: #11ca74;
    box-shadow: none;
}

.dark-theme .navbar .menu-right .first-div span {
    color: #11ca74;
}

.dark-theme .counter-div .total-step .total-h {
    color: #ffffff;
}

.dark-theme .banner1 {
    background-color: #1e3040;
    box-shadow: none;
}

.dark-theme .menu-bottom {
    background-color: #14202b;
    border-top: 1px solid #32434c;
}

.dark-theme .menu-bottom .center-home {
    box-shadow: none;
}

.dark-theme .menu-bottom a {
    color: #bdddde;
}

.dark-theme .menu-bottom .active-menu-bottom::after {
    color: #bdddde;
}

.dark-theme .banner1 .banner-bottom {
    background-color: transparent;
}

.dark-theme .banner1 .banner-bottom2 .product-play i {
    color: #00b0b5;
}

.dark-theme .banner1.banner-active .banner-bottom2 .product-play i {
    color: #b7b7b7;
}

.dark-theme .banner1 .banner-bottom2 .product-play2 i {
    color: #1d3040;
}

.dark-theme .banner1 .banner-bottom .banner-count {
    color: #ffffff;
}

.dark-theme .banner1.banner-active .banner-name {
    color: #12ca74;
}

.dark-theme .banner-shop .fav-div {
    box-shadow: none;
}

.dark-theme .banner-shop .notification-product {
    box-shadow: none;
}

.dark-theme .info-app {
    box-shadow: none;
    background-color: #1e3040;
}

.dark-theme .stats-page .nav-tabs {
    background-color: #1e3040;
    border: 2px solid #1e3040;
}

.dark-theme .friends ul li {
    background-color: #1e3040;
}

.dark-theme .nav-drill {
    background: #14202b;
}

.dark-theme .menu-overlay {
    background: rgba(95, 95, 95, .5);
}

.dark-theme .form-page .form-control {
    background-color: #1e3040;
    border-color: #1e3040;
}

.dark-theme .form-page.profile-page .form-control {
    background-color: #263035;
    color: #696969;
    border-radius: 10px;
    border-color: #263035;
}

.dark-theme .form-page.profile-page2 .form-control {
    color: #ffffff;
}

.dark-theme .form-page.profile-page2 .form-control {
    background-color: #1e3040;
}

.dark-theme .none-banner-div p {
    color: white;
}

.dark-theme .brands-follow-page .brands-box {
    background-color: #1e3040;
    box-shadow: none;
}

.dark-theme .brands-follow-page .brands-box img {
    background-color: #ffffff;
    padding: 2px;
}

.dark-theme .banner-bottom .banner-summary a {
    color: #ffffff;
}

.banner-summary {
    font-size: 14px;
}

.dark-theme .contact-page .contact-box a {
    color: #eefaff;
    border: 1px solid #eefaff;
}

.dark-theme .introjs-tooltip {
    background-color: #000000 !important;
}

.dark-theme .introjs-arrow.top {
    border-bottom-color: #000000 !important;
}

.dark-theme .introjs-arrow.top-right {
    border-bottom-color: #000000 !important;
}

.dark-theme .introjs-helperLayer {
    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px, rgb(255 255 255 / 20%) 0px 0px 0px 5000px !important;
}

.dark-theme .nav-drill .dark-mod {
    border-top: 1px solid #32434c;
}

.dark-theme .banner1 .banner-bottom2 .product-play2 {
    background-color: #01b0b5;
}

.dark-theme .product-detail .more-info-div .accordion {
    color: #ffffff;
}

.dark-theme .navbar .menu-right-product .fav-a {
    box-shadow: none;
}

.dark-theme .bg-icon {
    opacity: 0.1;
}

.dark-theme .loader-wrap {
    background-color: #000000;
    opacity: 0.9;
}

.refresh-wrap {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: #fafafa;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999999999999;
    opacity: 0.95;
}

.refresh-wrap1 .circle-div {
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: auto;
    transform: initial;
    text-align: center;
}

.refresh-wrap1 img {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 45%;
    transform: translateY(-45%);
    width: 25px;
}

.refresh-wrap1 .circle-loader {
    border: 3px solid #e2e2e2;
    border-left-color: #e2e2e2;
    animation: loader-spin 1.2s infinite linear;
    display: inline-block;
    border-radius: 50%;
    width: 65px;
    height: 65px;
}

.refresh-wrap1 .circle-div::after {
    width: 45px;
    height: 45px;
    background-image: url(../img/load.svg);
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    content: "";
    animation: none;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 9px;
}

.refresh-wrap2 .circle-div {
    position: relative;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: auto;
    transform: initial;
    text-align: center;
}

.refresh-wrap2 img {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 45%;
    transform: translateY(-45%);
    width: 25px;
}

.refresh-wrap2 .circle-loader {
    border: 3px solid #e2e2e2;
    border-left-color: #009ea2;
    animation: loader-spin 1.2s infinite linear;
    display: inline-block;
    border-radius: 50%;
    width: 65px;
    height: 65px;
}

.refresh-wrap2 .circle-div::after {
    width: 45px;
    height: 45px;
    background-image: url(../img/walking.gif);
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    content: "";
    animation: none;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 9px;
}

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

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

.ptr--ptr.ptr--pull.ptr--release {
    padding-top: 160px;
    margin-bottom: -85px;
}

.ptr--ptr.ptr--refresh {
    padding-top: 160px;
    margin-bottom: -85px;
}

.company-signature {
    font-size: 13px;
    text-align: center;
    display: flex;
    color: black;
    justify-content: center;
    align-items: center;
    z-index: 9;
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    bottom: -60px;
}

.company-signature span {
    padding: 0 3px;
    font-weight: 900;
    display: flex;
    align-items: flex-end;
}

.company-signature span img {
    width: 85px;
    margin-left: 2px;
}

.heart {
    fill: red;
    position: relative;
    width: 13px;
    margin-left: 3px;
    animation: pulse 1.2s ease infinite;
    margin-bottom: 2px;
}

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

    50% {
        transform: scale(1.3);
    }

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

.product-summary-total-div.medal-bottom-piece .text1 .img-div img{
    display: block;
    width: 42px;
}

.product-summary-total-div.medal-bottom-piece .text1 .img-div b{
    color: #009a53;
    font-size: 15px;
    display: block;
}

.product-summary-total-div.medal-bottom-piece .text1 .summary-img{
    display: flex;
    align-items: center;
    text-align: center;
}

.product-summary-total-div {
    display: flex;
    justify-content: center;
}

.product-summary-total-div .text1 {
    margin-right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-summary-total-div .text1 .summary-img {
    font-weight: bold;
    color: #009ea2;
    margin: 0 7px;
    display: block;
}

.product-summary-total-div .text1 .summary-img img {
    width: 40px;
}

.product-detail .product-summary-detail-text {
    text-align: center;
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: 400;
    font-size: 15px;
    padding-bottom: 20px;
}

.product-detail .star-item-text {
    background-color: #ffcf00;
    border-radius: 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 15px;
    margin-bottom: 20px;
    font-weight: 900;
}

.product-detail .star-item-index-text {
    background-color: #fff4c0;
    border-radius: 0;
    width: max-content;
    max-width: 100%;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    padding: 10px 15px;
    margin-bottom: 10px;
    color: #ff9c00;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
}

.product-detail .star-item-index-text i {
    margin-right: 3px;
    animation: myfirst3 1.5s infinite;
}

.product-detail .star-item-index-content {
    background-color: #fff4c0;
    border-radius: 10px;
    width: max-content;
    max-width: 100%;
    justify-content: center;
    margin: 0 auto;
    padding: 5px 10px;
    margin-bottom: 10px;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
}

.product-detail .star-item-index-content p {
    margin: 10px 0;
    font-weight: 500;
    padding: 0;
    font-size: 13px;
    color: #ff9c00;
}


.product-detail .star-item-text b {
    font-weight: 400;
    margin-right: 3px;
}

.product-detail .product-summary-detail-text b {
    font-weight: 500;
}

.product-detail .product-summary-detail-text i {
    font-size: 18px;
    color: #009ea2;
    background-color: #eaeaea;
    width: 35px;
    text-align: center;
    margin-left: 8px;
    height: 35px;
    line-height: 35px;
    padding: 0;
    display: inline-block;
}

.product-detail-summary .certificate-banner {
    margin-bottom: 10px;
}

.product-detail-summary .certificate-banner img {
    width: 300px;
    margin: 0 auto;
    display: block;
    max-width: 100%;
}

.product-detail-summary p b {
    padding-bottom: 0;
}

.product-detail-summary .banner1-img-div {
    margin-top: 0;
    margin-bottom: 15px;
}

.app-version {
    font-size: 13px;
    color: rgb(255 255 255 / 82%);
    position: absolute;
    bottom: 30px;
}

.close-modal-btn {
    margin-top: 15px;
    display: block;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    color: #212121;
}

.close-modal-btn-top {
    -webkit-box-shadow: 0px 0px 18px 0px rgb(110 110 110);
    -moz-box-shadow: 0px 0px 18px 0px rgba(110, 110, 110, 1);
    box-shadow: 0px 0px 18px 0px rgb(110 110 110);
    position: absolute;
    top: -20px;
    right: 5px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000000;
    background-color: #ffffff;
    z-index: 2;
}

.profile-picture-btn {
    display: block;
    padding: 10px;
    width: 100%;
    color: #000000;
    border-bottom: 1px solid #e2e2e2;
}

.profile-picture-btn:active {
    background-color: #e2e2e2;
}

.profile-picture-img {
    width: 130px;
    border-radius: 50%;
    height: 130px;
}

.list-picture-img {
    width: 33px;
    border-radius: 50%;
    height: 33px;
    margin-left: 6px !important;
}

.profile-edit-back-btn {
    width: 200px;
}

.save-btn-nav a {
    font-weight: 600;
    font-size: 15px;
    color: #009ea2;
}

label {
    display: inline-block;
    margin-bottom: .5rem;
    font-size: 13px;
    font-weight: 600;
}

.friends ul li.me-list {
    background-color: rgb(212 247 248);
}

.navbar .menu-right .first-div span .small-money {
    margin-left: 0;
    font-size: 11px;
    ;
}

.the-datepicker__deselect {
    display: none;
}

.the-datepicker__main .the-datepicker__close a.the-datepicker__button {
    padding: 10px;
}

.league-page-number {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    color: #009ea2;
}

.league-page-number span {
    font-size: 15px;
    font-weight: 600;
    margin-left: 15px;
    margin-right: 15px;
}

.league-page-number a {
    font-size: 20px;
    line-height: 40px;
    width: 40px;
    height: 40px;
    text-align: center;
}

.sss-detail {
    text-align: center;
    left: 0;
    right: 0;
    padding-bottom: 50px;
    width: 100%;
}

.sss-detail img {
    margin: 0 auto;
    width: 95%;
}

.sss-detail .sss-tutorial-item img {
    margin: 0 auto;
    width: 85%;
}

.sss-detail .slide-number {
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    background-color: #009ea2 !important;
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
    line-height: 35px !important;
}

.sss-detail .slide-text {
    font-weight: 400;
    margin-top: 10px;
    display: block;
    font-size: 18px;
    height: 45px;
    margin-bottom: 10px;
    padding: 0 12px;
}

.height-slide {
    line-height: 45px;
}

.sss-detail .carousel-control-prev {
    top: 50%;
    bottom: auto;
    font-size: 14px;
    opacity: 1;
    background: #009ea2;
    left: 10px;
    color: #ffffff;
    border-radius: 0.2em;
    padding: 0.5rem 1rem;
}

.sss-detail .carousel-control-next {
    top: 50%;
    bottom: auto;
    font-size: 14px;
    opacity: 1;
    background: #009ea2;
    right: 10px;
    color: #ffffff;
    border-radius: 0.2em;
    padding: 0.5rem 1rem;
}

.carousel-inner .carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    margin-top: 32px;
}

.wallet-page ul {
    padding: 0;
}

.wallet-page .wallet-box {
    padding: 15px 10px;
    display: flex;
    border-bottom: 1px solid #ececec;
    align-items: center;
}

.wallet-page .wallet-box:last-child {
    border-bottom: 0;
}

.wallet-page .wallet-box .box-info {
    display: flex;
    width: 80%;
    font-weight: 500;
    align-items: center;
}

.wallet-page .wallet-box .box-info .product {
    font-size: 13px;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wallet-page .wallet-box .box-info .detail-wallet {
    font-size: 13px;
    background-color: var(--warning);
    border-radius: 5px;
    padding: 3px 7px;
    margin-left: 7px;
}

.wallet-page .wallet-box .price-wallet {
    font-weight: 600;
    font-size: 15px;
    text-align: right;
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.wallet-page .wallet-box .price-wallet i {
    font-size: 22px;
}

.wallet-page .wallet-box.expense .price-wallet i {
    font-size: 20px;
    display: flex;
    margin-top: -11px;
    margin-right: 3px;
}

.wallet-page .wallet-box.income .price-wallet i {
    font-size: 20px;
    display: flex;
    margin-top: 11px;
    margin-right: 3px;
}

.wallet-page .wallet-box.expense .price-wallet {
    color: #ec0000;
}

.wallet-page .wallet-box.income .price-wallet {
    color: #00b160;
}

.game-modal .modal-content {
    background-color: transparent;
    width: 85%;
}

.game-modal .modal-body {
    padding: 0;
}

.game-modal .game-modal-container {
    /* position: fixed; */
    /* top: 46%; */
    /* left: 0; */
    width: 100%;
    /* font-size: 30px; */
    /* right: 0; */
    margin-top: 50px;
}

.game-modal .game-check-list {
    margin-bottom: 4%;
}

.game-modal .game-check-list .star {
    background-image: url(../img/star3.svg);
    width: 40px;
    height: 40px;
    display: inline-block;
}

.game-modal .game-check-list .star.star-active {
    background-image: url(../img/star2.svg);
}


.game-modal .app-btn {
    background: #ee8e00;
}

.game-modal img {
    margin: 0;
}

.outer {
    display: table;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    /* Whatever width you want */
}


.slider-home .owl-stage-outer {
    height: 240px;
}

.hour-bonus {
    text-align: center;
}

.hour-bonus .bonus-title {
    font-weight: 500;
    font-size: 15px;
    margin-right: 5px;
    display: block;
}

.hour-bonus-div {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 320px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.hour-bonus-div::-webkit-scrollbar {
    display: none;
}

.hour-bonus-div .bonus-box {
    display: inline-block;
    width: 95%;
    padding-bottom: 10px;
    padding-top: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    background-color: #e6e6e6;
    position: relative;
    height: 225px;
}

.hour-bonus-div .buy-bonus {
    display: inline-block;
    width: 95%;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    background-image: url(../img/bonus-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 0;
    position: relative;
    height: 225px;
}

.hour-bonus-div .completed-bonus {
    display: inline-block;
    width: 95%;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 10px;
    position: relative;
    text-align: center;
    background-image: url(../img/bonus-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 0;
    position: relative;
    height: 225px;
}

.hour-bonus-div .bonus-box.completed-bonus .hours-icon img {
    width: 110px;
}

.hour-bonus-div .bonus-box.completed-bonus .hour {
    color: #ffffff;
    font-weight: 500;
    font-size: 13px;
}

.hour-bonus-div .bonus-box .info-text {
    display: flex;
    white-space: normal;
    font-size: 13.5px;
    height: 65px;
    align-items: center;
}

.hour-bonus-div .bonus-box .hours-icon img {
    width: 85px;
}

.hour-bonus-div .buy-bonus .hours-icon img {
    width: 110px;
}

.hour-bonus-div .bonus-box .hours-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
}

.hour-bonus-div .bonus-box i {
    color: #009ea2;
    font-size: 50px;
    display: block;
    background-color: #ffffff;
    border-radius: 50%;
}

.hour-bonus-div .bonus-box .check i {
    color: #00b562;
    ;
}

.hour-bonus-div .bonus-box .disable-bonus i {
    color: #a9a8a5;
    ;
}

.hour-bonus-div .bonus-box .play-bonus {
    position: absolute;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
    bottom: -15px;
}

.hour-bonus-div .bonus-box i.watching {
    color: #03c96b;
}

.hour-bonus-div .bonus-box .hour {
    font-weight: bold;
    font-size: 13px;
    display: block;
}


.hour-bonus-div .bonus-box.buy-bonus .hour {
    color: #ffffff;
    font-weight: 500;
}

.hour-bonus-div .bonus-box .hour b {
    font-size: 15px;
    font-weight: 700;
}

.hour-bonus-div .bonus-box-disable {
    display: inline-flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.hour-bonus-div .bonus-box-disable .info-text {
    height: auto;
    padding-top: 10px;
}

.hour-bonus .get-bonus {
    display: inline-block;
    position: relative;
    margin-top: 10px;
}


.hour-bonus .get-bonus a {
    display: block;
    margin: auto;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff !important;
    border-radius: 25px;
    border: 3px solid white;
    background-color: #00b562;
    z-index: -1;
    animation: myfirst 1.8s infinite, leaves 1.8s ease-in-out infinite alternate;
    background-size: 300% 300%;
}

.hour-bonus .get-disable-bonus a {
    color: #a1a1a1 !important;
    border: 3px solid #dcdcdc;
    background-color: #dcdcdc;
    font-weight: 500;
    animation: none;
}

.hour-bonus-div .bonus-box .bonus-play.active-play i {
    color: #009ea2;
}

.hour-bonus .hour-bonus-bottom {
    display: block;
    font-weight: 800;
    font-size: 15px;
    color: #009ea2;
    margin-top: 8px;
}

.hour-bonus .hour-bonus-top {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.info-modal {
    border: 0;
    background-color: transparent;
    margin: 0;
    padding: 0;
    color: #ffb000;
    font-size: 20px;
}

.hour-bonus .bonus-progress .progress-inside {
    display: inline-flex;
    justify-content: center;
    border-radius: 25px;
    background-color: #cbcbcb;
}

.hour-bonus .bonus-progress .progress-inside span:first-child {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    width: 45px;
}

.hour-bonus .bonus-progress .progress-inside span:last-child {
    border-top-right-radius: 25px;
    width: 45px;
    border-bottom-right-radius: 25px;
    border-right: 1px solid #d1d1d1;
}

.hour-bonus .bonus-progress .progress-inside span {
    width: 43px;
    height: 43px;
    border: 1px solid #d1d1d1;
    background-color: #e6e6e6;
    border-right: 0;
    font-size: 18px;
    color: #a9a8a5;
    line-height: 43px;
}

.hour-bonus .bonus-progress .progress-inside .active-span {
    background-color: #ffffff;
    color: #00c86c;
}

.hour-bonus .bonus-progress img {
    width: 35px;
}

.hour-bonus .bonus-progress {
    display: flex;
    align-items: center;
    margin-top: 10px;
    justify-content: center;
}

.home-nav {
    display: flex;
    justify-content: center;
}

.home-nav .nav-tabs {
    border: 0;
}

.home-nav .nav-tabs .nav-link.active {
    background-color: #009ea2;
    color: #ffffff;
    font-size: 13px;
    margin: 0;
    height: 31px;
    line-height: 30px;
    padding: 0 15px;
    font-weight: 500;
    border-radius: 25px;
    border: 1px solid #009ea2;
    margin-right: 5px;
    margin-left: 5px;
    display: flex;
    align-items: center;
}

.home-nav .nav-tabs .nav-link .step-nav1:after {
    background-image: url(../img/walk-blue.svg);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    background-position: center;
    width: 11px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 2px;
    right: 0;
}

.home-nav .nav-tabs .nav-link.active .step-nav1:after {
    background-image: url(../img/walk-white.svg);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    background-position: center;
    width: 11px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 2px;
    right: 0;
}

.home-nav .nav-tabs .nav-link .step-nav1 {
    width: 64px;
    position: relative;
}

.home-nav .nav-tabs .nav-link .jump-nav2:after {
    background-image: url(../img/jump-blue.svg);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    background-position: center;
    width: 17px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 2px;
    right: 0;
}

.home-nav .nav-tabs .nav-link.active .jump-nav2:after {
    background-image: url(../img/jump-white.svg);
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
    background-position: center;
    width: 17px;
    height: 23px;
    position: absolute;
    display: inline-block;
    top: 2px;
    right: 0;
}

.home-nav .nav-tabs .nav-link .jump-nav2 {
    width: 80px;
    position: relative;
}

.home-nav .nav-tabs .nav-link .walk {
    width: 13px;
    padding-left: 3px;
}

.home-nav .nav-tabs .nav-link .jump {
    width: 19px;
    padding-left: 3px;
}

.home-nav .nav-tabs .nav-link {
    background-color: #ffffff;
    color: #009ea2;
    border: 1px solid #009ea2;
    font-size: 13px;
    margin: 0;
    height: 31px;
    line-height: 30px;
    padding: 0 15px;
    font-weight: 500;
    border-radius: 25px;
    margin-right: 5px;
    margin-left: 5px;
    display: flex;
    align-items: center;
}

/*.home-tab-content {
    height: 320px;
}*/

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.notifications-page ul {
    list-style-type: none;
    padding: 0;
}

.custom-control-label {
    margin-top: 4px;
}

.notifications-page ul li {
    padding: 8px 20px;
    border-radius: 0;
    margin-bottom: 15px;
    background-color: #f5f5f5;
}

.notifications-page .li-inside {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    font-weight: 500;
    font-size: 14px;
}

.notifications-page .hour-select-btn {
    border: 0;
    background-color: #dcdcdc;
    width: 70px;
    height: 35px;
    margin-left: auto;
    border-radius: 8px;
    display: block;
    font-weight: 500;
    margin-top: 12px;
    font-size: 14px;
}

.custom-switch {
    padding-left: 0;
    text-align: center;
}


.custom-switch .custom-control-label::before {
    width: 3.2rem;
    height: 28px;
    border-radius: 25px;
    background-color: #b0b0b0;
    border-color: #b0b0b0;
    left: 0;
    top: -3px;
    position: relative;
}

.custom-switch .custom-control-label::after {
    background-color: #ffffff;
    width: 22px;
    height: 22px;
    border-radius: 25px;
    top: 0;
    left: 4px;
}

.custom-switch .custom-control-input,
.custom-control-label::after {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.custom-switch .custom-control-input:checked~.custom-control-label::before {
    background-color: #009ea2;
    border-color: #009ea2;
}

.custom-switch .custom-control-input:checked~.custom-control-label::after {
    -webkit-transform: translateX(1.40rem);
    transform: translateX(1.40rem);
}

.modal-play-btn {
    margin-right: 0 !important;
    margin-left: 5px;
}

.delete-account-btn {
    background-color: #ff0000;
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 7px 15px;
    margin-top: 20px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 25px;
    color: #ffffff;
}

.delete-account-btn:hover{
    background-color: #de0000;
}

.delete-account-btn:focus {
    color: #ffffff;
}

.delete-account-btn:hover {
    color: #ffffff;
}

.delete-account-modal .modal-emoji-div {
    margin-top: -80px;
}

.delete-account-modal .modal-emoji-div img {
    margin-bottom: 0;
    width: 90px;
}

.delete-account-modal .delete-t1 {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    color: #000000;
    margin-top: 8px;
    font-weight: 500;
}

.delete-account-modal .delete-t2 {
    font-size: 14px;
    margin-bottom: 5px;
    display: block;
    color: #fe121a;
    font-weight: 600;
}

.delete-account-modal .modal-btn {
    background-color: #ff0000;
    width: max-content;
}

.delete-account-modal .modal-btn.disable-delete-btn {
    background-color: #c0c0c0;
}

.delete-account-modal label {
    font-weight: 400;
}

.delete-account-modal label b {
    font-weight: 600;
}

.delete-account-modal input {
    width: 80%;
    margin: 0 auto;
    margin-bottom: 15px;
    display: block;
}

.sss-tutorial-item {
    margin-bottom: 30px;
}

.privacy-list-p {
    padding-left: 15px;
}

.tutorial-page-body {
    overflow: hidden;
    padding-top: 0;
}

.first-tutorial {
    position: relative;
    background-color: #ffffff;
    min-height: 100vh;
}

.first-tutorial img {
    margin: 0 auto;
    height: 73vh;
    display: block;
}

.first-tutorial .exit-tutorial-div {
    width: 100%;
    background-color: transparent;
    height: 70px;
    position: absolute;
    z-index: 9;
}

.first-tutorial .exit-tutotiral {
    color: #000000;
    font-size: 14px;
    background-color: #e0e0e0;
    padding: 1px 10px;
    border-radius: 5px;
    font-weight: 500;
    z-index: 2;
    float: right;
    margin-top: 45px;
    margin-right: 15px;
}

.first-tutorial .sss-tutorial-item img {
    margin: 0 auto;
    width: 85%;
}

.first-tutorial .first-slide-wrap img {
    width: 100%;
}

.first-tutorial .first-slide-inside img {
    height: auto;
}


.first-tutorial .first-slide-wrap {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-tutorial .first-slide-inside {
    text-align: center;
}

.first-tutorial .first-slide-inside span {
    font-size: 34px;
    font-weight: 300;
    display: block;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #009ea2;
}

.first-tutorial .first-slide-inside span b {
    display: block;
    font-weight: 600;
}

.first-tutorial .first-slide2 .left-area {
    width: 100%;
}

.first-tutorial .first-slide2 a {
    text-align: center;
    font-size: 18px;
    background: #009ea2;
    color: #ffffff;
    font-weight: 400;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    width: 90%;
    margin-top: 30px;
    border-radius: 25px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first-tutorial .bg-icon {
    opacity: 0.04;
}

.first-tutorial .first-slide2 .tutorial-logo {
    width: 210px;
    margin-bottom: 30px;
    margin-top: 0;
}

.first-tutorial .exchange-svg {
    height: auto;
    width: 24px;
    display: inline-block;
    margin-left: 3px;
    margin-right: 4px;
    margin-top: -4px;
}

.first-tutorial .energy-i {
    color: #fdad01;
    font-size: 20px;
    margin-bottom: -4px;
    display: inline-block;
    margin-left: 3px;
    margin-right: 4px;
}

.first-tutorial .slide-number {
    display: block;
    border-radius: 50%;
    margin: 0 auto;
    color: #ffffff;
    font-weight: 800;
    font-size: 18px;
    background-color: #009ea2 !important;
    width: 35px !important;
    height: 35px !important;
    text-align: center !important;
    line-height: 35px !important;
    margin-bottom: 8px;
}

.first-tutorial .slide-text-div {
    height: 15vh;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: center;
    padding-bottom: 0;
}

.first-tutorial .last-item-carousel .slide-text-div {
    height: 10vh;
}

.first-tutorial .last-item-carousel img {
    height: 70vh;
}

.accept-tutorial-btn {
    left: 0;
    right: 0;
    text-align: center;
    font-size: 18px;
    background: #009ea2;
    color: #ffffff;
    font-weight: 400;
    width: 90%;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 43px;
    margin: 0 auto;
    margin-top: 15px;
}

.accept-tutorial-btn:hover {
    color: #ffffff;
}

.first-tutorial .slide-text {
    font-weight: 600;
    display: block;
    font-size: 19px;
    text-align: center;
    color: #039aa1;
    margin-bottom: 2px;
    margin-top: 2px;
}

.first-tutorial .carousel-control-prev {
    top: 50%;
    transform: translate(0, -50%);
    position: fixed;
    bottom: auto;
    font-size: 35px;
    opacity: 1;
    background: #ff5317;
    left: 0;
    color: #ffffff;
    border-radius: 0;
    padding: 5px;
    width: 40px;
    height: 62px;
}

.first-tutorial .carousel-control-next {
    top: 50%;
    transform: translate(0, -50%);
    position: fixed;
    bottom: auto;
    font-size: 35px;
    opacity: 1;
    background: #ff5317;
    right: 0;
    color: #ffffff;
    border-radius: 0;
    padding: 5px;
    width: 40px;
    height: 62px;
}

.first-slide-wrap2 {
    margin-top: -37px;
}

.first-slide-wrap2 .first-slide2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100vh;
}

.first-slide-wrap2 .first-slide2 ul {
    padding: 0;
    list-style-type: none;
    margin: 0 auto;
    max-width: 100%;
    width: 270px;
}

.first-slide-wrap2 .first-slide2 ul li {
    font-size: 24px;
    color: #00949a;
    font-weight: 300;
}

.first-slide-wrap2 .first-slide2 ul li span {
    display: flex;
    align-items: center;
}

.first-slide-wrap2 .first-slide2 ul li span img {
    width: 45px;
    margin: 0;
    margin-right: 10px;
}

.first-slide-wrap2 .first-slide2 .right-area {
    width: 35%;
}

.first-slide-wrap2 .first-slide2 img {
    width: 100%;
    height: auto;
}

.scroll-down {
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 100;
    margin: 0 auto;
    margin-bottom: 10px;
    margin-top: 10px;
    text-shadow: 0;
    width: 15px;
    height: 15px;
    border-bottom: 3px solid #009ea2;
    border-right: 3px solid #009ea2;
    z-index: 9;
    -webkit-transform: translate(-50%, 0%) rotate(45deg);
    -moz-transform: translate(-50%, 0%) rotate(45deg);
    transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 1.5s ease-in-out infinite;
    -moz-animation: fade_move_down 1.5s ease-in-out infinite;
    animation: fade_move_down 1.5s ease-in-out infinite;
}

/*animated scroll arrow animation*/

@-webkit-keyframes fade_move_down {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-moz-keyframes fade_move_down {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade_move_down {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.adv-banner {
    margin: 20px 0 50px 0;
    position: relative;
}

.adv-banner .banner-name {
    background-color: #ffffff;
    position: absolute;
    right: 0;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 25px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 500;
    bottom: -30px;
    color: #919191;
    left: 0;
    width: max-content;
    margin-left: auto;
    margin-right: auto;
}

.shop-top {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    background-color: #ffffff;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    border-radius: 25px;
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 13px;
}

.shop-top .filter-btn {
    padding: 10px 0;
    width: 50%;
    text-align: center;
    border-right: 1px solid #e7e7e7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-top .filter-btn i {
    color: #009ea2;
    font-size: 14px;
    margin-right: 5px;
}

.shop-top .list-btn {
    padding: 10px 0;
    width: 50%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.shop-top .list-btn select {
    border: 0;
    font-weight: 500;
    line-height: normal;
}

.shop-top .list-btn i {
    color: #009ea2;
    margin-right: 4px;
    font-size: 18px;
}

.content2-page {
    background-color: #ffffff;
    padding: 15px 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    font-weight: 500;
}

.yeni-modal-bonus span {
    font-size: 13px;
    font-weight: 400;
    margin-bottom: 15px;
    display: block;
}

.daily-bonus .daily-bonus-title {
    text-align: center;
    background-color: #fff0b6;
    border-radius: 25px;
    width: max-content;
    padding: 5px 10px;
    margin: 0 auto;
    margin-bottom: 5px;
}

.daily-bonus .daily-bonus-title span {
    display: block;
    font-weight: 600;
    font-size: 16px;
    margin: 5px 0;
}

.daily-bonus .alert-bonus {
    text-align: center;
    margin: 0;
    font-weight: 500;
    color: #000000;
    margin-top: 20px;
    margin-bottom: 10px;
}

.daily-bonus .alert-bonus span {
    display: block;
    font-size: 13px;
    margin: 5px 0;
}

.daily-bonus ul {
    padding: 0;
    list-style-type: none;
}

.daily-bonus ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 9px 0;
    margin: 0 auto;
    width: 300px;
    max-width: 100%;
}

.daily-bonus ul li.left {
    justify-content: flex-start;
}

.daily-bonus ul li.right {
    justify-content: flex-end;
}

.daily-bonus ul li.left:first-child:before {
    height: 47px;
}

.daily-bonus ul li.left:last-child .step-icon {
    font-size: 28px;
    width: 50px;
    height: 50px;
}

.daily-bonus ul li.left:last-child:before {
    height: 50px;
    left: 24px;
    bottom: 38px;
}

.daily-bonus ul li.left::before {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #009a53;
    height: 69px;
    left: 14px;
    bottom: 0px;
    z-index: -1;
}

.daily-bonus ul li.left::after {
    content: "";
    position: absolute;
    width: 62.4%;
    background-color: #009a53;
    height: 3px;
    left: 14px;
    bottom: -3px;
    z-index: -1;
}

.daily-bonus ul li.right::before {
    content: "";
    position: absolute;
    width: 3px;
    background-color: #009a53;
    height: 68px;
    right: 98px;
    bottom: -1px;
    z-index: -1;
}

.daily-bonus ul li.right::after {
    content: "";
    position: absolute;
    width: 62.4%;
    background-color: #009a53;
    height: 3px;
    left: 15px;
    bottom: -1px;
    z-index: -1;
}

.daily-bonus ul li:last-child::after {
    display: none;
}

.daily-bonus ul li .step-icon {
    font-size: 14px;
    color: #ffffff;
    background-color: #009a53;
    border-radius: 50%;
    padding: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.daily-bonus ul li:last-child {
    width: 320px;
    padding-top: 27px;
}

.daily-bonus ul li:last-child .step-icon {
    font-size: 45px;
}

.daily-bonus ul li span {
    display: block;
}

.daily-bonus ul li .step-text {
    margin-left: 20px;
    padding: 5px 10px;
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    width: 65px;
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
}

.daily-bonus ul li .day {
    font-weight: 600;
    text-align: center;
    display: block;
    margin-bottom: 3px;
    font-size: 15px;
    color: #000000;
}

.daily-bonus ul li .pay {
    font-weight: 900;
    color: #009a53;
    font-size: 15px;
    display: flex;
    align-items: center;
}

.daily-bonus ul li .pay i {
    margin-right: 5px;
}

.daily-bonus .last-stars-div {
    position: absolute;
    top: -10px;
    left: -1px;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.daily-bonus .last-stars-div .last-stars-inside {
    display: flex;
    position: relative;
}

.daily-bonus .last-stars-div .last-stars-inside i {
    font-size: 16px;
}

.daily-bonus .last-stars-div .last-stars-inside .star-icon1 {
    font-size: 13px;
    position: absolute;
    top: 0px;
    left: 2px;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}

.daily-bonus .last-stars-div .last-stars-inside .star-icon2 {
    position: absolute;
    top: -10px;
    left: 18px;
    margin-left: auto;
    margin-right: auto;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}


.daily-bonus .last-stars-div .last-stars-inside .star-icon3 {
    font-size: 13px;
    position: absolute;
    top: 0px;
    left: 38px;
    color: #ffd300;
    animation: myfirst3 1.5s infinite;
}

.daily-bonus .total-price {
    margin: 0 auto;
    display: flex;
    font-size: 13px;
    align-items: center;
    width: max-content;
    border-radius: 15px;
    padding: 4px 8px;
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    color: #000000;
    font-weight: 600;
}

.daily-bonus .total-price .pay {
    color: #009a53;
    font-size: 18px;
    margin-left: 6px;
}

.shop-menu {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    background-color: #ffffff;
    z-index: 9991;
    transform: translateX(100%);
    transition: all 0.3s ease 0s;
    padding: 15px;
}

.shop-menu .close-div {
    display: flex;
    align-items: center;
    height: 10vh;
}

.shop-menu .save-div {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.shop-menu .price-rank {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.shop-menu .price-rank li span {
    padding-right: 20px;
    display: block;
    font-size: 18px;
    color: #009a53;
    font-weight: 700;
}

.shop-menu .price-rank li {
    position: relative;
}

.shop-menu .price-rank li::after {
    content: "-";
    position: absolute;
    right: 6px;
    top: -3px;
    font-size: 22px;
    font-weight: 700;
    color: #009a53;
}

.shop-menu .price-rank li:last-child:after {
    display: none;
}

.shop-menu .price-rank li span i {
    color: #009a53;
}

.shop-menu .filter-title {
    font-weight: 500;
    font-size: 16px;
    display: block;
    margin-bottom: 15px;
    text-align: center;
}

.shop-menu .filter-group {
    padding-bottom: 20px;
    border-bottom: 1px solid #f3f3f3;
    margin-bottom: 20px;
}


.shop-menu .filter-group:last-child {
    border-bottom: 0;
}

.shop-menu .select-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.shop-menu .select-list li {
    border-bottom: 1px solid #e3e3e3;
}

.shop-menu .select-list li:last-child {
    border-bottom: 0;
}

.shop-menu .select-list a {
    padding-left: 32px;
    background-color: #f7f7f7;
    font-size: 14px;
    font-weight: 500;
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

.shop-menu .select-list a.active::before {
    position: absolute;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ffffff;
    padding: 3px;
    font-size: 10px;
    background-color: #009a53;
}

.shop-menu .select-list a::before {
    position: absolute;
    content: "";
    width: 16px;
    height: 16px;
    background-color: #e7e7e7;
    left: 6px;
}

.shop-menu .shop-close-btn {
    -webkit-box-shadow: 0px 0px 18px 0px rgb(210 210 210);
    -moz-box-shadow: 0px 0px 18px 0px rgba(210, 210, 210, 1);
    box-shadow: 0px 0px 18px 0px rgb(210 210 210);
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #000000;
    background-color: #ffffff;
    margin-right: 20px;
    margin-left: auto;
}

.shop-menu.active {
    transform: translateX(0%);
}

.shop-menu .shop-menu-category {
    display: flex;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}

.shop-menu .shop-menu-category li:first-child {
    margin-left: 0;
}

.shop-menu .shop-menu-category li {
    margin: 0 7px;
}

.shop-menu .shop-menu-category li a {
    padding: 7px 15px;
    background-color: #ffffff;
    position: relative;
    border-radius: 25px;
    display: block;
    font-weight: 600;
    font-size: 14px;
    -webkit-box-shadow: 0px 0px 6px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 6px 0px rgb(204 204 204);
}

.shop-menu .shop-menu-category li a.active::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 0;
    font-weight: 900;
    top: -8px;
    color: #009a53;
    font-size: 16px;
}

.shop-fist-page .category-list-div .category-box {
    display: flex;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    background-color: #ffffff;
    justify-content: space-evenly;
}

.shop-fist-page .category-list-div .category-box span {
    display: block;
    font-size: 16px;
    font-weight: 500;
    padding-top: 10px;
    padding-left: 6px;
    color: #009ea2;
}

.shop-fist-page .category-list-div .category-box img {
    width: 85px;
}

.category-shop {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
}

.category-shop .filter-btn {
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.category-shop .filter-btn img {
    width: 20px;
}

.category-shop ul {
    list-style-type: none;
    margin: 0;
    padding: 8px 5px;
    display: flex;
    align-items: center;
    width: 85%;
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.category-shop ul::-webkit-scrollbar {
    display: none;
}

.category-shop ul::-webkit-scrollbar {
    background-color: #dbdbdb;
    height: 3px;
}

.category-shop ul li:first-child {
    margin: 0;
    margin-right: 7px;
}

.category-shop ul li {
    margin: 0 7px;
}

.category-shop ul li a {
    padding: 7px 15px;
    background-color: #ffffff;
    position: relative;
    border-radius: 25px;
    display: block;
    font-weight: 600;
    font-size: 12px;
    -webkit-box-shadow: 0px 0px 6px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 6px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 6px 0px rgb(204 204 204);
}

.category-shop ul li a.star-product {
    animation: myfirst3 1.5s infinite;
}

.category-shop ul li a.active::before {
    content: "\f058";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    left: 0;
    font-weight: 900;
    top: -8px;
    color: #009a53;
    font-size: 16px;
}

.multi-range {
    width: 100%;
    height: 45px;
    position: relative;
    margin-bottom: 2em;
}

.multi-range__track {
    height: 10px;
    width: 100%;
    background: transparent;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
}

.multi-range__track-bg {
    height: 100%;
    width: 95%;
    background: #ccc;
    position: absolute;
    top: 0;
    left: 2.5%;
}

.multi-range__fill {
    height: 100%;
    width: 100%;
    background: #2994b2;
    background: linear-gradient(to right, #2994b2 0%, #91157e 100%);
    position: absolute;
    top: 0;
    left: 0;
}

.multi-range__handle {
    height: 100%;
    width: 5%;
    background: #343434;
    position: absolute;
    top: 50%;
    cursor: -webkit-grab;
    cursor: grab;
    transform: translateY(-50%);
    border-radius: 4px;
}

.multi-range__handle:focus:first-child {
    border: 3px solid #2994b2;
}

.multi-range__handle:focus:last-child {
    border: 3px solid #91157e;
}

.multi-range__ticks {
    height: 100%;
    width: 95%;
    background: transparent;
    position: absolute;
    top: 0;
    left: 2.5%;
    display: flex;
    justify-content: space-between;
}

.multi-range__tick {
    width: 2px;
    height: 100%;
    background: #fff;
}

.multi-range__labels {
    font-size: 14px;
    position: absolute;
    left: 2.5%;
    min-width: 100%;
    overflow: visible;
    top: calc(100% + 0.5em);
}

.multi-range__labels>.label {
    position: absolute;
    display: none;
}


.bonus-product-page ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
    margin: 0 auto;
}

.bonus-product-page ul li {
    margin-bottom: 15px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    border-radius: 10px;
    background-color: #ffffff;
    position: relative;
}

.bonus-product-page ul li a {
    width: 100%;
    font-weight: 500;
    font-size: 14px;
}

.bonus-product-page ul li a .products-title {
    display: block;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    padding: 10px;
    width: 75%;
}

.bonus-product-page ul li a .products-img {
    margin-bottom: 0;
    padding: 5px;
    padding-bottom: 0;
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.bonus-product-page ul li a .products-img img {
    border-radius: 10px;
}

.bonus-product-page .bottom-product {
    display: flex;
    align-items: center;
}

.bonus-product-page .bottom-product .active-product {
    width: 25%;
    background-color: #27d760;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-right: 10px;
    font-size: 11px;
    color: #ffffff;
}

.bonus-product-page .bottom-product .passive-product {
    width: 25%;
    background-color: #b6b6b6;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin-right: 10px;
    font-size: 11px;
    color: #ffffff;
}

.bonus-product-page ul li a .products-img .bonus-product-page ul li a .products-img img {
    border-radius: 10px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.bonus-product-detail-page .list-title {
    font-weight: 500;
    color: #ff4e00;
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
}

.bonus-product-detail-page .friends ul li {
    border-radius: 25px;
    padding: 5px 6px;
    margin-bottom: 14px;
    height: 50px;
}

.bonus-product-detail-page .friends ul li .number {
    width: 52px;
}

.bonus-product-detail-page .friends ul li .profile-picture {
    width: 33px;
    height: 32px;
    line-height: 33px;
    font-size: 11px;
}

.bonus-product-detail-page .list-picture-img {
    width: 35px;
    height: 35px;
}

.bonus-product-detail-page .friends ul li.winner {
    background-color: #a2f9c3;
    box-shadow: none;
}

.bonus-product-detail-page .friends ul li .date-div {
    margin-left: 8px;
    font-weight: 400;
    color: #ff4e00;
    font-size: 11px;
    margin-top: 5px;
}

.bonus-product-detail-page .friends ul li .date-div b {
    font-weight: 700;
    margin-right: 2px;
}

.bonus-product-detail-page .friends ul li .date-div span {
    margin-right: 10px;
}

.bonus-product-detail-page .products-top .products-box {
    position: relative;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    background-color: #ffffff;
    margin-bottom: 15px;
    padding: 5px;
    position: relative;
    max-width: 100%;
    display: flex;
    align-items: center;
}

.bonus-product-detail-page .products-top .products-box img {
    border-radius: 10px;
}

.star-content-page ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    font-weight: 400;
    font-size: 13px;
}

.star-content-page ul li {
    margin: 8px 0;
}

.star-content-page h2 {
    font-size: 14px;
    margin-top: 15px;
    font-weight: 500;
    margin-bottom: 0;
    text-align: center;
}

.star-content-page ul.list-gift {
    font-weight: 400;
    margin-top: 15px;
    font-size: 14px;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: 10px;
}

.star-content-page .app-btn {
    margin-top: 21px;
}

.friends ul li .emoji-div {
    display: flex;
    align-items: center;
    position: absolute;
    right: 65px;
    text-align: center;
}

.friends ul li .emoji-div .emoji-div-inside {
    margin-right: 2px;
}

.friends ul li .emoji-div .emoji-div-inside:last-child {
    margin-right: 0;
}

.friends ul li .emoji-div .emoji-div-inside .total span {
    font-size: 10px;
    font-weight: 600;
    width: 35px;
    display: block;
}

.friends ul li .emoji-div .emoji-div-inside .icon {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.friends ul li .emoji-div .emoji-div-inside img {
    width: 18px;
}

.friends ul li .emoji-div .emoji-div-inside.like img {
    width: 20px;
}

.friends ul li .emoji-div .emoji-div-inside.active.like .total span {
    color: #f9595f;
}

.friends ul li .emoji-div .emoji-div-inside.active.clapping .total span {
    color: #ffb100;
}

.friends ul li .emoji-tab {
    text-align: center;
    margin-right: 15px;
}

.friends ul li .emoji-tab .emoji-tab-img-div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.friends ul li .emoji-tab .emoji-tab-img-box {
    display: inline-block;
    line-height: normal;
}

.friends ul li .emoji-tab .emoji-tab-img-div img {
    width: 24px;
    display: block;
}

.friends ul li .emoji-tab span {
    font-weight: 700;
    font-size: 12px;
    display: block;
    padding-top: 5px;
}

.friends ul li .emoji-tab .like {
    color: #000000;
    font-weight: 800;
    font-size: 10px;
}

.friends ul li .emoji-tab .lock-like-btn {
    color: #a4a4a4;
}

.friends ul li .emoji-tab .lock-like {
    padding-top: 0;
}

.friends ul li .emoji-tab .lock-like img {
    height: 22px;
}

.friends ul li .emoji-tab .like-btn {
    color: #44a4ec;
}

.friends ul li .emoji-tab .love {
    color: #f9595f;
}

.friends ul li .emoji-tab .clapping {
    color: #fab30f;
}

.friends ul li .emoji-tab .run {
    color: #64dca0;
}

.emoji-modal .emoji-modal-inside {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
    z-index: 44;
}

.emoji-modal .emoji-modal-box {
    margin: 0 8px;
    width: 50px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.emoji-modal img {
    width: 40px;
}

.emoji-modal .modal-content {
    border-radius: 35px;
}

.emoji-modal .modal-body {
    padding: 0 10px;
}

.emoji-list-modal .nav {
    justify-content: space-between;
    flex-wrap: nowrap;
    border: 0;
    height: 6vh;
    align-items: center;
}

.emoji-list-modal .tab-content {
    height: 40vh;
    overflow: auto;
    position: relative;
    display: block;
}

.emoji-list-modal .friends ul li {
    height: 45px;
    margin: 10px;
}

.emoji-list-modal .nav .nav-link {
    border: 0;
    padding: 8px;
}

.emoji-list-modal .nav .nav-link.active {
    background-color: whitesmoke;
}

.emoji-list-modal .nav img {
    width: 20px;
}

.emoji-list-modal .nav span {
    font-weight: 600;
    font-size: 12px;
    margin-left: 4px;
}

.temin-ediliyor {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(208 240 244);
    color: #009ea1;
    font-weight: 600;
    border-radius: 10px;
    width: max-content;
    margin: 0 auto;
    font-size: 13px;
    padding: 6px 10px;
}

.temin-ediliyor svg {
    width: 26px;
    fill: #009ea1;
    margin-right: 5px;
    display: block;
}

.blog-box {
    background-color: #ffffff;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    padding: 10px;
    position: relative;
}

.blog-box .inside {
    /* display: flex; */
    /* align-items: center; */
    justify-content: center;
    position: relative;
}

.blog-box .img-div {
    border-radius: 10px;
    background-image: url(../img/load-icon.jpg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    height: 0;
    background-position-y: 50%;
    position: relative;
    padding-top: 63%;
    background-color: #e8e8e8;
}

.blog-box .img-div img {
    display: block;
    max-width: 100%;
    height: auto;
    width: 100%;
    position: absolute;
    top: 0;
}

.blog-box .info-div {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 10px;
    background-color: rgb(0 188 194 / 91%);
    color: #ffffff;
}

.blog-box .sponsor {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: #f7ce00;
    border-radius: 25px;
    padding: 5px;
    font-size: 11px;
    font-weight: 600;
}

.blog-box .info-div .title {
    font-size: 14px;
    font-weight: 400;
}

.blog-box .info-sm {
    display: flex;
    align-items: center;
    margin-top: 7px;
    font-size: 13px;
}

.blog-box .info-sm .tag {
    padding: 4px 9px;
    border-radius: 10px;
    display: block;
    width: max-content;
    font-weight: 500;
    background-color: #efefef;
    color: #000000;
}

.blog-box .info-sm .date {
    display: block;
    margin-left: 5px;
}

.blog-box .detail-blog h1 {
    font-size: 20px;
    margin-bottom: 10px;
}

.blog-box .detail-blog .info-sm {
    margin: 10px 0;
}

.blog-box .detail-blog {
    margin-top: 15px;
}

.blog-box .detail-blog p {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.blog-box .detail-blog h2 {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 15px;
}

.owl-stage {
    padding-left: 0 !important;
}

.home-blog .item {
    padding: 10px 7px;
}

.home-blog .slider-top-div {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px;
}

.home-blog .slider-top-div h2 {
    font-size: 16px;
    margin: 0;
}

.home-blog .slider-top-div .app-btn {
    width: max-content;
    padding: 0;
    margin: 0;
    margin-top: 5px;
    background-color: transparent;
    color: #000000;
    font-weight: 500;
    font-size: 13px;
}

.home-blog .blog-box .info-div .title {
    font-size: 13px;
}

.home-blog .blog-box .info-sm .tag {
    font-size: 11px;
}

.home-blog .blog-box .info-sm .date {
    font-size: 12px;
}

.blog-page.blog-detail-page .comment-blog {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 25px;
    margin-bottom: 10px;
}

.blog-page.blog-detail-page .comment-blog a {
    padding: 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    width: max-content;
    margin: 0 10px;
    align-items: center;
    justify-content: center;
    background-color: #edf9ff;
}

.blog-page.blog-detail-page .comment-blog a img {
    width: 20px;
    margin-right: 5px;
}

.blog-page.blog-detail-page .comment-blog a.active span {
    color: #0088ee;
}

.blog-page.blog-detail-page .blog-box {
    padding: 10px;
}

.blog-page .category-shop ul {
    width: 100%;
}

.blog-page .category-shop ul li {
    margin: 0 4px;
}

.home-blog {
    margin-right: -15px;
    margin-left: -5px;
    margin-bottom: 25px;
}

.challenge-end-page .card-header h2 {
    margin: 0;
}

.challenge-end-page .card {
    background-color: #ffffff;
    border-radius: 25px !important;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    padding: 5px;
    margin-bottom: 15px;
    border: 0;
}

.challenge-end-page .card-header {
    background: transparent;
    border: 0;
    padding: 0;
}

.challenge-end-page .card-header button {
    font-size: 15px;
    background-color: #e0f4f4;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    border-radius: 25px;
    width: 100%;
    display: block;
    color: #009ea2;
    outline: 0;
    border: 0;
}

.challenge-end-page ul {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
}


.challenge-end-page ul li.this-week {
    max-height: 55vh;
    overflow: auto;
}

.challenge-end-page ul li.this-week .date {
    margin-bottom: 20px;
}

.challenge-end-page ul li .date {
    font-size: 15px;
    background-color: #e0f4f4;
    text-align: center;
    padding: 10px 5px;
    font-weight: 600;
    border-radius: 25px;
    width: 100%;
    display: block;
    color: #009ea2;
}

.challenge-end-page ul li .text {
    display: block;
    text-align: center;
    padding-top: 10px;
}

.challenge-end-page ul li .text b {
    color: #00b31d;
    font-weight: 400;
}

.league-page .friends .first-league-table .first-league-table-bottom {
    display: flex;
    align-items: center;
    position: absolute;
    top: 8px;
    right: 10px;
}

.league-page .friends .first-league-table li {
    display: block;
    height: auto;
    margin-bottom: 20px;
}

.league-page .friends .first-league-table li .inside {
    display: flex;
    padding-bottom: 5px;
    padding-top: 5px;
}

.league-page .friends .first-league-table .lock-challenge-btn {
    background-color: #cbcbcb;
    border: 1px solid #cbcbcb;
    color: #ffffff;
    font-weight: 500;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.league-page .friends .first-league-table .lock-challenge-btn img {
    height: 22px;
}

.league-page .friends .first-league-table .challenge-btn {
    background-color: #d3fdff;
    border: 1px solid #d3fdff;
    color: #20acb0;
    font-weight: 500;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
}

.league-page .friends .first-league-table .challenge-btn img {
    fill: #20acb0;
    width: 20px;
}

.league-page .friends .first-league-table .challenge-btn.waiting img {
    fill: #000000;
}

.league-page .friends .first-league-table .challenge-btn.started img {
    fill: #ffffff;
}

.league-page .friends .first-league-table .challenge-btn.waiting {
    background-color: #ffbf00;
    color: #000000;
    border: 1px solid #ffbf00;
}

.league-page .friends .first-league-table .challenge-btn.started {
    background-color: #14c257;
    color: #ffffff;
    border: #14c257;
}

.league-page .friends .first-league-table .challenge-btn.reject {
    background-color: #e42727;
    color: #ffffff;
    border: #e42727;
}

.league-page .friends .first-league-table .challenge-btn.lock {
    background-color: #cbcbcb;
    color: #ffffff;
    border: #cbcbcb;
}

.league-page .friends .first-league-table .challenge-btn.reject svg {
    fill: #ffffff;
}

.new-profile-page .noth-options {
    background-color: #ffffff;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 2px rgb(235 235 235);
    margin-top: 35px;
    padding: 15px 0;
}

.new-profile-page .noth-options ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.new-profile-page .noth-options ul li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 auto;
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
    border-bottom: 1px solid #e4f0f0;
    max-width: 100%;
}

.new-profile-page .noth-options ul li:last-child {
    border-bottom: 0;
}

.new-profile-page .noth-options ul li span {
    display: flex;
    align-items: center;
}

.new-profile-page .noth-options ul li span img {
    width: 24px;
    margin-right: 5px;
}

.new-profile-page .noth-options .noth-title {
    text-align: center;
    display: block;
    padding-bottom: 10px;
    font-weight: 700;
}

.invite-page.invite-page-new p {
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 500;
}

.invite-page.invite-page-new p span {
    background-color: rgb(0 158 162 / 15%);
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #009ea2;
    margin-right: 5px;
    font-weight: bolder;
    font-size: 18px;
}

.invite-page.invite-page-new p b {
    font-weight: 600;
}

.invite-page.invite-page-new .invite-box {
    margin: 30px 0;
    border: 2px solid #009ea2;
    border-radius: 25px;
    justify-content: space-between;
    padding: 0 40px;
}

.invite-page.invite-page-new .invite-box .code-div label {
    display: block;
    padding: 0;
    margin: 0;
    text-align: left;
    color: #009ea2;
}

.invite-page.invite-page-new .invite-box .invite-icon {
    color: #009ea2;
    background-color: #ffffff;
    margin-left: 0;
    font-size: 22px;
}

.invite-page.invite-page-new .step-box-ul {
    list-style-type: none;
    padding: 0;
    margin-top: 40px;
}

.invite-page.invite-page-new .step-box-ul li {
    text-align: left;
    position: relative;
    width: 300px;
    padding-bottom: 50px;
    margin: 0 auto;
}

.invite-page.invite-page-new .step-box-ul li:last-child {
    padding-bottom: 0;
}

.invite-page.invite-page-new .step-box-ul li p:last-child {
    padding-bottom: 0;
}

.invite-page.invite-page-new .step-box-ul li.right:last-child p:last-child {
    width: 100%;
    text-align: right;
}

.invite-page.invite-page-new .step-box-ul li.left {
    text-align: left;
}

.invite-page.invite-page-new .step-box-ul li.right {
    text-align: right;
    margin-left: auto;
    padding-top: 50px;
}

.invite-page.invite-page-new .step-box-ul li.right p:last-child {
    text-align: left;
    margin-left: auto;
    width: 270px;
    max-width: 100%;
}

.invite-page.invite-page-new .step-box-ul li.left::before {
    content: "";
    position: absolute;
    width: 2px;
    height: 69px;
    left: 14px;
    bottom: 0px;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.left:first-child:before {
    height: 25px;
}


.invite-page.invite-page-new .step-box-ul li.left::after {
    content: "";
    position: absolute;
    width: 65%;
    height: 1px;
    left: 14px;
    bottom: -3px;
    z-index: -1;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.right::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    right: 90px;
    bottom: 4px;
    z-index: -1;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.right::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    right: 90px;
    top: 5px;
    z-index: -1;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.step3 {
    padding-top: 50px;
}


.invite-page.invite-page-new .step-box-ul li.step3::after {
    bottom: auto;
    top: 0;
    left: 15px;
}

.invite-page.invite-page-new .step-box-ul li.step3::before {
    bottom: auto;
    top: 5px;
    height: 25px;
}

.invite-page.invite-page-new .step-box-ul li.step4::after {
    bottom: auto;
    top: -26px;
    left: 15px;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li.step4::before {
    bottom: auto;
    top: 0;
    left: 15px;
    width: 65%;
    height: 0px;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step4 .step-after2 {
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    right: 90px;
    top: 0;
    z-index: -1;
    z-index: -1;
    border: 1px rgb(0 158 162 / 63%);
    border-style: dashed;
}

.invite-page.invite-page-new .step-box-ul li img {
    width: 30px;
    display: inline-block;
    margin-left: 2px;
}

.invite-page.invite-page-new .invite-btn {
    width: 250px;
    font-size: 18px;
    margin: 30px auto;
}

.invite-page.invite-page-new .friends ul {
    margin-top: 10px;
}

.app-modal1 .modal-btn.challenge-modal-btn {
    background-color: #d3fdff;
    border: 1px solid #d3fdff;
    color: #20acb0;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-modal-btn img {
    width: 26px;
    margin: 0;
    margin-right: 5px;
}

.app-modal1 .modal-btn.challenge-istek-modal-btn {
    background-color: #ffbf00;
    border: 1px solid #ffbf00;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-istek-modal-btn img {
    width: 26px;
    margin: 0;
    margin-right: 5px;
}

.app-modal1 .modal-btn.challenge-red-modal-btn {
    background-color: #e42727;
    border: 1px solid #e42727;
    color: #ffffff;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}

.app-modal1 .modal-btn.challenge-red-modal-btn img {
    width: 26px;
    margin: 0;
    margin-right: 5px;
}

.home-vote-box {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    -moz-box-shadow: 0px 0px 10px 0px rgba(204, 204, 204, 1);
    box-shadow: 0px 0px 10px 0px rgb(204 204 204);
    width: 300px;
    margin: 0 auto;
    margin-bottom: 25px;
}

.home-vote .vote-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    padding: 5px 0;
}

.home-vote ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.home-vote ul li {
    background-color: #eef2f3;
    border-radius: 25px;
    font-weight: 500;
    font-size: 16px;
    margin: 15px 0;
    position: relative;
    padding: 10px 15px;
    display: flex;
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
}

.home-vote ul li .text {
    display: block;
    z-index: 2;
    position: relative;
    font-size: 15px;
}

.home-vote ul li .ratio {
    font-size: 13px;
    font-weight: 900;
    position: relative;
    z-index: 2;
}

.home-vote ul li .background {
    display: none;
}

.home-vote ul li.active .background {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    top: 0;
    z-index: 1;
    left: 0;
    background-color: #0dd398;
    -webkit-animation: linear;
    -webkit-animation-name: run;
    -webkit-animation-duration: 1s;
    width: 100%;
    overflow: hidden;
}

.home-vote .home-vote-box.product-box ul {
    display: flex;
    align-items: center;
}

.home-vote .home-vote-box.product-box img {
    width: 200px;
    border-radius: 25px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.home-vote .home-vote-box.product-box ul li {
    display: block;
    text-align: center;
    margin: 10px;
    padding: 10px;
}

.home-vote .home-vote-box.product-box ul li.active {
    color: #ffffff;
}

.home-vote .home-vote-box.product-box ul li.active .background {
    animation: none;
}

.home-vote .home-vote-box.product-box.four-box {
    width: 100%;
}

.home-vote .home-vote-box.product-box.four-box ul li {
    margin: 5px;
    border-radius: 10px;
    width: 25%;
    text-align: center;
    background-color: #ffffff;
}

.home-vote .home-vote-box.product-box.four-box .active {
    background-color: #0dd398;
}


.home-vote .home-vote-box.product-box.four-box img {
    margin: 0 auto;
    width: 40px;
    display: block;
}

.quiz-modal-div {
    margin-bottom: 25px;
    background-color: #0dd398;
    text-align: center;
    padding: 10px 15px;
    border-radius: 10px;
    color: #ffffff;
    font-size: 16px;
}

.quiz-modal-div span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.quiz-modal-div img {
    width: 30px;
    margin-right: 6px;
}

@-webkit-keyframes run {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.home-story {
    margin-bottom: 20px;
}

.home-story ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    width: 100%;
    overflow: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.home-story ul::-webkit-scrollbar {
    display: none;
}

.home-story ul li {
    min-width: 70px;
    display: inline-flex;
    text-align: center;
    margin-right: 10px;
    font-size: 12px;
    font-weight: 500;
}

.home-story ul li a {
    display: block;
}

.home-story ul li a .img-div {
    border-radius: 50px;
    margin-bottom: 5px;
    overflow: hidden;
    position: relative;
    padding: 2px;
}

.home-story ul li a .img-div img {
    max-width: 100%;
    border-radius: 50px;
    border: 2px solid #ffffff;
}

.home-story ul li a .img-div::before {
    content: "";
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    z-index: -1;
    background: rgb(0, 123, 133);
    background: linear-gradient(308deg, rgb(0 158 162) 0%, rgb(0 200 205) 50%);
}

.home-story ul li span {
    display: block;
    font-weight: 500;
    font-size: 12px;
}

.home-story ul li:last-child {
    margin-right: 0;
}

.home-welcome-top {
    margin-bottom: 0;
    margin-top: -10px;
    width: max-content;
    background-color: #e2f6ff;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #aee6e8;
    display: flex;
    align-items: center;
}

.home-welcome-top .text1 {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
}

.home-welcome-top .text2 {
    font-size: 14px;
    color: #009ea2;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95px;
    display: inline-block;
    margin-left: 3px;
}

.story-modal1 .modal-content {
    border: 0;
}

.story-modal1 .modal-body {
    padding: 0;
}

.story-modal-div img {
    max-width: 100%;
    display: block;
}

.story-modal-div .slide {
    display: grid;
}

.story-modal-div .slide-items {
    position: relative;
    grid-area: 1/1;
    border-radius: 5px;
    overflow: hidden;
}

.story-modal-div .slide-nav {
    grid-area: 1/1;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
}

.story-modal-div .slide-nav button {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0;
}

.story-modal-div .slide-items>* {
    position: absolute;
    top: 0px;
    opacity: 0;
    pointer-events: none;
}

.story-modal-div .slide-items>.active {
    position: relative;
    opacity: 1;
    pointer-events: initial;
}

.story-modal-div .slide-thumb {
    display: flex;
    grid-column: 1 / 3;
}

.story-modal-div .slide-thumb>span {
    flex: 1;
    display: block;
    height: 3px;
    background: rgba(0, 0, 0, 0.4);
    margin: 5px;
    border-radius: 3px;
    overflow: hidden;
}

.story-modal-div .slide-thumb>span.active::after {
    content: '';
    display: block;
    height: inherit;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    transform: translateX(-100%);
    animation: thumb 5s forwards linear;
}

.anket-modal-div .carousel-inner {
    margin-top: 13px;
}

.anket-modal-div .carousel-inner .carousel-item {
    margin-top: 0;
}

.anket-modal-div label {
    font-size: 15px;
    display: block;
    margin-bottom: 10px;
}

.anket-modal-div .app-btn {
    margin-top: 15px;
}

.anket-modal-div .slide-btn-div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}

.anket-modal-div .slide-btn-div .carousel-control-next {
    width: 50%;
    margin-left: auto;
    display: flex;
    justify-content: flex-end;
}

.anket-modal-div .slide-btn-div .carousel-control-prev {
    width: 50%;
    margin-right: auto;
    display: flex;
    justify-content: flex-start;
}

.anket-modal-div .slide-btn-div a {
    font-weight: 700;
    color: #000000;
    font-size: 13px;
    position: relative;
    opacity: 1;
}


@keyframes thumb {
    to {
        transform: initial;
    }
}

.friends ul li.bottom-loader {
    position: relative;
    width: 100%;
    padding: 0;
    height: 70px !important;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.bottom-loader .loader-wrap {
    position: relative;
    z-index: 1;
}

.bottom-loader .loader-wrap .circle-loader {
    width: 65px;
    height: 65px;
    border-width: 3px;
}

.bottom-loader .loader-wrap img {
    width: 35px;
}

.stories.snapgram .story>.item-link>.item-preview {
    border-radius: 50%;
    padding: 2px;
    background: rgb(0, 123, 133);
    background: linear-gradient(308deg, rgb(0 158 162) 0%, rgb(0 200 205) 50%);
}

.stories.snapgram .story.seen>a>.item-preview {
    background: rgb(0, 123, 133);
    background: linear-gradient(308deg, rgb(0 158 162) 0%, rgb(0 200 205) 50%);
}

.stories.carousel .story>.item-link>.info .name {
    display: block;
    font-weight: 500;
    font-size: 12px;
    word-wrap: break-word;
    line-height: normal;
    /* IE 5.5-7 */
    white-space: -moz-pre-wrap;
    /* Firefox 1.0-2.0 */
    white-space: pre-wrap;
    /* current browsers */
}

#zuck-modal-content .story-viewer .head .right .time {
    display: none !important;
}

.past-draw-slider-div {
    margin-top: 20px;
}

.past-draw-slider-div span {
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    color: #009ea2;
    width: max-content;
    padding-top: 10px;
    font-size: 15px;
    font-weight: 600;
}

.owl-carousel.past-draw-slider {
    padding: 10px;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 5px 5px rgb(236 236 236);
    border-radius: 10px;
    background-color: #eefaff;
}

.owl-carousel.past-draw-slider .owl-item img {
    max-width: 150px;
}

.owl-carousel.past-draw-slider .img-box {
    background-color: #ffffff;
    border-radius: 25px;
    -webkit-box-shadow: 0px 0px 2px 0px rgb(235 235 235);
    -moz-box-shadow: 0px 0px 8px 0px rgba(235, 235, 235, 1);
    box-shadow: 0px 0px 8px 0px rgb(235 235 235);
    overflow: hidden;
}

.cargo-modal.medal-modal-select ul li {
    height: 36px;
}

.cargo-modal ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cargo-modal ul li {
    background-color: #ffffff;
    border-radius: 25px;
    padding: 10px 15px;
    margin-bottom: 15px;
    position: relative;
    /* box-shadow: 0px 0px 8px 5px rgb(235 235 235); */
    display: flex;
    align-items: center;
    position: relative;
    height: 65px;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    justify-content: center;
    margin: 0 5px;
    width: 50%;
    text-align: center;
}

.cargo-modal-inside p {
    margin-top: 10px;
    font-size: 16px;
    margin-bottom: 20px;
}

.cargo-modal-inside p b {
    display: inline-block;
}

.cargo-modal-inside .modal-emoji-div {
    margin-top: -70px;
}

.app-modal1b .cargo-modal-inside .modal-emoji-div img {
    margin-bottom: 0;
    width: 90px;
}


.cargo-modal ul li img {
    width: 20px;
    display: inline-block;
    margin: 0;
}

.cargo-modal ul li.active {
    padding-left: 32px;
    background-color: #00c76a;
    color: #ffffff;
}

.cargo-modal ul li.active::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    font-weight: 900;
    left: 5px;
    width: 20px;
    line-height: 20px;
    height: 20px;
    text-align: center;
    font-size: 12px;
    border-radius: 25px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #00ae5c;
    color: #ffffff;
}

.cargo-modal ul li.btn1 {
    background-color: #009ea2;
    color: #ffffff;
}

.cargo-modal ul li.btn2 {
    background-color: #009ea2;
    color: #ffffff;
}

.cargo-modal ul li span {
    font-weight: 400;
    font-size: 12px;
    margin-top: 3px;
    display: block;
}

.cargo-modal .select-list {
    margin-top: 0;
    margin-bottom: 15px;
}

.cargo-modal p {
    margin-top: 10px;
    font-size: 17px;
    margin-bottom: 10px;
}

.cargo-modal .modal-emoji-div {
    margin-top: -70px;
}

.app-modal1b .cargo-modal .modal-emoji-div img {
    margin-bottom: 0;
    width: 90px;
}

.cargo-modal ul li.disabled {
    background-color: #dcdcdc;
    padding-left: 32px;
}

.cargo-modal ul li.disabled::before {
    content: "\f057";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    font-weight: 900;
    line-height: 20px;
    margin-top: 15px;
    text-align: center;
    font-size: 18px;
    top: 0;
    color: #a1a1a1;
    left: 5px;
}

.medal-page .img-div a {
    font-size: 12px;
    margin-bottom: 10px;
    display: block;
    color: #ffffff;
    background-color: #00acb3;
    width: max-content;
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    margin: 0 auto;
    margin-top: 5px;
}

.select-buy-div {
    display: block;
    text-align: center;
    padding: 10px 0;
    font-weight: 900;
    font-size: 14px;
}

.brand-form-page img{
    width: 100px;
    margin: 0 auto;
    display: block;
    margin-bottom: 20px;
}

.brand-form-page .info-div{
    margin-bottom: 25px;
}

.brand-form-page .alert-text{
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #e30000;
    margin-bottom: 10px;
}

.brand-form-page .other-text{
    text-align: center;
    font-size: 14px;
    margin: 0;
}

.brand-form-page .other-text a{
    color: #009ea2;
    font-weight: bold;
}

@media screen and (max-width: 709px) {
    .multi-range__labels>.label:nth-child(4n + 1) {
        display: block;
    }
}

@media screen and (min-width: 710px) {
    .multi-range__labels>.label:nth-child(odd) {
        display: block;
    }
}

@media screen and (min-width: 1560px) {
    .multi-range__labels>.label {
        display: block;
    }
}

@media (max-height: 750px) {
    .daily-bonus ul li {
        padding: 3px 0;
    }

    .daily-bonus ul li.left::before {
        height: 57px;
    }

    .daily-bonus ul li.right::before {
        height: 56px;
    }

    .daily-bonus ul li .step-text {
        padding: 2px 10px;
    }

}

@media (max-height: 675px) {}


@media (max-width: 350px) {
    .banner-multi .banner-name {
        height: 50px;
    }

    .first-tutorial img {
        height: 70vh;
    }

    .first-tutorial .first-slide2 .tutorial-logo {
        width: 180px;
        margin-bottom: 15px;
    }

    .first-tutorial .first-slide2 a {
        margin-top: 15px;
    }


    .first-slide-wrap2 .first-slide2 ul li {
        font-size: 20px;
    }

    .scroll-down {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    .social-page .friends ul.follow-request li .name {
        width: 110px;
    }

    .navbar .menu-right .first-div {
        font-size: 13px;
    }

    .logo-div img {
        width: 105px;
    }

    .league-page .friends ul li .name {
        width: 110px;
        font-size: 13px;
        margin-left: 5px;
    }

    .product-detail .league-page .friends .first-league-table li .name {
        width: 190px;
    }

    .challenge-end-page .friends ul li .name {
        width: 110px;
        font-size: 13px;
    }

    .friends ul li .emoji-div .emoji-div-inside {
        margin-right: 8px;
    }

    .activty-ul li .request-info .date-activity-div {
        width: 125px;
    }

    .activty-ul li .date-activity {
        font-size: 13px;
    }

    .friends ul li .name {
        font-size: 15px;
    }

    .friends ul li .name-div .step-div {
        font-size: 10px;
        margin-left: 5px;
    }

    .follow-btn-friends,
    .send-btn-friends,
    .unfollow-btn-friends,
    .lock-btn-friends {
        width: 36px;
        height: 36px;
    }

    .league-page .friends .first-league-table .challenge-btn {
        width: 32px;
        height: 32px;
        bottom: 6px;
    }

}

@media (max-width: 340px) {

    .product-detail .league-page .friends ul li .profile-picture {
        margin-left: 5px;
    }

    .friends ul li .profile-picture {
        margin-left: 2px;
    }

    .list-picture-img {
        margin-left: 2px !important;
    }

    .nav-drill {
        padding-top: 30px;
    }

    .social-nav .nav-item span {
        top: -10px;
    }

    .social-page .follow-request .accept-follower {
        font-size: 12px;
    }

    .social-page .follow-request .delete-follower {
        font-size: 12px;
    }

    .league-page .friends ul li .name {
        width: 93px;
        font-size: 12px;
    }

    .challenge-end-page .friends ul li .name {
        width: 93px;
        font-size: 12px;
    }

    .new-profile-page .profile-step .profile-step-box {
        width: 32%;
    }

    .new-profile-page .profile-step .profile-step-box .span1 {
        font-size: 15px;
        height: 58px;
    }

    .new-profile-page .profile-step .profile-step-box .span2 {
        font-size: 23px;
    }

    .social-page .friends ul.follow-request li .name {
        width: 90px;
    }

    .social-page .follow-request .request-select {
        right: 10px;
    }

    .activity-tab .activty-ul li .h-activity {
        width: 130px;
        font-size: 12px;
    }

    .friends ul li .name {
        width: 150px;
    }

    .menu-bottom .center-home {
        width: 65px;
        height: 65px;
        line-height: 56px;
        padding: 0;
    }

    .menu-bottom .center-home img {
        width: 32px;
    }

    .menu-bottom a {
        font-size: 26px;
    }

    .app-modal3-div ul li {
        padding: 10px 2px;
    }

    .app-modal1 .modal-body {
        padding-left: 10px;
        padding-right: 10px;
    }

    .app-modal3-div ul li .lig-modal-h {
        font-size: 15px;
        height: 55px;
    }

    .app-modal3-div ul li .lig-modal-data {
        font-size: 17px;
    }
}

.notification-modal .icon-modal-div {
    background: rgb(10, 160, 243);
    background: linear-gradient(0deg, rgba(10, 160, 243, 1) 0%, rgba(98, 191, 139, 1) 93%);
    display: block;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    line-height: 53px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -20px;
}

.notification-modal .icon-modal-div img {
    width: 35px;
}

.switch-input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden;
    display: block;
}

.switch-label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px;
    height: 30px;
    background: #a0a0a0;
    margin: 0;
    display: block;
    border-radius: 100px;
    position: relative;
    margin-left: 15px;
    ;
}

.switch-label:after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
}

.switch-input:checked+label {
    background: #009ea2;
}

.notification-modal .modal-t5 {
    margin-bottom: 10px;
}

.notification-modal .switch-div {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 25px;
}

.notification-modal b {
    font-weight: 500;
    display: block;
    margin-right: 10px;
}

.switch-input:checked+label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%);
}

.notification-modal label:active:after {
    width: 20px;
}

label.input-has-value {
    color: red;
}

.modal.fade .modal-dialog {
    -webkit-transform: translate(0, 100px);
    transform: translate(0, 100px);
}

.modal.show .modal-dialog {
    transform: none;
}

.container-dropdown {
    width: 80px;
    display: flex;
    justify-content: end;
    margin-left: auto;
}

.container-dropdown .dropdown {
    position: relative;
    margin-top: 5px;
    width: 215px;
    height: 35px;
}

.container-dropdown .dropdown::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 1000;
    width: 8px;
    height: 8px;
    border: 2px solid #333;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(-45deg);
    transition: 0.5s;
    pointer-events: none;
}

.container-dropdown .dropdown.active::before {
    top: 16px;
    transform: rotate(-225deg);
}

.container-dropdown .dropdown input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: #fff;
    font-size: 13px;
    border: none;
    outline: none;
    font-weight: 800;
    padding: 5px 10px;
    border-radius: 10px;
    border: 1px solid #e9e9e9;
}

.container-dropdown .dropdown .options {
    position: absolute;
    top: 50px;
    width: 100%;
    background: #fff;
    box-shadow: none;
    border-radius: 10px;
    overflow: hidden;
    display: none;
}

.container-dropdown .dropdown.active .options {
    display: block;
}

.container-dropdown .dropdown .options div {
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
}

.container-dropdown .dropdown .options div:hover {
    background: #62baea;
    color: #fff;
}

.container-dropdown .dropdown .options div ion-icon {
    position: relative;
    top: 4px;
    font-size: 1.2em;
    margin-right: 10px;
}

.hour-select-modal {
    text-align: left;
    max-height: 225px;
    overflow-y: auto;
}

.hour-select-modal .hours-div {
    display: inline-block;
    width: 22%;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: #eeeeee;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 5px;
    margin-top: 5px;
    font-weight: 500;
    font-size: 14px;
    margin-right: 3px;
    margin-left: 3px;
}

.hour-select-modal .hours-div.active-hour {
    background-color: #009ea2;
    color: #ffffff;
}

@media (max-width: 330px) {
    .cargo-modal ul li {
        font-size: 13px;
        padding: 10px 5px;
    }

    .cargo-modal ul li img {
        width: 18px;
    }

    .league-page .friends .first-league-table .challenge-btn {
        font-size: 11px;
    }

    .league-page .friends .first-league-table .challenge-btn img {
        width: 16px;
    }

    .league-page .friends .first-league-table .lock-challenge-btn img {
        height: 16px;
    }

    .friends ul li .emoji-tab .lock-like img {
        height: 16px;
    }

    .daily-bonus ul li {
        width: 230px;
    }

    .daily-bonus ul li.left::after {
        width: 50%;
    }

    .daily-bonus ul li.right::after {
        width: 50%;
    }

    .daily-bonus ul li:last-child {
        width: 250px;
        padding-top: 27px;
    }

}

@media (max-width: 320px) {
    .product-detail .league-page .friends .first-league-table li .name {
        width: 170px;
    }

    .product-detail .league-page .friends ul li .number {
        margin-right: 3px;
    }

    .new-profile-page .profile-header-wrap .follow-btn.following-btn {
        font-size: 11px;
    }


    .banner-multi .banner-name {
        height: 50px;
    }

    .izle-kazan-modal .list-video li:last-child i {
        font-size: 40px;
    }

    .app-modal1b .izle-kazan-modal.yeni-modal-bonus ul li .day {
        font-size: 9px;
        font-weight: 600;
        width: 20px;
        text-align: center;
        margin: 0 auto;
        margin-top: 2px;
    }

    .index-top-info-box {
        font-size: 11px;
    }

    .home-tab-content {
        height: 290px;
    }

    .hour-bonus-div {
        height: 290px;
    }

    .invitation-modal-btn {
        width: 210px;
    }

    .invitation-modal-div .app-btn {
        width: 210px;
    }

    .invitation-modal-btn i {
        color: #ffc903;
        font-size: 15px;
        margin: 0;
    }

    .friends ul li .waiting-step {
        width: 90px;
        font-size: 10px;
    }

    .friends ul li .completed-step {
        right: 45px;
    }

    .game-modal .game-check-list .star {
        width: 30px;
        height: 30px;
    }

    .wallet-page .wallet-box {
        padding: 8px 10px;
    }

    .wallet-page .wallet-box .box-info .product {
        font-size: 12px;
    }

    .activty-detail .date {
        font-size: 15px;
    }

    .activty-detail .creative-activty-user {
        font-size: 14px;
    }

    .activty-detail .users {
        font-size: 14px;
    }

    .activty-detail h2 {
        font-size: 16px;
    }

    .activty-detail p {
        font-size: 15px;
    }

    .app-tabs .nav-item {
        font-size: 13px;
        height: 28px;
        padding: 6px 0;
    }

    .counter-div .undo-btn img {
        width: 50px;
        height: 50px;
    }

    .counter-div .undo-btn.info-counter img {
        width: 45px;
        height: 45px;
    }

    .counter-div .undo-btn {
        height: 70px;
        top: 40px;
        width: 70px;
        line-height: 70px;
    }

    .counter-div {
        margin-bottom: 10px;
    }

    .counter-div .total-step {
        margin-bottom: 15px;
    }

    .home-chart-wrap {
        margin-bottom: 15px;
    }

    .counter-div .total-step .total-h {
        font-size: 14px;
    }

    .counter-div .total-step .total-c {
        font-size: 26px;
    }

    .new-profile-page .profile-header .my-followers .span1 {
        font-size: 18px;
    }

    .new-profile-page .profile-header .my-followers .span2 {
        font-size: 14px;
    }

    .new-profile-page .profile-step .profile-step-box .span1 {
        font-size: 14px;
        height: 55px;
    }

    .new-profile-page .profile-step .profile-step-box .span2 {
        font-size: 20px;
    }

    .banner-shop .product-price .first-div {
        font-size: 14px;
    }

    .banner-shop .product-price .second-div span {
        font-size: 12px;
    }

    .banner1 i {
        font-size: 14px;
    }

    .star-product-icon i {
        font-size: 20px;
    }

    .activty-ul li .date-activity {
        font-size: 12px;
    }

    .activty-ul li .request-info .date-activity-div {
        width: 120px;
    }

    .league-page .friends ul li .name {
        width: 100px;
        font-size: 13px;
    }

    .challenge-end-page .friends ul li .name {
        width: 100px;
        font-size: 13px;
    }

    .logo-div img {
        width: 100px;
    }

    .banner1 {
        padding: 10px;
    }

    .product-detail h2 {
        font-size: 16px;
    }

    .product-detail p {
        font-size: 15px;
    }

    .product-detail p b {
        font-size: 14px;
    }

    .friends h2 {
        font-size: 16px;
        padding-bottom: 10px;
    }

    .invite-page p {
        font-size: 15px;
        padding-bottom: 15px;
    }

    .invite-page .invite-info-text {
        font-size: 14px;
    }

    .contact-page .contact-box a {
        font-size: 14px;
    }

    .contact-page .contact-box .text-contact {
        font-size: 14px;
    }

    .app-btn {
        width: 140px;
        font-size: 14px;
    }

    .save-div .app-btn {
        width: auto;
    }

    .profile-edit-back-btn {
        width: 170px;
        font-size: 14px;
    }

    .app-btn.profile-picture-btn {
        width: 100%;
        font-size: 14px;
    }

    body {
        font-size: 14px;
    }

    .logo-div span {
        font-size: 16px;
        width: 150px;
        display: inline-block;
    }

    .friends ul li .name {
        font-size: 14px;
        width: 120px;
    }

    .invite-page .friends ul li .name {
        width: 120px;
    }

    .invite-page .friends ul li .waiting-step {
        width: 95px;
        font-size: 9px;
    }

    .friends ul li .number {
        width: 40px;
        font-size: 9px;
        margin-right: 5px;
    }

    .friends ul li .profile-picture {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 11px;
    }

    .list-picture-img {
        width: 25px;
        height: 25px;
    }

    .nav-drill {
        width: 230px;
    }

    .nav-drill .nav-link {
        font-size: 16px;
        padding: 6px 0;
        line-height: 28px;
    }

    .banner1 .banner-name {
        font-size: 14px;
    }

    .banner1.banner-multi .banner-name {
        font-size: 14px;
        height: 50px;
    }

    .banner-summary {
        font-size: 12px;
    }

    .banner-bottom .banner-summary i {
        padding-left: 2px;
        font-size: 11px;
    }

    .banner1 .banner-bottom2 .product-play i {
        margin: 0;
    }

    .product-detail p b {
        font-size: 15px;
    }

    .product-detail .product-price .first-div {
        font-size: 15px;
    }

    .product-detail .product-price .second-div span {
        font-size: 14px;
    }

    .product-detail .product-price i {
        font-size: 15px;
    }

    .product-detail-top .share-a {
        font-size: 25px;
    }

    .product-detail-top .fav-a {
        border-radius: 10px;
        font-size: 18px;
        width: 33px;
        height: 32px;
        line-height: 32px;
    }

    .navbar .menu-right .first-div {
        font-size: 13px;
    }

    .navbar .menu-right .money-menu {
        padding: 4px 8px;
    }

    .none-banner-div p {
        font-size: 17px;
    }

    .navbar .menu-left a {
        font-size: 22px;
    }

    .sum-step .sum-step-text {
        font-size: 18px;
    }

    .sum-step .sum-step-number span {
        font-size: 23px;
    }

    .info-app span {
        font-size: 15px;
    }

    .menu-bottom a {
        height: 75px;
    }

    .menu-bottom a {
        font-size: 22px;
    }

    .menu-bottom .sm-icon-menu-bottom {
        font-size: 20px;
    }

    .menu-bottom a span {
        width: 12px;
        height: 12px;
        line-height: 17px;
        top: 7px;
        font-size: 11px;
    }

    .lig-nav .nav-item {
        font-size: 11px;
        height: 28px;
        padding: 6px 0;
    }

    .social-nav .nav-item {
        font-size: 13px;
        height: 28px;
        padding: 6px 0;
    }

    .lig-nav .nav-item span,
    .social-nav .nav-item span {
        top: -12px;
        font-size: 11px;
        right: 8px;
        line-height: 20px;
    }

    .menu-bottom .center-home img {
        width: 30px;
    }
}

@media (max-width: 300px) {
    .product-detail .league-page .friends .first-league-table li .name {
        width: 155px;
    }


    .banner1.banner-multi .banner-name {
        font-size: 13px;
        height: 50px;
    }

    .banner1 .banner-name {
        font-size: 13px;
    }

    .lig-nav .nav-item {
        font-size: 10px;
        height: 28px;
        padding: 6px 0;
    }

    .league-page .friends ul li .name {
        width: 45px;
        font-size: 13px;
    }
}

@media (max-width: 280px) {
    .banner1.banner-multi .banner-name {
        font-size: 12px;
        height: 46px;
    }

    .banner1 .banner-name {
        font-size: 12px;
    }

    .yeni-modal-bonus .clock-bonus span {
        font-size: 10px;
    }

    .yeni-modal-bonus .clock-bonus i {
        font-size: 12px;
    }

    .izle-kazan-modal.yeni-modal-bonus .video-modal-img img {
        margin-bottom: 0;
        width: 60px;
    }

    .izle-kazan-modal .list-video li:last-child i {
        font-size: 35px;
    }

    .izle-kazan-modal .today-watch-div {
        width: 23px;
        height: 23px;
    }

    .izle-kazan-modal .today-watch-div img {
        width: 11px;
        top: 4px;
        left: 6px;
    }

    .izle-kazan-modal .list-video i {
        font-size: 23px;
    }

    .daily-bonus ul li:last-child {
        padding-top: 20px;
    }

    .daily-bonus ul li.left:last-child .step-icon {
        font-size: 23px;
        width: 44px;
        height: 44px;
    }

    .daily-bonus ul li.left {
        justify-content: center;
    }

    .daily-bonus ul li.right {
        justify-content: center;
    }

    .daily-bonus ul li.left::before {
        left: 71px;
    }

    .daily-bonus ul li.left::after {
        display: none;
    }

    .daily-bonus ul li.right::after {
        display: none;
    }

    .daily-bonus ul li.right::before {
        height: 93px;
        bottom: -25px;
        left: 71px;
    }

    .daily-bonus ul li.left:last-child:before {
        display: none;
    }

    .daily-bonus .last-stars-div {
        left: -5px;
    }
}

@media (max-width: 255px) {
    .daily-bonus ul li.right::before {
        display: none;
    }

    .daily-bonus ul li.right::before {
        display: none;
    }

    .daily-bonus ul li.left::before {
        display: none;
    }
}


.vertical-alignment-helper {
    display: table;
    height: 100%;
    width: 100%;
    padding: 10PX;
    margin: 0 auto;
    pointer-events: none;
}

.vertical-align-center {
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    width: inherit;
    max-width: inherit;
    height: inherit;
    margin: 0 auto;
    pointer-events: all;
}

.img-modal {
    display: none;
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(101 101 101 / 90%);
    z-index: 99;
}

.img-modal .modal-content {
    display: block;
    border-radius: 0;
    border: 0;
    width: 80%;
    height: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.img-modal .modal-content,
#zoom-caption {
    -webkit-animation-name: zoom-img;
    -webkit-animation-duration: 0.2s;
    animation-name: zoom-img;
    animation-duration: 0.2s;
}

@-webkit-keyframes zoom-img {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes zoom-img {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.img-modal .close-img {
    position: absolute;
    top: 40px;
    left: 30px;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    transition: 0.3s;
}

.img-modal .close-img:hover,
.close-img:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.undo-btn.hourglass {
    animation: none;
    background: #e9e9e9;
    font-size: 40px;
}

.product-play.hourglass {
    margin-top: 15px;
    margin-bottom: 5px;
    display: inline-block;
}

.product-play.hourglass td>span {
    width: 25px;
    height: 20px;
}

.izle-kazan-modal .hourglass {
    height: 37px;
    padding-top: 8px;
    display: block;
    margin: 0;
}

.hourglass table {
    width: 100%;
}

.hourglass td>span {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 25px;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: spin;
    animation-timing-function: linear;
}

.hourglass span span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b4b4b4;
    overflow: hidden;
    -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
    clip-path: polygon(0 0, 100% 0, 50% 100%, 0 0);
}

.hourglass span span:first-of-type {
    transform: translateY(-50%);
}

.hourglass span span:last-of-type {
    transform: translateY(50%) rotate(180deg);
}

.hourglass span span::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffb24c;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: slide;
    animation-timing-function: linear;
}

.hourglass span span:last-of-type::before {
    animation-delay: -2s;
}

@keyframes slide {
    0% {
        transform: translateY(0%);
    }

    25% {
        transform: translateY(100%);
    }

    50% {
        transform: translateY(100%);
    }

    75% {
        transform: translateY(0%);
    }

    100% {
        transform: translateY(0%);
    }
}

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

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    75% {
        transform: rotate(180deg);
    }

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

.multi-graph {
    width: 235px;
    height: 118px;
    position: relative;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}

.multi-graph:before {
    content: "";
    width: 235px;
    height: 118px;
    border: 20px solid #c9c9c9;
    border-bottom: none;
    position: absolute;
    box-sizing: border-box;
    transform-origin: 50% 0%;
    border-radius: 300px 300px 0 0;
    left: 0;
    top: 0;
}

.multi-graph .graph {
    width: 235px;
    height: 118px;
    border: 20px solid var(--fill);
    border-top: none;
    position: absolute;
    transform-origin: 50% 0% 0;
    border-radius: 0 0 300px 300px;
    left: 0;
    top: 100%;
    z-index: 5;
    animation: 1s fillGraphAnimation ease-in;
    transform: rotate(calc(1deg * (var(--percentage) * 1.8)));
    box-sizing: border-box;
    cursor: pointer;
}

.multi-graph .graph::after {
    content: "";
    position: absolute;
    top: 0;
    left: -26px;
    background-color: #ffffff;
    width: 210px;
    height: 1px;
    z-index: 3;
}

.multi-graph .graph:first-child::after {
    display: none;
}

@keyframes myfirst2 {
    0% {
        border-color: #00f080;
    }

    50% {
        border-color: #00a357;
    }

    100% {
        border-color: #00f080;
    }
}

/*

@-webkit-keyframes fillAnimation {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(135deg);
    }
}

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

    50% {
        transform: rotate(135deg);
    }
}

@-webkit-keyframes fillGraphAnimation {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }
}

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

    50% {
        transform: rotate(180deg);
    }
}*/

@media (max-height: 720px) {
    .first-tutorial .slide-text {
        font-size: 16.5px;
    }

    .accept-tutorial-btn {
        margin-top: 5px;
        height: 40px;
    }

    .first-tutorial .last-item-carousel img {
        height: 70vh;
    }

    .first-tutorial .last-item-carousel .slide-text-div {
        margin-top: 10px;
    }
}

@-webkit-keyframes walkanim {
    to {
        background-position: 100% 0;
    }
}

@keyframes walkanim {
    to {
        background-position: 100% 0;
    }
}

#walk-container {
    position: relative;
    width: 100px;
    padding-bottom: 120px;
    vertical-align: middle;
    overflow: hidden;
    margin: 0 auto;
    display: revert;
}

#walk {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/sprite.svg);
    background-repeat: no-repeat;
    background-size: 2700%;
    -webkit-animation: walkanim s infinite steps(30);
    animation: walkanim 1s infinite steps(29);
    margin-left: auto;
    margin-right: auto;
}

.slide-range {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-bottom: 0;
}

.slide-range .middle {
    position: relative;
    width: 100%;
    max-width: 500px;
    height: 50px;
}

.slide-range .slider {
    position: relative;
    z-index: 1;
    height: 10px;
    width: 95%;
    margin: 0 auto;
}

.slide-range .slider .track {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    background-color: #bad4d5;
}

.slide-range .slider .range {
    position: absolute;
    z-index: 2;
    left: 25%;
    right: 25%;
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background-color: #009ea2;
}

.slide-range .slider .thumb {
    position: absolute;
    z-index: 3;
    width: 22px;
    height: 22px;
    background-color: #009ea2;
    border-radius: 50%;
    box-shadow: 0 0 0 0px rgb(98 0 238 / 10%);
    transition: box-shadow .3s ease-in-out;
}

.slide-range .slider>.thumb.hover {
    box-shadow: 0 0 0 20px rgba(98, 0, 238, .1);
}

.slide-range .slider>.thumb.active {
    box-shadow: 0 0 0 40px rgba(98, 0, 238, .2);
}

.slide-range .slider .thumb.left {
    left: 25%;
    transform: translate(-15px, -6px);
}

.slide-range .slider .thumb.right {
    right: 25%;
    transform: translate(0px, -6px);
}

.slide-range input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 2;
    height: 10px;
    width: 100%;
    opacity: 0;
}

.slide-range input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 30px;
    height: 30px;
    border-radius: 0;
    border: 0 none;
    background-color: red;
    -webkit-appearance: none;
}

.slide-range .graduation {
    position: absolute;
    width: 100%;
    top: 20px;
    left: 0px;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 5px;
    margin: 0 auto;
}

.slide-range .graduation span {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
}

.slide-range ul li {
    list-style: none;
    text-align: center;
    font-size: 12px;
}

/* NEW CHART  */

.new-chart-wrapper input[type="text"] {
    border: 0;
    border: solid 1px #8080ff;
    text-align: center;
    font-size: 20px;
    width: 45px;
    display: inline-block;
    position: absolute;
    color: #000000;
    left: 0;
}

.new-chart-wrapper input:focus {
    outline: 0;
    border-bottom: dashed 1px #ff8080;
}

.new-chart-wrapper input::-moz-selection {
    color: #1a1a1a;
    background-color: #c6e4ee;
}

.new-chart-wrapper input::selection {
    color: #1a1a1a;
    background-color: #c6e4ee;
}

.new-chart-wrapper ::-webkit-input-placeholder {
    color: #7aa6f3;
    text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper :-moz-placeholder {
    color: #7aa6f3;
    text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper ::-moz-placeholder {
    color: #7aa6f3;
    text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper :-ms-input-placeholder {
    color: #7aa6f3;
    text-shadow: 0 0 3px #7aa6f3;
}

.new-chart-wrapper {
    display: -ms-flexbox;
    display: box;
    display: flex;
    -o-box-align: center;
    align-items: center;
    -o-box-pack: center;
    justify-content: center;
    -o-box-orient: vertical;
    flex-direction: column;
    height: 100%;
    position: relative;
    margin-bottom: 20px;
    margin-top: 30px;
}

.counter-div .new-chart-wrapper .battery-btn {
    top: -15px;
}

.counter-div .new-chart-wrapper .undo-btn {
    top: 27px;
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
    position: relative;
    border-radius: 50%;
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
    width: 130px;
    height: 130px;
    background-color: #ffffff;
}


.new-chart-wrapper .green .progress {
    box-shadow: 0 0 50px rgb(0 189 0 / 75%);
}

.new-chart-wrapper .green .progress,
.new-chart-wrapper .red .progress,
.new-chart-wrapper .orange .progress {
    transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
    position: absolute;
    overflow: hidden;
    z-index: 2;
    border-radius: 50%;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
    width: 130px;
    height: 130px;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
    border: 0 solid #1a1a1a;
}

.new-chart-wrapper .green .progress .inner,
.new-chart-wrapper .red .progress .inner,
.new-chart-wrapper .orange .progress .inner {
    transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
    position: absolute;
    z-index: 1;
    width: 200%;
    height: 200%;
    left: -50%;
    border-radius: 40%;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-name: spin-home;
    animation-name: spin-home;
}

.new-chart-wrapper .green .progress .inner .water {
    top: 25%;
}

.new-chart-wrapper .green .progress .inner .water {
    background: rgb(58 198 58 / 75%);
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
    transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .water,
.new-chart-wrapper .red .progress .inner .water,
.new-chart-wrapper .orange .progress .inner .water {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

.new-chart-wrapper .green .progress .inner .water {
    box-shadow: none;
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
    position: absolute;
    top: -120%;
    left: -120%;
    z-index: 5;
    width: 200%;
    height: 200%;
    transform: rotate(45deg);
    border-radius: 50%;
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
    background-color: rgba(255, 255, 255, 0.15);
}

.new-chart-wrapper .green .progress .inner .glare,
.new-chart-wrapper .red .progress .inner .glare,
.new-chart-wrapper .orange .progress .inner .glare {
    transition: all 1s ease;
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-weight: bold;
    text-align: center;
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
    line-height: 150px;
    font-size: 50px;
}

.new-chart-wrapper .green .progress .inner .percent {
    color: #03c603;
}

.new-chart-wrapper .green .progress .inner .percent {
    /* text-shadow: 0 0 10px #029502; */
}

.new-chart-wrapper .green .progress .inner .percent,
.new-chart-wrapper .red .progress .inner .percent,
.new-chart-wrapper .orange .progress .inner .percent {
    transition: all 1s ease;
}

.new-chart-wrapper .red .progress {
    box-shadow: 0 0 50px rgb(235 78 78 / 75%);
}

.new-chart-wrapper .red .progress .inner .water {
    top: 75%;
}

.new-chart-wrapper .red .progress .inner .water {
    background: rgb(195 40 40);
}

.new-chart-wrapper .red .progress .inner .water {
    box-shadow: none;
}

.new-chart-wrapper .red .progress .inner .percent {
    color: #a30f0f;
}

.new-chart-wrapper .red .progress .inner .percent {
    text-shadow: 0 0 10px #7a0b0b;
}

.new-chart-wrapper .orange .progress {
    box-shadow: 0 0 50px rgb(255 187 0);
}

.new-chart-wrapper .orange .progress .inner .water {
    top: 50%;
}

.new-chart-wrapper .orange .progress .inner .water {
    background: rgb(255 165 0 / 81%);
}

.new-chart-wrapper .orange .progress .inner .water {
    box-shadow: none;
}

.new-chart-wrapper .orange .progress .inner .percent {
    color: #a8430d;
}

.new-chart-wrapper .orange .progress .inner .percent {
    text-shadow: 0 0 10px #7e320a;
}

.new-chart-wrapper #copyright {
    margin-top: 25px;
    background-color: transparent;
    font-size: 14px;
    color: #b3b3b3;
    text-align: center;
}

.new-chart-wrapper #copyright div {
    margin-bottom: 10px;
}

.new-chart-wrapper #copyright a,
.new-chart-wrapper #copyright a:link {
    color: #808080;
    text-decoration: none;
    border-bottom: 1px solid #808080;
    padding-bottom: 2px;
}

.new-chart-wrapper #copyright a:active {
    color: #b3b3b3;
}

.new-chart-wrapper #copyright a:hover {
    color: #b3b3b3;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 4px;
}

.new-chart-wrapper .instructions {
    display: inline-block;
    margin: 5px 0;
    font-size: 16px;
}

.new-chart-wrapper .progress .progress-lines {
    position: relative;
    width: 100%;
    height: 100%;
}

.new-chart-wrapper .progress .progress-lines .line-item {
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: rgb(0 0 0 / 3%);
}

.draw-sticker-product-box {
    position: absolute;
    text-align: center;
    background-color: #ff4200;
    color: #ffffff;
    font-size: 11px;
    font-weight: bolder;
    border-radius: 50px;
    height: 25px;
    line-height: 25px;
    width: 55px;
    right: 0;
    top: -10px;
    right: 0;
}

@-webkit-keyframes spin-home {
    from {
        transform: rotate(0deg);
    }

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

@keyframes spin-home {
    from {
        transform: rotate(0deg);
    }

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