:root {
  --light-background-1: #FFFFFF;
  --light-background-2: #F8F9FB;
  --light-background-3: #EEF0F3;
  --light-background-4: #DCE0E3;
  --light-background-5: #C7CCD1;
  --light-foreground-body: rgba(0,0,0,0.85);
  --light-foreground-primary: #008BE1;
  --light-foreground-primary-hover: #007DCA;
  --light-foreground-success: #56A91C;
  --light-foreground-alert: #D30A0A;
  --light-foreground-warning: #F18B12;

  --dark-background-1: #5A6973;
  --dark-background-2: #4F5D65;
  --dark-background-3: #445058;
  --dark-background-4: #38444A;
  --dark-background-5: #2D373C;
  --dark-foreground-body: rgba(255,255,255,0.85);
  --dark-foreground-primary: #A5D7F5;
  --dark-foreground-primary-hover: #94C1DC;
  --dark-foreground-success: #C3E1AF;
  --dark-foreground-alert: #EFA9A9;
  --dark-foreground-warning: #F9D7AB;

  --accessory-primary: #008BE1;
  --accessory-primary-hover: #007DCA;
  --foreground-accessory: #FFFFFF;
}

body {
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
  background-color: var(--light-background-2);
  align-items: center;
  display: flex;
  flex-direction: column;
  color: var(--light-foreground-body);
}

a {
  color: var(--light-foreground-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.fa-check {
  color: var(--light-foreground-success);
}

.fa-times {
  color: var(--light-foreground-alert);
}

.fa-exclamation-triangle {
  color: var(--light-foreground-warning);
}

.fa-sync {
  color: var(--light-foreground-primary);
}

.header {
  width: 95%;
  display: flex;
  justify-content: space-around;
}

.container-box {
  max-width: 600px;
  width: 95%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 18px;
}

.topic-container {
  width: 99%;
  border: 1px solid var(--light-background-5);
  margin-bottom: 12px;
  border-radius: 3px;
  background-color: var(--light-background-1);
}

.topic-header {
  background-color: var(--light-background-1);
  display: flex;
  justify-content: space-between;
  padding: .5em .75em .5em .5em;
  font-size: 1.125em;
}

.topic-icon {
  align-self: center;
}

.topic-content {
  border-top: 1px solid var(--light-background-4);
}

.output-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: .5em;
}

.output-name {
  width: 32%;
  font-weight: 600;
}

.output-result {
  overflow-wrap: normal;
  width: 68%;
}

.output-result-line {
  display: flex;
  justify-content: start;
  overflow-wrap: normal;
  height: 100%;
}

.output-result-icon {
  order: 1;
  padding-right: 20px;
}

.output-result-text {
  order: 2;
  flex-grow: 1;
  font-size: 0.875em;
}

.output-result-expand {
  order: 3;
  padding-left: 4px;
  flex-direction: column-reverse;
}

.output-result-details {
  width: 100%;
  padding-bottom: 10px;
  margin: 2px;
  padding-left: 30px;
  font-size: 0.875em;
}

.output-expand-button {
  background-color: var(--accessory-primary);
  border-radius: 3px;
  color: var(--foreground-accessory);
  transition-duration: 250ms;
  display: block;
  width: 24px;
  border: none;
  text-align: center;
  cursor: pointer;
}

.output-expand-button:hover {
  background-color: var(--accessory-primary-hover);
}

@media (prefers-color-scheme: dark) {
  body { background-color: var(--dark-background-2); color: var(--dark-foreground-body); }
  a { color: var(--dark-foreground-primary); }
  a:hover { color: var(--dark-foreground-primary-hover); }
  .fa-check { color: var(--dark-foreground-success); }
  .fa-times { color: var(--dark-foreground-alert); }
  .fa-exclamation-triangle { color: var(--dark-foreground-warning); }
  .fa-sync { color: var(--dark-foreground-primary); }
  .topic-container { border: 1px solid var(--dark-background-5); background: var(--dark-background-1); }
  .topic-header { background-color: var(--dark-background-1); }
  .topic-content { border-top: 1px solid var(--dark-background-4); }
}