aside acc-menu, aside acc-menu * { user-select: none }

aside acc-menu {
    position: relative;
    display: block;
    width: 100%; height: auto;
    /* background-color: rgba(0,0,0,0.2); */
    pointer-events: all;
    overflow: hidden;
    --padding-left: 2rem;
    touch-action: pan-y;
}

aside acc-menu acc-menu-group {
    position: relative;
    display: block;
    width: 100%; height: auto;
    background-color: transparent;
    overflow: hidden;
    transition: opacity var(--transition-duration);
}

aside acc-menu acc-menu-group.disabled {
    opacity: 0.7;
    pointer-events: none;
}

aside acc-menu acc-menu-group > acc-menu-item-title {
    position: relative;
    display: block;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.8rem;
    padding: 1.6rem 1.6rem 1.6rem var(--padding-left);
    padding-right: 5rem;
    background-color: rgba(255,255,255,0.07);
    transition: background-color var(--transition-duration);
    color: #ffffff;
    cursor: pointer;
    touch-action: pan-y;
}

aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    padding: 1.6rem 1.6rem 1.6rem calc(var(--padding-left) * 2);
}

aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-title {
    padding: 1.6rem 1.6rem 1.6rem calc(var(--padding-left) * 3);
}


aside acc-menu acc-menu-group:not(:last-child) > acc-menu-item-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

aside acc-menu acc-menu-group acc-menu-item-children acc-menu-group > acc-menu-item-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

aside acc-menu acc-menu-group > acc-menu-item-title:hover,
aside acc-menu acc-menu-group > acc-menu-item-title:focus  {
    background-color: rgba(255,255,255,0.3);
    outline: none;
}
aside acc-menu acc-menu-group > acc-menu-item-title::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    right: 3rem; top: 50%; width: 1.5rem; height: 1.5rem;
    border-bottom: 3px solid #ffffff;
    border-right: 3px solid #ffffff;
    transform: translate(50%,-50%) rotate(-45deg);
    transition: transform var(--transition-duration);
}

aside acc-menu acc-menu-group.open > acc-menu-item-title::after {
    transform: translate(50%,-1.06rem) rotate(45deg);
}

aside acc-menu acc-menu-item.visited > acc-menu-item-title::before,
aside acc-menu acc-menu-group.visited > acc-menu-item-title::before {
    content: '';
    position: absolute;
    left: 0.2rem; top: 50%;
    box-sizing: border-box;
    width: 1.2rem; height: 0.8rem;
    border: 0px solid rgba(255,255,255,0.8);
    border-width: 0 0 2px 3px;
    transform: translate(0,-75%) rotate(-45deg);
}


aside acc-menu acc-menu-group > acc-menu-item-children {
    display: block;
    box-sizing: border-box;
    overflow: auto;
    /* border-bottom: 1px solid #a2a2a2; */
    /* padding-left: 3rem; */
    transition: opacity var(--transition-duration), transform var(--transition-duration);
    opacity: 0;
    transform: scale(0.9);
    transform-origin: left top;
    /* transition-delay: 0.01s; */
    
}

aside acc-menu acc-menu-group.open > acc-menu-item-children {
    opacity: 1;
    transform: scale(1);
    /* transition-delay: 0.0s; */
}



aside acc-menu acc-menu-item:not(:last-child) {
    display: block;
    margin-bottom: 1rem;
}

aside acc-menu acc-menu-item > acc-menu-item-title {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.4rem;
    padding: 1rem 1rem 1rem var(--padding-left);
    background-color: rgba(255,255,255,0.0);
 
    transition: background-color var(--transition-duration), color var(--transition-duration);
    color: #ffffff;
    cursor: pointer;

    touch-action: pan-y;
}

aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-item > acc-menu-item-title {
    padding: 1rem 1rem 1rem calc(var(--padding-left) * 2);
}

aside acc-menu acc-menu-group > acc-menu-item-children > acc-menu-group > acc-menu-item-children > acc-menu-item > acc-menu-item-title {
    padding: 1rem 1rem 1rem calc(var(--padding-left) * 3);
}

aside acc-menu acc-menu-item:not(:last-child) > acc-menu-item-title {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

aside acc-menu acc-menu-item > acc-menu-item-title:hover,
aside acc-menu acc-menu-item > acc-menu-item-title:focus {
    background-color: rgba(255,255,255,0.1);
    outline: none;
}

aside acc-menu acc-menu-item.active > acc-menu-item-title {
    background-color: rgba(255, 255, 255, 0.7);
    color: black;
    outline: none;
}


aside acc-menu  acc-menu-item > acc-menu-item-thumb {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: 100%; height: 12rem;
    background-color: rgba(0,0,0,0.3);
    transition: background-color var(--transition-duration);
    color: #ffffff;
    cursor: pointer;
    touch-action: pan-y;
    border-radius: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 0.4rem solid rgba(255,255,255,0.4);
    transition: border var(--transition-duration);
    background-clip: content-box;
   
}

aside acc-menu  acc-menu-item:hover > acc-menu-item-thumb,
aside acc-menu  acc-menu-item.active > acc-menu-item-thumb {
    border: 0.4rem solid rgba(255,255,255,1);
}


@media screen and (max-width: 500px) {
    
    aside acc-menu  acc-menu-item > acc-menu-item-thumb {
        height: 17rem;
    }

    aside acc-menu acc-menu-item-children,
    aside acc-menu acc-menu-item-children * {
        touch-action: pan-y!important;
    }


}