@import url("https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #fdfdfd;
  font-family: "Nunito", sans-serif;
  font-size: 0.875rem;
  position: relative;
}

main {
  max-width: 900px;
  margin: auto;
  padding: 0.5rem;
  text-align: center;
}
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul {
  list-style: none;
  display: flex;
}

li {
  margin-right: 1rem;
}

/*h1 {*/
/*  color: #e74c3c;*/
/*  margin-bottom: 0.5rem;*/
/*}*/

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  margin: auto;
  padding: 1rem 0;
}
.card {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 15rem auto;
  height: 15rem;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  margin: auto;
  overflow: hidden;
}

.card--avatar {
  width: 100%;
  height: 10rem;
  object-fit: cover;
}

.card--title {
  color: #222;
  font-weight: 700;
  text-transform: capitalize;
  font-size: 1.1rem;
  margin-top: 0.5rem;
}

.card--link {
  text-decoration: none;
  background: #db4938;
  color: #fff;
  padding: 0.3rem 1rem;
  border-radius: 20px;
}

/*Global app colors*/
  :root {
    --color-blue-dark: #163E71;
    --color-blue-main: #0186D3;
    --color-blue-light: #60DFFF;
    --color-white: #FFFFFF;
    --color-gray-light: #A7B8CC;
    --color-gray-dark: #506991;
    --color-orange: #FFCE53;
    --color-green: #44D258;
    --color-red: #EE5955;
    --color-black-transparent: #00000025;
  }
  
  body {
    color: var(--color-white);
  }
  
  h1 {
    font-size: 1.375rem;
    color: var(--color-white);
  }
  
  /* Abschnitts-Überschriften All-Caps Big Color:Gray */
  h2 {
    font-size: 1rem;
    color: var(--color-gray-light);
    text-transform: uppercase;
    font-weight: 400;
  }
  
  h3 {
    font-size: 1.375rem;
    color: var(--color-white);
  }
  
  /* ALL-Caps Small*/
  h4 {
     font-size: 0.75rem;
     text-transform: uppercase;
     font-weight: 400;
  }
  
  /*paragraph styles*/
  .pLarge {
    font-size: 1.375rem;
  }
  
  .btn {
    background: transparent;
    border: none;
  }
  .btn.btnImage {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .btn.btnImageText {
    display: flex;
    align-items: center;
    gap: 1.5rem;
  }
  
  .topnavigation {
    background: var(--color-blue-dark);
    height: auto;
    width: 100%;
    position: fixed;
    display: none;
    justify-content: space-between;
    padding: 1rem;
    align-items: center;
    z-index: 2;
  }
  .topnavigation > a > img {
    width: 1.5rem;
  }
  .topnavigation > div > a > img {
    width: 1.5rem;
  }
  .topnavigation > div > a > div > img {
    width: 1.5rem;
  }
  .topnavigation > div > div> a > img {
    width: 1.5rem;
  }
  .topnavigation > div > div > a > div > img {
    width: 1.5rem;
  }
  .topnavigation > button > img {
    width: 1.5rem;
  }
  .topnavigation > div > button > img {
    width: 1.5rem;
  }
  .topnavigation > div > button > div > img {
    width: 1.5rem;
  }
  
  .topnavigationIconWrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
  
  .topnavigationInboxWrapper {
    position: relative;
    margin-right: 0.625rem;
  }
  
  .topnavigationInboxBadge {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-orange);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: -0.625rem;
    margin-right: -0.625rem;
  }
  
  .appView{
      width:100%; 
      display:none;
      position: relative;
      z-index: 1;
  }
  
  #scrollContainer {
    background-image: url("../images/background/background.jpg");
    background-size: cover;
  }
  
  .background-image {
    position: fixed;
    width: 110%;
    height: 100%;
    background-image: url("../images/background/background.jpg");
    background-size: cover;
    filter: blur(10px);
    z-index: 0;
  }
  
  
  #addResortButton{
      z-index:20000; 
      height: 3.5rem;
      width: 3.5rem;
      border-radius: 50%;
      position:fixed; 
      bottom: 1rem; 
      right: 1rem; 
      background: var(--color-blue-main);
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.2);
  }
  #addResortButton > img {
      width: 1.5rem;
  }
  
  #footer{
      background: #3b679e; /* Old browsers */
      width:100%; 
      bottom: 0; 
      position:fixed; 
      display:none;
      z-index: 2;
  }
  
  /*Checkbox edit ResortElement  */
  .checkbox {
    margin: 0.5rem;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    position: relative;
  }
  
  .checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
  }
  
  .checkbox .checkmark {
    display: block;
    width: 100%;
    height: 100%;
    border: 4px solid #718FB1;
    border-radius: 4px;
    position: relative;
  }
  
  .checkbox input[type="checkbox"]:checked + .checkmark::after {
    content: url("../images/icon/checkboxIcon.svg");
    background-color: #60DFFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .checkbox .checkmark::after {
    border-radius: 4px;
    width: 1.5rem;
    height: 1.5rem;
  }
  
  /* ToggleColors */
  .mt-ios {
    font-size:0.5rem;
  }
  .mt-ios label {
    background: #6983A4 !important;
    box-shadow: inset 0 0 0 0 #0682E6,0 0 0 .1875em #6983A4 !important;
  }
  .mt-ios input:checked+label {
    box-shadow: inset 0 0 0 1.5em #0682E6,0 0 0 .1875em #0682E6 !important;
  }
  
  .mt-android {
    font-size:0.625rem;
  }
  .mt-android label {
    background-image: linear-gradient(90deg,#6983A4 0,#6983A4 50%,#3979A7 0,#3979A7) !important;
  }
  .mt-android label:before {
    background: #B9B9B9 !important;
  }
  .mt-android input:checked+label:before {
    background: #5EDBF9 !important;
  }
  
  /* welcomeOverlay */
  .pushPermissionOverlayWrapper,
  .welcomeOverlayWrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30000;
    background: #00000085;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-image: url('/images/background/background.jpg');
    background-size: cover; /* or contain, or specific size */
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    flex-direction: column;
  }
  
  /*.pushPermissionOverlayContent,
  .welcomeOverlayContent {
    background: white;
    width: 100%;
    height: 100%;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
    padding: 2.5rem 1rem 2.5rem 1rem;
  }
  
  .pushPermissionOverlayContentUpper,
  .welcomeOverlayContentUpper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .pushPermissionOverlayContentLower,
  .welcomeOverlayContentLower {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 1;
  }*/
  
 
  
  .pushPermissionOverlayAcceptPrimary,
  .welcomeOverlayAcceptPrimary {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: var(--color-white);
    border: none;
    border-radius: 8rem; 
    color: var(--color-blue-main); 
    padding: 1.25rem 2rem 1.25rem 2rem;
    font-weight: 600;
    text-decoration: none;
  }
  
  .pushPermissionOverlayAcceptSecondary,
  .welcomeOverlayAcceptSecondary {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: transparent;
    border: none;
    border-radius: 8rem; 
    color: var(--color-blue-light); 
    padding: 1.25rem;
    font-size: 1.25rem;
    font-weight: 600;
    text-decoration: none;
  }
  
  .pushPermissionOverlayHeadlineWrapper,
  .welcomeOverlayHeadlineWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  
  .pushPermissionOverlaySwiper,
  .welcomeOverlaySwiper {
    width: 100%;
    flex: 1;
    --swiper-pagination-color: var(--color-white); 
    --swiper-pagination-bullet-inactive-color: var(--color-white); 
    --swiper-pagination-bullet-inactive-opacity: 0.5;
  }
  
  .pushPermissionOverlaySwiper swiper-slide,
  .welcomeOverlaySwiper swiper-slide {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 2rem 0rem 4rem 0rem;
  }
  
  .pushPermissionOverlayAnimationWrapper,
  .welcomeOverlayAnimationWrapper {
    flex-shrink: 1;
    max-width: 100%;
    display: flex; 
    flex-direction: column; 
 
    align-items: center;
  }
  
  .pushPermissionOverlayTextWrapper,
  .welcomeOverlayTextWrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
 
    align-items: center;
    text-align: center;
    padding: 0rem 1rem 0rem 1rem;
  }
  
  /* sortGroup */
  .editResortNavigationWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  #sortablelist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0.5rem 0rem 0.5rem;
  }
  
  .sortGroupElement {
      padding: 1rem;
      background: var(--color-black-transparent);
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  .sortGroupElement > img {
    height: 1.5rem;
  }
  
  .editResortSortHandle {
    padding: 0.5rem; 
  }
      
  /*.sortGroupElementHighlight{*/
  /*    background: orange;*/
  /*}*/
  
  .editResortNameWrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .editResortNameWrapper > img {
    width: 1.5rem;
    height: 1.5rem;
  }
  
  /* skiikgAreaOverview */
  .overviewSwiperThumbs swiper-slide {
    background: var(--color-blue-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    position: relative;
  }
  
  .overviewSwiperThumbs swiper-slide > p {
    font-weight: 600;
    color: var(--color-gray-light);
  }
  
  .overviewSwiperThumbs .swiper-slide-thumb-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-white);
  }
  
  .overviewSwiperThumbs .swiper-slide-thumb-active > p {
    font-weight: 600;
    color: var(--color-white);
  }
  
  .snowDistributionSwiperThumbs swiper-slide {
    background: var(--color-blue-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    position: relative;
    opacity: 0.5;
  }
  
  .snowDistributionSwiperThumbs .swiper-slide-thumb-active {
    background: var(--color-white);
    opacity: 1;
  }
  
  .snowDistributionSwiperThumbs .swiper-slide-thumb-active > p {
    color: var(--color-blue-main);
    font-weight: 600;
  }
  
  .snowDistributionSwiperThumbs .swiper-slide-thumb-active > img {
    display: none;
  }
  
  .skiingAreaOverviewTopNavigationBase {
    flex-direction: column;
    align-items: stretch;
    padding: 0rem;
  }
  
  .skiingAreaOverviewTopNavigationTopWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
  }
  
  .skiingAreaOverviewProButton {
    width: 100%; 
    padding: 0.75rem 0rem 0.75rem 0rem; 
    background: var(--color-gray-dark);
    color: var(--color-white);
    text-transform: uppercase;
    font-weight: 600;
    border: none;
    border-radius: 0.25rem;
  }
  
  .skiingAreaOverviewContainer {
      background: var(--color-black-transparent);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 1rem;
      gap: 1rem;
      margin-top: 0.5rem;
  }
  
  .skiingAreaOverviewAdditionalInfoWrapper {
    display: flex;
    gap: 2.5rem;
  }
  
  .skiingAreaOverviewAdditionalInfo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    justify-content: space-between;
    align-items: center;
  }
  .skiingAreaOverviewAdditionalInfo > img {
    height: 2rem;
  }
  
  .skiingAreaSnowAlertWrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .skiingAreaInformationWrapper {
    width: 100%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
  }
  
  .skiingAreaNameWrapper{
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .skiingAreaNameWrapper > img {
    width: 1.25rem;
    height: 1.25rem;
  }
  
  .skiingAreaOpenStatusWrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .skiingAreaOpenStatusWrapper > img {
    width: 0.5rem;
    height: 0.5rem;
  }
  
  /* SliderElement */
  .rotate-animation {
    animation: rotate 0.8s linear;
  }
  
  @keyframes rotate {
      from {
          transform: rotate(0deg);
      }
      to {
          transform: rotate(360deg);
      }
  }
  
  .skiingAreaSliderGroupWrapper {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-gray-light);
  }
  
  .skiingAreaSliderMainWrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  
  .skiingAreaSliderSnowWrapper {
    
  }
  
  .skiingAreaSliderImageTextWrapper {
    display: flex; 
    align-items: center; 
    gap: 0.5rem;
  }
  .skiingAreaSliderImageTextWrapper > img {
    height: 1.5rem;
  }
  
  .skiingAreaSliderVerticalItemWrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .skiingAreaSliderButton {
    background-color: var(--color-black-transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
  }
  .skiingAreaSliderButton > img {
    width: 2rem;
  }
  
  .skiingAreaSliderButtonCaptionWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    flex-grow: 1;
    flex-basis: 0;
  }
  
  .skiingAreaSliderWebcamSwiperWrapper {
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1.5rem 0 1.5rem;
    flex-wrap: wrap;
  }

  .skiingAreaSliderWebcamSwiperWrapper #webcamSwiper {
    margin: 0 0 3rem 0;
  }

  .skiingAreaSliderWebcamSwiperWrapper .ctarow {
    flex: 0 0 100%;
    display: flex;
    z-index: 1;
    padding: 10px 0;
    gap: 10px;
    align-items: center;
    text-decoration: none;
    color: #fff;
  }
  
  .skiingAreaSliderWebcamSwiperWrapper .ctaimg {
    flex: 0 0 4rem;
    display: flex;
  }
  .skiingAreaSliderWebcamSwiperWrapper .ctaimg img {
    width: 100%;
    height: auto;
  }

  .skiingAreaSliderWebcamSwiperWrapper .ctatext {
    font-size: 0.8rem;
    line-height: 1.2;
  }
  
  .skiingAreaSliderWebcamSwiperWrapperBackground {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .skiingAreaSliderWebcamSwiperWrapperBackground > img {
    width: 100%;
    height: 100%;
  }


  
  .skiingAreaWebcamPlayButtonPulse {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
      0% {
          transform: scale(1);
      }
      50% {
          transform: scale(1.1);
      }
      100% {
          transform: scale(1);
      }
  }

  /* webcam fixes */
  .webcamSwiperFullscreenWrapper > div {
    max-height: 100%;
  }
  .webcamSwiperFullscreenWrapper .content-container {
    max-height: 100%;
    display: flex;
  }

  .webcamSwiperFullscreenWrapper .content-container img {
    aspect-ratio: auto!important;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: 100%;
  }

  /* Maximum aspect ratio */
  @media (max-aspect-ratio: 16/10) {
    .webcamSwiperFullscreenWrapper .content-container {
      max-height: calc(100% - 12rem);
    }
    .webcamSwiperFullscreenWrapper .content-container.feratelPanomax {
      max-height: calc(100% - 12rem);
    }
  }
  /* end of webcam fixes */
  
  .skiingAreaSliderContactGrid {
    display: grid;
    grid-template-columns: 0.25fr 1fr;
    /*grid-template-rows: repeat(4, 1fr);*/
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }
  
  /* addResorts */
  
  .addResortResortButtonBig {
    background: var(--color-black-transparent);
    border-radius: 0.25rem;
    width: calc(100% - 1rem);
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1rem;
    border: none;
    color: var(--color-white);
    margin: 0.5rem 0.5rem 0.25rem 0.5rem;
  }
  .addResortResortButtonBig > img {
    width: 1.5rem;
  }
  
  .addResortResultWrapper {
    margin: 0.5rem 0rem 0.5rem 0rem;
    padding: 1rem;
  }
  
  .addResortResult {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .addResortResultTypeWrapper {
    margin: 0.5rem 0rem 0.5rem 0rem;
    padding: 1rem;
  }
  
  .addResortResultTopNavigationBase {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .addResortResultTopNavigationTopWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .addResortResultSearchField {
    width:100%;
    height: 3rem;
    padding: 0.5rem;
    padding-left: 2rem;
    background-image: url("../images/icon/search.svg");
    background-repeat: no-repeat;
    background-position: 0.5rem center;
    outline: 0;
    border: none;
    border-radius: 0.25rem;
  }
  
  /* settingsOverview */
  .settingsOverviewItemWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--color-black-transparent);
  }
  
  .settingsOverviewHeadingWrapper {
    padding: 1rem;
  }
  
  .settingsOverviewGroupWrapper {
    margin-bottom: 1rem;
  }
  
  .settingsOverviewNavigationWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  /* inboxOverview */
  .inboxOverviewNavigationWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .inboxOverviewItemWrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem 0.5rem 1rem;
  }
  
  .inboxOverviewNewEntryNotification {
    background: var(--color-blue-light);
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
  }
  
  .inboxOverviewReadEntryNotification {
    visibility: hidden;
  }
  
  .inboxOverviewImageWrapper {
    width: 4rem;
  }
  .inboxOverviewImageWrapper > img {
    width: 4rem;
  }
  
  .inboxOverviewTextWrapper {
    text-align:left;
    display: flex; 
    flex-direction: column; 
    gap: 0.2rem; 
    align-items: flex-start;
  }
  
  /* inboxDetail */
  
  /* skiingAreaWeather */
  .skiingAreaWeatherForecastWrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0rem 1rem 0rem;
  }
  
  .skiingAreaWeatherCollapser {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.5rem;
    background: transparent;
    border: none;
  }
  .skiingAreaWeatherCollapser > img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .skiingAreaWeatherCollapser > p {
    color: var(--color-gray-light);
  }
  
  .skiingAreaWeatherCollapsible {
    /*display: none;*/
    overflow: hidden;
    padding: 0.5rem 0rem 0.5rem 0rem;
  }
  
  .rotateWeatherCollapserIcon {
      transform: rotate(180deg);
      transition: transform 0.5s ease;
  }
  
  /* skiingAreaSkipass */
  .skiingAreaSkipassOuterWrapper {
    padding: 1rem 0.5rem 0rem 0.5rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem;
  }
  
  .skiingAreaSkipassContentWrapper {
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    padding: 1rem; 
    background: var(--color-black-transparent);
  }
  
  .skiingAreaSkipassPriceWrapper {
    display: flex; 
    gap: 0.5rem;
  }
  
  .skiingAreaSkipassPriceColumn {
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
    width: 50%;
  }
  
  .skiingAreaSkipassDetailButton {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0rem 0.5rem 0rem;
    background: transparent;
    border: none;
  }
  .skiingAreaSkipassDetailButton > img {
    width: 1.5rem;
    height: 1.5rem;
  }
  .skiingAreaSkipassDetailButton > p {
    color: var(--color-gray-light);
  }
  
  /* skiingAreaSkipassDetail */
  .skiingAreaSkipassDetailOuterWrapper {
    padding-top: 1rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem;
  }
  
  /* skiingAreaSlope */
  .skiingAreaSlopeOuterWrapper {
    padding: 1rem 1rem 0rem 1rem; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem;
  }
  
  .skiingAreaSlopeInnerWrapper {
    display: flex; 
    flex-direction: column; 
    gap: 1.5rem; 
    background: var(--color-black-transparent); 
    padding: 1rem;
  }
  
  /* settingsDetailDebug */
  .settingsDetailDebugGroup {
    display: flex; 
    flex-direction: column; 
    gap: 0.5rem; 
    align-items: flex-start;
  }
  
  .settingDetailDebugHeadings {
    font-weight: 600;
    font-size: 1rem;
  }
  
  .settingDetailDebugTextInput {
    padding: 0.5rem;
    border: 1px var(--color-gray-light) solid;
    border-radius: 0.25rem;
    background: var(--color-white);
    color: var(--color-blue-main);
    font-weight: 500;
  }
  .settingDetailDebugTextInput::placeholder {
    color: var(--color-gray-light);
  }
  
  .settingDetailDebugSelect {
    padding: 0.5rem;
    border: 1px var(--color-gray-light) solid;
    border-radius: 0.25rem;
    background: var(--color-white);
    color: var(--color-blue-main);
    font-weight: 500;
  }
  
  
  .settingDetailDebugButton {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: var(--color-blue-main);
    border: none;
    border-radius: 0.25rem; 
    color: var(--color-white); 
    padding: 0.75rem; 
    text-decoration: none; 
    text-transform: uppercase;
    font-weight: 500;
  }
  
  /* socialStream */
  .socialStreamElementWrapper {
    display: flex;
    flex-direction: column;
    background: var(--color-black-transparent);
    margin-top: 1rem;
  }
  .socialStreamElementWrapper > img {
    width: 100%;
    object-fit: cover;
  }
  
  .socialStreamElementTextWrapper {
    padding: 1rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .socialStreamElementLikeWrapper {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    /*width:50px; */
    /*margin-top:-50px; */
    /*background-color:white; */
    /*color:black;*/
  }
  
  #socialStreamCameraButton{
      z-index:20000; 
      height: 3.5rem;
      width: 3.5rem;
      border-radius: 50%;
      position:fixed; 
      bottom: 1rem; 
      right: 1rem; 
      background: var(--color-blue-main);
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 6px 6px rgba(0,0,0,0.2);
  }
  #socialStreamCameraButton > label > img {
      width: 1.5rem;
  }
  #socialStreamCameraButton > label {
      height: 1.5rem;
  }
  
  #socialStreamCameraFileInput {
    display: none;
  }
  
  .socialStreamPostImageTitle {
    background: transparent;
    border: none;
    color: var(--color-white);
    font-size: 0.875rem;
  }
  .socialStreamPostImageTitle::placeholder {
    color: var(--color-gray-light);
    font-size: 0.875rem;
  }
  .socialStreamPostImageTitle:focus {
    outline: none;
  }
  
  #socialStreamText {
    background: transparent;
    border: none;
    color: var(--color-white);
    height: auto;
    font-size: 0.875rem;
  }
  #socialStreamText[contentEditable="true"]:empty:before {
    content: attr(placeholder);
    color: var(--color-gray-light);
    font-size: 0.875rem;
  }
  #socialStreamText:focus {
    outline: none;
  }
  
  .socialStreamPostImageButton {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: var(--color-blue-main);
    border: none;
    border-radius: 0.25rem; 
    color: var(--color-white); 
    padding: 0.75rem; 
    text-decoration: none; 
    text-transform: uppercase;
    font-weight: 500;
    width: 100%;
  }
  
 .forecast-container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .forecast-left {
        display: flex;
        flex: 0 0 calc(50% - 10px);
        flex-direction: row;
        flex-wrap: wrap;
        background: #fff;
    }
    .forecast-video {
        display: flex;
        flex: 0 0 100%;
    }
    
    .forecast-legend {
        flex: 0 0 100%;
        /*margin-left: 20px;*/
        margin-top: 8px;
        padding: 3px 12px;
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .rain, .snow, .snow-ice {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex: 0 0 100%;
        justify-content: space-between;
    }
    .snow {
        margin-bottom: 10px;
        flex: 0 0 calc(50% - 5px);
    }
    .rain {
        margin-bottom: 10px;
        flex: 0 0 calc(50% - 5px);
    }
    .snow-ice {flex: 0 0 100%}
    
    .rain-low, .rain-high, .rain-highest {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0 8px;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
        height: 24px;
        align-items: center;
    }
    .rain-low {
        flex: 0 0 calc(40% - 10px);
        background: -moz-linear-gradient(left,#b7e1f3 0%,#7887fa 60%,#624af0 100%);
        background: -webkit-linear-gradient(left,#b7e1f3 0%,#7887fa 60%,#624af0 100%);
        background: linear-gradient(to right,#b7e1f3 0%,#7887fa 60%,#624af0 100%);
    }
   .rain-high {
        flex: 0 0 calc(40% - 10px);;
        background: -moz-linear-gradient(left,#f2ea38 0%,#ff8400 50%,#f60605 100%);
        background: -webkit-linear-gradient(left,#f2ea38 0%,#ff8400 50%,#f60605 100%);
        background: linear-gradient(to right,#f2ea38 0%,#ff8400 50%,#f60605 100%);
    }
    .rain-highest {
        flex: 0 0 20%;
        background: #000000;
        color: #ffffff;
        justify-content: center;
    }
    
    .rain .label, .snow .label {
        flex: 0 0 100%;
        font-size: 14px;
        font-weight: 500;
        color: #093554;
        margin-bottom: 4px;
    }
    .snow-low, .snow-deep {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0 8px;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 600;
        height: 24px;
        align-items: center;
    }
    .snow-low {
        flex: 0 0 calc(40% - 10px);
        background: -moz-linear-gradient(left,#f3b6cf 0%,#dc83b4 50%,#b14b8b 100%);
        background: -webkit-linear-gradient(left,#f3b6cf 0%,#dc83b4 50%,#b14b8b 100%);
        background: linear-gradient(to right,#f3b6cf 0%,#dc83b4 50%,#b14b8b 100%);
    }
    .snow-deep {
        flex: 0 0 60%;
        background: -moz-linear-gradient(left,#e30085 0%,#a40075 50%,#6a0064 100%);
        background: -webkit-linear-gradient(left,#e30085 0%,#a40075 50%,#6a0064 100%);
        background: linear-gradient(to right,#e30085 0%,#a40075 50%,#6a0064 100%);
        color: #fff;
    }
    
    .rain-snow-pattern, .rain-ice-pattern {
        font-size: 13px;
        font-weight: 600;
        padding: 0 10px;
        height: 24px;
        display: flex;
        align-items: center;
    }
    .rain-snow-pattern {
        flex: 0 0 100%;
        background: repeating-linear-gradient(45deg,#9291ea,#9291ea 2px,#bea2de 2px,#bea2de 4px);
        margin-bottom: 6px;
    }
    .rain-ice-pattern {
        flex: 0 0 100%;
        background: repeating-linear-gradient(45deg,#def1fd,#def1fd 2px,#b1d9f7 2px,#b1d9f7 4px);
        border: 1px solid rgb(0 102 153 / 50%);
    }
    
    .forecast-left h5, .forecast-right h5 {font-size: 1.5rem}
    
    
    
    
    .snowdepth-legend {
        display: flex;
        flex-direction: row;
        flex: 0 0 100%;
        padding: 3px 12px;
        margin-bottom: 10px;
    }
    
    .snowdepth {
        flex: 0 0 100%;
        margin-top: 8px;
    }
    
    .snowdepth .label {
        flex: 0 0 100%;
        font-size: 14px;
        font-weight: 500;
        color: #093554;
        margin-bottom: 4px;
    }
    
    .snowdepth .depth {
        flex: 0 0 100%;
        background: -moz-linear-gradient(left,rgb(255,255,255) 0%,rgb(170,224,247) 10%,rgb(128,209,244) 20%,rgb(0,162,232) 30%,rgb(0,80,160) 40%,rgb(139,0,139));
        background: -webkit-linear-gradient(left,rgb(255,255,255) 0%,rgb(170,224,247) 10%,rgb(128,209,244) 20%,rgb(0,162,232) 30%,rgb(0,80,160) 40%,rgb(139,0,139));
        background: linear-gradient(to right,rgb(255,255,255) 0%,rgb(170,224,247) 10%,rgb(128,209,244) 20%,rgb(0,162,232) 30%,rgb(0,80,160) 40%,rgb(139,0,139));
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 0 10px;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 600;
        height: 30px;
        align-items: center;
    }
    
    .snowmapswiper {
      width: 100%;
      border-top: 5px solid #1dc5e1;
    }