/* ============ desktop view ============ */
@media all and (min-width: 500px) {
	.navbar .nav-item .dropdown-menu{ display: none; }
	.navbar .nav-item:hover .nav-link{   }
	.navbar .nav-item:hover .dropdown-menu{ display: block; }
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
}	

.navbar {
  background-color: #157a8d;
}
.navbar .navbar-brand {
  color: #eeeeee;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: #ffffff;
}
.navbar .navbar-text {
  color: #eeeeee;
}
.navbar .navbar-text a {
  color: #ffffff;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
  color: #ffffff; 
  background-color: #a12069;
}
.navbar .navbar-nav .nav-link {
  color: #eeeeee;
  border-radius: .25rem;
  margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
  color: #ffffff;
  background-color: #a12069;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
  color: #ffffff;
  background-color: #a12069;
}
.navbar .navbar-toggler {
  border-color: #a12069;
}
.navbar .navbar-toggler:hover,
.navbar .navbar-toggler:focus {
  background-color: #a12069;
}
.navbar .navbar-toggler .navbar-toggler-icon {
  color: #eeeeee;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
  border-color: #eeeeee;
}
.navbar .navbar-link {
  color: #eeeeee;
}
.navbar .navbar-link:hover {
  color: #ffffff;
}

@media (max-width: 575px) {
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
	color: #eeeeee;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
	color: #ffffff;
  }
  .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
	color: #ffffff;
	background-color: #a12069;
  }
}

@media (max-width: 767px) {
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
	color: #eeeeee;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
	color: #ffffff;
  }
  .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
	color: #ffffff;
	background-color: #a12069;
  }
}

@media (max-width: 991px) {
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
	color: #eeeeee;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
	color: #ffffff;
  }
  .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
	color: #ffffff;
	background-color: #a12069;
  }
}

@media (max-width: 1199px) {
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
	color: #eeeeee;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
	color: #ffffff;
  }
  .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
	color: #ffffff;
	background-color: #a12069;
  }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
  color: #eeeeee;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
  color: #ffffff;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
  color: #ffffff;
  background-color: #a12069;
} 

/* The sidebar menu */
.sidenav {
  width: 160px; /* Set the width of the sidebar */
  position: absolute; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 12px;
  background-color: #00528f;
 }

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 16px;
  color: #eee;
  display: block;
  background-color: #00528f;
}

.sidenav hr
{
  margin: 4px 8px 4px 8px;
  border: 0;
  border-top: 1px solid #eee;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #fff;
  background-color: #a12069;
}

.sidenav a.active {
  background-color: #000000; /* Add color to the "active/current" link #89012e*/
  color: white;
}

/* Style page content */
.main {
  margin-left: 160px; /* Same as the width of the sidebar */
  padding: 0px 10px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}