.city-name > sup {
  padding: 0.2em 0.6em;
  border-radius: 30px;
  color: #ffffff;
  background: #ff8c00;
}

.city > .block > .level {
  margin-bottom: 0;
}

.city-temp {
  white-space: nowrap;
}

a.city {
  transition: box-shadow 300ms ease-in-out;
}

a.city:hover {
  box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 40%),
    0 0 0 1px rgb(10 10 10 / 2%);
}

.city-icons {
  margin-bottom: 3rem !important;
}

.city-icons > img {
  position: absolute;
  top: 0;
}

.city-temp-icon {
  height: 1.5em;
  margin: 0%;
  margin-right: -10% !important;
}

.city-temp-celsius {
  font-size: 0.5em;
}

.charts-css.column.rain td {
  border-radius: 30px 30px 0 0;
}

.charts-css.column.rain {
  --color: #56a0ee;
}

.modal {
  z-index: 1000;
}

.modal-open {
  height: 2.3rem;
  width: 2.3rem;
  border-radius: 35%;
  position: fixed;
  bottom: 1rem;
  right: 1.2rem;
}

.modal-open.is-primary {
  height: 10rem;
  width: 10rem;
}
.modal-open.is-primary .icon {
  height: 6em !important;
  width: 6em !important;
}
.arrow {
  bottom: 12rem;
  right: 12rem;
  width: 7rem;
  position: fixed;
  transform-origin: 50% 50%;
  transform: rotate(45deg);
  animation: slide 1s ease-in-out infinite;
}
@keyframes slide {
  0%,
  100% {
    transform: translate(0, 0) rotate(45deg);
  }
  50% {
    transform: translate(20px, 20px) rotate(45deg);
  }
}

.ct-series.series-solstice {
  stroke: grey;
  fill: grey;
}

.ct-series.series-today {
  stroke: #f4c63d;
  fill: #f4c63d;
}

.ct-label {
  font-size: 1.75rem;
  position: absolute;
  left: -2rem;
  white-space: nowrap;
}

/*
Maastricht Blue (#001A26)
Prussian Blue (#053752)
Tangerine (#EF810E)
Sandstorm (#E5DE44)
*/

#last-update {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 0;
}

.flip {
  transform: scaleY(-1);
}

.chart-label {
  writing-mode: tb-rl;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scale(-1, -1);
  left: -6px;
}

.ecmwf {
  display: block;
}

.ecmwf > .level-item {
  margin: auto;
  width: 100%;
}

.ecmwf > .level-item > canvas {
  max-width: 100%;
  padding: 1rem;
}

.pagination-link.is-white {
  background-color: #fff;
}

.pagination-link.is-white.is-current {
  background-color: #fff;
  color: #0a0a0a;
  border-color: #fff;
}

.pagination-link.is-black {
  background-color: #fafafa;
}

.pagination-link.is-black.is-current {
  background-color: #0a0a0a;
  color: #fff;
  border-color: #0a0a0a;
}

.pagination-link.is-light {
  background-color: #fafafa;
}

.pagination-link.is-light.is-current {
  background-color: #f5f5f5;
  color: rgba(0, 0, 0, 0.7);
  border-color: #f5f5f5;
}

.pagination-link.is-dark {
  background-color: #fafafa;
}

.pagination-link.is-dark.is-current {
  background-color: #363636;
  color: #fff;
  border-color: #363636;
}

.pagination-link.is-primary {
  background-color: #ebfffc;
}

.pagination-link.is-primary.is-current {
  background-color: #00d1b2;
  color: #fff;
  border-color: #00d1b2;
}

.pagination-link.is-link {
  background-color: #eff1fa;
}

.pagination-link.is-link.is-current {
  background-color: #485fc7;
  color: #fff;
  border-color: #485fc7;
}

.pagination-link.is-info {
  background-color: #eff5fb;
}

.pagination-link.is-info.is-current {
  background-color: #3e8ed0;
  color: #fff;
  border-color: #3e8ed0;
}

.pagination-link.is-success {
  background-color: #effaf5;
}

.pagination-link.is-success.is-current {
  background-color: #48c78e;
  color: #fff;
  border-color: #48c78e;
}

.pagination-link.is-warning {
  background-color: #fffaeb;
}

.pagination-link.is-warning.is-current {
  background-color: #ffe08a;
  color: rgba(0, 0, 0, 0.7);
  border-color: #ffe08a;
}

.pagination-link.is-danger {
  background-color: #feecf0;
}

.pagination-link.is-danger.is-current {
  background-color: #f14668;
  color: #fff;
  border-color: #f14668;
}

.grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  grid-auto-flow: dense;
}

.grid > div {
  position: relative;
}

.border {
  border: 1px solid lightgray;
}
.triangle {
  border-top-right-radius: 0;
}
.triangle:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-width: 0 16px 16px 0;
  border-style: solid;
  border-color: #e2e2e2 #fff;
  -moz-border-radius: 0 0 0 5px;
  border-radius: 0 0 0 5px;
  z-index: 500;
  display: block;
  width: 0;
}

.grid > div,
.grid > div > div,
.radius {
  border-radius: 1.5rem;
}

.grid > div:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}
.grid > div > div {
  position: absolute;
  width: 100%;
  height: 100%;
}

.grid > .wide {
  grid-column: span 2;
}
.grid > .wide:after {
  padding-bottom: 50%;
}

.grid > .wider {
  grid-row: span 2;
  grid-column: span 3;
}
.grid > .wider:after {
  padding-bottom: 50%;
}

.grid > .tall {
  grid-row: span 2;
}
.grid > .tall:after {
  padding-bottom: 200%;
}

.grid > .big {
  grid-row: span 2;
  grid-column: span 2;
}

.grid > .taller {
  grid-row: span 3;
  grid-column: span 2;
}
.grid > .taller:after {
  padding-bottom: 150%;
}

.no-scrollbar:not(:hover) {
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}
.no-scrollbar:not(:hover)::-webkit-scrollbar {
  /* For Chrome and Safari */
  height: 0px;
  width: 0px;
}

.leaflet-left.leaflet-bottom {
  left: 50%;
  transform: translate(-50%, 0%);
}
.leaflet-touch .rainviewer-control,
.rainviewer-control {
  display: flex;
  font-size: initial;
  cursor: pointer;
  user-select: none;
  margin-bottom: 1rem;
}
.leaflet-touch .rainviewer-control a,
.rainviewer-control a {
  min-width: 30px;
  width: max-content;
  display: flex;
  border-radius: 0;
  border-bottom: none;
}
.rainviewer-control img {
  height: 22px;
  margin: auto;
}
.rainviewer-control a:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.rainviewer-control a:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.leaflet-touch .rainviewer-control a:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.leaflet-touch .rainviewer-control a:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.rainviewer-control.running .play-icon,
.pause-icon {
  display: none;
}

.rainviewer-control.running .pause-icon {
  display: initial;
}

@media screen and (max-width: 450px) {
  .grid {
    grid-gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  .grid > .wider {
    grid-column: span 2;
  }
}

@media screen and (max-width: 768px) {
  /* mobile */

  .chart-label {
    display: none;
  }

  .section {
    padding: 1rem 1rem;
  }
}

@media screen and (min-width: 769px) {
  /* tablet */
}
@media screen and (min-width: 1024px) {
  /* desktop */

  .ecmwf > .level-item {
    width: 50%;
  }
  .ecmwf {
    display: flex;
  }
}
@media screen and (min-width: 1216px) {
  /* widescreen */
}
@media screen and (min-width: 1408px) {
  /* fullhd */
}

@media screen and (min-width: 769px) and (max-width: 1023px) {
  /* tablet-only */
}
@media screen and (min-width: 1024px) and (max-width: 1215px) {
  /* desktop-only */
}
@media screen and (min-width: 1216px) and (max-width: 1407px) {
  /* widescreen-only */
}

@media screen and (max-width: 1023px) {
  /* touch */
}
@media screen and (max-width: 1215px) {
  /* until-widescreen */
}
@media screen and (max-width: 1407px) {
  /* until-fullhd */
}