h1,
h2,
footer {
  text-align: center;
}

th {
  cursor: pointer;
  position: relative;
}

section {
  margin: 0 auto;
  width: 40rem;
}

section,
header,
footer {
  padding: 2rem 2rem 0 2rem;
}

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

.header-logo {
  width: 10rem;
}

.login {
  display: flex;
  justify-content: center;
}

dl {
  display: flex;
  flex-flow: row wrap;
  border-bottom: solid var(--ubilabs-table-body-row-border);
  border-width: 1px 1px 0 0;
}

dt {
  flex-basis: 20%;
  padding: 2px 4px;
  background: var(--ubilabs-table-header-background-color);
  text-align: right;
  color: var(--ubilabs-table-header-color);
}

dd {
  flex-basis: 70%;
  flex-grow: 1;
  margin: 0;
  padding: 2px 4px;
  border-bottom: solid var(--ubilabs-table-body-row-border);
}

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
}

.success {
  color: var(--ubilabs-green);
  text-align: center;
  font-size: 2rem;
}

.error {
  color: var(--ubilabs-red);
  text-align: center;
  font-size: 1.25rem;
  padding: 2rem 0;
}

.warning {
  color: var(--ubilabs-yellow);
  text-align: center;
  font-size: 1.25rem;
}

form {
  fieldset {
    border: none;
    padding: 0;
    margin: 0;
  }

  .inputs {
    display: flex;
  }

  .form-group {
    display: flex;
    flex-direction: column;
    margin: 1rem;
    width: 33%;

    h2 {
      text-align: left;
    }

    input[type='text']:invalid {
      border: var(--ubilabs-red) solid 1px;
    }

    input[type='text']:valid {
      border: var(--ubilabs-green) solid 1px;
    }
  }
}

.hidden {
  display: none;
}

.message p {
  margin: 0;
}

.search-results {
  padding: var(--ubilabs-dropdown-options-padding);
}

.search-result {
  padding: var(--ubilabs-dropdown-option-padding);

  &:hover,
  &.active {
    background-color: var(--ubilabs-dropdown-option-hover-background-color);
  }
}

.sort-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #ccc; /* Default color */
  margin-left: 5px;
  vertical-align: middle;
  transition: transform 0.2s;
}

.sort-icon.asc {
  border-bottom: 5px solid #333;
  transform: rotate(0deg);
}

.sort-icon.desc {
  border-top: 5px solid #333;
  border-bottom: none;
  transform: rotate(180deg);
}

.sort-icon.none {
  border-bottom: 5px solid #ccc;
}