nav.sidebar-nav {
    position: fixed;
    left: 0;
    bottom: 0;
    top: 89px;
    max-width: 100px;
    width: 100px;
    background: #fff;
    font-family: 'Fira Sans', sans-serif;
    z-index: 6000;
    overflow: visible;
}

nav.sidebar-nav > ul {
    height: 100%;
    background: #fff;
}

nav.sidebar-nav > ul > li {
    display: block;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
    background: #fff;
}

nav.sidebar-nav > ul > li {
    display: block;
    width: 100%;
    padding: 23px 0 10px;
    border: 0;
    height: 100%;
    cursor: pointer;
    color: #977aaf;
}
nav.sidebar-nav > ul > li > a {
    color: #977aaf;
}

nav.sidebar-nav > ul > li > a:focus,
nav.sidebar-nav > ul > li > a:hover {
    cursor: pointer;
    text-decoration: none;
}

nav.sidebar-nav > ul > li:hover > a {
    text-decoration: none;
    color: #472272;
}

nav.sidebar-nav > ul > li.active,
nav.sidebar-nav > ul > li.active > a,
nav.sidebar-nav > ul > li.active > a:active,
nav.sidebar-nav > ul > li.active > a:hover {
    color: #fff;
    text-decoration: none;
}

nav.sidebar-nav > ul > li .icon {
    margin-bottom: 5px;
}

nav.sidebar-nav > ul > li .icon.icon-truck::before {
    width: 35px;
}

nav.sidebar-nav > ul > li.active {
    background: #472272;
}

nav.sidebar-nav > ul > li.active::after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    top: 50%;
    border-style: solid;
    border-width: 8.5px 9px 8.5px 0;
    border-color: transparent #f0f0f0 transparent transparent;
    margin-top: -8.5px;
}

nav.sidebar-nav p {
    font-size: 15px;
}

body.slide-out-nav-open nav.sidebar-nav .slide-out {
    left: 100%;
}

body.slide-out-nav-open nav.sidebar-nav li.has-slide-out.active > a,
body.slide-out-nav-open nav.sidebar-nav li.has-slide-out > a {
    background: #f0f0f0;
    color: #472272;
}

body.slide-out-nav-open nav.sidebar-nav li.active::after {
    display: none;
}

nav.sidebar-nav > ul > li.active ::after,
nav.sidebar-nav > ul > li.active::after {
    display: none;
}

body.slide-out-nav-open nav.sidebar-nav .icon-clipboard.reversed::before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgMjgxIDQwNCIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI4MSA0MDQiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGRlZnM+DQo8L2RlZnM+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB3aWR0aD0iMjgxLjI1MSIgaGVpZ2h0PSI0MDQuMTY1Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjNEEwRDY2IiBkPSJNMjQ0LjkzNCwyMC4xMTFjLTcuODU0LTMuNDc5LTE3LjEwOCwwLTIwLjY0OCw3Ljg3NA0KCQljLTMuNTIxLDcuODczLDAsMTcuMTIsNy44NzMsMjAuNjRjNi42NzMsMi45OCwxNy44NDMsMTAuMDQsMTcuODQzLDIzLjgzNHYyNzQuNDE0YzAsMTQuMzYyLTExLjY3OCwyNi4wNDItMjYuMDQyLDI2LjA0Mkg1Ny4yOTINCgkJYy0xNC4zNTMsMC0yNi4wNDItMTEuNjgtMjYuMDQyLTI2LjA0MlY3Mi40NTljMC0xNy4zNTQsMTUuOTgxLTIzLjEyMiwxNi4xMjQtMjMuMTgzYzguMjI5LTIuNTg0LDEyLjgzNy0xMS4zMzIsMTAuMjU0LTE5LjU4Mg0KCQljLTIuNTg0LTguMjMtMTEuNDAzLTEyLjgzOC0xOS41OTItMTAuMjM0QzIyLjc0NiwyNC4yNTEsMCw0Mi4yOTgsMCw3Mi40NTl2Mjc0LjQxNGMwLDMxLjU5NiwyNS43MDYsNTcuMjkyLDU3LjI5Miw1Ny4yOTJoMTY2LjY2Nw0KCQljMzEuNTk3LDAsNTcuMjkyLTI1LjY5Niw1Ny4yOTItNTcuMjkyVjcyLjQ1OUMyODEuMjUsMzguOTYxLDI1My40NTksMjMuOTE2LDI0NC45MzQsMjAuMTExIi8+DQoJPHBhdGggY2xpcC1wYXRoPSJ1cmwoI1NWR0lEXzJfKSIgZmlsbD0iIzRBMEQ2NiIgZD0iTTg4LjU1MSw4OS41NzloMTA0LjE1N2M3LjQ4NywwLDEzLjU1LTYuMDYzLDEzLjU1LTEzLjU0VjI4LjEwNg0KCQljMC00LjY0OC0yLjM5OS04Ljk4Mi02LjMyNy0xMS40NDRMMTc2Ljc3OSwyLjA2NUMxNzQuNjAyLDAuNzAyLDE3Mi4wOTksMCwxNjkuNTU2LDBIMTA4LjQ3Yy0yLjg3OCwwLTUuNjg2LDAuOTE1LTguMDA1LDIuNjA0DQoJCUw4MC41NDcsMTcuMTgxYy0zLjQ3OSwyLjU0My01LjU1NSw2LjYxMi01LjU1NSwxMC45MjV2NDcuOTMzQzc0Ljk5MSw4My41MTYsODEuMDU0LDg5LjU3OSw4OC41NTEsODkuNTc5IE0xMDIuMDkxLDM0Ljk3Mw0KCQlsMTAuODEzLTcuODk0aDUyLjc0NmwxMy41MDksOC41MDRWNjIuNWgtNzcuMDY3VjM0Ljk3M3oiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZEMTAwIiBkPSJNMTgzLjI0MywxOTUuNjM5SDk5LjljLTcuNDc3LDAtMTMuNTQsNi4wNjMtMTMuNTQsMTMuNTQNCgkJczYuMDYzLDEzLjUzOSwxMy41NCwxMy41MzloODMuMzQzYzcuNDY3LDAsMTMuNTMtNi4wNjIsMTMuNTMtMTMuNTM5UzE5MC43MSwxOTUuNjM5LDE4My4yNDMsMTk1LjYzOSIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkQxMDAiIGQ9Ik0xODAuMjUzLDI0MC4yODZIOTkuOTFjLTcuNDk3LDAtMTMuNTYsNi4wNjItMTMuNTYsMTMuNTQNCgkJYzAsNy40NzcsNi4wNjMsMTMuNTM5LDEzLjU2LDEzLjUzOWg4MC4zNDNjNy40ODcsMCwxMy41NS02LjA2MiwxMy41NS0xMy41MzlDMTkzLjgwMywyNDYuMzQ5LDE4Ny43NCwyNDAuMjg2LDE4MC4yNTMsMjQwLjI4NiIvPg0KCTxwYXRoIGNsaXAtcGF0aD0idXJsKCNTVkdJRF8yXykiIGZpbGw9IiNGRkQxMDAiIGQ9Ik0xMzguNTg2LDI4MS45NTNIOTkuOTFjLTcuNDk3LDAtMTMuNTYsNi4wNjItMTMuNTYsMTMuNTUNCgkJYzAsNy40NjcsNi4wNjMsMTMuNTI5LDEzLjU2LDEzLjUyOWgzOC42NzZjNy40ODcsMCwxMy41NS02LjA2MiwxMy41NS0xMy41MjlDMTUyLjEzNiwyODguMDE0LDE0Ni4wNzMsMjgxLjk1MywxMzguNTg2LDI4MS45NTMiLz4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjRkZEMTAwIiBkPSJNOTkuOSwxNzguMDcxaDgzLjM0M2M3LjQ2NywwLDEzLjUzLTYuMDYzLDEzLjUzLTEzLjU0DQoJCWMwLTcuNDc3LTYuMDYzLTEzLjU0LTEzLjUzLTEzLjU0SDk5LjljLTcuNDc3LDAtMTMuNTQsNi4wNjMtMTMuNTQsMTMuNTRDODYuMzYsMTcyLjAwOCw5Mi40MjMsMTc4LjA3MSw5OS45LDE3OC4wNzEiLz4NCjwvZz4NCjwvc3ZnPg==);
}

.sidebar-nav.sidebar-nav--scrollable ul {
    height: auto;
}

.sidebar-nav::-webkit-scrollbar {
    width: 12px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: #f0f0f0;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: #977aaf;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
    background: #472272;
}

.sidebar-nav__scrollhint {
    position: absolute;
    z-index: 9990;
    bottom: 0;
    width: 100%;
    left: 0;
    background: linear-gradient(to top, white 40%, transparent);
    display: block;
    height: 56px;
    cursor: pointer;
}

.sidebar-nav__scrollhint::after {
    position: absolute;
    content: '';
    display: block;
    width: 15px;
    height: 8px;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOmE9Imh0dHA6Ly9ucy5hZG9iZS5jb20vQWRvYmVTVkdWaWV3ZXJFeHRlbnNpb25zLzMuMC8iDQoJIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB2aWV3Qm94PSIwIDAgNDc5IDI3NSIgb3ZlcmZsb3c9InZpc2libGUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ3OSAyNzUiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGRlZnM+DQo8L2RlZnM+DQo8Zz4NCgk8ZGVmcz4NCgkJPHJlY3QgaWQ9IlNWR0lEXzFfIiB3aWR0aD0iNDc4LjcyNSIgaGVpZ2h0PSIyNzQuOTI1Ii8+DQoJPC9kZWZzPg0KCTxjbGlwUGF0aCBpZD0iU1ZHSURfMl8iPg0KCQk8dXNlIHhsaW5rOmhyZWY9IiNTVkdJRF8xXyIgIG92ZXJmbG93PSJ2aXNpYmxlIi8+DQoJPC9jbGlwUGF0aD4NCgk8cGF0aCBjbGlwLXBhdGg9InVybCgjU1ZHSURfMl8pIiBmaWxsPSIjNDcyMjcyIiBkPSJNMjY0LjQsMjY0LjUyNWwyMDMuOS0yMDMuOWMxMy44OTktMTMuOSwxMy44OTktMzYuMywwLTUwLjINCgkJYy0xMy45LTEzLjgtMzYuMzAxLTEzLjgtNTAuMjAxLDBsLTE3OC43OTksMTc4LjhMNjAuNiwxMC40MjVjLTEzLjg5OS0xMy45LTM2LjMtMTMuOS01MC4xOTksMGMtNi45LDYuOS0xMC40LDE2LTEwLjQsMjUuMQ0KCQlzMy41LDE4LjIsMTAuNCwyNS4xbDIwMy44LDIwMy45YzYuNyw2LjY5OSwxNS43LDEwLjM5OSwyNS4xMDEsMTAuMzk5QzI0OC43LDI3NC45MjUsMjU3LjcsMjcxLjEyNSwyNjQuNCwyNjQuNTI1Ii8+DQo8L2c+DQo8L3N2Zz4=);
    top: 65%;
    left: 50%;
    z-index: 6000;
}

.sidebar-nav__scrollhint.down::after {
    transform: translate(-50%, 0%) rotate(0);
}

.sidebar-nav__scrollhint.up::after {
    transform: translate(-50%, 0%) rotate(180deg);
}

@media screen and (max-height: 615px) {
    nav.sidebar-nav > ul > li > a {
        padding: 20px 0 0;
    }
}

@media screen and (min-width: 551px) {
    body.slide-out-nav-open nav.sidebar-nav .slide-out {
        left: 100px;
    }
}


@media screen and (max-width: 550px) {
    nav.sidebar-nav {
        left: -100%;
        top: 0;
        bottom: 0;
        z-index: 6000;
        overflow: visible;
        width: fit-content;
        max-width: 100%;
        -webkit-transition: left 0.3s ease-in-out;
        -o-transition: left 0.3s ease-in-out;
        transition: left 0.3s ease-in-out;
    }

    nav.sidebar-nav > ul > li {
        border: 0;
        text-align: left;
        border-bottom: 1px solid #f0f0f0;
    }

    nav.sidebar-nav > ul > li > a,
    nav.sidebar-nav > ul > li > span > modal-open
    {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        padding: 14px 6px 7px 6px;
    }

    nav.sidebar-nav > ul > li.active {
        background: #5a3481;
        color: #fff;
    }

    nav.sidebar-nav > ul > li.active > a {
        color: #f0f0f0;
    }

    nav.sidebar-nav p {
        font-size: 20px;
        width: 100%;
        text-align: center;
    }

    body.slide-out-nav-open nav.sidebar-nav .slide-out {
        left: 0;
        top: 0;
        z-index: 6000;
        width: 100%;
        padding: 15px;
    }
    body.responsive-nav-open nav.sidebar-nav {
        left: 0;
    }
}