﻿/* wrapper principale del report */
.main_table {
    width: 150mm !important; /* A4 210mm - (30mm + 30mm) = 150mm */
    max-width: 150mm !important;
    margin: 0 auto !important; /* centra ⇒ crea margini sx/dx uguali */
    box-sizing: border-box;
}

/* opzionale: azzera margini del body per non sommarli */
html, body {
    margin: 0 !important;
}

.blueLink {
    text-decoration: none;
    color: #2196F3;
}

a.blueLink:link {
    color: #2196F3;
    text-decoration: none;
}

a.blueLink:visited {
    color: #2196F3;
    text-decoration: none;
}

a.blueLink:hover {
    color: #2196F3;
    text-decoration: underline;
}


.privacy_link {
    color: rgb(127, 127, 127);
}

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font-family: Arial !important;
    font-size: 12px !important;
    color: black !important;
}

.paddy {
    padding-top: 10px;
}

.linea {
    border-bottom: 1px solid #e40613;
    padding-bottom: 8px;
}

.linea_top {
    border-top: 1px solid #e40613;
    padding-top: 8px;
}

.linea_top_v2 {
    padding-top: 8px;
}

.caption_mini {
    color: #585858;
    font-weight: normal;
}

.titolone {
    font-size: 18px;
    color: #e40613;
    font-family: Arial;
    margin-top: 20px !important;
    /*padding-top: 10px;*/
}


.titolone_v2 {
    font-size: 18px;
    color: #e40613;
    font-family: Arial;
}

.titel_report {
    font-size: 24px;
    color: #e40613;
    font-family: Arial;
    margin-top: 20px !important;
    padding-top: 10px;
}

.titolo_station {
    color: rgba(0, 0, 0, 0.64);
    font-weight: bold;
}


.tabby {
    border-bottom: 1px solid #e40613;
    padding-bottom: 8px;
}


.balkan_v2 {
    background: #e40613;
    background: -webkit-linear-gradient(right,#e40613, #e40613 );
    background: -moz-linear-gradient(right,#e40613, #e40613 );
    background: -ms-linear-gradient(right,#e40613, #e40613 );
    background: -o-linear-gradient(right,#e40613, #e40613 );
    background: linear-gradient(to right,#e40613, #e40613 );
    border-collapse: collapse;
    font-weight: normal;
    color: white;
    font-size: 18px;
    padding-left: 16px;
    font-family: Arial;
}

.tab_object {
    width: 225px;
    max-width: 225px;
    min-width: 225px;
}

.td_icon_normal {
    width: 32px;
    max-width: 32px;
    min-width: 32px;
}

.td_icon_text_v4 {
    white-space: nowrap;
}

.td_icon_text_v3 {
    width: 146px;
    max-width: 146px;
    /*min-width: 146px;*/
}

.td_left {
    width: 453px;
    max-width: 453px;
    min-width: 453px;
}

.td_right {
    width: 247px;
    max-width: 247px;
    min-width: 247px;
}

.main_table {
    width: 700px;
    max-width: 700px;
    min-width: 700px;
}


: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;
}
.items {
    column-count: 2; /* dividi in 2 colonne */
    column-gap: 20px; /* spazio tra le colonne */
}

    .items > div {
        break-inside: avoid; /* evita che una card venga spezzata a metà */
        margin-bottom: 10px; /* spazio verticale tra gli elementi */
    }
.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-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-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-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-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-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");
}

.legend
.slope-type-701-288,
.slope-type-382-419 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 3px;
}

.legend
.slope-type-701-320,
.slope-type-382-417 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 3px;
}

.legend
.slope-type-701-326,
.slope-type-382-422 {
    width: 22px;
    height: 22px;
    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;
}

.slope-type-391-128::after {
 content: '';
  display: block;
  width: 19px;
  height: 19px;
  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");
}

/* Piste: stile con bordo grigio + anellino interno scuro */
.slope-type-701-288, /* rosso */
.slope-type-382-419,
.slope-type-701-320, /* blu */
.slope-type-382-417,
.slope-type-701-326, /* nero */
.slope-type-382-422,
.slope-icon {
    border-radius: 50% !important;
    /* bordo esterno grigio */
    border: 2px solid #666 !important;
    /* anellino interno scuro */
    box-shadow: inset 0 0 0 1px #222 !important;
    box-sizing: border-box !important;
}


@media print {
    /* forza i colori di sfondo e dei bordi in stampa */
    * {
        -webkit-print-color-adjust: exact !important; /* Chrome / Edge */
        print-color-adjust: exact !important; /* CSS standard */
        color-adjust: exact !important; /* Firefox */
    }

    /* contenitore a due colonne */
    .items {
        -webkit-column-count: 2;
        column-count: 2;
        -webkit-column-gap: 20px;
        column-gap: 20px;
    }

        /* ogni riga rimane orizzontale */
        .items > div {
            display: flex !important;
            align-items: center;
            gap: 3px;
            break-inside: avoid;
            page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            margin-bottom: 6px;
        }

            /* gli elementi dentro la riga non vanno a capo */
            .items > div > img,
            .items > div > .type-icon,
            .items > div > span {
                display: inline-block;
                vertical-align: middle;
            }

            /* dimensioni consistenti delle icone */
            .items > div > img {
                width: 30px;
                height: 30px;
            }

            .items > div > .type-icon {
                width: 25px;
                height: 25px;
            }

    /* pallini piste: mantieni il colore + bordo grigio + anellino scuro */
    .slope-type-701-288, /* rosso */
    .slope-type-382-419,
    .slope-type-701-320, /* blu */
    .slope-type-382-417,
    .slope-type-701-326, /* nero */
    .slope-type-382-422,
    .slope-icon {
        border-radius: 50% !important;
        border: 2px solid #666 !important; /* bordo grigio */
        box-shadow: inset 0 0 0 1px #222 !important; /* anellino scuro */
        box-sizing: border-box !important;
    }
}

@media print {
    html, body {
        font-size: 90%;
    }

    .items {
        column-gap: 11px;
    }

        .items > div {
            margin-bottom: 2px;
        }
}

/* === Compattazione bilanciata (schermo + stampa) === */

/* torna quasi al font base */
html, body {
    font-size: 98%;
    line-height: 1.2;
}

/* box e separatori un filo più comodi */
.report-box {
    padding: 8px;
    margin-bottom: 8px;
}

hr {
    margin: 4px 0;
}

/* colonne elenco un po' più distanti */
.items {
    column-gap: 16px;
}
    /* prima 12px */

    /* righe elenco: leggermente più spazio */
    .items > div {
        gap: 3px; /* prima 2px */
        margin-bottom: 5px; /* prima 3px (o 10px in origine) */
    }

        /* testo delle righe */
        .items > div > span {
            line-height: 1.2;
        }

    /* icone: via di mezzo */
    .items img {
        width: 28px;
        height: 28px;
    }
    /* tra 30 e 26 */
    .items > div > .type-icon,
    .slope-icon {
        width: 24px;
        height: 24px;
    }
/* tra 25 e 22 */

/* legenda un pelo più grande rispetto alla versione “stretta” */
.legend img,
.legend .slope-icon {
    width: 20px;
    height: 20px;
    margin: 0 5px;
}

/* colonna destra (meteo/webcam) un po’ più ariosa */
.weather {
    justify-content: space-between;
}

.weather-box {
    width: 72px;
}

    .weather-box img {
        width: 52px;
        height: 52px;
    }

/* margini nel layout masonry */
.masonry-grid .colspan-2 {
    margin-bottom: 10px;
}

/* footer leggibile ma compatto */
footer {
    margin: 12px 0 8px;
    font-size: 90%;
}



@media print {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        font-family: Arial !important;
        font-size: 12px !important;
        color: black !important;
    }

    .main_table {
        width: 700px !important;
        max-width: 700px !important;
        min-width: 700px !important;
    }

    .td_left {
        width: 64.7% !important; /* 453 / (453+247) */
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .td_right {
        width: 35.3% !important; /* 247 / (453+247) */
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .items > div {
        gap: 0px !important;
        margin-bottom: 0px !important;
    }

}
