/* 
#div-menu {
    background-color: hsl( var(--clr_h), 97.5%, 97.5% );
    position: sticky;
    left: 0;
}
*/

.menu-area {
    border-width: 1px;
    padding: 0px;
    background-color: hsl( var(--clr_h), 97.5%, 97.5% );
    border-width: 1px;
    border-style: solid;
    border-color: hsl( var(--clr_h), 97.5%, 85% );
    border-radius: 5px 5px 0px 0px;
    box-shadow: 0 0 6px hsla(var(--clr_h),97.5%,0%,0.125);
    transition: 0.25s ease-in-out;
}

.menu-area:hover {
    border-color: hsl( var(--clr_h), 97.5%, 82.5% );
    box-shadow: 0 0 6px hsla(var(--clr_h),97.5%,0%,0.25);
    transition: 0.25s ease-in-out;
}

/* #menu-area .menu-head, */

.menu-area .menu-head {
    font-weight: 600;
}
.menu-area .menu-head > div {
    /* background-color: hsl( var(--clr_h), 97.5%, 85% ); */
    background: linear-gradient( to bottom, transparent 6.25%, hsl( var(--clr_h), 97.5%, 97.5% ) 25%, hsl( var(--clr_h), 97.5%, 92.5% ) 100% );
    margin: 0px;
    padding: 3px 8px;
    border-top: 1px solid hsl( var(--clr_h), 97.5%, 85% );
    border-bottom: 1px solid hsl( var(--clr_h), 97.5%, 85% );
}
.menu-area .menu-head:first-child > div {
    border-top: none;
}

.menu-area .menu-data {
    cursor: pointer;
    font-size: 0.95em;
    line-height: 1em;
    /* background-color: hsl( var(--clr_h), 97.5%, 87.5% ); */
    background-color: inherit;
    width: 25%;
    min-width: 250px;
    max-width: 320px;
    padding: 5px 10px;
}
.menu-area .menu-data i {
    width: 40px;
    padding-left: 5px;
    padding-right: 15px;
}
.menu-area .menu-data:hover {
    background-color: hsl( var(--clr_h), 87.5%, 87.5% );
    color: hsl( var(--clr_h), 97.5%, 32.5% );
    transition: 0.25s ease-in-out;
    -o-transition: 0.25s ease-in-out;
    -moz-transition: 0.25s ease-in-out;
    -webkit-transition: 0.25s ease-in-out;
}
.menu-area .menu-head:first-child {
    padding-top: 9px;
    border-radius: 5px 5px 0px 0px; 
}
.menu-area .menu-data:last-child { 
    padding-bottom: 9px;
    /* border-radius: 0px 0px 5px 5px;  */
}
.menu-area .menu-data.menu-active {
    background-color: hsl( var(--clr_h), 97.5%, 92.5% );
    color: hsl( var(--clr_h), 97.5%, 52.5% );
}
.menu-area .menu-data.menu-active:hover {
    background-color: hsl( 55, 72.5%, 72.5% );
    color: hsl( var(--clr_h), 97.5%, 47.5% );
}