/*------------------------------------------------------------------------
# "Visual Crossing Weather" Joomla module
# Copyright (C) 2009-2022 visualcrossing.com. All Rights Reserved.
# License: http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
# Author: codextent.com
# Website: https://www.visualcrossing.com
-------------------------------------------------------------------------*/

.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;
}