:root {
  --btn-bg: #2563eb;
  --btn-bg-hover: #1d4ed8;
  --text: #333;
  --panel-bg: #fff;
  --panel-border: #333;
  --panel-shadow: rgba(25, 14, 14, 0.5);
  --link: #2563eb;
}

html, body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  margin: 0rem;
  color: var(--text);
}

body {
  padding: 0.5rem 1rem;
}

.container {
  display:flex; 
  flex-direction: row;
  padding:0rem 1rem; 
  /* border:2px solid orange; */
}

.clickdowns {
  display:flex; 
  flex-direction: column; 
  border:2px solid black; 
  margin:0.5rem; 
  padding: 0.5rem 1.5rem 1.0rem 1.5rem;;
}

.hoverdowns {
  display:flex; 
  flex-direction: column; 
  border:2px solid black; 
  margin:0.5rem; 
  padding: 0.5rem 1.5rem 1.0rem 1.5rem;;
}

.label-left {
 padding:0.25rem 0.0rem; 
 float:left; 
}

.label-right {
 padding:0.25rem 0.0rem; 
 float:right; 
}
.dropdown {
  flex: 1;
  position: relative;
  display: inline-block;
  margin-right: 1rem;
}

.label {
  margin-bottom: 0.5rem;
}

.dropbtn {
  background-color: var(--btn-bg);
  color: #fff;
  padding: 10px 16px;
  font-size: 16px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}

.dropbtn:hover,
.dropbtn:focus-visible {
  background-color: var(--btn-bg-hover);
  outline: none;
}

.dropdown-content {
  display: none;            /* default closed */
  position: absolute;
  top: 100%;                /* sits directly under button */
  left: 0;
  width: max-content;
  min-width: 8rem;
  background-color: var(--panel-bg);
  border: 2px solid var(--panel-border);
  border-radius: 4px;
  box-shadow: 8px 8px 16px var(--panel-shadow);
  margin-top: 0;            /* no gap between button and menu */
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease-out, visibility 120ms ease-out;
}

.dropdown-content a {
  display: block;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--text);
  border: 3px solid var(--panel-border);
}
.dropdown-content a:last-child { border-bottom: none; }

div.dropdown-content a {
  margin:0rem;
  padding: 0.15rem 0.5rem;
  border:1px solid #333;
}

.dropdown-content a:hover,
.dropdown-content a:focus-visible {
  background-color: #f0f4ff;
  color: var(--btn-bg-hover);
  outline: none;
}

/* When a click menu is open we set a data attribute in JS */
.dropdown-content[data-open="true"] {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Stateful hover dropdown: toggled by adding .open to wrapper */
.hover-dropdown .dropdown-content { display: none; }
.hover-dropdown.open .dropdown-content {
  display: block;
  opacity: 1;
  visibility: visible;
}