html {
  font-family: "Arial";
  font-size: 1em;
  background-color: #242526;
  color: #e4e6eb;
}

a {
  color: #b0b3b8;
}

a:hover {
  color: #b3ecff;
}

body {
  width: 90%;
  min-width: 800px;
  margin: auto;
}

#header {
  width: 100%;
  display: flex;
  flex-flow: row;
  padding: 0.5em;
  margin: auto;
}

#footer {
  width: 100%;
  padding: 0.5em;
}

.success {
  text-align: center;
  position: fixed;
  border-radius: 25px;
  min-width: 25%;
  background-color: rgb(52, 235, 140);
  padding: 1em;
  left: 50%;
  top: 1em;
  transform: translate(-50%);
  color: black;
}

.error {
  text-align: center;
  position: fixed;
  border-radius: 25px;
  min-width: 25%;
  background-color: rgb(235, 138, 138);
  padding: 1em;
  left: 50%;
  top: 1em;
  transform: translate(-50%);
  color: black;
}

#title {
  flex: 3;
  margin: auto;
  text-align: center;
}

#login {
  flex: 2;
  margin: auto;
}

#menu1 {
  flex: 1;
  margin: auto;
  text-align: left;
}

#menu2 {
  flex: 1;
  margin: auto;
  text-align: right;
}

#content {
  width: 100%;
  padding: 1em;
  background-color: #18191a;
}

div.dashboard {
  width: 95%;
  display: flex;
  flex-flow: row wrap;
  padding: 0.5em;
  margin: auto;
  text-align: center;
}

div.left_table {
  flex: 1;
  padding: 1em;
}

div.right_table {
  flex: 1;
  padding: 1em;
}

div.break {
  flex-basis: 100%;
  height: 0;
}

table.dashboard {
  text-align: center;
  border-collapse: collapse;
  margin: auto;
  background: #242526;
}

table.dashboard tr:nth-child(odd) {
  background: #404040;
}

table.dashboard th,
td {
  padding-left: 1em;
  padding-right: 1em;
}

table.dashboard td.alert {
  background-color: rgba(256, 0, 0, 0.5);
}

#browse {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: auto;
}

#add_mu {
  flex: 2;
  text-align: center;
  padding: 1em;
}

#map_instructions {
  flex: 1;
  text-align: left;
  padding: 1em;
}

#map {
  flex: 1;
  text-align: center;
  padding: 1em;
}

#browse_mu {
  flex: 2 100%;
  text-align: center;
  padding: 1em;
}

table.new_addition {
  text-align: center;
  border: 1px solid white;
  padding: 0.5em;
  margin: auto;
}

table.new_addition td {
  padding-top: 1em;
  padding-left: 1em;
  padding-right: 1em;
}

#manage_org {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  margin: auto;
}

#create_org {
  flex: 1;
  text-align: center;
  padding: 1em;
}

#select_org {
  flex: 1;
  text-align: center;
  padding: 1em;
}

#org_tables {
  flex: 1 100%;
  padding: 1em;
}

#mutable th,
td {
  white-space: nowrap;
}

#mutable th.wrap,
td.wrap {
  white-space: normal;
}

#mutable tbody tr.alert {
  background-color: rgba(256, 0, 0, 0.5);
}

#mutable tbody tr.alert:nth-child(even) {
  background-color: rgba(180, 0, 0, 0.5);
}

#mutable tbody tr:hover {
  background-color: rgba(8, 158, 96, 0.11);
}

#mutable tbody tr.selected {
  background-color: rgba(0, 0, 128, 0.5);
}

#planet {
  background-color: black;
  border: 1px solid white;
}