* { box-sizing:border-box; }

:root {	--maxWidth:800px;
	--dkblue: rgb(0,     0, 102);
	--ltblue: rgb(100, 150, 250);
	--yellow: rgb(255, 225,   0);
	--ltgray: rgb(245, 245, 245);
	--dkgray: rgb(100, 100, 100);
	--safePadding: 0 max(env(safe-area-inset-right) + 2vw) 0 max(env(safe-area-inset-left) + 2vw);
	--padding: 0 50px 0 50px;
	--thinBorder: .25px;
	--navHeight: calc(23px + clamp(10px,7dvw,45px) + clamp(7.8px,2.6dvw,16.9px));
}

html	{ font-family:arial,helvetica,sans-serif; font-size:14px; line-height:1.3; min-height:100%; -webkit-text-size-adjust:100%; }
body	{ font-family:arial,helvetica,sans-serif; font-size:14px; line-height:1.3; min-height:100dvh; color:#000000; margin:0; background:#FFF; overflow-y:scroll; }

a	{ color:#0000FF; text-decoration:underline; cursor:pointer; }
.link	{ color:#0000FF; text-decoration:underline; cursor:pointer; }
.hideLink { color:black; text-decoration:none; }

#nav	{ position:fixed; top:0; left:0; z-index:30; overflow:visible; width:100%; padding:var(--safePadding); background:var(--dkblue); text-align:center; border-bottom:5px solid var(--yellow); box-shadow:0 var(--thinBorder) 0 0 black;

	#grid { width:100%; max-width:var(--maxWidth); display:grid; overflow:visible; container-type:inline-size; margin:0 auto; grid-template-columns:10fr 10fr 8fr 13fr minmax(50px,17fr) 11fr 10fr 10fr 10fr; }

	#grid > div { display:grid; position:relative; align-content:center; justify-items:center; text-align:center; white-space:nowrap; padding:9px 1px 7px 1px; }
	#grid > div a { font-size:clamp(6px,2dvw,13px); text-align:center; color:white; text-decoration:none; }
	#grid > div img { display:block; height:clamp(10px,7dvw,45px); width:auto; margin-bottom:2px; }

	#grid > div:nth-child(5) img {	position:absolute; top:0px; left:50%; transform:translateX(-50%); height:calc(100% + clamp(10px,calc(2vw - 1.4px), 12px));
					width:auto; max-height:none; min-width:50px; max-width:120%; object-fit:contain; object-position:center top; z-index:2; }

	#grid > div:nth-child(1) { justify-self:start; text-align:left; object-position:left;  padding-left: 0; }
	#grid > div:nth-child(9) { justify-self:end; text-align:right;	object-position:right; padding-right:0; }
}
#top_spacer { width:100%; height:var(--navHeight); }

/* img[src$=".svg"], img[src*=".svg?"] { filter:brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(10000%) hue-rotate(0deg); } */

/* General Page Layout */
.page	{ min-height:100vh; padding:var(--safePadding); margin:0; container-type:inline-size;}
.pmax	{ max-width:600px; margin:0 auto; container-type:inline-size; }

.page_grid { width:100%; display:grid; gap:clamp(5px,2vw,1vw); grid-template-columns:1fr 1fr; }

@media (width < 429px) { .page_grid {  grid-template-columns:1fr; } }

.nopadd	{ padding:0; }

.smallText	{ font-size:.9rem; line-height:1.2; }
.smallerText	{ font-size:.8rem; line-height:1.2; }

.input,
.select { height:30px; font-size:inherit; width:100%; border:var(--thinBorder) solid var(--ltblue); border-radius:5px; padding:0px 7px 0px 7px; }
input.input[type="date"], input.input[type="time"] { font-family:inherit; }

.submit, .delete { font-size:14px; padding:7px 20px 7px 20px; border-radius:5px; text-align:center; color:#FFFFFF; font-weight:bold; cursor:pointer; }
.submit { background-color:#3366CC; border:var(--thinBorder) solid #3366CC; background:-webkit-linear-gradient(#99CCFF,#3366CC); }
.delete	{ background-color:#FF0000; border:var(--thinBorder) solid #CC0000; background:-webkit-linear-gradient(#FF0000,#BB0000); }

.panel	{ background:var(--ltgray); border:var(--thinBorder) solid var(--ltblue); padding:clamp(8px,2vw,10px); border-radius:clamp(5px,2vw,10px); overflow:hidden; container-type:inline-size; }
#copy	{ margin:10px auto 10px; auto; text-align:center; font-size:clamp(10px,2vw,12px); color:#999; }

/* Notice and Announcements */
.ann1	{ max-width:600px; position:relative; padding:10px; margin:0 auto 10px; background:#F5F5F5; border:var(--thinBorder) solid var(--ltblue); border-radius:clamp(7px,1vw,10px); }
.ann2	{ position:absolute; top:0; left:5px; transform:translateY(-50%); font-size:10px; width:auto; padding:2px 10px; margin:0; color:#333333; background:#F5F5F5; border:var(--thinBorder) solid var(--ltblue); border-radius:clamp(7px,1vw,10px); }

.ad_line1, h1, h2, h3 { font-weight:normal; display:block; }
.ad_line1, h1	{ font-size:1.4rem; line-height:1.4; }
.ad_line2, h2	{ font-size:1.1rem; line-height:1.3; }
.ad_line3, h3	{ font-size:1.0rem; line-height:1.1; }
.ad_line4, h4	{ font-size:1rem; }

/* Headlines and Ad Lines */
h1	  { font-size:22px; line-height:1.1; }
h2	  { font-size:18px; line-height:1.1; }
h3	  { font-size:16px; line-height:1.1; }
.ad_line1 { font-size:20px; margin:0px 0 2px 0; }
.ad_line2 { font-size:18px; margin:2px 0 2px 0; }
.ad_line3 { font-size:16px; margin:2px 0 2px 0; }
.ad_line4 { font-size:14px; margin:2px 0 0px 0; }

.login_create { margin:10px auto auto auto;
	h2	{ margin:3px 0 4px 0; }
	.tbl td { padding:0 5px 4px 0; }
	.tbl th { padding-bottom:4px; font-weight:normal; width:100%; }
	.note     { position:relative; margin-top:-5px; font-size:80%; font-style:italic; }
	input[type='submit'] { min-width:50%; margin:5px 0 5px 0; padding-left:0; padding-right:0; }
	input[type='checkbox'] { height:14px; width:14px; vertical-align:middle; margin:0; }
}

.top10		{ position:absolute; right:0; z-index:2; width:30cqw; max-width:40px; margin:calc(clamp(2px, 1vw, 5px) * -1) calc(clamp(2px, 1vw, 5px) * -1) 0 0;  }
.top10 img	{ display:block; width:100%; height:auto; }
.leader		{ display:block; position:absolute; z-index:2; width:calc(40px + 10cqw); height:auto; transform:translateY(-90%) translateX(-2%);  }
.leader	img	{ display:block; width:100%; height:auto; }

.proPanel {
	font-size:14px; line-height:1.3; container-type:inline-size; max-width:600px; margin:0 auto 10px auto; background:var(--ltgray); border:var(--thinBorder) solid var(--ltblue); padding:10px; border-radius:clamp(7px,1vw,10px);
	.miles	  { display:inline-block; position:relative; top:-1px; font-size:10px; }
	.proimgs  { width:100%; height:auto; margin-bottom:10px; border-radius:clamp(5px,1vw,8px); border:var(--thinBorder) solid var(--dkgray); }
}

.closeWindow { position:absolute; width:12cqw; max-width:44px; height:auto; z-index:2; margin:-5px 0 0 -5px; cursor:pointer; }

/* Main Fish Panel */
.fishPanel {
	font-size:14px; line-height:1.3; container-type:inline-size; overflow:hidden; 
	max-width:600px; margin:0 auto 10px auto; background:var(--ltgray); border:var(--thinBorder) solid var(--ltblue); padding:10px; border-radius:clamp(7px,1vw,10px);

	.gpsPin	   { position:absolute; width:12cqw; max-width:44px; height:auto; z-index:2; margin:-5px 0 0 -5px; cursor:pointer; }
	.gpsPinMap { position:relative; z-index:0; outline:none; } /* this is added by leaflet */
	.gpsPinMap:focus { outline:none; }

	.fishImage { display:block; cursor:pointer; margin-bottom:0px; width:100%; height:auto; max-height:85svh; object-fit:cover; object-position:center; border-radius:clamp(5px,1vw,8px); border:var(--thinBorder) solid var(--dkgray); }

	.more		{ display:grid; gap:5px; margin:5px auto 10px auto; grid-template-columns:1fr 1fr 1fr 1fr; }
	.more_media	{ aspect-ratio:1/1; overflow:hidden; cursor:pointer; }
	.more_media img	{ width:100%; height:auto; border-radius:clamp(5px,1vw,8px); border:var(--thinBorder) solid var(--dkgray); }
	.more_media .fishImage { display:block; width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; margin:0; }
	.map_thumbnail	{ height:100%; width:auto; aspect-ratio:1/1; } 

	.fishSpecs	{ }

	.user		{ float:right; position:relative; width:25%; margin:0 0 0 10px; overflow:visible; container-type:inline-size; }
	.user_name	{ font-size:inherit; margin-top:3px; display:block; position:relative; left:100%; transform:translateX(-100%); width:max-content; min-width:0; text-align:right; white-space:nowrap; overflow:visible; }

	.thumb_cell, .thumb_img { width:clamp(30px, 10vw, 50px); cursor:pointer; }
	.liked_cell, .liked_img { width:clamp(30px, 10vw, 50px); }

	.liked	 	{ margin-top:5px; cursor:pointer; }
	.liked_before	{ cursor:auto; }
	.liked table	{ margin-bottom:0px; td { vertical-align:bottom; padding:0 3px 0 0; } }
	.liked_count	{ font-size:clamp(16px,8vw,40px); line-height:1.1; }
	.like_it	{ color:#0066FF; margin-top:-4px; font-size:clamp(8px, 4cqw, 17px); }

	.comments	{ font-size:90%; }
	.comments table { margin-top:0px; }
	.comments table tr > td:nth-child(2){ padding-left:5px; }
	.comments > table:last-of-type { margin-bottom:0px; }

	.comments_post	{ cursor:pointer; clear:both; text-align:center; margin:5px 0 5px 0; }
	.comments_date	{ font-size:85%; color:#666; font-style:italic; }
	.comments_delete{ width:calc(8px + .5cqw); height:auto; margin:-2px 0 0 2px; }

	video.fishImage:fullscreen { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important; object-position:center; border:0; border-radius:0; background:#000; }
	video.fishImage:-webkit-full-screen { width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:contain !important; object-position:center; border:0; border-radius:0; background:#000; }
	#feed-controls { max-width:250px; margin:auto auto; }
}

.UserImage {
	position:relative; display:block; width:100%; container-type:inline-size; }
	.winner	 { z-index:3; position:absolute; width:100%; line-height:0; }
	.winner img { width:20cqw; height:auto; margin:-2cqw 0 0 -2cqw; }
	.percent { z-index:3; position:absolute; width:100%; text-align:right; line-height:0; }
	.percent img { width:20cqw; height:auto; margin:-2cqw -2cqw 0 0; aspect-ratio:1/1; vertical-align:bottom; }
	.user_img { display:block; width:100%; min-width:25px; height:auto; aspect-ratio:1/1;
	border-radius:
		clamp(5px,1vw,5px)
		clamp(5px,1vw,5px)
		clamp(5px,1vw,8px)
		clamp(5px,1vw,8px);
	border:var(--thinBorder) solid var(--dkgray); object-fit:cover; object-position:center; }
	.UserImage > .winner, .UserImage > .percent { pointer-events:none; }
	.UserImage > .winner > img, .UserImage > .percent > img { pointer-events:auto; }

	@container (width < 80px){ .badges img { width:30cqw!important; } }
	@container (width > 300px) { .badges img { width:30cqw!important; } }
	@container (width > 200px) {
		.user_img { border-radius:	clamp(15px,1vw,24px)
						clamp(15px,1vw,24px)
						clamp(5px,1vw,8px)
						clamp(5px,1vw,8px);
	}
}
.follow_svg { width:75cqw; min-width:50px; max-width:75px; height:auto; margin:3px 0 0 0; cursor:pointer; }

.anglers_results_grid { display:grid; gap:4px;  grid-template-columns:1fr 1fr; }
.anglers_results_grid > div { cursor:pointer; padding:7px; }
@media (width < 440px){ .anglers_results_grid { grid-template-columns:1fr; } }
.anglers_results_grid .user_img { min-width: 0; }
.anglers_results_grid .panel { padding:5px; }

.anglersPanel {
	font-size:14px; line-height:1.3; overflow:hidden; container-type:inline-size; max-width:600px; margin:0 auto 10px auto;

	.agrid { display:grid; gap:10px; grid-template-areas:"left right"; grid-template-columns:1fr 1fr; }
	.user_specs { grid-area:left;  background:white; }
	.user_image { grid-area:right; container-type:inline-size; }

	.angtbl  td { padding:0 3px 3px 0; vertical-align:top; }

	@media (width < 430px) {
		.agrid { grid-template-areas:none; grid-template-columns:1fr; }
		.angtbl { height:auto; }
		.user_specs, .user_image { grid-area:auto; }
	}

	.fish_grid { margin-top:10px; display:grid; gap:10px;  grid-template-columns:1fr 1fr 1fr 1fr; }
	@media (width < 768px) { .fish_grid { grid-template-columns:1fr 1fr 1fr; } }
	@media (width < 3px) { .fish_grid { grid-template-columns:1fr; } }

	.fish_grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
	@media (max-width:600px) { .fish_grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
	@media (max-width:400px) { .fish_grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }

	.anglersButtons		{ margin:5px 0 5px 0; display:grid; gap:2px; grid-template-columns:minmax(0,8fr) minmax(0,9fr) minmax(0,8fr); }
	.anglersButtons > div	{ text-align:center; min-width:0; box-sizing:border-box; white-space:nowrap; }
	.anglersButtons .submit { padding:3px 0px 3px 0px; width:100%; font-size:10px; visibility:hidden; }
}

#angler-message-panel textarea { height:130px; }
#angler-message-panel { margin-top:10px; }
#angler-message-panel h2 { font-size:inherit; }