body {
margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-family:Lato, sans-serif

}

th,td {vertical-align:top; text-align:left}


/*Header*/
#header {
padding:1em; 

	background: -webkit-linear-gradient(#2b7297, #0f4764); /* For Safari 5.1 to 6.0 */
 	 background: -o-linear-gradient(#2b7297, #0f4764); /* For Opera 11.1 to 12.0 */
 	 background: -moz-linear-gradient(#2b7297, #0f4764); /* For Firefox 3.6 to 15 */
 	 background: linear-gradient(#2b7297, #0f4764); /* Standard syntax */
}

#logo h1 {color:#ffffff; font-weight:bold; font-size:2em; margin:0}
#tagline h2 {font-weight:100; margin:0; color:#90aebd; font-size:1em; text-transform:uppercase}


.errors {padding:.5em; background: #FFEDEC; border:1px solid #800; color:#800; border-radius:4px}

#weather_history {}
#weather_history .listtable {}
.dayblock {display:block; margin-bottom:2em}
.dayblock h2 {font-size:2em}
.eight_day_snofall {font-size:.85em; margin-bottom:.85em; color:#677D8D}
.tablecell {float:left;margin-right:1em}
.tablecell.reportbox {border-radius:.5em; background:#cde8f9; }
.label {font-weight:bold}
.tablecell .label {}
.tablecell .data {}
.clear {clear:both}

/*Navigation*/
#nav {
position: sticky;
    top: 0;
    z-index: 9999;

    color: #FFF;
    font-weight: bold;
    text-shadow: 0px -1px 1px #000;
    text-transform: uppercase;
    background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0% 0% #5393C5;
	
}

#nav ul {list-style: outside none none; margin:0; padding:0}
*#nav ul li {width: 25%; margin-right: -0.5px; margin: 0px;
padding: 0px;
border: 0px none;
float: left;
min-height: 1px;
box-sizing: border-box;

}


#nav ul li:last-child {
  width: 24.8%;
}

/*#nav ul li {width: 33.333%; margin-right: -0.5px; margin: 0px;
padding: 0px;
border: 0px none;
float: left;
min-height: 1px;
box-sizing: border-box;

}



#nav ul li:last-child {
  width: 33.2%;
}
*/
#nav ul li a {border-top-width: 0px;
border-bottom-width: 0px;
display: block;
text-align: center;
margin: 0px -1px 0px 0px;
border-right-width: 0px; z-index: 10; vertical-align: middle;
cursor: pointer;
position: relative;
padding:0;
border: 1px solid #2373A5;
background: linear-gradient(#5393C5, #6FACD5) repeat scroll 0% 0% #5393C5;
font-weight: bold;
color: #FFF;
cursor: pointer;
text-shadow: 0px 1px 1px #3373A5;
text-decoration: none;}

#nav ul li a:hover {

background: linear-gradient(#4980ab, #5d90b3) repeat scroll 0% 0% #447aa3;


}

#nav ul li a:active {

background: linear-gradient(#3c688b, #4e7996) repeat scroll 0% 0% #376384;


}

#nav ul li a.current {

background: linear-gradient(#3c688b, #4e7996) repeat scroll 0% 0% #376384;


}


#nav ul li a span {
padding: 1em 0.1em 1em; min-width: 0.75em;
display: block;
position: relative;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
border-top: 1px solid rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.3);
text-align:center;
font-weight: bold;
color: #FFF;
cursor: pointer;
text-shadow: 0px 1px 1px #3373A5;


}

#nav ul li a span {
    font-size: 0.85em;
}


/*popup*/
#popup_wrapper {background:#000000; opacity: 0.75; position:fixed; width:100%; height:100%; z-index:9900; top:0}
#popup_box{
	display:none;
  position: fixed;
  width: 50%;
  min-height: 70%;
  background: #ffffff;
  padding: 1em;
  border-radius: 10px;
  z-index: 9999;
  opacity: 1 !important;

  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  
  flex-direction: column;
  }

a#popup_close {border-radius: 50%; height:20px; width:20px; border:1px solid #B0B8CC; padding:5px; display:inline-block; float:right; font-weight:bold; cursor:pointer; color:#B0B8CC; text-align:center;}
a#popup_close:hover {color:#000000}
#popup_content { flex: 1;           /* fills all remaining height */
  overflow: auto;    /* scrolls if content is tall */
  margin-top: 35px;  /* keep your spacing */}


/*Graph*/
.graph_bar {background:#CED6DB}
.graph_entry {height:100%; background:#C33; display:inline-block; margin-right:1px; width:24%; margin-bottom:4px}
.graph {height:50%; font-size:60%}
#popup_content .graph {height:90%}
#popup_content .graph_title {font-size:2em; font-weight:bold; color:#576D80; margin-bottom:.5em}
.graph_label {padding:15%}
a.hourly_click {cursor:pointer}

/*Content*/
.contentbox {padding:2em;}
.contentbox h1 {color:#5a717c; font-size:2em; text-transform:capitalize}
.block {display:block}
.small {font-size:.85em}
.hideme {display:none}
a.onclicks { cursor:pointer; text-decoration:none; color:#85afc5; font-weight:900}
a.onclicks:hover {color:#4583a3}
a.onclicks:active {color:#034b70}
.superscript {
	font-size: 0.65em;
  vertical-align: super;
  margin-left: 0.1em;	
}

.header_elevation {color:#676767; font-size:.75em}
/*Warnings*/
.group_container {
    position: relative;
    margin-bottom: 4em;
   ; /* space for the rail */
	border-right:1px solid #dbe6ec;
	border-bottom:1px solid #dbe6ec;
}


.group_container2 {
    position: relative;
    margin-bottom: 4em;
   border-right:1px solid #dbe6ec;
	border-bottom:1px solid #dbe6ec;
	border-left:3px solid #dbe6ec;
	border-image: linear-gradient(to bottom, #7fb8d4, #dbe6ec) 1;
}



/* Vertical timeline rail */
.group_container::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        to bottom,
        #7fb8d4,
        #dbe6ec
    );
    border-radius: 2px;
}


.group_inner {
    background: linear-gradient(
        to right,
        #e6f3fb 0%,
        #f2f8fc 40%,
        #f6fbfe 100%
    );

    border-radius: 0 0 14px 0;
	padding:20px;
    padding-left: 30px;
	margin-left:10px;
}

/* Sticky group rail */
.group_rail {
    position: sticky;
    top: 48px; /* nav height */
    z-index: 800;

    background: #ffffff;

    padding: 0.75em 1em;
    margin-left: 13px;
	border-top:1px solid transparent;
	border-image: linear-gradient(to right, #7fb8d4, #dbe6ec) 1;

    border-top-right-radius: 8px;

    display: flex;
    justify-content: space-between;
    align-items: baseline;

    /* NEW */
    box-shadow: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.group_rail.stuck {
    box-shadow: 0 6px 18px rgba(0,0,0,0.16);
    transform: translateY(-1px);
}

/* Location title */
.group_title {
    font-size: 1.25em;
    font-weight: 800;
    color: #2b5d78;
}

/* Date range */
.group_dates {
    font-size: 0.8em;
    color: #6b8594;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.group_header {
    position: sticky;
    top: 48px; /* height of your main nav */
    z-index: 900;
    background: #ffffff;
    padding: 0.75em 1em;
    border-bottom: 1px solid #dbe6ec;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.group_header h2 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 700;
    color: #2b5d78;
}

#warnings {}
#warnings h1 {margin-bottom:1em}
.no_alerts {padding: 1em 1.25em;
    margin: .5em 0 .5em 1.5em;}
.warning {
    background: #ffffff;
    border-left: 6px solid #b94a48;
    border-radius: 8px;
    padding: 1em 1.25em;
    margin: 1em 0 1em 2.5em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

.warnings_not_issued_yet {
 background: #ffffff;
    border-left: 6px solid #F6EE7D;
    border-radius: 8px;
    padding: 1em 1.25em;
    margin: 1em 0 1em 2.5em;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.severity {
    margin-left: 0.5em;
    font-size: 0.85em;
    color: #7a1e1e;
}
.what_warning {
    font-weight: 700;
}
.warning_date {
    position: relative;
    margin: 1.5em 0 0.25em 1.5em;
    font-size: 0.85em;
    color: #6b8594;
}

.warning_date::before {
    content: "";
    position: absolute;
    left: -1.55em;
    top: 0.4em;
    width: 10px;
    height: 10px;
    background: #7fb8d4;
    border-radius: 50%;
}
.warning_details {
    margin-top: 0.75em;
    font-size: 0.85em;
    background: #f6fafc;
    padding: 0.75em;
    border-radius: 6px;
	display:none;
}
#warnings .onclicks {float:right; color:#a34e4e; font-weight:100}
@media (max-width: 768px) {
	
	.group_rail {
		margin-left:3px;	
	}
	
	.group_container::before {
    		left: 0px;
    		}
	.group_inner {
		padding-left:10px;
		margin-left:0px;
		}
	.warning {
	margin-left:20px	
	}
	
	.contentbox {
	padding-left:15px;
	padding-right:10px;
	}
	
}






/*Data*/
#data{display:none}
.weekly_history {}
table.datatable {border-collapse:collapse; width:100%; }
.tableheadings th.first {}
.tableheadings th {padding:1em; background:#75b4d5; color:#0f4764}
.tablerow.color_one {background:#f7fbfd}
.tablerow.color_two {background:#e9f4f9}
table.datatable td {padding:1em; color:#5a717c}
table.datatable th.date {padding:1em; color:#0f4764}
table.datatable th.time_of_day {padding:1em; color:#3a7da0}

.tabledata {float:left; margin-right:1em}

.stacktable { width: 100%; border-collapse:collapse;}
.st-head-row { padding: 1em; color:#0f4764; background:#a5c8db; font-size:.9em}
.toggle .st-head-row { padding: 1em; color:#0f4764; background:none; font-size:.9em; padding-bottom:6em}
.stacktable .tableheadings {}
.st-head-row.st-head-row-main { }
.st-key { width: 49%; padding:1em; color:#0f4764; font-weight:bold; border-bottom:.07em #a4a3a3 solid}
.st-val { width: 49%; padding:1em; color:#5a717c; border-bottom:.07em #a4a3a3 solid }

.hideme .st-head-row {color:#dddddd; background:#868787; font-size:1em}
.hideme .st-key {color:#868787; background:#c3cacd}
.hideme .st-val {color:#868787; background:#c3cacd}
.hideme a.onclicks {color:#85afc5; font-size:1em}
.hideme a.onclicks:hover {color:#e7e7e7}
.hideme a.onclicks:active {color:#ffffff}


.stacktable.large-only { display: table; }
.stacktable.small-only { display: none; }
.st-head-row .onclicks {color:#046284 !important}
.mobile_hourly th {background:#ffffff}
.mobile_hourly th.st-head-row {background:#e7e7e7 !important; color:#868787 !important}
.mobile_hourly td {background:#ffffff !important; color:#868787 !important}
.toggle .st-head-row {background:#c4cacd !important; color:#868787 !important}

/*Forecast Display*/
.forecast_area {background:#ffffff; border:1px solid #D5D2D5; padding:0.625rem; margin-bottom:2em; border-radius:10px; font-family: Lato, sans-serif;}
.forecast_days_wrapper {
    display: flex;
    flex-direction: row;
    align-items: stretch; /* <-- THIS is the magic */
    gap: 3px;
	flex-wrap: wrap; ; background:#F2F8F9
}
.forecast_area h4 {margin-top:0px; padding-top:0; font-size:.75em}
.forecast_area h2 {margin-bottom:0.25em; margin-top:0}
.forecast_day {display: flex;          /* NOT inline-flex anymore */
    flex-direction: column;
    width: 8em;
    padding: 1em;
    background: #EAFCFF;
    box-sizing: border-box;}



.forecast_snow_wrapper {text-align:center; font-weight:bold; font-size:1.5em; height:28px}
.forecast_snow_wrapper.sno_hi {opacity: 1;}
.forecast_snow_wrapper.sno_med {opacity: 0.7;}
.forecast_snow_wrapper.sno_lo {opacity: 0.4;}
.forecast_snow_wrapper.sno_no {opacity: 0.2;}
.forecast_date {background:#CADDEC;
    text-align:center;
    font-weight:bold;
    margin:.25em -1em -1em;
    padding:.5em;
    margin-top: auto;   /* THIS is the magic */}
.forecast_temps {text-align:center; margin-top:.4em;}
.forecast_hi {font-weight:bold}
.forecast_lo {}
.forecast_lastupdated {color:#AAA}
.forecast_days_summary {margin:2em; padding:1em; border-radius:4px; background:#F6E1F9;  color:#6E5C73}



.snolevel_parent {margin-top:.4em; display: flex;
  justify-content: center;
  align-items: center;}
.forecast_snolevel {background:#D9FBD2; border-radius:5px; text-align:center; font-size:.75em; padding:.35em; display: inline-block;}
.forecast_snolevel.snolevel_hi {background:#FFDBD9;}
.forecast_snolevel.snolevel_med {background:#FFF8C4;}
.forecast_others {text-transform:uppercase; font-size:.6em;margin-top:.4em; text-align:center}
h2 .current_temp {margin-left:1em; font-size:0.65em; color:#3D74B8; font-weight:normal}
.cam_box {display:inline-block; background:#EAFCFF; margin-right:5px; margin-bottom:2px}
.cam_box iframe {width:26em; height:15em; overflow:hidden; }

.cam_img {width:26em; height:15em; overflow:hidden; }
.cam_img img {width:100%}

@media (max-width: 900px) {
  .stacktable.large-only { display: none; }
  .stacktable.small-only { display: table; }
 
	.cam_img {width:100%; height:auto; overflow:hidden; }
  .cam_box iframe {width:100%; height:auto; overflow:hidden; }
 

}


@media (max-width: 768px) {
    .forecast_days_wrapper {
        flex-wrap: nowrap;          /* ❗ stop wrapping */
        overflow-x: auto;           /* horizontal scroll */
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch; /* smooth iOS scrolling */
        padding-bottom: 0.5em;      /* avoids scrollbar overlap */
    }

    .forecast_day {
        flex: 0 0 auto;             /* ❗ prevent shrinking */
    }
}

/*Snowpack*/
.snowpack_aspect_box h2 {padding: 0 1em}
#snowpack {display:none}
#snowpack_box {box-shadow: 0px .3em 1em rgba(0, 0, 0, 0.6); border-top-left-radius:1em; border-top-right-radius:1em;}
#total_snowpack_depth {padding:1em; color:#5f779c}
#start_snowpack_depth {padding:1em; color:#5f779c}
.layer .snowpack_title {text-transform:uppercase; font-weight:bold;}
.layer .extra_title {font-weight:normal; font-style:italic; text-transform:lowercase}
.layer .snowpack_date {float:right}
.layer {padding:1em; opacity: 0.8; filter: alpha(opacity=80);}
.layer:hover {opacity: 1.0; filter: alpha(opacity=100);}
.layer.normal_snow {background:#e6f9ff; color:#9fbfca}
.layer.crust {background:#346785; color:#17acaf7}
.layer.pooling {}
.layer.facets {background:#f0bb68; color:#857134}
.layer.strengthening {}
.layer.new_snow_on_crust {}
.layer.upside_down {}
.layer.good_bonding {}
.layer.surface_hoar {background:#f0d868; color:#857134}
.layer.new_snow {background:#bce6fe; color:#346785}
.layer.new_snow.warmsnow {background:#7acaf7; color:#346785}
.layer.new_snow.coldsnow {background:#ebf7fe; color:#346785}

.layer.too_warm {}
.layer.wind_slab {background:#328fc3; color:#addffb}
.layer.rain {}
.layer.bad_interaction {background:#facccc; color:#883d3d}
.layer.good_interaction {background:#e2fade; color:#598f4f}
.sublayer {margin-left:2em; font-size:smaller}
.state_of_interaction {font-style:italic}
.expected_layer_changes h2 {font-size:small}
.interaction_details {display:none}
.layer a.onclicks { cursor:pointer; text-decoration:none; color:#853434; font-weight:100; float:right;}
.layer a.onclicks:hover {color:#622020}
.layer a.onclicks:active {color:#410d0d}
.snowpack_aspect_box {width:12.5%; float:left}
a.headlink {color:#0099FF; font-size:9px;}
a.headlink:visited {color:#0099FF;}
a.headlink:hover {color:#85caf8}
#content {min-height:500px}
#footer {padding:2em; background:#e7e7e7; box-sizing: border-box;}


/*Show More*/
.load-more-wrap {
    display: flex;
    justify-content: center;
    padding: 1.5rem 0 2rem;
    position: relative;
}

/* subtle fade so it feels like "more below" */
.load-more-wrap::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    height: 40px;
    /*background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);*/
    pointer-events: none;
}

.js-load-more {
    appearance: none;
    border: 1px solid rgba(0,0,0,0.15);
    background: #f8f9fb;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    padding: 0.55rem 1.25rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Hover */
.js-load-more:hover {
    background: #eef2f7;
    border-color: rgba(0,0,0,0.25);
    transform: translateY(-1px);
    box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

/* Active click */
.js-load-more:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Disabled / loading */
.js-load-more:disabled {
    cursor: default;
    opacity: 0.6;
    background: #f1f3f6;
    box-shadow: none;
}