:root,
:root.light {
  --bg-color: #ffffff;

  --bg-color-header: #226666;
  --tx-color-header: #669999;

  --bg-color-select: #003333;
  --tx-color-select: #407f7f;

  --bg-color-main: #2e4372;
  --tx-color-main: #7887ab;

  --bg-color-aside: #7887ab;
  --tx-color-aside: #061639;

  --bg-color-widget: #aa8439;
  --tx-color-widget: #ffe3aa;

  --bg-color-footer: #aa6c39;
  --tx-color-footer: #ffd0aa;
}

:root.dark {
  --bg-color: #3d3d3d;

  --bg-color-header: #669999;
  --tx-color-header: #226666;

  --bg-color-select: #407f7f;
  --tx-color-select: #003333;

  --bg-color-main: #7887ab;
  --tx-color-main: #2e4372;

  --bg-color-aside: #061639;
  --tx-color-aside: #7887ab;

  --bg-color-widget: #ffe3aa;
  --tx-color-widget: #aa8439;

  --bg-color-footer: #ffd0aa;
  --tx-color-footer: #aa6c39;
}

:root.sandstorm {
  --bg-color: #ffdfaa;

  --bg-color-header: #aa7f39;
  --tx-color-header: #553500;

  --bg-color-select: #805815;
  --tx-color-select: #d4ad6a;

  --bg-color-main: #d4ad6a;
  --tx-color-main: #805815;

  --bg-color-aside: #aa9239;
  --tx-color-aside: #554300;

  --bg-color-widget: #806915;
  --tx-color-widget: #ffedaa;

  --bg-color-footer: #552100;
  --tx-color-footer: #ffcbaa;
}

:root.hurricane {
  --bg-color: #728ca6;

  --bg-color-header: #2a4d6e;
  --tx-color-header: #041e37;

  --bg-color-select: #133353;
  --tx-color-select: #4a6b8a;

  --bg-color-main: #4a6b8a;
  --tx-color-main: #133353;

  --bg-color-aside: #2f4172;
  --tx-color-aside: #061439;

  --bg-color-widget: #162756;
  --tx-color-widget: #7986ac;

  --bg-color-footer: #012c34;
  --tx-color-footer: #6a959d;
}

body {
  background: var(--bg-color);
}

.header {
  background: var(--bg-color-header);
  padding: 30px;
  color: var(--tx-color-header);
  min-height: 100px;
}

.main {
  background: var(--bg-color-main);
  color: var(--tx-color-main);
  padding: 10px;
  margin-top: 20px;
  min-height: 300px;
}

.tbheader {
  background-color: #114861;
  color: #ffffff;
}

#map {
  height: 600px;
  width: 70%;
  float: left;
}

#locationsList {
  width: 29%;
  height: 600px;
  float: left;
  margin-left: 10px;
  background-color: #ffffff;
  padding: 10px;
}

#locationsList li {
  margin: 5px 0;
}

ol.list-group {
  counter-reset: list-counter;
  /* Reset the counter for ordered list */
  padding-left: 0;
  /* Remove default padding */
}

ol.list-group>li {
  display: flex;
  align-items: center;
  counter-increment: list-counter;
  /* Increment the counter for each <li> */
}

ol.list-group>li::before {
  content: counter(list-counter) ". ";
  /* Display the number with a dot */
  font-weight: bold;
  /* Make it bold for better visibility */
  margin-right: 10px;
  /* Add spacing between number and text */
}

li>div {
  flex: 1;
  /* Ensure the div inside li takes full width for flex layout */
}

.footer {
  background: var(--bg-color-footer);
  color: var(--tx-color-footer);
  padding: 10px;
  margin-top: 20px;
  height: 130px;
}

select {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  font-family: inherit;
  background-color: var(--bg-color-select);
  color: var(--tx-color-select);
  border-color: var(--tx-color-select);
  border-radius: 0.25rem;
}