/* 
    Created on : 20.07.2022, 09:45:02
    Author     : dbroistedt

    CSS Selektoren: 
                    https://code-crowd.de/blog/infografik-und-cheatsheet-css-selektoren/
                    http://www.w3bai.com/de/css/css_combinators.html#gsc.tab=0
                    http://www.w3bai.com/de/css/css_attribute_selectors.html#gsc.tab=0
    CSS Pseudo Elemente: 
                    http://www.w3bai.com/de/css/css_pseudo_elements.html#gsc.tab=0
    CSS Pseudo not:
                    https://www.mediaevent.de/css/not.html
*/
#placeholder_wetter [id$="unit"]{
    font-size: 0.8em;
}

/***************
** Wetter
****************/    
#placeholder_wetter{
    /*
    border: 1px dashed red;
    background-color: rgba(230,20,20,0.1);
    */
    position: relative;
    float: none;
    clear: both;
    width: 100%;
    height: auto;
}
#placeholder_wetter div{
    display: inline-block;
}
#wind_direction_value,
#wind_direction_unit{
    display: none;
}
#wind_direction_icon:before{
    position: relative;
    display: inline-block;
    font-size: 1em;
    color: #0069b4;
    
    /*
    https://unicode-table.com/de/sets/arrow-symbols/
    */
    content: '\27A2';
    
    /* 
    https://www.mediaevent.de/css/transform.html
    Wert anhand der Daten zuweisen
    transform: rotate(117deg);
    */
}
#wind_direction_value:before{
}
.temperature_value::before, 
.humidity_value::before {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.2em;
    content: ' ';
    background-image: url(../images/icon-temp-blau.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 100%;
    vertical-align: text-bottom;
}
.temperature_value#pegel_temp_value:before{
    background-image:url(../images/icon-temp-weiss.svg);
}
.humidity_value:before{
    background-image:url(../images/icon-feuchte-blau.svg);
}