/* Bootstrap 5 multilevel navigation menu support */
/* Don't know where the menu item rollover color is coming from. ?? Seems to be built in. */


/* This is the box around the menu items. For the root level and for each subsequent fly-out. */
ul.dropdown-menu {

    background-color: white;

    padding-top: .34em;     /* Top of menu box until first menu item. */
    padding-bottom: .4em;   /* Last menu item until bottom of menu box. */

    /*margin-top: 6px;      /* Seems to have no affect. */
    margin-left: .6em;      /* Shift the main (modules) menu box to the left slightly. */

    /*width: auto;          doesn't seem to help the wrapping issue. */
    /*width: 100%           The white-space:nowrap under li element did fix the wrap issue.
                            Adding this actually screws with the width of the ul. */
    /*
    width: -moz-fit-content;    These don't have an effect either
    width: fit-content;
     */

    width: 200px;           /* This works to statically set the menu box width, though. */
}


/* This is the menu item link itself.
    Note: Allowing the use of either <a class="dropdown-item"> or <button class="btn-link dropdown-item"
          To act as the dropdown menu items in the nav bar.
*/
a.dropdown-item, .btn-link.dropdown-item {

    padding-top: 3px;       /* distance between menu items. */
    padding-bottom: 3px;    /* Note: this will interact with the sub-menu margin-top setting. */
    padding-left: .8em;     /* Controls the individual menu items left margin. */

    font-size: 1.2em;       /* Increasing from the original .9 to be more mobile friendly. */
    color: gray;
}



/* Original Flyout Menu code
    thanks to: https://codepen.io/svnt/pen/beEgre
*/
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;             /* This is responsible for shoving the fly-out over to the right. */
    margin-top: -7px;       /* Use this to line up the menu-item with its corresponding submenu fly-out item. */
    margin-left: 0;         /* Left margin of subsequent fly-out menus (after the first one). */
    /*
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
    */
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    /*display: block;*/
    content: "";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;    /* Size of the triangle on the right. */
    border-left-color: #ccc;        /* Color of the triangle before rollover */
    margin-top: 5px;
    margin-right: 0;                /* Position of triangle from the far right border of the ul. */
}
.dropdown-submenu:hover>a:after {
    border-left-color: darkgray;    /* Color of triangle during the rollover */
}