/**
 * Copyright (c) 2016)California Department of Transportation. All rights reserved.
 * CSS used for the hierarchical Project/EA Number > Shared Templates menu
 * Created on : Dec 14, 2017, 9:38:18 AM
 * Author     : s142065 John L. Mohammed at Caltrans ITSD
 */

/* div containing all elements of the hierarchical menu */
.menuValueDiv {
    padding: 2px;
    margin-top: -2px;
    margin-left: -2px;
    border: none;
    outline: none;
    overflow:hidden;
}

.menuValueDiv.open {
    overflow: visible;
}

.menuValueDiv.open .selectMenu {
    z-index: 500;
}

/* used only in browsers that don't support focus-within */
.menuValueDiv.menuFocus div.menuElement{
    outline: 1px solid blue;
}

div.menuValueDiv:focus .menuElement,
div.menuValueDiv:focus-within .menuElement {
    outline: 1px solid blue;
}

/* div for drop-down elements of hierarchical menu */
.menuDiv {
    position: relative;
    top: 2px;
    border: 1px solid grey;
}

.menuValueDiv .selectMenu.menuDiv {
    display: none;
}

.menuValueDiv.menuFocus.open .selectMenu.menuDiv {
    display: block;
}

.menuValueDiv.open:focus-within .menuDiv,
.menuValueDiv.open:focus .menuDiv {
    display: block;
}

.menuValueDiv .hierMenu.menuDiv {
    display: none;
}

.menuValueDiv.menuFocus.open .hierMenu.menuDiv {
    display: block;
}

.multiMenuElement.menuDiv {
    top: 0px;
    border: none;
}

div.menuShield {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 400;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.0);
}

div.selectMenu {
    overflow-x: hidden;
    overflow-y: auto;
}

/* up- and down-scroll arrows for main drop-down menu */
.menuScroller {
    text-align: center;
    padding-top: -1px;
    padding-bottom: -1px;
    cursor: ns-resize;
}

/* ul for menu items in main drop-down menu */
.menu {
    list-style-type:none;
    position: relative;
    background-color: white;
    margin: 0; 
    padding: 0 0 2px 0;
    overflow: visible;
    font:100%/1 sans-serif;
}
.menu li > input {
    border: none;
}
.menuValueDisplay {
    border: none;
    outline: none;
}

.menuValueInput {}

/*.menuValueDisplay::after {
    float: right;
    font-size: 80%;
    margin: 0px 2px;
    content: "\25bc";
}*/

.submenu {
    
}
.menu .submenu {
    position:absolute;
    margin: -1.6em 0 0; 
    left:96px;
    display:none;
    list-style-type:none;
    z-index: 100;
    background-color: white;
    padding:0 2px;
    /*width: 17em;*/
    font:100%/1 sans-serif;
    border: solid grey 1px;
}

.menuElement {
    display: block;
    height: 1.6em;
    background-color: white;
    border: 1px solid rgb(169,169,169);
}

.menuElement > .menuValueDisplay {
    background-color: white;
    border: none;
    outline: none;
    width: 100%;
    padding: 1px 2px;
    text-align: left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

input.menuSearch {
    position: relative;
    border: none;
    outline: none;
    background-color: lightcyan;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    z-index: 300;
    display: none;
}

input.menuSearch.dropdown {
    margin-bottom: -16px;
}

input.menuSearch:focus {
    display: block;
}



.menuitem {
    overflow: visible;
    background-color: white;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    font-size: 11px;
    font-family: Arial, san-serif;
}

li.menuitemdisplay::before {
    content: "\2008";
}

.menuitemdisplay {
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    font-size: 11px;
}

.menuitem > button {
    background-color: white;
    border: none;
    outline: none;
    width: 100%;
    text-align: left;
    font-size: 11px;
}

.menuitem:hover .submenu {
    display: block;
}

/* Display submenu when menuitem has focus */
.menuitem > button:focus + .submenu {
    display: block;
}

.menuitem:focus + .submenu {
    display: block;
}

/* Keep submenu displayed when focus is shifted within submenu */
.menuitem:focus-within > .submenu {
    display: block;
}

.menuitem:focus-within {
    background-color: rgb(0,100,255);
    color:white;
}

.menuitem.itemFocus > .submenu {
    display: block;
}

.menuitem:hover,
.menuitem:focus {
    background-color: rgb(0,100,255);
    color:white;
}

.menuitem.itemFocus {
    background-color: rgb(0,100,255);
    color:white;
}

.menuitem.disabled:focus,
.menuitem.disabled:hover {
    border: 1px solid rgb(0,100,255);
    background-color: white;
    color: black;
}

.menuitem.disabled.itemFocus {
    border: 1px solid rgb(0,100,255);
}

.submenuitem {
    background-color: white;
    color: black;
    border: none;
    outline: none;
    padding: 0px;
    width: 100%;
    text-align: left;
    font-size: 11px;
}

.submenuitem:hover {
    background-color: rgb(0,100,255);
    color:white;
}

.submenuitem.itemFocus {
    background-color: rgb(0,100,255);
    color:white;
}

.submenuitem:focus {
    background-color: rgb(0,100,255);
    color:white;
}

.hassubmenu::after {
    margin: 0px 4px;
    content: "\25b6";
}

.matchHighlight {
    border: solid grey 1px;
    color: black;
    background-color: yellow;
    padding: 1px 0px;
}

/*** Multiselect ComboBoxes ***/

select.multimenuselect {
    display: none;
}

div.multiMenuValueDiv {
    border: 1px solid grey;
    overflow: hidden;
}

div.multiMenuValueDiv:focus,
div.multiMenuValueDiv:focus-within {
    border: none;
    overflow: visible;
}

div.multiMenuValueDiv.menuFocus {
    border: none;
    overflow: visible;
}

div.multiMenuValueDiv:focus div.multiMenuElement,
div.multiMenuValueDiv:focus-within div.multiMenuElement {
    position: relative;
    left: 0px;
    z-index: 300;
    border:  1px solid blue;
    outline: 1px solid blue;
}

div.multiMenuValueDiv.menuFocus .multiMenuElement {
    position: relative;
    z-index: 300;
    border:  1px solid blue;
    outline: 1px solid blue;
}

div.multiMenuElement .menu {
    overflow-y: scroll;
    overflow-x: hidden;
}

div.multiMenuElement input.menuSearch {
    width: 100%;
    border: none;
    outline: none;
    background-color: lightcyan;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    display: none;
}

div.multiMenuValueDiv:focus input.menuSearch,
div.multiMenuValueDiv:focus-within input.menuSearch {
    display: block;
}

div.multiMenuValueDiv.menuFocus input.menuSearch {
    display: block;
}

div.multiMenuElement div.menuitem.disabled {
    color: #aaa;
    padding-left: 10px;
    pointer-events: none;
    padding-top: 5px;
}