/* ---------------------------------------------------------
   HTML5 Bones
   This stylesheet contains print styling and a section for 
   you to simply add your own. This is a basic template 
   after all.
   ---------------------------------------------------------*/
	body {
		font-family: arial, helvetica, sans-serif;
	}
	/* Default link styling */
	a:link { color:#333; }
	a:visited { color:#344; }
	a:hover, a:focus { color:#000; }
	a:active { color:#f00; }
	
	h3 a, h2 a, h1 a, span.title a {
		text-decoration: none;
	}
	
	span.bold {
		font-weight: bold;		
	}
	
	span.italic {
		font-style: italic;
	}
	
	span.red {
		color: #d00;
	}
	span.green {
		color: #0d0;
	}
	blockquote {
		margin: 0;
		padding-left: 2%;
		border-left: 5px solid #d4d4d4;

	}
/* ---------------------------------------------------------
   Author's styles
   ---------------------------------------------------------*/
	html {
		background-color: #fff;
	}
	
	body {
		background: #fff;
		color: #333;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
	}
	
	img {
		max-width: 100%;
		height: auto;
	}
	
	iframe {
		max-width: 100%;
		display:block;
		margin: auto;
	}
	
	a.youtube-link {
		font-size: 0.8rem;
		color: #080808;
		text-align: right;
		display: inline-block;
		width: 99%;
		margin-top: 1%;
	}
	div.youtube-video {
		padding-bottom: 1%;
		border-bottom: 1px solid #a9a9a9;
	}
	
	div.youtube-video p .title {
		font-weight: bold;		
	}
	
	div.youtube-video data-iframe {
		display: block;
		width: 280px;
		height: 158px;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin: auto;
	}
	
	div.youtube-video data-iframe.inTransition {
		background: url(/bilder/video-teaser-image/sanduhr.svg);
	}	
	
	.hideme {
		position: absolute;
		top: -32768px;
		left: -32768px;
	}

	.clear { 
		clear: both;
	}

	header[role="banner"],
	body > footer {
		background: #333;
		color: #fff;
	}
	
	header[role="banner"] div.hgroup {
		background: #333 url(/img/wappen-uedorf_100x106.png) 2% 2% no-repeat;
		min-height: 60px;
		padding-top: 2em;
	}
	
	div[class="wrap"] {
		padding: 0 1em;
	}
	
	header .hgroup {
		padding: 1em;
		text-align: right;
	}
	
	header[role="banner"] a {
	  color: white;
	  text-decoration: none; 
	}
	
	header[role="banner"] span.title, #welcome span.title {
		font-size: 1.8em;
	}
	
	header[role="banner"] p {
	  padding: 0;
	  margin: 0;
	}
	footer[role="contentinfo"] a {
	  color: white;
	  text-decoration: none;  
	}
	
	nav[role="navigation"] {
	  background: #eee; 
	  color: #333; 
	  padding-left: 1em;
	}
	nav[role="navigation"] ul {
	  padding: 0;
	  margin: 0; 
	}
	nav[role="navigation"] li {
	  display: inline-block;
	  padding: 0;
	  margin: 0; 
	}
	nav[role="navigation"] li a {
	  text-decoration: none; 
	  color: #333;
	  padding: 0 0.25em 0 0;
	  line-height: 2em;
	}
	nav[role="navigation"] li.active a {
	  color: black;
	  text-decoration: underline;
	}

	body { min-width: 280px; }
	nav[role="navigation"]  div.menubutton { display: none; }

	h1 {
		font-size: 1.5em;
	}

	h2 {
		font-size: 1.3em;
	}
	
	h3 {
		font-size: 1.1em;
	}
	
	main  h1, main h2, main  h3 {
	  line-height: 1.25; 
	  padding: 0;
	  margin: 0.8em 0; 
	}
	
	main header time {
		color: #666;
		font-size: 0.9rem;
		padding: 0.25em 0 0;
		display: block;
	}
	
	section.latest-news article {
		margin-bottom: 1.5em;
		float: left;
		max-width: 100%;
		clear: both;
	}
	
	section.latest-news p {
		width: 60%;
		float: left;
		padding-right: 2%;
	}
	section.latest-news figure {
		width: 33%;
		float: left;
	}
	
	section.latest-news a.readmore {
		margin-left: 2%;
	}
	
	section article figure {
		text-align: center;
	}
	
	section article img {
		box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.88);
		margin: 1% 0;
	}
	
	section article img.maps {
		box-shadow: none;
	}
	
	section.hint {
		line-height: 200%;
	}
	
	nav#universal {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 0 0 0 1em;
	}

	aside section h3 {
		float: left;
		width: 100%;
		text-indent: 35px;
		line-height: 1.4em;
		height: 22px;
		background-repeat: no-repeat;
		background-color: rgba(0,0,0,0);
		background-image: url("/img/icons/sidebar-icons.png");
		white-space: nowrap;
		text-overflow: ellipsis; 
	}

	aside section h3 a {
		vertical-align: text-top;
	}
	
	#upcoming-dates h3 {
		background-position: 0 0;
	}

	#carnival-teaser h3 {
		background-position: 0 -118px;
	}
	
	#rhein-gauge h3 {
		background-position: 0 -24px;
	}
	
	#rhein-gauge a.source {
	  float: right;
	  font-size: 0.7em;
	  line-height: 2em;
	}	
	
	#uedorf-suntimes h3 {
		background-position: 0 -95px;
	}
	
	#uedorf-suntimes > p {
		line-height: 1.3em;
		margin: 0;
	}
	
	#uedorf-maps h3 {
		background-position: 0 -65px;
	}
	
	#uedorf-weather h3 {
		background-position: 0 -44px;
	}
		
	#uedorf-weather div.homepageweather , aside section p, aside section  {
		float: left;
	}
		
	#upcoming-dates ul {
		padding-left: 0;		float: left;		margin-bottom: 0;		margin-top: 0.8em;
	}

	#upcoming-dates li {
		margin-bottom: 1em;		list-style-type: none;
	}
	
	#webcam-teaser h3 {
		background-position: 0 -141px;
	}
	
	#webcam-uedorf-wrapper {
		position: relative;
	}
		
	#loop_toggler {
		/*display: none !important;*/
		visibility: hidden;
	    width: 2.5rem;
		height: 2.5rem;
		border: 1px solid #000;
		background-size: contain;
		opacity: 0.8;
		background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik02IDMgTDM0IDIwIEw2IDM3IFoiIHN0eWxlPSJmaWxsOiMwMDA7c3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjE7c3Ryb2tlLWxpbmVqb2luOnJvdW5kOyIvPjwvc3ZnPg==);
		display: inline-block;
		border-radius: 0.25rem;
		position: absolute;
		top: 1rem;
		right: 1rem;
		z-index: 100;
	}
	
	#webcam-uedorf-wrapper:hover  #loop_toggler {
		visibility: visible;
	}
	
	#loop_toggler.running {
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgeD0iOSIgeT0iOSIgc3R5bGU9ImZpbGw6cmdiKDAsMCwwKTtzdHJva2Utd2lkdGg6MztzdHJva2U6cmdiKDAsMCwwKSIgLz48L3N2Zz4=);
	}
	
	#loop_load_index {
		background-color: #059823;
		width: 0%;
		text-align: center;
		height: 20px;
		float: left;
		color: #fff; 
		margin: 1% 0;
		line-height: 120%;
	}
	
	#loop_load_index:after {
		content: "%";
	}
	
	#loop_load_index:empty:after {
		content: "";
	}
	
	#archive_image {
		float: left;
		clear: both;
	}

	
	aside section time {
		display: block;
	}
		
	figcaption {
		font-size: 0.8em;
		text-align: left;
	}
	
	body.termine section.overview article {
		border-bottom: 1px solid #DDDDDD;
		margin-bottom: 3%;
		padding-bottom: 3%;
	}	
	
	body.kontakt form fieldset {
		border: none;
	}
		
	body.kontakt form label, body.kontakt .hint {
		display: block;
		padding: 2%;
	}	
	
	body.kontakt select, body.kontakt input, body.kontakt textarea {
		width: 70%;
		border: 1px solid #aaa;
	}
	
	body.kontakt select {
		width: 71%;
	}
	
	body.kontakt .hint {
		width: 68%;
	}
	.mandatory + span::after {
		content: "*";
		padding-left: 4px; 
	}
	
	input#error_message {
		background-color: rgba(0, 0, 0, 0);
		border: medium none;
		color: #FF0000;
	}

	section.alphabet ul {
		padding: 0;
	}
	
	section.alphabet ul li {
		font-size: 1.2em;
		list-style-type: none;
		padding-bottom: 1%;
	}
	
	section.alphabet article ul {
		margin: 0;
		border: 1px solid #aaa;
		border-width: 1px 0;
		padding: 1em 0;
	}
	section.alphabet article ul li {
		font-size: 0.9em;
	}
	
	section.alphabet ul li.first {
		margin-top: 3%;
	}
		
	article footer ul.further_links {
		font-size: 0.9rem;
		line-height: 1.2rem;
		list-style-position: inside;
		padding: 0;
		border: none;
	}
	
	section.gallery ul {
		list-style-type: none;
		padding: 0;
	}
	
	section.gallery ul li {
		display: inline-block;
		margin-right: 1%;
	}
	
	section.gallery ul li:first-child::after {
		content: " | ";
	}
		
	section.gallery.overview article figure {
		text-align: left;
		float: left;
		margin-right: 1%;
		margin-bottom: 2%;
		width: 24%;
		position: relative;
	}
		
	section.gallery.overview article figure img {
		margin-right: 1%;
	}

	section.gallery article figure span, section.gallery p.flickr_hint {
		display: block;
		width: 100%;
		float: left;
	}
	
	section.gallery.overview article figure span {
		display: none;
	}	
	
	/* linklist auf /links/ */
	ul.linklist li {
		margin-bottom: 1em;
	}
	
	ul.linklist li a {
		display: block;
	}
	
	ul.linklist li span {
		font-size: 0.8em;
	}
	
 .eventcalendar {
	width: 96%;
	display: block;
	border: 1px solid #ddd;
 }
 
 .eventcalendar li {
	display: block; 
	background-color: #fff;
	margin: 1% 0;
	padding: 1%;
	min-height: 1.2rem;
	font-family: monospace;
	font-size: 0.9rem;	
 }
 
 .eventcalendar li span.date{
	display: block; 
	width: 20%; 
	float: left;
	font-weight: bold;
 }
 
 .eventcalendar li.weekdaySo {
 	background-color: #eee;
 }
  
 .eventcalendar li.weekdaySa {
	background-color: #f1f1f1;
 }
  
 .eventcalendar li a{
	display: block; 
	width: 79%;
	float: left;
 }

 @media screen and (max-width: 480px) { 
	.eventcalendar li span.date, .eventcalendar li a {
		width: 100%;
	}
	
	.eventcalendar li {
		min-height: 2.5rem;
	}
 }
 
  .eventcalendar li a.confirmed {
	color: #0a0;
  }
  .eventcalendar li a.blocked {
	color: #f80;
  }

  .eventcalendar li a.blocked:after {  
	content: " (vorgemerkt)";
  }
  
  .eventcalendar li a.confirmed::after {
	content: " (best\00E4tigt) \2714";
  }
  
  .eventcalendar form {
	margin-bottom: 5%;
  }
  
  .eventcalendar form label {
	display: block;
	padding: 1% 0;
  }
  
  .eventcalendar form fieldset {
	margin-bottom: 1%;
  }
  
  .eventcalendar form input {
	padding: 1%;
  }
	
  .eventcalendar #result {
	display: block;
	border: 2px solid #0a0;
	padding: 2%;
  }	

  .eventcalendar #result.error {
	border-color: #f00;
  }
	
	input[readonly="readonly"]
	{
		background-color: #dcdcdc;
	}

	@media screen and (max-width: 360px) { 
		header[role="banner"] div.hgroup{
			background: #333 url(/img/wappen-uedorf_60x64.png) 2% 10% no-repeat;
		}
	}
	
	#map {
		height: 100%;
		width: 100%;
		min-height: 90vh;
		margin-top: 2%;
	}
	
	#grantPermissionForm {
		display: none;
		margin-top: 1%;
		padding: 1%;
		border: 1px solid #dcdcdc;
		background-color: #f8f8f8; 
	}
	
	#grantPermissionForm fieldset {
		border: 0;
		padding: 1rem 0; 
	}
	
	#grantPermissionForm input[type=checkbox] {
		margin-right: .5rem;
	}
	
	#grantPermissionForm input[type="button"] {
		margin-bottom: 1%;
	}

	
	
/**
 grosse Displays
 */
@media (min-width: 851px) {
	body {
		max-width: 1006px;
	}
	
	html {
		background-color: #aaa;
	}
		
	body > header[role="banner"] {
		height: 400px;
		width: 100%;
		float: left;
		position: relative;
		background-color: #333;
	}
	header[role="banner"] div.hgroup {
		height: 100%;
		width: 100%;
		padding: 0;
		float: left;
		background-image: url(/img/wappen-uedorf_179x190.png);
		background-color: transparent;
		background-position: 2% 33%;
	}
	
	header .hgroup {
		text-align: left;
	}
	
	span.title {
		display: block;
	}
	
	header .hgroup span.title, header[role="banner"] p {
		margin: 0;
		background-color: rgba(0,0,0,0.5);
		padding: 0 10px;
	}	
	
	header .hgroup span.title a, header[role="banner"] p a {
		opacity: 1;
		text-shadow: -3px -2px 2px rgba(0, 0, 0, 0.9);
		
	}
		
	header[role="banner"] p {
		left: 25%;
		opacity: 1;
		background-color: none;
        position: absolute;
		top: 0;
		width: 35%;
		background-color: rgba(0, 0, 0, 0);
		line-height: 2em;
	}
	
	header[role="banner"] p a {
		vertical-align: text-top;
	}
	
	nav[role="navigation"] {
		position: absolute;
		bottom: 0;
	}
	
	div.wrap {
		float: left;
		background-color: #fefefe;
		width: 96%;
		padding: 1% 2%;
		}
	
	div.wrap section {
		color: #444;
		background-color: #ececec;
		padding: 5px;
		margin: 10px 0;
		border: 2px solid #d8d8d8;
		border-width: 0 2px;
		width: 96%;
	}
	
	div.wrap main section {
		border-right: none;
		padding: 2% 1% 2% 2%;
		float: left;
	}
	
	div.wrap main {
		width: 79%;
		float: left;
	}
	
	main h1, main h2, main h3 {
		margin: 0.5em 0 0.8em;
	}
	
	div.wrap aside {
		width: 20%;
		border-left: none;
		float: right;
		min-width: 172px;
	}
	
	div.wrap aside section {
		border-left: none;
		padding: 2% 5% 5%;
		font-size: 0.8em;
		overflow: hidden;
		float: left;
	}
	
	div.wrap aside section h3 {
		margin: 0.25em 0;
	}
	
	body > footer {
		position: absolute;
		top: 0;
		right: 0;
		background-color: #fff;
		display: block;
		width: 100%;
	}

	header nav[role="navigation"] {
		background-color: rgba(0, 0, 0, 0.6);
		padding: 0;
		width: 100%;
	}
	
	nav[role="navigation"] ul {
		margin-left: 0.8em;
	}
	
	nav[role="navigation"] li {
		padding: 2px 6px;
	}
	
	nav[role="navigation"] li a {
		color: #fefefe;
		font-size: 1em;	
		font-weight: bold;
		text-shadow: -2px -2px 2px #000000;
	}
	
	nav[role="navigation"] li a:hover {
		text-decoration: underline;
	}
	
	nav[role="navigation"]#universal {
		bottom: auto;
		min-width: 160px;
		background-color: transparent;
	}
	
}	/* ende grosse displays */
	
/* ---------------------------------------------------------
   Print styles
   ---------------------------------------------------------*/
@media print {
    * {
        color:#000 !important;
        box-shadow:none !important;
        text-shadow:none !important;
		background:transparent !important;
    }
	html { background-color:#fff; }
	/* Hide navigation */
	nav { display:none; }

	/* Show link destinations in brackets after the link text */
	a[href]:after { content: " (" attr(href) ") "; }
	a[href] {
		font-weight:bold;
		text-decoration:underline;
		color:#06c;
		border:none;
	}
	/* Don't show link destinations for JavaScript or internal links */ 
	a[href^="javascript:"]:after, a[href^="#"]:after { content:""; }
	
	/* Show abbr title value in brackets after the text */
	abbr[title]:after { content: " (" attr(title) ")"; }

	figure { 
		margin-bottom:1em; 
		overflow:hidden;
	}

	figure img { border:1px solid #000; }
}

	
	@media (max-width: 850px) {
		div.wrap aside {
			width: 100%;
			float: left;
		}
		div.wrap aside section {
			border-right: none;
			width: 100%;
		}
	}
	
	/* gauge chart background */
	.chart-container {
		background-color: #fff;
	}
	
	
	#list_of_poi li {
		cursor: zoom-in; 	 
	}
	
	#list_of_poi li.start {
		cursor: zoom-out; 	 
		margin-bottom: 2%;
	}

	#list_of_poi li:hover {
		text-decoration: underline;
	}
	
	.ship-gallery {
		text-align: center;
		margin-top: 10px;
	}

	.gallery-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.gallery-image {
		max-width: 240px;
		max-height: 300px;
		border-radius: 2px;
		margin: 0;
		cursor: pointer;
	}

	.gallery-prev, .gallery-next {
		background: none;
		border: none;
		font-size: 14px;
		cursor: pointer;
		padding: 1px;
	}
/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

/* Schließen-Button */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 30px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Navigationspfeile für die Lightbox */
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 38%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 5px;
    transition: background 0.3s ease-in-out;
}

.lightbox-prev {
    left: 10px; /* ❗ Pfeil ganz nach links */
}

.lightbox-next {
    right: 10px; /* ❗ Pfeil ganz nach rechts */
}

/* Hover-Effekt für die Pfeile */
.lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
}
.ship-label {
    font-size: 10px;
    font-weight: bold;
    color: black;
    background: rgba(255, 255, 255, 0.8);
    padding: 1px 3px;
    border-radius: 2px;
    margin-left: 4px; /* Abstand zum Icon */
    white-space: nowrap;
}

.loading-spinner {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #222;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 1000;
}

/* normalerweise unsichtbare, erläuternde texte für screenreader */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* galerie lightbox elemente */
#image-lightbox {
	display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,0.9); justify-content:center; align-items:center; flex-direction:column;
}

#close-image-lightbox {
	position:absolute; top:20px; right:30px; color:white; font-size:40px; font-weight:bold; cursor:pointer;
}

#image-lightbox-wrapper {
	max-width:90%; max-height:74%; text-align: center; background: white; border:3px solid white; box-shadow: 0 0 20px rgba(0,0,0,0.5); overflow-y: auto;
}

#image-lightbox-counter {
	margin-top: 1%;
	position: relative; 
}

#image-lightbox-title {
	font-weight: bold; margin-top: 1%;
}

#image-lightbox-img {
	max-height: inherit; margin-top: 1%;
}

#image-lightbox-caption {
	margin: 1%; font-size: smaller;
}

#image-lightbox-prev-img {
	background:none; border:1px solid white; color:white; padding:10px 20px; cursor:pointer; margin-right:10px; position: absolute; left: 2%; bottom: 2%;
}

#image-lightbox-next-img {
	background:none; border:1px solid white; color:white; padding:10px 20px; cursor:pointer; position: absolute; right: 2%; bottom: 2%;
}

.permalink {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgdmlld0JveD0iMCAwIDQwIDQwIgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcyIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxzdHlsZQogICAgIGlkPSJzdHlsZTEiPi5zdDB7ZmlsbDojZmZmfTwvc3R5bGU+CiAgPHBhdGgKICAgICBjbGFzcz0ic3QwIgogICAgIGQ9Im0yMi4xNyA4LjgyLTUuMDUgNS4wNWMuNzEtLjExIDEuNDItLjEzIDIuMTQtLjA2LjU4LjA2IDEuMTUuMTkgMS43LjM5bDMuMjUtMy4yNWEzLjUzMiAzLjUzMiAwIDAgMSA0LjkyIDAgMy40MSAzLjQxIDAgMCAxIDAgNC43OWwtMy4zIDMuMzMtMS4xNyAxLjE3LS42NS42NWMtLjU4LjU4LTEuMzUuOTMtMi4xNy45OS0uNS4wMy0xLS4wNC0xLjQ3LS4yMS0uNDQtLjE3LS44NC0uNDQtMS4xNy0uNzdsLS4xNi0uMThjLS40OS0uNTgtMS4zNC0uNjctMS45NS0uMjJoLS4wOGMtLjYzLjQ4LS43NSAxLjM4LS4yNyAyLjAxLjAxLjAyLjAyLjAzLjA0LjA1LjExLjEzLjIyLjI1LjM0LjM4LjQ2LjQ3IDEgLjg3IDEuNTggMS4xN2E2LjQgNi40IDAgMCAwIDcuNDEtMS4xNmwuMDctLjA3IDUuMDUtNS4wNWE2LjM1MiA2LjM1MiAwIDAgMCAuMDEtOC45OWwtLjAxLS4wMWE2LjMyNSA2LjMyNSAwIDAgMC04Ljk2LS4wN2MtLjA0IDAtLjA3LjAzLS4xLjA2eiIKICAgICBpZD0icGF0aDEiCiAgICAgc3R5bGU9ImZpbGw6IzAwMDAwMCIgLz4KICA8cGF0aAogICAgIGNsYXNzPSJzdDAiCiAgICAgZD0iTTIxLjMxIDE1Ljk0Yy0uNDktLjI1LTEtLjQzLTEuNTQtLjU1YTYuMzEgNi4zMSAwIDAgMC00LjAyLjQyYy0uNjkuMzItMS4zMy43NS0xLjg3IDEuMjlsLS4wNy4wNy01LjA1IDUuMDVhNi4zNTIgNi4zNTIgMCAwIDAtLjAxIDguOTlsLjAxLjAxYTYuMzUyIDYuMzUyIDAgMCAwIDguOTkuMDFsLjAxLS4wMSA1LjA1LTUuMDVjLTEuMjkuMjEtMi42LjEtMy44NC0uMzNsLTMuMjUgMy4yNWEzLjUzMiAzLjUzMiAwIDAgMS00LjkyIDAgMy40MSAzLjQxIDAgMCAxIDAtNC43OWwzLjI5LTMuMjkgMS4xNy0xLjE3LjY1LS42NWMuMjEtLjIxLjQ0LS4zOC42OS0uNTMuNDUtLjI3Ljk2LS40MiAxLjQ4LS40Ni41LS4wMyAxIC4wNCAxLjQ3LjIxLjQ0LjE3Ljg0LjQ0IDEuMTcuNzdsLjE2LjE4Yy40OS41OCAxLjM0LjY3IDEuOTUuMjJoLjA4Yy42My0uNDguNzUtMS4zOC4yNy0yLjAxLS4wMS0uMDItLjAyLS4wMy0uMDQtLjA1YTcuMzkyIDcuMzkyIDAgMCAwLTEuODMtMS41OHoiCiAgICAgaWQ9InBhdGgyIgogICAgIHN0eWxlPSJmaWxsOiMwMDAwMDAiIC8+Cjwvc3ZnPgo=);
	background-repeat: no-repeat; 
	height: 20px;
    width: 20px;
    position: absolute;
    text-indent: 30px;
    overflow: hidden;
    top: 1%;
    right: 1%; 
}