/* The browser (or Django?) will eventually cache this file, */
/* which is referenced in base.html.  So if you make changes  */
/* to this file you sometimes need to force it to be reloaded */
/* by changing the version in the line: */
/*   href="{% static 'css_sans.css' %}?v=1.e"  */
/* (e.g. use "?v=1.f") */

/* Navbar container */
.rt5-navbar {
  display: flex; flex-wrap: wrap;
  overflow: hidden;
  background-color: #f9f9f9;
  border: 1px solid black;
  font-family: Arial, Helvetica, sans-serif;
  width:100vw;  max-width:998px;
  /* width: 998px; */
  /* width: fit-content; */
  /* width:auto; */
  /* margin-left:10px; */
  margin-bottom:0px; margin-top:5px;
  /* padding-bottom:6px; */
  /* default width is 100% or window width */
}

/* Links inside the navbar */
/* padding = [top, right, bottom, left] */
.rt5-navbar a {
  float: left;
  /* font-size: 14px; */
  font-size:12pt;
  color: black;
  text-align: center;
  padding: 6px 14px 6px 14px;
  margin: 0px;
  text-decoration: none;
}

/* The dropdown container */
.rt5-dropdown {
  float: left;
  overflow: hidden;
}

.rt5-logo-btn{
  background-image: url('Images/Icons/Rivix/Rivix_menubar_logo_180x32_v3.png');
  background-size: 100% 100%;
  height: 32px;
  padding: 0px;
  margin-right:0px;
  border: none;
  width: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Dropdown buttons at top level */
.rt5-dropdown .rt5-dropbtn {
  /* font-size: 14px; */
  font-size: 12pt;
  border: 1px solid #efefef;
  outline: none;
  color: black;
  padding: 5px 15px 5px 15px;
  /* padding: 5px 14px 5px 14px; */
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Top-level button links with no dropdown */
/* No extra ppadding */
.rt5-dropbtn a {
  float: none;
  color: black;
  padding: 0px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a background color to navbar links on hover */
.rt5-navbar a:hover, .rt5-dropdown:hover .rt5-dropbtn {
  background-color: #95cdfa;
}

/* Dropdown content (hidden by default) */
/* Must set position to use z-index */
.rt5-dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  /* width:fit-content; */
  text-wrap: nowrap;
  min-width: 150px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 500;
}

/* Links inside the dropdown */
/* padding = [top, right, bottom, left] */
.rt5-dropdown-content a {
  float: none;
  color: black;
  padding: 6px 12px 6px 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.rt5-dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.rt5-dropdown:hover .rt5-dropdown-content {
  display: block;
}

/* Add a dropdown divider */
/* Add this class to an item in the droplist */
.rt5-divider-top {border-top: 1px solid rgba(0,0,0,.2);} 

/* ################################################### */
/* Level 2 Dropdown menus
/* Using the font-awesome symbol in menubar.html. */
/*    <i class="fa fa-caret-right"></i> </a> */
/* ################################################### */

/* Use position relative for container and then */
/* top:0% for the content */
.rt5-dropdown2 {
  display:block;
  position:relative;
}

/* Content of 2nd dropdown is hidden by default; Working */
/* Must set position to use z-index */
.rt5-dropdown2-content {
  display: none;   /* hidden by default */
  position: absolute;
  background-color: #f9f9f9;
  width:fit-content;
  text-wrap: nowrap;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 510;  /* must exceed other z-index */
  left: 100%;  /* offset nested dropdown to the right */
  top:0%;
}
  
/* Show links inside the 2nd dropdown;  Working */
/* padding = [top, right, bottom, left] */
/* .dropdown-content .dropdown2-content a{ */
.rt5-dropdown2-content a{
  display: block; 
  /* float: left;   entries are inline */
  float: none;
  color: black;
  /* padding: 6px 12px 6px 26px;  /* right: 14 to 26 */
  padding: 6px 24px 6px 12px;  /* right: 14 to 26 */
  text-decoration: none;
  position: relative; text-align: left;
}
  
/* Change color of links in 2nd dropdown on hover */
/* padding = [top, right, bottom, left] */
/* .rt5-dropdown-content .rt5-dropbtn2 .rt5-dropdown2-content a:hover{ */
/* .rt5-dropdown2-content a:hover{ */
/* .rt5-dropdown-content:hover, .rt5-dropdown2-content:hover a_hover{ */
.rt5-dropdown2-content a:hover{
  background-color: #ddd;
}

/* Show dropdown button2; Working */
/* padding = [top, right, bottom, left] */
/* No border & 2px less left padding. */
.rt5-dropbtn2{
  font-size: 14px;
  border: 0px;
  outline: none;
  color: black;
  padding: 6px 20px 6px 12px;  /* was right=14px */
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Change color of dropbtn2 on hover; Working */
.rt5-dropbtn2:hover{
  background-color: #ddd;
}

/* Show the dropdown2 content on hover */ 
/* Don't need this CSS3 "~" trick to operate on a sibling (vs. child) */
/* .dropbtn2:hover ~ .dropdown2-content{  */
/*    display: block; } */

/* Show the dropdown2 content on hover */
/* Need "dropdown2" to enclose button/label AND content */
/* so everything stays visible until we select an item */ 
.rt5-dropdown2:hover .rt5-dropdown2-content{ 
  display: block;
  
}

/* Bitmap button */
.rt5-bitmap-button{
  border: 1px solid black;
  margin: 0px; padding: 4px;
  background-color:#f9f9f9;
}

/* Bitmap button bar */
.rt5-bitmap-button-bar{
   margin-left:10px; margin-bottom:6px;
}