:root {
	--logo-blue: #008FD1;
	--logo-yellow: #FFD600;
	--logo-green: #00612E;
	--logo-orange:#EA670C;
	--bg-color: #E8E8BF;
	--blue-lighter: #28BBFF;
	--yellow-lighter: #ffe14d;
	--orange-lighter: #f58a3d;
	--green-lighter: #00b353;
	--black-color: #000;
	--thumb-pic-small: 70px;
	--thumb-pic-big: 90px;
	--bp-mobil: 360px;
	--bp-tablet: 768px;
	--bp-desktop: 960px;
}

*, *::before, *::after {
	box-sizing: border-box;
}

body, textarea {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75rem;
	line-height: 1rem;
	background-color: var(--bg-color);
	margin: 0 auto;
	padding: 0;
	hyphens: auto;
}

textarea {  
	background-color: white;
}

p {
    display: block;
    margin-block-start: 0.3em;
    margin-block-end: 0.3em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

img {
	max-width: 100%;
	vertical-align: middle;
	font-style: italic;
	background-repeat: no-repeat;
	background-size: cover;
	shape-margin: 1rem;
	image-orientation: none;  /* gusty: image exif info disable */	
}

.bold {
	font-weight: bold;
}

.wrapper-overall {
	margin: 0 auto;
	background-color: var(--bg-color);
	width: clamp(320px, 100%, var(--bp-desktop));
}

.wrapper-top, .wrapper-content, .wrapper-bottom {
	width: 100%;
}

.wrapper-top {
	margin-bottom: 1rem;
}

.wrapper-bottom {
	margin-top: 1rem;
	text-align: center;
}

.wrapper-content {
	padding: 10px min(5px, 1%);
	border-top: 1px solid var(--logo-green);
	border-bottom: 1px solid var(--logo-green);
	background-color: white;	
}

.forum-wrapper {
	padding: 10px min(5px, 1%);
    word-break: break-word;
}

#loglista-wrapper, #maps-wrapper, #cache-add-wrapper {
	width: 100%;
}

#cache-view-wrapper {
	padding:0 clamp(0.2rem, -0.7rem + 4.5vw, 2rem);
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 3fr; 
  	grid-template-rows: auto;
  	column-gap: 1rem;
	/* THE MAGIC: We draw the layout here */
 	grid-template-areas: 
    	"header header"
    	"pics   content-top"
    	"logs   logs";
}

/* Assign grid areas to the divs */
#cache-view-title { grid-area: header; padding-top: 1rem;}
#cache-view-photo { grid-area: pics; }
#cache-view-details { grid-area: content-top; padding-top: 1rem;}
#cache-view-logs { grid-area: logs; }


/* --- Mobile Layout (Responsive) --- */
@media (max-width: 480px) {
  	#cache-view-wrapper {
		grid-template-columns: 1fr; /* Single column */
		grid-template-rows: auto;   
		
		/* REDEFINE THE ORDER: A -> C -> B -> D */
		grid-template-areas: 
		"header"
		"content-top"
		"pics"
		"logs";
  }
}


#user-profile-wrapper {
	display: flex;
	width: 100%;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: flex-end;
	flex-direction: row-reverse;
}

#user-profile-images {
	align-self: flex-start;
	min-width: 180px;
	margin: 0 auto;
}

#user-profile-images:not(:has(.thumb-column)){
	min-width: 0px;
	width: 1rem;
}

#user-profile-others {
	min-width: 75%;
	max-width: 700px;
	margin: 0 auto;
	order: -1;
	align-self: flex-start;
}



tr.striped-row:nth-child(odd) {background-color: #f8f8f8;}
tr.striped-row:nth-child(even) {background-color: #e8e8e8;}

.coord { font-weight: normal; color: #000000; text-decoration: none;  border-bottom-style : dashed; border-bottom-width : 1px; border-bottom-color : #A0A0A0; }
.coord:hover { background-color : #F6F2CE; font-weight: normal; color: #000000; text-decoration: none; border-top-style : dashed; border-top-width : 1px; border-top-color : #A0A0A0; }

th { background-color: #E8E8BF; font-weight: bold; text-align: center; }
.f8 { background-color: #F8F8F8; }
.f8-darker { background-color: #E8E8E8; }
.f8-reddish { background-color: #FFDDDD; }

.f8g { background-color: #F8F8F8; color: #808080; }
.f8v { background-color: #F8F8F8; color: #E0E0E0; }
.f0 { background-color: #F0F0F0; }
.bw { background-color: #000000; color: #FFFFFF; }

.px10 { font-size: 0.64rem; }
.px11 { font-size: 0.7rem; }
.px10k { font-size: 0.64rem; color: #000000; }
.nk { font-weight: normal; color: #000000; }
.gray { color: #A0A0A0; }

a { 
	color: var(--logo-orange);
	font-weight: 700;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* szín 20200720-ig: #F6A339 */
.a10 { font-size: 10px; color: var(--logo-orange); font-weight: bold; }
.a10n { font-size: 10px; color: #000000; font-weight: normal; }
.normal { font-size: 11px; color: #000000; font-weight: normal; }

.listheader { color: #000000; text-decoration: none; }
.listheader:hover { color: #000000; text-decoration: underline; }

.link { color: #000000; font-weight: bold; }
.normalTXT { font-size: 10px; color: #000000; font-weight: normal; }


.text { font-size: 12px; font-weight: normal; font-style: normal; color: #3E3E5E; }
.header { 
	font-size: 1.5em;
	line-height: 1.5em;
	font-weight: bold;
	color: #353554;
}
.smalltableheader { font-weight: bold; color: #000000; }
.smalltableheaderblack { font-weight: normal; color: #000000; }
.smalltabletext { color: #000000; }
.smalltableheaderwhite { font-weight: bolder; color: #FFFFFF; }
.v:hover { font-size: 10px; color:  #07A0B2; font-weight: normal; }
.v:visited { font-size: 10px; color: #000000; font-weight: normal; }
.v:active { font-size: 10px; color: #000000; font-weight: normal;  }
.v:link { font-size: 10px; color: #000000; font-weight: normal; }
.v { font-size: 10px; color: #000000; font-weight: normal; }

.lapozaslink { font-size: 11px; color: #000000; font-weight: normal; text-decoration: none; }
.lapozaslink0 { font-size: 11px; color: #808080; font-weight: normal; }
.lapozaslink:hover { color: #000000; font-weight: normal; text-decoration: underline; }

.menulink { font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #FFFFFF; font-weight : normal; text-decoration: none; }
.menulink:hover { font-family: 'Courier New', Courier, monospace; font-size: 12px; color: #FFFFFF; font-weight : normal; text-decoration: none; color: #000000;	background : #FBF300; }


.sidelink { color: #000000; font-weight : normal; text-decoration: none; }
.sidelink:hover { font-weight : normal; text-decoration: none; color: #000000; text-decoration: underline; }

.bottomlink { font-size: 10px; color: #000000; font-weight : normal; text-decoration: none; }
.bottomlink:hover { font-size: 10px; color: #000000; font-weight : normal; text-decoration: underline; }

.desc {
	margin-top: 1rem;
	text-align: justify;
    word-break: break-word;
}

.toggle_desc {
	margin-top: 1rem;
	text-align: justify;
    word-break: break-word;
}

.notes { text-align : justify; background-color : #F8F8F8; border-top-width : 1px; border-top-style : solid; padding-top : 5px; border-bottom-width : 1px; border-bottom-style : solid; padding-bottom : 5px; }

.fixed { font-family: "Courier New", Courier, monospace; font-size: 9pt; }

.forum_topic_link { font-weight : normal; color: #C00000; }
.forum_topic_link:visited { font-weight : normal; color: #000000; }

.forum_link { color: #000000; font-weight : normal; }
.forum_link:hover { color: #000000; font-weight : normal; }

.nal { color: #000000; text-decoration: none; }
.nal:hover { color: #000000; text-decoration : underline; }

li { margin: 6px; }

.hl {
	background-color : #F9F169;
}

.forum-td {	padding: 5px; }
.strong { font-weight: bold }
.left { text-align: left; }
.right { text-align: right;}
.center { text-align: center;}

.unread { background-color: #E8E8BF }
.read { background-color: #F0F0F0 }

.legomb {font-size: 10px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #000000; text-decoration: none; background-color : #D6D6D6;}
.legomb:hover{font-size: 10px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #000000; text-decoration: none; background-color : #FBF300;}
.legomb:disabled {font-size: 10px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #999999; text-decoration: none; background-color : #E5E5E5;}

.t_link {color: #F6A339; font-weight: bold;}
.t_link:hover { color: #07A0B2; text-decoration: none; }

select.poitype optgroup option, .poi-icon {
	height: 16px;
	background-repeat: no-repeat;
	background-image: url('images/TuristautakPOI.png');
}

th.poi-type-category {
	text-align: left;
}

h1 {
	font-size: 12pt;
	margin-top: 0;
}

.filter-checkbox {
	text-align: center;
}

.filter-label {
	padding-left: 3px;
}

.filter-category {
	text-align: left;
	background-color: #FFFFFF;
}

.fb-like {
	height: 21px;
	overflow: hidden;
}

.admin-only {    /* amit nem mindenki lát csak az admin, moderátor vagy a user saát beállításai  */
	display: block ;
	border: 1px solid #F0EBD0;
	background-color: #FFFCEC;
	font-size: 0.6rem;
}

.admin-only-inline {    /* amit nem mindenki lát csak az admin, moderátor vagy a user saát beállításai  */
	display: inline-block ;
	border: 1px solid #F0EBD0;
	border-radius: 8px;
	margin: 0.5rem 0rem;
	padding: 0.3rem 2rem;
	background-color: #FFFCEC;
	font-size: 0.75rem;
}

#jszn-warning {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}



/*******    Fazék, 2017. tavasz óta ******/
/*******       innéttől lefelé            ******/


.button { 
	display: inline-block;
	background-color:  #008FD1;
	background-color: var(--logo-blue);
	color: white;
	padding: 3px 8px;
	margin-top:3px;
	margin-bottom: 2px;
	border-width: 1px;
	border-color: var(--logo-orange);
	border-radius: 4px;
	font-weight: 600; 
	transition: all 0.5s ease;
}

.button:hover {
	background-color: #7fc7e8;
	color: black;
}

.button:hover .info-only{
	background-color: #f58a3d9c;
}

.button a, 
.button a:link, 
.button a:visited, 
.button a:hover, 
.button a:active {
	text-decoration: none;
}

.info-only {  /* ezek jellemzően a nem nyilvános infók, akár usernek, akár adminnak */
	background-color: var(--orange-lighter);
}

.info-only:hover {
	background-color: #f58a3d9c;
}

.info-boxed {  /* a szép kék-keretes kis információs dobozok */
	margin: 1em 0;
	padding: 1em; 
	border: solid 4px var(--logo-blue); 
	border-radius: 8px;
}

.section-head {
	font-weight: 600;
	margin-bottom: 0.9rem;
}

.h1 {
	font-size: 1.8rem;
	font-weight: 800; 
}

.h2 {
	font-size: 1.5rem;
	font-weight: 600; 
}

.h3 {
	font-size: 1.3rem;
	font-weight: 600; 
}
.h4 {
	font-size: 1.25rem;
	font-weight: 500; 
}

.index_page_moderate_column{
	background-color: #FFEA7F;
}

.html-box-wrapper{
	margin: 0 2%;
   	text-align: justify;
	display: block;
	position: relative;
}

.html-box-wrapper a {
	color: #990000;
	text-decoration: none;
}

.html-box-wrapper p {
	padding-left: 1em;
	line-height: 1.25rem;
}

.spacing-before {
	margin-top: 1.5em;
}

.spacing-after {
	margin-bottom: 1.5em;
}

.html-box-wrapper a:hover {
	text-decoration: underline;
}

img.html-box-img-normal{
   	display: inline;
	max-width: 720px;
	min-width: 200px;
	margin-left: auto;
	margin-right: auto;
}

.content-bookmarks {
	margin-left: 20px;
	line-height: 75%;
 }

div.adoptalhato_warning{
	background: #81DAF5; 
	padding: 10px;
	border: 1px dashed #333;
}

.in-line-error-msg{
	border: red solid;
}

.in-line-warning-msg{
	border: orange dotted;
}

.warning-msg {
	background: #cef; 
	padding: 5px;
	border: 1px dashed #333;
	margin: 0.5rem 0.2rem 1.0rem;
}

.doc-include {
	font-size: 14px;
	background-color: #DDD000;
}

div.todo-warning {
	border: var(--logo-green) 2px solid;
	border-radius: 5px;
	background-color: bisque;
	padding: 1rem;
	margin-bottom: 0.5rem;
}

div.todo-warning .todo-warning-title{
	font-weight: 800;
	margin: 1.3em auto;
	text-align: center;
}

div.todo-warning span {
	font-weight: bold;
	color: red; 
	text-decoration-line: underline;
}

.logo-color-ruler {
	border: 0;
	display: block;
	height: 12px;
	width: 84%;
	margin: 8px auto;
	background-image: URL("http://www.geocaching.hu/files/pics/gc_logo_color_4px_line.png");
	background-repeat: repeat-x;
	background-size: 100% 12px;
}

.scroll-box {
	background:#eee;
	border:2px solid #000;
	height:140px;
	overflow:scroll;
	padding:5px;
}

img.float-left {
	float:left;
	margin: 1rem 3rem 1rem 2rem;
	border: 1px solid #888; 
	}

img.float-right {
	float:right;
	margin: 1rem 2rem 1rem 3rem;
	border: 1px solid #888; 
	}

.main-page-left {
	background-color: var(--logo-yellow);
	width: 120px;
}

.main-page-center {
	border: 1px solid #008FD1; 
	margin-top: 2px;
	margin-bottom: 4px;
}

.thumb-column {
	/* max-width: 168px; */
	min-width: 130px;
	margin: 0 auto;
	padding: 5px 0;
}

@media screen and (max-width: 900px) {
	.slide-when-mobile {
		display:flex;
		width: 100%;
		gap: 1em;
		overflow-x: scroll;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
	}
}

.thumb-column p {
	font-weight: 600;
	margin: 5px 1px 5px;
   	word-break: break-word;
}

.thumb-column img {
	margin: 6px 3px;
	border: 0;
}

.thumb-frame {
	scroll-snap-align: start;
	flex-shrink: 0;
	margin: 12px auto;
	width: 100%;
	max-width: 168px;
	border: 1px solid #E0E0E0;
	background: #F8F8F8;
	text-align: center;
}


/* a cache és poi oldalak jobb oldalán lévő logokhoz kapcsolt thumb-képek */
div.log-thumbs-wrapper{ 
	max-width: 150px;
	margin: 0 auto;
	padding-bottom: 10px;
}

div.log-thumbs-wrapper img {
	max-width: var(--thumb-pic-small);
	max-height: var(--thumb-pic-small);
}

.track-link {
	padding: 1px;
}

.track-link::before {
	content: '';
	background: url(/images/geo-location-tag-orange-24px.png);
	width: 24px;
	height: 24px;
	display: inline-block;
}

/*******       mozgó ládák oldalán táblázat        ******/

.mozgo-info-box {
	padding: 2px;
	border: solid var(--logo-green) 1px;
	border-radius: 8px;
}

.mozgo-info-box::before {
	padding: 4px 0 4px 6px;
	margin: 0px auto;
	border-bottom: solid var(--logo-green) 1px;
	content: 'Tudnivalók röviden:';
	display: block;
	color: var(--logo-blue);
	font-size: 12px;
	font-weight: 600;
}	

.m-line {
	padding: 5px 5px 5px 25px;
}

.m-line:not(:last-of-type) {
	border-bottom: solid var(--logo-green) 1px;
}

.m-line::before {
	margin: 0px 2px 0px -20px;
	content: '';
	width: 18px;
	height: 12px;
	display: inline-block;
	background-size: contain;
	background-repeat: no-repeat;
}

.m-info::before  { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-bulb.svg); }
.m-hova::before  { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-globe.svg); }
.m-vitel::before { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-refresh.svg); }
.m-tav::before   { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-running.svg); }
.m-ismet::before { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-time-forward.svg); }
.m-ugyanoda::before { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-calendar.svg); }
.m-egyeb::before { background-image: url(https://www.geocaching.hu/images/mozgo-ikon-comment-question.svg); }

.m-textbox {
    width: 100%;
    border: none;
    border-bottom: dotted 1px;
    background: #e8e8bf;
}

/*******       logs.geo  táblázat        ******/

#log_date  { width: 15%; }
#log_score {  }/* ami marad, az jön ide */
#log_photo { width: 5%; }
#log_code  { width: 8%; }
#log_cache { width: 20%; }   /* ami marad, az jön ide */
#log_hide  { width: 8%; }
#log_hits  { width: 8%; }
#log_name  { width: 10%; }
#log_found  { width: 8%; }


/*******    Fazék, 20200607     ******/
/*******    message() függvényhez  ******/

.message-container {
    display: flex;
    justify-content: flex-start;
    line-height: 1.4;
    max-width: 600px;
    width: 100%;
    padding: 5px 8px 3px 8px;
    margin: 8px auto;
    border: 4px solid;
    border-radius: 10px;
    background-color: white;	
}

.message-container.ok    {border-color: var(--logo-green);} 
.message-container.error {border-color: var(--logo-orange);} 
.message-container.info  {border-color: var(--logo-yellow);} 

.message-container .message-image{
    padding: 5px 20px 5px 0px;
}

.message-container .message-text{
   align-self: center;
   flex: 1;
   font-size: 1rem;
   padding: 5px 5px 5px 15px;  
}

/* Style for the main container of a single log entry */
.log-entry {
    width: 100%; 
    margin-bottom: 2rem; 
	padding: 0.2rem 0.2rem 0.4rem 0.3rem;
   	border-left: 1px solid color-mix(in srgb, var(--logo-blue) 20%, white);
	border-top: 1px solid color-mix(in srgb, var(--logo-blue) 20%, white);
	border-top-left-radius: 5px;
}

/* Style for the header row (contains details and rating) */
.log-header-row {
    display: flex;
    padding: 4px 0;
}

/* Style for the content row (contains log text and thumbnails) */
.log-content-row {
    display: flex;
    padding: 0.2rem 0;
}

/* Details Column (Text content in the header) */
.log-details-column {
    flex-grow: 1; 
	flex-shrink: 1;
    flex-basis: 0; 
    padding-right: 10px;
	background-color: color-mix(in srgb, var(--logo-blue) 10%, white); 
}
.log-details-column > a:first-of-type {
	color: #000000;
	font-weight: bold;
}

.log-rating-column {
    padding-left: 0.5rem;
    text-align: center;
    background-color:white; 
}

/* Log text */
.log-text-column {
    flex-grow: 1; 
    flex-basis: 0; 
    padding-right: 10px; 
	word-wrap: anywhere;
}

.log-thumbnails-column {
    flex-shrink: 0; 
    width: min(30%, 240px); 
    text-align: center;
}


/*******    Fazék, 20200702     ******/
/*******    a végtelen mennyiségű Table eleme kiváltására  ******/

.simple-flex-row {
   display: flex;
}

.flex-col {
   padding: 5px 5px;
   justify-content: start;
   flex: 100%;
}

.col-10 { flex: 10%; }
.col-20 { flex: 20%; }
.col-30 { flex: 30%; }
.col-40 { flex: 40%; }
.col-50 { flex: 50%; }
.col-60 { flex: 60%; }
.col-70 { flex: 70%; }
.col-80 { flex: 80%; }
.col-90 { flex: 90%; }

/*******    Fazék, 20210113     ******/
/*******    az attribútum sorok / table kiváltása ******/

div.attributum-box {
	padding-top: 5px;
	padding-bottom: 5px;
	overflow-wrap: anywhere;
}

div.attributum-row:nth-child(odd)   { background-color: #F0F0F0; }
div.attributum-row:nth-child(even)  { background-color: #F8F8F8; }

div.attributum-row {
	display: flex;
	margin: 3px 0;
	padding: 2px 1px;
}

div.attributum-row .a-left {
	flex: 10%; 
	align-self: center;
	justify-self: right;
	padding: 0px 2px;
	text-align: center;
}

div.attributum-row .a-right {
	flex: 3 90%;
	font-size: 0.64rem;
}


/*******    Fazék, 20200618     ******/
/*******    index.geo refactoring  ******/

.index-page-body-wrapper {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	margin: 30px 0 0 0;
	width: 100%;
	padding: 0;
}

.title {
	background-color: var(--bg-color);
	color: var(--logo-green);
	font-size: 1.1rem;
	font-weight: 700;
	border-top-left-radius: 12px;
	line-height: 1.3;
	margin: 30px 0 10px;
	padding: 8px 5% 8px 8%;
	text-align: left;
}

.index-page-body-wrapper .link {
	border-left: 2px solid var(--logo-yellow);
	border-bottom: 3px solid var(--logo-yellow);
	border-bottom-left-radius: 8px;
	font-weight: 500;
	display: inline-block;  
	margin-bottom: 5px;
	padding: 3px 5px 5px 5px;
	}

.index-page-body-wrapper a {
	color: #990000;
	text-decoration: none;
	font-weight: 700;
}
	
.index-page-body-wrapper a:hover {
	text-decoration: underline;
}
	
.index-page-left {
	min-width: 120px;
	max-width: 300px;
	text-align: center;
	margin: 0 auto;
	padding: 0 2%;
	width: 25%;
}

.index-page-side-banner-box {
	padding: 10px 2%;
	margin: 0 auto;
	text-align: center;
	width: 100%;
}

.index-page-side-banner-box img{
	max-width: 100%;
	width: auto;
}

.index-page-central-random-image{
	max-height:75vh;
}

.index-page-center {
	text-align: center;
	flex-grow: 2;
	margin: 0;
	padding: 0 3% 0 5%;
	width: 75%;
}

.index_page_cache_info_column {
	padding: 0;
}

.box {
	border-left: 2px solid var(--logo-yellow);
	border-bottom: 3px solid var(--logo-yellow);
	border-bottom-left-radius: 8px;
	margin-bottom: 20px;
	padding: 1px 1px 2px 4px;
}

.mentor {
	background-color: var(--logo-yellow);
}

.index_page_cache_info_column ._title {
	color: var(--logo-green);
	font-size: 1.3rem;
	font-weight: 700;
	padding: 20px 0 10px;
}

.index-page-center .greetings {
	color: var(--logo-green);
	font-size: 1.5rem;
	font-weight: 700;
	hyphens: none;
	justify-content: center;
	line-height: 1.3;
	padding: 15px 20px;
}

/* Banner-container design a főoldalra by Fazék, 2018.9.23 */

.rotating-banner-container {
	width: 100%;
	max-width: 800px;
	margin: 3vh auto;
	display: flex;
	justify-content: center;
	border: 1px solid var(--bg-color);
}
  
.banner-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.banner-container .banner {
  position: relative;
  background: rgba(0, 0, 0, 0.7);
}

.banner-container .banner_img {
  width: 100%;
  display: block;
  transition: opacity ease-out 250ms;
}

.banner-container .banner:hover .banner_img {
  opacity: 0.4;
}

.banner-container .banner_title{
  font-size: 1.7rem;
  line-height: 2.4rem;
  color: white;
  white-space: wrap;
  margin-bottom: 0;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity ease-out 250ms;
}

.banner_title a { color: white; }
.banner_title a:hover { text-decoration: none; }

.banner-container .banner:hover .banner_title {
  opacity: 1;
}

/* a főoldali Facebook plug-in-hez */
.fb-container {
	width: 100%;
	max-width: 500px; 
	text-align: center;
	margin: 0 auto;
	padding: 10px 5px 20px;
}
#fb-action {
	width: 100%;
	display: inline-block;
    margin: 0 auto;
	padding: 5px 5px 15px;
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--logo-blue);
}

.news-box {
	display: grid;
	grid-template-columns: auto min-content;
	border-left: 2px solid var(--logo-yellow);
	border-bottom: 3px solid var(--logo-yellow);
	border-bottom-left-radius: 8px;
	border-top: 1px solid var(--logo-blue);
	margin-bottom: 20px;
	padding: 1px 1px 2px 4px;
	text-align: left;
}

.news-box + div {
	text-align: right;
}

.news-box-header {
	align-self: center;
	grid-column: 1 / 2;
	color: var(--logo-green );
	font-weight: 600;
	hyphens: none;
	justify-self: start;
	padding: 2px 10px 2px 5px;
}

.news-box-date {
	grid-column: 2 / 3;
	justify-self: flex-end;
	padding: 2px 5px 2px 10px;
}

.news-box-text {
	grid-column: 1 / 3;
	border-top: 1px solid var(--logo-blue);
	padding: 5px 2px;
	text-align: justify;
}

.one-line-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	width: 100%;
	padding: 0;
}

.one-line-flex > div {
	align-self: flex-end;
	text-align: center;
}

#caches_geo_title {
	margin-top: 15px;
	margin-bottom: 10px;
}

@media only screen and (max-width: 600px) {
	.index-page-body-wrapper {
		flex-wrap: wrap;
		width: 100%;
	}
	.index-page-left, .index-page-center {
		width: 100%;
	}
	.index-page-left {
		order: 2;
	}
  }


/*******    Fazék, 20200919     ******/
/*******   a rating/értékelés PNG-k kiváltása SVG-vel  ******/
svg.rating {
	height: 14px;
	width: 70px;
	stroke-dasharray: 3,1;
	stroke-width: 4px;
}

svg.rating text {
	font-size: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
}

svg.rating path:nth-child(1) { stroke: var(--green-lighter); }
svg.rating path:nth-child(2) { stroke: var(--orange-lighter); }
svg.rating path:nth-child(3) { stroke: var(--blue-lighter); }


/*******    Fazék, 20201102     ******/
/*******   collection típus     ******/
.coll-container {
	padding: 0.8em 0.3em;
}

.toggle_coll {
	padding: 0.8em 0.3em;
}

.coll-type {

}

#moderation-block {
	padding: 0 2px 5px;
	word-break: break-word;
}

/*******    Fazék, 20220130     ******/
/*******   user profil refaktorálás     ******/

.user-profile-top, .user-profile-middle, .user-profile-bottom {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.user-profile-middle:not(:has(table)) {
	padding-left: calc(1% + 1rem);
	padding-right: calc(1% + 1rem);
}

.user-profile-logo {
	background-color:#E8E8BF ;
    float: right;
	text-align: center;
    border-radius: 8px;
    max-width: 160px;
    margin: 5px auto;
	padding: 0 5px;
}

.user-profile-logo img {
    margin: 5px 0px;
    max-width: 150px;
}

.user-profile-logo div {
    padding: 0 1em 1em;
    max-width: 150px;
}

/*******    Fazék, 20240417     ******/
/*******   menu kiváltás        ******/

.wrapper-top-menu {
	width: 100%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
}

.menu-logo {
	padding: 10px 8px 5px 5px;
	max-width: max(15vw, 50px);
}

.menu-logo img {
	width: 100%;
	max-width: 120px;
}

.menu-menu {
	width: 100%;
	max-width: 680px;
}

#geocaching-name {
	font-family: 'GillSans', 'Gill Sans MT', 'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 2.2rem;
	line-height: 3rem;
	padding: 1vh 5vw 0 5vw;;
	a {
		color: black;
	}
	a:hover {
		text-decoration: none;
	}
}

#mgke-name {
	font-family: 'GillSans', 'Gill Sans MT', 'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 1rem;
	padding: 1vh 5vw 2vh 2vw;;
}

.menu-top-row {
	width: 100%;
	padding-bottom: 5px;
	gap: 1rem;
}

.menu-top-row a:not(.menulink) {
	font-family: 'GillSans', 'Gill Sans MT', 'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 0.85rem;
	color: var(--logo-green);
	text-decoration: none;
}

.menu-top-row a:hover:not(.menulink) {
	color: var(--black-color);
	background-color: var(--green-lighter);
}

/* Kis info elem, pl. hírek archívuma */

.article-item {
    border-left: 1px solid color-mix(in srgb, var(--logo-blue) 20%, white);
	border-top: 1px solid color-mix(in srgb, var(--logo-blue) 20%, white);
	border-top-left-radius: 8px;
    margin: 0.5rem auto 1rem;
    width: 100%;
	max-width: 900px;
}

.article-header {
  	background-color: color-mix(in srgb, var(--logo-blue) 10%, white); 
    display: flex;
	align-items: center; 
    justify-content: space-between; 
    padding: 4px; 
    gap: 8px; 
}

.article-icon {
	flex-shrink: 0; /* Prevents icon from squishing */
    align-items: center;
	width:14px;
}

.article-title {
	flex-grow: 1; /* Allows title to fill available space */
    text-align: left;
	font-weight: 700;
}

.article-date {
 	flex-shrink: 0; /* Prevents date from wrapping oddly */
    text-align: right;
    white-space: nowrap; /* Keeps date on one line */
	font-weight: 700;
}

.article-body {
    padding: 2px;
    width: 100%;
}


nav select {
	max-width: 140px;
}

nav.bottom {
	padding: 1rem 3rem; 
	margin-bottom: 4rem;
	font-family: 'GillSans', 'Gill Sans MT', 'Gill Sans', Calibri, 'Trebuchet MS', sans-serif;
	font-size: 0.85rem;
	color: var(--black-color); 
}

nav.bottom a {
	hyphens: none;
	color: var(--logo-green);
	text-decoration: none;
}

nav.bottom a:hover {
	color: var(--black-color);
	background-color: var(--green-lighter);
}

.menu-bottom-row {
	width: 100%;
	padding: 4px 0;
}

.menu-bottom-row select, .menu-bottom-row option {
	width: 100%;
	padding: 0;
	margin: 0;
}

.menu-bottom-row option {
	background-color: white;
}

.menulist {
	line-height: 0.8; 
}

.menu-one-line-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	place-content: space-around;
}

.menu-col {
	border-right: 1px none white;
}

.thumb-wrapper{
	display: flex;
	width: 150px;
	flex-wrap: wrap;
	gap: 6px 6px;
	justify-content: space-around;
}

.log-thumbnails-column .thumb-wrapper {
	width: auto;
	display: grid;
  	/* Auto-fill columns with a minimum width of ???px (adjust as needed) */
  	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--thumb-pic-small)), 1fr));
  	gap: 0.5rem;
}

.log-thumbnails-column .thumb-cell {
	width: var(--thumb-pic-small);
	height: var(--thumb-pic-small);
	margin: 0 auto;
}

.cache-thumbnails-column .thumb-cell {
	width: var(--thumb-pic-big);
	height: var(--thumb-pic-big);
	margin: 0 auto;
}

.thumb-cell {
	width: 70px;
	height: 70px;
	margin: 0 auto;
}

.thumb-cell-bigger {
	width: 120px;
	height: 120px;
}

.thumb-cell img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	border-radius: 4px;
}
	
/*** start    g:hu+ online súgóhoz  ***/
/* Last mod: 2022.07.06  Bigmick*/
.legomb2 {font-size: 11px; width:85px; height: 18px; padding: 0px; margin: 0px; color: #48330C; text-decoration: none; background-color : #d0ffffc8;}
.legomb2:hover{font-size: 11px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #003300; text-decoration: none; font-weight: bold; background-color : #FBF300;}
.legombbr {font-size: 11px; width:85px; height: 18px; padding: 0px; margin: 0px; color: #48330C; text-decoration: none; background-color : #b0cccca8;}
.legombbr:hover{font-size: 11px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #003300; text-decoration: none; font-weight: bold; background-color : #DBD300;}
.legomb3 {font-size: 12px; width:90px; height: 18px; padding: 0px; margin: 0px; color: #003300; text-decoration: none; background-color : #FBF300;}
/*** end  g:hu+ online súgóhoz  ***/

@media print{
   	.noprint{
  		display:none;
	}
}

#no-print-button {
	float:right;
}

/* A nyomtatás gomb csak desktopon látszik */
@media screen and (max-width: 960px) {
	#no-print-button {
		display: none;
	}
}

/* Style for the main container of a single log entry */


#verseny {font-size: 1rem;}
#verseny .item {display: block;margin: .5rem;}
#verseny label {display: inline-block;}
#verseny select {height: 1.5rem;display: inline-block;font-size: 1rem;}
#verseny input {height: 1.5rem; border: 1px solid gray;font-size: 1rem;font-family: Verdana, Arial, Helvetica, sans-serif;background: #fff;}
#verseny .textarea {height: 8rem;font-size: 1rem; width:100%;}
#verseny .w5 {width: 5rem;}
#verseny .w10 {width: 10rem;}
#verseny .w20 {width: 20rem;}
#verseny .whalf {width: 50%;}
#verseny .wmax {width: 100%;}
#verseny .mod {height: 1.5rem; width: 1.5rem; margin-left: .5rem; font-size: .9rem;}
#verseny table {width: 100%;border-collapse: collapse;}
#verseny tr {line-height: 1.5rem;}
#verseny table td, #verseny table th {padding: .3rem;}
#verseny tbody tr:nth-child(even) {background: #E8E8BF;}
#verseny table > tfoot > tr > th {background: #ccc !important;}
button.send {height: 2.5rem;font-size: 1rem;font-weight: bold;margin: 0 3rem;border: 1px solid black; background: lightgray;}


.copy {
    position: relative;
    cursor: pointer;
}
span.copy:active:after {
    content:attr(title);
    padding:5px;
    border:1px solid #ccc;
    top:5px;
    right:10%;
    background: #ffd600;
}

table.filtertable {border-spacing: 1px; border-collapse: separate;width: 100%;}
.filtertable th {background-color: #000000; color: #FFFFFF;}
.filtertable th:last-child {width: 100%; text-align: left; padding-left: 3px;}
.filtertable tr:nth-child(even) {background-color: #E0E0E0;}
.filtertable tr:nth-child(odd) {background-color: #F0F0F0;}
.filtertable td:last-child {padding-left: 3px; width:100%;}

.preview-box {
    margin-top: 3rem;
    padding: 5px;
    border: solid var(--logo-green) 1px;
    border-radius: 8px;
    text-align: justify;
    word-break: break-word;
}

.preview-box::before {
    padding: 4px 0 4px 6px;
    margin: 0px auto;
    border-bottom: solid var(--logo-green) 1px;
    content: 'Rövid leírás:';
    display: block;
    color: var(--logo-blue);
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    height: 2rem;
}

.hint-box {
    margin-top: 3rem;
    padding: 5px;
    border: solid var(--logo-green) 1px;
    border-radius: 8px;
}

.hint-box::before {
    padding: 4px 0 4px 6px;
    margin: 0px auto;
    border-bottom: solid var(--logo-green) 1px;
    content: 'Tipp:';
    display: block;
    color: var(--logo-blue);
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    height: 2rem;
}

.p-line {
    padding: 5px;
    width: 100%;
}

.ui-tooltip {
    text-align: left;
    padding: 0.6rem;
    color: black;
    border-radius: .5rem;
    background: #87CEEB;
    font-size: 0.9rem;
    box-shadow: 0 0 .4rem black;
}

.ttip:hover {background: #87CEEB;}

.p1 {
	color: red;
	font-weight: bold;
}

.red {color: red;}