:root {
    --transform: ;
}

.shadow-2{
	box-shadow: 0px 0px 5px #FFFFFF59;
}

.btn-48 {
    height: 48px;
    min-width: 48px;
    max-width: 48px;
}

.menu-inp-box {
    max-width: 360px;
    width: 100%;
    height: 44px;
    background-color: #1A1D1D;
    outline: none;
    padding-left: 15px;
    padding-right: 40px;
    color: #fff;
    font-size: 16px;
    border: 1px solid #1A1D1D;
    border-radius: 10px;
    caret-color: var(--color-blue);
    font-family: 'regular';
    height: 50px;
}

.menu-inp-box::placeholder {
    font-family: 'regular';
    color: #A3A2A2 !important;
    font-size: 18px !important;
}

.menu-inp-box::-webkit-input-placeholder {
    font-family: 'regular';
    color: #A3A2A2;
    font-size: 14px !important;
}

.menu-inp-box:-moz-placeholder {
    font-family: 'regular';
    color: #A3A2A2;
    font-size: 14px !important;
}

.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    z-index: 15;
}


.nav-item-btn {
    min-width: 38px;
    max-width: 38px;
    height: 38px;
    border-radius: 10px;

}

.top-nav-item {
    border-radius: 15px;
    box-shadow: 0px 0px 5px #FFFFFF59;
    background-color: var(--black-color);
    max-width: 360px;
    height: 48px;
    padding: 5px;
    transition: all 550ms ease, max-width 550ms ease, margin 200ms ease;
}

.nav-anim.NoRegisteredUser .top-nav-item.main-direct {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.MenuSignInHidden .top-nav-item.main-direct {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}

.MenuSignInHidden .top-nav-item.main-direct{
	
}

.NoRecent .top-nav-item.main-direct {
    margin-left: auto;
    margin-right: auto;

}


.top-nav-item.main-direct {
    max-width: 237px;
    width: 100%;
    height: 48px;
    min-width: 200px;
}

.top-nav-item.main-direct{
	max-width: 420px;
    width: fit-content;
}

.IsAuthor .top-nav-item.main-direct{
	max-width: 237px !important;
    width: 100%;
}

.NoRegisteredUser .top-nav-item.main-direct{
    margin-right: 0;
    margin-left: auto;
    max-width: 420px;
    width: auto;
}

.MenuSignInHidden .top-nav-item.main-direct {
    margin-right: auto;
    margin-left: auto;
    max-width: 520px;
    width: 100%;
}

.topNav--active .top-nav-item.main-direct {
    padding: 0;
}

.nav-items-cont.nav-anim {
    margin-left: auto;
    margin-right: auto;
}

.nav-anim .top-nav-item.main-direct {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    box-shadow: 0 0 0 #000;
    max-width: 237px;
}

.NoRecent .top-nav-item.main-direct {
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;   
    margin-right: auto;
    box-shadow: 0 0 0 #000;
    max-width: 520px;
}

.top-nav-item.main-direct:not(.IsAuthor .top-nav-item.main-direct){
	max-width: 420px;
	width: auto;
	margin-right: 0;
}

.NoRegisteredUser.MenuSignInHidden .top-nav-item.main-direct{
	margin-right: auto !important;
}

.nav-anim.NoRegisteredUser .top-nav-item.main-direct {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: 0;
}

.nav-anim.NoRegisteredUser.NoRecent .top-nav-item.main-direct {
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-left: auto;
}

.topNav--active .top-nav-item.main-direct {
    max-width: 200px !important;
    margin-right: auto !important;
}

.topNav--active.NoRecent .top-nav-item.main-direct {
    margin-left: auto;
}

.nav-anim .top-nav-item.recent {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.top-nav-item.recent {
    display: none;
    margin-right: auto;
    align-self: baseline;
    padding: 5px;
    min-width: 48px;
    min-height: 48px;
}

.top-nav .lp-name {
    display: block;
    max-width: 160px;
    -webkit-line-clamp: 2;
    transition: all 550ms ease;
}

.recent-active .top-nav-item.recent {
    display: block;
}

.TopNav-PopUp {
    position: absolute;
    left: 0;
    right: 0;
    top: 19px;
    visibility: hidden;
    padding: 20px;
    background-color: var(--black-color);
    border-radius: 15px;
    height: 48px;
    width: 95%;
    transition: all 550ms ease-in-out, max-width 650ms ease-in-out;
    max-width: 335px;
}

.RegisteredUser .TopNav-PopUp{
	max-width: 237px;
}

.nav-info {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    border-radius: 20px;
    transition: all 550ms ease-in-out, max-width 550ms ease, background-color 400ms ease-in;
}

.nav-anim .nav-info {
    opacity: 0;
}

.topNav--active .TopNav-PopUp {
    visibility: visible;
    max-width: 420px;
    padding: 30px;
    box-shadow: 0px 0px 5px #FFFFFF59;
    border-radius: 30px;
    max-height: 90vh;
}

.close-nav-popUp-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 9;
}

.RegisteredUser {
    cursor: pointer;
}

.main-direct-name-wrap{
	transition: background-color .2s linear;
}

.IsAuthor .main-direct-name-wrap {
    background-color: #1EA9CC;
}

.nav-anim .main-direct-name-wrap{
    opacity: 0;
}

.NavSubSection {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: max-content;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .4s ease;
}

.ActiveNavSection {
    position: relative;
    margin-top: 50px;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    overflow-y: scroll !important;
}


.RegisteredUser.topNav--active .TopNav-PopUp.MainRgstrdUserSecAct {
    /* position: absolute;
    left: 0;
    width: 100%; */
}

.MainRgstrdUserSecAct #MainRegisteredUserSec {
    /* position: absolute;
    left: 0;
    width: 100%;
    display: block !important;
    visibility: visible;
    opacity: 1; */
}

#AnalyticsSection {
    max-width: 741px;
    height: 849px;
    max-height: calc(90vh - 60px);
}

.RegisteredUser.topNav--active .TopNav-PopUp.AnalyticsSctActive {
    max-width: 800px;
    height: 909px;
}

.AnalyticsSctActive #AnalyticsSection {
    display: block !important;
    opacity: 1;
}

.ChangingNavSections .NavSubSection {
    opacity: 0 !important;
}

.EditedUser.topNav--active .TopNav-PopUp {
    max-width: 420px;
    height: 515px;
}

.TopNav-PopUp-content {
    opacity: 0;
    transition: opacity .4s ease;
}

.TopNav-PopUp-content.ShowNavPopUpCont {
    opacity: 1;
}

.signIn_btn {
    max-width: 120px;
    width: 100%;
    height: 100%;
    color: var(--white-color);
    background-color: #000;
    border-radius: 10px;
    transition: all 300ms ease;
    border-radius: 10px;
    opacity: 1;
    box-shadow: 0px 0px 0px 1px #26282B;
}

.signIn_btn:hover {
    background-color: #26282B;
}

.top-nav-item.right-item {
    margin-right: auto;
    margin-left: 10px;
    max-width: 100px;
    width: 100%;
    padding-right: 5px;
}

.nav-anim .top-nav-item.right-item {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.topNav--active .top-nav-item.right-item {
    position: absolute;
    right: 0;
    left: 0;
    margin-left: auto;
    margin-right: auto;
}

.RegisteredUser .signIn_btn {
    display: none;
}

.nav-anim .signIn_btn {
    opacity: 0;
    pointer-events: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    margin-right: 0;
    background-color: #000;
    box-shadow: 0 0 0 #000;
}


.nav-anim .signIn_btn span {
    opacity: 0;
}

.nav-btn {
    min-width: 170px;
    max-width: 170px;
    height: 170px;
    transition: background-color .2s linear;
}

.nav-btn-hover:hover {
    background-color: #26282B;
}

.blue-btn-hover:hover {
    background-color: #118DAC;
    transition: background-color .2s linear;
}

.pathCopied {
    background-color: #50AE55 !important;
}

.NavFormBtn {
    max-width: 150px;
    width: 100%;
    height: 48px;
    border-radius: 10px;
    text-align: center;
    line-height: 48px;
    font-weight: 700;
}

.RegisteredUser .RegisteredUserBtns {
    display: block;
}

.RegisteredUser .RegisteredUserCont {
    display: block;
}

.NotRegisteredUser .NotRegisteredUserCont {
    display: block;
}

.EditedUser .TopNavLpInfos {
    display: none;
}

.EditedUser .ChangeUserInfos,
.EditedUser .UserInfosFormBtns {
    display: block;
}

.EditedUser .RegisteredUserCont,
.RegisteredUser .sign-in-content,
.EditedUser .RegisteredUserBtns {
    display: none;
}

.EditedUser .CloseNavPopUpBtn {
    pointer-events: none;
}

.EditedUser .CloseNavPopUpBtn:hover {
    background-color: #1A1D1D;
}

.EditedUser .CloseNavPopUpBtn .NavFormBtn {
    pointer-events: all;
}


.absolute-btn-cont {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 100%;
    background-color: #000;
    height: 60px;
    z-index: 8;
}


.card-margin {
    margin: 0 10px 20px;
}

/* Perform Card */
.nav-long-card {
    max-width: 360px;
    width: 100%;
    height: 60px;
    background-color: #1A1D1D;
    border-radius: 10px;
    padding-right: 20px;
    padding-left: 20px;
}

/* Perform Card */

/* Activity card */
.activity-card {
    min-width: 170px;
    max-width: 170px;
    height: 170px;
}

.activity-card-l {
    max-width: 357px;
    width: 100%;
}

/* End Activity card */


/* Tooltip button */
.TopMenu-TooltipCont .toolTip {
    transform: translateX(-50%) translateY(5px);
}

.TopMenu-TooltipCont:hover .toolTip {
    left: 50%;
    transform: translate(-50%) translateY(20px);
    visibility: visible;
    opacity: 1;
}


/* Tooltip button */


/* Abbreviation */
.nav-btn-name {
    display: none;
}

.desktop-navBtn-name {
    display: block;
}

/* Abbreviation */


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

    .max-w-272-m {
        max-width: 272px;
    }

    .p-10-m {
        padding: 10px;
    }


    .mt-0-m {
        margin-top: 0;
    }

    .mt-15-m {
        margin-top: 15px;
    }

    .mt-20-m {
        margin-top: 20px;
    }

    .mx-5-m {
        margin-right: 5px;
        margin-left: 5px;
    }

    .mx-auto-m {
        margin-right: auto;
        margin-left: auto;
    }

    .mx-n-5-m {
        margin-left: -5px;
        margin-right: -5px;
    }

    .p-10-m {
        padding: 10px;
    }

    .fs-10-m {
        font-size: 10px;
    }

    .fs-12-m {
        font-size: 12px;
    }

    .fs-14-m {
        font-size: 14px;
    }

    .fs-18-m {
        font-size: 18px;
    }

    .br-15-m {
        border-radius: 15px;
    }

    .RegisteredUser.topNav--active .AnalyticsSctActive.top-nav-menu-m {
        max-width: 412px;
        height: 645px;
    }

    #MainRegisteredUserSec {
        height: 158px;
        max-width: 318px;
        width: 100%;
    }

    .topNav--active .TopNav-PopUp.top-nav-menu-m {
        border-radius: 20px;
    }

    #AnalyticsSection {
        max-width: 352px;
        height: 645px;
    }

    .nav-long-card {
        max-width: 170px;
    }

    .activity-card,
    .btn-80-m {
        min-width: 80px;
        max-width: 80px;
        height: 80px;
    }

    .activity-card-l {
        max-width: 170px;
    }

    .card-margin {
        margin: 0px 5px 10px;
    }

    .desktop-navBtn-name {
        display: none;
    }

    .mobile-navBtn-name {
        display: block;
    }
}

@media screen and (max-width: 720px) {
    /* .RegisteredUser.topNav--active .TopNav-PopUp {
        max-width: 420px;
        height: 509px;
    } */
    /* 
    .RegisteredUser .registered-user-content {
        flex-direction: column;
        max-height: 510px;
        overflow: auto;
    } */

    /* .TopNavHeader {
        flex-direction: column;
        max-height: 140px;
        padding-top: 14px;
        padding-bottom: 20px;
    } */

    .ml-l-0 {
        margin-left: 0;
    }

    .mt-l-10 {
        margin-top: 10px;
    }

    .ml-l-auto {
        margin-right: auto;
    }

}


@media screen and (max-width: 530px) {
    .NoRecent .top-nav-item.main-direct {
        max-width: 240px !important;
    }
}

@media screen and (max-width: 450px) {
    .top-nav-m .nav-btn {
        min-width: 80px;
        max-width: 80px;
        height: 80px;
    }
}

@media screen and (max-width: 450px) {
    .h-38-s {
        height: 38px !important;
    }

    .fs-16-s {
        font-size: 16px;
    }

    .fs-24-s {
        font-size: 24px;
    }

    .btn-38-s {
        height: 38px;
        min-width: 38px;
        max-width: 38px;
    }

    .RegisteredUser.topNav--active .AnalyticsSctActive.top-nav-menu-m {
        max-width: 380px;
        height: 569px;
        padding: 15px;
        border-radius: 20px;
    }

    #AnalyticsSection {
        max-width: 350px;
        height: 509px;
    }


    #MainRegisteredUserSec {
        height: 147px;
        max-width: 340px;
        width: 100%;
    }


    .topNav--active .TopNav-PopUp.top-nav-menu-m {
        padding: 15px;
    }

    .close-nav-popUp-btn {
        top: 15px;
        right: 15px;
    }

    .absolute-btn-cont {
        top: 15px;
        left: 15px;
        height: 50px;
    }

    /* .RegisteredUser.topNav--active .TopNav-PopUp {
        max-width: 320px;
        height: 75vh;
    } */

    .flex-column-m {
        flex-direction: column;
    }

    .ml-m-0 {
        margin-left: 0;
    }

    .mt-m-20 {
        margin-top: 20px;
    }
}

@media screen and (max-width: 411px) {
    .NoRecent .top-nav-item.main-direct {
        max-width: 230px !important;
    }
}


@media screen and (max-width: 402px) {
    .mx-auto-xs {
        margin-right: auto;
        margin-left: auto;
    }

    .max-w-260-xs {
        max-width: 260px;
    }

    .RegisteredUser.topNav--active .AnalyticsSctActive.top-nav-menu-m {
        max-width: 370px;
        width: 90%;
    }


    #AnalyticsSection {
        max-width: 260px;
        height: 509px;
    }

    .back-btn {
        position: absolute;
        left: 0px;
        top: 0px;
    }

    .nav-long-card {
        max-width: 100%;
    }

    .activity-card-l {
        max-width: 100%;
    }

    .toolTip-left-60,
    .TopMenu-TooltipCont:hover .toolTip-left-60.toolTip {
        transform: translate(-60%) translateY(20px);
    }

}


@media screen and (max-width: 360px) {
    .top-nav-item {
        max-width: 120px;
    }
}

@media screen and (max-width: 330px) {
    .max-w-170-xxs {
        max-width: 170px;
    }

    .max-w-176-xxs {
        max-width: 176px;
    }

    .RegisteredUser.topNav--active .top-nav-menu-m {
        max-width: 280px !important;
        width: 90% !important;
    }

    #AnalyticsSection {
        max-width: 176px;
        height: 509px;
    }

    .tooltip-m {
        width: 123px;
        padding: 8px;
        line-height: normal;
        white-space: normal;
        left: -70px !important;
        top: 10px;

    }
}

@media screen and (max-width: 325px) {
    .mx-n-5-xxs {
        margin-right: -5px;
        margin-left: -5px;
    }
}

@media screen and (max-width: 300px) {
    .top-nav .lp-name {
        max-width: 86px;
    }
}

@media screen and (max-height: 1080px) and (min-width: 870px) {
    .RegisteredUser.topNav--active .TopNav-PopUp.AnalyticsSctActive {
        height: 90vh;
    }
}

/* @media screen and (max-height: 670px) {
    .topNav--active .TopNav-PopUp:not(.TopNav-PopUp.MainRgstrdUserSecAct) {
        height: 80vh !important;
    }
}     */