.madhunter-weather-wrap {
transition: background .5s ease-in;
}
.madwe-light {
color: inherit;
}
.madwe-dark {
color: #ffffff;
}
.madhunter-weather-cover {
display: grid;
padding: 1.5em;
border-radius: 10px;
gap: 2em;
}
.madwe-dark .madhunter-weather-cover {
background-image: linear-gradient(rgba(30, 48, 78, 0) 50%, #114b43), radial-gradient(farthest-side at 50% 50%, rgb(170 227 217 / 20%) 0, rgb(53 113 109 / 0%) 100%), radial-gradient(farthest-side at 50% 50%, rgb(170 227 215 / 20%) 0, rgba(53, 72, 113, 0) 100%), linear-gradient(#00695c, #0aa692);
}
.madwe-light .madhunter-weather-cover {
background-image: linear-gradient(rgba(30, 48, 78, 0) 50%, #e7fffc), radial-gradient(farthest-side at 50% 50%, rgb(170 227 227 / 20%) 0, rgb(53 113 109 / 0%) 100%), radial-gradient(farthest-side at 50% 50%, rgb(170 227 220 / 20%) 0, rgba(53, 72, 113, 0) 100%), linear-gradient(#ecfffd, #edfffd);
box-shadow: 0 0 0 1px rgb(142 212 200 / 50%);
}
.madwe-bottom {
background: #00695c;
padding: 8px 16px;
font-weight: normal;
color: #FFF !important;
line-height: 1;
border-radius: 2px;
font-size: 12px;
text-decoration: none;
outline: none;
border: none;
}
.madwe-dark .madwe-bottom.madwe-button-secondary {
background: transparent;
box-shadow: 0 0 0 1px #ffffff;
color: #ffffff !important;
}
.madwe-dark .madwe-bottom.madwe-button-secondary:hover {
opacity: 0.95;
box-shadow: 0 0 0 2px #00695c;
}
.madwe-light .madwe-bottom.madwe-button-secondary {
background: transparent;
box-shadow: 0 0 0 1px #00695c;
color: #00695c !important;
}
.madwe-light .madwe-bottom.madwe-button-secondary:hover {
opacity: 0.95;
box-shadow: 0 0 0 2px #00695c;
}
.madwe-light .madwe-bottom:hover {
opacity: 0.95;
box-shadow: 0 0 0 2px #00695c;
}
.madhunter-weather-wrapper-fishes {
display: inline-grid;
gap: 15px;
}
.madhunter-weather-fishes-links .madwe-bottom {
padding: 3px 8px;
}
.madhunter-weather-forecast-link {
place-self: center center;
}
.madhunter-weather-forecast-link .madwe-bottom.madwe-bottom-forecast {
font-size: 16px;
padding: 8px 16px;
place-self: center center;
}
.madhunter-weather-fishes-links {
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: center;
}
.madhunter-weather-advert-block {
place-self: stretch center;
}
.madhunter-weather-today--location {
place-self: center center;
font-size: .825em;
}
.madhunter-weather-today--main {
display: grid;
grid-template-columns:0.5fr 1fr;
column-gap: 10px;
grid-template-areas: "-text   -text"
"-temp   -image";
}
.madhunter-weather-today--temperature {
font-size: 2.5em;
grid-area: -temp;
}
.madhunter-weather-today--image {
grid-area: -image;
}
.madhunter-weather-today--text {
font-size: .75em;
grid-area: -text;
justify-self: center;
}
.madhunter-weather-today--stats {
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
padding: 1rem 0;
}
.today-statistic {
font-size: 0.825em;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1em;
}
.today-statistic:last-child {
padding-bottom: 0;
}
.madhunter-weather-today--wind.today-statistic .today-statistic__value {
display: flex;
justify-content: space-between;
align-items: center;
}
.madhunter-weather-today--water-temperature.today-statistic .today-statistic__value {
font-size: 1.5em;
}
.madhunter-weather-today--stats .inline-svg-icon {
margin-right: 3px;
max-width: 20px;
max-height: 20px;
}
.inline-svg-icon.wind-direction {
max-width: 8px;
max-height: 16px;
margin-right: 5px;
margin-left: 5px;
}
.madhunter-weather-forecast {
display: grid;
grid-template-columns: repeat( auto-fit, minmax(40px, 1fr) );
}
.madhunter-weather-forecast--day {
justify-self: center;
font-size: 0.825em;
text-align: center;
}
div.madhunter-weather-error {
color: #ed7469;
font-weight: 700;
display: block;
padding: 10px;
text-align: center;
border: solid 1px #ed7469;
text-transform: uppercase
}
.inline-svg-icon.moon-phases {
fill: #ffffff;
background: #414141;
width: 50px;
height: 50px;
border-radius: 50%;
}
.inline-svg-icon:not(.moon-phases) {
width: 20px;
height: 20px;
fill-opacity: 0.7;
fill: #184040;
}
.madwe-dark .inline-svg-icon:not(.moon-phases) {
fill-opacity: 1;
fill: #eaeaea;
}