/* Navbar container */
.navbar {
  overflow: hidden;
  background-color: #488; /* Main bar normal colour */
  font-family: Arial;
  /*position: fixed;*/ /*abtolute;*/ /*static;*/ /*fixed;*/
  width: 100%;
  /* z-index: 20;*/
}

/* Links inside the navbar */
.navbar a {
  font-size: 12px;
  float: left;
  font-size: 20px;
  color: white;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  /*background-color: inherit;*/
}

/* The dropdown container */
.dropdown {
  font-size: 12px;
  float: left;
  overflow: hidden;
  /*background-color: inherit;*/
  
}

/* Dropdown button */
.dropdown .dropbtn, .dropdown button{ /*button*/
  font-size: 12px;
  border: none;
  outline: none;
  padding: 10px 16px;
  /*background-color: inherit;*/
  background-color: #488; color: white;/* Main bar normal colour */
}

/*{ background-color: #e5e5e5;  color: #A55; }*/ /* Secondary bar active item */
/* Add a red background color to navbar links on hover */


.navbar a.active, .dropdown button.active{ background-color: #377; color: yellow; } 

/*.navbar a:hover, .dropdown:hover .dropbtn { background-color: #622; }*/
.navbar a:hover, .dropdown:hover button:hover { background-color: #622; }

/* Dropdown content (hidden by default) */
.dropdown-content {
  font-size: 12px;
  display: none;
  max-height:400px;
  overflow-y :auto; 
  overflow-x:hidden;
  position: fixed; /*absolute;*/ /*relative;*/ /*absolute;*/
  background-color: #f9f9f9;
  min-width: 75px; /*160px;*/
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
  z-index: 20;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-size: 12px;
  float: none;
  overflow-y :auto; 
  overflow-x:hidden;
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;  
  /*z-index: 20;*/
}

.dropdown-content a.active { background-color: #e5e5e5;  color: #A55; } /* Secondary bar active item */
.dropdown-content a:hover { background-color: #ddd; }

.dropdown:hover .dropdown-content { display: block; }