/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
}

/* The sidebar menu */
.sidenav {
  height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 25%; /* Set the width of the sidebar */
  position: fixed; /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 20px;
}

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

.sidenav a.small  {
  font-size: 15px;
}

.sidenav ul.small {
  margin: 0;
  margin-left: 20px;
  margin-bottom: 15px;
  padding: 0;
}

/* The navigation menu links */
.sidenav a {
  margin: 2px;
  margin-left: 25px;
  text-decoration: none;
  font-size: 20px;
  color: rgb(184, 184, 184);
}
.sidenav .caretA {
  margin: 2px;
  margin-left: 7px;
}
.sidenav li {
  margin-top: 10px;
}




.caret {
  cursor: pointer;
  user-select: none; /* Prevent text selection */
  margin-left: 5px;
  padding-left: 0px;
}


/* Create the caret/arrow with a unicode, and style it */
.caret::before {
  content: "\25B6";
  color: rgb(204, 104, 50);
  display: inline-block;

}

/* Rotate the caret/arrow icon when clicked on (using JavaScript) */
.caret-down::before {
  transform: rotate(90deg);
}

/* Hide the nested list */
.nested {
  display: none;
}

/* Show the nested list when the user clicks on the caret/arrow (with JavaScript) */
.active {
  display: block;
}

.sidenav ul {
  list-style-type: none;
  margin: 10px 0px;
  padding: 10px;
}







code {
    background-color: #393939;
    color: #ffff33;
    border-radius: 0.3em;
    padding: 1px;
    white-space: nowrap;
}

/* Style page content */
.main {
  margin-left: 25%; /* Same as the width of the sidebar */
  padding: 30px 50px;
}
th,
td {
	border: 1px solid lightgrey;
	padding: 0.25rem 0.75rem;
}
thead {
	border-block-end: 2px solid;
	background: whitesmoke;
}
tr:nth-child(even) {
  background-color: rgba(178, 187, 187, 0.4);
}