/*
CSS file for Belchertown weather website.
This website was originally created in WordPress on Genesis WP.
A lot of this CSS here is from the Genesis WP Child Theme.
License URI: http://www.gnu.org/licenses/gpl-2.0.html


Bootstrap: https://getbootstrap.com/docs/4.1/layout/overview/
  12 columns
  5 default responsive tiers
  Containers:  Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) 
    or fluid-width (meaning it’s 100% wide all the time).

In Bootstrap's grid system, col-sm-1 and col-sm-5 refer to columns that span different
    proportions of the available horizontal space in a row for small screens (tablets, ≥576px width) and up.

The grid system divides each row into 12 equal-width columns.
col-sm-1 is a single column using 1/12 the avail space
col-sm-5 are 5 columns using 5/12 of the available space

Class	  Minimum screen width (pixels)	Typical devices
col-sm	≥576px	  Small (phones in landscape, small tablets)
col-md	≥768px	  Medium (tablets)
col-lg	≥992px	  Large (laptops, desktops)
col-xl	≥1200px	  Extra-large (large desktops, wide screens)
Below 576px, the unqualified .col- class is used ("extra small", mobile phones).

jim ipad: 820 x 1180   width x height
jo  ipad: 820 x 11809
jim iphone 17pro max: width 440 portrait, 
                            832 landscape

You can use Bootstrap classes for layout widths, but you cannot replace every @media rule with col- because 
  Bootstrap columns only control the grid, not arbitrary CSS like height/padding (see below)

  @media (max-width: 768px) {
    .forecast-1hour {
      width: 25% !important;
    }
  }
becomes --> 
  <div class="forecast-1hour col-3 col-md-auto">

boostrap can do padding
  pt-0       = padding-top: 0
  pt-md-3    = padding-top: some value on md+

  <div class="forecast-temp-graph pt-0 pt-md-3">
  which means on small screens no padding, on medium padding of Bootstrap's 3 scale 

For jQuery:
  jQuery(".beaufort").html( "$current.windSpeed.beaufort" );
  means:
  Select all elements with the class beaufort and set their inner HTML content (markup inside the tags) to the string "$current.windSpeed.beaufort"



*/

/* ## Baseline Normalize
--------------------------------------------- */
/* normalize.css v3.0.1 | MIT License | git.io/normalize */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden],
template {
  display: none;
}
a {
  background: 0 0;
}
a:active,
a:hover {
  outline: 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: 700;
}
dfn {
  font-style: italic;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
mark {
  background: #ff0;
  color: #333;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 1em 40px;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
pre {
  overflow: auto;
}
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}
button {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input {
  line-height: normal;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
input[type="search"] {
  appearance: button;
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
}
optgroup {
  font-weight: 700;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* ## Box Sizing
--------------------------------------------- */

*,
input[type="search"] {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* ## Float Clearing
--------------------------------------------- */

.author-box:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.nav-primary:before,
.nav-secondary:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.wrap:before {
  content: " ";
  display: table;
}

.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.nav-primary:after,
.nav-secondary:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.wrap:after {
  clear: both;
  content: " ";
  display: table;
}

/* # Defaults
---------------------------------------------------------------------------------------------------- */

/* ## Typographical Elements
--------------------------------------------- */

body {
  /* background-color: #f5f5f5; */
  /* Removed in favor for dark mode dynamic switching */
  /* background-color: #fff; */
  /* color: #333; */
  font-family: Roboto, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.625;
  margin: 0;
}

a,
button,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.button {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

::-moz-selection {
  background-color: #333;
  color: #fff;
}

::selection {
  background-color: #333;
  color: #fff;
}

a {
  color: #e5554e;
  text-decoration: none;
}

a:hover {
  /* color: #333; */
  /* Removed in favor for dark mode dynamic switching */
  color: #e5554e;
}

p {
  margin: 0 0 28px;
  padding: 0;
}

ol,
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
}

b,
strong {
  font-weight: 700;
}

blockquote,
cite,
em,
i {
  font-style: italic;
}

blockquote {
  margin: 40px;
}

blockquote::before {
  content: "\201C";
  display: block;
  font-size: 30px;
  height: 0;
  left: -20px;
  position: relative;
  top: -10px;
}

/* ## Headings
--------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Removed in favor for dark mode dynamic switching */
  /* color: #333; */
  font-family: Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 10px;
}

h1 {
  font-size: 36px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

/* ## Objects
--------------------------------------------- */

embed,
iframe,
img,
object,
video {
  max-width: 100%;
}

img {
  height: auto;
}

/* ## Forms
--------------------------------------------- */

input,
select,
textarea {
  border: 1px solid #ddd;
  /* Removed in favor for dark mode dynamic switching */
  /* color: #333; */
  font-size: 18px;
  font-weight: 300;
  padding: 16px;
  width: 100%;
}

input:focus,
textarea:focus {
  border: 1px solid #999;
  outline: none;
}

input[type="checkbox"],
input[type="image"],
input[type="radio"] {
  width: auto;
}

::-moz-placeholder {
  /* Removed in favor for dark mode dynamic switching */
  /* color: #333; */
  font-weight: 300;
  opacity: 1;
}

::-webkit-input-placeholder {
  /* Removed in favor for dark mode dynamic switching */
  /* color: #333; */
  font-weight: 300;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
  /* Removed in favor for dark mode dynamic switching */
  /* background-color: #333; */
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  font-weight: 300;
  padding: 16px 24px;
  text-transform: uppercase;
  width: auto;
}

button:hover,
input:hover[type="button"],
input:hover[type="reset"],
input:hover[type="submit"],

.button {
  display: inline-block;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button {
  display: none;
}

/* ## Tables
--------------------------------------------- */

table {
  border-collapse: collapse;
  border-spacing: 0;
  line-height: 2;
  margin-bottom: 40px;
  width: 100%;
}

tbody {
  border-bottom: 1px solid #ddd;
}

td,
th {
  text-align: left;
}

td {
  border-top: 1px solid #ddd;
  padding: 6px 0;
}

th {
  font-weight: 400;
}

/* # Structure and Layout
---------------------------------------------------------------------------------------------------- */

/* ## Site Containers
--------------------------------------------- */

.site-inner,
.wrap {
  margin: 0 auto;
  max-width: 3400px; /* jpm was: 1200px; */
}

.site-inner {
  clear: both;
  /* POB */
  /* padding-top: 10px; */
  /* padding-top: 40px; */
  margin-bottom: 25px;
}

/* ## Column Widths and Positions
--------------------------------------------- */

/* ### Wrapping div for .content and .sidebar-primary */

.content-sidebar-sidebar .content-sidebar-wrap,
.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  width: 980px;
}

.content-sidebar-sidebar .content-sidebar-wrap {
  float: left;
}

.sidebar-content-sidebar .content-sidebar-wrap,
.sidebar-sidebar-content .content-sidebar-wrap {
  float: right;
}

/* ### Content */

.content {
  /*float: right;*/
  width: 800px;
}

.content-sidebar .content,
.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content {
  float: left;
}

.content-sidebar-sidebar .content,
.sidebar-content-sidebar .content,
.sidebar-sidebar-content .content {
  width: 580px;
}

.full-width-content .content {
  width: 100%;
}

/* ### Primary Sidebar */

.sidebar-primary {
  float: right;
  width: 360px;
}

.sidebar-content .sidebar-primary,
.sidebar-sidebar-content .sidebar-primary {
  float: left;
}

/* ### Secondary Sidebar */

.sidebar-secondary {
  float: left;
  width: 180px;
}

.content-sidebar-sidebar .sidebar-secondary {
  float: right;
}

/* ## Column Classes
--------------------------------------------- */
/* Link: http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css */

.five-sixths,
.four-sixths,
.one-fourth,
.one-half,
.one-sixth,
.one-third,
.three-fourths,
.three-sixths,
.two-fourths,
.two-sixths,
.two-thirds {
  float: left;
  margin-left: 2.564102564102564%;
}

.one-half,
.three-sixths,
.two-fourths {
  width: 48.717948717948715%;
}

.one-third,
.two-sixths {
  width: 31.623931623931625%;
}

.four-sixths,
.two-thirds {
  width: 65.81196581196582%;
}

.one-fourth {
  width: 23.076923076923077%;
}

.three-fourths {
  width: 74.35897435897436%;
}

.one-sixth {
  width: 14.52991452991453%;
}

.five-sixths {
  width: 82.90598290598291%;
}

.first {
  clear: both;
  margin-left: 0;
}

/* # Common Classes
---------------------------------------------------------------------------------------------------- */

/* ## Titles
--------------------------------------------- */

.archive-title {
  font-size: 20px;
}

.entry-title {
  font-size: 36px;
}

.entry-title a:hover {
  color: #e5554e;
}

/* ## WordPress
--------------------------------------------- */

a.aligncenter img {
  display: block;
  margin: 0 auto;
}

a.alignnone {
  display: inline-block;
}

.alignleft {
  float: left;
  text-align: left;
}

.alignright {
  float: right;
  text-align: right;
}

a.alignleft,
a.alignnone,
a.alignright {
  max-width: 100%;
}

img.centered,
.aligncenter {
  display: block;
  margin: 0 auto 24px;
}

img.alignnone,
.alignnone {
  margin-bottom: 12px;
}

a.alignleft,
img.alignleft {
  margin: 0 24px 24px 0;
}

a.alignright,
img.alignright {
  margin: 0 0 24px 24px;
}

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
  min-height: 15px;  /* jpm: tighten it up    75px; */
}

.site-header .wrap {
  /* padding: 40px 0; */
  padding: 5px 0px;
}

/* ## Title Area
--------------------------------------------- */

.title-area {
  float: left;
  /* padding: 10px 0; */
  width: 330px;
  padding-left: 30px;  /* jpm on rpi was almost cut off; should match padding of wx-stn-info-container */
}

.header-full-width .title-area {
  width: 100%;
}

.site-title {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
}

.header-image .site-title > a {
  /* background: url('') no-repeat left; */
  float: left;
  min-height: 80px;
  width: 100%;
}

.site-description {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

.site-description,
.site-title {
  margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
  display: block;
  text-indent: -9999px;
}

/* ## Widget Area
--------------------------------------------- */

.site-header .widget-area {
  float: right;
  text-align: right;
  width: 800px;
}

/* # Site Navigation
---------------------------------------------------------------------------------------------------- */

.genesis-nav-menu {
  clear: both;
  font-size: 16px;
  line-height: 1;
  width: 100%;
}

.genesis-nav-menu .menu-item {
  display: inline-block;
  text-align: left;
}

.genesis-nav-menu a {
  color: #333;
  display: block;
  padding: 5px 24px;/* jpm was: 30px 24px;  30px was vertical, 24px was horiz*/
}

.genesis-nav-menu a:hover,
.genesis-nav-menu .current-menu-item > a,
.genesis-nav-menu .sub-menu .current-menu-item > a:hover {
  color: #e5554e;
}

.genesis-nav-menu .sub-menu {
  left: -9999px;
  opacity: 0;
  position: absolute;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -ms-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
  width: 200px;
  z-index: 99;
}

.genesis-nav-menu .sub-menu a {
  border: 1px solid #eee;
  border-top: none;
  font-size: 14px;
  padding: 20px;
  position: relative;
  width: 200px;
}

.genesis-nav-menu .sub-menu .sub-menu {
  margin: -55px 0 0 199px;
}

.genesis-nav-menu .menu-item:hover {
  position: static;
}

.genesis-nav-menu .menu-item:hover > .sub-menu {
  left: auto;
  opacity: 1;
}

.genesis-nav-menu > .first > a {
  padding-left: 0;
}

.genesis-nav-menu > .last > a {
  padding-right: 0;
}

.genesis-nav-menu > .right {
  color: #fff;
  float: right;
  list-style-type: none;
  padding: 30px 0;
}

.genesis-nav-menu > .right > a {
  display: inline;
  padding: 0;
}

.genesis-nav-menu > .rss > a {
  margin-left: 48px;
}

.genesis-nav-menu > .search {
  padding: 10px 0 0;
}

/* ## Site Header Navigation
--------------------------------------------- */

.site-header .sub-menu {
  border-top: 1px solid #eee;
}

.site-header .sub-menu .sub-menu {
  margin-top: -56px;
}

.site-header .genesis-nav-menu li li {
  margin-left: 0;
}

/* ## Primary Navigation
--------------------------------------------- */

.nav-primary .genesis-nav-menu a {
  color: #fff;
}

.nav-primary .genesis-nav-menu a:hover,
.nav-primary .genesis-nav-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
  color: #e5554e;
}

/* ## Secondary Navigation
--------------------------------------------- */

/* # Content Area
---------------------------------------------------------------------------------------------------- */

/* ## Entries
--------------------------------------------- */

.entry {
  margin-bottom: 40px;
  /* padding: 50px 60px; */
  padding: 10px;
}

.entry-content ol,
.entry-content ul {
  margin-bottom: 28px;
  margin-left: 40px;
}

.entry-content ol > li {
  list-style-type: decimal;
}

.entry-content ul > li {
  list-style-type: disc;
}

.entry-content ol ol,
.entry-content ul ul {
  margin-bottom: 0;
}

/* ## Entry Meta
--------------------------------------------- */

p.entry-meta {
  font-size: 16px;
  margin-bottom: 0;
}

.entry-header .entry-meta {
  margin-bottom: 24px;
}

.entry-footer .entry-meta {
  border-top: 2px solid #f5f5f5;
  padding-top: 24px;
}

.entry-categories,
.entry-tags {
  display: block;
}

.entry-comments-link::before {
  content: "\2014";
  margin: 0 6px 0 2px;
}

/* # Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
  background-color: #333;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 20px 0;
  /* text-align: center; */
}

.site-footer p {
  margin-bottom: 0;
}

.site-footer a:hover {
  color: #e5554e;
}

/* Responsive Menu
--------------------------------------------- */
.responsive-menu-icon {
  cursor: pointer;
  display: none;
}

.responsive-menu-icon::before {
  content: "\f0c9";
  display: block;
  font: normal 30px/1 "FontAwesome";
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  color: #000;
}


/* clear means that any element with the class .clear will not allow any floated elements (left or right) to be on its sides—it will "clear" them. This is used to force an element to move below any preceding elements that are floated. */
.clear {
  clear: both;
}

.row {
  margin-left: 0px;
  margin-right: 0px;
}

.center {
  text-align: center;
  margin: 0 auto;
}
.footerCenter {
  text-align: center;
}
.footerRight {
  text-align: right;
}

/* Custom wx page */

.weewx table {
  margin-bottom: 0px;
  line-height: inherit;
}

.weewx tbody,
.weewx td {
  border: none;
  padding: 0;
}

.wx-content {
  width: 100%;
}

.toprow-height {
  min-height: 375px !important;
}

.border-top {
  border-top: 1px solid #d7d7d7 !important;
}

.border-bottom {
  border-bottom: 1px solid #d7d7d7 !important;
}

.border-left {
  border-left: 1px solid #d7d7d7 !important;
}

.border-right {
  border-right: 1px solid #d7d7d7 !important;
}

.weather-obs-top {
  /* min-height:205px !important; */
  min-height: 234px !important;
}

.updated-wrapper {
  float: left;
}

.updated {
  display: inline-block;
  margin-bottom: 5px;
}

.onlineMarkerOuter {
  /* width: 30px; */
  /* height: 30px; */
  /* text-align: center; */
  padding: 6px 0 0 15px;
  /* display:inline-block; */
  float: left;
}

.loadingMarker:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 4px 0 0 -13px;
  background: #ffbe00;
  border-color: #ffbe00;
  border-radius: 50%;
}

.offlineMarker:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 4px 0 0 -13px;
  background: #ff0000;
  border-color: #ff0000;
  border-radius: 50%;
}

.onlineMarker:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  margin: 4px 0 0 -13px;
  background: #00bb00;
  border-color: #00bb00;
  border-radius: 50%;
}

.onlineMarker:after {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  margin: -8px 0 0 -25px;
  border: 1px solid #00bb00;
  border-radius: 50%;
  box-shadow: 0 0 4px #00bb00, inset 0 0 4px rgb(56, 111, 169);
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-animation: online 2.5s ease-in-out infinite;
  animation: online 2.5s ease-in-out infinite;
}

@-webkit-keyframes online {
  0% {
    -webkit-transform: scale(0.1);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(2.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes online {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.wx-header-temperature {
  float: left;
  width: 90px;
  text-align: center;
  margin: 0 auto;
}

.wx-header-temperature img {
  height: 50px;
}

.wx-stn-info-container {
  width: 100%;
  border-bottom: 1px solid #d7d7d7;
  padding-bottom: 10px;
  padding-left: 30px;         /* on rpi was almost being cut off jpm */
}

.wx-stn-info-current-obs {
  text-align: center;
}

.obs-header-icon,
.obs-header-outtemp,
.wx-stn-info,
.wx-stn-info-social {
  display: block;
}

.wx-stn-name {
  float: left;
}
.wx-stn-name h1 {
  font-size: 32px;
}

.wx-stn-share,
.wx-stn-info {
  float: right;
  margin-right: 10px;
}

.wx-stn-share iframe {
  max-width: initial !important;
}

.wx-stn-alert {
  display: none;
  width: 100%;
}

.wx-stn-alert i {
  color: red;
}

.wx-fb,
.wx-share-sep,
.wx-twitter {
  display: inline-block;
}

.wx-share-sep {
  margin: 0px 5px;
}

/* Custom styling for the share buttons */
.fb_iframe_widget span,
.twitter-share-button {
  vertical-align: middle !important;
}

.row1,
.row2,
.forecastrow {
  border-bottom: 1px solid #d7d7d7;
}

.temp-observation {
  padding-top: 5px;
}

.station-observations-label {
  min-width: 100px;
}

.current_wind {
  text-align: center;
  line-height: 1;
  font-size: 14px;
  padding: 0px !important;
}

.current-obs-container {
  text-align: center;
  padding: 0px !important;
}

.current_obs_top {
  padding-top: 8px !important;
}

.current-obs-text {
  text-align: center;
  font-size: 20px;
}

.aqi_outer {
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
}

.aqi_location_outer {
  text-align: center;
  font-size: 14px;
}

#wxicon {
  display: block;
  margin: 0 auto;
}

.outtempunitlabelsuper {
  top: -1em;
  font-size: 50%;
}

.feelslike {
  /* jpm: text-align: center; */
  font-size: 20px;
  font-weight: bold;
}

.stn-high-low {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 15px;
  line-height: 1.3;
}

.stn-high-low-table td {
  text-align: center;
  width: 50%;
  font-weight: bold;
}

.obs-wind-divider {
  height: 1px;
  width: 105%;
  background-color: #d7d7d7;
}

.windrow {
  /* margin-top: 25px; */
  /* box-sizing: border-box; */
  border-top: 1px solid #d7d7d7;
  padding-top: 10px;
  /* padding-right: 15px; */
  /* margin: 0 -15px 0 -15px; */
  margin: -1px 0 0 0;
  /* width: 105%;	*/
}

.curwind {
  margin-top: -10px;
  line-height: initial;
}

.current_wind {
  /* padding:20px 0px 0px 0px !important; */
  padding: 10px 0px 0px 0px !important;
}

.windspeedtable {
  padding-top: 10px;
}

.wind-arrow-container {
  margin-top: -8px;
  margin-bottom: 5px;
}

.wind-arrow {
  font-size: 50px !important;
  padding: 3px 18px 0px 15px;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  color: #808080;
  border: 3px solid #808080;
  behavior: url(PIE.htc); /* remove if you don't care about IE8 */
  transition: -webkit-transform 1s ease-in;
}

/* https://codepen.io/xixao/pen/OPovyN */
.compass {
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  position: relative;
  color: #555;
  border: solid #808080 5px;
  margin-left: 60px;
  /* margin-top: -10px; */
  margin: 0 auto;
}

.compass:before {
  font-weight: bold;
  position: absolute;
  text-align: center;
  width: 100%;
  font-size: 14px;
  top: -2px;
}

.direction {
  height: 100%;
  width: 100%;
  display: block;
  /* background: #f2f6f5; */
  /* background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); */
  /* background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6)); */
  /* background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); */
  /* background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%); */
  border-radius: 100%;
}

.direction .curwinddir {
  font-size: 25px;
  padding-top: 22px;
  display: block;
}
.direction .curwinddeg {
  font-size: 21px;
}

.arrow {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  transition: -webkit-transform 1s ease-in;
}
.arrow:after {
  content: "";
  width: 0;
  height: 0;
  /* border-left: 5px solid transparent; */
  /* border-right: 5px solid transparent; */
  /* border-bottom: 10px solid red; */
  /* top: -6px; */
  /* left: 50%; */
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  /* border-bottom: 21px solid red; */
  /* border-top: 21px solid red; */
  border-top: 21px solid #c50a1d;
  position: absolute;
  top: -10px;
  left: 38px;
  /* margin-left: -5px; */
  z-index: 99;
}

.wind-table td {
  text-align: center !important;
  width: 50%;
}

.windtext {
  font-size: 20px;
}

.curwindspeed,
.curwindgust {
  font-size: 30px;
}

.mph {
  padding-top: 10px !important;
  font-size: 18px !important;
}

.wind-table .beaufort {
  padding-top: 8px;
  font-size: 18px;
}

.wx-pressure-trend {
  color: #808080;
  font-size: 20px;
  line-height: 1;
  padding-left: 5px;
}

.barometer-up {
  transform: rotate(45deg);
}

.barometer-down {
  transform: rotate(315deg);
}

.small-almanac {
  /* padding-top:5px; */
  border-top: 1px solid #d7d7d7;
  /* padding:15px; */
  padding: 0px 15px 0px;
  margin: 0 -15px 0 -15px;
}

.sun,
.moon {
  padding: 0px !important;
}

.sunrise-set-image {
  width: 20px;
  margin-right: 5px;
}

.sun-moon-title {
  font-size: 25px;
  text-align: left;
  padding-bottom: 10px;
}

.sun-moon-modal {
  width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
}

.page .sun-moon-modal a {
  text-decoration: none;
}

/* Flip the weather icons for southern hemisphere */
.southern-hemisphere {
  -moz-transform: scale(-1, 1);
  -webkit-transform: scale(-1, 1);
  -o-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}

.light .label {
  color: #333 !important;
}

.celestial_body {
  display: inline-block;
  margin-right: 22px;
}

table.celestial td.label {
  min-width: 140px !important;
  display: inline-block;
  text-align: left;
  font-size: initial;
}

/* Scroll issue in dark mode https://stackoverflow.com/a/54196631/1177153 */
.modal {
  overflow-y: auto !important;
}

.moon-container {
  font-size: 15px;
  color: #808080;
}

.moon {
  text-align: right;
}

.moon-icon {
  font-size: 20px;
}

.radar-map {
  padding: 5px 5px 0px 5px !important;
}

.forecastrow {
  text-align: center;
}

.row-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.forecast-title {
  text-align: left;
  font-size: 25px;
  margin-bottom: 5px;
  padding-right: 0 !important;
}

.forecast-subtitle {
  font-size: 14px;
}

.forecast-menu {
  display: inline-block;
  position: relative;
  height: 40px;
  padding-left: 0 !important;
  text-align: right;
  font-size: 16px;
}

.forecast-button {
  box-sizing: border-box;
  display: inline-block;
  margin: 10px 5px 0px;
  border-style: hidden;
  border-color: #d7d7d7;
  border-radius: 5px;
  border-width: 2px;
  padding: 0px 10px;
}

.forecast-button:hover {
  cursor: pointer;
}

.forecast-conditions {
  min-height: 160px;
  word-wrap: break-word;
}

.forecast-image {
  height: 50px;
}

.forecast-conditions-1hour {
  min-height: 144px;
  word-wrap: break-word;
}

.forecast-high,
.forecast-low {
  font-size: 20px;
  font-weight: 500;
}

.forecast-temp-graph {
  font-size: 20px;
  font-weight: 250;
  height: 179px; /* 179 critical to align 1, 3 & 24hr forecasts */
}

.forecast-precip,
.forecast-wind {
  font-size: 15px;
}

.snow-precip,
.rain-precip {
  color: #42b5e7;
}

.rain-no-precip {
  color: #808080;
}

.earthquake-container {
  font-size: 18px;
  text-align: center;
  min-height: 180px;
}

.earthquake-container .earthquake-distance-outer {
  min-height: 64px;
}

.snapshot-records-text {
  text-align: center;
}
.eq-title {
  font-size: 24px;
  text-align: center;
  margin: 10px 0px;
}

/* Weather Snapshot Block Styles */
.weather-snapshot-block {
  padding: 12px 8px;
  width: 100%;
}

.snapshot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding: 3px 0;
  border-bottom: 1px solid #eee;
  min-height: 28px;
}

.snapshot-row:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.snapshot-label {
  font-weight: bold;
  color: #333;
  min-width: 75px;
  flex-shrink: 0;
  margin-right: 6px;
}

.snapshot-value {
  text-align: right;
  color: #666;
  flex-grow: 1;
  line-height: 1.2;
  font-weight: bold;
}

/* Custom class to control font size of all snapshot stats elements */

.temp-time,
.wind-time,
.rain-time {
  font-size: 1.0em;
  color: inherit;
  font-style: normal;
  margin-left: 4px;
  white-space: nowrap;
  font-weight: bold;
}


/* # Media Queries
---------------------------------------------------------------------------------------------------- 
*/

@media (min-width: 576px) and (max-width: 767px){  /* col-sm  >= 576px */
  .row1 .outtemp{
    font-size: 15px;
    font-weight: bold;
  }
  .row1 .feelslike {
    font-size: 15px;
    font-weight: bold;
  }

}

@media  (min-width: 768px) and (max-width: 991px) { /* col-md* >= 768px */
  .row1 .outtemp{
    font-size: 20px;
    font-weight: bold;
  }
  .row1 .feelslike {
    font-size: 20px;
    font-weight: bold;
  }
  .themeSwitchLabel {
    margin-top: 10px;
  }

  .header-image .site-title > a {
    background-position-x: center;
    background-position-y: center;
    margin-bottom: 20px;
  }

  .site-footer {
    text-align: center !important;
  }
  .footerLeft {
    padding-bottom: 10px;
  }
  .footerRight {
    text-align: center;
    padding-top: 10px;
  }

  .current_obs_top img {
    float: left;
    width: 30%;
    height: auto;
  }

  .current_temp {
    padding-top: 0px !important;
  }

  .current_temp  {
    font-size: 55px;
  }

  .windrow {
    padding-top: 0px;
  }

  .weewx h1 {
    font-size: 27px;
  }

  .breadcrumb {
    display: none;
  }

  .border-left {
    border-left: 0px !important;
  }

  .border-right {
    border-right: 0px !important;
  }

  .wx-stn-info-container {
    text-align: center;
  }

  .obs-header-icon,
  .obs-header-outtemp {
    display: inline-block;
  }

  .obs-header-icon {
    width: 25%;
  }

  .wx-stn-name {
    float: none;
  }

  .wx-stn-share,
  .wx-stn-info {
    display: none;
    float: none !important;
    text-align: center;
  }

  .updated-wrapper {
    float: none;
    margin-bottom: 5px;
  }

  .updated {
    display: initial;
  }

  .current_obs {
    padding: 10px 0px !important;
  }

  .windrow {
    border-bottom: 1px solid #d7d7d7;
    /* padding-bottom:10px; */
    padding: 20px 0px;
  }

  .wind-table td {
    padding: 0 5px;
  }

  .windspeedtable {
    /* float:left; */
    float: right;
  }

  .current_wind {
    /* padding: 10px 0px 0px 0px !important; */
    padding: 0px !important;
  }

  .compass {
    margin-left: 0px;
    margin-top: 0px;
    /* margin: 0 auto; */
    float: left;
    /* margin: 0 35px; */
  }

  .sun {
    float: left;
  }
  .moon {
    float: right;
  }

  .page .sun-moon-modal a {
    font-size: 20px;
  }

  .forecast-subtitle {
    display: block;
  }

  .forecast-day {
    font-size: 28px;
    /* min-height: 170px !important;  DarkSky */
    min-height: 175px !important;
    /* border-bottom:1px solid #D7D7D7; */
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .forecast-day::after {
    background-color: #d7d7d7;
    bottom: 0;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    transform: translate(-50%, 0);
    width: 85%;
  }

  .forecast-1hour {
    width: 25% !important;
  }

  .forecast-temp-graph {
    padding-top: 0px !important;
    height: 75px !important;
  }

  .forecast-temp-graph img {
    width: 50% !important;
    height: auto;
  }

  .forecast-condition-text {
    display: block;
  }

  .forecast-precip,
  .forecast-wind {
    font-size: 16px;
    /* display:inline-block !important; */
  }

  .forecast-conditions {
    min-height: 90px;
  }

  .forecast-conditions img {
    width: 30%;
    height: auto;
  }

  .earthquake-container {
    margin-top: 20px;
    border-top: 1px solid #d7d7d7;
    padding-bottom: 10px;
  }

  .stn-quick-stats {
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-top: 15px;
  }

  .records-table {
    word-break: break-all;
  }

  .records table {
    table-layout: fixed;
    width: 100%;
  }

  /* Responsive tables from: https://css-tricks.com/responsive-data-tables/ */
  /* Force table to not be like tables anymore */
  table,
  thead,
  tbody,
  th,
  td,
  tr,

  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  tr {
    border: 0px;
  }

  td {
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    /* display:block; POB Added */
  }

  td:before {
    /* Now like a table header */
    position: absolute;
    /* Top/left values mimic padding */
    top: 6px;
    left: 6px;
    width: 45%;
    padding-right: 10px;
    white-space: nowrap;
  }

  .col-sm-1-5 {
    padding-left: 0px;
    padding-right: 0px;
    width: 45%;
    font-size: 18px;
  }

  .row {
    margin-right: 0px;
    margin-left: 0px;
  }
}

/* start scaling back based on width */
@media  (min-width: 992px) and (max-width: 1199px) { /* col-lg* >= 992px */
  .site-inner,
  .wrap {
    max-width: 960px;
  }
  .row1 .outtemp{
      font-size: 22px;
      font-weight: bold;
    }
  .row1 .feelslike {
    font-size: 22px;
    font-weight: bold;
  }
  .content-sidebar-sidebar .content-sidebar-wrap,
  .sidebar-content-sidebar .content-sidebar-wrap,
  .sidebar-sidebar-content .content-sidebar-wrap {
    width: 740px;
  }

  .content,
  .site-header .widget-area {
    width: 620px;
  }

  .sidebar-content-sidebar .content,
  .sidebar-sidebar-content .content,
  .content-sidebar-sidebar .content {
    width: 400px;
  }
  
  
  .small-almanac,
  .snapshot-font-large .weather-snapshot-block,
  .snapshot-font-large .snapshot-label,
  .snapshot-font-large .snapshot-value,
  .temp-time, 
  .wind-time, 
  .rain-time {
    font-size: .8em;
    font-weight: normal;
  }
}

@media (min-width: 1200px)  { /* col-xl* >= 1200px */

}

/* for display on wall */
@media (min-width: 3000px)  { /* col-xl* >= 992px */
  .row1 .stn-quick-stats {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
  .row1 .outtemp{
      font-size: 40px;
      font-weight: bold;
    }
    .row1 .feelslike {
      font-size: 40px;
      font-weight: bold;
    }
  .weather-snapshot-block {
    padding: 12px 8px;
  }

  .snapshot-label {
    min-width: 85px;
    font-size: 0.9em;
  }

  .snapshot-value {
    font-size: 0.9em;
  }

  /* Reduce container padding on large screens */
  .row1 {
    margin-left: -5px;
    margin-right: -5px;
  }

  .row1 > [class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
  }

  .stats-title,
  .moon-container,
  .small-almanac {
    font-size: 1.1em;
    font-weight: bold;
  }

  .snapshot-font-large .weather-snapshot-block,
  .snapshot-font-large .snapshot-label,
  .snapshot-font-large .snapshot-value {
    font-size: 1.5em;
  }

}

.stats-title {
  font-size: 20px;
}

.eq-source {
  font-size: 12px;
}

.wx-graph-front {
  font-size: 24px;
  padding-top: 30px;
  /* font-size:25px; */
  /* padding-top:10px; */
  padding-bottom: 10px;
  text-align: center;
}

.graph-outer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

/* Chart container aspect ratio fix */
.graph-outer .col-sm-6 {
  aspect-ratio: 16/9; /* Maintain 16:9 aspect ratio */
  max-height: 500px; /* Prevent excessive growth */
  min-height: 300px; /* Ensure minimum usable height */
}

/* Alternative fallback for browsers that don't support aspect-ratio */
@supports not (aspect-ratio: 16/9) {
  .graph-outer .col-sm-6 {
    height: 400px; /* Fixed height fallback */
    max-height: 500px;
  }
}

/* Hide empty chart containers that haven't been populated by JavaScript */
.graph-outer .col-xl-6:not(:has(*)) {
  display: none;
}

/* Alternative fallback for browsers that don't support :has() pseudo-class */
.graph-outer .col-xl-6:empty {
  display: none;
}

/* span.highcharts-title { */
/* width: 100% !important; */
/* text-align: center !important; */
/* } */

.wx-buttons {
  margin: 0 auto;
  text-align: center;
  margin-top: 20px;
  line-height: 40px;
}

.wx-buttons-description {
  font-size: 30px;
  font-weight: 400;
  text-align: center;
  padding: 10px 0px;
}

.wx-records-description {
  margin: 25px 0px;
}

.records table {
  border: 1px solid #d7d7d7;
}

.records td {
  padding: 0px 10px;
}

.records .leftborder {
  border-left: 1px solid #d7d7d7;
}

.records-header {
  text-align: center;
  background: #d7d7d7;
  color: #000;
  font-weight: 400;
}

.records-header-year {
  text-align: center;
  background: #3da5f4;
  color: #fff;
  font-weight: 400;
}

.records-header-alltime {
  text-align: center;
  background: #375a7f;
  color: #fff;
  font-weight: 400;
}

.wx-year-row {
  text-align: center;
  margin-bottom: 25px;
}

.noaa_reports {
  margin-top: 40px;
  /* padding-top:30px; */
}

#noaa_contents {
  width: 75%;
  margin: 0 auto;
}

/* .col-sm-1-5 { */
.forecast-day {
  position: relative;
  /* min-height: 250px; DarkSky */
  min-height: 225px;
  padding-left: 10px;
  padding-right: 10px;
  /* width: 10%; */
  /* float:left; */
  display: inline-block;
  width: 165px;
}

.forecast-1hour {
  position: relative;
  min-height: 270px;
  padding-left: 5px;
  padding-right: 5px;
  display: inline-block;
  width: 72px;
  font-size: 75%;
}

.forecast-3hour {
  position: relative;
  min-height: 270px;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  width: 144px;
  font-size: 100%;
}

.forecast-24hour {
  position: relative;
  min-height: 270px;
  padding-left: 10px;
  padding-right: 10px;
  display: inline-block;
  width: 165px;
}

/* Dark Mode Switch */

.themeSwitchLabel {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 19px;
}

.themeSwitchLabel input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 11px;
  width: 11px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #375a7f;
}

input:focus + .slider {
  box-shadow: 0 0 1px #375a7f;
}

input:checked + .slider:before {
  -webkit-transform: translateX(16px);
  -ms-transform: translateX(16px);
  transform: translateX(16px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* End Dark Mode Switch */

/* Custom Raspberry Pi Kiosk Page */
body.pi {
  /* font-family:initial; */
  font-weight: normal;
  padding: 0px;
  overflow: hidden;
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}
body.pi::-webkit-scrollbar {
  width: 0 !important;
}

/* bold kiosk display font if chosen in skin.conf or weewx.conf */
.pi .site-inner-bold {
  font-weight: bold;
}

.pi .wx-stn-info-container {
  padding-bottom: 0px;
}

.pi .updated-wrapper {
  padding-left: 25px;
  margin-bottom: 5px;
  float: none;
}

.pi .onlineMarkerOuter {
  padding: 7px 0 0 25px;
}

.pi .site-inner,
.pi .wrap {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0px;
}
.pi .entry {
  margin-bottom: 0px;
}

.pi .col-xs-6 {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.pi .col-md-3 {
  padding: 0px !important;
}

.pi .wx-content {
  padding-top: 0px;
}

.pi #wxicon {
  display: initial;
  margin: initial;
}

.pi .updated {
  padding-top: 0px;
  padding-left: 5px;
  margin-bottom: 0px;
  font-size: 16px;
  float: left;
}

.pi .obs-group {
  line-height: 25px;
  margin-top: 17px;
  /* text-align: center; */
}

.pi .outtemp {
  font-size: 40px;
  font-weight: bold;
  float: right;
  margin-top: 11px;
  margin-right: 0px;
}

.pi .current-obs-text {
  font-size: 25px;
  text-align: center;
}

.pi .temp-observation {
  padding-top: 0px;
}

.pi .temp-observation img {
  width: 70px;
  height: auto;
}

.pi .weather-obs-top {
  min-height: initial !important;
}

.pi .current_temp,
.pi .current_wind,
.pi .current-obs-container,
.pi .feelslike,
.pi .stn-high-low-table td {
  text-align: initial;
}

.pi .current_temp {
  padding-top: 0px !important;
}

.pi .tempstats {
  /*font-size:16px;
        line-height:20px;*/
  font-size: 18px;
  line-height: 20px;
  margin-top: 10px;
}

.pi .feelslike {
  font-size: 18px;
  text-align: center;
  padding-bottom: 0px;
}

.pi .highlow {
  /*display:inline;*/
  text-align: center;
  padding-bottom: 6px;
  /*margin: 0 auto;*/
}

.pi .wind_col {
  text-align: center;
  padding-top: 5px;
}

.pi .wind_data {
  margin-bottom: 8px;
}

.pi td {
  display: initial;
}

.pi .windtext {
  font-size: initial;
  display: inline-block;
  line-height: 20px;
  padding-left: 15px;
}

.pi .wind-table {
  margin-top: 0px !important;
}

.pi .wind-table td {
  display: table-cell;
}

.pi .compass {
  margin-left: 62px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.pi .direction .curwinddir {
  padding-top: 11px;
}

.pi .border-left {
  border-left: 1px solid #d7d7d7 !important;
}

.pi .row2 {
  border-bottom: 0px;
}

.pi .station-observations {
  font-size: 18px;
  line-height: 20px;
  margin-top: 20px;
}

.pi .small-almanac {
  border-top: 0px;
  line-height: 20px;
  padding: 5px 0px 0px 0px;
}

.pi .maxgustouter {
  font-size: 18px;
  margin: 0px;
}

.pi .sunrise-set-image {
  width: 24px;
  margin-right: 6px;
}

.pi .moon-container {
  font-size: 16px;
  margin-top: 5px;
  line-height: 18px;
}

.pi .moon,
.pi .sun {
  float: none;
  text-align: center;
}

.pi .forecastrow .col-lg-12 {
  padding: 0;
}

.pi .forecast .weekday {
  padding-bottom: 10px;
}

.pi .forecast-conditions img {
  width: 70%;
  height: auto;
}

.pi .forecast .forecast-day {
  width: 24% !important;
  height: 100%;
  border-bottom: 0px;
  padding: 20px 0px 15px;
}

.pi .forecast-condition-text {
  height: 70px;
}

.pi .forecastrow {
  border-bottom: 0px;
}

/* Back to top button */
#btn-back-to-top {
  position: fixed;
  transform: scale(0);
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 99;
}

#btn-back-to-top:focus,
#btn-back-to-top:hover {
  outline: none;
}

#btn-back-to-top:hover .fa-arrow-up {
  animation: jump 800ms infinite;
  animation-iteration-count: 3;
}

@keyframes jump {
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}