body {
  padding: 2%;
  font: 1em "Lucida Grande", Helvetica, Arial, sans-serif;
}

/* Header */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  background-color: #ddd;
  padding: 1em 1em;
}

header a {
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 1.5em;
}

header a.title {
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 2em;
  font-weight: bold;
}

header a.title:hover {
  background-color: inherit;
}

header .status {
  display: flex;
  justify-content: space-between;
  color: black;
  text-align: center;
  text-decoration: none;
  font-size: 1em;
  font-weight: bold;
  padding: 1em;
  border-radius: 4px;
}

header .status #mqtt-status {
  padding-left: 0.5em;
}

header .button {
  color: black;
  text-align: center;
  padding: 0.5em;
  text-decoration: none;
  font-size: 1.5em;
  border-radius: 4px;
}

header .button.active {
  background-color: dodgerblue;
  color: white;
}

header .button.inactive:hover {
  background-color: #999;
}

header #test-button {
  background-color: #bbb;
  border: none;
  cursor: pointer;
}

header #test-button:hover {
  background-color: #999;
}

header #test-button:active {
  background-color: #808080;
}

main {
  padding: 10px;
}

/* Home Page */
pre {
  background: #1d2021;
}

pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}
/*!
  Theme: Darktooth
  Author: Jason Milkins (https://github.com/jasonm23)
  License: ~ MIT (or more permissive) [via base16-schemes-source]
  Maintainer: @highlightjs/core-team
  Version: 2021.09.0
*/
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}

code.hljs {
  padding: 3px 5px;
}

.hljs {
  color: #a89984;
  background: #1d2021;
}

.hljs::selection,
.hljs ::selection {
  background-color: #504945;
  color: #a89984;
}

.hljs-comment {
  color: #665c54;
}

.hljs-tag {
  color: #928374;
}

.hljs-subst,
.hljs-punctuation,
.hljs-operator {
  color: #a89984;
}

.hljs-operator {
  opacity: 0.7;
}

.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-selector-tag,
.hljs-name,
.hljs-deletion {
  color: #fb543f;
}

.hljs-symbol,
.hljs-number,
.hljs-link,
.hljs-attr,
.hljs-variable.constant_,
.hljs-literal {
  color: #fe8625;
}

.hljs-title,
.hljs-class .hljs-title,
.hljs-title.class_ {
  color: #fac03b;
}

.hljs-strong {
  font-weight: bold;
  color: #fac03b;
}

.hljs-code,
.hljs-addition,
.hljs-title.class_.inherited__,
.hljs-string {
  color: #95c085;
}

.hljs-built_in,
.hljs-doctag,
.hljs-quote,
.hljs-keyword.hljs-atrule,
.hljs-regexp {
  color: #8ba59b;
}

.hljs-function .hljs-title,
.hljs-attribute,
.ruby .hljs-property,
.hljs-title.function_,
.hljs-section {
  color: #0d6678;
}

.hljs-type,
.hljs-template-tag,
.diff .hljs-meta,
.hljs-keyword {
  color: #8f4673;
}

.hljs-emphasis {
  color: #8f4673;
  font-style: italic;
}

.hljs-meta,
.hljs-meta .hljs-keyword,
.hljs-meta .hljs-string {
  color: #a87322;
}

.hljs-meta .hljs-keyword,
.hljs-meta-keyword {
  font-weight: bold;
}

/* Device and Patient Dropdown Menus */
div.dropdown-menu-container-root {
  display: flex;
  flex-wrap: wrap;
}

div.dropdown-menu-container {
  display: inline-block;
  min-width: 15em;
  margin: 1em;
}

label.dropdown-menu-label {
  vertical-align: middle;
}

select.dropdown-menu {
  width: auto;
  vertical-align: middle;
}

button.delete-button {
  vertical-align: middle;
  height: fit-content;
}

/* Patient Records List */
ol {
  display: flex;
  flex-wrap: wrap;
  column-gap: 5em;
  row-gap: 2em;
}

ol li {
  font-size: large;
}

ol li a {
  color: #1e90ff;
  text-decoration: underline;
}

ol li a:hover {
  color: #0072e1;
  cursor: pointer;
}

/* Modal */
#modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 225px 30%;
  padding: 30px;
  border: 1px solid #888;
  width: fit-content;
  animation: modal-open 0.5s ease;
  overflow: hidden;
}

.modal-header {
  display: flex;
  padding: 2px;
  margin-bottom: 0.5em;
  justify-content: space-between;
}

.modal-header h2 {
  margin: 0;
}

.modal-close {
  color: black;
  font-weight: bold;
}

.modal-close:hover,
.modal-close:focus {
  color: grey;
  cursor: pointer;
}

.modal-data table tr td {
  text-align: right;
  padding-right: 1em;
}

.modal-data table tr td.data {
  text-align: left;
}

@keyframes modal-open {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Responsiveness settings */
@media screen and (max-width: 500px) {
  header {
    display: block;
  }
  header a {
    float: none;
    display: block;
    text-align: left;
  }

  .nav-buttons {
    float: none;
  }

  .modal-content {
    margin: 35% auto;
  }

  ol {
    display: block;
  }
  ol.column {
    width: 100%;
  }

  div.dropdown-menu-container {
    display: inline-block;
    width: 100%;
    margin: 0.5em;
  }

  select.dropdown-menu {
    width: 100%;
  }

  button.delete-button {
    width: 100%;
  }
}