/*https://www.cssscript.com/multi-level-dropdown-menu-pure-javascript-tidy-menu/
*/


.Menu {
    display: none;
    position: relative;
}

ul.Menu.-horizontal,
ul.Menu.-vertical {
    display: inline-block;
}

ul.Menu.-floating {
    display: block;
    position: absolute;
}


/* Menu and menu-item layout */

.Menu,
.Menu li,
.Menu li>ul {
    list-style: none;
    margin: 0px;
}

.Menu li {
    display: block;
    position: relative;
    word-break: keep-all;
}


.Menu li li {
    background-color: #00acc1;
    margin: 0;
    height: 50px;
    line-height: 30px;
    border: 2px solid #fff;
}

/* for TYPING to break line */
.Menu li:last-child li {
    white-space: normal;
    display: inline-block;
    width: 137px;
    float: left;

}

.Menu li li a {
    font-size: 18px;
    color: #fff;
}

.Menu.-horizontal>li {
    display: inline-block;
    float: left;
}

.Menu li>* {
    display: block;
    position: relative;
}

.Menu li>ul {
    position: absolute;
    min-width: 100%;
    top: 0px;
    left: 100%;
}

.Menu.-horizontal.-alignRight li>ul {
    left: auto;
    right: 100%;
}

.Menu.-horizontal.-alignRight>li>ul {
    right: 0px;
}

.Menu.-horizontal>li>ul {
    top: calc(100%);
    left: auto;
}


/* Menu behaviour */

.Menu li>ul,
.Menu.-floating {
    display: none;
}

.Menu li>ul.-visible,
ul.Menu.-floating.-visible {
    display: block;
}


/* Menu animation */

.Menu li>ul,
.Menu.-horizontal.-alignRight li>ul,
.Menu.-floating {
    opacity: 1;
    transform: scale(1) translateY(0px);
    transform-origin: left top;
}

.Menu.-alignRight li>ul,
.Menu.-floating.-alignRight {
    transform-origin: right top;
}

.Menu li>ul.-animating,
.Menu.-floating.-animating {
    opacity: 0 !important;
    transform: scale(0.96) translateX(-16px);
}

.Menu li>ul.-animating {
    z-index: -1 !important;
}

.Menu.-horizontal>li>ul.-animating {
    transform: scale(0.96) translateY(-16px);
}

.Menu.-alignRight li>ul.-animating,
.Menu.-floating.-alignRight.-animating {
    transform: scale(0.96) translateX(16px);
}

.Menu.-horizontal.-alignRight>li>ul.-animating {
    transform: scale(0.96) translateY(-16px);
}


/* Menu item icons */

.Menu *[data-icon]:before {
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    margin: auto 0px;
}

.Menu .Icon,
.Menu *[data-icon]:before {
    line-height: inherit;
}

.Menu .Icon {
    padding: 0px;
}

.Menu *:empty[data-icon] {
    padding-left: 0px !important;
    padding-right: 0px !important;
}


/* Submenu chevrons */

.Menu li.-hasSubmenu>a:after {
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    right: 8px;
    bottom: 0px;
    top: 0px;
    margin: auto 0px;
    transform: rotate(45deg);
    border-width: 2px;
    border-color: #ad4a18;
    border-style: solid solid none none;
    content: "";
}

.Menu.-horizontal>li.-hasSubmenu>a:after {
    width: 6px;
    height: 6px;
    bottom: 6px;
    top: 45px;
    left: 0px;
    right: 0px;
    margin: 0px auto;
    border-style: none solid solid none;
}

.Menu li.-hasSubmenu.-noChevron>a:after {
    display: none;
}


/* All of these must be of equal value */

.Menu {
    line-height: 40px;
}

.Menu.-horizontal,
.Menu li,
.Menu li> :first-child {
}

.Menu *[data-icon]:before,
.Menu .Icon {
    width: 40px;
    height: 40px;
}

.Menu *[data-icon] {
    min-width: 40px;
    min-height: 40px;
    padding-left: 40px;
}


/* Icon font sizes */

.Menu *[data-icon]:before,
.Menu .Icon {
    font-size: 24px;
}


/* For submenus */

.Menu>li ul .Icon,
.Menu.-floating .Icon,
.Menu>li ul *[data-icon]:before,
.Menu.-floating *[data-icon]:before,
{
    font-size: 18px;
}

/* Foreground */

.Menu,
.Menu li.-hasSubmenu>a:after {
    border-color: #fff;
    color: #fff;
    /* chevron colour */
}


/* Background */

.Menu ul,
.Menu.-floating {
}


/* Indent of chevron */

.Menu li li.-hasSubmenu>a:after,
.Menu:not(.-horizontal)>li.-hasSubmenu>a:after {
    right: 12px;
}

.Menu li li.-hasSubmenu>a,
.Menu:not(.-horizontal)>li.-hasSubmenu>a {
    padding-right: 28px;
}


/* Minimum width of dropdown menus */

.Menu.-horizontal li>ul,
.Menu.-floating {
    min-width: 165px;
}

/* Animation speed of dropdown menus */

.Menu li>ul,
.Menu.-floating {
    transition:height 0.1s, transform 0.1s, opacity 0.1s;
}

/* Colour of :hover shading */

.Menu li:hover>a:first-child,
.Menu li.-active>a:first-child {
    background-color: rgba(255, 255, 255, 0.15);
}

.Menu li:hover>a:first-child,
.Menu li.actived>a:first-child {
    background-color: rgba(255, 255, 255, 0.15);
    color:white;
}