.sidebar.left_side {
    left: 0;
}

.sidebar {
    z-index: var(--zindex-350);
    position: fixed;
    top: 0;
    bottom: 0;
}

.sidebar_sidebar {
    visibility: hidden !important;
    -webkit-animation-name: sidebar_fadeOut;
    animation-name: sidebar_fadeOut;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: var(--transition-faster);
    animation-duration: var(--transition-faster);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width: 400px;
    position: absolute;
    top: 0;
    height: 100%;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform var(--transition-standart) var(--cubic-ease-out);
    transition: -webkit-transform var(--transition-standart) var(--cubic-ease-out);
    transition: transform var(--transition-standart) var(--cubic-ease-out);
    transition: transform var(--transition-standart) var(--cubic-ease-out), -webkit-transform var(--transition-standart) var(--cubic-ease-out);
    z-index: var(--zindex-100);
}

.sidebar_left {
    left: 100%;
}

.sidebar_sidebar.sidebar_open {
    -webkit-animation-name: sidebar_fadeIn;
    animation-name: sidebar_fadeIn;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-duration: var(--transition-faster);
    animation-duration: var(--transition-faster);
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.sidebar_open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible !important;
}

.sidebar_content {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-background-surface);
    border-right: var(--border-width-xs) solid var(--color-stroke-divider);
}

.sidebar_inner {
    position: relative;
    width: 100%;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 10;
    flex-grow: 10;
    overflow-x: hidden;
}

.sidebar_navigation .content_wrapper {
    flex-direction: column;
    height: 100%;
    display: flex;
}

.sidebar_navigation .custom_header {
    justify-content: space-between;
    align-items: center;
    display: flex;
}

.sidebar_navigation .custom_header .close_btn {
    padding: var(--offset-md-2xs) var(--offset-sm-l);
    color: var(--color-icon-secondary-active);
    transition: color var(--transition-faster) var(--cubic-ease-out);
}

.sidebar_navigation .custom_header .locale_btn {
    padding: var(--offset-sm-l);
    cursor: pointer;
}

.sidebar_navigation .custom_header .locale_btn .locale_btn_img {
    width: var(--width-md-s);
    height: var(--height-md-2xs);
    border-radius: var(--border-radius-xxs);
}

.sidebar .content_wrapper .scroll {
    overflow-y: auto;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    max-height: 100%;
}

.scroll_content {
    position: relative;
    height: fit-content;
    overflow-y: auto;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-positive: 1;
    flex-grow: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.sidebar_navigation .link {
    font: var(--regular-m);
    color: var(--color-text-primary);
    padding: var(--offset-sm-m) var(--offset-sm-l);
}

.sidebar_navigation .link.plain {
    min-height: 56px;
    padding: var(--offset-sm-l);
    font: var(--regular-l);
    display: block;
}

.sidebar_navigation .link.plain:not(:last-of-type) {
    border-bottom: var(--border-width-xs) solid var(--color-stroke-divider);
}

.sidebar_navigation .accordion_noborder {
    border: none;
    border-radius: var(--accordion-noborder-radius);
}

.sidebar_navigation .accordion {
    border-top: 0;
    border-bottom: var(--border-width-xs) solid var(--color-stroke-divider);
}

.accordion {
    --accordion-bg-color: var(--color-background-surface);
    --accordion-box-shadow: none;
    --accordion-noborder-radius: 0;
    --accordion-arrow-icon-size: 24px;
    --accordion-header-hover-bg-color: transparent;
    --accordion-header-offsets: var(--offset-sm-l);
    --accordion-opened-header-bg: var(--color-background-surface);
    --accordion-body-bg: var(--color-background-surface);
    --accordion-arrow-icon-color: var(--color-icon-secondary-active);
    --accordion-arrow-icon-opened-color: var(--color-icon-primary-active);
    display: block;
    border: var(--border-width-xs) solid var(--color-stroke-divider);
    border-radius: var(--border-radius-l);
    overflow: hidden;
    background-color: var(--accordion-bg-color);
    -webkit-box-shadow: var(--accordion-box-shadow);
    box-shadow: var(--accordion-box-shadow);
}

.accordion_tab {
    display: block;
}

.accordion_tab_header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: var(--accordion-header-offsets);
    color: var(--color-text-primary);
    border-top: var(--border-width-xs) solid var(--color-stroke-divider);
    font: var(--regular-l);
    cursor: pointer;
    -webkit-transition: background-color var(--transition-faster) var(--cubic-ease-out);
    transition: background-color var(--transition-faster) var(--cubic-ease-out);
}

.accordion_tab:first-of-type .accordion_tab_header {
    border-top: 0;
}

.accordion_tab_header .accordion_tab_icon {
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-left: var(--offset-sm-s);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    line-height: inherit;
    color: var(--accordion-arrow-icon-color);
    -webkit-transition: -webkit-transform var(--transition-faster) var(--cubic-ease-out);
    transition: -webkit-transform var(--transition-faster) var(--cubic-ease-out);
    transition: transform var(--transition-faster) var(--cubic-ease-out);
    transition: transform var(--transition-faster) var(--cubic-ease-out), -webkit-transform var(--transition-faster) var(--cubic-ease-out);
}

.accordion_tab.accordion_tab_active .accordion_tab_header .accordion_tab_icon {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
    color: var(--accordion-arrow-icon-opened-color);
}

.accordion_tab .accordion_tab_body {
    height: 0;
    overflow: hidden;
    -webkit-transition: height var(--transition-fast) var(--cubic-ease-out);
    transition: height var(--transition-fast) var(--cubic-ease-out);
    font: var(--regular-m);
    color: var(--color-text-primary);
    background-color: var(--accordion-body-bg);
}

.sidebar_navigation .list {
    padding: var(--offset-sm-m) 0;
    flex-direction: column;
    display: flex;
}

.sidebar_navigation .link {
    font: var(--regular-m);
    color: var(--color-text-primary);
    padding: var(--offset-sm-m) var(--offset-sm-l);
}

@media (max-width: 767px) and (orientation: portrait),
(max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
    .sidebar_sidebar {
        width: 320px;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        z-index: var(--zindex-150);
    }

    .sidebar_sidebar.sidebar_left {
        left: 0;
    }
}

@media (min-width: 768px) {
    .sidebar_navigation .custom_header .locale_btn {
        display: none;
    }
}

@media (min-width: 1024px) {
    .sidebar_navigation {
        display: none;
    }
}

@-webkit-keyframes sidebar_fadeIn {
    0% {
        visibility: hidden !important;
        opacity: var(--opacity-0);
    }

    100% {
        visibility: visible !important;
        opacity: var(--opacity-10);
    }
}

@keyframes sidebar_fadeIn {
    0% {
        visibility: hidden !important;
        opacity: var(--opacity-0);
    }

    100% {
        visibility: visible !important;
        opacity: var(--opacity-10);
    }
}

@-webkit-keyframes sidebar_fadeOut {
    0% {
        visibility: visible !important;
        opacity: var(--opacity-10);
    }

    100% {
        visibility: hidden !important;
        opacity: var(--opacity-0);
    }
}

@keyframes sidebar_fadeOut {
    0% {
        visibility: visible !important;
        opacity: var(--opacity-10);
    }

    100% {
        visibility: hidden !important;
        opacity: var(--opacity-0);
    }
}