#bottomheader-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 98;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    background-color: rgba(255,255,255,.7);
    display: flex;
    min-height: 61px;
    border-top: solid 1px rgba(0,0,0,.05);
    text-align: center;
    transition: transform 350ms ease!important
}

#bottomheader-bar a {
    color: #000000;
    padding-top: 12px;
    position: relative;
    flex: 1 1 auto
}

#bottomheader-bar a span {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 10px;
    font-weight: 500;
    margin-top: 0px;
    opacity: .7;
}

#bottomheader-bar a i {
    font-size: 18px;
    position: relative;
    z-index: 2
}

#bottomheader-bar a svg {
    transform: translateY(-6px)
}

#bottomheader-bar .badge {
    font-style: normal;
    z-index: 5;
    top: 0;
    position: absolute;
    margin-left: 3px;
    color: #fff!important;
    width: 18px;
    text-align: center;
    line-height: 18px;
    padding: 0;
    padding-left: 0!important;
    border-radius: 18px;
    margin-top: 7px;
    font-size: 11px
}


.bottomheader-menu-hidden {
    transition: all 100ms ease;
    transform: translateY(100%)!important
}

.bottomheader-bar-white * {
    color: #fff
}

#bottomheader-bar.position-relative {
    z-index: 2!important
}

#bottomheader-bar {
    height: calc(65px + (constant(safe-area-inset-bottom))*1.1);
    height: calc(65px + (env(safe-area-inset-bottom))*1.1)
}

.is-not-ios .bottomheader-menu-clear {
    height: 70px;
    display: block
}

.is-not-ios .bottomheader {
    padding-bottom: 0
}

.is-not-ios #bottomheader-menu a i {
    padding-top: 13px
}

.is-not-ios #bottomheader-menu a span {
    opacity: .6
}

.bottomheader-bar u {
    background-color: rgba(255,255,255,.2)
}

.bottomheader-bar {
    margin-left: -3px
}

.bottomheader-bar span {
    font-size: 11px!important
}

.bottomheader-bar i {
    transform: translateY(-2px);
    opacity: .7
}

.bottomheader-bar .circle-nav strong {
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    left: 50%;
    top: -23px;
    z-index: 0;
    transform: translateX(-50%);
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.09);
    animation: bottomheaderAni 1s infinite;
    background-image: linear-gradient(to bottom,#5824c9 0%,#5824c9 100%)!important
}

@keyframes bottomheaderAni {
    0% {
        transform: scale(1,1) translateX(-50%)
    }

    50% {
        transform: scale(1.05,1.05) translateX(-48%)
    }
}

.bottomheader-bar .circle-nav span {
    font-size: 11px!important;
    margin-top: 0px!important
}

.bottomheader-bar .circle-nav i {
    transform: translateY(-21px) translateX(0px);
    color: #fff!important;
    opacity: 1!important;
    font-size: 20px!important;
    position: relative;
    z-index: 2
}

.bottomheader-bar .circle-nav svg {
    width: 25px!important;
    height: 25px!important;
    stroke: #fff!important;
    fill: rgba(255,255,255,.1)!important;
    transform: translateY(-25px) translateX(-1px)!important;
    position: relative;
    z-index: 2
}

.bottomheader-bar .circle-nav u {
    position: absolute;
    left: 0;
    right: 0;
    width: 50px;
    border-radius: 50px;
    height: 50px;
    z-index: 0
}

.bottomheader-bar .active-nav em {
    position: absolute;
    width: 60px;
    height: 4px;
    border-radius: 60px;
    left: 50%;
    top: 57px;
    transform: translateX(-50%);
    background-image: linear-gradient(to bottom,#4d138a 0%,#f07431 100%)!important
}