/* selectOneList does not display the selected li from submenus/lists. No fix
yet*/
.menu_div {
  position: fixed;
  top:0px;
  left:0px;
  display: inline-flex;
  flex-wrap: wrap;
  z-index: 2;
}
/* hide the checkbox*/
.selectOneList input{
  display: none;
}
.complexMenuItem{
  display:inline-flex;
}
.selectOneList input ~ li{
 display: none;
}
.selectOneList input:checked  ~ li {
  display: block;
  position:relative;
  background-color: aliceblue;
  z-index: 9999;
}
.selectOneList input:checked  ~ li:hover {
  background-color: lightgrey;
}
.selectOneList input:checked ~ hr {
  border: 1px dotted black;
  margin:0;
  display:block;
}
.selectOneList input ~ hr {
  display:none;
}
.mainmenu label{
  /* Force the label to show up.*/
  cursor: pointer;
  display: block;
  /* prettifying*/
  background-color: inherit;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
  position: relative;
  font-weight: bold;
  text-wrap: nowrap;
  text-align: center;
  border-left:1px solid grey;
  border-right:1px solid grey;
}
/* down pointing triangle to append to labels that are
  sub items of a mainmenu class.
 */
.mainmenu label:after{
  content:" \25BE";
}
ul.selectOneList {
  list-style-type: none;
  list-style-position: inside;
  padding:0;
  margin:0;
}
.selectOneList li{
  cursor:pointer;
  padding-left: 0;
  border-left: 1px solid grey;
  border-right: 1px solid grey;
}
.selectOneList li:last-child {
  border-bottom:1px solid grey;
}
.selectOneList li:first-child{
  border-top:1px solid grey;
}
.selectOneList li:hover{
  background-color:lightgrey;
}
.selectOneList label:hover{
  background-color:lightgrey;
}
.selectOneList li.selected {
 display:block;
 background-color: whitesmoke;
 border:1px solid grey;
}
/* add checkmark before the selected item */
.selectOneList li.selected:before {
 content: '\2713';
}