:root {
    --sidebar-original-width: calc(270px + 20px + 20px);
    --sidebar-collapsed-width: calc(40px + 20px + 20px);
    --sidebar-bg: #181b1f;
    --sidebar-dropdown-bg: #1F2328;
    --sidebar-item-hover-bg: #262B31;
}

.wrapper .sidebar {
    width: 270px;
    height: calc(100vh - 20px - 20px);
    padding: 10px;
    position: fixed;
    z-index: 10;
    top: 10px;
    left: 10px;
    background-color: var(--sidebar-bg);
    border-radius: 14px;
    transition: width 300ms;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: space-between;
}

/* Opened & Not Standalone */
.wrapper .sidebar .sidebar-bottom {
    height: 167px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wrapper .sidebar .sidebar-top {
    max-height: calc(100vh - 20px - 30px - 167px);
    overflow: hidden scroll;
    display: flex;
    flex-direction: column;
    gap: 10px;

    /* Firefox */
    scrollbar-width: none;

    /* IE & Edge */
    -ms-overflow-style: none;
}

.wrapper .sidebar .sidebar-top::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* Collapsed & Not Standalone */
.wrapper.sidebar-collapsed .sidebar .sidebar-top {
    max-height: calc(100vh - 20px - 30px - 191px);
}

.wrapper.sidebar-collapsed .sidebar .sidebar-bottom {
    height: 191px;
}

/* Standalone && Opened */

.wrapper .sidebar.standalone-mode .sidebar-top {
    max-height: calc(100vh - 20px - 30px - 97px);
}

.wrapper .sidebar.standalone-mode .sidebar-bottom {
    height: 97px;
}

/* Standalone && Closed */
.wrapper.sidebar-collapsed .sidebar.standalone-mode .sidebar-top {
    max-height: calc(100vh - 20px - 30px - 141px);
}

.wrapper.sidebar-collapsed .sidebar.standalone-mode .sidebar-bottom {
    height: 141px;
}

.wrapper .sidebar-overlay {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 9;
    top: 0;
    left: 0;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    -o-backdrop-filter: blur(5px);
    -moz-backdrop-filter: blur(5px);
}

.wrapper.sidebar-collapsed .sidebar {
    width: 40px;
}

.wrapper.sidebar-collapsed .sidebar-overlay {
    display: none;
}

@media(min-width: 1440px) {
    .wrapper .sidebar-overlay {
        display: none;
    }
}

@media(max-width: 1024px) {
    .wrapper.sidebar-collapsed .sidebar {
        display: none;
    }
}

/* Sidebar [GUEST] */
.wrapper .sidebar .guest-block {
    width: calc(100% - 30px);
    background: var(--block-bg);
    border-radius: 14px;
    padding: 0px 15px;
    height: 40px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    transition: all 300ms;
}

.wrapper .sidebar .guest-block:hover {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .guest-block > svg {
    width: 16px;
    height: 16px;
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .guest-block:hover > svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper .sidebar .guest-block .additional-details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .sidebar .guest-block .additional-details > svg {
    color: #8A919B;
    transition: color 300ms;
    transform: rotate(-90deg);
}

.wrapper .sidebar .guest-block:hover .additional-details > svg {
    color: #fff;
    transition: color 300ms;
}

/* Sidebad collapsed [GUEST] */
.wrapper.sidebar-collapsed .sidebar .guest-block {
    width: 100%;
    padding: 0;
    justify-content: center;
}

.wrapper.sidebar-collapsed .sidebar .guest-block .additional-details {
    display: none;
}


/* Sidebar [Navigation] */
.wrapper .sidebar .sidebar-navigation {}

.wrapper .sidebar .sidebar-navigation .navigation-item {
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    height: 40px;
    padding: 0px 15px;
    border-radius: 14px;
    background: var(--sidebar-bg);
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .icon {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #8A919B;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .icon svg {
    min-width: 16px;
    width: 16px;
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item:hover > .navigation-item-header .icon svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .additional-details {
    width: calc(100% - 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .additional-details .navigation-item-name {}
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .additional-details .navigation-item-arrow {
    width: 60px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .additional-details .navigation-item-arrow svg {
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item:hover .navigation-item-header .additional-details .navigation-item-arrow svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens {
    display: flex;
    gap: 8px;
    /* overflow: hidden; */
    /* max-height: 0px; */
    transition: all 300ms;
    padding-left: 15px;
}
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens .line-block {
    width: 16px;
    display: flex;
    justify-content: center;
}
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens .line-block .line {
    width: 1px;
    height: stretch;
    background: var(--block-bg);
}
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens .navigation-item-childrens-list {
    width: 100%;
}

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens .navigation-item-childrens-list .navigation-item {
    padding: 0;
}

/* Sidebar [default] [dropdown] */
.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header .additional-details .navigation-item-arrow.dropdown svg {
    transform: rotate(180deg);
    color: #8A919B;
}
/* .wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-childrens.dropdown {
    max-height: 600px;
    transition: all 300ms;
} */

.wrapper .sidebar .sidebar-navigation .navigation-item .navigation-item-header:hover {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item.active > .navigation-item-header {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-navigation .navigation-item.active > .navigation-item-header .icon svg {
    color: #fff;
    transition: color 300ms;
}

/* Collapsed sidebar */
.wrapper.sidebar-collapsed .sidebar .sidebar-navigation .navigation-item {}
.wrapper.sidebar-collapsed .sidebar .sidebar-navigation .navigation-item .navigation-item-header {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.navigation-dropdown-menu {
    background: var(--sidebar-dropdown-bg);
    padding: 5px;
    border-radius: 15px;
    width: 134px;
}
.navigation-dropdown-menu .navigation-dropdown-item {
    padding: 8px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    border-radius: 14px;
    background: var(--sidebar-dropdown-bg);
    transition: all 300ms;
}
.navigation-dropdown-menu .navigation-dropdown-item .icon {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.navigation-dropdown-menu .navigation-dropdown-item .icon svg {
    color: #8A919B;
    transition: color 300ms;
}

.navigation-dropdown-menu .navigation-dropdown-item:hover .icon svg {
    color: #fff;
    transition: color 300ms;
}

.navigation-dropdown-menu .navigation-dropdown-item .navigation-dropdown-item-information {
    display: flex;
    align-items: center;
    width: calc(100% - 16px);
    justify-content: space-between;
    color: #E8EAED;
    font-size: 12px;
    font-weight: 500;
}
.navigation-dropdown-menu .navigation-dropdown-item .navigation-dropdown-item-information .navigation-dropdown-item-arrow {
    width: 16px;
    height: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.navigation-dropdown-menu .navigation-dropdown-item .navigation-dropdown-item-information .navigation-dropdown-item-arrow svg {
    transform: rotate(-90deg);
    color: #8A919B;
    transition: color 300ms;
}

.navigation-dropdown-menu .navigation-dropdown-item:hover .navigation-dropdown-item-information .navigation-dropdown-item-arrow svg {
    color: #fff;
    transition: color 300ms;
}

.navigation-dropdown-menu .navigation-dropdown-item:hover {
    background: var(--sidebar-item-hover-bg);
    transition: 300ms;
}

.navigation-dropdown-tooltip {
    padding: 4px 8px;
    background: var(--sidebar-dropdown-bg);
    border-radius: 7px;
    color: #E8EAED;
    font-size: 10px;
    font-weight: 500;
}

/* FreeMoney block */
.wrapper .sidebar .sidebar-freemoney {
    border-radius: 14px;
    border: 1px solid rgba(71, 255, 240, 0.10);
    background: radial-gradient(185.38% 454.57% at 82.8% -138.79%, #0BFF99 0%, rgba(24, 27, 31, 0.10) 100%);
    box-shadow: 0 0 10px 0 rgba(71, 255, 240, 0.05);
    border-radius: 14px;
    padding: 15px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.wrapper.sidebar-collapsed .sidebar .sidebar-freemoney {
    padding: 0px;
    width: 38px;
    height: 60px;
    font-size: 8px;
    line-height: 10px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Mobile App */
.wrapper .sidebar .mobile-app {
    background: var(--sidebar-item-hover-bg);
    border-radius: 14px;
    padding: 10px;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 300ms;
}
.wrapper .sidebar .mobile-app .icon {
    width: 40px;
    min-width: 40px;
    height: 40px;
    background: #2F80ED;
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .sidebar .mobile-app .icon .circle {
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper .sidebar .mobile-app .icon .circle svg {}
.wrapper .sidebar .mobile-app .additional-details {
    display: flex;
    align-items: center;
}
.wrapper .sidebar .mobile-app .additional-details .left {}
.wrapper .sidebar .mobile-app .additional-details .left .title {
    color: #E8EAED;
    font-size: 12px;
    font-weight: 500;
}
.wrapper .sidebar .mobile-app .additional-details .left .text {
    color: #A1A7B0;
    font-size: 10px;
    font-weight: 400;
    line-height: 12px;
}
.wrapper .sidebar .mobile-app .additional-details .right {}
.wrapper .sidebar .mobile-app .additional-details .right .arrow {}
.wrapper .sidebar .mobile-app .additional-details .right .arrow svg {
    transform: rotate(-90deg);
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .mobile-app:hover .additional-details .right .arrow svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper.sidebar-collapsed .sidebar .mobile-app {
    padding: 0;
}
.wrapper.sidebar-collapsed .sidebar .mobile-app .icon {}
.wrapper.sidebar-collapsed .sidebar .mobile-app .additional-details {
    display: none;
}

/* Socials */
.wrapper .sidebar .sidebar-layer {
    display: flex;
    justify-content: space-between;
    gap: 4px;
}
.wrapper .sidebar .sidebar-layer .social-networks {
    display: flex;
    gap: 4px;
}
.wrapper .sidebar .sidebar-layer .social-networks .social {
    width: 36px;
    height: 36px;
    background: var(--block-bg);
    border-radius: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-layer .social-networks .social:hover {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-layer .social-networks .social svg {
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-layer .social-networks .social:hover svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper.sidebar-collapsed .sidebar .sidebar-layer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wrapper.sidebar-collapsed .sidebar .sidebar-layer .social-networks {
    background: var(--block-bg);
    border-radius: 14px;
    display: flex;
    gap: 1px;
    flex-wrap: wrap;
    padding: 5px;
    cursor: pointer;
}
.wrapper.sidebar-collapsed .sidebar .sidebar-layer .social-networks .social {
    width: 14.5px;
    height: 14.5px;
    background: var(--sidebar-item-hover-bg);
}
.wrapper.sidebar-collapsed .sidebar .sidebar-layer .social-networks .social svg {
    height: 6px;
}

/* Language */
.wrapper .sidebar .language-selector {
    width: 100%;
    height: 36px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--block-bg);
    border-radius: 14px;
    cursor: pointer;
    transition: all 300ms;
} 

.wrapper .sidebar .language-selector:hover {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .language-selector .language {
    display: flex;
    align-items: center;
    gap: 4px;
} 

.wrapper .sidebar .language-selector .language span {
    font-size: 12px;
    font-weight: 500;
}

.wrapper .sidebar .language-selector .language svg {
    width: 16px;
    height: 16px;
} 
.wrapper .sidebar .language-selector .arrow {
    display: flex;
    align-items: center;
} 

.wrapper .sidebar .language-selector .arrow svg {
    color: #8A919B;
    transition: color 300ms;
} 

.wrapper .sidebar .language-selector:hover .arrow svg {
    color: #fff;
    transition: color 300ms;
} 

.wrapper.sidebar-collapsed .sidebar .language-selector {
    width: 40px;
    height: 30px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.wrapper.sidebar-collapsed .sidebar .language-selector .language {}
.wrapper.sidebar-collapsed .sidebar .language-selector .language svg {}
.wrapper.sidebar-collapsed .sidebar .language-selector .language span {
    display: none;
}
.wrapper.sidebar-collapsed .sidebar .language-selector .arrow {
    display: none;
}

/* Sidebar Line */
.wrapper .sidebar .sidebar-line {
    width: 100%;
    height: 1px;
    min-height: 1px;
    background: #8A919B;
    opacity: 0.1;
} 

/* Sidebar support */
.wrapper .sidebar .sidebar-support {
    width: calc(100% - 30px);
    height: 40px;
    padding: 0px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--block-bg);
    border-radius: 14px;
    cursor: pointer;
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-support:hover {
    background: var(--sidebar-item-hover-bg);
    transition: all 300ms;
}

.wrapper .sidebar .sidebar-support .left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.wrapper .sidebar .sidebar-support .left svg {
    color: #8A919B;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-support:hover .left svg {
    color: #fff;
    transition: color 300ms;
}

.wrapper .sidebar .sidebar-support .left span {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.wrapper .sidebar .sidebar-support .hours {
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 7px;
    background: #2F80ED;
    padding: 2px 5px;
}
 
.wrapper.sidebar-collapsed .sidebar .sidebar-support {
    width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8A919B;
}
.wrapper.sidebar-collapsed .sidebar .sidebar-support .left {}
.wrapper.sidebar-collapsed .sidebar .sidebar-support .left svg {}
.wrapper.sidebar-collapsed .sidebar .sidebar-support .left span {
    display: none;
}
.wrapper.sidebar-collapsed .sidebar .sidebar-support .hours {
    font-size: 6px;
    padding: 1px 2px;
    position: absolute;
    transform: translate(5px, -9px);
}