﻿#left-nav .sub-nav-header {
    font-size: var(--font-size-s);
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 20px;
    letter-spacing: 0.05em;
    border-top: solid 1px var(--color-gray-200);
}

.sub-nav > ul {
    margin-right: 2.8125em;
}

.sub-nav li {
    display: block;
}


.sub-nav a {
    font-size: var(--font-size-xs);
    padding: 0.75em 0.75em 0.75em 0.5em;
    display: inline-block;
    letter-spacing: 0.002em;
    width: 95%;
    width: 100%;
}

.sub-nav li.active > a, .sub-nav li.active > div > a:first-child {
    font-weight: 600;
}

.sub-nav > ul {
    border-bottom: none;
}

    .sub-nav > ul > li {
        margin: 0;
    }


.sub-nav > ul > li > ul > li > ul {
    /*background: var(--color-white);*/
}

.sub-nav > ul > li > ul > li > ul {
    border-bottom: none;
}

    .sub-nav > ul > li > ul > li > ul > li > ul > li > a {
        padding-left: var(--spacing-xs);
    }

#left-nav.spalt {
    margin-bottom: var(--spacing-l);
}


    #left-nav a {
        width: 100%;
        display: inline-block;
        vertical-align: top;
    }

    #left-nav .expanded > * {
        width: 100%;
        position: relative;
    }

    #left-nav .expanded > ul > li {
        border-bottom: 1px solid var(--color-gray-300);
    }

.with-toggle a {
    padding-right: 3em;
}

.with-toggle .expander {
    padding-right: 0;
}

#left-nav .expandable, #left-nav ul > li, #left-nav .expanded {
    border-bottom: 1px solid var(--color-gray-200);
}

    #left-nav > ul > li:nth-child(1) {
        border-top: 1px solid var(--color-gray-200);
    }

    #left-nav .expandable.expanded {
        border-bottom: none;
    }



#left-nav a.expander {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 2.9em;
    max-height: 100%;
    overflow: hidden;
    color: transparent;
    display: inline-block;
}

/*#left-nav ul .expander:hover, #left-nav ul a:hover {
    background: var(--color-white);
}*/



#left-nav a.expander::after {
    display: inline-block;
    font-family: 'font-awesome';
    content: '\f067';
    color: var(--color-gray-400);
    display: inline;
    font-weight: 600;
    font-size: 1.4em;
    font-family: 'open-sans';
    content: '+';
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 18px;
    border-left: var(--color-gray-300) solid 1px;
    line-height: 1;
}

#left-nav > div.sub-nav > ul > li.expandable.expanded > div > a.expander::after {
    border-left: var(--color-bluishCyan-300) 1px solid;
}


#left-nav .expanded > div > a.expander::after {
    content: '\f068';
    content: '–';
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: var(--color-white);
}


#left-nav > div.sub-nav > ul > li a.expander {
    padding-left: 0;
}

#left-nav > div > ul > li.expandable.expanded > ul > li > div > a.expander {
    padding-left: 0;
}

#left-nav > ul > li  a.expander {
    padding-left: 0;
}

.expandable {
    position: relative;
}

#left-nav .expandable.expanded > ul {
    display: block;
}

    #left-nav > .sub-nav > ul .expandable.expanded > ul{
        border-left: var(--color-orange-100) 6px solid;
    }

    #left-nav > ul .expandable.expanded > ul {
        border-left: var(--color-orange-100) 6px solid;
    }

    #left-nav > .sub-nav > ul > .expandable.expanded > ul > .expandable.expanded > ul {
        border-left: none;
    }

    #left-nav > ul > .expandable.expanded > ul > .expandable.expanded > ul {
        border-left: none;
    }

    #left-nav > .sub-nav > ul > .expandable.expanded > ul > .expandable.expanded > ul > .expandable.expanded  > ul {
        border-left: none;
    }

    #left-nav > ul > .expandable.expanded > ul > .expandable.expanded > ul > .expandable.expanded > ul {
        border-left: none;
    }

    #left-nav .expandable > ul {
        display: none;
    }

#left-nav .expandable.expanded > .with-toggle {
    background-color: var(--color-bluishCyan-200);
    color: white;
    font-weight: 600;
    width: initial;
}
#left-nav > ul > li.active.expandable.expanded > div > a.expander::after,
#left-nav > div > ul > li.active.expandable.expanded > div > a.expander::after {
    border-left: var(--color-bluishCyan-300) 1px solid;
}





#left-nav .expandable.expanded > .with-toggle:hover ::after {
    color: var(--color-white);
    border: var(--color-bluishCyan-300);
}

#left-nav .expandable.expanded .expandable.expanded > .with-toggle {
    background-color: var(--color-gray-200);
    color: var(--color-black);
    border-bottom: 1px solid var(--color-gray-300);
    padding-left: 5px;
}

#left-nav .expandable.expanded .expandable.expanded > .with-toggle > a:nth-child(1) {
    transform: translateX(-5px);
}

#left-nav > div > ul > li.expandable.expanded > ul > li.expandable.expanded > ul > li.expandable.expanded > div {
    background-color: var(--color-white);
}

#left-nav > ul > li.active.expandable.expanded > ul > li.expandable.expanded > ul > li.expandable.expanded > div {
    background-color: var(--color-white);
}

#left-nav > div > ul > li > ul > li .expander {
    display: flex;
}

#left-nav .expandable.expanded .expandable.expanded > .with-toggle > .expander::after {
    color: var(--color-black);
}
#left-nav > .sub-nav > ul > .expandable.expanded > div > a {
    background-color: var(--color-bluishCyan-200);
    color: white;
    font-weight: 600;
}
#left-nav ul > .expandable.expanded > div > a:nth-child(1):hover,
#left-nav ul > .expandable.expanded > div > .expander:hover,
#left-nav ul > .expandable.expanded > div > a:hover + .expander {
    background-color: var(--color-bluishCyan-300);
    color: var(--color-white);
}

#left-nav > ul > .expandable.expanded > div > a:first-child:hover,
#left-nav > ul > .expandable.expanded > div > a:first-child:hover +
#left-nav > ul > .expandable.expanded > div > a {
    background-color: var(--color-bluishCyan-300);
}

#left-nav li.expandable.expanded, #left-nav > div.sub-nav > ul > li.expandable.expanded > ul > li {
    background-color: var(--color-gray-200);
}

#left-nav .expandable.expanded .expandable.expanded .with-toggle > .expander {
    background-color: var(--color-white);
}
.expandable.expanded .expandable.expanded ul {
    background-color: white;
}


#left-nav ul ul ul ul .expander {
    background-color: #f5f5f5;
}

.sub-nav ul ul ul ul ul li, #left-nav ul ul ul ul ul .expander {
    background-color: #ded;
}

#left-nav ul a:active {
    background-color: #B8CACE;
}

#left-nav li.loading .expander {
    pointer-events: none;
}

    #left-nav li.loading .expander::after {
        animation: spinning linear 1s infinite;
        border-left: 0;
    }

#left-nav > div > ul > li.expandable.expanded > ul > li > div > a.expander {
    padding-right: 47px; /*OBSOBSOBSOBSOBSOBSOBS VARNING*/
    /*Detta är expander*/
}

#left-nav > div > ul > li > div > a.expander:hover,
#left-nav > ul > li > div > a.expander:hover {
    background-color: var(--color-gray-200);
    padding-left: 1px;
}

#left-nav > div > ul > li > div > a.expander:hover::after,
#left-nav > ul > li > div > a.expander:hover::after {
    border: var(--color-gray-200);
}

    #left-nav > div > ul > li.expandable.expanded > ul > li > div > a.expander:hover, #left-nav > ul > li.expandable.expanded > ul > li > div > a.expander:hover {
    background-color: var(--color-gray-300);
}

@media screen and (min-width: 799px) {
    #left-nav .sub-nav-header {
        border-top: none;
        margin-top: calc(var(--spacing-big-xl) - 13.5px);
    }

    #left-nav a.sub-nav-header {
        padding-left: 0;
    }

    #left-nav ul > li:nth-child(1) {
        border-top: 1px solid var(--color-gray-200);
    }
}
@media screen and (min-width: 1060px) {
    .content > #left-nav {
        margin-top: 0;
    }
    #left-nav > div > ul > li > div {
        transition: ease-in-out 0.2s all;
    }


}


@media screen and (max-width: 798px) {
    #left-nav ul > li:nth-child(1) {
        border-top: 1px solid var(--color-gray-300);
    }
    #left-nav .expandable, #left-nav ul > li, #left-nav .expanded {
        border-bottom: 1px solid var(--color-gray-300);
        
    }
}