/* SUBMENU ON PAGE */
#submenu {
    position: relative;
    /*top: 210px;*/
    width: 250px;
    width: 320px;
    /*max-width: 250px;
    min-width: 250px;*/
    padding: 0;
    border-radius: 10px;
    box-sizing: border-box;
}
body.__fysiotherapie #submenu {
    display: none;
}
#submenu > ul > li { line-height: 1.5; }
#submenu > ul > li:last-of-type { margin-bottom: 0; }
#submenu > ul > li > a { display: block; padding: 10px 0 12px 0; font-size: 18px; color: var(--darkblue); font-weight: 500; line-height: 1.2; border-bottom: 1px solid #d7eaf9; }
/*#submenu > ul > li > a:before { margin-right: 5px; content: "—"; opacity: 0.25; }*/
#submenu > ul > li.active > a { border-bottom: none; }
#submenu > ul > li.parent > a { padding-top: 0; font-size: 21px; font-weight: 700; }
#submenu > ul > li ul { display: none; margin: 0 0 20px 0; margin-left: 10px; }
#submenu > ul > li.active { border-bottom: 1px solid #d7eaf9; }
#submenu > ul > li.active ul { display: block; }
#submenu > ul > li ul li { }
#submenu > ul > li ul li a { display: block; padding: 5px 0; font-size: 16px; color: var(--main); font-weight: 500; line-height: 1.2; }

#submenu.fysio > ul > li:before { display: block; padding: 20px 0 10px 0; font-size: 20px; color: var(--main); font-weight: 700; border-bottom: 1px solid #d7eaf9; }
#submenu.fysio > ul > li:nth-of-type(2):before { content: "Aandoeningen"; }
#submenu.fysio > ul > li:nth-of-type(9):before { content: "Specialisaties"; }

#submenu > ul > li.hassub > a:after { position: absolute; right: 10px; margin-top: 7px; width: 10px; height: 10px; content: ""; font-size: 20px; filter: invert(19%) sepia(74%) saturate(3348%) hue-rotate(189deg) brightness(96%) contrast(102%); opacity: 0.9; background-image: url(../../images/icons/arrow-dropdown.svg); background-position: center; background-size: contain; background-repeat: no-repeat; }
#submenu > ul > li.hassub > a:hover:after { filter: invert(74%) sepia(9%) saturate(5926%) hue-rotate(162deg) brightness(93%) contrast(93%); }
#submenu > ul > li.hassub.active > a:after { filter: invert(74%) sepia(9%) saturate(5926%) hue-rotate(162deg) brightness(93%) contrast(93%); }


#submenu-trigger {
    display: none;
}
#submenu ul li a:hover {
    color: var(--lightblue);
}
#submenu ul li.parent.active a,
#submenu ul li.active a.master,
#submenu ul li.active ul li.subactive a {
    color: var(--lightblue);
}

@media screen and (max-width: 1100px) {

    /* SUBMENU ON PAGE */
    #submenu {
        position: relative; top: auto; /* remove sticky */
        margin: 0;
        margin-bottom: 0;
        padding: 12px 0;
        width: 100%; max-width: 100%; min-width: 100%;
        color: #fff;
        border-radius: 5px;
        background-color: var(--blue);
    }
    body.__fysiotherapie #submenu {
        display: block;
    }
    #submenu #submenu-trigger {
        position: relative;
        display: block;
        padding-left: 20px;
        padding-right: 40px;
        width: 100%;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        box-sizing: border-box;
    }
    #submenu #submenu-trigger.active {
        /* markup */
    }
    #submenu #submenu-trigger img {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 20px;
        top: 50%;
        margin-top: 0;
        transform: translateY(-50%);
        transition: transform 300ms;
        filter: invert(1);
    }
    #submenu #submenu-trigger.active img {
        transform: translateY(-50%) rotate(-180deg);
    }
    
    #submenu > ul { flex-direction: column; display: none; border-top: 1px solid rgba(0,0,0,0.1); padding:  20px; padding-top: 15px; padding-bottom: 0; margin-top: 15px; }
    #submenu > ul.active { display: block; }
    #submenu > ul > li { border-bottom: 1px solid rgb(255 255 255 / 25%); }
    #submenu > ul > li:last-of-type { border-bottom: none; }
    #submenu.fysio > ul > li:before { padding: 20px 0 10px 0; font-size: 16px; color: #fff; text-transform: uppercase; border-bottom: 1px solid rgb(255 255 255 / 25%); }
    #submenu > ul > li.active { border-bottom: 1px solid rgb(255 255 255 / 25%); }
    #submenu > ul > li > a { font-size: 16px; color: #fff; border-bottom: none; }
    #submenu > ul > li:last-of-type > a { border: none; }
    #submenu > ul > li.parent > a { font-size: 16px; font-weight: 400; }
    
    #submenu > ul > li.hassub > a.master { font-weight: 700; }

    #submenu > ul > li.hassub > a:after { right: 30px; margin-top: 5px; content: none; }
    #submenu > ul > li.hassub.active > a:after { filter: invert(1); opacity: 0.6; }
    #submenu > ul > li.hassub > a:after,
    #submenu > ul > li.hassub > a:hover:after { filter: invert(1); }
    
    #submenu > ul > li ul { display: block!important; }
    #submenu > ul > li ul li a { padding: 3px 0; font-size: 14px; color: #fff; opacity: 0.8; }
    
    #submenu ul li.parent.active a,
    #submenu ul li.active a.master,
    #submenu ul li.active ul li.subactive a {
        color: rgba(255,255,255,0.6);
    }

}