@font-face {
  font-family: Brandon-Regular;
  src: url(./Fonts/BrandonGrotesque-Regular.otf) format("opentype");
}



:root {
  --root-background: lightgray;
  --body-background: white;
  --side-padding: 0.5rem;
  --side-margin: 0.5rem;
  --gap-size: 0.5rem;
  font-size: 1vw;
  box-sizing: border-box;
  background-color: var(--root-background);
}

body {
  font-family:  Brandon-Regular, Arial, sans-serif;
  background-color: var(--body-background);
  line-height: 1;
  max-width: 50%;
  min-height: 98vh;
  margin: auto;
  margin-top: 1vh;
  margin-bottom: 1vh;
}

.container {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: 10px;
    margin-right: 10px;

}

.fw-row {
    margin-left: calc(-1*var(--side-padding));
    margin-right: calc(-1*var(--side-padding));
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

.side-pad {
    padding-left: var(--side-padding);
    padding-right: var(--side-padding);
}

.cursive {
    font-style: italic;
}

.side-margin {
    margin-left: var(--side-margin);
    margin-right: var(--side-margin);
}

.col {
    float: left;
    width: 100%;
}

.col-2 {
    column-count: 2;
}

.col-3 {
    column-count: 3;
    max-width: 80%;
    min-height: 8vw;
}

.col-4 {
    column-count: 4;
}

.gap-row {
   margin-right: calc(-1*var(--gap-size))
}

.gap-row .col {
    box-sizing: border-box;
    border-right: var(--gap-size) solid var(--body-background);
}

.left-gap {
    box-sizing: border-box;
    border-left: var(--gap-size) solid var(--body-background);
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.right {
    float: right;
}

.marg-t-10 {
    margin-top: 10px;
}

.marg-b-10 {
    margin-bottom: 10px;
}

.space-betw {
    justify-content: space-between;
}

summary {
    list-style: none;
    align-items: center;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  .arrow, .sub-arrow {
    transition: transform 0.3s;
  }

  details[open] .expand {
    display: none;
  }

  details[open] .arrow {
    display: block;
    transform: rotate(180deg);
  }

  details[open] details[open] .sub-arrow {
    display: block;
    transform: rotate(180deg);
  }


.col.l1{width:8.33333%}.col.l2{width:16.66666%}.col.l3{width:24.99999%}.col.l4{width:33.33333%}
.col.l5{width:41.66666%}.col.l6{width:49.99999%}.col.l7{width:58.33333%}.col.l8{width:66.66666%}
.col.l9{width:74.99999%}.col.l10{width:83.33333%}.col.l11{width:91.66666%}.col.l12{width:99.99999%}
.col.l20{width:19.99999%}
.col.l1-7{width:14.25%}.col.l2-7{width:28.57%}.col.l3-7{width:42.85%}.col.l4-7{width:57.14%}
.col.l5-7{width:71.42%}.col.l6-7{width:85.71%}.col.l7-7{width:99.99%}


.container:after,.container:before,
.row:after,.row:before {
    content:"";
    display:table;
    clear:both;
}

h1 {
    font-size: 2.8rem;
    margin: 0;
}

h2 {
    font-size: 1.5rem;
    margin: 0;
}

h3 {
    font-size: 1rem;
    margin: 0;
}

p {
    font-size: 1rem;
    margin: 0;
}

.bold {
    font-weight: bold;
}

.heading-logo-img {
    width: 150%;
    margin-left: -25%;
}

.heading-weather {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.heading-weather-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.heading-weather-item-img {
    width: 50%;
    margin: auto;
}

.heading-weather-item-date {
    font-weight: bold;
    font-size: 0.8rem;
}

.heading-weather-item-temp {
    font-size: 0.8rem;
}

.map img {
    width: 100%;
}

.heading-text {
    position: absolute;
    top: 20px;
    right: 25vw;
}

.heading-text h1 {
    font-size: 1.5rem;
    color:white;
    margin-right: 20px;

}

.heading-text h2 {
    font-size: 1rem;
    color:#0B71B4;
    padding-left: 5px;
    padding-top: 5px;
}

.heading-text span {
    font-size: 0.8rem;
    padding-left: 5px;
    padding-bottom: 5px;
}

.heading-text-container {
    background-color: white;
    display: flex;
}

#print-icon {
    height: 1.5vw;
    width: auto;
    margin-left: 15px;
    padding-top: 5px;
}

.heading-info p {
    font-size: 0.8rem;
}

.location-heading {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #0B71B4;
    margin-top: 10px;
}

.location-heading-add {
    display: flex;
    justify-content: start;
    border-bottom: 1px solid #0B71B4;
    margin-top: 10px;
    margin-bottom: 10px;
}

.location-heading a {
    display: flex;
    text-decoration: none;
    color: black;
}

.location-heading-left {
    display: flex;
}

.location-heading-right {
    margin-left: auto;
    display: flex;
}

.arrow-icon {
    height: 1.2rem;
    margin-left: 10px;
}

.cam-icon {
    height: 0.7rem;
    margin-right: 10px;
    margin-top: 5px;
}

.map-icon {
    height: 1rem;
    margin-right: 10px;
    margin-left: 30px;
}

.location-items {
    display: flex;
    flex-direction: row;
}

.location-item {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 10px;
}

.l4-7 .location-item {
    width: 25%;
}

.l3-7 .location-item {
    width: 33%;
}

.location-item-icon {
    width: 50%;
    margin: auto;
    margin-top: 7px;
    margin-bottom: 7px;

}

.lone-icon {
    width: 35%;
}


.location-item-top {
    font-size: 1rem;
}

.location-item-heading {
    font-weight: bold;
    font-size: 0.8rem;
}

.location-item-text {
    font-size: 0.6rem;
}

.footer {
    display: flex;
    flex-direction: row-reverse;
    padding: 10px;
    font-size: 0.8rem;
}

.footer a {
    color:#0B71B4;
}


.sub-logo img {
    width: 80%;
    margin: auto;
}

.sub-info-container {
    width: 100%;
    justify-content: space-between;
    gap: 5px;
    margin-top: 10px;
}

.sub-info-container span{
    font-size: 1rem;
}

.sub-info-container p{
    font-size: 0.8rem;
}

.sub-info-container h3{
    font-size: 1rem;
    color: #0B71B4;
}

.sub-header-container {
    margin-left: 10px;
}

.sub-header-container h2{
    color: #0B71B4;
    width: 100%;
    border-bottom: 1px solid #cccccc;
}

.last-act {
    line-height: 2;
    font-size: 0.8rem;
}

.back-link a {
    display: flex;
    flex-direction: row;
    text-decoration: none;
    color: black;
}

.back-link a h2{
    color: black;
    border: none;
}

.back-link img {
    margin-right: 10px;
    margin-top: 5px;
}

.sub-icon {
    width: 50px;
    margin-right: 10px;
}

.sub-weather {
    justify-content: space-between;
}

.sub-weather-item img{
    width: 60px;
    height: auto;
}

.sub-temp {
    font-size: 1.2rem;
}

.sub-text {
    font-size: 0.6rem;
}

.sub-side-info {
    margin-left: auto;

}

.sub-side-info-item {
    font-size: 0.7rem;
    margin: 5px;
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.sub-info-small {
    font-size: 0.6rem;
}

.sub-heading {
    font-size: 1.5rem;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    color:#0B71B4;
    width: calc(100%-20px);
    border-bottom: 1px solid #0B71B4;
}

.alert {
    background-color: rgb(168, 2, 2);
    color: white;
    text-align: center;
    padding: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.sub-item-icon {
    width: 3.5vw;
    margin: 10px;
}

.sub-section-left {
    display: flex;
    align-items: center;
}

.sub-section-right {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.list {
    margin-left: 10px;
}

.list-heading {
    border-bottom: 1px solid #0B71B4;
}

.list-heading-info {
    font-size: 0.8rem;
    margin-left: 20px;
    min-width: 60%;
}

.list-item {
    display: flex;
    margin-bottom: 15px;
    line-height: 1.5;
    break-inside: avoid;
}

.list-icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.side-item {
    position: absolute;
    right: 28%;
    display: flex;
    flex-direction: column;
    text-align: center;

}

.put-right {
    margin-left: auto;
}

.loipe {
    margin: 10px;
    margin-right: 50px;
}

.loipen-list h3{
    text-decoration: underline;
    text-decoration-color:#0B71B4;
    margin-left: 10px;
}

.sub-text-info {
    position: relative;
    color:red;
    left: 70px;
    bottom: 15px;
    font-size: 0.8rem;
    display: flex;
    height: 1rem;
    max-width: 80%;

}

.side-item-icon {
    width: 50%;
    margin: auto;
    margin-top: 7px;
    margin-bottom: 7px;

}

@media screen and (max-width: 1800px) {
   :root {
    font-size: 1.5vw;
  }

  body {
     max-width: 75%;
   }

   .heading-text {
    right: 12.5vw;
   }

   #print-icon {
    height: 2.5vw;
    }

    .side-item {
        right: 18%;
    }

}

@media screen and (max-width: 1200px) {
    :root {
        font-size: 2vw;
      }

    body {
        max-width: 100%;
        min-height: 100vh;
        margin-top: 0;
        margin-bottom: 0;
    }


    .col.m1{width:8.33333%}.col.m2{width:16.66666%}.col.m3{width:24.99999%}.col.m4{width:33.33333%}
    .col.m5{width:41.66666%}.col.m6{width:49.99999%}.col.m7{width:58.33333%}.col.m8{width:66.66666%}
    .col.m9{width:74.99999%}.col.m10{width:83.33333%}.col.m11{width:91.66666%}.col.m12{width:99.99999%}
    .col.m1-7{width:14.25%}.col.m2-7{width:28.57%}.col.m3-7{width:42.85%}.col.m4-7{width:57.14%}
    .col.m5-7{width:71.42%}.col.m6-7{width:85.71%}.col.m7-7{width:99.99%}

    .heading-text {
        right: 0vw;
       }

       #print-icon {
        height: 3vw;
        margin-top: 5px;
        }


    .side-item {
        right: 7%;
    }


}

@media screen and (max-width: 600px) {
    :root {
        font-size: 4vw;
    }

    .container {
        padding: 5px;
    }

    .col.s1{width:8.33333%}.col.s2{width:16.66666%}.col.s3{width:24.99999%}.col.s4{width:33.33333%}
    .col.s5{width:41.66666%}.col.s6{width:49.99999%}.col.s7{width:58.33333%}.col.s8{width:66.66666%}
    .col.s9{width:74.99999%}.col.s10{width:83.33333%}.col.s11{width:91.66666%}.col.s12{width:99.99999%}
    .col.s1-7{width:14.25%}.col.s2-7{width:28.57%}.col.s3-7{width:42.85%}.col.s4-7{width:57.14%}
    .col.s5-7{width:71.42%}.col.s6-7{width:85.71%}.col.s7-7{width:99.99%}


    .header {
        display: flex;
        flex-direction: column-reverse;
    }

    .sub-header {
        margin-top: -60px;
    }

    .heading-text {
        top: 5px;
    }

    .heading-text h1 {
        font-size: 1rem;
        margin-right: 10px;

    }

    .heading-text h2 {
        font-size: 0.7rem;
        color:#0B71B4;
        padding-left: 5px;
        padding-top: 5px;
    }

    .heading-text span {
        font-size: 0.5rem;
        padding-left: 5px;
        padding-bottom: 5px;
    }

    .heading-weather {
        flex-direction: row;
        margin-bottom: 5px;
    }

    #print-icon {
        height: 4vw;
        margin-top: 5px;
        }

    .l3-7 .location-item-icon {
    width: 38%;
    margin: auto;
    margin-top: 7px;
    margin-bottom: 7px;
}

.map-icon {
    margin-left: 10px;
}

.sub-logo img {
    position: relative;
    top: 50px;
    width: 100px;
    float: right;
}

.col-2 {
    column-count: 1;
}

.col-3 {
    column-count: 1;
    min-height: unset;
}

.col-4 {
    column-count: 1;
}

.side-item {
    right: 5%;
    margin-top: 40px;
}

.sub-item-icon {
    width: 6vw;
    margin: 10px;
}

.sub-section-right {
    margin-right: 0;
    font-size: 0.8rem;
}

.sub-text-info {
    max-width: 300px;
    bottom: 14px;
}

.cam-icon {
    margin-top: 3px;
}

.sub-header-container {
    margin-top: 10px;
}

.sub-header-container h2{
    margin-top: 25px;
}

div.sub-weather-text p{
    font-size: 0.8rem;
}

.row {
    margin: 0;
}

.sub-header-container {
    margin-left: 0;
}
}

@media print {
    :root {
     font-size: 3mm;
   }

     body {
         max-width: 100%;
         width: 100%;
        min-height: 100vh;
         margin-top: 0;
        margin-bottom: 0;
       }

    .printlink {
        display: none;
    }

    .break-after {
        page-break-after: always;
        break-after: page;
    }

    .column-break {
        break-before:unset;
    }

 }