@import "partials/partials";
.header-wrapper{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    min-height: 85px;
    .header-title-block{
        display: flex;
        .dropdown-toggle::after{
            margin-left: 18px;
            @media (max-width: 1199px) {
                margin-left: 8px;
            }
        }
        .tier-info{
            margin-right: 10px;
            img{
                display: none;
            }
        }
        .live-active{
            .label-web{
                margin-right: 5px;
            }
        }
        .dropdown-menu{
            border-radius: 10px;
            background: #FFF;
            box-shadow: 0px 6px 9px 5px rgba(0, 0, 0, 0.06);
            border: none;
            padding: 5px;
            margin-top: 20px !important;
            min-width: 190px;
            .dropdown-item{
                display: flex;
                align-items: center;
                border-radius: 8px;
                height: 52px;
                font-size: 13px;
                color: $primary-dark;
                transition: .3s;
                .status{
                    margin-top: -2px;
                    width: 8px;
                    height: 8px;
                    display: inline-block;
                    background-color: #343333;
                    margin-right: 12px;
                    border-radius: 50%;
                    &.active{
                        background-color: #009518;
                    }
                }
                &:hover{
                    background: #F0F1F9;
                }
                &.item-disbaled{
                    opacity: .5;
                    cursor: not-allowed;
                }
            }
        }
        .header-title{
            margin-bottom: 0;
            color: $primary-dark;
            font-size: 16px;
            font-weight: 700;
        }
        .live-active{
            display: inline-flex;
            align-items: center;
            white-space: unset;
            max-width: none;
            opacity: 1 !important;
            color: #019419;
            background-color: $white;
            border: solid 1px $input-text-color;
            color: $input-text-color;
            font-weight: 500;
            font-size: 1rem;
            .status{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                display: inline-block;
                background-color: #009518;
                margin-right: 10px;
            }
        }
    }
    .right-block{
        display: flex;
        align-items: center;
        .buy-btn{
            flex-shrink: 0;
            max-width: none;
            background-color: $white;
            color: $input-text-color;
            border: solid 1px $input-text-color;
            width: 185px;
            margin-right: 15px;
            .buy-label{
                @media (max-width:1200px) {
                    display: none;
                }
            }
            .cart-mob{
                display: none;
                @media (max-width:1200px) {
                    display: block;
                }
            }
            @media (max-width:1200px) {
                padding: 0 !important;
                border: none;
                background: none;
            }
        }
        .header-btn-cover{
            display: flex;
            align-items: center;
        }
        .buy-pros-block{
            display: flex;
            align-items: center;
            padding-right: 35px;
            padding-left: 80px;
            .pros-label{
                display: inline-block;
                color: #4D6090;
                font-size: 0.875rem;
                padding-right: 15px;
            }
            .buy-pros-btn{
                margin-left: 8px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 56px;
                height: 40px;
                border: solid 1px #4D6090;
                border-radius: 40px;
                transition: .3s;
                &:hover{
                    border-color: $primary-blue;
                    opacity: .8;
                }
            }
        }
        .notify-dropdown{
            margin-left: 12px;
            .notify-btn{
                border: none;
                border-radius: 20px;
                padding: 6px 10px;
                width: 60px;
                text-align: center;
                background: rgba(243, 244, 250, 0.63);
                max-height: 40px;
                &::after{
                    display: none;
                }
                .notify-icon{
                    position: relative;
                    display: inline-block;
                    .new{
                        display: inline-block;
                        position: absolute;
                        left: 0;
                        top: 3px;
                        width: 8px;
                        height: 8px;
                        background-color: #FF5656;
                        border-radius: 50%;
                    }
                }
            }
            .dropdown-menu{
                overflow: hidden;
                width: 390px;
                max-width: 90vw;
                border-radius: 10px;
                background: #FFF;
                box-shadow: 0px 6px 9px 5px rgba(0, 0, 0, 0.06);
                border: none;
                padding: 0;
                margin-top: 20px !important;
                
                .notify-title{
                    padding: 20px 25px;
                    color: $primary-dark;
                    font-size: 14px;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                    .count{
                        margin-left: 20px;
                        background-color: #EEEFF5;
                        border-radius: 50%;
                        width: 25px;
                        height: 25px;
                        text-align: center;
                        font-size: 12px;
                        line-height: 12px;
                        font-weight: 600;
                        color: $primary-dark;
                        display: inline-flex;
                        flex-shrink: 0;
                        align-items: center;
                        justify-content: center;
                    }
                    .notify-clr-btn{
                        margin-left: auto;
                        padding-right: 0;
                        transition: .3s;
                        color: #0C15F9;
                        font-size: 12px;
                        font-weight: 500;
                        background-color: transparent;
                        border: none;
                        box-shadow: none;
                        &:hover{
                            opacity: .8;
                        }
                    }
                }
                .dropdown-scrl-li{
                    padding-bottom: 5px;
                }
                .dropdown-item-cover{
                    max-height: 360px;
                    overflow-x: hidden;
                    overflow-y: auto;
                }
                .dropdown-item{
                    display: flex;
                    align-items: center;
                    padding: 12px 22px;
                    background-color: $white;
                    border-bottom: solid 1px #EDEEF8;
                    white-space: unset;
                    position: relative;
                    .notify-close-btn{
                        position: absolute;
                        right: 2px;
                        top: 2px;
                        background-color: transparent;
                        box-shadow: none;
                        border: none;
                        line-height: 0;
                        padding: 2px;
                        opacity: 0;
                        transition: .3s;
                    }
                    &:hover{
                        .notify-close-btn{
                            opacity: 1;
                        }
                    }
                    &:last-child{
                        border-bottom: none;
                    }
                    &.unread{
                        background-color: #F3F4FA;
                        .icon{
                            background-color: $white;
                        }
                    }
                    .icon{
                        width: 46px;
                        height: 46px;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        background-color: #F2F3F9;
                        flex: 0 0 auto;
                        border-radius: 50%;
                    }
                    .det{
                        flex: 1 1 auto;
                        padding-left: 18px;
                        p{
                            color: #000;
                            font-size: 12px;
                            margin-bottom: 2px;
                        }
                        .time{
                            color: #697F9B;
                            font-size: 10px;
                        }
                    }
                }
            }
        }
        .my-acc-dropdown{
            margin-left: 12px;
            .my-acc-btn{
                width: 185px;
                max-height: 40px;
                padding: 9px 18px 9px 13px;
                border-radius: 20px;
                background: #E8EFFF;
                border: none;
                display: flex;
                align-items: center;
                font-size: 14px;
                color: $input-text-color;
                img{
                    border-radius: 50%;
                }
                .acc-icon{
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 50%;
                    width: 23px;
                    height: 23px;
                    background-color: $white;
                    display: inline-block;
                }
                .acc-label{
                    margin-left: 10px;
                    margin-right: 8px;
                }
                &::after{
                    margin-left: auto;
                    margin-right: 10px;
                    border-top-color: $input-text-color;
                    border-top: 0.4em solid;
                    border-right: 0.4em solid transparent;
                    border-left: 0.4em solid transparent;
                }
            }
            .dropdown-menu{
                border-radius: 10px;
                background: #FFF;
                box-shadow: 0px 6px 9px 5px rgba(0, 0, 0, 0.06);
                border: none;
                padding: 5px;
                margin-top: 20px !important;
                .dropdown-item{
                    display: flex;
                    align-items: center;
                    border-radius: 8px;
                    height: 52px;
                    font-size: 13px;
                    color: $primary-dark;
                    transition: .3s;
                    img{
                        margin-right: 10px;
                    }
                    &:hover{
                        background: #F0F1F9;
                    }
                }
            }
        }


        .buy-pros-dropdown{
            margin-right: 12px;
            .buy-pros-btn{
                // width: 160px;
                max-height: 40px;
                padding: 9px 18px 9px 13px;
                border-radius: 20px;
                // background: $white;
                // color: $input-text-color;
                border: solid 1px $primary-blue;
                color: $white;
                background: $primary-blue;
                display: flex;
                align-items: center;
                font-size: 14px;
                .cart-mob{
                    display: none;
                    filter: brightness(0) saturate(100%) invert(100%) sepia(21%) saturate(1%) hue-rotate(50deg) brightness(107%) contrast(101%);
                    @media($sm-1199){
                        display: block;
                    }
                }
                @media($sm-1679){
                    font-size: 13px;
                    // width: 135px;
                }
                @media($sm-1481){
                    // width: 125px;
                }
                .acc-label{
                    margin-left: 10px;
                    margin-right: 8px;
                    @media($sm-1199){
                        display: none;
                    }
                }
                &::after{
                    display: none;
                    margin-left: auto;
                    margin-right: 2px;
                    border-top-color: $input-text-color;
                    border-top: 0.4em solid;
                    border-right: 0.4em solid transparent;
                    border-left: 0.4em solid transparent;
                }
            }
            .dropdown-menu{
                border-radius: 10px;
                background: #FFF;
                box-shadow: 0px 6px 9px 5px rgba(0, 0, 0, 0.06);
                border: none;
                padding: 5px;
                margin-top: 20px !important;
                min-width: 190px;
                .dropdown-item{
                    display: flex;
                    align-items: center;
                    border-radius: 8px;
                    height: 52px;
                    font-size: 13px;
                    color: $primary-dark;
                    transition: .3s;
                    .icon{
                        flex-grow: 0;
                        margin-right: 10px;
                        width: 22px;
                        img{
                            max-width: 100%;
                            border-radius: 50%;
                        }
                    }
                    &:hover{
                        background: #F0F1F9;
                    }
                    &.item-disbaled{
                        opacity: .5;
                        cursor: not-allowed;
                    }
                }
            }
        }
    }
    .info-block{
        // font-size: 16px;
        color: $input-text-color;
        margin-right: 40px;
        display: flex;
        align-items: center;
        .info-label{
            font-weight: 600;
            margin-left: 0;
        }
        .info-val{
            margin-left: 10px;
            font-weight: 500;
        }
        .info-val-end{
            margin-left: 40px;
        }
        .pros-val{
            color: $green;
            align-items: center;
            display: inline-flex;
            img{
                margin-right: 3px;
                transform-origin: center;
                margin-top: -1px;
            }
            &.pros-val-up{
                img{
                    margin-top: -2px;
                    transform: rotate(180deg);
                }
            }
            &.pros-val-down{
                color: #FC5252;
                img{
                    filter: brightness(0) saturate(100%) invert(60%) sepia(59%) saturate(6568%) hue-rotate(331deg) brightness(125%) contrast(147%);
                }
            }
        }
    }
    .theme-toggle-btn-block{
        display: inline-flex;
        margin-right: 20px;
        @media (max-width: 1441px) {
            margin-right: 15px;
        }
        .theme-toggle-btn{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            border: none;
            width: 30px;
            height: 30px;
            background-color: transparent;
        }
    }
    .wallet-btn-cover{
        position: relative;
        .wallet-btn-copy{
            position: absolute;
            right: 8px;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #F0F0F8;
        }
    }
    .wallet-btn{
        border-radius: 20px;
        // color: $white;
        // background: $primary-blue;
        background-color: #fff;
        color: #4D6090;
        border: solid 1px #4D6090;
        padding: 9px 30px;
        font-size: 0.875rem;
        transition: .3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
        &:hover{
            opacity: .8;
        }
    }
    .reg-props-btn{
        border: none;
        color: $primary-blue;
        margin-right: 15px;
        padding-left: 5px !important;
        border-radius: 0;
        padding-right: 5px !important;
        img{
            max-width: 100%;
        }
        @media (max-width: 1481px) {
            margin-right: 10px;
        }
        @media ($sm-1199) {
            margin-right: 5px;
            padding-left: 0 !important;
        }
        @media (max-width: 1100px) {
            max-width: 34px;
            height: 34px;
            padding: 0 !important;
        }
        .reg-label{
            display: none;
            @media (min-width: 1401px) {
                display: block;
            }    
        }
        .cart-icon-responsive{
            @media (min-width: 1401px) {
                display: none;
            }    
        }
        // @media (max-width: 580px) {
        //     display: none;
        // }
    }
    .login-btn{
        margin-left: 15px;
        border-radius: 20px;
        border: none;
        background: #E8EFFF;
        padding: 8px 30px;
        transition: .3s;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: $input-text-color;
        font-size: 14px;
        img{
            margin-left: 25px;
        }
        &:hover{
            opacity: .8;
        }
    }
    .wallet-btn-cover-web{
        @media($sm-991){
            margin-left: 8px;
        }
        .wallet-btn-connected{
            text-align: left;
        }
    }
    .prof-avt{
        margin-left: 20px;
        @media($sm-1679){
            margin-left: 10px;
        }
        img{
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            object-fit: cover;
        }
    }
}

// Wallet btn
.wallet-btn-cover{
    position: relative;
    .wallet-btn-copy{
        position: absolute;
        right: 8px;
        top: 0;
        bottom: 0;
        margin: auto;
        background-color: #F0F0F8;
        border: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        line-height: 0;
    }
    .wallet-btn{
        min-width: 150px;
    }
}
@media (max-width: 1800px) {
    .header-wrapper .header-title-block .live-active {
        font-size: .875rem;
    }
    .header-wrapper .info-block{
        font-size: 13px;
    }
    .header-wrapper .theme-toggle-btn-block{
        margin-right: 15px;
    }
    .header-wrapper .right-block .buy-pros-dropdown{
        margin-right: 10px;
    }
    .header-wrapper .info-block .info-val-end {
        margin-left: 25px;
    }
    .header-wrapper .info-block {
        margin-right: 20px;
    }
}
@media($sm-1679){
    .header-wrapper .header-title-block .live-active{
        font-size: 12px;
    }
    .header-wrapper .right-block .buy-pros-block{
        padding-right: 20px;
        padding-left: 40px;
    }
    .header-wrapper .right-block .buy-pros-block .buy-pros-btn{
        height: 34px;
        width: 50px;
    }
    .header-wrapper .right-block .buy-pros-block .pros-label{
        padding-right: 10px;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .dropdown-item .icon {
        width: 42px;
        height: 42px;
        img{
            width: 18px;
        }
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .dropdown-item {
        padding: 10px 22px;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .notify-title {
        padding: 16px 25px;
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn{
        width: 160px;
        font-size: 13px;
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn::after{
        margin-right: 0;
    }
    .header-wrapper .right-block .notify-dropdown .notify-btn{
        width: 50px;
    }
    .header-wrapper .login-btn img {
        margin-left: 15px;
    }
    .header-wrapper .info-block{
        // font-size: 15px;
        margin-right: 15px;
    }
    .header-wrapper .info-block .info-val-end {
        margin-left: 22px;
    }
    .header-wrapper .right-block .buy-btn{
        width: 150px;
    }
    .header-wrapper .wallet-btn, .header-wrapper .login-btn, .header-wrapper .right-block .buy-btn{
        font-size: 0.813rem;
        padding: 9px 16px;
    }
    .header-wrapper .prof-avt img {
        width: 36px;
        height: 36px;
    }
    .header-wrapper {
        padding: 15px;
        min-height: 70px;
    }
    .nav-block .nav-footer-block .welcome-msg{
        font-size: 15px;
    }
    .filter-wrapper {
        padding: 13px 20px;
    }
}

@media($sm-1481){
    .header-wrapper{
        .wallet-btn-cover .wallet-btn {
            min-width: 130px;
        }
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn {
        width: 154px;
    }
    .header-wrapper .info-block{
        font-size: 13px;
    }
    .header-wrapper .header-title-block .live-active{
        font-size: .813rem;
    }
    .header-wrapper .right-block .buy-pros-dropdown{
        margin-right: 8px;
    }
    .header-wrapper .right-block .buy-pros-block .pros-label{
        font-size: 0.813rem;
        padding-right: 5px;
    }
    .header-wrapper .right-block .buy-pros-block {
        padding-right: 10px;
        padding-left: 10px;
    }
    .header-wrapper .wallet-btn-cover-web .wallet-btn-connected{
        min-width: 140px;
    }
    .header-wrapper .right-block .notify-dropdown, .header-wrapper .right-block .my-acc-dropdown{
        margin-left: 8px;
    }
    .nav-block .nav-footer-block .welcome-msg{
        font-size: 14px;
        max-width: 200px;
    }
    .header-wrapper .wallet-btn, .header-wrapper .login-btn{
        padding: 8px 16px;
    }
    .header-wrapper .right-block .buy-btn {
        margin-right: 8px;
    }
    .header-wrapper .info-block .info-val {
        margin-left: 6px;
    }
    .header-wrapper .login-btn{
        margin-left: 8px;
    }
    .header-wrapper .login-btn img {
        margin-left: 10px;
    }
    .header-wrapper .info-block{
        // font-size: 14px;
        margin-right: 20px;
    }
    .header-wrapper .info-block .info-val-end {
        margin-left: 20px;
    }
    .header-wrapper .right-block .buy-btn{
        width: auto;
    }
}
@media(max-width: 1400px){
    .header-wrapper .header-title-block .live-active .label-web{
        display: none;
    }
// }
// @media(max-width: 1350px){
    .header-wrapper .header-title-block .tier-info {
        margin-right: 5px;
    }
    .header-wrapper .header-title-block .tier-info img{
        display: none;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn .acc-label, 
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn::after {
        display: none;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn .cart-mob {
        display: block;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn {
        width: 40px;
        height: 40px;
        padding: 5px;
        align-items: center;
        justify-content: center;
    }
}

@media(max-width: 1300px){
    .header-wrapper .header-title-block .live-active .label-web{
        display: none;
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn{
        width: 36px;
        height: 36px;
        padding: 0;
        img{
            width: 30px;
        }
        &::after{
            display: none;
        }
    }
    
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn .acc-label{
        display: none;
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn {
        background-color: rgba(243, 244, 250, 0.63);
    }
    .header-wrapper .right-block .my-acc-dropdown .my-acc-btn .acc-icon{
        background-color: transparent !important;
        width: 100%;
        height: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
@media($sm-1199){
    .header-wrapper .theme-toggle-btn-block {
        margin-right: 5px;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn::after{
        display: none;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn{
        width: 40px;
        height: 40px;
        padding: 5px;
        align-items: center;
        justify-content: center;
    }
    .header-wrapper .right-block .buy-pros-block .pros-label{
        display: none;
    }
    .header-wrapper .right-block .buy-pros-block .buy-pros-btn {
        height: 36px;
        width: 36px;
    }
    .header-wrapper .wallet-btn-cover-web .wallet-btn-connected {
        min-width: 135px;
    }
    .header-wrapper .right-block .notify-dropdown .notify-btn {
        width: 40px;
    }
   
    .header-wrapper .header-title-block .live-active .status{
        margin-right: 5px;
    }
    .header-wrapper .header-title-block .live-active {
        font-size: .75rem;
    }
    .header-wrapper .info-block {
        font-size: 0.75rem;
        margin-right: 10px;
    }
    .header-wrapper .info-block .info-val-end {
        margin-left: 12px;
    }
    .header-wrapper .login-btn img {
        margin-left: 5px;
    }
    .header-wrapper .right-block .buy-btn {
        margin-right: 5px;
    }
    .header-wrapper .login-btn {
        margin-left: 5px;
    }
    .header-wrapper .wallet-btn, .header-wrapper .login-btn {
        padding: 6px 10px;
    }
    .header-wrapper .header-title-block{
        flex: 1 1 auto;
        padding-right: 10px;
    }
}
@media(max-width: 1100px){
    .header-wrapper .prof-avt img {
        width: 34px;
        height: 34px;
    }
    .header-wrapper .info-block{
        font-size: 11px;
    }
    .header-wrapper .header-title-block .live-active{
        font-size: 10px;
    }
    .header-wrapper .wallet-btn-cover .wallet-btn{
        font-size: 12px;
        min-width: 125px;
    }
    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn{
        width: 34px;
        height: 34px;
        img{
            max-width: 15px;
        }
    }
    .header-wrapper .right-block .buy-pros-block .buy-pros-btn {
        height: 36px;
        width: 36px;
        img{
            max-width: 16px;
        }
    }
    .header-wrapper .right-block .notify-dropdown .notify-btn{
        width: 36px;
        height: 36px;
    }
    
}

@media($sm-991){
    .header-wrapper .right-block .buy-pros-block{
        padding-right: 0;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu{
        width: 340px;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .notify-title {
        padding: 15px 15px;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .dropdown-item {
        padding: 10px 15px;
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .dropdown-item .icon {
        width: 38px;
        height: 38px;
        img{
            width: 16px;
        }
    }
    .header-wrapper .right-block .notify-dropdown .dropdown-menu .dropdown-item .det {
        padding-left: 10px;
    }
    .header-wrapper .wallet-btn, .header-wrapper .login-btn {
        padding: 6px 15px;
    }
    .header-wrapper .prof-avt {
        margin-left: 0;
    }
    .header-wrapper .info-block .info-label{
        margin-left: 0;
    }
    .header-wrapper .wallet-btn-cover-web{
        display: none;
    }
}
@media($sm-767){
    .header-wrapper .header-btn-web, .header-wrapper .login-btn, .wallet-btn-cover-web{
        display: none;
    }
// }
// @media($sm-579){
    .header-wrapper .right-block .buy-pros-block{
        padding-right: 0;
        padding-left: 0;
    }
    .header-wrapper .right-block .buy-btn{
        margin-right: 0;
        margin-left: auto;
        margin-left: 5px;
    }
    .header-wrapper .header-title-block{
        flex: 0 0 auto;
        padding-right: 0;
    }
    .header-wrapper{
        z-index: 1 !important;
        flex-wrap: wrap;
        position: relative;
        .header-btn-cover{
            position: absolute;
            top: -45px;
            right: 0;
            z-index: 2;
        }
        &.header-offline{
            position: static;
            .admin-h-btn-block{
                position: static;
            }
            .right-block{
                margin-top: 0;
                padding-top: 0;
                &:before{
                    display: none;
                }
            }
        }
    }
    
    // .header-wrapper .right-block{
    //     margin-top: 12px;
    //     padding-top: 15px;
    //     padding-bottom: 0;
    //     width: 100%;
    //     justify-content: space-between;
    //     position: relative;
    //     &::before{
    //         content: '';
    //         position: absolute;
    //         left: -15px;
    //         top: 0;
    //         width: calc(100% + 30px);
    //         height: 1px;
    //         background-color: #ECECEC;
    //         @media ($sm-479) {
    //             width: calc(100% + 20px);
    //             left: -10px;
    //         }
    //     }
    // }
    .header-wrapper .info-block{
        padding-top: 4px;
    }
    .header-wrapper .theme-toggle-btn-block {
        
        .theme-toggle-btn{
            height: 36px;
        }
    }
    .header-wrapper .theme-toggle-btn-block{
        margin-right: 10px;
    }
}
@media(max-width: 479px){
    .header-wrapper {
        padding: 15px 10px;
    }
    .header-wrapper .info-block{
        font-size: .75rem;
    }
    .header-wrapper .header-title-block .live-active {
        font-size: .625rem;
        padding: 6px 9px;
    }
    .header-wrapper .header-title-block .live-active .status {
        width: 6px;
        height: 6px;
    }
    .header-wrapper .theme-toggle-btn-block {
        margin-right: 5px;
    }
}
@media(max-width: 360px){
    .header-wrapper.header-offline {
        padding: 15px 10px;
    }
    .header-wrapper.header-offline .info-block .info-val-end {
        margin-left: 10px;
    }
    .header-wrapper.header-offline .info-block {
        font-size: 11px;
    }
    .filter-wrapper .block-left{
        width: 100%;
    }
    .filter-wrapper {
        padding: 13px 10px;
    }
    .filter-wrapper .filter-nav-btn{
        margin-right: 5px;
        flex-grow: 1;
        &:last-child{
            margin-right: 0;
        }
    }

    .header-wrapper .right-block .buy-pros-dropdown .buy-pros-btn{
        width: 28px;
        height: 28px;
        img{
            max-width: 13px;
        }
    }
    .header-wrapper .right-block .buy-pros-block .buy-pros-btn {
        height: 28px;
        width: 28px;
        img{
            max-width: 16px;
        }
    }
    .header-wrapper .connect-wallet-mob-btn{
        height: 28px;
        width: 28px;
        img{
            max-width: 16px;
        }
    }
    .header-wrapper .prof-avt img{
        width: 30px;
        height: 30px;
    }
    .header-wrapper .right-block .notify-dropdown .notify-btn{
        width: 36px;
        height: 36px;
    }
    .header-wrapper .right-block .buy-pros-dropdown {
        margin-right: 5px;
    }
    .header-wrapper .header-title-block .live-active{
        font-size: 0.563rem;
    }
}

.header-wrapper .prof-avt img{
    border: solid 1px #dfdfdf;
}
.membership-tier-header{
    .create-btn{
        // @media($sm-1199){
        //     min-width: auto;
        //     padding: 0;
        //     border: none;
        //     border-radius: 50%;
        //     width: 35px;
        //     height: 35px;
        //     .add-label-mob{
        //         display: block;
        //     }
        //     .add-label-web{
        //         display: none;
        //     }
        // }
    }
    .btn-blue{
        font-weight: 400;
        margin-left: 10px;
        min-width: auto !important;
        font-size: 14px;
        padding: 8px 20px;
        @media($sm-1679){
            margin-left: 5px !important;
            font-size: 13px;
            padding: 7px 14px;
        }
        @media(max-width: 370px){
            padding: 7px 12px;
            font-size: 11px;
            margin: 3px 0;
            &:first-child{
                margin-left: 0 !important;
            }
        }
    }
    .resource-acc-btn{
        border: solid 1px #BED0FD;
        background-color: $white;
        color: $text-primary-dark;
    }
    .topup-reward-btn{
        background-color: #5B5EA9;
        display: inline-flex;
        align-items: center;
        img{
            margin-left: 10px;
            @media ($sm-991) {
                display: none;
            }
        }
    }
    .rew-avail-block{
        flex: 1 1 auto;
        justify-content: flex-end;
        display: inline-flex;
        align-items: center;
        font-weight: 500;
        color: $text-primary-dark;
        font-size: 14px;
        margin-right: 30px;
        margin-left: auto !important;
         @media($sm-1679){
            // font-size: 13px;
            margin-right: 15px;
        }
        @media($sm-991){
            margin-right: 10px;
        }
        @media($sm-767){
            font-size: 14px;
        }
        @media($sm-479){
            width: 100%;
            justify-content: flex-start;
            padding-top: 10px;

        }
        span{
            padding-left: 8px;
            color: #0DAD4D;
        }
    }    
   
    @media($sm-1199){
        .create-btn {
            width: 35px;
            height: 35px;
            padding: 0;
            .add-label-web {
                display: none;
            }
            .add-label-mob{
                display: block;
            }
        }
        .create-btn{
            padding: 0;       
        }
    }
    .sec-title{
        margin-right: 10px;
    }
    .block-right{
        padding: 8px 0;
        margin-left: auto;
        @media(max-width: 767px){
          justify-content: flex-end;  
        }
    }
    @media(max-width: 1100px){
        flex-wrap: wrap;
        .block-right{
            padding: 8px 0;            
        }
    }
}
@media(max-width: 479px){
    .membership-tier-header .resource-acc-btn, 
    .membership-tier-header .topup-reward-btn{
        flex-grow: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

.connect-wallet-mob-btn{
    width: 34px;
    height: 34px;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 50%;
    border: solid 1px #4D6090;
    background-color: transparent;
    margin-right: 5px;
    @media (min-width:991px) {
        display: none;
    }
    img{
        max-width: 100%;
        max-height: 100%;
    }
    &.wallet-connected{
        background-color: #1FD01F !important;
        border-color: #1FD01F !important;
        img{
            filter: grayscale(1) brightness(5);
        }
    }
}
.header-wrapper.sticky-lg-top{
    z-index: 1050;
}

.profile-select-block{
    .prof-avt-btn{
        padding: 0;
        border: 0;
        background-color: transparent;
        &::after{
            display: none;
        }
    }
    .dropdown-menu{
        width: 220px;
        border-radius: 10px;
        background: #FFF;
        box-shadow: 0px 6px 9px 5px rgba(0, 0, 0, 0.06);
        border: none;
        padding: 15px;
        margin-top: 20px !important;
        border: solid 1px #4D6090;
        .prof-title-block{
            display: flex;
            align-items: center;
            margin-bottom: 13px;
            .prof-avt-img{
                flex-shrink: 0;
                img{
                    width: 47px;
                    height: 47px;
                    border-radius: 50%;
                    object-fit: cover;
                    border: solid 1px #fff;
                }
            }
            .prof-det-block{
                padding-left: 19px;
                flex: 1 1 auto;
                h4{
                    font-weight: 600;
                    font-size: 16px;
                    margin-bottom: 5px;
                    @media ($sm-1679) {
                        font-size: 15px;
                    }
                    @media ($sm-479) {
                        font-size: 14px;
                    }
                }
                .uid-block{
                    .uid{
                        display: inline-block;
                        font-size: 12px;
                        font-weight: 500;
                        color: #777777;
                    }
                    .copy-btn{
                        margin-left: 5px;
                        background: none;
                        border: none;
                        padding: 2px;
                    }
                }
            }
        }
        .tier-block{
            display: flex;
            align-items: center;
            color: $text-primary-dark;
            font-size: 13px;
            font-weight: 500;
            padding: 10px 15px;
            border: 1px solid #E3E4F3;
            border-radius: 6px;
            background-color: #EFF6FF;
            img{
                margin-right: 15px;
            }
            .tier-block{
                display: inline-block;
            }
        }
        .dropdown-nav-block{
            .dropdown-item{
                height: 50px;
                cursor: pointer;
            }
        }
        .kyc-prof-block{
            .kyc-link-item{
                display: flex;
                align-items: center;
               width: 100%;
               padding: 8px 20px;
               border-radius: 8px;
               background-color: #251E0D;
               color: #FBCB5E;
               text-decoration: none;
               font-size: 13px;
               font-weight: 500;
               border: 1px solid #DFD04C;
               background-color: #FFF27E;
               color: #70650C;
               height: 43px;
               &.verified{
                    border-color: #79EB42;
                    background: #CBFFCC;
                    color: #4EB21E;
               }
               .icon{
                    margin-right: 15px;
               }
               .kyc-arrw{
                margin-left: auto;
               }
            }
        }
        .dropdown-item{
            display: flex;
            align-items: center;
            border-radius: 8px;
            height: 52px;
            font-size: 13px;
            color: $primary-dark;
            transition: .3s;
            img{
                margin-right: 10px;
            }
            &:hover{
                background: #F0F1F9;
            }
        }
    }
}
@media ($sm-479) {
    .profile-select-block .dropdown-menu .prof-title-block .prof-det-block h4 {
        margin-bottom: 2px;
    }
    .profile-select-block .dropdown-menu .prof-title-block .prof-det-block .uid-block .uid {
        font-size: 11px;
    }
    .profile-select-block .dropdown-menu .prof-title-block .prof-det-block {
        padding-left: 10px;
    }
    .profile-select-block .dropdown-menu .dropdown-nav-block .dropdown-item {
        height: 44px;
    }
    .profile-select-block .dropdown-menu .kyc-prof-block .kyc-link-item {
        padding: 8px 15px;
    }
}

.header-wrapper{
    @media ($sm-991) {
        position: fixed;
        z-index: 1001 !important;
        top: 0;
        right: 70px;
        padding: 15px 0 !important;
        border: none !important;
        .prof-avt img {
            width: 43px;
            height: 43px;
        }
        .theme-toggle-btn-block {
            margin-right: 15px;
        }
    }
}