/** {
  box-sizing: border-box;
}

html,
body {
  height: 100vh;
  width: 100vw;
}

body {
  margin: 0;
  display: grid;
  place-items: center;
  background-color: #222;
  font-family: system-ui, sans-serif;
}
*/

.hide-from-page { display:none; } /* hide at normal page view */
@media print {
  .hide-from-page { display:inline; } /* make it visible during print */
}
h3
{
  /*font-size: 14px;*/
  font-weight: bold;
}

input
{
  border: solid black 2px;
  border-radius: 5px;
  padding: 5px;
}

[data-letters]:before {
  content:attr(data-letters);
  display:inline-block;
  /*font-size:1em;*/
  width:2.5em;
  height:2.5em;
  line-height:2.5em;
  text-align:center;
  border-radius:50%;
  background:gray;
  vertical-align:middle;
  margin-right:1em;
  color:white;
  font-weight: bolder;
  }

.main-content {
  min-height: 350px;
  width: 90%;
  margin: auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.nav2,
.nav-item2 {
  display: flex;
}

.nav2 {
  border-radius: 6px;
  background: radial-gradient(circle at 12.3% 19.3%, rgb(85, 88, 218) 0%, rgb(95, 209, 249) 100.2%);
  color: rgba(255, 255, 255, 0.6);
  text-shadow: 0 -2px 0 black;
  cursor: pointer;
  box-shadow: 1px 2px 4px #141414, 0 4px 12px #0a0a0a;
  margin-left:100px;
}

.nav-item2 {
  flex-direction: row-reverse;
  /*font-size: 0.8999rem;*/
  line-height: 1rem;
  align-items: center;
  min-width: 120px;
  justify-content: space-between;
  transition: all 80ms ease;
}
.nav-item2.active {
  color: #bb99ff;
  text-shadow: 0 0 3px rgba(153, 102, 255, 0.7);
}
.nav-item2:not(.active):hover {
  color: rgba(255, 255, 255, 0.87);
}
.nav-item2:hover > .icon .subicon {
  height: 32px;
  width: 32px;
  border-radius: 32px;
  top: -16px;
  right: -16px;
  border-color: white;
}
.nav-item2:not(:first-of-type) {
  border-left: 1px solid #3c3c3c;
}
.nav-item2:not(:last-of-type) {
  border-right: 0.1rem solid black;
}
.nav-item2 a {
  text-decoration: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.nav-item2 a:hover {
  color: inherit;
  text-decoration: none;
}
.nav-item2 .icon {
  padding: 1ch;
  position: relative;
}
.nav-item2 .icon .subicon {
  text-shadow: none;
  transition: all 40ms ease;
  position: absolute;
  top: -3px;
  right: -3px;
  background: red;
  color: white;
  box-shadow: 0 0 4px rgba(41, 41, 41, 0.405);
  width: 18px;
  height: 18px;
  border-radius: 14px;
  /*font-size: 0.7em;*/
  font-weight: 700;
  display: inline-grid;
  place-items: center;
  border: 2px solid #ff8080;
}
.nav-item2 .icon > svg {
  max-width: 16px;
}

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

/* Dropdown button */
.dropdown2 .dropbtn {
  /*font-size: 16px;*/
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

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

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: black;
  color:white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 2;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #228B22;
  text-decoration: none;
  color: white;
}

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