:root {
  --darker-blue: #296da3;
  --blue: #38c;
  --light-blue: #c1dbf0;

  --date-past: #666;
  --date-present: #35c;
  --date-future: #222;

  --type-aurora: #3d9;
  --type-temp: #f06;
  --type-job: #c6c;
  --type-sea: #6ad;
  --type-snow: #69f;
  --type-warning: #f93;
}

html {
  background-color: var(--light-blue);
  font: 16px/1.4 Lato;
}

body {
  margin: 0;
}

header {
  align-items: center;
  background: var(--blue);
  border-bottom: 1px solid var(--darker-blue);
  display: flex;
  justify-content: space-between;
}

header h1 {
  color: #fff;
  font-weight: 400;
  margin: 0;
  padding: 1rem 2rem;
  vertical-align: baseline;
}

header h1 span {
  font-weight: 700;
  padding-right: 0.4rem;
  position: relative;
  top: -0.2em;
}

#progress {
  margin: 1rem 2rem;
}

#progress i {
  display: inline-block;
  height: 1rem;
  width: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  margin: 0 0 0 -1px;
}

table {
  border-collapse: collapse;
  width: 100%;
}

thead th {
  border-top-width: 0;
}

th,
td {
  background: #fff;
  border: 1px solid var(--light-blue);
  padding: 0.2rem 1rem;
  text-align: left;
  vertical-align: top;
}

td:first-child,
th:first-child {
  border-left-width: 0;
}

td:last-child,
th:last-child {
  border-right-width: 0;
}

td.prio {
  color: #999;
  text-align: right;
}

td.date,
td.country,
td.location,
td.type,
td.remove {
  white-space: nowrap;
  width: 1px;
}

td.type,
td.remove {
  text-align: center;
}

td.date small {
  opacity: 0.5;
}

td.date.past {
  color: var(--date-past);
}
td.date.today {
  color: var(--date-present);
  font-weight: 600;
}
td.date.tomorrow {
  color: var(--date-present);
}
td.date.future {
  color: var(--date-future);
}

td.type {
  position: relative;
}

td.type span {
  position: absolute;
  left: 0;
  right: 0;
}

td.type span:before {
  display: inline-block;
  position: relative;
}

td.type-aurora span:before {
  color: var(--type-aurora);
  content: "∭";
  left: 0.2rem;
  transform: rotate(75deg);
}

td.type-job span:before {
  color: var(--type-job);
  content: "⌂";
  font-size: 140%;
  top: -0.2rem;
}

td.type-sea span:before {
  color: var(--type-sea);
  content: "∬";
  left: 0.2rem;
  transform: rotate(75deg);
}

td.type-ship span:before {
  color: var(--type-sea);
  content: "⚓";
  font-size: 70%;
  left: -0.1rem;
}

td.type-snowdepth span:before {
  color: var(--type-snow);
  content: "⊥";
  font-size: 19px;
  font-weight: 900;
}

td.type-snowfall span:before {
  color: var(--type-snow);
  content: "❄︎";
  font-size: 19px;
}

td.type-temp span:before {
  color: var(--type-temp);
  content: "°C";
  font-size: inherit;
}

td.type-warning span:before {
  color: var(--type-warning);
  content: "⚠";
}

td.error {
  color: #c11;
}

span[data-action="remove"] {
  color: var(--darker-blue);
  cursor: pointer;
  text-align: center;
}

a {
  color: var(--darker-blue);
}

.flag-icon {
  background-position: 0% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: 0 0 1px #999;
  display: inline-block;
  line-height: 0.81em;
  margin-right: 0.15rem;
  opacity: 0.9;
  position: relative;
  width: 1.08em;
}

.flag-icon:before {
  content: "\00a0";
}