:root {

    --main-color-light: #1A1D27;

    --header-font-color: #B2B6D1;

    --background-avatar: #a3bd8e;

}

* {
    font-synthesis: none !important;
  }



body {

    background: linear-gradient(rgba(26, 29, 39, 1), #141821);

    ;

    overflow-x: hidden;

    position: relative;

    height: 100%;

}



a {

    cursor: pointer;

}

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px #141821;

    border-radius: 10px;

    background-color: #1f2332;

}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-background-clip: text;
    -webkit-text-fill-color: #ffffff;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}


::-webkit-scrollbar {

    width: 12px;

    background-color: #1f2332;

}



::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px #141821;

    background-color: #141821;

}



.notification-scroll::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px #141821;

    border-radius: 10px;

    background-color: #1f2332;

}



.notification-scroll::-webkit-scrollbar {

    width: 8px;

    background-color: #1f2332;

}



.notification-scroll::-webkit-scrollbar-thumb {

    border-radius: 10px;

    -webkit-box-shadow: inset 0 0 6px #141821;

    background-color: #141821;

}







::-webkit-input-placeholder {

    /* Edge */

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */



    color: #5A5D74;

}



:-ms-input-placeholder {

    /* Internet Explorer 10-11 */

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */



    color: #5A5D74;

}



::placeholder {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */



    color: #5A5D74;

}



input, select, textarea {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */



    color: #ffffff;

}



.main-section {



    transition: 0.25;

    padding-top: 180px;

    min-height: 100%;

    overflow-y: auto;

    overflow-x: hidden;

    -ms-overflow-style: none;

    /* Internet Explorer 10+ */

    scrollbar-width: none;

    /* Firefox */

}



.main-section::-webkit-scrollbar {

    display: none;

    /* Safari and Chrome */

}





.navbar {

    width: 100%;

    background: rgba(26, 29, 39, 1);

    position: fixed;

    z-index: 999;

}



.navbar-brand img {

    width: 200px;

    margin-left: 4vw;

    margin-right: 3vw;

}



.nav-link {

    font-family: 'Rubik';

    font-style: normal;

    color: var(--header-font-color);

    font-size: 16px;

    line-height: 19px;

    font-weight: 500;

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

}



.nav-link.active {

    font-family: 'Rubik';

    font-style: normal;

    color: #43DBD6 !important;

    font-size: 16px;

    line-height: 19px;

    font-weight: 500;

}



.nav-link svg {

    margin-right: 6px;

}



.nav-link:hover {

    color: var(--header-font-color);

}



.nav-item {

    margin-right: 20px;

}



.nav-login {

    font-family: 'Rubik';

    font-style: normal;

    color: #ffffff;

    font-size: 16px;

    line-height: 19px;

    font-weight: 600;

    text-decoration: none;

    margin-right: 2vw;

}



.btn-signup {

    /*background-image: url(../images/btn-signup.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 109px;

    height: 34px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Rubik';

    font-style: normal;

    color: #ffffff;

    font-size: 16px;

    line-height: 19px;

    font-weight: 500;

    text-decoration: none;

    margin-right: 2vw;

}



.chat-bubble {

    border: 2px solid rgba(255, 255, 255, 0.04);

    background: rgba(31, 35, 51, 0.32);

    width: 40px;

    height: 40px;

    border-radius: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: inset 4px 4px 12px rgba(23, 25, 32, 0.44);

    backdrop-filter: blur(6px);

    margin-right: 4vw;

}



.notification-bubble {

    border: 2px solid rgba(255, 255, 255, 0.04);

    background: rgba(31, 35, 51, 0.32);

    width: 40px;

    height: 40px;

    border-radius: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: inset 4px 4px 12px rgba(23, 25, 32, 0.44);

    backdrop-filter: blur(6px);

    margin-right: 1vw;

}



.income-carousel {
    margin-top: 64px;
    width: 100%;
    height: 84px;
    background: #141821;
    position: fixed;
    z-index: 997;
}



.income-carousel-parent {

    width: max-content;

    display: grid;

    grid-auto-flow: column;

    margin-left: 20px;

}



.income-carousel-child {

    display: flex;

    align-items: center;

    height: 59px;

    width: 239px;

}



.income-carousel-details {

    width: 160px;

    height: 48px;

    background: #292f44;

    backdrop-filter: blur(2px);

    z-index: 10;

    margin-left: 24px;

    clip-path: polygon(0% 0%, 100% 0, 94% 50%, 100% 100%, 0% 100%);

    border-radius: 6px;

}



.income-carousel-points {

    width: 200px;

    height: 40px;

    background: radial-gradient(100% 100% at 60% 60%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-right: 2px solid rgba(42, 48, 70, 0.64);

    border-radius: 12px;

    z-index: 9;

    margin-left: 24px;

    display: flex;

    justify-content: end;

    align-items: center;

}



.income-carousel-avatar {

    z-index: 11;

    -webkit-box-shadow: rgba(0, 0, 0, 0.9) 0px 0 10px;

    -moz-box-shadow: rgba(0, 0, 0, 0.9) 0 0 10px;

    box-shadow: rgba(0, 0, 0, 0.9) 0 0 10px;

    border-radius: 25px;

    border: 2px solid rgba(96, 254, 188, 0.24);



}



.income-carousel-avatar img {

    height: 48px;

    width: 48px;

    background-color: var(--background-avatar);

    border-radius: 25px;

}



.income-carousel-child .ov-carousel {

    position: absolute;



}



.income-points-amount {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    line-height: 14px;

    color: #43DBD6;

    margin: 0 6px;

    text-align: center;

}



.income-detail-parent {

    margin-left: 36px;

}





.income-detail-parent .income-network {

    color: #B2B6D1;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    font-size: 11px;

    text-transform: uppercase;

    margin: 0;

    margin-top: 6px;

}



.income-detail-parent .income-username {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    font-size: 13px;

    line-height: 14px;

    color: #ffffff;

    margin-top: 2px;
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}



.home-banner-parent {

    max-width: 1160px;

    margin: 0 auto;

}



.home-banner-main {

    width: 100%;

    height: 580px;

    border-radius: 24px;

    background-image: url(../images/back-light-top.svg), url(../images/back-light-bottom.svg), radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);

    background-position: left top, left bottom;

    background-repeat: no-repeat, no-repeat;



}







.btn-banner-signup {

    /*background-image: url(../images/btn-banner-signup.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 260px;

    height: 55px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    line-height: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #FFFFFF;



}



.btn-banner-signup p {

    margin: 0;

}



.btn-banner-amount {

    /*background-image: url(../images/btn-banner-amt.svg);*/

    width: 260px;

    height: 55px;

    margin-left: 42px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

}



.btn-banner-amount h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    line-height: 24px;

    color: #43DBD6;

    margin: 0;

}



.btn-banner-amount p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    line-height: 12px;

    color: #B2B6D1;

    margin: 0;

}





.home-banner-main {

    font-family: 'Rubik';

    font-style: normal;

    display: grid;

    grid-template-columns: auto auto;

    grid-template-rows: auto auto;

    grid-column-gap: 0px;

    grid-row-gap: 0px;

}



.home-banner-text {

    color: #FFFFFF;

    grid-area: 1 / 1 / 2 / 2;

    margin-top: 72px;

    margin-left: 100px;

}



.home-banner-description {

    grid-area: 2 / 1 / 3 / 2;

}



.home-banner-mascot {

    grid-area: 1 / 2 / 3 / 3;

    display: flex;

    align-items: center;

    flex-direction: column;

    background-image: url(../images/back-light-mascot.svg);

    background-size: 100% 100%;

    background-position: bottom 139px center;

    background-repeat: no-repeat;



}



.home-banner-mascot img:first-child {

    width: 340px;

    height: 456px;

    margin-top: -20px;

    margin-bottom: 2px;

}



.home-banner-description-child {

    display: flex;

    justify-content: center;

}



.home-banner-text h1:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 140%;

}



.home-banner-text h1:nth-child(2) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 140%;

    margin-left: 60px;

}



.home-banner-text p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    margin: 0;

    color: #B2B6D1;

}



.home-banner-text h1 span {

    color: #43DBD6;

}



.home-banner-description-two {

    color: #ffffff;

    display: flex;

    justify-content: center;

    margin-top: 80px;

    text-align: center;

}



.home-banner-description-two h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 28px;

    color: #43DBD6;

}



.stats-item:first-child {

    margin-right: 45px;

}



.stats-item:nth-child(2) {

    margin-right: 45px;

    margin-left: 45px;

}



.stats-item2 {

    margin-right: 45px;

    margin-left: 45px;

}



.stats-item3 {

    margin-left: 45px;

}



.divider {

    width: 2px;

    margin: 6px 0;

    background: #2F3750;

}



.nav-mobile {

    position: fixed;

    z-index: 999;

    left: 0;

    bottom: 0;

    align-items: center;

    flex-direction: row;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #161820 0%, #11141b 100%);

    width: 100%;

    overflow-y: visible;



}



.nav__link {

    position: relative;

    display: inline-flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

    height: 74px;

    top: 0;

    transition: .3s;

    text-decoration: none;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 9px;

    color: #B2B6D1;

    z-index: 1;

}



.nav__link.active .blur {

    position: absolute;

    background: linear-gradient(180deg, rgba(73, 253, 242, 0) 0%, rgba(73, 253, 242, 0.18) 100%);

    filter: blur(3px);

    height: 100%;

    width: 100%;

}



.nav__link svg {

    position: relative;

    height: 22px;

    color: #787ead;

    font-size: 22px;

    width: 30px;

    margin-bottom: 10px;

    margin-top: 15px;

    text-align: center;

    line-height: 32px;

    z-index: 999;

}



.nav__text {

    position: relative;

    color: #787ead;

    font-size: 11.5px;

    line-height: 14px;

    font-weight: 600;

    z-index: 999;

}



.nav__link.active svg {

    height: 22px;

    font-size: 22px;

    width: 30px;

    margin-bottom: 10px;

    margin-top: 15px;

    text-align: center;

    line-height: 32px;

}



.nav__link.active .nav__text {

    font-size: 11.5px;

    line-height: 14px;

    font-weight: 600;

    color: #ffffff;

}



.nav-mobile .active:after {

    content: "";

    position: relative;

    background-color: #43DBD6;

    width: 100%;

    height: 4px;

    margin-top: 8px;

    border-radius: 4px 4px 0px 0px;

    z-index: 100;

    transition-timing-function: cubic-bezier(.25, .1, .4, 1.4);

    transition-duration: var(--lamp-toolbar-duration);

}



.nav-mobile .nav-icon {

    stroke: #B2B6D1;

}



.nav-mobile .active .nav-icon {

    stroke: #ffffff;

}

.nav-mobile .nav-mobi-icon {

    fill: #B2B6D1;

}



.nav-mobile .active .nav-mobi-icon {

    fill: #ffffff;

}





.offcanvas {

    position: fixed;

    top: 154px !important;

    height: calc(100% - 154px);

    width: 340px !important;

    background: #1A1D27;

    -webkit-box-shadow: 0px 0 5px 0px #1E212B;

    -moz-box-shadow: 0px 0 5px 0px #1E212B;

    box-shadow: 0px 0 5px 0px #1E212B;

}



.offcanvas-header {

    border-bottom: 2px solid #1E212B;

    height: 55px;

}



.offcanvas-body {

    padding: 8px 0px 0px 0px;

    overflow-y: auto;

    overflow-x: hidden;

    -ms-overflow-style: none;

    /* Internet Explorer 10+ */

    scrollbar-width: none;

    /* Firefox */

}



.offcanvas-body::-webkit-scrollbar {

    display: none;

    /* Safari and Chrome */

}



.chat-part-one {

    display: flex;

    color: #ffffff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 17px;

    align-items: center;

}



.chat-part-one p {

    margin-bottom: 0;

    margin-left: 8px;

}



.nav-mobile {

    display: none;

}



.works-section {

    margin-top: 14vh;

    text-align: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    color: #FFFFFF;

}



.works-section h1 span {

    color: #43DBD6;

}



.chatShown .main-section {

    margin-right: 340px;

}



.chat-part-two {

    background-image: url(../images/btn-chat.svg);

    width: 160px;

    height: 32px;

    margin-left: 83px;

}



.chart-part {

    display: flex;



}



.chat-bottom {

    position: absolute;

    background: #1A1D27;

    border-width: 2px 0px 0px 2px;

    border-style: solid;

    border-color: rgba(255, 255, 255, 0.02);

    backdrop-filter: blur(6.5px);

    height: 72px;

    width: 100%;

    bottom: 0;

}



.chatglow {

    width: 54px;

    height: 4px;

    background: radial-gradient(103.39% 110.77% at 0% 78.95%, #60FEBC 0%, #49FDF2 100%);

    margin-top: -6px;

    margin-left: 24px;

    border-radius: 25px 25px 0 0;

}



.avatar-line {

    width: 32px;

    height: 32px;



    color: #ffffff;

}



.avatar-line img {

    width: 32px;

    height: 32px;

    border: 2px solid rgba(96, 254, 188, 0.24);

    background: #2a7496;

    border-radius: 25px;

}



.chat-item {

    margin-top: 18px;

    display: grid;

    grid-template-columns: 45px auto;

    grid-template-rows: auto auto;

    grid-column-gap: 0px;

    grid-row-gap: 0px;

}



.avatar-line {

    grid-area: 1 / 1 / 3 / 2;

    margin-right: 12px;

}



.user-line {

    grid-area: 1 / 2 / 2 / 3;

    color: #ffffff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    display: flex;

}



.chat-line {

    grid-area: 2 / 2 / 3 / 3;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    color: #ffffff;

    background: rgba(42, 48, 70, 0.44);

    box-shadow: 0px 4px 4px rgba(23, 25, 32, 0.24), inset 0px 2px 4px rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(2px);

    padding: 10px 16px;

    border-radius: 12px;

}



.chat-list {

    padding-right: 16px;
    padding-left: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 83px;
    height: calc(100vh - 147px);

}



.chat-username p {

    margin-bottom: 8px;

}



.chat-time p {

    margin-bottom: 8px;

}



.chat-bottom {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    text-align: center;

    padding: 16px 24px;

}



.chat-bottom .chatEmojiIcon {

    position: absolute;

    right: 29px;

    top: 22px;

    margin-right: 5px;

    cursor: pointer;

}



.chat-bottom .chatInputTextareaStyle {

    background: rgba(31, 35, 51, 0.64);

    border: 2px solid rgba(255, 255, 255, 0.04);

    box-shadow: inset 0px 3.62068px 6px rgba(0, 0, 0, 0.11);

    border-radius: 8px;

    margin-bottom: 0;

    color: #B2B6D1;

    width: 100%;

    height: 40px;

    resize: none;

    outline: 0;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 14px;

    padding: 13px 30px 13px 12px;

    -webkit-box-shadow: none;

    -moz-box-shadow: none;

    box-shadow: none;

}



.chat-bottom .chatInputTextareaStyle::-webkit-scrollbar {

    display: none;

}



.steps-section {

    display: grid;

    grid-template-columns: auto auto auto;

    justify-content: center;

    margin-top: 60px;

    margin-bottom: 120px;

    position: relative;

    z-index: -1;

}



.steps-part {

    width: 360px;

    height: 380px;

    margin-right: 40px;

    position: relative;

    z-index: -1;

}



.steps-part:last-child {

    margin-right: 0px;

}



.step-one {

    background: url(../images/stepone.svg);

    background-repeat: no-repeat;

}



.step-two {

    background: url(../images/steptwo.svg);

    background-repeat: no-repeat;

}



.step-three {

    background: url(../images/stepthree.svg);

    background-repeat: no-repeat;

}



.bottom-blur {

    background: rgba(31, 35, 51, 0.04);

    box-shadow: inset 0px 8px 12px rgba(124, 144, 253, 0.12);

    clip-path: polygon(50% 13%, 100% 0, 96% 100%, 5% 100%, 0 0);

    filter: drop-shadow(1px 6px 3px rgba(50, 50, 0, .4));

    width: 360px;

    height: 140px;

    backdrop-filter: blur(32px);

    border-radius: 27px;

    position: absolute;

    bottom: 5px;

}



.bottom-blur p:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 24px;

    line-height: 28px;

    color: #43DBD6;

    margin-top: 44px;

    margin-bottom: 0px;

}



.bottom-blur p:nth-child(2) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    color: #ffffff;

    margin-top: 16px;

}



.text-part p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 800;

    font-size: 48px;

    line-height: 57px;

    text-align: start;

    margin-top: 38px;

    color: #43DBD6;

}



.avatar-part {

    position: absolute;

    top: 32px;

    margin-left: 60px;

}



.leaderboard-section h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    color: #ffffff;

    text-align: center;

}



.step-one .avatar-part {

    background: url(../images/avatar-back-one.svg);

    background-repeat: no-repeat;

    background-size: contain;

}



.step-two .avatar-part {

    background: url(../images/avatar-back-two.svg);

    background-repeat: no-repeat;

    background-size: contain;

}





.step-three .avatar-part {

    background: url(../images/avatar-back-one.svg);

    background-repeat: no-repeat;

    background-size: contain;

}



.place-section .place-user {

    width: 320px;

    height: 140px;

    background: url(../images/personprize.png);

    border-radius: 12px;



}



.place-section .place-prize {

    clip-path: polygon(100% 0, 100% 100%, 13% 100%, 0 60%, 0 0);

    width: 320px;

    height: 140px;

    background: radial-gradient(93.79% 93.79% at 50% 50%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 12px;

    position: relative;

    right: 40px;

    margin-top: 12px;

}



.monthly-leaderboard {

    margin-bottom: 100px;

    position: relative;

    z-index: -1;



}



.place-section {

    display: grid;

    grid-template-columns: auto auto auto;

    justify-content: center;

    column-gap: 80px;

    margin-top: 100px;

}



.place-section .points-prize div:first-child {

    color: #43DBD6;

}



.place-section .points-prize div:nth-child(2) {

    color: #ffffff;

}



.place-section .place-prize {

    display: grid;

    grid-template-columns: auto auto;

    justify-content: center;

    align-items: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 24px;

    line-height: 28px;

}



.place-section .points-prize {

    margin-right: 54px;

}



.place-user .top-place {

    display: flex;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 800;

    font-size: 20px;

    line-height: 28px;

    color: #ffffff;

    justify-content: center;

    align-items: center;

    position: relative;

    top: -27px;

    left: -31px;

}



.place-user .top-place img {

    width: 42px;

    height: 75px;

}



.bottom-place img {

    width: 48px;

    height: 48px;

    background-color: var(--background-avatar);

    border-radius: 25px;

    border: 2px solid rgba(96, 254, 188, 0.24);

    margin-right: 20px;

}



.prize-user-text p:first-child {

    color: #ffffff;

}



.prize-user-text p:nth-child(2) {

    color: #ffffff;

}



.place-user .bottom-place {

    display: grid;

    grid-template-columns: auto auto;

    justify-content: left;

    top: -21px;

    position: relative;

    margin-left: 44px;



}



.top-place p span {

    color: #43DBD6;

}



.top-place img {

    margin-right: 21px;



}



.bottom-place .prize-user-text p {

    margin-bottom: 6px;

}



.bottom-place .prize-user-text p:nth-child(2) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;



    color: #B2B6D1;

}



.bottom-place .prize-user-text p:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 19px;

}



.place-section .place-prize .points-avatar img {

    background: url(../images/points-avatar-background.svg);

}



.follow-section h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    color: #ffffff;

    text-align: center;

}



.follow-section h1 span {

    color: #43DBD6;

}



.follow-section {

    margin-bottom: 180px;

}



.basic-social .social-carousel-child {

    display: flex;

    align-items: center;

    height: 72px;

    width: 200px;

    margin-right: 72px;

}



.basic-social .social-carousel-child .ov-carousel {

    position: absolute;

}



.basic-social {

    display: flex;

    justify-content: center;

    z-index: 10;

    position: relative;

}



.basic-social .social-carousel-avatar {

    display: flex;

    align-items: center;

    height: 72px;

}



.social-carousel-avatar img {

    width: 50px;

    height: 50px;

    border-radius: 25px;

}



.social-carousel-details {

    width: 119px;

    height: 45px;

    background: #292f44;

    backdrop-filter: blur(2px);

    z-index: 10;

    margin-left: 24px;

    clip-path: polygon(0% 0%, 100% 0, 94% 50%, 100% 100%, 0% 100%);

    border-radius: 6px;

}



.social-carousel-avatar {

    z-index: 11;

}



.social-carousel-points {

    width: 173px;

    height: 35px;

    background: radial-gradient(100% 100% at 60% 60%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-right: 2px solid rgba(42, 48, 70, 0.64);

    border-radius: 12px;

    z-index: 9;

    margin-left: 24px;

    display: flex;

    justify-content: end;

    align-items: center;

}



.basic-social .ov-carousel {

    margin-right: 10px;

    display: flex;

    align-items: center;

}



.basic-social .social-detail-parent p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 20px;

    line-height: 24px;

    /* identical to box height */

    margin-bottom: 0;





    color: #FFFFFF;

}







.social-detail-parent {

    margin-left: 36px;

    display: flex;

    align-items: center;

}



.social-points-amount {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 900;

    font-size: 16px;



    color: #43DBD6;

    margin: 0 10px;

    text-align: center;

}



.follow-main {

    margin-top: 60px;

}



.discord-section-parent {

    max-width: 1160px;

    margin: 0 auto;

}



.discord-section {

    margin-top: 120px;

    width: 100%;

    height: 430px;

    border-radius: 24px;

    background-image: radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);

    display: grid;

    grid-template-columns: auto auto;

}



.discord-section .d-two {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 32px;

    line-height: 38px;

    color: #ffffff;

}



.discord-section .d-two span {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 32px;

    line-height: 38px;

    color: #43DBD6;

}



.d-three .social-carousel-child {

    display: flex;

    align-items: center;

    height: 72px;

    width: 100%;

    margin-right: 72px;

    position: relative;

}



.d-three .social-carousel-child .ov-carousel {

    position: absolute;

}



.discord-info .social-carousel-details {

    width: 340px;

    height: 75px;

    background: #292f44;

    backdrop-filter: blur(2px);

    z-index: 10;

    margin-left: 24px;

    clip-path: polygon(0% 0%, 100% 0, 94% 50%, 100% 100%, 0% 100%);

    border-radius: 6px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 24px;

    line-height: 28px;





    color: #FFFFFF;

}



.discord-info .social-carousel-points {

    width: 438px;

    height: 68px;

    background: radial-gradient(100% 100% at 60% 60%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-right: 2px solid rgba(42, 48, 70, 0.64);

    border-radius: 12px;

    z-index: 9;

    margin-left: 24px;

    display: flex;

    justify-content: end;

    align-items: center
}



.discord-section .discord-avatar {

    display: flex;

    justify-content: center;

}



.discord-section .discord-info-parent {

    margin: auto;

}



.discord-info .ov-carousel {

    margin-right: 10px;

    display: flex;

    align-items: center;

}



.discord-info .social-detail-parent p {

    margin-bottom: 0;

}



.discord-section .d-two {

    margin-top: 34px;

}



.discord-section .d-two p:nth-child(2) {

    margin-left: 60px;

}



.discord-section .d-three {

    margin-top: 44px;

}





footer {

    background: #1A1D27;

}



.footer-section {

    max-width: 1160px;

    margin: auto;

    padding-top: 40px;

    padding-bottom: 60px;



}



.footer-logo {

    width: 200px;

    height: 36px;

}



.footer-submit-email {

    width: 360px;

    height: 48px;



    background: url(../images/footer-input.png);

    border: none;

    box-shadow: inset 4px 4px 12px rgba(23, 25, 32, 0.44);

    backdrop-filter: blur(6px);

    display: flex;

}



.merged-input {

    width: 300px;

    padding-left: 12px;

    background: transparent;

    border: none;

}



.merged-input:focus-visible {

    outline: none;

}



.footer-section .nav-link {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    color: #B2B6D1;
    justify-content: start;

}



.footer-section .sub-text {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;

    color: #B2B6D1;

}



.footer-section h5 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    color: #FFFFFF;

}



.merged-button {

    background: url(../images/footer-button.png);

    background-repeat: no-repeat;

    width: 76px;

    justify-content: center;

    display: flex;

    align-items: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    /* text */



    color: #B2B6D1;

}



.footer-top {}



.copyright-section {

    height: 72px;

    background: #141821;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    font-size: 14px;

    line-height: 17px;

    display: flex;

    justify-content: center;

    align-items: center;

    /* text */



    color: #B2B6D1;

}



.copyright-section p {

    margin-bottom: 0;

}



.copyright-section span {

    color: #ffffff;

}



.userdata-panel img {

    width: 100px;

    height: 100px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.userdata-panel {

    margin-top: 60px;

}



.userdata-section .userdata-panel h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    /* identical to box height */







    color: #FFFFFF;

    margin-top: 10px;

}





.userdata-section .userdata-panel p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    margin-bottom: 14px;



    /* text */



    color: #B2B6D1;

}



.userdata-section .userdata-panel .text-colored {

    font-weight: 700;

    font-size: 24px;

    line-height: 28px;

    color: #43DBD6;

}



.userdata-section .userdata-panel .text-whitey {

    color: #ffffff;

}



.userdata-section .userdata-panel .first-row-p {

    margin-top: 20px;

}



.user-profile-section {

    max-width: 1160px;

    margin: 0 auto;

    justify-content: center;

    display: flex;

    text-align: center;

    color: #ffffff;

}



.userdata-section h1:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    /* identical to box height */







    color: #FFFFFF;

}



.swiper {

    width: 100%;

    height: 200px;

}



.featured-offers-panel {

    margin-top: 40px;

}



.offerwall-panel {

    margin: 0px 8px;

}



.offerwall-panel h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 43px;

    /* identical to box height */




    color: #FFFFFF;

}



.featured-section {

    margin-left: 12px;

    margin-right: 12px;

}



.swiper-slide {

    text-align: left;

    font-size: 18px;

    height: 200px;



    /* Center slide text vertically */

    display: -webkit-box;

    display: -ms-flexbox;

    display: -webkit-flex;

    display: flex;

    -webkit-box-pack: center;

    -ms-flex-pack: center;

    -webkit-justify-content: center;

    justify-content: center;

    -webkit-box-align: center;

    -ms-flex-align: center;

    flex-direction: column;

}



.swiper-slide .offerimage img {

    width: 80px;

    height: 80px;

    padding: 6px;

    border-radius: 12px;

}



.swiper-slide .offerimage {

    background: rgba(42, 48, 70, 0.44);

    width: 80px;

    height: 80px;

    border-radius: 12px;

}



.swiper-slide .offername {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */

    text-align: left;



    margin-bottom: 5px;

    margin-top: 13px;



    /* text */



    color: #B2B6D1;

}



.swiper-slide .offer-desc {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    font-size: 12px;

    line-height: 12px;

    margin-bottom: 6px;



    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

    /* text */



    color: #B2B6D1;

}



.swiper-slide .offer-points {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */







    color: #FFFFFF;

}



.offerwall-parent {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 28px;





    color: #FFFFFF;

}



.offerwall-panel .network-logo {

    width: 100%;

    height: 100%;

    border-radius: 12px;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202F 0%, #3E3341 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

}



.network-logo img {

    width: 108px;

    height: 32px;

}



.network-logo {

    display: flex;

    justify-content: center;

    align-items: center;

}



.offerwall-panel .network-logo-parent {

    width: 160px;

    height: 90px;

    padding: 2px;

    border-radius: 12px;

    position: relative;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202F 0%, #4b4b4b 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

}





.offers-pill {

    background: #00ada769;

    border-radius: 0px 12px 0px 25px;

    position: absolute;

    width: 76px;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    line-height: 1.7;

    font-size: 12px;

    display: flex;

    justify-content: center;

    right: 0;
    z-index: 9;

}



.featured-offers-section {

    max-width: 1160px;

    margin: auto;

    margin-bottom: 80px;

    text-align: center;



}







.offerwall-parent {

    max-width: 1160px;

    margin: auto;

    margin-bottom: 80px;

    text-align: center;



}



.offerwall-parent-uno {

    max-width: 1160px;

    margin: auto;

    margin-bottom: 10px !important;

    text-align: center;

}

.network-card {

    width: 160px;

    text-align: center;

    margin-left: 10px;
    margin-right: 10px;

    margin-top: 18px;

}



.network-card.swiper-slide {



    display: flex;

    justify-content: center;

    align-items: center;

}



.featured-offers-section h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 24px;

    line-height: 28px;





    color: #FFFFFF;

}



.swiper-scrollbar-drag {

    background: radial-gradient(103.39% 110.77% at 0% 78.95%, #55DBAC 0%, #43DBD6 100%);

    border-radius: 2px;

    height: 2px;

}



swiper-horizontal>.swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {

    height: 2px;

    background: rgba(45, 50, 70, 0.44);

    border-radius: 2px;

}



.network-rating {

    margin-bottom: 30px;

}



.network-rating span {

    font-size: 10px;

    color: #2F3750;

}



.network-rating .checked {

    color: #43DBD6;

}



.network-name p {

    margin-bottom: 0;

    margin-top: 8px;

}





.withdraw-panel {

    margin: 60px 8px;

}



.withdraw-panel h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 43px;

    /* identical to box height */

    text-align: center;





    color: #FFFFFF;

}



.withdraw-panel .network-logo-parent {

    width: 160px;

    height: 90px;

    padding: 2px;

    border-radius: 12px;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202F 0%, #4b4b4b 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

}



.withdraw-panel .network-logo {

    width: 100%;

    height: 100%;

    border-radius: 12px;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202F 0%, #3E3341 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

}



.countdown-section {

    margin-top: 50px;

}



.countdown-section .countdown-panel h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 43px;

    text-align: center;



    color: #FFFFFF;

}





.cd__unit {

    font-size: 3.75em;

    line-height: 1;

    margin: 0 0.75rem;

    width: 2ch;

}



.image-tabler {

    display: flex;

    align-items: center;

}



.image-tabler p {

    margin: 0;

}



.image-tabler img {

    width: 32px;

    height: 32px;

    background-color: var(--background-avatar);

    border-radius: 25px;

    border: 2px solid rgba(96, 254, 188, 0.24);

    margin-right: 20px;

}



.table-rankings {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    /* text */



    color: #B2B6D1;

    max-width: 1160px;

    margin: auto;

}



.table-rankings table {

    width: 100%;

    border-collapse: separate;

    border-spacing: 0 8px;

}



.table-rankings table tr:nth-child(2n+3) {

    background: radial-gradient(145.13% 145.13% at 50% 0%, #1A1D27 0%, #141821 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    margin-bottom: 12px;

    height: 48px;

    padding-left: 30px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;



    color: #FFFFFF;

}



.table-rankings table tr:nth-child(even) {

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    margin-bottom: 12px;

    height: 48px;

    padding-left: 30px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;



    color: #FFFFFF;

}



.table-rankings table td {

    padding-left: 40px;



}



.table-rankings table th {

    padding-left: 40px;

}



.table-rankings table tr td:first-child {

    border-radius: 24px 0 0 24px;

    color: #43DBD6;

}



.table-rankings table tr td:last-child {

    border-radius: 0px 24px 24px 0px;

    text-align: center;

}



.table-rankings.settings-rankings table tr td:first-child {

    color: #ffffff;

}



.pagination-reward {

    display: flex;

    list-style: none;

    justify-content: center;

    margin-top: 40px;

    padding: 0;

}



.pagination-reward .page-item {

    background: url(../images/pagination-inactive.svg);

    width: 40px;

    height: 40px;

    margin-right: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.pagination-reward .page-item.active {

    background: url(../images/pagination-active.svg);

    width: 40px;

    height: 40px;

    margin-right: 8px;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #ffffff;

}



.user-panel img {

    width: 48px;

    height: 48px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.user-panel {

    color: #ffffff;

    display: grid;

    grid-template-columns: auto auto;

    grid-template-rows: auto auto;

    grid-column-gap: 12px;

    margin-right: 20px;

    align-items: center;



}



.user-panel-resp img {

    width: 40px;

    height: 40px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.user-panel-resp {

    color: #ffffff;

    margin-right: 10px;



}



.progress-user .bar {



    border-radius: 4px;

    height: 4px;

}



.progress-user .progress {

    height: 4px;

    width: 0%;

    background: #43DBD6;

}



.progress-user {

    width: 100%;

    background: #292f44;

    grid-area: 2 / 2 / 3 / 3;

    height: 4px;

    border-radius: 4px;

}





.header-username {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 17px;

    /* identical to box height */

    display: flex;

    justify-content: center;

    align-items: center;



    color: #FFFFFF;



}





.header-username p {

    width: 100px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.header-user {

    grid-area: 1 / 1 / 3 / 2;

}



.header-username {

    grid-area: 1 / 2 / 2 / 3;

}



.income-panel {

    box-shadow: inset 0px 1px 8px #010101;
    background: #141821;
    border-radius: 8px;
    width: 160px;

    height: 32px;

    margin-right: 40px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    line-height: 14px;





    color: #FFFFFF;

    display: flex;

    justify-content: center;

    align-items: center;

}



.income-panel span {

    color: #43DBD6;

}



.profile-parent {

    max-width: 1160px;

    margin: 0 auto;

}



.profle-user-innate {

    display: grid;

    grid-template-columns: 100px auto;

    grid-template-rows: auto auto;

    grid-column-gap: 24px;

    grid-row-gap: 0px;

}



.profile-avatar {

    grid-area: 1 / 1 / 3 / 2;



}



.profile-avatar img {

    width: 100px;

    height: 100px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.profile-top-username {

    grid-area: 1 / 2 / 2 / 3;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 36px;

    line-height: 43px;

    /* identical to box height */







    color: #FFFFFF;

}



.profile-top-xp {

    grid-area: 2 / 2 / 3 / 3;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 24px;

    line-height: 28px;





    /* text */



    color: #B2B6D1;

}







.progress-profile {

    width: 100%;

    background: #292f44;

    height: 6px;

    border-radius: 4px;

    margin-top: 11px;



}



.progress-profile .bar {



    border-radius: 4px;

    height: 6px;

}



.progress-profile .progress {

    height: 6px;

    width: 0%;

    background: #43DBD6;

}



.profile-parent .level-bar {

    margin-top: 33px;

}



.profile-level-text p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    /* text */

    margin-bottom: 0;



    color: #B2B6D1;

}



.profile-level-text {

    display: flex;

}



.profile-level-text p:last-child {

    margin-left: auto;

}



.profile-level-reward {

    height: 120px;

    padding: 2px;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202f0f 0%, #4b4b4b17 100%);

    box-shadow: inset 0px 12px 24px rgb(42 48 70 / 24%), inset 0px -12px 24px rgb(42 48 70 / 24%);

    border-radius: 24px;

    margin-top: 40px;

}



.profile-level-reward-inner {

    height: 120px;

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.profile-row-card .first-row-card {

    padding: 2px;

    background: radial-gradient(145.13% 145.13% at 50% 0%, #20202f0f 0%, #4b4b4b17 100%);

    box-shadow: inset 0px 12px 24px rgb(42 48 70 / 24%), inset 0px -12px 24px rgb(42 48 70 / 24%);

    border-radius: 24px;

    height: 120px;

}



.profile-row-card .second-row-card {

    background: radial-gradient(145.13% 145.13% at 50% 0%, #1A1D27 0%, #141821 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    height: 120px;

}





.profile-chart {

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    height: 100%;

}



.first-row-card-inner {

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    height: 120px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.second-row-card-inner {

    background: radial-gradient(145.13% 145.13% at 50% 0%, #1A1D27 0%, #141821 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    height: 120px;

}



.equal {

    display: flex;

    display: -webkit-flex;

    flex-wrap: wrap;

}



.module-border-wrap {

    background: linear-gradient(to right, red, purple);

    width: 100%;

    height: 100%;

}





.row.display-flex {

    display: flex;

    flex-wrap: wrap;

}



.row.display-flex>[class*='col-'] {

    flex-grow: 1;

}



.apexcharts-xaxis-label {

    color: #ffffff;

    background: gradient(145.33% 145.33% at 41.3% -48.67%, #49fdf1 0%, rgba(96, 254, 188, 0) 100%);

}



.profile-chart {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 12px;

    line-height: 14px;





    /* text */



    color: #B2B6D1;

}



.profile-chart hr {

    margin: 0px 20px;

    border-color: #2F3750;

    background-color: #2F3750;

    color: #2F3750;

}



.profile-chart p {

    margin-left: 20px;

    padding-top: 16px;

    padding-bottom: 16px;

    margin-bottom: 0;

}



.profile-level-reward-inner .lvl-txt {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 24px;

    line-height: 28px;





    /* text */

    margin-right: 38px;

    color: #B2B6D1;

}



.profile-level-reward-inner .lvl-avatar img {

    width: 48px;

    height: 48px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.profile-level-reward-inner .lvl-avatar p:nth-child(2) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;





    /* text */



    color: #B2B6D1;

}



.profile-level-reward-inner .lvl-avatar p:nth-child(3) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    color: #FFFFFF;

}



.profile-level-reward-inner .lvl-avatar {

    display: grid;

    grid-template-columns: auto auto;

}



.lvl-avatar-img {

    grid-area: 1 / 1 / 3 / 2;

    margin-right: 12px;

}



.lvl-avatar-ach {

    grid-area: 1 / 2 / 2 / 3;

    margin-bottom: 8px;

}



.lvl-avatar-name {

    grid-area: 2 / 2 / 3 / 3;

}



.first-row-card-inner p:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 28px;



    /* rad */



    background: radial-gradient(103.39% 110.77% at 0% 78.95%, #55DBAC 0%, #43DBD6 100%)
        /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */

    ;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

    text-fill-color: transparent;

}



.first-row-card-inner p:nth-child(2) {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */







    color: #FFFFFF;

}



.second-row-card-inner p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;





    /* text */



    color: #B2B6D1;

}



.second-row-card-inner .chart-info {

    display: flex;

    padding: 16px 16px 0px 16px;

}



.second-row-card-inner .chart-info p:last-child {

    margin-left: auto;

    margin-bottom: 0;

}



.second-row-card-inner .chart-info span {

    color: #ffffff;

}



.second-row-card-inner .chart-info .val-span {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */



    text-align: right;





    color: #FFFFFF;

}





.profile-bottom-panel {

    max-width: 1160px;

    margin: 48px auto;

}



.settings-list-item-alt {

    background: radial-gradient(145.13% 145.13% at 50% 0%, #1A1D27 0%, #141821 100%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    margin-bottom: 12px;

    height: 48px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */





    color: #FFFFFF;

    display: flex;

    align-items: center;

    padding: 0px 40px;

}



.settings-list-item {

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 24px;

    margin-bottom: 12px;

    height: 48px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */



    color: #FFFFFF;

    display: flex;

    align-items: center;

    padding: 0px 40px;

}



.settings-list-item-alt p {

    margin-bottom: 0;

}



.settings-list-item p {

    margin-bottom: 0;

}



.settings-list-item-alt p:nth-child(2) {

    margin-left: auto;

}



.settings-list-item p:nth-child(2) {

    margin-left: auto;

}



.settings-rankings {

    margin: 0;

}



.settings-btn {

    /*background: url(../images/settings_btn.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 128px;

    height: 22px;

    background-repeat: no-repeat;

    background-size: 128px 22px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    line-height: 14px;

    cursor: pointer;



    color: #FFFFFF;

    display: flex;

    justify-content: center;

    align-items: center;

}



.settings-list-item .extra-settings {

    display: flex;

    margin-left: auto;



}



.settings-list-item .extra-settings p {

    width: 150px;

    text-align: right;

}



.settings-list-item-alt .extra-settings p {

    width: 150px;

    text-align: right;

}



.settings-list-item-alt .extra-settings {

    display: flex;

    margin-left: auto;



}



.settings-rankings .success {

    color: #43DBD6;

}



.success {

    color: #43DBD6;

}



.settings-rankings .danger {

    color: rgb(219, 78, 78);

}



.txt-cw {

    text-align: center;

}



.referral-rankings tr td:first-child img {

    width: 32px;

    height: 32px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

    margin-right: 10px;

}



.referral-rankings tr td:first-child div {

    display: flex;

    align-items: center;

}



.referral-rankings tr td:first-child p {

    margin-bottom: 0;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */



    color: #FFFFFF;

}



.user-panel-resp {

    display: none;

}



.modal-backdrop {

    backdrop-filter: blur(6px);

}



:root {

    --hue: 223;

    --bg1: hsl(var(--hue), 10%, 90%);

    --bg2: hsl(var(--hue), 10%, 100%);

    --fg1: hsl(var(--hue), 10%, 10%);

    --fg2: hsl(var(--hue), 10%, 30%);

    --primary1: hsl(var(--hue), 90%, 45%);

    --primary2: hsl(var(--hue), 90%, 55%);

    --primary3: hsl(var(--hue), 90%, 65%);

    --primary4: hsl(var(--hue), 90%, 75%);

    --primary5: hsl(var(--hue), 90%, 85%);

}



.cd,

.cd__unit-group,

.cd__digits {

    display: flex;

    justify-content: center;

    font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 - 320));

}



.cd {

    flex-wrap: wrap;

    text-align: center;

}



.cd__unit-group {

    margin-bottom: 1.5em;

}



.cd__digits,

.cd__digit {

    position: relative;

}



.cd__digits {

    box-shadow: 0 0.3em 0.05em rgba(26, 29, 39, 1) inset, 0 -0.12em 0.05em rgba(26, 29, 39, 1) inset;

    font-weight: bold;

    height: 76px;

    margin-bottom: 0.5rem;

    overflow: hidden;

    color: #43DBD6;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 48px;

}



.cd__digit {

    width: 1ch;

    z-index: -1;

    margin-top: 7px;

}



.cd__digit div:nth-child(2) {

    margin-top: 8px;

}



.cd__semi-colon {

    color: #43DBD6;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 48px;

    display: flex;

    align-items: center;

}



.digit-parent {

    width: 48px;

    height: 60px;

    margin-top: 12px;

    margin-right: 6px;

    z-index: -1;

    /* panelbg */

    display: flex;

    justify-content: center;

    background: linear-gradient(109.21deg, rgba(37, 43, 65, 0.44) -11.6%, rgba(42, 48, 70, 0.44) 21.19%, rgba(37, 43, 65, 0.44) 51.35%, rgba(42, 48, 70, 0.44) 81.51%, rgba(37, 43, 65, 0.44) 114.29%);

    box-shadow: inset 0px 12px 24px rgba(42, 48, 70, 0.24), inset 0px -12px 24px rgba(42, 48, 70, 0.24);

    border-radius: 8px;

}



.cd__digit--roll-in {

    animation: rollIn 0.5s ease-in-out;

}



.cd__next-digit-fade {

    animation: fade 0.5s ease-in-out;

}



.cd__prev-digit-fade {

    animation: fade 0.5s ease-in-out reverse;

}



.cd__unit-label {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */

    text-transform: capitalize;

    /* text */

    color: #B2B6D1;

}



.cd__progress {

    width: 100%;

}



.btn {

    background: var(--primary2);

    border-radius: 50%;

    color: #fff;

    position: fixed;

    right: 1.5em;

    bottom: 1.5em;

    text-align: center;

    width: 2.25em;

    height: 2.25em;

    transition: background-color 0.15s linear;

    -webkit-appearance: none;

    appearance: none;

}



.btn:focus,

.btn:hover {

    background-color: var(--primary1);

}



.btn__text {

    display: block;

    font-size: 1.5em;

    font-weight: bold;

    height: 100%;

    padding-top: 0.125rem;

}



.content {

    background: var(--bg2);

}



.content__wrap {

    margin: auto;

    padding: 3em 1.5em 1.5em;

    max-width: 32em;

}



/* Dark theme */

@media (prefers-color-scheme: dark) {

    :root {

        --bg1: hsl(var(--hue), 10%, 10%);

        --bg2: hsl(var(--hue), 10%, 20%);

        --fg1: hsl(var(--hue), 10%, 90%);

        --fg2: hsl(var(--hue), 10%, 70%);

    }

}



/* Animations */

@keyframes rollIn {

    from {

        transform: translateY(-100%);

    }



    to {

        transform: translateY(0);

    }

}



@keyframes fade {

    from {

        opacity: 0;

    }



    to {

        opacity: 1;

    }

}





.popup {

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 1046;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);



}



.popup.is-visible {

    opacity: 1;

    visibility: visible;

}



.popup-authentication {

    transform: translateY(-50%);

    transition: 500ms all;

    position: relative;

    width: 800px;

    margin: 2em auto;

    padding: 40px;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background:  radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 24px;

}



.popup-avatar-modal {

    transition: 500ms all;

    position: relative;

    width: 960px;

    margin: 2em auto;

    top: 16%;

    padding: 40px;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background: radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 24px;

}



.popup-signup .popup-authentication {

    transform: translateY(-50%);

    transition: 500ms all;

    position: relative;

    width: 960px;

    margin: 2em auto;

    padding: 40px;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background:  radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 24px;

}



.is-visible .popup-authentication {

    transform: translateY(0);

}



.popup-resetpass {

    transform: translateY(-50%);

    transition: 500ms all;

    position: relative;

    width: 560px;

    margin: 2em auto;

    top: 16%;

    padding: 40px;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background: url(../images/signup-background.svg), radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 24px;

}



.is-visible .popup-resetpass {

    transform: translateY(0);

}





.popup h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    line-height: 140%;

    margin-top: 24px;

    color: #FFFFFF;

}



.popup p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 140%;

    margin-bottom: 0;

    /* text */



    color: #B2B6D1;

}



.popup .signup-inp {

    background: url(../images/form-inputs.svg), rgba(31, 35, 51, 1);

    -webkit-clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    width: 360px;

    height: 48px;

    margin-top: 8px;

}



.popup .signup-inp input {

    background: transparent;

    border: none;

    width: 300px;

    height: 46px;



}



.signup-inputs {

    margin-top: 8px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

}



.signup-inp input:focus-visible {

    outline: none;

}





.signup-inp {

    background: url(../images/form-inputs.svg), rgba(31, 35, 51, 1);

    -webkit-clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    width: 360px;

    height: 48px;

    margin-top: 8px;

}



.signup-inp input {

    background: transparent;

    border: none;

    width: 300px;

    height: 46px;



}



.signup-checkbox {

    display: flex;

    text-align: initial;

    width: 360px;

    margin: 24px auto;

}



.signup-checkbox p {

    margin-left: 12px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 160%;

    /* or 19px */





    /* text */



    color: #B2B6D1;

}



.signup-checkbox span {

    color: #43DBD6;

}



/*Checkboxes styles*/

input[type="checkbox"] {

    display: none;

}



input[type="checkbox"]+label {

    display: block;

    position: relative;

    padding-left: 35px;

    margin-bottom: 20px;

    font: 12px 'Rubik';

    color: #ddd;

    cursor: pointer;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



input[type="checkbox"]+label:last-child {

    margin-bottom: 0;

}



input[type="checkbox"]+label:before {

    content: '';

    display: block;

    width: 20px;

    height: 20px;

    border: 2px solid #43DBD6;

    background: rgba(31, 35, 51, 0.64);

    position: absolute;

    left: 0;

    top: 0;

    opacity: .6;

    -webkit-transition: all .12s, border-color .08s;

    transition: all .12s, border-color .08s;

}



input[type="checkbox"]:checked+label:before {

    width: 10px;

    top: -5px;

    left: 5px;

    border-radius: 0;

    opacity: 1;

    border-top-color: transparent;

    border-left-color: transparent;

    -webkit-transform: rotate(45deg);

    transform: rotate(45deg);

}



.register-btn {

    /*background: url(../images/signup-btn-reg.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 354px;

    height: 44.31px;

    border: none;

    background-size: 354px 44.31px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    line-height: 24px;

    /* identical to box height */



    text-transform: capitalize;



    color: #FFFFFF;

}



.or_divided {

    width: 360px;

    margin: auto;

    margin-top: 10px;

}



.or_divided .decorated {

    overflow: hidden;

    text-align: center;

}



.or_divided .decorated>span {

    position: relative;

    display: inline-block;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    text-transform: uppercase;



    /* text */



    color: #B2B6D1;

}



.or_divided .decorated>span:before,

.or_divided .decorated>span:after {

    content: '';

    position: absolute;

    top: 50%;

    border: 1px solid #2F3750;

    width: 100vw;

    margin: 0 12px;

}



.or_divided .decorated>span:before {

    right: 100%;

}



.or_divided .decorated>span:after {

    left: 100%;

}



#signupmodal .modal-dialog {

    max-width: 960px;



}



#signupmodal .modal-dialog .modal-body {

    background: radial-gradient(93.79% 93.79% at 50% 6.21%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

}



.popup-container .continue-with {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 17px;

    /* identical to box height */

    margin-top: 16px;





    /* text */



    color: #B2B6D1;

}



.google-login {

    background: url(../images/googlesignup.png);

    width: 160px;

    height: 44px;

    border: none;

    margin-top: 16px;

}



.signup-carousel-child .ov-carousel {

    position: absolute;

}



.signup-carousel-child {

    display: flex;

    align-items: center;

    height: 72px;

    width: 239px;

    margin-left: -51px;

}



.signup-carousel-details {

    width: 140px;

    height: 78px;

    background: #292f44;

    backdrop-filter: blur(2px);

    z-index: 10;

    margin-left: 24px;

    clip-path: polygon(0% 0%, 100% 0, 94% 50%, 100% 100%, 0% 100%);

    border-radius: 6px;

    display: flex;

    justify-content: center;

    align-items: center;

}



.signup-carousel-points {

    width: 200px;

    height: 66px;

    background: rgba(31, 35, 51, 1);

    border-right: 2px solid rgba(42, 48, 70, 0.64);

    border-radius: 12px;

    z-index: 9;

    margin-left: 24px;

    display: flex;

    justify-content: end;

    align-items: center;

}



.top-signup {

    display: flex;

}



.signup-carousel-details p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 140%;

    /* or 22px */



    text-align: center;

    text-transform: capitalize;



    color: #FFFFFF;

}



.signup-carousel-details p:last-child {

    color: #43DBD6;

}







.signup-carousel-points p:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 20px;

    line-height: 90%;

    margin-right: 10px;

    color: #43DBD6;

}







.signup-points-amount span {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    line-height: 90%;

    /* identical to box height, or 14px */



    text-transform: capitalize;



    /* text */



    color: #B2B6D1;

}



.br {

    display: block;

    margin-bottom: 0em;

}



.bottom-signup {

    margin-top: 34px;

}



.bottom-signup p {

    text-align: start;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 140%;

    /* identical to box height, or 20px */

    margin-top: 16px;

    color: #FFFFFF;

}



.bottom-signup p:last-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 140%;



    /* text */



    color: #B2B6D1;

}



.bottom-signup span {

    color: #43DBD6;

    margin-right: 12px;

    font-weight: 700;

    font-size: 14px;

}



.popup .forgort-pass {

    text-align: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 140%;

    /* identical to box height, or 17px */



    text-transform: capitalize;

    margin-top: 16px;

    margin-bottom: 32px;

    color: #B0B1B7;

}



.close {

    cursor: pointer;

    background: url(../images/closevector.svg);

    width: 12px;

    height: 12px;

    position: absolute;

}



.close-wrapper {

    background: #3c404ed1;

    height: 30px;

    width: 30px;

    top: 16px;

    position: absolute;

    right: 16px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



.popup .pay-image {

    height: 36px;

}



select {

    -webkit-appearance: none;

    -moz-appearance: none;

    -ms-appearance: none;

    appearance: none;

    outline: 0;

    box-shadow: none;

    border: 0 !important;

    background: rgba(31, 35, 51, 0.64);

    border: 2px solid rgba(255, 255, 255, 0.04);

    background-image: none;

    flex: 1;

    width: 160px;

    height: 36px;

    padding: 0 .5em;

    color: #fff;

    cursor: pointer;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    text-transform: capitalize;



    color: #FFFFFF;

}



select::-ms-expand {

    display: none;

}



.select {

    position: relative;

    display: flex;

    width: 160px;

    height: 36px;

    margin-right: 30px;

    line-height: 2.5;

    background: rgba(31, 35, 51, 0.64);

    border: 2px solid rgba(255, 255, 255, 0.04);

    overflow: hidden;

    border-radius: .25em;

}



.select::after {

    content: url(../images/arrowdown.svg);

    position: absolute;

    top: 0;

    right: 0;

    padding: 0 1em;

    color: #FFFFFF;

    background: rgba(31, 35, 51, 0.64);

    cursor: pointer;

    pointer-events: none;

    transition: .25s all ease;

}



.select:hover::after {

    color: #23b499;

}



.payment-card {

    border: 2px solid #427462;

    width: 160px;

    height: 90px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    display: none;

}



.payment-card.active {

    border: 2px solid #427462;

    width: 160px;

    height: 90px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    display: flex;



}



.payment-card-active {

    border: 2px solid #427462;

    width: 160px;

    height: 90px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    display: none;

}



.payment-card-active.active {

    border: 2px solid #51af8d;

    width: 160px;

    height: 90px;

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    display: flex;

    background: radial-gradient(103.39% 110.77% at 0% 78.95%, #55dbac67 0%, #43dbd65b 100%);

}



.payment-parent p {

    position: absolute;

    right: 22px;

    top: 4px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    color: #60FEBC;

}



.payment-parent .amt-active {

    color: #FFFFFF;

}



.popup-authentication .payment-instructions {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 160%;

    /* or 19px */

    text-align: start;

    text-transform: capitalize;





    color: #FFFFFF;

}



.points-required {

    background: url(../images/points-required.svg);

    width: 359px;

    height: 48px;

    display: flex;

    align-items: center;

    padding: 0px 28px;

}



.withdraw-btn {

    /*background: url(../images/withdraw-btn.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    border: none;

    width: 160px;

    height: 48px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    /* identical to box height */



    color: #FFFFFF;

}



.points-required p:first-child {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 14px;

    line-height: 17px;



    color: #B2B6D1
}



.points-required p:nth-child(2) {

    margin-left: auto;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 17px;



    color: #43DBD6;

}



.notification-section {

    width: 260px;

    height: 179px;

    background: url(../images/notification-background.svg);

    background-size: cover;

    background-repeat: no-repeat;

    position: fixed;

    right: 6vw;

    z-index: 999999;

    top: 82px;

    padding: 34px 24px;

    display: none;

    border-radius: 12px;

}



.notification-panel {

    color: #ffffff;

    display: grid;

    grid-template-columns: 50px auto;

    grid-template-rows: auto auto;

    grid-column-gap: 12px;

    align-items: center;

}



.notification-panel img {

    width: 48px;

    height: 48px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

}



.notification-panel .header-username {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 600;

    font-size: 14px;

    line-height: 17px;

    color: #FFFFFF;

    display: initial;

}



.notif-progress-user {

    width: 100%;

    grid-area: 2 / 2 / 3 / 3;

}



.notif-profile-level-text {

    display: flex;

}



.notif-profile-level-text p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 8px;

    line-height: 9px;

    text-transform: capitalize;

    margin-bottom: 4px;



    /* text */



    color: #B2B6D1;

}



.notif-profile-level-text p:last-child {

    margin-left: auto;

}



.notif-progress-user .bar-notif {

    border-radius: 4px;

    height: 4px;

    background: #292f44;

    width: 100%;

}



.notification-list {

    padding: 0;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;



    /* text */



    color: #B2B6D1;

    margin-top: 10px;

    list-style: none;

}



.notification-list li a {

    color: #B2B6D1;

    text-decoration: none;

}



.notification-list li {

    padding: 8px;

}



.notification-list li svg {

    margin-right: 6px;

}



.forgort-text p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 140%;

    /* identical to box height, or 17px */

    margin-top: 16px;

    margin-bottom: 16px;

    cursor: pointer;

    text-transform: capitalize;



    color: #B0B1B7;

}



/*Change Font in Toast Message */

.toast-success, .toast-info, .toast-warning, .toast-error {

    width: 400px !important;

    font-family: 'Poppins', sans-serif;

    font-size: 0.75rem;

    border-radius: 0.6rem !important;

    opacity: 1;

    border-color: transparent !important;

}



.toast {

    top: 82px;

    margin: 0 auto;

}



#toast-container>.toast-success {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAABBElEQVR4nO3TO0pDQRjFcQWNndi7AxPXIPY2Vq4qYoho42MFVpY+wDUkbkDF3mhhof5k4BPC6E3mXgstcmC437zO/3JmZm5upn8vrKOHIV6ipXoPnd8YL+EA76r1hn20mphfTzDOdVULgkP11a+T+aRYvvTqe1ztEkA6vGk6wQLOsvHdEsDtFPN7LMfa82xuUAIYZZtGOMZT9Ldi3fYP8FETQDfGN3Aa9QoemwLyiB6wGnPz8T2qiG/Q9JCH6a9jfhMfFYBuCaATVy7XDXZwV2Ge9qxNBQQkPf+66hWZB6CFyxrmF1gsBoxB+hVxjcfSq22egdrphaYbgudoqe4WZz7Tn+oTJtc77Gs7hCEAAAAASUVORK5CYII=') !important;

}



#toast-container>.toast-info {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAA+UlEQVR4nN2VSQ6CQBBFCUbd6QVwuAMbp6N4BKIRvYXDyQjGQzgEDvEMSbkhPQob/UklhOG/orq6Ogj+XkAHWAF74CKRyr2wiXEf2AEv9HoCW6Dnax4BmcG4rhswdTWfSGa+egBjl7JU2ehUSOiUG8slNTeZD4AhUBre25i6xbSgpZjbAA9ld0nb2VRYzD9aqAAH2lOqApwdPlxL2HT6FhBL2HRUAfYtAlIVYNkiYKYChA47OHYA3LVDUAZX00VOlOYC6AFXvlcGdLUAgYxlN/rqDoyM5jVI7pl55GReK9fG8jfVs8RaFgsorGaLTNrPkVldzxsdmT+jN0Rp8bl2CllOAAAAAElFTkSuQmCC') !important;

}



#toast-container>.toast-warning {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAyklEQVR4nO2UTQ7BQBhAZ+HnAN1ISFzBko0FGyfhAooToa7hBpJa4BKIbZ9M0sSkOu2MfnZ9qybNvNd836RK1UgBDIAbcNXP0vIGcOJDDDQlAyHfLKXkHeCeE3gAXYnADjvbqvIxkFDMRGqxGO+ovHBglf1US0AT+sp7wNMj8AL6PoEob9jKHtDsXeVTi4CSgGZWJm8BZ37nArSLAhuqs/ZarOeI7AsHDiUHcQxooqx8hDxDM7D4Q2BuBgLg6PDfcSFJXUHhla1RKW+/65jgIEsnygAAAABJRU5ErkJggg==') !important;

}



#toast-container>.toast-error {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAABS0lEQVR4nO2WO04DMRCG9xIUPIIoKUIVOsIBkABxDvLgLHQgEAUlfQg3YbkACLqwdCT60EiOZKH17KzXUVLkl1ay7P317cx6xs6ytVZNwC4wAF6AHPhxT+7m+kArJXAbuAWmVGsGPAF7TaEXQEF9fQPnsdArF0GsxDuMiXTWAOrDbZEDO5Hp1dK+ZQE/kF53lpIJ7d4j4BD4LFmTuQ7QDXinkkkNLHUaUse90/4Hl3HbrcmHhdTTwGPF6APm8LK5kEYa+E0xlsGtUFGugS27+Qs48Dz7wIfBVywC/G7wTVYy1eNlba7+AsvpUgO3lAbSrWggsnYc8P6qDcTB70mvGxXqHfzS2FNpAmxWgh38xHjjsByLZyaoBx8muAgMakHnkkM8Mu2S3tOsiYAN4NrtTEuUj+Z/WuNm0gOegVfXXgs3HkmdVpbMWtkS9AcczgesBTVL2QAAAABJRU5ErkJggg==') !important;

}



#toast-container>div {

    -webkit-box-shadow: none;

    box-shadow: none;

    opacity: 1;

}



.popup-mobile {

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 9999;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);

}



.popup-mobile.is-visible {

    opacity: 1;

    visibility: visible;

}



.popup-mobile-auth {

    overflow-y: auto;

    transition: 500ms all;

    position: relative;

    width: 100vw;

    height: 100vh;

    padding: 40px;

    text-align: center;

    box-shadow: 0 0 20px rgb(0 0 0 / 20%);

    background: #141821;

    border-radius: 24px 24px 0px 0px;

}





.popup-mobile h1 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 22px;

    line-height: 140%;

    /* or 22px */



    text-transform: capitalize;

    margin-top: 32px;

    color: #FFFFFF;

}



.popup-mobile p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 140%;

    /* identical to box height, or 14px */



    text-transform: capitalize;



    /* text */



    color: #B2B6D1;

}



.popup-mobile .signup-inp {

    background: url(../images/form-inputs.svg), rgba(31, 35, 51, 1);

    -webkit-clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

    width: 360px;

    height: 48px;

    margin-top: 24px;

}



.popup-mobile .signup-inp input {

    background: transparent;

    border: none;

    width: 300px;

    height: 46px;

}



.popup-mobile .forgort-text {

    margin-top: 24px;

    margin-bottom: 24px;

}



.popup-mobile .or_divided {

    width: 80vw;

    margin: auto;

    margin-top: 10px;

}



.popup-mobile .signup-inp input:focus-visible {

    outline: none;

}



.popup-mobile .signup-checkbox {

    display: flex;

    text-align: initial;

    width: 80vw;

    margin: 24px auto;

    justify-content: center;

}



/* The container */

.mobile-checkbox {

    display: block;

    position: relative;

    padding-left: 35px;

    cursor: pointer;

    font-size: 11px;

    color: #B2B6D1;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}



/* Hide the browser's default checkbox */

.mobile-checkbox input {

    position: absolute;

    opacity: 0;

    cursor: pointer;

    height: 0;

    width: 0;

}



/* Create a custom checkbox */

.checkmark {

    position: absolute;

    top: 0;

    left: 0;

    height: 25px;

    width: 25px;

    background: #333847;

}



/* On mouse-over, add a grey background color */

.mobile-checkbox:hover input~.checkmark {

    background-color: #333847;

}



/* When the checkbox is checked, add a blue background */

.mobile-checkbox input:checked~.checkmark {

    background-color: #43DBD6;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

    content: "";

    position: absolute;

    display: none;

}



/* Show the checkmark when checked */

.mobile-checkbox input:checked~.checkmark:after {

    display: block;

}



/* Style the checkmark/indicator */

.mobile-checkbox .checkmark:after {

    left: 9px;

    top: 5px;

    width: 8px;

    height: 13px;

    border: solid white;

    border-width: 0 3px 3px 0;

    -webkit-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    transform: rotate(45deg);

}



.popup-offers {

    position: fixed;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 1046;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);

}



.popup-offers.is-visible {

    opacity: 1;

    visibility: visible;

}



.popup-offer-modal {

    transition: 500ms all;

    position: relative;

    width: 60vw;

    margin: 2em auto;

    top: 16%;

    text-align: center;

    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

    background: radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

    border-radius: 24px 24px 0px 0px;

}



.popup-offer-modal p {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    line-height: 140%;

    margin-bottom: 0;

    /* identical to box height, or 14px */



    text-transform: capitalize;



    /* text */



    color: #B2B6D1;

}



/* .popup-offer-modal .close {

    cursor: pointer;

    background: url(../images/closevector.svg);

    width: 12px;

    height: 12px;

    position: absolute;

    right: 36px;

    top: 20px;

} */



.popup-offer-modal iframe {

    height: 71vh;

}



.offers-iframe {

    height: 60vh;

    background: #141821;

}



.lds-spinner {

    color: official;

    display: inline-block;

    position: absolute;

    width: 80px;

    height: 80px;

    margin: auto;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

}



.lds-spinner div {

    transform-origin: 40px 40px;

    animation: lds-spinner 1.2s linear infinite;

}



.lds-spinner div:after {

    content: " ";

    display: block;

    position: absolute;

    top: 3px;

    left: 37px;

    width: 6px;

    height: 18px;

    border-radius: 20%;

    background: #fff;

}



.lds-spinner div:nth-child(1) {

    transform: rotate(0deg);

    animation-delay: -1.1s;

}



.lds-spinner div:nth-child(2) {

    transform: rotate(30deg);

    animation-delay: -1s;

}



.lds-spinner div:nth-child(3) {

    transform: rotate(60deg);

    animation-delay: -0.9s;

}



.lds-spinner div:nth-child(4) {

    transform: rotate(90deg);

    animation-delay: -0.8s;

}



.lds-spinner div:nth-child(5) {

    transform: rotate(120deg);

    animation-delay: -0.7s;

}



.lds-spinner div:nth-child(6) {

    transform: rotate(150deg);

    animation-delay: -0.6s;

}



.lds-spinner div:nth-child(7) {

    transform: rotate(180deg);

    animation-delay: -0.5s;

}



.lds-spinner div:nth-child(8) {

    transform: rotate(210deg);

    animation-delay: -0.4s;

}



.lds-spinner div:nth-child(9) {

    transform: rotate(240deg);

    animation-delay: -0.3s;

}



.lds-spinner div:nth-child(10) {

    transform: rotate(270deg);

    animation-delay: -0.2s;

}



.lds-spinner div:nth-child(11) {

    transform: rotate(300deg);

    animation-delay: -0.1s;

}



.lds-spinner div:nth-child(12) {

    transform: rotate(330deg);

    animation-delay: 0s;

}



@keyframes lds-spinner {

    0% {

        opacity: 1;

    }



    100% {

        opacity: 0;

    }

}



.cashout-parent {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 28px;

    color: #FFFFFF;

    max-width: 1160px;

    margin: auto;

    margin-bottom: 80px;

    text-align: center;

}



.cashout-card {

    width: 160px;

    text-align: center;

    margin-right: 10px;

    margin-left: 10px;

    margin-top: 18px;

}



.popup-cashout-mobile {

    position: fixed;

    margin-top: 112px;

    margin-bottom: 74px;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 998;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);

}



.popup-cashout-mobile.is-visible {

    opacity: 1;

    visibility: visible;

}



.popup-profile-mobile {

    position: fixed;

    margin-top: calc(60px + 54px);

    margin-bottom: 74px;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 99;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);

}



.popup-profile-mobile.is-visible {

    opacity: 1;

    visibility: visible;

}





.popup-avatar-mobile {

    position: fixed;

    margin-top: calc(82px + 72px);

    margin-bottom: 74px;

    left: 0;

    top: 0;

    height: 100%;

    z-index: 998;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);

}



.popup-avatar-mobile.is-visible {

    opacity: 1;

    visibility: visible;

}





.popup-cashout {

    overflow-y: auto;

    transition: 500ms all;

    position: relative;

    width: 100vw;

    height: calc(100vh - 156px);

    padding: 16px;

    text-align: center;

    box-shadow: 0 0 20px rgb(0 0 0 / 20%);

    background: #141821;

}



.popup-cashout .pay-image {

    height: 36px;

}



.popup-cashout .select {

    margin-right: 0px;

}



.popup-cashout .payment-instructions {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 160%;

    text-align: center;

    text-transform: capitalize;

    color: #FFFFFF;

}



.popup-cashout .payment-parent p {

    right: 9px;

    top: 8px;

}



.popup-cashout .payment-amt-child {

    width: 160px;

    height: 90px;

    position: relative;

}



.popup-cashout-mobile p {

    margin-bottom: 0;

}





.back-btn {

    cursor: pointer;

    background: url(../images/back-cashout.svg);

    background-size: cover;

    width: 24px;

    height: 12px;

    position: absolute;

}



.wrapper-back {

    background: #3c404ed1;

    height: 36px;

    width: 36px;

    top: 51px;

    position: absolute;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 50%;

}



.mobile-chat .chat-item {

    grid-template-columns: 60px auto;

}



.notification-popup {

    width: 299px;

    max-height: 576px;

    background: url(../images/notification-background.svg);

    background-size: cover;

    background-repeat: no-repeat;

    position: fixed;

    right: 0.3vw;

    z-index: 999999;

    top: 82px;

    padding: 34px 14px;

    border-radius: 12px;

    display: none;

}





.notification-popup .notification-item {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    color: #ffffff;

    background: rgba(42, 48, 70, 0.44);

    box-shadow: 0px 4px 4px rgb(23 25 32 / 24%), inset 0px 2px 4px rgb(255 255 255 / 4%);

    backdrop-filter: blur(2px);

    padding: 10px 16px;

    border-radius: 12px;



}



.notification-popup .noti-read {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    line-height: 14px;

    text-align: end;

    background: url(../images/notification-background.svg);

    width: 299px;

    height: 50px;

    background-size: cover;

}



.notification-popup .noti-read h1 {

    font-size: 16px;

    color: #ffffff;

}



.notification-popup .noti-read p {

    font-size: 14px;

    color: #B2B6D1;

    text-decoration: underline;

    margin-left: auto;

    cursor: pointer;

}



.mobile-notification .noti-read {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    line-height: 14px;

    text-align: end;

    width: 100vw;

    height: 50px;

    background-size: cover;

}



.mobile-notification .noti-read h1 {

    font-size: 16px;

    color: #ffffff;

}



.mobile-notification .noti-read p {

    font-size: 14px;

    color: #B2B6D1;

    text-decoration: underline;

    margin-left: auto;



}



.mobile-notification .noti-read a {

    margin-left: auto;

}



.notification-item h6 {

    font-size: 13px;

}



.notification-item p {

    font-size: 10px;

    margin-bottom: 0;

}



.mobile-notification .notification-item {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 12px;

    line-height: 14px;

    color: #ffffff;

    background: rgba(42, 48, 70, 0.44);

    box-shadow: 0px 4px 4px rgb(23 25 32 / 24%), inset 0px 2px 4px rgb(255 255 255 / 4%);

    backdrop-filter: blur(2px);

    padding: 10px 16px;

    border-radius: 12px;



}



.mobile-notification {

    height: calc(100vh - 230px);

}



.settings-list-item .extra-settings p {

    width: 160px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.resp-changepass {

    display: flex;

    justify-content: center;

}



.resp-changepass .settings-btn {

    /*background: url(../images/settings_btn.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 176px;

    height: 38px;

    background-repeat: no-repeat;

    background-size: 176px 38px;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 10px;

    line-height: 14px;

    color: #FFFFFF;

    justify-content: center;

    align-items: center;

    display: none;

}



.edit-avatar {

    position: absolute;

    background: #ffffff33;

    width: 100px;

    height: 100px;

    font-size: 30px;

    border-radius: 50%;

    display: flex !important;

    justify-content: center;

    align-items: center;

    visibility: hidden;

}



.edit-avatar svg {

    width: 30px;

    height: 30px;

}



.profile-avatar {

    display: flex;

    justify-content: center;

    position: relative;

}



.profile-avatar:hover .edit-avatar {

    visibility: visible;

}



.avatar-select {

    width: 100px;

    height: 100px;

    background: #2a7496;

    border-radius: 50px;

    border: 2px solid #60FEBC;

    position: absolute;

    z-index: 20;

    display: none;

}



.avatar-select.active {



    display: block;

}



.avatar-parent {

    width: 100px;

    height: 120px;

    position: relative;

    justify-content: center;

    display: flex;

    align-items: center;

}



.avatar-parent img {

    position: absolute;

    z-index: 30;

}



.verbiage {

    text-align: center;

    padding: 10px 5px;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    line-height: 19px;

    background: #292f44;

    backdrop-filter: blur(2px);

    z-index: 10;

    margin-bottom: 10px;

    border-radius: 10px;

}



a:hover {

    color: #fff;

}



.referrals-section {

    width: 100%;

    height: 120px;

    border-radius: 24px;

    background-image: url(../images/back-light-top.svg), radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);

    background-position: left top, left bottom;

    background-repeat: no-repeat, no-repeat;

    padding: 20px;

    color: #fff;



}



.referrals-section h2 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

}

.referral-panel {

    --bs-gutter-x: 1.5rem;

    max-width: 1160px;

    margin: 24px auto;

}



.referral-inp .form-control {

    background-color: rgba(26, 29, 39, 1) !important;

    border: 1px solid #292f44;

    color: #fff;

}



.referral-inp .form-control:focus {

    border: none;

    box-shadow: none;

}



.input-group-text {

    background: url(../images/footer-button.png);

    background-repeat: no-repeat;

    width: 76px;

    height: 48px;

    justify-content: center;

    display: flex;

    align-items: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 16px;

    line-height: 19px;

    color: #B2B6D1;

    border: none;

    z-index: 10;

    margin-left: -48px !important;

}



.offer-header {

    display: flex;

    color: #fff;

    align-items: center;

}



.offer-header img {

    width: 82px;

    height: 82px;

    padding: 6px;

    border-radius: 12px;

}



.offer-header h4 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 18px;

    margin-bottom: 0px;

}



.offer-description {

    background: url(../images/Rectangle3249.svg), rgba(26, 29, 39, 1);

    -webkit-clip-path: polygon(3% 0, 100% 0, 100% 91%, 97% 100%, 0 100%, 0 10%);

    clip-path: polygon(3% 0, 100% 0, 100% 91%, 97% 100%, 0 100%, 0 10%);

    font-family: 'Rubik';

    width: 760px;

    height: 230px;

    border-radius: 10px;

    margin-top: 30px;

    padding: 20px;

    text-align: start;

    overflow-y: auto;
    color: #fff;

}



.offer-description strong {

    color: #43DBD6;

}



.offer-payout {

    background: url(../images/payone-offer.svg), rgba(26, 29, 39, 1);

    clip-path: polygon(4.9% 0%, 100% 0%, 100% 70%, 95% 100%, 0% 100%, 0% 34%);

    width: 359px;

    height: 48px;

    display: flex;

    align-items: center;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

}



.start-offer-btn {

    /*background: url(../images/start-offer.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;


    width: 160px;

    height: 48px;

}



.offer-pay-amount {

    background: url(../images/offer-pay-amt.svg);



    width: 160px;

    height: 48px;

    margin-left: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

}



.start-offer-btn {

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 20px;

    display: flex;

    justify-content: center;

    align-items: center;





}





.offer-description-mobi {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 16px;

    color: #fff;

}



.offer-description-mobi strong {

    color: #43DBD6;

}



.offer-header-mobi {

    margin-top: 70px;

}



.offer-header-mobi img {

    width: 120px;

}



.offer-header-mobi h4 {

    color: #fff;

    margin-top: 10px;

    margin-bottom: 20px
}





.offer-payout-mobi {

    background: url(../images/mobile-offer-parent.svg), rgba(26, 29, 39, 1);

    clip-path: polygon(4.9% 0%, 100% 0%, 100% 70%, 95% 100%, 0% 100%, 0% 34%);

    background-repeat: no-repeat;

    background-size: contain;

    width: 300px;

    height: 32px;

    display: flex;

    align-items: center;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

}



.start-offer-btn-mobi {

    /*background: url(../images/start-offer-mobi.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
    border-radius: 4px;

    width: 300px;

    height: 32px;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    font-size: 15px;

    display: flex;

    justify-content: center;

    align-items: center;

}



/* New CSS */



.loottv-parent {

    max-width: 1160px;

    margin: 0 auto;

}



.loottv-main {

    width: 100%;

    height: 180px;

    margin-bottom: 40px;

    border-radius: 12px;

    background-image: radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);

    background-position: left top, left bottom;

    background-repeat: no-repeat, no-repeat;

}



.loottv-main h2 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 24px;

    text-align: center;

    color: #FFFFFF;

}



.loottv-main h3 {

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 18px;

    color: #ff8a8a;

    text-align: center;

}



.loottv-main .col-lg-4,

.loottv-main .col-lg-6,

.loottv-main .col-lg-2,

.loottv-main .row {

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;



}



.lootmobile-img {

    height: 160px
}



.loottv-svg svg {

    height: 80px;

}



.background-loot {

    background: rgb(0, 202, 112);

    background: linear-gradient(288deg, rgba(0, 202, 112, 1) 19%, rgba(69, 255, 0, 0) 70%);

    border-radius: 12px;

    height: 100%
}



.loot-verbiage {

    flex-direction: column;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 500;

    text-align: center;

}



.watchnow-btn {

    border-radius: 8px;

    border: none;

    padding: 9px;

    color: #00ca70;

}



.hideout-work {

    height: 100%;

}



@media screen and (max-width: 1197px) {

    .loottv-parent {

        max-width: 1160px;

    }

}





@media screen and (max-width: 991px) {



    .loottv-main {

        height: 506px;

    }



    .loottv-main .col-lg-4,

    .loottv-main .col-lg-6,

    .loottv-main .col-lg-2 {

        height: auto;

        display: flex;

        justify-content: center;

        align-items: center;



    }



    .loottv-main h2 {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 21px;

        line-height: 43px;

        text-align: center;

        color: #FFFFFF;

    }



    .background-loot {

        background: rgb(0, 202, 112);

        background: linear-gradient(0deg, rgba(0, 202, 112, 1) 19%, rgba(69, 255, 0, 0) 80%);

        border-radius: 12px;
        margin:10px;

        height: 100%
    }

}



.promo-ribbon .ribbon {

    font-size: 20px;

    position: relative;

    display: inline-block;

    text-align: center;

}



.promo-ribbon .text {

    display: inline-block;

    padding: 0.15em 0.5em;

    line-height: 1.2em;

    background: #FF5C5C;

    position: relative;

}





.promo-ribbon .ribbon:before,

.promo-ribbon .text:before,

.promo-ribbon .text:after {

    content: '';

    position: absolute;

    border-style: solid;

}



.promo-ribbon .text:before {

    bottom: 100%;

    left: 0;

    border-width: 0.2em .7em 0 0;

    border-color: transparent #ff2828 transparent transparent;

}



.promo-ribbon .text:after {

    top: 100%;

    right: 0;

    border-width: 0.25em 2em 0 0;
    ;

    border-color: #ff2828 transparent transparent transparent;

}



.loottv-main a {

    text-decoration: none;

}



.loottv-work {

    height: 100%
}



.hideout-svg svg {

    height: 41px;

}



.background-hideout {

    background: rgb(0, 155, 202);

    background: linear-gradient(288deg, rgba(0, 155, 202, 1) 19%, rgba(69, 255, 0, 0) 70%);

    border-radius: 12px;

    height: 100%;

}



.watchnow-btn-hide {

    border-radius: 8px;

    border: none;

    padding: 9px;

    color: #009bca;

}



.hideout-img {

    height: 96px;

}



.cookie-popup {

    width: 347px;

    height: 230px;

    background-image: radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 1) 0%, rgba(31, 36, 54, 1) 100%, rgba(45, 50, 70, 1) 100%);

    border-radius: 25px;

    position: fixed;

    bottom: 16px;

    left: 16px;

    z-index: 99;

    border: 1px solid #141821;

    display: none;

}



.cookie-image {

    display: flex;

    justify-content: center;

    padding: 14px;

}



.cookie-image img {

    width: 64px;

    height: 64px;



}



.cookie-popup p {

    color: #FFFFFF;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 400;

    padding: 0px 14px;

    text-align: center;

}



.cookie-popup a {

    color: #43DBD6;

}



.button-holder div {

    color: #FFFFFF;

    background: rgba(26, 29, 39, 0.35);

    text-decoration: none;

    line-height: 35px;

    font-weight: bold;

    display: block;

    border-top: 1px solid rgba(26, 29, 39, 1);

    position: absolute;

    bottom: 0;

    width: 100%;

    text-align: center;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    cursor: pointer;

}



.linear-activity-featured {

    overflow: hidden;

    width: 50%;

    height: 4px;

    background-color: #b3fcfa;

    margin: 100px auto;

}



.linear-activity {

    overflow: hidden;

    width: 100%;

    height: 4px;

    background-color: #b3fcfa;

}



.indeterminate {

    position: relative;

    width: 100%;

    height: 100%;

}



.indeterminate:before {

    content: '';

    position: absolute;

    height: 100%;

    background-color: #02f5ed;

    animation: indeterminate_first 1.5s infinite ease-out;

}



.indeterminate:after {

    content: '';

    position: absolute;

    height: 100%;

    background-color: #50faf4;

    animation: indeterminate_second 1.5s infinite ease-in;

}



@keyframes indeterminate_first {

    0% {

        left: -100%;

        width: 100%;

    }

    100% {

        left: 100%;

        width: 10%;

    }

}



@keyframes indeterminate_second {

    0% {

        left: -150%;

        width: 100%;

    }

    100% {

        left: 100%;

        width: 10%;

    }

}



.featured-popup-pill {

    background: #00ada7;

    border-radius: 4px;

    width: 68px;

    color: #fff;

    font-family: 'Rubik';

    font-style: normal;

    font-weight: 700;

    font-size: 12px;

    display: flex;

    justify-content: center;

}



.featured-pill-mobi {

    margin: 10px;

    width: 100%;

    display: flex;

    justify-content: center;

}



@media screen and (max-width: 992px) {



    .cookie-popup {

        width: calc(100vw - 40px);

        height: 153px;

        background-image: radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 1) 0%, rgba(31, 36, 54, 1) 100%, rgba(45, 50, 70, 1) 100%);

        border-radius: 25px;

        position: fixed;

        bottom: 90px;

        margin: 0px 16px;

        left: 0px;

        z-index: 99;

    }

    .footer-section .nav-link {
        justify-content: center;
    }



    .cookie-popup p {

        color: #FFFFFF;

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 400;

        font-size: 12px;

        padding: 0px 14px;

        text-align: center;

        margin-bottom: 0px;

    }



    .cookie-image {

        display: flex;

        justify-content: center;

        padding: 14px 14px 8px 14px;

    }



    .cookie-image img {

        width: 32px;

        height: 32px;



    }

}



@media screen and (max-width: 991px) {

    .background-hideout {

        background: rgb(0, 202, 112);

        background: linear-gradient(0deg, rgba(0, 155, 202, 1) 19%, rgba(69, 255, 0, 0) 80%);

        border-radius: 12px;
        margin:10px;

        height: 100%;

    }

}



@media screen and (max-width: 992px) {

    .referral-panel {

        padding-right: calc(var(--bs-gutter-x) * .5);

        padding-left: calc(var(--bs-gutter-x) * .5);

    }

}

@media screen and (max-width: 593px) {

    .extra-settings .settings-btn {

        display: none;

    }



    .resp-changepass .settings-btn {

        /*background: url(../images/settings_btn.svg);*/
        background: #43DBD6;
        background-image: linear-gradient(#43DBD6, #34aaa6);
        border-radius: 4px;

        width: 176px;

        height: 38px;

        background-repeat: no-repeat;

        background-size: 176px 38px;

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 500;

        font-size: 10px;

        line-height: 14px;

        color: #FFFFFF;

        display: flex;

        justify-content: center;

        align-items: center;

    }

}



@media screen and (max-width: 497px) {

    #tabs>[role="tablist"]>[role="tab"] {

        display: flex;

        align-items: center;

        margin: 0 0 -0.125rem;

        border-bottom: solid 0.125rem transparent;

        padding: 0.5rem 0.4rem !important;

        height: 3rem;

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 14px !important;

        line-height: 28px;

        text-transform: capitalize;

        color: #B2B6D1;

    }

}



@media screen and (max-width: 363px) {

    .settings-list-item .extra-settings p {

        width: 60px;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;

    }

}



@media screen and (max-width: 432px) {

    .popup-cashout-mobile .col-6 {

        width: 100% !important;

    }

}





@media screen and (max-width: 406px) {

    .popup-cashout-mobile .points-required {

        background: url(../images/points-required.svg);

        background-size: 85vw 48px;

        background-repeat: no-repeat;

        width: 90vw;

        height: 48px;

        display: flex;

        align-items: center;

        padding: 0px 28px;

    }

}



@media screen and (max-width: 379px) {

    .popup-mobile .signup-inp input {

        background: transparent;

        border: none;

        width: 78vw;

        height: 46px;

    }

}





@media screen and (max-width: 379px) {

    .popup-mobile .signup-inp input {

        background: transparent;

        border: none;

        width: 78vw;

        height: 46px;

    }

}



@media screen and (max-width: 425px) {

    .popup-mobile .signup-inp {

        background: url(../images/form-inputs.svg);

        background-size: 94vw 48px;

        -webkit-clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

        clip-path: polygon(6% 0, 100% 0, 100% 68%, 94% 100%, 0 100%, 0 38%);

        width: 94vw;

        height: 48px;

        margin-top: 24px;

    }



    .popup-mobile .register-btn {

        /*background: url(../images/signup-btn-reg.svg);*/
        

        background-size: 80vw 48px;

        background: #43DBD6;
        background-image: linear-gradient(#43DBD6, #34aaa6);
        border-radius: 4px;

        width: 80vw;

        height: 44.31px;

        border: none;

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 18px;

        line-height: 24px;

        text-transform: capitalize;

        color: #FFFFFF;

    }

}





@media screen and (max-width: 1288px) and (min-width: 993px) {

    .chatShown .basic-social .social-carousel-child {

        scale: 0.7;

        margin-right: -36px;

    }



    .chatShown .basic-social .social-carousel-child:last-child {

        margin-right: 0;

    }

}



@media screen and (max-width: 688px) and (min-width: 401px) {

    .table-rankings table td {

        padding-left: 0px;

    }



    .table-rankings table tr td:first-child {

        padding-left: 20px;

    }



    .table-rankings table tr td:last-child {

        padding-right: 20px;

    }





    .table-rankings table th {

        padding-left: 0px;

    }



    .table-rankings table tr th:first-child {

        padding-left: 20px;

    }



}



@media screen and (max-width: 600px) {

    .withdrawal-table tr td:first-child {

        max-width: 100px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }

}



@media screen and (max-width: 520px) {

    .referral-rankings tr td:first-child p {

        font-size: 12px;

        max-width: 54px;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }

}



@media screen and (max-width: 400px) {

    .table-rankings table td {

        padding-left: 0px;

    }



    .table-rankings table tr td:first-child {

        padding-left: 20px;

    }



    .table-rankings table tr td:last-child {

        padding-right: 20px;

    }





    .table-rankings table th {

        padding-left: 0px;

        font-size: 12px;

    }



    .table-rankings table tr th:first-child {

        padding-left: 20px;

    }



    .table-rankings table tr:nth-child(even) {

        font-size: 12px;

    }



    .table-rankings table tr:nth-child(2n+3) {

        font-size: 12px;

    }



    .referral-rankings tr td:first-child p {

        font-size: 12px;

    }



}



@media screen and (max-width: 1183px) and (min-width: 993px) {

    .chatShown .discord-info-parent {

        scale: 0.7;

    }



    .chatShown .discord-avatar {

        scale: 0.8;

    }

}



@media screen and (max-width: 1197px) {

    .home-banner-parent {

        max-width: 1160px;

        margin: 0 18px !important;

    }



    .discord-section-parent {

        max-width: 1160px;

        margin: 0 18px !important;

    }

}



@media screen and (max-width: 1200px) and (min-width: 992px) {

    .footer-submit-email {

        width: 275px;

        background-size: 275px 48px;

    }



    .merged-input {

        width: 210px;

    }



    .merged-button {

        width: 74px;

    }



    .footer-top {

        padding-left: 37px;

    }

}



@media screen and (max-width: 922px) and (min-width: 516px) {

    .discord-info-parent .d-three {

        scale: 0.8;

    }

}





@media screen and (max-width: 577px) {

    .discord-section .discord-info-parent {

        width: 80vw;

    }



    .countdown-timer {

        scale: 0.7;

    }



    .discord-info-parent .d-one img {

        width: 40vw;

    }



    .discord-section .d-two {

        font-size: 24px;

        text-align: center;

    }



    .discord-section .d-two p:nth-child(2) {

        margin-left: 20px;

    }



    .discord-section .d-two span {

        font-size: 24px;

    }



    .discord-info-parent .social-carousel-points {

        width: 58vw;

    }



    .discord-info-parent .social-carousel-details {

        width: 45vw;

    }



    .discord-info-parent .social-detail-parent span {

        display: none;

    }

}



@media screen and (max-width: 992px) {





    .popup-avatar-mobile .register-btn {

        /*background: url(../images/signup-btn-reg.svg);*/
        background: #43DBD6;
        background-image: linear-gradient(#43DBD6, #34aaa6);
        border-radius: 4px;

        width: 262px;

        height: 44.31px;

        border: none;

        background-size: 262px 44.31px;

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 20px;

        line-height: 24px;

        text-transform: capitalize;

        color: #FFFFFF;

    }



    .avatar-select {

        width: 70px;

        height: 70px;

        background: #2a7496;

        border-radius: 50px;

        border: 2px solid #60FEBC;

        position: absolute;

        z-index: 20;

        display: none;

    }



    .edit-avatar {

        position: absolute;

        background: #ffffff33;

        width: 100px;

        height: 100px;

        font-size: 30px;

        border-radius: 50%;

        display: flex !important;

        justify-content: center;

        align-items: center;

        visibility: visible !important;

    }



    .popup-offer-modal {

        transform: none;

        transition: 500ms all;

        position: relative;

        width: 100vw;
height:100vh;
        margin: 0;

        top: 0;

        text-align: center;

        box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

        background: radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

        border-radius: 0px 0px 0px 0px;

    }



    .popup-offer-modal iframe {

        height: calc(100vh - 66px) !important;

    }



    .user-panel-resp {

        display: flex;

        justify-content: center;

        align-items: center;

    }





    .income-panel {

        box-shadow: inset 0px 1px 8px #010101;
    background: #141821;
       border-radius: 8px;
        margin-right: 0px;

        width: 100px;

        height: 35px;

        background-size: 100px 55px;

        background-repeat: no-repeat;

    }



    .user-panel-resp {

        margin-right: 0;

    }



    .navbar-brand {

        margin-right: 0.5rem;

    }



    .footer-bottom {

        display: flex;

        justify-content: center;

        text-align: center;

    }



    .navbar-toggler {

        display: flex;
        padding: 0;

    }



    .profile-parent {

        margin: 16px;

    }



    .cd__unit {

        font-size: 3.75em;

        line-height: 1;

        margin: 0;

        width: 3ch;

    }



    .footer-top {

        text-align: center;

    }



    .footer-middle {

        text-align: center;

    }



    .nav-item {

        margin-right: 0px;

    }



    .basic-social {

        display: grid;

        grid-template-rows: auto auto auto;

    }



    .basic-social .social-carousel-child {

        margin-right: 0;

        margin-top: 20px;

    }



    .discord-info-parent .d-three {

        width: 100%;

        justify-content: center;

        display: flex;

        scale: 0.8;

    }



    .discord-section-parent .discord-section {

        display: grid;

        grid-template-columns: auto;

        grid-template-rows: auto auto;

    }



    .d-three .social-carousel-child {

        margin-right: 0px;

        width: 485px;

    }



    .discord-info-parent {

        grid-area: 2 / 1 / 3 / 2;

        margin-top: -10px !important;

        width: 100%;

        display: flex;

        flex-direction: column;

        align-items: center;

    }



    .discord-info-parent .d-one {

        display: flex;

        justify-content: center;

    }



    .discord-avatar {

        grid-area: 1 / 1 / 2 / 2;

    }



    .discord-avatar img {

        height: 270px;

        margin-top: -20px;

    }



    .discord-section {

        height: 595px;

    }



    .home-banner-text {

        color: #FFFFFF;

        grid-area: 1 / 1 / 2 / 2;

    }



    .place-section {

        display: grid;

        grid-template-columns: auto;

        grid-template-rows: auto auto auto;

        justify-content: center;

    }



    .steps-section {

        display: grid;

        grid-template-columns: auto;

        grid-template-rows: auto auto auto;

        justify-content: center;

        margin-top: 60px;

        margin-bottom: 80px;

    }



    .place-section .place-one {

        display: flex;



    }



    .place-section .place-two {

        display: flex;

        margin-top: 22px;

    }



    .place-section .place-three {

        display: flex;

        margin-top: 22px;

    }



    .place-section .place-prize {

        clip-path: polygon(100% 0, 100% 100%, 15% 100%, 0 78%, 0 0);

        width: 184px;

        height: 140px;

        background: radial-gradient(93.79% 93.79% at 50% 50%, #252A3A 0%, #1F2436 100%, #2D3246 100%);

        border-radius: 12px;

        position: relative;

        display: grid;

        grid-template-columns: auto;

        grid-template-rows: auto auto;

        right: 0;

        margin-left: 27px;

        margin-top: 12px;

    }



    .place-section .points-prize {

        margin-top: 10px;

    }



    .place-section .place-prize .points-prize div:first-child {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 600;

        font-size: 18px;

        line-height: 14px;

        margin-bottom: 10px;

    }



    .place-section .place-prize .points-prize div:nth-child(2) {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 600;

        font-size: 16px;

        line-height: 14px;

    }



    .place-section .place-prize .points-avatar img {

        height: 57px;

        position: relative;

        top: -20px;

    }



    .place-section .place-prize .points-avatar {

        display: flex;

        justify-content: end;

    }



    .steps-part {

        margin-right: 0px;

        margin-bottom: 8vh;

    }





    .nav-mobile {

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));

    }



    .home-banner-description {

        grid-area: 2 / 1 / 3 / 3;

    }



    .home-banner-mascot {

        grid-area: 1 / 2 / 2 / 3;

        display: flex;

        align-items: center;

        flex-direction: column;

        height: 255px;

        width: 233px;

    }



    .home-banner-mascot img:first-child {

        width: 100%;

        height: 100%;

        margin-top: -20px;

        margin-bottom: 2px;



    }



    .home-banner-mascot img:nth-child(2) {

        width: 100%;

        height: 100%;

    }



    .offcanvas {

        display: none;

    }



    .chatShown .main-section {

        margin-right: 0px;

    }



    .main-section {

        margin-bottom: 74px;

    }

}



@media screen and (max-width: 900px) {

    .home-banner-text {

        margin-top: 6vh;

        margin-left: 5vw;

    }



}



@media screen and (max-width: 735px) and (min-width: 651px) {

    .home-banner-text h1:first-child {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 32px !important;

        line-height: 140%;

    }



    .home-banner-text h1:nth-child(2) {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 32px !important;

        line-height: 140%;

        margin-left: 60px;

    }



    .home-banner-text p {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 500;

        font-size: 13px !important;

        margin: 0;

        color: #B2B6D1;

    }

}



@media screen and (max-width: 650px) {

    .home-banner-main {

        font-family: 'Rubik';

        font-style: normal;

        display: grid;

        grid-template-columns: 100% 100%;

        grid-template-rows: auto auto;

        grid-column-gap: 0px;

        grid-row-gap: 0px;

        place-items: center;

        height: auto;

    }



    .home-banner-text {

        color: #FFFFFF;

        grid-area: 2 / 1 / 3 / 2;

    }



    .home-banner-description {

        margin-top: 20px;

        grid-area: 3 / 1 / 4 / 2;

    }



    .home-banner-mascot {

        grid-area: 1 / 1 / 2 / 2;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        height: 255px;

        width: 233px;

    }



    .btn-banner-signup {

        /*background-image: url(../images/btn-banner-signup.svg);*/
        
        background: #43DBD6;
        background-image: linear-gradient(#43DBD6, #34aaa6);
        border-radius: 4px;
        background-size: 40vw 55px;

        width: 40vw;

        background-repeat: no-repeat;

    }



    .btn-banner-amount {

        /*background-image: url(../images/btn-banner-amt.svg);*/

        background-size: 40vw 55px;

        width: 40vw;

        background-repeat: no-repeat;

        margin-left: 3vw;

    }



    .home-banner-text h1:first-child {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 30px;

        line-height: 140%;

        text-align: center;

    }



    .home-banner-text h1:nth-child(2) {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 700;

        font-size: 30px;

        line-height: 140%;

        margin-left: 0 !important;

        text-align: center;

    }



    .home-banner-text {

        margin-top: 0px;

        margin-left: 10px;

        margin-right: 10px;

        text-align: center;

    }



    .btn-banner-signup {

        font-size: 16px;

    }



    .btn-banner-amount h1 {

        font-size: 12px;

        line-height: 12px;

    }



    .btn-banner-amount p {

        font-size: 8px;

    }



    .home-banner-text p {

        font-size: 13px;

    }



    .home-banner-description-two h1 {

        font-size: 19px;

    }



    .stats-item:first-child {

        margin-right: 15px;

    }



    .stats-item2 {

        margin-right: 15px;

        margin-left: 15px;

    }



    .stats-item3 {

        margin-left: 15px;

    }



    .home-banner-description-two p {

        font-size: 10px !important;

    }



    .home-banner-description-two {

        margin-top: 20px;

        margin-bottom: 10px;

    }

}





@media screen and (max-width: 1600px) and (min-width: 993px) {

    .chatShown .home-banner-parent {

        max-width: 877px;

    }



    .chatShown .discord-section-parent {

        max-width: 877px;

    }



    .chatShown .home-banner-text {

        color: #FFFFFF;

        grid-area: 1 / 1 / 2 / 2;

    }



    .chatShown .home-banner-description {

        grid-area: 2 / 1 / 3 / 3;

    }



    .chatShown .home-banner-mascot {

        grid-area: 1 / 2 / 2 / 3;

        display: flex;

        align-items: center;

        flex-direction: column;

        height: 255px;

        width: 233px;

    }



    .chatShown .home-banner-mascot img:first-child {

        width: 100%;

        height: 100%;

        margin-top: -20px;

        margin-bottom: 2px;



    }

}



@media screen and (max-width: 1160px) {

    .chatShown .home-banner-text {

        margin-top: 4vw;

        margin-left: 4vw;

    }



    .chatShown .home-banner-text h1:first-child {

        font-size: 28px;

    }



    .chatShown .home-banner-text h1:nth-child(2) {

        font-size: 28px;

    }



    .chatShown .home-banner-text p {

        font-size: 14px;

    }



    .chatShown .home-banner-text p:nth-child(3) {

        margin-top: 30px;

    }

}





@media screen and (max-width: 1571px) and (min-width: 993px) {

    .steps-section {

        scale: 0.8;

    }



    .place-section {

        scale: 0.8;

    }

}



@media screen and (max-width: 1374px) and (min-width: 1085px) {

    .chatShown .steps-section {

        scale: 0.6;

    }



    .chatShown .place-section {

        scale: 0.6;

    }

}



@media screen and (max-width: 1085px) and (min-width: 993px) {

    .chatShown .steps-section {

        scale: 0.5;

    }



    .chatShown .place-section {

        scale: 0.5;

    }

}



@media screen and (max-width: 1255px) and (min-width: 993px) {

    .place-section {

        scale: 0.8;

    }

}



@media screen and (max-width: 593px) and (min-width: 457px) {

    .place-section {

        scale: 0.8;

    }

}



@media screen and (max-width: 458px) and (min-width: 380px) {

    .place-section {

        scale: 0.65;

    }

}



@media screen and (max-width: 458px) and (min-width: 320px) {}

@media screen and (max-width: 1380px) and (min-width: 992px) {
    

    .user-panel-resp {

        display: flex;

        justify-content: center;

        align-items: center;

    }

    .user-panel {

        display: none;

    }

    .user-panel-resp svg {

        margin-right: 5px;

    }

    .income-carousel{
        margin-top: 60px;
    }
}

@media screen and (max-width: 1245px) and (min-width: 992px) {

    .income-panel {

        box-shadow: inset 0px 1px 8px #010101;
    background: #141821;
    border-radius: 8px;
    font-size: 10px;

        margin-right: 15px;

        width: 91px;

        height: 35px;

        background-size: 91px 45px;

        ;

        background-repeat: no-repeat;

    }



    .nav-link {

        font-size: 14px;

    }

}





@media screen and (max-width: 495px) {

    .navbar-brand img {

        margin: 0;

        width: 32px;

    }



    .navbar-toggler {

        padding: 0;

    }



    .nav-login {

        font-family: 'Rubik';

        font-style: normal;

        font-weight: 600;

        font-size: 14px;

        line-height: 12px;

        /* identical to box height */

        margin-right: 3vw;



        color: #FFFFFF;

    }



    .btn-signup {

        width: 90px;

        height: 30px;

        background-size: 90px 30px;

        font-size: 12px;

        background-repeat: no-repeat;

        margin-right: 0;

    }

}



@media screen and (max-width: 379px) and (min-width: 320px) {

    .place-section {

        scale: 0.55;

    }

}



@media screen and (max-width: 320px) and (min-width: 280px) {

    .place-section {

        scale: 0.5;

    }

}



@media screen and (max-width: 279px) {

    .place-section {

        scale: 0.4;

    }

}



@media screen and (max-width: 405px) {

    .steps-part {

        scale: 0.7;

        margin-bottom: -7vh;

    }



    .works-section {

        margin-top: 10vh;

    }



    .steps-section {

        margin-top: 0px;

    }

}





.notification-top-bar {

    position: sticky;

    top: 0;

    left: 0;

    height: auto;

    padding: 10px;

    width: 100%;

    background: #1ABC9C;

    text-align: center;

    color: #FFFFFF;

    font-family: sans-serif;

    font-weight: lighter;

    font-size: 14px;

    z-index: 999;

}

.notification-top-bar p {

    padding: 0;

    margin: 0;

}

.notification-top-bar p a {

    padding: 5px 10px;

    border-radius: 3px;

    color: #1ABC9C;

    font-weight: bold;

    text-decoration: none;

}



.notification-top-bar img {

    height: 28px;

}



.notification-top-bar .note-items {

    display: flex;

    justify-content: center;

    align-items: center;

}



.notification-top-bar .note-items i {

    margin-left: auto;

}



.btn-banner-amount img {

    height: 88px;

}



.note-items.desk {

    display: flex;

}



.note-items.mobi {

    display: none;

}

@media screen and (max-width: 625px) {

    .btn-banner-amount img {

        height: 55px;

    }



    .note-items.desk {

        display: none;

    }



    .note-items.mobi {

        display: flex;

    }

}



.notification-top-bar.hidden {

    display: none;

}

/***********8/23/2023 ************/
.income-carousel .recent-text {
    color: #43DBD6;
    text-transform: uppercase;
    font-size: 11px;
    margin-left: 20px;
    margin-bottom: 0px;
    margin-top: 5px;
}


.live-income .hide {
    /*background-image: url(../images/btn-signup.svg);*/
    background: #43DBD6;
    background-image: linear-gradient(#43DBD6, #34aaa6);
        border-radius: 4px;
    background-repeat: no-repeat;
    background-position: -10px -14px;
    background-size: 135px;
    width: 135px;
    position: absolute;
    padding: 5px 25px;
    color: #fff;
    bottom: 1px;
    left: 0;
    transform: translateY(100%);
    text-transform: uppercase;
    font-size: .75em;
    cursor: pointer;
    border-left: 0;
    border-top: 0;
}

.income-carousel.hidden {
    margin-top: -21px;
}

body.stats_closed .main-section {
    padding-top: 145px;
}

body.stats_closed .offcanvas{
    top: 65px !important;
    height: calc(100% - 65px) !important;  
}
body.stats_closed .chat-bubble{
top: 81px;
}

body.stats_closed .navbar {
    background: #141821;
}

.main-section.notice-page{
    padding-top:calc(82px + 74px)
}

body.stats_closed .main-section.notice-page{
    padding-top:82px;
}

body.stats_closed .popup-profile-mobile{
    margin-top:82px;
}


.shadow-wall{
    backdrop-filter: blur(6px); 
    width:100%;
    height:100%;    
    position: absolute;
    z-index: 10;
    border-radius: 12px;
    opacity: 0;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.4,0,0.2,1);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.shadow-wall-text{
    font-size: 14px;
    margin-bottom: 0;
}

.shadow-wall .play-offer{
    width: 40px;
    height: 40px;
    background: #43dbd634;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.shadow-wall .play-offer img{
    height: 15px !important;
    width: 12px !important;
}
.network-logo-parent:hover .shadow-wall{
    opacity: 1;
}
.featured-item-offer:hover .shadow-wall{
    opacity: 1;
}

.featured-page-parent .offerimage{
    position:relative;
}

.offer-description ol{
    color:#B2B6D1;
}

@media screen and (max-width: 1090px) and (min-width: 992px) {
.navbar-collapse .home-nav-item{
    display: none;
}
}
/* Offers Page */
.featured-offers-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(362px, 1fr));
    grid-gap: 20px;
    max-width: 1160px;
    margin: auto;
    padding: 0px 10px;
    margin-bottom: 30px;
    min-height: 300px;
}

.featured-offers-panel .featured-item-offer {
    background-image: url(../images/back-light-top.svg), url(../images/back-light-bottom.svg), radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    padding: 10px;
    border-radius: 12px;
    color: #fff;
    height: 124px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    display: grid;
grid-template-columns: auto auto;
grid-gap: 10px;
}

.featured-offers-panel .featured-item-offer .offerimage img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
}
.featured-offers-panel .featured-item-offer .offer-desc {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 12px;
margin-bottom: 6px;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 3;
display: -webkit-box;
-webkit-box-orient: vertical;
color: #B2B6D1;
}
.featured-offers-panel .featured-item-offer .offername{
margin-top: 2px;
margin-bottom: 5px;
}
.featured-offers-panel .featured-item-offer .offer-points{
font-family: 'Rubik';
font-style: normal;
font-weight: 600;
color:#43DBD6;  
}
.featured-offers-page h1 {
font-family: 'Rubik';
font-style: normal;
font-weight: 600;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
text-align: center;
    margin-bottom: 44px;
}
.featured-offers-page{

}
.promo_loader {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
width: calc(100% - 20px);
max-width: 1160px;
}
.loader_ring {
display: inline-block;
width: 50px;
height: 50px
}
.loader_ring:after {
content: " ";
display: block;
width: 56px;
height: 56px;
margin: 4px;
border-radius: 50%;
border-color: #43DBD6 transparent;
border-style: solid;
border-width: 4px;
animation: loader_ring 1.2s linear infinite
}
@keyframes loader_ring {
0% {
    transform: rotate(0deg)
}
to {
    transform: rotate(1turn)
}
}


/* Tour css changes */
.tg-backdrop{
    z-index:9999 !important;
}

.tg-dialog{
    background:radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%) !important;
    color:#fff !important;
    z-index:99999 !important;
}

.tg-dialog .tg-arrow{
    background:radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%) !important;
}

.tg-dialog .tg-dialog-progress-bar{
    background:#141821 !important;
}

.popup-offers-tour{
    
    position: fixed;

    left: 0;

    height: 100%;

    z-index: 1046;

    width: 100%;

    background-color: rgba(0, 0, 0, 0.3);

    opacity: 0;

    visibility: hidden;

    backdrop-filter: blur(7px);
    top:25% !important;
}

.popup-tour{
    transition: 500ms all;
    position: relative;
    width: calc(100% - 20px);
    max-width: 800px;
    margin: 2em auto;
    top: 16%;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    background: radial-gradient(100% 100% at 50% 20%, #252A3A 0%, #1F2436 100%, #2D3246 100%);
    border-radius: 24px;
}

.popup-tour img{
    height: 157px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.popup-tour h3{
    color: #fff;
    
}

.popup-tour h3:last-child{
    font-size: 20px;
}
.popup-tour .button-holder.three-button {
    display:flex;
}
.popup-tour .button-holder div {
    color: #FFFFFF;
    background: rgba(26, 29, 39, 0.35);
    text-decoration: none;
    line-height: 35px;
    font-weight: bold;
    display: block;
    border-top: 1px solid rgba(26, 29, 39, 1);
    position: relative;
    bottom: 0;
    width: 50%;
    text-align: center;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    cursor: pointer;
}

.popup-tour .tour-body{
    padding:40px;
}

.popup-tour .button-holder div:last-child {
   background:rgb(67 219 214 / 25%);
   border-radius: 0px 0px 24px 0px;
}


@media screen and (max-width: 800px) {
    .popup-tour{
        margin:10px;
    }
}

#video-title{
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 43px;
    text-align: center;
    color: #FFFFFF;
}

.tg-dialog .tg-dialog-footer button.tg-dialog-btn{
    background: rgb(67, 219, 214);
    border: none !important;
    color:#fff !important;
}

.tg-dialog .tg-dialog-body{
    font-size: 14px;
    padding: 15px !important;
}

.popup-tour-quit{
    z-index: 999999;
}

.featured-item-offer{
    display: none;
}


.featured-item-offer.show{
    display: grid;
}

.grow {
    animation: grow 1s ease 1;
  }
  @keyframes grow {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }

  .chat-bubble {
    border: none;
    background: #10141d;
    width: 60px;
    position: fixed !important;
    top: 158px;
    right: 0;
    height: 60px;
    border-radius: 10px 0px 0px 10px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 4px 4px 12px rgba(23, 25, 32, 0.44);
    backdrop-filter: blur(6px);
    margin-right: 0 !important;
    transition: all .3s ease-in-out;
        display: flex;
    flex-direction: column;
    padding: 2px;
    font-size: 12px;
    gap: 5px;
    color: rgb(178, 182, 209);
        z-index: 1040;
}

.offcanvas.show:not(.hiding) ~ .chat-bubble, .offcanvas.showing ~ .chat-bubble{
    right: 340px;
}

.offcanvas{
top: 147px !important;
height: calc(100% - 147px) !important;
}

.chatglow{
    margin-left: 12px !important;
}

.send-chat{
    background: rgba(31, 35, 51, 0.64);
    border: 2px solid rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding:6px;
}

.send-chat svg{
 fill: #43DBD6;
}


.send-chat-mobile{
    background: rgba(31, 35, 51, 0.64);
    border: 2px solid rgba(255, 255, 255, 0.04);
        border-radius: 8px;
        padding:6px;
}

.send-chat-mobile svg{
    fill: #43DBD6;
   }
@media screen and (max-width: 992px) {
    .chat-bubble {
        display:none;
    }

    .income-carousel.hidden {
        margin-top: -4px;
    }
}

body:not(.expand-w) .income-carousel{
    margin-top: 54px;
}

body:not(.expand-w) .income-carousel.hidden{
    margin-top: -24px;
}

@media screen and (min-width: 495px) {
    body:not(.expand-w) .income-carousel{
        margin-top: 60px;
    }
    
    body:not(.expand-w) .income-carousel.hidden{
        margin-top: -24px;
    }
    
}

.chat-section-main{
    overflow-y: hidden;
    padding-top:calc(82px + 74px);
    height: calc(100vh - 74px);
    background:#141821;
}

body.stats_closed .chat-section-main{
    padding-top: 92px;
}

.chat-section-main .chat-list{
    height:calc(100vh - 299px);
}

body.stats_closed .chat-section-main .chat-list{
    height:calc(100vh - 236px);
}

.logo-desktop{
    display: block;
}

.logo-mobile{
    display: none;
}

@media screen and (max-width: 495px) {
    .logo-desktop{
        display: none;
    }
    
    .logo-mobile{
        display: block;
    }
}

.chat-mobile-bubble{
    border: 2px solid rgba(255, 255, 255, 0.04);
    background: rgba(31, 35, 51, 0.32);
    width: 40px;
    height: 40px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 4px 4px 12px rgba(23, 25, 32, 0.44);
    backdrop-filter: blur(6px);
    margin-right: 1vw;
}

/* NEW CSS FEWTURE */
.featured-offer-parent {
    max-width: 1160px;
    margin: 0 auto;
}

.featured-offer-parent h2 {
    color: #ffffff;
    font-size: 24px;
    text-align: center;
    font-family: 'Rubik';
    font-style: normal;
    font-weight:600;
}

.featured-login {
    width: 100%;
    border-radius: 24px;
    background-image: url(../images/back-light-top.svg), url(../images/back-light-bottom.svg), radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    text-align: center;
}

.featured-login h1 {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 140%;
    margin-top: 24px;
    color: #FFFFFF;
}

.featured-login .signup-inp input {
    background: transparent;
    border: none;
    width: 300px;
    height: 46px;
}

.featured-login .signup-inp{
    display: flex;
    justify-content: center;
}
.featured-login .continue-with {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
    margin-top: 20px;
    color: #B2B6D1;
}

.featured-offer {
    width: 100%;
    padding: 20px;
    border-radius: 24px;
    background-image: url(../images/back-light-top.svg), url(../images/back-light-bottom.svg), radial-gradient(93.79% 93.79%, rgba(37, 42, 58, 0.64) 0%, rgba(31, 36, 54, 0.64) 100%, rgba(45, 50, 70, 0.64) 100%);
    background-position: left top, left bottom;
    background-repeat: no-repeat, no-repeat;
    color: #B2B6D1;
}

.featured-offer .offerimage img{
    width: 100%;
    height: 250px;
    border-radius: 24px;
}

.featured-offer .shadow-wall{
    width:auto;
}

.featured-offer .offer-desc{
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 6px;
    overflow: hidden;
    color: #B2B6D1;
}

.featured-offer .offer-points {
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
    color: #43DBD6;
    margin-bottom: 0px;
    font-size: 20px;
}
@media screen and (max-width: 450px) {
.featured-login .signup-inp{
    width: calc(100vw - 72px);
    background-size: calc(100vw - 72px) 48px;
}

.featured-login .signup-inp input{
    width: calc(100vw - 110px);
}

.featured-login .mobile-checkbox{
    width: calc(100vw - 80px);
}

.featured-login .signup-checkbox{
    width: calc(100vw - 80px);
}

.featured-login .register-btn {
    width: calc(100vw - 70px);
    background-size: calc(100vw - 70px) 44.31px;
}

.featured-login .or_divided{
    width: calc(100vw - 80px);
}
}



.tabs__buttons--container {
    display: flex;
    margin-bottom: 1rem;
  }
  
  .tabs__tab-btn {
    width: 50%;
    background: none;
    border: none;
    padding: 1rem 2rem;
    cursor: pointer;
    border-bottom: solid 3px #43DBD6;
    color: #fff;
    font-family: 'Rubik';
    font-style: normal;
    font-weight: 600;
  }
  
  .tabs__tab-btn--not-selected {
    border-bottom-color: #141821;
  }

  .tabs__tab-btn:hover:first-child{
    border-radius: 24px 0px 0px 0px;
  }

  .tabs__tab-btn:hover:last-child{
    border-radius: 0px 24px 0px 0px;
  }
  
  .tabs__tab-btn:hover {
  
    background-color: #141821;
    transition: 0.3s;
  }
  
  .tabs__tab--hide {
    display: none;
  }
  
  .tabs__tab--show {
    display: block;
  }
  
  .tabs__tab {
    animation: tabApear 0.6s;
  }
  
  @keyframes tabApear {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .offer-header-grid{
    display: grid;
    grid-template-columns: 100px auto;
}

.offer-popup-categories span{
  background-color: #43dbd6a1;
  padding: 3px 10px;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
  margin-right: 5px;

}

.input-cont{
    box-shadow: inset 0px 1px 8px #020202;
    background-color: #1f2333;
    border-radius: 10px;
    width: 360px;

    height: 48px;

    margin-top: 8px;
  }


.input-cont.group input{
    width: 300px;
  }



  .input-cont input {

background: transparent;

border: none;

width: 320px;

height: 46px;
}

.input-cont input:focus-visible {

outline: none;

}

.input-cont .hidden {
            display: none;
        }

        .mobile-checkbox .checkmark{
            box-shadow: inset 0px 1px 8px #020202;
    background-color: #1f2333;
    border-radius: 8px;
        }