/* Bootstrap 4 multilevel navigation menu support */

/* ?? */


/* Tighten up the spacing on the top and bottom of the menu background. */
ul.dropdown-menu {
    padding-top: 2px;
    padding-bottom: 2px;
    /*width: 100%            The white-space:nowrap under li element did fix the wrap issue.
                            Adding this actually screws with the width of the ul. */
}

a.dropdown-item {
    font-size: 90%;
}

/* Actual link item styling -- Before hover. */
li.dropdown-submenu a, li.link-item a {
    margin-left: 8px;
    text-decoration: none;
    color: darkslategray;   /* need to to keep this in sync with the dropdown-choice color. */
    font-size: 90%;         /* need to to keep this in sync with the dropdown-choice size. */

    padding-right: 8px;     /* Add some breathing room on the right of the link (otherwise it's tight to the border)*/
    white-space:nowrap;     /* Keep the menu items from wrapping */
}

/* Actual link item styling -- After hover. */
/* Use either a solid color or a gradient for the highlighted (hover over) color. */
li.dropdown-submenu:hover, li.link-item:hover, li.dropdown-choice:hover {
    /*background-color: #e0e0e0;*/
    background-image: linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);
}

/* Mainly used for the Module Menu Index display (Note: copied form dropdown-submenu above.) */
li.dropdown-choice a, li.dropdown-choice a:hover {
    margin-left: 8px;
    text-decoration: none;
    color: darkslategray;       /* need to to keep this in sync with the dropdown-submenu color. */
    font-size: 90%;             /* need to to keep this in sync with the dropdown-submenu size. */
}


/* Original Flyout Menu code
    thanks to: https://codepen.io/svnt/pen/beEgre
*/
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    /*
    -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 side. */
    border-left-color: #ccc;        /* Color odf triangle before rollover */
    margin-top: 5px;
    margin-right: 6px;              /* Position of triangle from the far right border of the ul. */
}
.dropdown-submenu:hover>a:after {
    border-left-color: gray;        /* Color of triangle before rollover */
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    /*
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    */
}