/* ===== base layout ===== */

body{
	height:29.7cm;
	width:20.9cm;
	/* font-size:14px; font-family:Arial; */
	margin-left:auto;
	margin-right:auto;
	margin-top:0;
	padding-left:-20px;
	padding-right:0;
}

.updated{
	font-size:94%;
	margin-top:-16px;
	padding-left:46%;
}

a { color:inherit;text-decoration:underline; }
a:hover{color:white;text-decoration:none;}

ul {margin-left:-16px;}

.quote{
	border:1px solid lightgrey;
	padding:8px 10px;
	margin-left:50px;
	margin-right:50px;
}

.selected{background-color:#007380;color:white;}

caption {
  caption-side: top;
  text-align: center;
  font-weight: bold;
  margin-bottom: 8px;
}

h3 { 
	font-weight:600;
	margin-bottom:6px;
	}
h4 {
	font-weight:600;
	margin-bottom:6px;	
}


/* images */
img{
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:100%;
}

img.img-pdf{
	width:60%;
	padding:2px;
	margin-top:6px;
	margin-bottom:-10px;
	margin-left:0;
}

/* embargo badge */
.embargo{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0.75rem 1.5rem;
	font:600 1rem/1.2;
	letter-spacing:0.15em;
	text-transform:uppercase;
	color:#fff;
	background:linear-gradient(15deg,#048c99,#00305F);
	border:1px solid rgba(0,0,0,0.15);
	border-radius:8px;
	box-shadow:0 1px 2px rgba(0,0,0,0.08),0 2px 6px rgba(0,0,0,0.08);
	min-width: 100%; 
}
/* ===== beaufort chips ===== */
span.Beaufort{padding:4px;line-height:36px;}

.Calm{background-color:;}
.LightAir{background-color:;}
.LightBreeze{background-color:;}
.GentleBreeze{background-color:;}
.ModerateBreeze{background-color:;}
.FreshBreeze{background-color:;}
.StrongBreeze{background-color:;}
.NearGale{background-color:#B8D0EB40 !important;}
.Gale{background-color:#B8D0EB80 !important;}
.StrongGale{background-color:#B8D0EB !important;}
.Storm{background-color:#8B4DB1 !important;color:white;}
.ViolentStorm{background-color:#6F2DBD !important;color:white;}
.Hurricane{background-color:black !important;color:white;}

/* storm_months */

div.month {
	margin: 0px;
	margin-top:-9px;
	margin-bottom:-9px;
	padding-top:4px;
	padding-bottom: 3px; 
	padding-left: 2px;
	padding-right: 3px; 
	min-width:100%;
	justify-content:center;
	align-items:center;
	text-align:center;
}

.Dec { background-color: #33b5e570; }
.Jan { background-color: #33b5e550; }
.Feb { background-color: #33b5e530; }

.Mar { background-color: #00C85130; }
.Apr { background-color: #00C85150; }
.May { background-color: #00C85170; }

.Jun { background-color: #00C85130; }
.Jul { background-color: #ffbb3350; }
.Aug { background-color: #ffbb3370; }

.Sep { background-color: #a1887f30; }
.Oct { background-color: #a1887f50; }
.Nov { background-color: #a1887f70; }

tr.storm_months {
	border: 0px;
	background: none;
	text-align: center;
	border-collapse:collapse;
}

/* Style storm name divs div */
table.storm_months {
   border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
	padding: 3px 6px;
	margin-bottom: -10px;
	margin-top: 0px;
	margin-left: -2px; 
	margin-right: -2px; 
	border-radius: 2px;
	text-align: center;
	font-size: 0.75em;
	border: 0px;
	min-width: 100%;
	max-width: 100%;
}

/* ===== feature table ===== */

.ftable {
	width:100%;
	border-collapse:separate;
	border-spacing:0;
	background:#ffffff;
	color:#0f172a;
	font-size:14px;
	line-height:1.35;
	border-top:6px solid #eeeeee;
	border:0;
	box-shadow:0 1px 2px rgba(0,0,0,.06),0 2px 6px rgba(0,0,0,.06);
	border-radius:6px;
	overflow:hidden; /* round thead corners */
	caption-side:top;
	margin-bottom:16px;
}

.ftable caption{
	text-align:left;
	padding:10px 12px;
	font-weight:600;
	color:#475569;
}

/* header */
.ftable thead th{
	vertical-align:top;
	position:sticky;
	top:0;
	z-index:1;
	background:#008789;
	color:#fff;
	text-align:left;
	padding:10px 12px;
	/*border-bottom:2px solid rgba(255,255,255,.25);*/
	font-weight:500;
	opacity:.9;
}

/* body cells */
.ftable td{
	padding:10px 12px;
	vertical-align:top;
	border-bottom:1px solid #e2e8f0;
	background:#ffffff;
}

/* stripes and hover */
/*.ftable tbody tr:nth-child(odd) td{background:#f1f5f9;}*/
/*.ftable tbody tr:hover td{opacity:.9;outline:0.1px solid #0ea5b3;outline-offset:0;}*/
/*table tr{border:0;border-bottom:6px solid #eeeeee;}*/
.ftable tbody tr:hover td{opacity:.9;background:#f1f5f9;}

/* focus */
/*.ftable td:focus-within,.ftable th:focus{outline:2px solid #0ea5b3;outline-offset:-2px;}*/
/*.ftable th small{display:block;font-size:12px;}*/

/* responsive */

@media (max-width:720px){
	.ftable thead{display:none;}
	.ftable,.ftable tbody,.ftable tr,.ftable td{display:block;width:100%;}
	.ftable tr{margin:0 0 6px 0;border:0;}
	.ftable td{
		border:0;
		border-bottom:1px solid #e2e8f0;
		background:#ffffff;
		padding:8px 12px 8px 140px;
		position:relative;
		min-height:42px;
	}
	.ftable td:first-child{padding-left:38px;}
	.ftable td::before{
		content:attr(data-label);
		position:absolute;
		left:8px;
		top:8px;
		width:120px;
		font-weight:600;
		color:#475569;
		text-align:left;
		white-space:normal;
	}
	.ftable .num{text-align:left;}
}

/* print */

@media print{
	.ftable{box-shadow:none;}
	.ftable tbody tr:hover td{outline:none;}
}

/* ------ STORM LETTER ----- */

.wrapper{display:flex;align-items:center;gap:10px;}

td.avatar{min-width:45px; max-width:45px;}

div.avatar{
	width:30px;
	height:30px;
	/*border-radius:50%;*/
	/*border:2px solid #fff;*/
	/*box-shadow:0 0 0 2px #00305F;*/
	box-shadow:0 0 0 2px #048c99;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:#048c99;
	color:#fff;
	font-weight:700;
	font-size:18px;
	line-height:1;
	margin:-5;
	float:left;
}

.name{
	background:#00305F;
	font-size:18px;
	font-weight:600;
	color:white;
	border-radius:50%;
	padding:2px;
}

/* ========= */
/* NEW 2025 */
/* ========= */

.climate-select{display:inline-block;position:relative;}

.climate-select select{
	-webkit-appearance:none;
	appearance:none;
	padding:12px 56px 12px 14px;
	min-width:260px;
	max-width:100%;
	color:#00305F;
	background:
		linear-gradient(180deg,#e8f5f1 0%,#e8f5f1 60%,#dff3ff 100%),
		radial-gradient(120% 120% at 0% 0%,rgba(0,150,255,0.08) 0%,rgba(0,150,255,0) 60%),
		radial-gradient(150% 150% at 100% 0%,rgba(0,180,120,0.12) 0%,rgba(0,180,120,0) 55%);
	border:1px solid rgba(11,61,46,0.25);
	border-radius:4px;
	box-shadow:0 1px 0 rgba(0,0,0,0.02),0 6px 18px rgba(11,61,46,0.08) inset;
	cursor:pointer;
	transition:box-shadow .2s,transform .04s;
}

.climate-select select:focus{outline:none;box-shadow:0 0 0 3px rgba(0,150,255,0.25),0 6px 18px rgba(11,61,46,0.08) inset;}
.climate-select select:hover{box-shadow:0 0 0 3px rgba(0,150,255,0.12),0 6px 18px rgba(11,61,46,0.12) inset;}
.climate-select select:active{transform:translateY(1px);}

.climate-select:after{
	content:"";
	pointer-events:none;
	position:absolute;
	right:14px;
	top:50%;
	transform:translateY(-50%);
	width:28px;
	height:28px;
	border-radius:50%;
	background:
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%230b3d2e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>') center center no-repeat,
		radial-gradient(circle at 50% 50%,#e6fff5 0%,#c9f0ff 100%);
	box-shadow:inset 0 0 0 1px rgba(11,61,46,0.15),0 2px 6px rgba(0,0,0,0.08);
}

.climate-select .climate-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px;opacity:.9;}
.climate-select .climate-icon svg{display:block;width:100%;height:100%;}
.climate-select select.with-icon{padding-left:38px;}

.climate-caption{font-size:12px;color:#2a5b4c;margin-top:6px;}

@media (prefers-contrast:more){
	.climate-select select{border-color:#00305F;}
	.climate-select select:focus{box-shadow:0 0 0 3px #0096ff;}
}

@media (prefers-reduced-motion:reduce){
	.climate-select select{transition:none;}
}

@media (prefers-color-scheme:dark){
	.climate-select select{
		color:#e8fff6;
		background:
			linear-gradient(180deg,#0f2720 0%,#0f2720 60%,#0f2430 100%),
			radial-gradient(120% 120% at 0% 0%,rgba(0,150,255,0.15) 0%,rgba(0,150,255,0) 60%),
			radial-gradient(150% 150% at 100% 0%,rgba(0,180,120,0.18) 0%,rgba(0,180,120,0) 55%);
		border-color:rgba(180,255,230,0.28);
		box-shadow:0 1px 0 rgba(255,255,255,0.02),0 6px 18px rgba(0,0,0,0.35) inset;
	}
	.climate-select:after{box-shadow:inset 0 0 0 1px rgba(200,255,235,0.25),0 2px 6px rgba(0,0,0,0.35);}
	.climate-caption{color:#a7e5d2;}
}