: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;
}

.zona1{
  background-color: #4d93d9;
  color: #ffffff;
}

.zona2{
  background-color: #82cceb;
  color: #ffffff;
}

.zona3{
  background-color: #b5e6a1;
  color: #ffffff;
}

.zona4{
  background-color: #f1a983;
  color: #ffffff;
}

.zona5{
  background-color: #ff5178;
  color: #ffffff;
}

.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;
}