:root {
  --color-primary: #0296ec;
  --color-error: #ec5802;
  --color-success: #21ec02;
  --color-hny-lime: #64ba00;
  --color-hny-pacific: #0298ec;
  --color-hny-denim: #01487b;
  --color-hny-honey: #ffb000;
  --color-hny-tango: #f96e10;
  --color-hny-spice: #e25404;
  --color-hny-indigo: #51368d;
  --color-hny-slate: #25303e;
  --lat-ref-color-gold-100: #ffeab2;
  --lat-ref-color-sky-200: #8dcaf5;
  --lat-ref-color-purple-100: #dfd3eb;
  --lat-ref-color-purple-500: #9b77c2;
  --lat-ref-color-green-200: #bde596;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  margin: auto;
  margin-top: 0px;
  background: linear-gradient(
    90deg,
    var(--color-hny-honey),
    var(--lat-ref-color-gold-100) 5%,
    var(--lat-ref-color-gold-100) 95%,
    var(--color-hny-honey)
  );
}

header {
  background-color: var(--color-hny-honey);
  text-align: left;
  padding-left: 10px;
  margin-top: 0px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 5px;
  display: flex;
  gap: 10px;
  direction: row;
  justify-content: space-between;
}

header .icon {
  height: 20px;
  width: 20px;
}

header .title {
  flex-grow: 1;
}

main {
  width: 90%;
  min-width: 500px;
  text-align: center;
  margin: auto;
}

h1 {
  color: white;
  text-shadow: 3px 3px 3px var(--color-hny-slate);
}

section {
  border: 6px solid var(--color-hny-slate);
  padding: 10px;
}

header .span {
  font-weight: bold;
}

.hero {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
  gap: 20px;
}

.hero div {
  text-align: left;
}

#hero-image {
  height: 20rem;
}

button,
.button-link {
  margin: 5px;
  color: white;
  background-color: var(--color-hny-tango);
  border: 4px solid var(--color-hny-honey);
  min-height: 2rem;
  padding: 8px;
  font-weight: bold;
  border-radius: 15px;
}

input {
  min-height: 1.5rem;
  border-radius: 0;
  border: 2px inset black;
  margin: 5px;
}

button:hover {
  border-color: var(--color-hny-indigo);
  text-shadow: 2px 2px 2px var(--color-hny-slate);
}

button:active {
  background-color: var(--color-hny-spice);
  text-shadow: none;
}

.apiKey {
  background-color: var(--color-hny-pacific);
  color: black;
}

section.team {
  background-color: var(--color-hny-pacific);
  color: white;

  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas:
    "key key key"
    "region name env"
    "link link link";
  justify-items: center;
  justify-content: stretch;
  align-items: end;
  row-gap: 10px;
}

.team-description {
  margin-right: 5px;
  margin-left: 5px;
}

.team-apikey {
  grid-area: key;
}

.team-region {
  grid-area: region;
}
.team-name {
  grid-area: name;
  font-size: larger;
}
.team-env {
  grid-area: env;
}
.team-link {
  grid-area: link;
  margin: 5px;
}

.apiKey input {
  width: 32em;
}

.fine-print {
  font-size: smaller;
  text-align: center;
  margin-bottom: 0px;
  margin-top: 0px;
}

label {
  margin-right: 5px;
}

button {
  margin: 5px;
}

.unhappy {
  padding: 2px;
  color: maroon;
  background-color: white;
  border: 1px dashed maroon;
}

.happy {
  padding: 2px;
  background-color: white;
  color: green;
}

div.team {
  background-color: burlywood;
  padding: 10px;
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
  opacity: 1;
}
.htmx-request.htmx-indicator {
  opacity: 1;
}

#bug {
  width: 10px;
}

input#trace-id {
  width: 20em;
}

#trace-section {
  background-color: var(--lat-ref-color-sky-200);
}

.section-title {
  text-align: start;
  margin-top: 5px;
  margin-inline-start: 5px;
  margin-bottom: 5px;
}

.invisible {
  display: none;
}

.link-symbol {
  text-decoration: none;
  font-size: larger;
}

.section-unavailable {
  text-align: left;
}

section#dataset-section {
  padding: 0px;
  border-color: var(--color-hny-indigo);
  background-color: var(--lat-ref-color-purple-100);
}

section#dataset-section .section-unavailable {
  padding: 10px;
}

.dataset-table {
  border-collapse: collapse;
  margin: 0px;
  font-size: 0.9em;
  font-family: sans-serif;
  min-width: 400px;
  width: 100%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.dataset-table thead tr {
  background-color: var(--lat-ref-color-purple-500);
  color: #ffffff;
  text-align: center;
}

.dataset-table tfoot tr {
  background-color: var(--lat-ref-color-purple-500);
  color: #ffffff;
  text-align: center;
}

.dataset-table tbody tr {
  border-bottom: 1px solid #dddddd;
  background-color: white;
}

.dataset-table tbody tr:nth-of-type(even) {
  background-color: var(--lat-ref-color-purple-100);
}

.dataset-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}

.dataset-table th,
.dataset-table td {
  padding: 12px 15px;
}

.dataset-table .dataset-name-col {
  text-align: start;
}

.dataset-table tbody tr.active-row {
  font-weight: bold;
  color: var(--lat-ref-color-purple-500);
}

div.status {
  text-align: start;
  padding-inline-start: 5px;
}

section#send-event-section {
  background-color: var(--lat-ref-color-green-200);
}

.event-selection {
  text-align: start;
}

.event-selection p {
  margin-bottom: 0.5em;
  font-weight: bold;
}

.event-selection div {
  display: flex;
  align-items: center;
}

.event-selection .icon {
  width: 12px;
  height: 12px;
  vertical-align: middle;
}

.event-selection input[type="radio"] {
  margin-right: 0.5em;
}

section#send-event-section div.status {
  text-align: center;
}

.event-form {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
}

.event-form div {
  padding-inline-end: 5px;
}