/*Base Dropdown CSS*/

.dropdown,
.dropdown ul,
.dropdown li {
    margin: 0;
    padding: 0;
}

.dropfilter ul {
    border: 1px solid darkgrey;
    border-radius: 4px;
}

.dropfilter span,
.dropfilter a {
    padding: 10px;
    color: black;
    background-color: #e9e9ed;
    cursor: pointer;
    min-width: 200px;
    padding: 10px 20px 10px 5px;
    border-radius: 4px;
}

.dropfilter li {
    text-align: left;
}

.drop-icon-mobile {
    display: none;
}

.dropdown ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
}

    .dropdown ul ul {
        top: 0;
        left: 100%;
    }

    .dropdown ul .dropdownRightToLeft ul {
        left: auto;
        right: 100%;
    }

    .dropdown li {
        position: relative;
        display: block;
        list-style-type: none;
    }

    .dropdown > li {
        display: inline-block;
    }

    .dropdown a,
    .dropdown span {
        display: block;
        text-decoration: none;
        white-space: pre;
    }

    .dropdown li:hover > ul {
        display: block;

    }

    .dropfilter li:hover,
    .dropfilter span:hover,
    .dropfilter li:hover > span,
    .dropfilter li:hover > a {
        background-color: lightgrey;
    }


.dropdownVertical {
    display: inline-block;
}

    .dropdownVertical > li {
        display: block;
    }

    .dropdownVertical ul {
        top: 0;
        left: 100%;
    }

.dropdownJavaScript li:hover > ul {
    display: none;
}

.dropdownJavaScript li.dropdownOpen > ul {
    display: block;
}



/*Drop Buttons CSS*/

.dropButton {
    display: inline-block;
}

    .dropButton span, .dropButton a {
        color: black;
        transition: background 0.2s;
        background: #f3f3f3;
        border-radius: 4px;
        padding: 6px 20px;
        cursor: pointer;
        border: solid;
        border-width: 1px;
    }

    .dropButton li > ul > li > a, .dropButton li > ul > li > span {
        color: black;
        transition: background 0.2s;
        background-color: #f9f9f9;
        padding: 10px;
        margin: 0px 0px 0px 10px;
        border-radius: 0px;
        border: none;
    }

    .dropButton label {
        cursor: pointer;
        margin-left: 8px;
        vertical-align: middle;
    }

    .dropButton i {
        
        vertical-align: middle;
    }

    .dropButton li:hover > span,
    .dropButton li.dropdownOpen > span,
    .dropButton li:hover > a,
    .dropButton li.dropdownOpen > a {
        background-color: #F9F9F9;
    }

    .dropButton li > ul > li:hover > a,
    .dropButton li > ul > li.dropdownOpen > a,
    .dropButton li > ul > li:hover > span,
    .dropButton li > ul > li.dropdownOpen > span {
        background-color: #f1f1f1;
    }


/*DropButton Colors*/

/*Blue*/
.dropBlue span {
    background-color: #1565C0;
    color: white;
}

.dropBlue li:hover > span, .dropBlue li.dropdownOpen > span {
    background-color: #EF6C00;
}

/*Green*/
.dropGreen span, .dropGreen a {
    background-color: #558B2F;
    color: white;
}

.dropGreen li:hover > span, .dropBlue li.dropdownOpen > span, .dropGreen li:hover > a, .dropBlue li.dropdownOpen > a {
    background-color: #EF6C00;
}

/*Orange*/
.dropOrange span, .dropOrange a {
    background-color: #EF6C00;
    color: white;
}

.dropOrange li:hover > span, .dropBlue li.dropdownOpen > span, .dropGreen li:hover > a, .dropBlue li.dropdownOpen > a {
    background-color: #EF6C00;
}



/*Nav Bar CSS*/

/*Main NavBar*/
.dropNav {
    background-color: #1565C0;
    border-bottom: 1px solid lightgray;
    display: flex;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 95;
}

    /*Main Menu Float*/
    .dropNav li {
        float: left;
    }

    /*Submenu's No Float*/
    .dropNav li > ul > li {
        float: none;
    }

    /* 1st Level Defaults */
    .dropNav a, .dropNav span {
        color: white;
        padding: 10px 15px;
        margin: 0px;
        cursor: pointer;
    }

    .dropNav label {
        display: inline-block;
        padding: 5px;
    }

    .dropNav i {
        color: white;
        vertical-align: middle;
    }

    /* 1st Level Highlights */
    .dropNav li:hover > a,
    .dropNav li.dropdownOpen > a,
    .dropNav li:hover > span,
    .dropNav li.dropdownOpen > span {
        background-color: #267CDE;
    }

    /* Sub Menu Defaults */
    .dropNav li > ul {
        background-color: #f9f9f9;
    }

        .dropNav li > ul > li > a, .dropNav li > ul > li > span {
            color: black;
        }

        /* Sub Menu Highlights */
        .dropNav li > ul > li:hover > a,
        .dropNav li > ul > li.dropdownOpen > a,
        .dropNav li > ul > li:hover > span,
        .dropNav li > ul > li.dropdownOpen > span {
            background-color: #f1f1f1;
        }