:root {
  /* We use hsl for our primary color to be able to calculate other colors relative to it*/
  --primary-color-h: 197;
  --primary-color-s: 100%;
  --primary-color-l: 32%;

  --primary-color: hsl(var(--primary-color-h), var(--primary-color-s), var(--primary-color-l));

  /* The border color is a lighter, less saturated version of the primary color */
  --border-color: hsl(
    var(--primary-color-h),
    /* Reduce saturation by 60% but don't go below 0 */
    max(calc(var(--primary-color-s) - 60%), 0%),
    /* Increase lightness by 50% but don't go above 85% */
    min(calc(var(--primary-color-l) + 50%), 85%));

  --text-color: #727272;
  --column-width: 100%;
  --gutter-width: 10px;
}

body {
  color: var(--text-color);
  line-height: 1;
  font-family: "Helvetica neue", Arial, sans-serif;
}

h1 {
  color: #000;
  font-size: 2em;
  margin-bottom: 0;
}

h1 .altitude {
  color: var(--text-color);
  font-size: 0.8em;
}

a {
  color: var(--primary-color);
  text-decoration: underline;
}

hr {
  border-top: 1px solid var(--border-color);
  margin: 5px 0;
}

header {
  margin-top: 10px;
}

footer {
  font-size: 0.8em;
  margin: 2.5em 0 1.5em;
}

.report-box {
  border: 1px solid var(--border-color);
  padding: 10px;
  margin-bottom: 10px;
}

.date {
  font-size: 2em;
  color: var(--primary-color);
}

.last-update {
  font-size: 0.8em;
}

.weather {
  display: flex;
  justify-content: space-around;
}

.weather-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  flex-grow: 0;
}

.weather-box img {
  width: 60px;
  height: 60px;
}

.skimap {
  padding: 0;
  border: none;
}

.skimap img {
  width: 100%;
}

.items > div {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
  break-inside: avoid;
}

.items span {
  overflow-wrap: break-word;
  word-break: break-word;
}

.items img {
  width: 30px;
  height: 30px;
}

.legend img {
  width: 24px;
  height: 24px;
  margin-left: 5px;
}

.legend .slope-icon {
  width: 20px;
  height: 20px;
  margin-left: 5px;
  margin-right: 3px;
}

.snow-update {
	color: var(--primary-color);
	margin-top: 10px;
	font-size: 0.9rem;
}

@media (min-width: 768px) {
  .container {
    padding: 0;
  }

  :root {
    --column-width: calc((100% - var(--gutter-width)) / 2);
  }

  .masonry-grid .report-box {
    width: var(--column-width);
  }

  .masonry-grid .colspan-2 {
    width: calc((2 * var(--column-width)) + var(--gutter-width));
  }

  .masonry-grid .colspan-2 .items {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  :root {
    --column-width: calc((100% - (2 * var(--gutter-width))) / 3);
  }
}

@media (min-width: 1200px) {
  :root {
    --column-width: calc((100% - (3 * var(--gutter-width))) / 4);
  }
}

@media print {
  :root {
    --column-width: calc((100% - (2 * var(--gutter-width))) / 3) !important;
  }

  .container {
    max-width: 100%;
  }

  .masonry-grid .report-box {
    width: var(--column-width);
  }

  .masonry-grid .colspan-2 {
    width: calc((2 * var(--column-width)) + var(--gutter-width));
  }

  .masonry-grid .colspan-2 .items {
    column-count: 2;
  }
}

/* HEADER ICONS ----------------------------------------------------------------------------------------------------- */

.header-icon {
  width: 30px;
  height: 30px;
  background-color: var(--primary-color);
  -webkit-mask-size: 100%;
  mask-size: 100%;
  margin-bottom: 5px;
}

.header-icon-print {
  -webkit-mask-image: url("./images/icons/print.svg");
  mask-image: url("./images/icons/print.svg");
}

.header-icon-clock {
  -webkit-mask-image: url("./images/icons/clock.svg");
  mask-image: url("./images/icons/clock.svg");
}

.header-icon-snow {
  -webkit-mask-image: url("./images/icons/snow.svg");
  mask-image: url("./images/icons/snow.svg");
}

.header-icon-lifts {
  -webkit-mask-image: url("./images/icons/lift.svg");
  mask-image: url("./images/icons/lift.svg");
}

.header-icon-slopes {
  -webkit-mask-image: url("./images/icons/ski.svg");
  mask-image: url("./images/icons/ski.svg");
}

.header-icon-hiking {
  -webkit-mask-image: url("./images/icons/hike.svg");
  mask-image: url("./images/icons/hike.svg");
}

.header-icon-loipe {
  -webkit-mask-image: url("./images/icons/loipe.svg");
  mask-image: url("./images/icons/loipe.svg");
}

.header-icon-winterhike {
  -webkit-mask-image: url("./images/icons/winterwander.svg");
  mask-image: url("./images/icons/winterwander.svg");
}

.header-icon-news {
  -webkit-mask-image: url("./images/icons/news.svg");
  mask-image: url("./images/icons/news.svg");
}

.header-icon-info {
  -webkit-mask-image: url("./images/icons/info.svg");
  mask-image: url("./images/icons/info.svg");
}

/* TYPE ICONS ------------------------------------------------------------------------------------------------------- */

.type-icon {
  width: 25px;
  height: 25px;
  background-color: #444;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  flex-shrink: 0;
}

.type-9,
.type-31 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_skilift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_skilift_im@2x.png");
}

.type-29 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_1person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_1person_chairlift_im@2x.png");
}

.type-2,
.type-3 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_pendelbahn_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_pendelbahn_im@2x.png");
}

.type-23 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_gondolas@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_gondolas@2x.png");
}

.type-26 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_standseilbhan_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_standseilbhan_im@2x.png");
}

.type-13 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_2person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_2person_chairlift_im@2x.png");
}

.type-33 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_3person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_3person_chairlift_im@2x.png");
}

.type-25 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_4person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_4person_chairlift_im@2x.png");
}

.type-30 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_6person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_6person_chairlift_im@2x.png");
}

.type-610 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_kinderlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_kinderlift_im@2x.png");
}

.type-1 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_8person_chairlift_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_8person_chairlift_im@2x.png");
}

.type-21 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_zauberteppich_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_zauberteppich_im@2x.png");
}

.type-15 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funicular@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funicular@2x.png");
}

.type-17 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funitel_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funitel_im@2x.png");
}

.type-386,
.type-546 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_rodeln@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_rodeln@2x.png");
}

.type-362 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funpark@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_funpark@2x.png");
}

.type-388 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_snowshoeing@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_snowshoeing@2x.png");
}

.type-202 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_gastronomy@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_gastronomy@2x.png");
}

.type-244 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_bus@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_bus@2x.png");
}

.type-222 {
    -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_parking@2x.png");
    mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_parking@2x.png");
}

.type-207 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_iceskating@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_iceskating@2x.png");
}

.type-195 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_curling@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_curling@2x.png");
}

.type-544 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_climbing3@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_climbing3@2x.png");
}

.type-279 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_parking@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_parking@2x.png");
}
.type-20,
.type-2103 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_kombibahn_im@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_kombibahn_im@2x.png");
}

.type-2205 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_car@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_car@2x.png");
}

.type-28 {
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-lynx/controls/black/icon_kinderlift_im.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-lynx/controls/black/icon_kinderlift_im.png");
}

.legend
.slope-type-701-288,
.slope-type-382-419
 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 3px;
}

.legend
.slope-type-701-320,
.slope-type-382-417
 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 3px;
}

.legend
.slope-type-701-326,
.slope-type-382-422
 {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  margin: 3px;
}


.slope-type-701-288,
.slope-type-382-419
 {
  background-color: #f00;
}

.slope-type-701-320,
.slope-type-382-417
 {
  background-color: #0069EA;
}

.slope-type-701-326,
.slope-type-382-422
 {
  background-color: #000;
}

.slope-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  flex-shrink: 0;
}

.slope-type-703-,
.slope-type-703-128,
.slope-type-703-288,
.slope-type-703-320 {
  border-radius: 0;
}

.slope-type-703-::after,
.slope-type-703-128::after,
.slope-type-703-288::after,
.slope-type-703-320::after {
  content: '';
  display: block;
  width: 19px;
  height: 19px;
  background-color: #f00;
  transform: translate(3px, 3px) rotate(45deg);
}

.slope-type-391-128 {
  border-radius: 0;
   width: 25px;
  height: 25px;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  flex-shrink: 0;
  margin: 3px;
}

.slope-type-391-128::after {
 content: '';
  display: block;
  width: 19px;
  height: 19px;
  background-color: #f00;
  transform: translate(3px, 3px) rotate(45deg);
}

.legend
.slope-type-391-128 {
  border-radius: 0;
   width: 20px;
  height: 20px;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  flex-shrink: 0;
  margin: 3px;
}

.legend
.slope-type-391-128::after {
 content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-color: #f00;
  transform: translate(3px, 3px) rotate(45deg);
}

.slope-type-724-,
.slope-type-724-288,
.slope-type-724-320 {
  border-radius: 0;
  background-color: #444;
  -webkit-mask-size: 100%;
  mask-size: 100%;
  flex-shrink: 0;
  -webkit-mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_night_skiing@2x.png");
  mask-image: url("https://s3-eu-west-1.amazonaws.com/intermaps-icons/intermaps/icon_night_skiing@2x.png");
}