body {
    background-color: #111;
    color: #ddd;
    align-items: center;
}
dialog {
    background-color: #111;
    border-color: #222;
    color: #ddd;
    align-items: center;
}

dialog {
    padding: 16px 24px;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

span {
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}

#devices {
    font-family: Arial, Helvetica, sans-serif;
    border-collapse: collapse;
}
#devices td, #devices th {
    border: 1px solid #222;
    padding: 8px;
}
#devices tr {
    color: #ddd;
}
td.delete {
   text-align: center;
   cursor: pointer;
}
#devices tr:nth-child(even){background-color: #121212;}
#devices tr:nth-child(odd){background-color: #060606;}
#devices tr:hover {background-color: #202020;}

#devices th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #310D78;
  color: white;
}

::backdrop {
  background-color: #000000;
  opacity: 0.9;
}

.icon_button {
  background-color: #00000000;
  border: none;
  color: white;
  padding: 12px 12px;
  cursor: pointer;
}

label {
    font-size: 0.8rem;
    padding: 0px 0px 4px 2px;
}

input[type=text], input[type=password] {
  background-color: #101010;
  color: #DDD;
  border: 2px solid #222;
  outline: none;
}

input[type=text]:focus, input[type=password]:focus {
  background-color: #060606;
}

input[type=submit].primary {
  background-color: #310D78;
  color: #FFF;
  padding: 4px 8px;
  outline: none;
  border: 0;
  box-shadow: none;
  border-radius: 0px;
}