/*
  Copyright 2016, Google, Inc.
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/

body {
  font-family: "helvetica", sans-serif;
  text-align: center;
}

form {
  padding: 5px 0 10px;
  margin-bottom: 30px;
}

button {
    background-color: #f1f1f1;
    color: black;
}

input {
    background-color: white;
    color: black;
}

h3,legend {
  font-weight: 400;
  padding: 18px 0 15px;
  margin: 0 0 0;
}

div.form-group {
   margin-bottom: 10px;
}

textarea {
  width: 250px;
  font-size: 14px;
  padding: 6px;
}

textarea {
  vertical-align: top;
  height: 75px;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
    background-color: inherit;
    color: #596367;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

img.photo {
    max-width: 100%;
}

.spinner-container {
    margin: 20px;
}

input[type="date", type="time"] {
    width: 150px;
}

.photo-controls {
    margin: 20px 20px 0px 20px;
}

.tabcontent button {
    margin: 20px;
}

#minmax-container {
    padding-bottom: 15px;
}

.weather-container {
    background-color: #596367;
    color: #ffffff;
    width: 100%;
    min-width: 90px;
    font-size: 16px;
    display: flex;
    flex-direction: row;
}

.weather-current-measures {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    -webkit-box-align: left;
    -ms-flex-align: left;
    align-items: left;
    font-size: 1.1em;
    padding: 0.5em 0.45em;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    max-width: 130px;
    color: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.measure-container {
    padding: 0.25em 0em;
    text-align: center;
}

.measure {
    margin: 0px .1em 0px .25em;
}

.weather-current-status {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 1.1em;
    padding: 0.5em 0.45em;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    max-width: 120px;
    color: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.wi {
    min-width: 1.1em;
}
.weather-current-icon {
    font-size: 4em;
}

.weather-forecast {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 10;
    -ms-flex-positive: 10;
    flex-grow: 10;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 0.7em;
    padding: 0.5em 0.45em;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    color: inherit;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.weather-forecast>div {
    padding: 0.2em 0.1em;
}

.weather-forecast-icon {
    font-size: 2em;
}

.forecast-temps {
    width: 85%;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.sun-times {
    width: 85%;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.precipitation {
    width: 85%;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.weather-forecast:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
}

.temp-max {
    color: #f58f70;
}

.temp-min {
    color: #5ebcfc;
}

.measure-container .unit {
    color: #b3b3b3;
}

.button-container {
    margin: 20px;
}

.hidden {
    display: none;
}

@media only screen and (max-width: 220px) {
    .weather-forecast {
        display: none;
    }

}

.float-right {
    float: right;
}

.top-right {
    position: absolute;
    top: 20px;
    right: 20px;
}

.geo {
    text-decoration: none;
    color: #757575;
}