.dropdown-flyout {
    display: none;
    position: absolute;
    margin-top: 0;
}

.dropdown:hover {
}

@media only screen and (min-width: 768px) {

    .dropdown:hover .dropdown-flyout {
        background: #e8e8e8;
        display: block;
        position: absolute;
        /*width: 100%;*/
        list-style: none;
        margin-left: 0;
        padding-left: 0;
        right: 0;
        width: max-content;
        margin-right: 0;

        border-color: darkgray;
        border-style: solid;
        box-shadow: 10px 5px 5px darkgray;
        border-width: thin;
        z-index: 15;
    }
}

.dropdown.opened .dropdown-flyout {
    background: #e8e8e8;
    display: block;
    position: absolute;
    /*width: 100%;*/
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    right: 0;
    width: max-content;
    margin-right: 0;

    border-color: darkgray;
    border-style: solid;
    box-shadow: 10px 5px 5px darkgray;
    border-width: thin;
    z-index: 15;

}

.dropdown-flyout.flyout-left {
    border-radius: 1rem 0 1rem 1rem;
}

.dropdown-flyout.flyout-left > * {
    /*padding: 1rem;*/
    padding: 0.2rem;
    margin: .75rem;;
}

.dropdown {
    position: relative;
    width: 100%
}

.dropdown-flyout a{
    color: unset;
    text-decoration: none;
    cursor: pointer;
    font-size: x-large;
}
/*nav ul li:hover > a{*/
/*    color:#000000;*/
/*    height: 60px;*/
/*}*/

/*nav ul li:hover .dropdown{*/
/*  background: #ece2e2;*/
/*  display: block;*/
/*  position: absolute;*/
/*}*/

/*nav ul li:hover .dropdown ul{*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*}*/