body {background-color: #595958;}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #dee2e6;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #7b4ef8;
  color: white;
}

/* Right-aligned section inside the top navigation */
.topnav-right {
  float: right;
}

/* Style inputs, select elements and textareas */
input[type=text], select, textarea{
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
}

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

/* Style the submit button */
input[type=submit] {
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  width: 150px;
}

.green{
background-color: rgba(19, 108, 67, 1);
}

.green:hover{
background-color: rgba(19, 108, 67, 0.5);
}


.purple{
background-color: rgba(123, 78, 248, 1);
}

.purple:hover{
background-color: rgba(123, 78, 248, 0.5);
}

.grey{
background-color: rgba(242, 242, 242, 1);
}

.grey:hover{
background-color: rgba(242, 242, 242, 0.5);
}


/* Style the container */
.container {
  color: white;
  border-radius: 1px;
  background-color: #000000;
  border-style: solid;
  border-color: #169416;
  padding: 20px;
}

/* Style the login container */
.logincontainer {
  border-radius: 5px;
  background-color: #ffffff;
  border-style: solid;
  border-color: black;
  padding: 20px;
}

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #000000;
  background-color: #ffffff;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: #ffffff;
  color: #7b4ef8;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #dee2e6;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #dee2e6;
  border: 2px solid #000000;
  color: black;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

/* Table width */
myTable {
  width: 100%;
  border: none;
  border-spacing: 0px;
}

/* Zebra-striped table */
#myTable tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Search input */
#searchInput {
  background-image: url('/static/search.png'); /* Add a search icon to input */
  background-size: 16px;
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 100%; /* Full-width */
  font-size: 16px; /* Increase font-size */
  padding: 12px 20px 12px 40px; /* Add some padding */
  border: 1px solid #ddd; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

* {
    font-family: Times, "Times New Roman", Georgia, serif;
  }