.forecastwidget {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 5px;
    font-size: 14px;
    background-color: #ffffff;
    overflow:hidden;
    border-radius: 5px;
}
.forecastwidget .icon {
    height:40px;
    width:40px;
        
}
.forecastwidget .icon.sunny {background-image:url(images/sun.png);}
.forecastwidget .icon.partsunny {background-image:url(images/partsun.png);}
.forecastwidget .icon.cloudy {background-image:url(images/cloudy.png);}
.forecastwidget .icon.rain {background-image:url(images/rain.png);}
.forecastwidget .icon.snow {background-image:url(images/snow.png);}

.forecastwidget .noselect {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10+ and Edge */
    user-select: none; /* Standard syntax */
}

.forecastwidget .days {
    position: relative;
    
    max-height: 100px;
    
    flex: 1;
}
.forecastwidget .chart {
    flex: 1;
}
.forecastwidget .chart .line {
    fill: url(#temperature-gradient);
    stroke-width: 05px;
}
.forecastwidget .chart .precipbar {
    fill: #196eb7;
}

.forecastwidget .chart .grid line {
    stroke: darkgray;

    shape-rendering: crispEdges;
    }

.forecastwidget .chart .grid path {
    stroke-width: 0;
}


.forecastwidget .days.vertical {
    flex-direction: column;
    font-size: 1.2em;
}

/*define a grid layout with two columns*/
.forecastwidget .days .day {
    position: absolute;


    display: grid;
    grid-template-columns: 50% 50%;
    
    justify-content: center;
    align-items: center;
    padding: 0px 5px;
    font-size: 0.9em;
    justify-items: center;
    grid-gap: 1px;
    cursor: grab;
}   
/*
.forecastwidget .days .day:hover {
    background-color:lightgrey;
}
*/
/*most forecast elements take up two columns*/
.forecastwidget .days .day * {
    grid-column: span 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
/*maximum and minimum elements are arrange side by side*/
.forecastwidget .days .day .maxt {
    grid-column: 1 ;
}
.forecastwidget .days .day .mint {
    grid-column: 2 ;
}

/*define a grid layout with size columns*/
.forecastwidget .days.vertical .day {
    grid-template-columns: 50px 30px 30px 30px 60px auto;
    grid-gap: 4px;
    justify-content: start;
    margin: 2px 0px;
    padding: 4px 0px;
}
/*Every element takes up a single grid cell*/
.forecastwidget .days.vertical .day * {
    grid-column: span 1;
}
    /*No special layout is required for the temperature values*/
.forecastwidget .days.vertical .day .maxt,  .forecastwidget .days.vertical .day .mint  {
    grid-column: default ;
}

/*element styling rules*/
.forecastwidget .location {
    
    flex: 0;
    
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.forecastwidget .location .value {
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;

}
.forecastwidget .location .editor {
    display:none;
    position: absolute;
    padding: 5px;
    margin: 1px 0px;
    font-size: 1.2em;
    z-index: 1;
}
.forecastwidget .location .value:hover {
    color:darkgrey;
}
.forecastwidget .location.edit .editor {
    display:block;
}

.forecastwidget .footer {
    font-size: 0.8em;
    color: darkgrey;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.forecastwidget .footer *{
    padding:2px 5px;
}
.forecastwidget .viewchooser {
    font-size: 0.8em;
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 3px;
    margin: 1px 0px;

}
.forecastwidget .viewchooser.day {
    margin-left:auto;
}
.forecastwidget .viewchooser:hover {
    background-color:lightgrey;
}
.forecastwidget .viewchooser.selected {
    background-color:darkgrey;
    color:white;
    
}

.forecastwidget .days .day .date {
    color: darkgrey;
    font-size: 1.1em;
    white-space: nowrap;
    
}
.forecastwidget.edit .days {
    opacity: 0.1;
}


.forecastwidget .days .day .icon {
    padding: 5px 0px;
}
.forecastwidget .days .day .conditions {
    display:none;
    color:darkgrey;
    font-size: 0.9em;
}
.forecastwidget .days.vertical .day .conditions {
    display:block;
}
.forecastwidget .days .day  .maxt {
    font-weight: bold;
}
.forecastwidget .days .day  .mint {
    font-size: 0.9em;
    color:darkgrey;
}

.forecastwidget .days .day  .hidden {
    visibility: hidden;
    display:none;
}