body {
    --sidebar_actual_width: 0px;
    --sidebar_width: 415px;
}

html,
body {
    overflow: unset;
    overflow-x: unset;
    overflow-y: unset;
}

.main {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.sidebar_column {
    max-width: 100%;
    height: auto !important;
}

.sidebar_content {
    border: var(--border);
    background-color: var(--white);
    overflow: hidden !important;
}

.sidebar_content,
.sidebar_column {
    border-radius: var(--radius);
}

.sidebar_content a {
    font-size: 15px;
    position: relative;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    color: var(--main);
    padding-left: 20px;
}

.nav_link svg {
    fill: var(--lightgray);
    border-radius: 5px;
    border: 2px solid var(--lightgray);
}

.nav_link img,
.nav_link svg {
    min-height: 30px;
    max-width: 30px;
    min-width: 30px;
    margin-right: 15px;
}

.nav_link img {
    display: none;
}

.nav_link:not([data-progress]) .not_tried {
    display: unset;
}

*[data-progress="-1"] .not_tried,
*[data-progress="0"] .tried,
*[data-progress="1"] .halfdone,
*[data-progress="2"] .done {
    display: unset;
}

.nav_link[data-progress="1"] svg path,
.nav_link[data-progress="2"] svg path {
    fill: var(--accent) !important;
}

.kartochki[data-progress="1"] svg path,
.kartochki[data-progress="2"] svg path {
    fill: var(--white) !important;
    stroke: var(--accent) !important;
}

.nav_link[data-progress="2"] svg {
    border: 2px solid var(--accent);
}

.nav_link.current {
    background-color: var(--secondary_background);
}

.nav_link.current span {
    position: absolute;
    background-color: var(--accent);
    width: 5px;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: 0.5rem;
}

.sidebar_content a:hover {
    transition: 0.1s linear all;
    background-color: var(--secondary_background1);
}

.next_article {
    flex-direction: column;
    align-items: initial !important;
    border-top: var(--border)
}

.next_article span {
    color: var(--main);
    font-size: 0.8rem;
}

.next_article p {
    color: var(--main);
    margin: 10px 0 0 0;
}

.curriculum_heading {
    border-bottom: var(--border);
    padding: 16px 20px;
    font-size: 19px;
}

div.curriculum_heading {
    display: block;
}

@media (min-width: 920px) {
    .main {
        display: flex;
        position: relative;
        align-items: stretch;
        flex-direction: row;
    }
    .sidebar {
        flex: 1 1 auto;
        display: flex;
        margin: 0 24px 0 0;
        width: 100%;
        min-width: var(--sidebar_width);
        max-width: var(--sidebar_width);
        border-right: var(--border);
        background-color: var(--secondary_background);
        transition: 0.1s ease-out all;
    }

    .toggle_sidebar {
        position: sticky;
        top: 50vh;
        margin-bottom: 24px;
        margin-right: -28.5px;
        align-self: baseline;
        padding: 10px 10px 10px 8px;
        border: var(--border);
        background-color: var(--white);
        border-radius: 0 var(--radius) var(--radius) 0;
        transition: 0.1s ease-out all;
    }

    .toggle_sidebar svg {
        transform: rotate(180deg);
    }

    body:not(.sidebar_hidden) {
        --sidebar_actual_width: calc(var(--sidebar_width) + 24px)
    }

    .sidebar_hidden .sidebar {
        margin-left: calc(var(--sidebar_width) * -1);
        transition: 0.3s ease-out all 0.5s;
    }

    .sidebar_hidden .toggle_sidebar svg {
        transform: rotate(0deg);
    }

    .sidebar_column {
        flex: 1 1 auto;
        padding: 16px;
    }
    .sidebar_content {
        margin-top: 24px;
        top: calc(var(--nav_height) + 24px);
        max-height: calc(100vh - 48px);
        position: sticky;
        display: flex;
        flex-direction: column;
        margin-bottom: 24px;
        background-color: var(--white);
    }
    .nav_links {
        border-bottom: var(--border);
        overflow-y: auto;
    }
    .next_article {
        border-top: none !important;
    }
}

@media (max-width: 919px) {
    .sidebar {
        margin: 48px 0;
        padding: 0 24px;
        width: 100%;
        max-width: 680px;
    }
    .lesson_container .sidebar {
        padding: 0;
    }
    .toggle_sidebar {
        display: none;
    }
    html,
    body {
        max-width: 100%;
    }

    .walkthrough:not(.walkthrough_finished) .sidebar {
        display: none;
    }
}

@media (max-width: 1250px) {
    body:not(.sidebar_hidden) .lesson_container {
        --negative_margin: 0;
    }
}