@media (min-width: 1200px) {
    .wxblock-entry {
        border: 1px solid #ffffff !important;
        border-radius: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
    }

    .wxblock-entry .card-header {
        display: none;
    }

    .wxblock-entry .card-body {
        display: flex;
        padding: 0 !important;
        border-top: none;
        align-items: stretch; /* force all child divs to equal height */
    }

    .wxblock-entry .card-body > div {
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        padding: 0.75rem;
        display: flex;
        align-items: stretch;
        justify-content: center;
        /* Optional for padding to wrap correctly */
        text-align: center;
        flex-direction: column; /* if you want multi-line alignment to still center vertically */
    }

    .wxblock-entry .card-body > div a {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
        height: 100%;
    }

    /* Remove right border on last item in row */
    .wxblock-entry .card-body > div:last-child {
        border-right: none;
    }

    /* Optional: fix padding between text and edge in header row */
    .wxblock-header > div {
        padding: 0.75rem;
        border-right: 1px solid #ccc;
        text-align: center;
    }

    .wxblock-header > div:last-child {
        border-right: none;
    }

    .wxblock-header {
        background-color: #f8f9fa;
        border-color: #dfe0e1;
        border-bottom: calc(var(--bs-border-width) * 2) solid currentcolor;
    }

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

    .wxhistory-value {
        display: inline-block;
        text-align: center !important;
        text-indent: 0px !important;
        width: 50%;
    }

}
.wxblock-container {
    padding: 0.25rem !important;
}

.card {
    border-radius: 0px !important;
}

.wxhistory-label {
	display: inline-block;
	text-align: right;
	width: 50%;
}

.wxhistory-value {
	display: inline-block;
	text-align: left;
	text-indent: 5px;
	width: 50%;
}

.custom-div-icon {
    background: transparent;
    border: none;
}

.airport-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

.temp.temp-hi,
.temp-hi {
    color: red;
}

.temp.temp-lo,
.temp-lo {
    color: blue;
}

.falling:after {
    content: '\2193';
    padding-left: .2em;
    font-size: 15px;
    /* font-weight: 900; */
    vertical-align: top;
    position: relative;
    /* top: -2px; */
}

.forecast-search {
padding: 0px;
margin: 0px;
}


.direction {
	margin-left: 10px;
    content: "↑";
    top: 0;
	display:inline-block;
}

.direction::before {
  content: "↑";
}


.direction-nne { transform: rotate(22.5deg); }
.direction-ne { transform: rotate(45deg); }
.direction-ene { transform: rotate(67.5deg); }
.direction-e { transform: rotate(90deg); }
.direction-ese { transform: rotate(112.5deg); }
.direction-se { transform: rotate(135deg); }
.direction-sse { transform: rotate(157.5deg); }
.direction-s { transform: rotate(180deg); }
.direction-ssw { transform: rotate(202.5deg); }
.direction-sw { transform: rotate(-135deg); }
.direction-wsw { transform: rotate(-114.5deg); }
.direction-w { transform: rotate(-90deg); }
.direction-wnw { transform: rotate(-69.5deg); }
.direction-nw { transform: rotate(-45deg); }
.direction-nnw { transform: rotate(-24.5deg);}

  
/* SPC Probabilities */
.spcprob-nothunder-severe
{
    background-color: #afddf6 !important;
    
}


.spcprob-nosevere-severe, .spcprob-nocritical-firewx
{
    background-color: rgba(182, 255, 182, 0.5) !important;
}

.spcprob-marginal-severe
{
    background-color: rgba(105, 169, 105, 0.5) !important;
    
}

.spcprob-slight-severe
{
    background-color: rgba(253, 244, 135, 0.5) !important;

}

.spcprob-enhanced-severe
{
    background-color: rgba(224, 138, 24, 0.5) !important;
}

.spcprob-moderate-severe
{
    background-color: rgba(251, 0, 17, 0.5) !important;
}

.spcprob-severe-severe
{
    background-color: rgba(252, 0, 188, 0.5) !important;
}

.spcprob-severe-severe2
{
    background-color: rgba(253, 253, 37, 0.5) !important;
}

.spcprob-high-severe
{
    background-color: rgba(255, 129, 248, 0.5) !important;
}

.spcprob-isodryt-firewx,
.spcprob-elevated-firewx
{
    background-color: rgb(240,197,127,0.5) !important;
}

.spcprob-critical-firewx
{
    background-color: rgb(252,120,125,0.5) !important;
}

.spcprob-extreme-firewx 
{
    background-color: rgba(236, 102, 197, 0.5) !important;
}

.wpcprob-marginal {
    background: #7FFF7F !important;
}

.wpcprob-slight {
    background: #F6F67E !important;
}

.wpcprob-moderate {
    background: #FE7F7F !important;
}

.wpcprob-high {
    background: #FE7FFE !important;
}

.wpcprob-nowwd {
    background: #f2f2f2 !important;
}




#spcDetails {
	position: relative;
	text-align: center;
	white-space: nowrap;
	font-size: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#spcDetails>div {
	display: inline-block;
	text-align: center;
	margin: 0 2px;
}

#spcDetails .label, .value{
	display: block;
	text-align: center;
	font-weight: 500;

}

.spcprob_verylow
{
	background-color:#fff999;
}
.spcprob_low
{
	background-color:#ff9900;
}
.spcprob_mod
{
	background-color:#ff0000;
}
.spcprob_high
{
	background-color:#ff00ff;
}


.tropical-TD { background-color: #EADE9A !important;}
.tropical-TS { background-color: #E9B65C !important;}
.tropical-H1 { background-color: #F1BDA1 !important;}
.tropical-H2 { background-color: #EAA39B !important;}
.tropical-H3 { background-color: #EC7C7C !important;}
.tropical-H4 { background-color: #F66685 !important;}
.tropical-H5 { background-color: #F78CBC !important;}


.tropicalcircle-TD {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #EADE9A; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #EADE9A; /* outline color same as marker color */
}

.tropicalcircle-TS {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #E9B65C; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #E9B65C; /* outline color same as marker color */
}

.tropicalcircle-H1 {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #F1BDA1; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #F1BDA1; /* outline color same as marker color */
}

.tropicalcircle-H2 {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #EAA39B; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #EAA39B; /* outline color same as marker color */
}

.tropicalcircle-H3 {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #EC7C7C; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #EC7C7C; /* outline color same as marker color */
}

.tropicalcircle-H4 {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #F66685; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #F66685; /* outline color same as marker color */
}

.tropicalcircle-H5 {
    width: 10px; /* diameter = 2 * radius */
    height: 10px; /* diameter = 2 * radius */
    background-color: #F78CBC; /* match the color property */
    opacity: 1; /* match the fillOpacity property */
    border-radius: 50%; /* make it a circle */
    border: 1px solid #F78CBC; /* outline color same as marker color */
}


@media only screen and (max-width: 414px) {
	#spcDetails>div 
	{
		display: flex!important;
	}

	#spcDetails .label, .value
	{
		width:50%;
	}
}
  
  
  
/* Current Conditions */

.flex-container {
	display: flex;
	flex-wrap: nowrap;
}

.temps {
	margin: 10px;
	text-align: center;

  	font-size: 20px;
	position: relative;
	top: 7px;
	line-height: 1.3em;
	margin-bottom: 15px;
}

.sky {
	display: inline-block;
}

.real {
	display: flex;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}


#title .currents-icon img {
	width: 70px;
	height: 72px;
}

#title {
 	/* width: 700px; */ 
	font-size : 20px;
	font-weight : 500;
	text-align : center;
}

#title .currents {
	display: flex;
	align-items: center;
	justify-content: center;
}

#title div {
	display: inline-block;

}

.currents-icon {
	width: 90px;
	height: 72px;
	margin-right: 5px;
	display: inline-block;
}

#title .currents .description {
	font-weight: 500;
	text-align: left;
	width: 630px;
}

#title .currents .description {
	position: relative;
	top: 7px;
	line-height: 1.3em;
	margin-bottom: 15px;
}

#title div.summary-high-low div:first-child {
	margin-left: 0;
}

#title div.summary-high-low .high-low-label {
	font-weight: 400;
}

#title div.summary-high-low>div {
	margin: 0 3px;
}

#title div.summary-high-low {
	display: flex;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}

#currentDetails {
	position: relative;
	text-align: center;
	left: -10px;
	white-space: nowrap;
	font-size: .75rem;
	margin: 0 auto;
	max-width: 750px;
	padding-top: 6px;
}

#currentDetails>div {
	display: block;
	text-align: center;
	margin: 0 5px;
}

#currentDetails .label {
	display: inline-block;
	text-align: right;
	font-weight: 500;
	width:75px;
}

#currentDetails .value {
	display: inline-block;
	text-align: left;
	font-weight: 300;
	width:75px;
}

#currentDetails>div.current_details_break {
	display: none;
}

@media only screen and (max-width: 414px) {
	#title div {
		display: block;
		float: left;
	}
	#title div.summary-high-low>div {
		width: 100%;
	}
	#title div.summary-high-low {
		display: block;
		width: 100%;
		float: left;
	}	
	
}

.temperature {
	font-size: 1.25rem;
	font-weight: 500;
	text-align: center;
	width: 100%;
}

.cc-label {
	display: inline-block;
	text-align: right;
	width: 50%;
}

.cc-value {
	display: inline-block;
	text-align: left;
	text-indent: 5px;
	width: 50%;
}


.label {
	display: inline-block;
	text-align: right;
	width: 46%;
}

.value {
	display: inline-block;
	text-align: left;
	width: 52%;
}

.label-new {
	display: inline-block;
	text-align: right;
	/* width: 46%; */
}

.value-new {
	display: inline-block;
	text-align: left;
	/* width: 52%; */
}

.spacer {
	display: inline-block;
	text-align: center;
	width: 2%;
}

.table-sticky-column {
    position: sticky;
    left: 0px;
}


.hourly-sticky-column {
    position: sticky;
    left: 0px;
    /* height: 100px; */
    min-width: 200px;
    border-width: 0 1px 1px 0px !important;
    border-color: #dfe0e1 !important;
    background-color: #f8f9fa !important;
    color: #000;
}

/* Daily Planner Forecast */
.forecast-content-box {
    display: none; /* Hide all content by default */
}

/* Ensure ForecastToday remains visible */
#forecastToday .forecast-content-box {
    display: block !important;
}

/* Forecast links */
.forecast-link {
    text-decoration: none;
    color: #000;
}
.forecast-link.active {
    color: var(--wtc-forecast-active-color) !important;
    background-color: var(--wtc-forecast-active-bg);
    box-shadow: inset 0 calc(-1 * var(--wtc-forecast-border-width)) 0 var(--wtc-forecast-active-bg);
}

/* Forecast items container */
.forecast-items {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none; /* Remove default bullet points */
    padding: 0 !important;
    margin: 0;
}

/* Individual forecast item */
.forecast-item {
    padding: 2px;
    cursor: pointer;
    text-align: center;
    transition: background 0.3s;
    border: 1px solid #dfe0e1;
}

/* Active forecast item */
.forecast-item-active {
    color: var(--wtc-forecast-active-color) !important;
    background-color: var(--wtc-forecast-active-bg);
    box-shadow: inset 0 calc(-1 * var(--wtc-forecast-border-width)) 0 var(--wtc-forecast-active-bg);
    border-bottom: 1px solid var(--wtc-forecast-active-bg);
}

/* Hover effect (Only applies on desktop) */
@media (min-width: 769px) {
    .forecast-item:hover {
        background-color: var(--wtc-forecast-active-bg);
    }
}

/* Active forecast content */
.forecast-content-active {
    background-color: #cce5ff !important;
    border-left: 5px solid #0056b3 !important;
}

/* Container background change when active */
.forecast-container-active {
    background-color: #ffffff !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .forecast-item {
        width: 100% !important; /* Ensure full width on mobile */
    }

    .forecast-content {
        width: 100% !important; /* Ensure expanded content also fills width */
    }

    .forecast-items {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Ensure forecast item acts like a button */
    .forecast-item {
        position: relative;
        cursor: pointer;
        padding-right: 25px;
        color: var(--wtc-forecast-color);
        background-color: var(--wtc-forecast-bg);
        border: var(--wtc-forecast-border-width) solid var(--wtc-forecast-border-color);
        min-height: 160px;
    }

    /* Expand/collapse arrow */
    .forecast-item::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        background-size: contain;
        transition: transform 0.3s ease-in-out;
    }

    /* Rotate arrow when active */
    .forecast-item.expanded::after {
        transform: translateY(-50%) rotate(180deg);
    } 
}

.forecast-dailyicons {
    min-height: 150px;
    padding-left: 5px;
    padding-right: 5px;
    background-color: #cfe2ff !important;
}
.forecast-dailytext {
    min-height: 170px;
    padding-left: 5px;
    padding-right: 5px;
}
.forecast-hourly {
    min-height: 380px;
}

.forecast-dailyastro {
    min-height: 40px;
    padding-left: 5px;
    padding-right: 5px;
}

/* Rainviewer Legend */
.color-rain-gradient
{
    background: linear-gradient(90deg,#00efe7,#009cf7,#0000f7,lime,#03b703,#087305,#ff0,#ecce00,#fe9300,red,#bd0000,#bd0000);
}

.color-snow-gradient
{
    background: linear-gradient(90deg,#e5fefe,#0f75fb,#0726a4);
}

.gradient
{
    width: 100%;
    height: 16px;
    float: left;
    border-radius: 12px;
    /*margin-right: 8px; */
    -webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2) inset;
    -moz-box-shadow: 0 0 2px 1px rgba(0,0,0,0.2) inset;
    box-shadow: 0 0 2px 1px rgba(0,0,0,0.2) inset;
}