.mainNav {
    width: 200px;
    transition: top .15s ease-in-out, left .15s ease-in-out, width .15s ease-in-out, height .15s ease-in-out;
    height: calc(100dvh - 60px);
    background: var(--nav-bg);
    color: var(--nav-color);
    z-index: 4;
    position: fixed;
    top: 60px;
    left: 0;
    overflow-x: hidden;
    overflow-anchor: none;
    scrollbar-width: none;
    border-right: 1px solid var(--border-color)
}

.mainNav .content {
    min-height: calc(100% - 25px)
}

.mainNav:hover {
    width: 200px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) rgba(78, 0, 109, .212)
}

.mainNav:hover .license {
    display: block
}

.nav-backdrop {
    width: 0;
    height: 0;
    display: none
}

@media(min-width:1920px) {
    .mainNav {
        width: 200px
    }
}

.nav-hiden {
    width: 200px;
    transition: visibility 0s ease 0s, all .15s ease-in-out 0s;
    height: calc(-60px + 100vh);
    background: #0c0d14;
    content-visibility: auto;
    z-index: 3;
    position: fixed;
    top: 60px;
    left: -200px
}

@media(max-width:1919.9px) {

    .mainNav,
    .nav-hiden {
        width: 60px
    }

    .mainNav .license {
        display: none
    }
}

@media(max-width:549.9px) {
    .mainNav {
        overflow-y: auto;
        left: -80%
    }

    .mainNav .license {
        display: block
    }

    .mainNav,
    .nav-open:hover {
        width: 60%;
        z-index: 10
    }

    .nav-backdrop {
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, .424);
        z-index: 9;
        pointer-events: all
    }

    .nav-open,
    .nav-open:hover {
        left: 0
    }

    .nav-hiden {
        left: -80% !important
    }
}

.sidebarContainer {
    width: 100%;
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-direction: column;
    overflow-x: hidden
}

.line2 {
    background-image: -webkit-linear-gradient(left, var(--linear-border-color1), var(--linear-border-color2), var(--linear-border-color1));
    height: 1px;
    width: 85%;
    border: none;
    margin: auto
}

.license {
    text-align: center;
    font-size: .7rem;
    color: #9b9b9b;
    margin: 5px 0
}

.search-mobile_nav-search__y_yQP {
    margin-top: 10px;
    margin-bottom: -5px
}

@media screen and (min-width:550px) {
    .search-mobile_nav-search__y_yQP {
        display: none
    }
}

.search-mobile_searchinputmb__7YPvD {
    border-radius: 30px;
    fill: #aaadbe;
    height: 34px;
    width: 100%;
    background-color: transparent;
    border: 1px solid transparent;
    box-shadow: 0 0;
    font-weight: 600;
    font-size: 16px;
    color: #f9faff;
    outline: 0;
    padding-left: 58px
}

.search-mobile_searchinputmb__7YPvD::placeholder {
    color: hsla(0, 0%, 86%, .675);
    font-weight: 600;
    opacity: 1
}

.search-mobile_block__5UYE_ {
    text-decoration: none;
    color: #fff
}

.search-mobile_searchiconsmb__qN8Ep {
    color: var(--color-4);
    height: 55px;
    width: 55px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 2px
}

.search-mobile_searchiconsmb__qN8Ep svg {
    height: 23px;
    width: 23px
}

.search-mobile_display_none__t_hK3 {
    display: none
}

.mainNavItem_block__YP3PQ {
    -webkit-text-decoration: none;
    text-decoration: none
}

.mainNavItem_block__YP3PQ:hover .mainNavItem_items__7I4dV {
    transform: translate(8px)
}

.mainNavItem_block__YP3PQ:hover .mainNavItem_items__7I4dV .mainNavItem_LabelContainer__AZr69 {
    color: var(--nav-color-active)
}

.mainNavItem_items__7I4dV {
    display: flex;
    -webkit-box-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: calc(100% - 10px);
    height: 40px;
    align-items: center;
    border-left: 6px solid transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mainNavItem_items__7I4dV .mainNavItem_icon__rO1a3 {
    width: 60px;
    height: 60px;
    padding: 0 14px;
    text-align: center;
    margin-left: -6px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #878a9e
}

.mainNavItem_items__7I4dV .mainNavItem_icon__rO1a3 img {
    object-fit: contain
}

.mainNavItem_my-active__z9C1_ {
    pointer-events: none
}

.mainNavItem_items__7I4dV .mainNavItem_LabelContainer__AZr69 {
    transition: visibility 0s, opacity .3s, all .2s ease-in-out;
    visibility: visible;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 30px);
    color: var(--nav-color)
}

@media(min-width:1910px) {
    .mainNavItem_items__7I4dV .mainNavItem_LabelContainer__AZr69 {
        opacity: 1;
        visibility: visible
    }
}

.mainNavItem_items__7I4dV:active {
    color: var(--nav-color-active)
}

@media(hover:hover) {
    .mainNavItem_items__7I4dV:hover {
        cursor: pointer
    }
}

.mainNavItem_itemsActive__v_jD6 {
    display: flex;
    -webkit-box-flex-wrap: nowrap;
    flex-wrap: nowrap;
    width: calc(100% - 10px);
    height: 40px;
    align-items: center;
    border-left: 6px solid #a48eff;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.mainNavItem_itemsActive__v_jD6 .mainNavItem_LabelContainer__AZr69 {
    transition: visibility 0s, opacity .3s, all .2s ease-in-out;
    visibility: visible;
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    color: var(--nav-color-active);
    transform: none !important
}

@media(min-width:1910px) {
    .mainNavItem_itemsActive__v_jD6 .mainNavItem_LabelContainer__AZr69 {
        opacity: 1;
        visibility: visible
    }
}

@media(hover:hover) {
    .mainNavItem_itemsActive__v_jD6:hover [class*=LabelContainer] {
        transform: translate(8px)
    }
}