nav a { text-decoration: none;  color: black;  display: inline-block; }

nav.Mobile { 
  display:none;
  background-color: whitesmoke;
  height: 32px;
  line-height: 32px;
  justify-content: space-between;
}

nav.Mobile span.Menu {
 font-size: 1.5em;
 margin:0 5px;
}

nav.Mobile a { height:32px; }
nav.Mobile .UserMenu .Color
{ margin-left:10px; }

nav.Mobile img { max-height: 90%; display:block; }

nav.LeftMenu {
  flex: 0 0 250px;
  background-color: var(--Left-Menu-Background);
  display:flex;
  flex-direction: column;
  position:relative;
}

nav.LeftMenu h1 {
  font-size: 1.2em;
  font-weight:bold;
  text-align:center;
  line-height:50px;

  height:50px;
  background-color: whitesmoke;
  color: Black;
  border-bottom: 1px solid #ccc;
  position: relative;
}

nav.LeftMenu h1 img
{ max-width:90%;  max-height: 90%;
  position: absolute;
  top: 50%; left:50%;
  transform: translate(-50%,-50%);
}

.VMenu
{ list-style-type:none; margin:0; 
  padding:0; 
  overflow-y: auto;
  flex:1;
}

.VMenu ul
{ padding:0;
  list-style-type:none; margin:0;
  max-height:0px;
  transition: max-height 0.4s linear;
  overflow-y: hidden;
}

.VMenu li
{ position: relative;
  width: calc (100% - 2px);
  margin-top:-1px;
}

.VMenu li input { display: none; }

.VMenu li label
{ display:block;
  min-height:32px;
  line-height:100%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

.VMenu li label:hover
{ background-color: #e6f6ff;
  color: #e00;
  cursor: pointer;
}

.VMenu label.Level1 { padding-left:16px; }
.VMenu label.Level2 { padding-left:32px; }
.VMenu label.Level3 { padding-left:48px; }

.VMenu li i
{ padding:8px 0px;
  width: 24px;
  text-align:center;
  font-size: 1.2em;
}

.VMenu li i.NoIcon
{ padding:8px 12px;
  line-height:32px;
  text-align:center;
  font-size: 1.2em;
}

.VMenu li span.Text
{ line-height: normal;
  display: inline-block;
  vertical-align: middle;
  margin-top:-4px;
}

.VMenu li span.Arrow
{ display:block;
  float:right;
  width:16px;
  line-height:32px;
}
.VMenu li span.Arrow:before { content: '\2B9E'; }

.VMenu input:checked + label span.Arrow::before { content: '\2B9F'; }
.VMenu input:checked + label.Selectable { background-color: rgba(0,200,0,0.2); }
.VMenu input:checked ~ ul{ max-height:500px; }

.UserMenu
{ line-height:32px;
  border-top: 1px solid #ccc;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}

.UserMenu span.LoginTxt { flex-grow:1;  padding-left:8px; }
.UserMenu i { padding: 8px 10px; }

.UserMenu span.LoginTxt:hover,
.UserMenu i:hover
{ background-color: #e6f6ff;
  color: #e00;
  cursor: pointer; }

.UserMenu .Color
{ display:inline-block;
  width:16px;
  height:16px;
  background-color: var(--Color-Button);
  border-radius: 50%;
  margin-right:5px;
  position: relative;
}

.UserMenu .Color .Choice
{ position: absolute;
  bottom: 22px;
  width: 16px;
  text-align:center;
  display:none;
  line-height:1.5;
}

.UserMenu .Color .Choice span
{ display:inline-block;
  width:16px;
  height:16px;
  border-radius: 50%;
}

.UserMenu .Color .Choice span.Blue  { background-color: Blue; }
.UserMenu .Color .Choice span.Red   { background-color: Red; }
.UserMenu .Color .Choice span.Green { background-color: Green; }

.UserMenu img
{ height: 16px;
  width: 24px;
  margin-right:5px;
}

#MobMenu { display: none; }

  /* Mobile styles */
@media (max-width: 1024px) {
  nav.Mobile { display: flex; }
  nav.Mobile .Menu { cursor: pointer; }
  #MobMenu { position: absolute; left:0; top:35px; z-index:10; background-color: var(--Left-Menu-Background);}
  nav.LeftMenu h1 { display: none; }
  nav.LeftMenu { display: none; }
  .DT_Details { display: none; }
}