/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

/*
  Plugin Name: Weather-JNM
  Plugin URI:  https://jnmsolutions.co.za/weather-jnm
  Description: A weather app & widget by JNM Solutions.
  Version:     1.0
  Author:      Jethro McNamee
  Author URI:  https://jnmsolutions.co.za/
  License URI: https://www.gnu.org/licenses/gpl-3.0.en.html/
  License:     GPL3
  Weather-JNM is free software: you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation, either version 2 of the License, or
  any later version.
   
  Weather-JNM is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  GNU General Public License for more details.
   
  You should have received a copy of the GNU General Public License
  along with Weather-JNM. If not, see https://www.gnu.org/licenses/.
 */

.weatherJNM-wrap {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 10px 1fr 1fr 10px;
    grid-template-columns: 10px 1fr 1fr 10px;
    -ms-grid-rows: auto auto;
    grid-template-rows: auto auto;
    grid-template-areas: '. jnmplace jnmplace .'
                         '. jnmweatherimgwrap jnmtemp .'
                         '. jnmweatherextra jnmweatherextra .';  
    margin: auto;
    max-width: 255px; 
}

.jnmPlace {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    display: block;
    position: relative;
    grid-area: jnmplace;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    white-space: nowrap;
    background: 0 0;
    border: 0;
    margin: 0;
    padding: 0;
    outline: 0;
    font-size: 22px;
    text-align: center;
    line-height: 18px;
    color: #fff;
    font-family: Raleway,sans-serif;
    font-weight: 400;
}

.jnmWeatherImgWrap {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    display: block;
    position: relative;
    grid-area: jnmweatherimgwrap;
}

.jnmWeatherImgWrap img {
    width: 100%;
    height: auto;
}

.jnmTemp {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
    display: block;
    position: relative;
    grid-area: jnmtemp;
    font-size: 30px;
    text-transform: uppercase;
    text-shadow: 0px 0px 1px rgba( 0, 2, 4, 0.5 );
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: 0 0;
    border: 0;
    margin: auto;
    padding: 0;
    outline: 0;
    text-align: center;
    color: #fff;
}

.jnmWeatherExtra {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    display: -ms-grid;
    display: grid;
    position: relative;
    grid-area: jnmweatherextra;
    -ms-grid-columns: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'cloudlabel cloud'
                         'feellabel feel'
                         'windlabel wind'
                         'humidlabel humid';
}

.jnmCloudLabel, .jnmFeelLabel, .jnmWindLabel, .jnmHumidLabel  {
    display: block;
    position: relative;
    text-align: left;
}

.jnmCloudLabel {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: cloudlabel;
}

.jnmFeelLabel {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: feellabel;
}

.jnmWindLabel {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: windlabel;
}

.jnmHumidLabel {
    -ms-grid-row: 4;
    -ms-grid-column: 1;
    grid-area: humidlabel;
}

.jnmCloud {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    display: block;
    position: relative;
    grid-area: cloud;
}

.jnmFeel {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    display: block;
    position: relative;
    grid-area: feel;
}

.jnmWind {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    display: block;
    position: relative;
    grid-area: wind;
}

.jnmHumid {
    -ms-grid-row: 4;
    -ms-grid-column: 2;
    display: block;
    position: relative;
    grid-area: humid;
}

.light {
    color: #ffffff
}

.dark {
    color: #000000
}