body {
  font-family: Arial, sans-serif;
  /* background: #f5f7fa; */
  margin: 0;
  padding: 0;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 0;
}

.top-bar {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #0d8ecf;
  color: white;
  padding: 2px 6px;
  height: 30px;
}

.top-bar * {
    padding: 2px;
}

.top-bar a,
.top-bar h4,
.top-bar h5,
.top-bar input,
.top-bar div {
  color: white;
}

.top-bar input {
  background: #ffffff;
  color: #0d8ecf;
  border: 1px solid #ffffff;
  border-radius: 4px;
  padding: 2px 4px;
}

.last-updated {
  width: 50px;
  margin-top: 4px;
  font-size: 9px;
  opacity: 0.7;
  padding: 0 5px 5px 5px;
}

h1 {
  display: inline-block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  color: white;
}

.controls input {
  font-size: 14px;
}

table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  background: white;
  margin: auto;
}

#windChart {
  width: 100%;
  max-width: 640px;
  max-height: 300px;
}

th {
  /* background: #1e73be; */
  background: #0d8ecf;
  color: white;
  padding: 4px;
  font-size: 14px;
  border-left: 1px solid white;
  border-right: 1px solid white;
}

td {
  padding: 5px 5px;
  /* border-bottom: 1px solid #eee; */
  font-size: 14px;
  text-align: center;
  color: #333;
}

.col-force {
  cursor: pointer;
}

.tooltip {
  position: absolute;
  z-index: 10;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.tooltip.hidden {
  display: none;
}

@media (max-width: 640px) {
  .col-humidity,
  .col-pressure {
    display: none;
  }

  table {
    width: 100%;
    max-width: none;
  }

  #windChart {
    width: 100%;
    max-width: none;
  }
}

tr:nth-child(even) {
  background: #f9fcfe;
}

.pagination {
  margin-top: 10px;
  text-align: center;
}

button {
  padding: 6px 12px;
  margin: 0 5px;
}

.temp-dark-blue { background-color: rgb(78, 173, 251); }
.temp-blue { background-color: rgb(105, 249, 251); }
.temp-green { background-color: rgb(138, 255, 209); }
.temp-light-yellow { background-color: rgb(245, 247, 167); }
.temp-yellow { background-color: rgb(255, 236, 106); }
.temp-orange { background-color: rgb(255, 199, 119); }
.temp-red { background-color: rgb(255, 126, 97); }
.temp-pink { background-color: rgb(255, 77, 210); }

.bold { font-weight: bold; }
.wind-emphasis { font-weight: 600; }
.dir-arrow {
  width: 18.72px;
  height: auto;
  margin-right: 4px;
  vertical-align: middle;
  display: inline-block;
}

.top-bar .dir-arrow {
  filter: brightness(0) invert(1);
}
.small { font-size: 12px; }
.big { font-size: 14px;}

.dot { display: inline-block; width: 9px; height:9px; border-radius: 3px; }

/* Extract from cabezo bergfex weather station - in Medano :)  */

.bft0 {
    background-color: transparent;
    color: inherit;
}
.bft1,
.bft2,
.bft3 {
    background-color: white;
}
.bft4 {
    background-color: #f3ffd8;
}
.bft5 {
    background-color: #c8eaff;
}

.knt7 { background-color: #f7fee7; }
.knt8 { background-color: #f7fee7; }
.knt9 { background-color: #f7fee7 !important; }
.knt10 { background-color: #f3ffd8 !important; }
.knt11 { background-color: #f3ffd8; }
.knt12 { background-color: #f3ffd8; }
.knt13 { background-color: #f3ffd8; }
.knt14 { background-color: #c8eaff; }
.knt15 { background-color: #c8eaff; }
.knt16 { background-color: #c8eaff; }

/* 5bft */
.knt17 { background-color: #c8eaff; }
.knt18 { background-color: #bae5ff; }
.knt19 { background-color: #ade0ff; }
.knt20 { background-color: #a1dbff; }
.knt21 { background-color: #94d6ff; }

.bft6 {
    background-color: #ffd75d;
    color: white;
}
/* 6 bft */
.knt22 { background-color: #ffe599; }
.knt23 { background-color: #ffdf80; }
.knt24 { background-color: #ffd966; }
.knt25 { background-color: #ffd24c; }
.knt26 { background-color: #ffcc33; }
.knt27 { background-color: #ffc61a; }


/* 7 bft */
.knt28 { background-color: #ffc999 !important; }
.knt29 { background-color: #ffbb7f !important; }
.knt30 { background-color: #ffad66 !important; }
.knt31 { background-color: #ffa04c !important; }
.knt32 { background-color: #ff9233 !important; }
.knt33 { background-color: #ff851a !important; }

/* 8bft */
.knt34 { background-color: #ff410e !important; color: white !important; }
.knt35 { background-color: #f51f03 !important; }
.knt36 { background-color: #f50c38 !important; }
.knt37 { background-color: #e2143a !important; }
.knt38 { background-color: #ce1235 !important; }
.knt39 { background-color: #b0003e !important; }
.knt40 { background-color: #ff01de !important; }
.knt41 { background-color: #ea04ff !important; }

.bft7 {
    background-color: #ffa95d;
    color: white;
}

.bft8 {
    background-color: #ee5c15;
    color: white;
}

.bft9 {
    background-color: #bc03cd;
    color: white;
}

.bft10 {
    background-color: #6d0500;
    color: white;
}