:root {
  --dark-navy: #0b0da5;
  /*--navy: #030303;
  --light-navy: #112240;
  --lightest-navy: #233554;
  --navy-shadow: rgba(2, 12, 27, 0.7);
  */
  --navy:             #9400D3;
  --light-navy: #9400D3;
  --lightest-navy: ##9400D3;
  
  --navy-shadow: rgba(234, 3, 119, 0.7);
  
  --dark-slate: #030303;
  --slate: #8892b0;
  --light-slate: #a8b2d1;
  --lightest-slate: #ccd6f6;
  --white: #e6f1ff;
  --green: #64ffda;
  --green-tint: rgba(100, 255, 218, 0.1);
  --pink: #f57dff;
  --blue: #57cbff;
  --font-sans: "Calibre", "Inter", "San Francisco", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;
  --fz-xxs: 12px;
  --fz-xs: 13px;
  --fz-sm: 14px;
  --fz-md: 16px;
  --fz-lg: 18px;
  --tag-size: 14px;
  --fz-xl: 20px;
  --fz-xxl: 22px;
  --fz-heading: 32px;
  --border-radius: 4px;
  --nav-height: 100px;
  --nav-scroll-height: 70px;
  --tab-height: 42px;
  --tab-width: 120px;
  --easing: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
  --hamburger-width: 30px;
  --ham-before: top 0.1s ease-in 0.25s, opacity 0.1s ease-in;
  --ham-before-active: top 0.1s ease-out, opacity 0.1s ease-out 0.12s;
  --ham-after: bottom 0.1s ease-in 0.25s, transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ham-after-active: bottom 0.1s ease-out, transform 0.22s cubic-bezier(0.215, 0.61, 0.355, 1) 0.12s;

--ThemeForegroundColor: #9400D3;
--ThemeBackgroundColor: #030303;
--PopupBackgroundColor: #090909;
--IconColor: #ffffff;
}


.MenuImg {
  vertical-align:middle;
  padding-right:5px;
  padding-bottom: 5px;
  padding-top: 5px;
  padding-left: 5px;
  height:24;
  width:24;
  justify-content: center; 
 
}
.MenuLink {
  /* display: block;*/

   color: #fff;
   text-decoration: none;
   vertical-align:middle;
   justify-content: center; 
   cursor: pointer;
  }
.Seperator {
  font-size: x-small;
  height: 15px;
  color:#030303;
  padding-left: 5px;
 width:auto;
}
.Seperator:hover {
  background-color: #577180;
}
li a {
  display: block; 
}

.disabled {
  pointer-events: none;
  background-color: transparent;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;

  border-radius: 3px;

  display:default;
  list-style-type:none;
  margin-block-start:0;
  margin-block-end: 0;
  margin-inline-start:0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
ul:hover {
  overflow: visible;
  
}
li {
  position: relative;
   float: left; 
  display: default; 
  
 

  background-color: #577180;
 
  padding: 0;
  height:auto;
   
 
}
li:hover {
  background-color: #3282b8;
}


/* second level */
ul ul {
  max-height: 0;
  transition: max-height 0s;
  border-radius: 3px;

  list-style-type: none;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 0;
}
ul li:hover ul {
  max-height: 999px;
  border-radius: 3px;  
}
ul ul li {
   float: none; 
  background-color: #577180;
  width: 175px;
 
}
ul ul li:hover {
  background-color: #3282b8;
 
}

/* third level */
ul ul ul {
  max-height: 0;
  position: absolute;
  width: 0;
  top: 0;
  left: 100%;
  transition: width 0s;
  border-radius: 3px;
 
}
ul ul li:hover ul {
  width: 100%;
}
ul ul ul li {
  background-color: #577180;

}
ul ul ul li:hover {
  background-color: #3282b8;
}

/*Fourth Level*/
ul ul ul ul {
  position: absolute;
  width: 0;
  top: 0;
  left: 100%;
  transition: width 0s;
  border-radius: 3px;
 
}
ul ul li:hover ul ul {
  width: 100%;
}
ul ul ul ul li {
  display:none;
  background-color: #FF0000;

}
ul ul ul li:hover ul li {
  background-color: #577180;
  display: block;
}

ul ul ul li:hover ul li:hover {
  background-color: #3282b8;
  display: block;
}