.hidden,
.hidden-element,
.hidden-page,
.display-none {
    display: none !important;
}
* {
    -webkit-touch-callout: none;
    /* user-select: none; */
    user-select: text;
    box-sizing: border-box;
}

html, body {
    background-color: #d8d9db;
    color: #111;
    font-family: Times, serif;
    -webkit-font-smoothing: antialiased;
    font-size: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    min-height: 100%;
    overflow: hidden; /* Prevent internal scroll */
    margin: 0;
    padding: 0;
}

#loadingmask {
    /* background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='90px' height='90px' viewBox='0 0 90 90' enable-background='new 0 0 90 90' xml:space='preserve'> <rect width='45' height='45'/> <rect y='45' fill='white' width='45' height='45'/> <rect x='45' fill='white' width='45' height='45'/> <rect x='45' y='45' width='45' height='45'/> </svg>");
    background-repeat: repeat;
  	background-size: 100%;
  	background-position: center center; */
  	background-color: #000;
  	height: 100%;
  	width: 100vw;
  	position: fixed;
  	top: 0;
  	bottom: 0;
  	margin: 0;
  	padding: 0;
  	z-index: 9300;
    opacity: 1;
}


#widget-wrap {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    background-color: #d8d9db;
    align-items: center;
}

#weather_widget {
    font-size: 100%;
    line-height: 100%;
    font-family: Times, serif;
    max-width: 100vw;
    margin: auto;
}

.outer {
    width: 100vw;
    height: 100vw;
    max-height: 600px;
    max-width: 600px;
    perspective: 600px;
    position: relative;
    padding: 1%;
    /* background: #ffffff; */
    /* box-shadow: 3px 3px 20px -4px rgba(0, 0, 0, 0.1); */
    /* border: 10px solid #fff; */
    /* border-radius: 6px; */
}

.time-header {
    background: rgb(0 0 0);
    border: 1px solid rgb(0 0 0);
    padding: 1% 3% 1% 2%;
    color: #ffffff;
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Roboto Mono', monospace;
    font-size: 86%;
    line-height: 60%;
    letter-spacing: 0.02em;
    box-shadow: 4px 4px 5px 0px rgb(0 0 0 / 5%);
    z-index: 9;
    display: table;
}

.time {
    padding: 0 0 0 4%;
}

.time-header > span {
    display: table-cell;
    vertical-align: middle;
}

.date-h {
    padding-left: 2px;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    /* cursor: pointer; */
    transform-style: preserve-3d;
    transform-origin: center right;
    transition: transform 0.3s;
    background-color: #fff;
    box-shadow: 0px 2px 11px -7px rgb(0 0 0 / 60%);
    border: 16px solid #fff;
    border-radius: 4%;
    /* border-image: url(border-image-sp.png) 10;
    border-image-repeat: repeat; */
}

.card.is-flipped {
    transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    /* border: 1px solid rgb(0 0 0 / 3%); */
    border-radius: 3%;
}




.bg-ch, .bg-br {
    /* box-shadow: 3px 3px 14px -4px rgba(0, 0, 0, 0.05); */
    box-shadow: 0px 2px 11px -7px rgb(0 0 0 / 60%);
    padding: 3%;
    position: absolute;
    width: 100%;
    height: 100%;
        top: 0;
        left: 0;
}

.bg-ch {
    background-color: rgb(163 101 12 / 5%);
}
.bg-br {
    background-color: rgb(229 153 43 / 3%);
    }

.bg-ch > img, .bg-br > img {
    position: absolute;
    top: 0;
    left: 0;
    /* border: 1px solid #dbdbdb5c;
    border-radius: 2%;
    box-shadow: 3px 3px 14px -4px rgba(0, 0, 0, 0.05);
    padding: 3%; */
}

.bg-image-map {
    max-width: 100%;
}

img.night-map {
z-index: 2;
    -webkit-filter: grayscale(0.71) saturate(1.49) sepia(0.1) brightness(0.72) contrast(2.21) invert(1) hue-rotate(191deg); filter: grayscale(0.71) saturate(1.49) sepia(0.1) brightness(0.72) contrast(2.21) invert(1) hue-rotate(191deg);
}

.card__face--front {
    background-image: url("map-sao-paulo-800-07d.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
}

.card__face--back {
    background-image: url("map-zurich-800-07.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000
}


div.is-flipped > div.card__face--front {
    z-index: 900;
}

.card__face--front,
.card__face--back {
    /* background: #f3f3f3; */
}

.card__face--back {
    transform: rotateY(180deg);
}

.cityname, .cityname-ch {
    font-size: 360%;
    position: absolute;
    top: 18%;
    left: 25%;
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 0px rgb(255 255 255 / 20%);
    z-index: 9;
}

.cityname-ch {
    top: 18%;
    left: 36%;
    }

.cityname-br {
    font-size: 300%;
    top: 18%;
    left: 16%;
    }

.m-ueber-meer-br, .m-ueber-meer-ch {
    position: absolute;
    bottom: 69%;
    right: 35%;
    font-size: 100%;
    letter-spacing: 0.01em;
    position: absolute;
    text-shadow: 1px 1px 0px rgb(255 255 255 / 40%);
    z-index: 9;
}
.m-ueber-meer-ch {
    bottom: 68%;
    right: 28%;
}

#text {
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    /* opacity: 0.9; */
    color: #000000;
    padding: 4px 6px 4px 8px;
    position: absolute;
    max-width: 164px;
    margin: 20px 0 0 0;
}

#icon {
    /* koennte man ein icon anzeigen entsprechend code  wolken regen etc.*/
}


/*------------------------ WIND ---------------------------*/

#wind-br, #wind-ch {
    position: absolute;
    width: 40%;
    height: 26%;
    top: 43%;
    left: 55%;
    z-index: 9;
}

#wind-ch {
    top: 44%;
    left: 57%;
}

#wind-ch > .wind-text,
#wind-br > .wind-text {
    margin: 0 0 0 10%;
}

.windspeed {
    font-size: 178%;
    letter-spacing: -0.02em;
    text-shadow: 1px 1px 2px rgb(255 255 255 / 42%);
    position: absolute;
    left: 23%;
    top: 24%;
}

.wind_speed-symbol {
    font-size: 80%;
    margin: 0 0 0 -1%;
}

#windrichtung-icon-br, #windrichtung-icon-ch {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='420px' height='420px' viewBox='0 0 420 420' enable-background='new 0 0 420 420' xml:space='preserve'> <path d='M229.809,385.974V108.229l70.363,70.175l27.641-27.644L210.209,33.159L92.603,150.761l27.641,27.644l70.364-70.175v277.744 H229.809z'/> </svg>");
    position: absolute;
    left: 13%;
    top: 38%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 24%;
    height: 45%;
    opacity: 1;
    animation: pulse2 2.5s ease-in-out infinite;
}

.wind-icon {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' class='wind-svg'><path d='M1 8H12.5556C13.2039 8 13.8256 7.73661 14.284 7.26777C14.7425 6.79892 15 6.16304 15 5.5C15 4.83696 14.7425 4.20107 14.284 3.73223C13.8256 3.26339 13.2039 3 12.5556 3H11.3333' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'></path><path d='M4 16H13.9048C14.4605 16 14.9934 16.2107 15.3863 16.5858C15.7793 16.9609 16 17.4696 16 18C16 18.5304 15.7793 19.0391 15.3863 19.4142C14.9934 19.7893 14.4605 20 13.9048 20H12.8571' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'></path><path d='M7 12H19.7302C20.3322 12 20.9095 11.7366 21.3352 11.2678C21.7609 10.7989 22 10.163 22 9.5C22 8.83696 21.7609 8.20107 21.3352 7.73223C20.9095 7.26339 20.3322 7 19.7302 7H18.5952' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'></path></svg>");
    position: absolute;
    left: 0;
    top: 14%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 18%;
    height: 40%;
    opacity: 1;
}

.wind-example {
    display: none;
}
#wind-comment-br, #wind-comment-ch {
    position: absolute;
    top: 72%;
    left: -16%;
    width: 112%;
    height: auto;
}
#wind-comment-ch {
    top: 73%;
    left: -3%;
}
.wind-title {
    font-size: 124%;
    line-height: 112%;
    font-style: italic;
    color: #000000;
    font-weight: 700;
    letter-spacing: 0.01em;
    display: block;
}


/*------------------------ UMIDADE ---------------------------*/

#umidade-outer-br, #umidade-outer-ch {
    position: absolute;
    left: 15%;
    bottom: 32%;
    width: 49%;
    height: 13%;
    z-index: 9;
}

#umidade-outer-ch {
    left: 13%;
    bottom: 30%;
    }

.umidade-icon {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' class='m-text-warmgrey-900 dark:m-text-blue-200'><path d='M17.1011 14.3715C17.1011 17.1981 14.8912 19.5 12.1505 19.5C9.40955 19.5 7.19995 17.1983 7.19995 14.3715C7.19995 13.3688 7.74273 11.8648 8.70211 9.91697C8.92167 9.47121 9.16035 9.0088 9.41526 8.53338C9.88761 7.65241 10.393 6.76805 10.8983 5.92252C11.2017 5.4148 11.4383 5.03196 11.5747 4.81675C11.8424 4.39442 12.4586 4.39442 12.7264 4.81675C12.8628 5.03196 13.0994 5.4148 13.4028 5.92252C13.9081 6.76805 14.4135 7.65241 14.8858 8.53338C15.1407 9.0088 15.3794 9.47121 15.599 9.91697C16.5584 11.8648 17.1011 13.3688 17.1011 14.3715Z' fill='currentColor'></path></svg>");
    content: "";
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 15%;
    height: 40%;
    opacity: 0.9;
    top: 52%;
    left: 2%;
}

.umidade-icon-small {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' class='m-text-warmgrey-900 dark:m-text-blue-200'><path d='M17.1011 14.3715C17.1011 17.1981 14.8912 19.5 12.1505 19.5C9.40955 19.5 7.19995 17.1983 7.19995 14.3715C7.19995 13.3688 7.74273 11.8648 8.70211 9.91697C8.92167 9.47121 9.16035 9.0088 9.41526 8.53338C9.88761 7.65241 10.393 6.76805 10.8983 5.92252C11.2017 5.4148 11.4383 5.03196 11.5747 4.81675C11.8424 4.39442 12.4586 4.39442 12.7264 4.81675C12.8628 5.03196 13.0994 5.4148 13.4028 5.92252C13.9081 6.76805 14.4135 7.65241 14.8858 8.53338C15.1407 9.0088 15.3794 9.47121 15.599 9.91697C16.5584 11.8648 17.1011 13.3688 17.1011 14.3715Z' fill='currentColor'></path></svg>");
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 10%;
    height: 10%;
    opacity: 0.9;
    top: 50%;
    left: 2%;
}


#umidade-value-outer-br, #umidade-value-outer-ch {
    position: absolute;
    left: 16%;
    top: 55%;
    font-size: 218%;
    font-weight: 900;
    letter-spacing: -0.02em;
    color: rgb(0 0 0 / 90%);
    text-shadow: 1px 1px 1px rgb(255 255 255 / 30%)
}

.umidade_symbol {
    font-size: 74% !important;
}




#temperatur-outer-br, #temperatur-outer-ch {
    position: absolute;
    left: 7%;
    top: 33%;
    width: 45%;
    height: 20%;
    z-index: 9;
}

#temperatur-outer-br .legende {
    font-size: 112%;
}

#temperatur-outer-ch {
    left: 9%;
    top: 33%;
    }

#temperatur-value-br, #temperatur-value-ch {
    position: absolute;
    left: 18%;
    top: 42%;
    font-size: 300%;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: rgb(0 0 0 / 95%);
    text-shadow: 1px 1px 1px rgb(255 255 255 / 30%);
}



.temperatur-text {
    position: absolute;
    top: -5%;
    left: 15%;
}

.legende {
    font-size: 120%;
    /* font-weight: 900; */
    letter-spacing: 0.01em;
    color: rgb(105 10 10);
    text-shadow: 1px 1px 1px rgb(222 222 222 / 36%);
}

.temperatur-icon {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='160px' height='330px' viewBox='0 0 160 330' enable-background='new 0 0 160 330' xml:space='preserve'><path d='M95.957,38.838c0-6.815-2.787-13.017-7.289-17.512c-4.494-4.494-10.689-7.288-17.505-7.288s-13.011,2.794-17.512,7.288 c-4.494,4.495-7.282,10.696-7.282,17.512v173.55c-17.179,8.811-28.93,26.693-28.93,47.324c0,29.359,23.796,53.154,53.154,53.154 c29.353,0,53.149-23.795,53.149-53.154c0-20.172-11.233-37.715-27.786-46.723V38.838z M122.062,61.816V50.308h29.985 c3.178,0,5.754,2.577,5.754,5.754s-2.576,5.754-5.754,5.754H122.062z M122.062,93.234V81.726h29.985 c3.178,0,5.754,2.576,5.754,5.754c0,3.178-2.576,5.754-5.754,5.754H122.062z M122.062,124.651v-11.509h29.985                                                    	c3.178,0,5.754,2.576,5.754,5.755c0,3.178-2.576,5.754-5.754,5.754H122.062z M122.062,156.068v-11.508h29.985                                                    	c3.178,0,5.754,2.576,5.754,5.754s-2.576,5.754-5.754,5.754H122.062z M122.062,187.486v-11.508h29.985                                                    	c3.178,0,5.754,2.576,5.754,5.754s-2.576,5.754-5.754,5.754H122.062z M108.654,202.408c18.521,12.326,30.727,33.387,30.727,57.305                                                    	c0,37.99-30.797,68.787-68.787,68.787c-37.996,0-68.793-30.797-68.793-68.787c0-24.404,12.71-45.834,31.865-58.047V38.838                                                    	c0-10.319,4.219-19.698,11.01-26.488c6.796-6.796,16.168-11.01,26.487-11.01c10.313,0,19.692,4.213,26.488,11.01                                                    	c6.79,6.79,11.003,16.169,11.003,26.488V202.408z'/>                                                    <path d='M81.412,222.139c16.328,4.693,28.271,19.736,28.271,37.574c0,21.59-17.498,39.09-39.09,39.09                                                    	c-21.59,0-39.096-17.5-39.096-39.09c0-17.832,11.949-32.881,28.271-37.574V45.596c0-13.445,21.643-12.915,21.643,0V222.139z'/> </svg>");

    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 14%;
    height: 74%;
    opacity: 0.8;
    position: absolute;
    left: 0;
    top: 7%;
}

.grad_symbol, .umidade_symbol {
    font-size: 70%;
    font-weight: 400;
    margin-left: -8px;
 }





.flip-city, .flip-city-ch {
    position: absolute;
    right: 4%;
    top: 4%;
    font-family: monospace !important;
    width: 74%;
    height: 74%;
    z-index: 15;
    cursor: pointer;
}

#zurich-flip, #sao-paulo-flip {
    position: absolute;
    right: 14%;
    top: 2%;
    font-size: 112%;
}

#sao-paulo-flip {
    right: 14%;
    top: 2%;
 }

.previsao-wrap {
    position: absolute;
    bottom: 9%;
    right: 0%;
    font-family: monospace;
    font-size: 76%;
    line-height: 120%;
    width: 16%;
    text-align: right;
    padding: 0 0% 0 0;
    /* border-bottom: 1px solid #000000; */
}
#prev-ch {
    bottom: 6%;
}
#prev-br { width: 14%; }

.temp-prev-max-ch-01, .temp-prev-max-ch-02,
.temp-prev-max-br-01, .temp-prev-max-br-02 {
    font-size: 120%;
    letter-spacing: -0.025em;
    font-weight: 900;
}

.prev-day {
    padding: 3% 8% 8% 8%;
}
#prevDaysCH01, #prevDaysCH02,
#prevDaysBR01, #prevDaysBR02 {
    font-size: 80%;
}
.prev-temp {
    padding: 0% 30% 0% 0%;
}
.max-symbol {
    font-size: 80%;
    font-weight: 400;
    padding-right: 2px;
    letter-spacing: 0.03em;
}







.arrow-max, .arrow-min {
    background-image: url(arrow-top-black.svg);
    /* position: absolute; */
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: CENTER CENTER;
    padding: 0px 0 3px 0;
    margin: 0px -1px 0px 0;
    width: 16px;
    height: 15px;
    opacity: 1;
    /* background-color: rgb(149 0 0 / 80%); */
    /* border-radius: 50%; */
    right: 0px;
    top: 0;
    display: block;
    float: left;
}

.arrow-min {
    transform: rotate(180deg);
}

.float-left {
    float: left;
}
.align-center {
    text-align: center;
}
.border-left {
    border-left: 1px solid #000;
}
.border-bottom {
    border-bottom: 1px solid #000;
}

.nord-icon, .nord-icon-ch {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px'  width='92px' height='92px' viewBox='0 0 92 92' enable-background='new 0 0 92 92' xml:space='preserve'> <g> <g>  <path d='M86.877,87.708L46.795,1.74c-0.186-0.396-0.581-0.648-1.018-0.649s-0.834,0.251-1.019,0.647L4.125,88.256  c-0.234,0.498-0.071,1.096,0.382,1.406c0.192,0.132,0.414,0.196,0.635,0.196c0.299,0,0.596-0.118,0.814-0.348l39.819-41.715  L85.043,88.96c0.381,0.397,0.994,0.463,1.449,0.152C86.945,88.802,87.109,88.206,86.877,87.708z M45.775,44.49  c0-0.001-0.247,0.264-0.247,0.264s-0.354,0.414-0.566,0.636L9.095,82.965L45.771,4.869l0.004,0.009v38.125  C45.775,43.574,45.779,44.494,45.775,44.49z'/> </g> </g> </svg>");
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 0;
    margin: 0;
    width: 6%;
    height: 10%;
    opacity: 0.5;
    bottom: 33%;
    left: 6%;
    z-index: 9;
}

.nord-icon-ch {
    bottom: 42%;
    left: 3%;
}

.nord-symbol {
    position: absolute;
    left: 22%;
    bottom: -20%;
    font-weight: 900;
    font-size: 112%;
    text-shadow: 1px 1px 0px rgb(255 255 255 / 71%);
}




.copyright {
    background-image: url(logo_01241_vintage.svg);    /*  logo_01241_bm_black.png         ABGESCHALTET */
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 0;
    margin: 0;
    width: 82px;
    height: 17px;
    opacity: 0;
    bottom: 0%;
    right: 60%;
    z-index: 9;
 }


 .km-outer, .km-outer-ch {
    position: absolute;
    padding: 0;
    margin: 0;
    width: 40%;
    height: 6%;
    opacity: 0.7;
    bottom: 0%;
    left: 2%;
    z-index: 9;
  }
.km-outer-ch {
    opacity: 0.5;
    bottom: 0%;
    left: 3%;
}

 .km-icon, .km-icon-br {
    background-image: url(km-ch.svg);
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    left: 0px;
    top: 0;
    width: 48%;
    height: 100%;
    opacity: 0.9;
  }

 .km-icon-br {
    width: 41%;
    left: 3%;
}


  .km-legende {
    position: absolute;
    left: 13%;
    top: -40%;
    font-size: 90%;
    letter-spacing: 0.02em;
    text-shadow: 1px 1px 0px rgb(255 255 255 / 8%);
  }



.faehnli, .faehnli-ch {
    background-image: url(faehnli.svg);
    content: "";
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 0;
    margin: 0;
    width: 17%;
    height: 17%;
    opacity: 0.9;
    bottom: 50% !important;
    right: 41% !important;
    z-index: 9;
}
.faehnli-ch {
    bottom: 46% !important;
    right: 41% !important;
}


.arrow-right {
   /*  background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='24px' height='24px' viewBox='0 0 24 24' enable-background='new 0 0 24 24' xml:space='preserve'> <path fill='#FFFFFF' d='M4.5,12.5l1.41,1.41l5.59-5.58V20.5h2V8.33l5.58,5.59l1.42-1.42l-8-8L4.5,12.5z'/> </svg>");    */
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0;
    margin: 0;
    width: 10%;
    height: 10%;
    opacity: 0.8;
    background-color: rgb(149 0 0 / 80%);
    border-radius: 50%;
    right: 0;
    top: 0;
    z-index: 2;
}

.arrow-left {
    background-color: rgb(0 0 0 / 30%);
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.arrow-right-ch {
    width: 10%;
    height: 10%;
    top: 0;
    right: 0;
    z-index: 2;
}
.arrow-right > svg {
    width: 100%;
    height: 100%;
    transform: rotate(90deg);
}
.arrow-left > svg {
    width: 100%;
    height: 100%;
    transform: rotate(270deg);
    padding: 1% 2% 4% 1%;
}



#kommentar-br, #kommentar-ch {
    position: absolute;
    bottom: 8%;
    right: 5%;;
    width: 56%;
    text-shadow: 1px 1px 0px rgb(255 255 255 / 15%);
    font-size: 100%;
    line-height: 108%;
    z-index: 9;
    text-align: right;
    color: #000000e8;
    letter-spacing: 0.02em;
}



#daynameCH, #daynameBR {
    position: absolute;
    top: 7%;
    left: 6%;
    z-index: 9;
}

.current-day {
    color: #000000;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 30%);
    /* font-weight: 900; */
    font-size: 120%;
}


.tag-nacht {
    background-image: url(moon-night-icon-line.svg);
    position: absolute;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: 54% 28%;
    width: 5%;
    height: 5%;
    /* opacity: 0.8; */
    /* background-color: rgb(59 59 59 / 0%); */
    right: 87%;
    top: 11%;
    z-index: 9;
}

.tag-nacht-text {
    position: absolute;
    top: 10%;
    left: 90%;
    /* font-size: 100%; */
    text-shadow: 1px 1px 0px rgb(255 255 255 / 25%);
}

.weather-icon {
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    padding: 0;
    margin: 0;
    width: 16%;
    height: 16%;
    opacity: 0.9;
    z-index: 9;
    /* background-color: #ffffffab; */
    /* border: 1px solid #000000; */
    /* border-radius: 50%; */
    /* box-shadow: 3px 3px 20px -4px rgba(0, 0, 0, 0.6); */
 }

#weather-icon-BR {
    top: 28%;
    right: 13%;
}
#weather-icon-CH {
    top: 30%;
    right: 7%;
}

.weather-icon-0-1 { background-image: url(weather-icons/weather-icon-0-1.svg); }
.weather-icon-0-0 { background-image: url(weather-icons/weather-icon-0-0.svg); }
.weather-icon-1-1 { background-image: url(weather-icons/weather-icon-1-1.svg); }
.weather-icon-1-0 { background-image: url(weather-icons/weather-icon-1-0.svg); }
.weather-icon-2-1 { background-image: url(weather-icons/weather-icon-2-1.svg); }
.weather-icon-2-0 { background-image: url(weather-icons/weather-icon-2-0.svg); }
.weather-icon-3-1 { background-image: url(weather-icons/weather-icon-3-1.svg); }
.weather-icon-3-0 { background-image: url(weather-icons/weather-icon-3-0.svg); }
.weather-icon-45-1 { background-image: url(weather-icons/weather-icon-45-1.svg); }
.weather-icon-45-0 { background-image: url(weather-icons/weather-icon-45-0.svg); }
.weather-icon-61-1 { background-image: url(weather-icons/weather-icon-61-1.svg); }
.weather-icon-61-0 { background-image: url(weather-icons/weather-icon-61-0.svg); }
.weather-icon-71-1 { background-image: url(weather-icons/weather-icon-71-1.svg); }
.weather-icon-71-0 { background-image: url(weather-icons/weather-icon-71-0.svg); }
.weather-icon-73-1 { background-image: url(weather-icons/weather-icon-73-1.svg); }
.weather-icon-73-0 { background-image: url(weather-icons/weather-icon-73-0.svg); }
.weather-icon-75-1 { background-image: url(weather-icons/weather-icon-75-1.svg); }
.weather-icon-75-0 { background-image: url(weather-icons/weather-icon-75-0.svg); }
.weather-icon-55-1 { background-image: url(weather-icons/weather-icon-55-1.svg); }
.weather-icon-55-0 { background-image: url(weather-icons/weather-icon-55-0.svg); }
.weather-icon-53-1 { background-image: url(weather-icons/weather-icon-53-1.svg); }
.weather-icon-53-0 { background-image: url(weather-icons/weather-icon-53-0.svg); }
.weather-icon-51-1 { background-image: url(weather-icons/weather-icon-51-1.svg); }
.weather-icon-51-0 { background-image: url(weather-icons/weather-icon-51-0.svg); }
.weather-icon-63-1 { background-image: url(weather-icons/weather-icon-63-1.svg); }
.weather-icon-63-0 { background-image: url(weather-icons/weather-icon-63-0.svg); }
.weather-icon-80-1 { background-image: url(weather-icons/weather-icon-80-1.svg); }
.weather-icon-80-0 { background-image: url(weather-icons/weather-icon-80-0.svg); }
.weather-icon-81-1 { background-image: url(weather-icons/weather-icon-81-1.svg); }
.weather-icon-81-0 { background-image: url(weather-icons/weather-icon-81-0.svg); }
.weather-icon-95-1 { background-image: url(weather-icons/weather-icon-95-1.svg); }
.weather-icon-95-0 { background-image: url(weather-icons/weather-icon-95-0.svg); }
.weather-icon-96-1 { background-image: url(weather-icons/weather-icon-96-1.svg); }
.weather-icon-96-0 { background-image: url(weather-icons/weather-icon-96-0.svg); }



/*---------------- Hour prev ----------*/

.hour-wrap {
    position: absolute;
    bottom: 14%;
    left: 5%;
    z-index: 9999;
    width: 59%;
    height: 11%;
}

#hourly-wrap-br {
    bottom: 14%;
    right: 31%;
}

.col {
    width: 9%;
    height: 100%;
    float: left;
    font-size: 72%;
    position: relative;
    font-family: monospace;
}
.col-inner {
    border-left: 1px solid #000;
    height: 40%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.col-inner.circle-height-9 { height: 40%; }
.col-inner.circle-height-10 { height: 48%; }
.col-inner.circle-height-11 { height: 56%; }
.col-inner.circle-height-12 { height: 64%; }
.col-inner.circle-height-13 { height: 72%; }
.col-inner.circle-height-14 { height: 80%; }
.col-inner.circle-height-15 { height: 88%; }


.circle {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='circle' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='92px' height='92px' viewBox='0 0 92 92' enable-background='new 0 0 92 92' xml:space='preserve'> <path d='M9.312,45.063C9.318,24.555,25.932,7.941,46.438,7.938l0,0c20.506,0.004,37.119,16.617,37.125,37.125l0,0 c-0.006,20.505-16.619,37.118-37.125,37.124l0,0C25.932,82.181,9.318,65.567,9.312,45.063L9.312,45.063z'/> <path fill='white' d='M26.937,45.063c0.003-10.771,8.729-19.498,19.5-19.5l0,0c10.771,0.002,19.497,8.729,19.5,19.5l0,0 c-0.004,10.77-8.729,19.496-19.5,19.499l0,0C35.667,64.559,26.94,55.832,26.937,45.063L26.937,45.063z'/> </svg>");
    background-size: 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
    top: -17%;
    left: -20%;
    width: 36%;
    height: 36%;
    min-width: 8px;
    min-height: 8px;
}

.time-hourly {
    position: absolute;
    bottom: -28%;
    left: -37%;
    border-top: 0 solid #000;
    background: rgb(0 0 0 / 80%);
    line-height: 100%;
    padding: 6% 13% 5% 10%;
    color: #ffffff;
}
.temp-hourly {
    position: absolute;
    bottom: 60%;
    left: -15%;
    font-weight: 900;
    font-size: 110%;
    text-shadow: 1px 1px 1px rgb(255 255 255 / 20%);
}
.time-hourly-symbol {
    font-size: 70%;
    padding-left: 6%;
    opacity: 0.8;
}

/*
.icon-clock {
    clock background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='92px' height='92px' viewBox='0 0 92 92' enable-background='new 0 0 92 92' xml:space='preserve'> <defs> <style> .a{fill:white;} .b{fill:black;} </style> </defs> <path class='a' d='M45.792,82.79c-20.71,0-37.5-16.786-37.5-37.5c0-20.706,16.79-37.5,37.5-37.5c20.711,0,37.5,16.794,37.5,37.5 C83.292,66.004,66.503,82.79,45.792,82.79z M45.792,12.554c-18.083,0-32.739,14.658-32.739,32.735s14.656,32.744,32.739,32.744 c18.078,0,32.739-14.666,32.739-32.744S63.87,12.554,45.792,12.554z M43.595,47.711l-0.073-25.712h4.614v23.368l14.503,12.159 l-2.857,4.023L43.595,47.711z'/> </svg>");
    eye background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='800px' width='800px' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' xmlns:xlink='http://www.w3.org/1999/xlink' enable-background='new 0 0 512 512'><g><g><path d='m497.6,244.7c-63.9-96.7-149.7-150-241.6-150-91.9,1.42109e-14-177.7,53.3-241.6,150-4.5,6.8-4.5,15.7 0,22.5 63.9,96.7 149.7,150 241.6,150 91.9,0 177.7-53.3 241.6-150 4.5-6.8 4.5-15.6 0-22.5zm-241.6,131.7c-74.2,0-144.8-42.6-199.9-120.4 55-77.8 125.6-120.4 199.9-120.4 74.2,0 144.8,42.6 199.9,120.4-55.1,77.8-125.6,120.4-199.9,120.4z'/><path d='m256,148.5c-59.3,0-107.5,48.2-107.5,107.5 0,59.3 48.2,107.5 107.5,107.5s107.5-48.2 107.5-107.5c0-59.3-48.2-107.5-107.5-107.5zm0,175.5c-36.8,0-66.8-30.5-66.8-68 0-37.5 30-68 66.8-68 36.8,0 66.8,30.5 66.8,68 0,37.5-30,68-66.8,68z'/></g></g></svg>");
    background-size: 54%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    width: 18% !important;
    height: 18%;
    padding: 0 2% 0 2%;

}
*/

.icon-clock {
    padding: 0 0 0 2%;
    font-size: 90%;
    color: rgb(255 255 255 / 72%);
}

#sonne-outer-ch, #sonne-outer-br {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7.54019C12.4397 7.54019 12.7962 7.18371 12.7962 6.74396V5.29624C12.7962 4.85649 12.4397 4.5 12 4.5C11.5603 4.5 11.2038 4.85649 11.2038 5.29624V6.74396C11.2038 7.18371 11.5603 7.54019 12 7.54019ZM7.76499 9.28031C8.07594 8.96937 8.07594 8.46522 7.76499 8.15427L6.7413 7.13057C6.43035 6.81962 5.9262 6.81962 5.61525 7.13057C5.3043 7.44152 5.3043 7.94567 5.61525 8.25662L6.63894 9.28031C6.94989 9.59126 7.45404 9.59126 7.76499 9.28031ZM16.1934 9.28031C16.5044 9.59126 17.0085 9.59126 17.3195 9.28031L18.3432 8.25662C18.6541 7.94567 18.6541 7.44152 18.3432 7.13057C18.0322 6.81962 17.5281 6.81962 17.2171 7.13057L16.1934 8.15427C15.8825 8.46522 15.8825 8.96937 16.1934 9.28031ZM18.756 14.2962C18.3163 14.2962 17.9598 13.9397 17.9598 13.5C17.9598 13.0603 18.3163 12.7038 18.756 12.7038H20.2038C20.6435 12.7038 21 13.0603 21 13.5C21 13.9397 20.6435 14.2962 20.2038 14.2962H18.756ZM5.24396 12.7038C5.68371 12.7038 6.04019 13.0603 6.04019 13.5C6.04019 13.9397 5.68371 14.2962 5.24396 14.2962H3.79624C3.35649 14.2962 3 13.9397 3 13.5C3 13.0603 3.35649 12.7038 3.79624 12.7038H5.24396ZM16.6585 15.9077C17.0231 15.1917 17.2661 14.3528 17.2661 13.4945C17.2661 10.582 14.8984 8.22185 11.9792 8.22185C9.05958 8.22185 6.69232 10.5818 6.69232 13.4945C6.69232 14.3643 6.90332 15.1847 7.27703 15.9077H9.18945C8.62584 15.2616 8.28479 14.4178 8.28479 13.4945C8.28479 11.4624 9.93798 9.81432 11.9792 9.81432C14.0201 9.81432 15.6736 11.4627 15.6736 13.4945C15.6736 14.3962 15.3346 15.2674 14.7941 15.9077H16.6585ZM3.22442 16.7073C3.22442 17.1471 3.58091 17.5035 4.02066 17.5035H19.9454C20.3851 17.5035 20.7416 17.1471 20.7416 16.7073C20.7416 16.2676 20.3851 15.9111 19.9454 15.9111H4.02066C3.58091 15.9111 3.22442 16.2676 3.22442 16.7073Z' fill='black'></path></svg>");
    background-size: 17%;
    background-position: 3% 50%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 1%;
    left: 40%;
    width: 33%;
    height: 5%;
    opacity: 1;
}

#sonne-outer-br {
    background-image: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M12 7.54019C12.4397 7.54019 12.7962 7.18371 12.7962 6.74396V5.29624C12.7962 4.85649 12.4397 4.5 12 4.5C11.5603 4.5 11.2038 4.85649 11.2038 5.29624V6.74396C11.2038 7.18371 11.5603 7.54019 12 7.54019ZM7.76499 9.28031C8.07594 8.96937 8.07594 8.46522 7.76499 8.15427L6.7413 7.13057C6.43035 6.81962 5.9262 6.81962 5.61525 7.13057C5.3043 7.44152 5.3043 7.94567 5.61525 8.25662L6.63894 9.28031C6.94989 9.59126 7.45404 9.59126 7.76499 9.28031ZM16.1934 9.28031C16.5044 9.59126 17.0085 9.59126 17.3195 9.28031L18.3432 8.25662C18.6541 7.94567 18.6541 7.44152 18.3432 7.13057C18.0322 6.81962 17.5281 6.81962 17.2171 7.13057L16.1934 8.15427C15.8825 8.46522 15.8825 8.96937 16.1934 9.28031ZM18.756 14.2962C18.3163 14.2962 17.9598 13.9397 17.9598 13.5C17.9598 13.0603 18.3163 12.7038 18.756 12.7038H20.2038C20.6435 12.7038 21 13.0603 21 13.5C21 13.9397 20.6435 14.2962 20.2038 14.2962H18.756ZM5.24396 12.7038C5.68371 12.7038 6.04019 13.0603 6.04019 13.5C6.04019 13.9397 5.68371 14.2962 5.24396 14.2962H3.79624C3.35649 14.2962 3 13.9397 3 13.5C3 13.0603 3.35649 12.7038 3.79624 12.7038H5.24396ZM16.6585 15.9077C17.0231 15.1917 17.2661 14.3528 17.2661 13.4945C17.2661 10.582 14.8984 8.22185 11.9792 8.22185C9.05958 8.22185 6.69232 10.5818 6.69232 13.4945C6.69232 14.3643 6.90332 15.1847 7.27703 15.9077H9.18945C8.62584 15.2616 8.28479 14.4178 8.28479 13.4945C8.28479 11.4624 9.93798 9.81432 11.9792 9.81432C14.0201 9.81432 15.6736 11.4627 15.6736 13.4945C15.6736 14.3962 15.3346 15.2674 14.7941 15.9077H16.6585ZM3.22442 16.7073C3.22442 17.1471 3.58091 17.5035 4.02066 17.5035H19.9454C20.3851 17.5035 20.7416 17.1471 20.7416 16.7073C20.7416 16.2676 20.3851 15.9111 19.9454 15.9111H4.02066C3.58091 15.9111 3.22442 16.2676 3.22442 16.7073Z' fill='white'></path></svg>");
    opacity: 0.7;
    left: 40%;
}

#sonne-ch, #sonne-br {
    position: absolute;
    left: 22%;
    top: 12%;
    width: 80%;
    font-size: 80%;
    text-shadow: 1px 1px 0px rgb(0 0 0 / 5%);
}
#sonne-br {
    color: #fff;
}


/***** FONTS

@font-face {
  font-family: 'Noto';
  font-style: normal;
  font-weight: 400;
  src: local('Noto'), local('Noto-Serif-regular'),
       url('fonts/noto/Noto-Serif-regular.woff') format('woff');
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Mono'), local('RobotoMono-Regular'),
       url('fonts/roboto-mono/roboto-mono-v7-latin-regular.woff2') format('woff2'),
       url('fonts/roboto-mono/roboto-mono-v7-latin-regular.woff') format('woff');
}

********** END FONTS  */

@keyframes pulse2 {
	0% {
		opacity: 0.1;
	}

	50% {
	    opacity: 1;
	    position: absolute;
	    /* top: 10px;
	    left: 10px:    muesste man über den Winkel des Pfeils variabel machen */
	}

	100% {
	    opacity: 0.1;
		}
	}

/* --------------------------------------      ABOUT PAGE   */

#pagehome {
    /* background-color: #d8d9db; */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-family: monospace;
    line-height: 144%;
    letter-spacing: 0.01em;
    height: 100%;
    display: flex;
    justify-content: center;
}
.current-page {
    z-index: 90000000 !important;
    height: auto;
}

.content {
    margin: auto;
    width: 100vw;
    height: 100vw;
    max-height: 600px;
    max-width: 600px;
    padding: 6%;
    background: #ffffff;
    position: relative;
    border-radius: 2%;
    box-shadow: 0px 2px 11px -7px rgb(0 0 0 / 60%);
}
.content > div > img {
    width: 30%;
    height: 30%;
    position: absolute;
    right: 7%;
    bottom: 7%;
}

#pagehome .external-link {
    color: #3c6ed6;
}

h1 {
    letter-spacing: 0.04em;
    font-weight: 700;
    font-size: 106%;
    font-style: oblique;
}


#close-infos {
    /*
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' height='24' viewBox='0 0 24 24' width='24'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-size: 100%;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    */
    position: absolute;
    top: 5%;
    right: 5%;
    width: 10%;
    height: 10%;
    cursor: pointer;
    text-align: center;
}


#close-app {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' height='24' viewBox='0 0 24 24' width='24'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-size: 40%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: fixed;
    display: none !important;
    top: 0%;
    right: 0%;
    width: 100px;
    height: 60px;
    cursor: pointer;
    text-align: center;
    opacity: 0.4;
}


.icon-text {
    padding: 87% 0 0 0;
    font-size: 70%;
    letter-spacing: 0.05em;
}

#open-infos, #open-infos-br {
    background-image: url("data:image/svg+xml;utf8,<svg version='1.1' id='Layer_2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' height='24' viewBox='0 0 24 24' width='24'><path d='M0 0h24v24H0z' fill='none'></path><path d='M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z'></path></svg>");
    background-size: 72%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0%;
    right: 15%;
    width: 12%;
    height: 12%;
    cursor: pointer;
    opacity: 0.7;
    z-index: 999999999;
}
#open-infos { display: none !important}  /* fuer CH  */

#logo-01241-outer {
    padding: 2% 1% 1% 1%;
    background: #000;
    width: 30%;
    margin: 6% 0 0 0;
}
#logo-01241-svg {
    margin: 0 auto;
    padding: 0;
}
.simple-link {
    color: inherit;
    text-decoration: none;
}
#logo-01241-outer a,
#logo-01241-outer a:hover,
#logo-01241-outer a:visited {
    color: rgb(109 80 80) !important;
    text-decoration: none;
    text-align: center;
}
#logo-01241-svg>svg {
    width: 84%;
    height: auto;
    fill: #fff;
}





	/********* BASE SCALE TEST  ***********************/


    /* @media only screen and (max-width: 700px) { #weather_widget { font-size: 90%; } } */

    @media only screen and (min-width: 541px) { #weather_widget { font-size: 146%; } #pagehome { font-size: 112%; }  }

    @media only screen and (max-width: 540px) { .outer { width: 90vw; height: 90vw; } #weather_widget, #pagehome { font-size: 116%; }

        .hour-wrap { font-size: 133%; width: 74%;  }
        .temp-hourly { bottom: 84%; }
        /* #close-app { display: block !important; } */
        }


    @media only screen and (max-width: 480px) {   .card { border-width: 6px;} #weather_widget, #pagehome { font-size: 100%; }  .time-header { padding-top: 2%; } .previsao-wrap {font-size:90%; width: 20%;} #prev-br { width: 18%; }.time-hourly { font-size: 90%; } }

    @media only screen and (max-width: 370px) {   #weather_widget, #pagehome { font-size: 90%; }   }

    @media only screen and (max-width: 335px) { #weather_widget, #pagehome { font-size: 80%; }   }
    @media only screen and (max-width: 300px) {  #weather_widget, #pagehome { font-size: 75%; }  }
    @media only screen and (max-width: 260px) { #weather_widget, #pagehome { font-size: 65%; } }
    @media only screen and (max-width: 240px) { #weather_widget, #pagehome { font-size: 60%; } }
    @media only screen and (max-width: 180px) { #weather_widget, #pagehome { font-size: 40%; } }