/* FONT */
	@font-face {
		font-family: 'ShareTech';
		font-style: normal;
		font-weight: 400;
		src: url(../fonts/sharetech.woff2) format('woff2');
	}
	
	/* COLORS */
	:root {
		--blue: #1e90ff;
		--white: white;
		--blau: #08088A;
		--dunkelblau: #0A0A2A;
		--hellblau: DeepSkyBlue;
		--hellgruen: #58FA58;
	}
	
	a:link { font-weight:normal; color:var(--hellblau); text-decoration:none; }
	a:visited { font-weight:normal; color:var(--hellblau); text-decoration:none; }
	a:focus { font-weight:normal; color:var(--hellblau); text-decoration:none; }
	a:hover { font-weight:normal; color:var(--hellblau); text-decoration:underline overline; }
	a:active { font-weight:normal; color:var(--hellblau); text-decoration:none; }
	
	html, body {
		width: 100%;
		height: 100%;
		font-family: arial;
		font-size: 14px;
		color: var(--hellblau);
		background: var(--dunkelblau);
		margin: 0px;
		padding: 0px;
		font-family: 'ShareTech', sans-serif;
	}
	.content {
		position: relative;
		height: 100%;
		max-width: 800px;
		margin: auto;
		/*background: var(--dunkelblau);*/
		padding: 0px;
		text-align: center;
	}
	.head {
		/*background: var(--dunkelblau);*/
		margin: auto;
		padding: 1px;  
		text-align: center;
	}
	.aktuell {
		background: var(--dunkelblau);
		margin: auto;
		font-size: 22px;
		padding-left: 6px;  
		padding-right: 6px; 
		padding-bottom: 6px; 
		text-align: center;
	}
	#canvasMo_1 {
		position: absolute;
		left: 0;
		margin-top: 17px;
		margin-left: 20px;
	}
	#canvasMo_2 {
		margin-top: 0px;
		margin-left: 0px;
	}
	#imgSign_1 {
		position: absolute;
		right: 0;
		width: 96px;
		height: 96px;
		margin-top: 6px;
		margin-right: 10px;
	}
	#imgSign_2 {
		width: 96px;
		height: 96px;
		margin-top: 0px;
		margin-right: 0px;
	}
	#counterNext {
		font-weight: bold;
		font-size: 26px;
	}
	.counterNext {
		color: var(--hellblau);
	}
	.counterNext.green {
		color: var(--hellgruen);
	}
	.werbung {
		/*background: var(--dunkelblau);*/
		margin: auto;
		padding: 2px; 
		height: 100px;
		max-height: 100px;
		text-align: center;
	}
	
	.steuerung {
		/*background: var(--dunkelblau);*/
		margin: auto;
		padding: 6px;  
		text-align: center;
	}
	#stRahmen {
		font-weight:bold;
		font-size:28px;
		display:inline-grid;
		grid-template-columns: 1fr 1fr 1fr;
		align-items: center;
		border: 1px solid var(--hellblau);
		border-radius: 7px;
	}
	#stJahr {
		border-left: 1px solid var(--hellblau);
		border-right: 1px solid var(--hellblau);
		border-radius: 0px;
		padding-left:4px;
		padding-right:4px;
		cursor: pointer;
	}
	#stMinus, #stPlus {
		font-size: 36px;
		cursor: pointer;
	}
	#stMinus:hover, #stPlus:hover, #stJahr:hover {
		color: var(--hellgruen);
	}
	
	.tabelle {
		position: relative;
		background: var(--dunkelblau);
		margin: auto;
		padding-left: 6px;  
		padding-right: 6px; 
		text-align: center;
	}
	.footer {
		font-size: 16px;
		position: absolute; 
        bottom: 0;
		width: 100%;
		/*background: var(--dunkelblau);*/
		margin: auto;
		padding: 0px;  
		text-align: center;
	}
	#tblFooter{
		width: 100%;
		margin-top: 4px;
		margin-bottom: 20px;
	}
	
	.tdLeft{
		text-align: left;
		padding: 3px;
	}
	
	/* Tabelle Style */
	.grid {
		position: relative;
		border: 1px solid var(--blau);
		padding-top: 30px;
		background: var(--dunkelblau);
		width:100%;
	}
	.grid-container {
		overflow-y: auto;
		overflow-x: hidden;
		height: 400px;
	}
	.table {
		border-spacing: 0;
		width:100%;
	}
	.td + .td {
		border-left:1px solid var(--blau);
	}
	.td, .th {
		border-bottom:1px solid var(--blau);
		font-size: 22px;
		background: var(--dunkelblau);
		color: var(--hellblau);
		padding: 5px 0px; /* 10px 25px */  /* oben/unten links/rechts */
	}
	.th {
		height: 0;
		line-height: 0;
		padding-top: 0;
		padding-bottom: 0;
		color: transparent;
		border: none;
		white-space: nowrap;
	}
	.th div{
		position: absolute;
		background: transparent;
		color: var(--hellblau);
		padding: 7px 4px; /* 9px 25px */
		top: 0;
		margin-left: -5x; /* -25px */
		line-height: normal;
		border-left: 1px solid var(--blau);
	}
	.tr {
		cursor: pointer;
	}
	
	.ad_mondkalender {
		display:inline-block;
		width:728px;
		height:90px;
	}
	
	h1 {
		margin: 5px;
		font-size: 32px;
	}
	
	#btnMoonSignCalculator{
		position:absolute;
		font-size:19px;
		text-align:center;
		margin-top:15px;
		margin-left:10px;
		z-index:10;
		left:-300px;
	}
	
	#divContainerMoonSigns{
		position:absolute;
		z-index:999;
		width:100%;
		height:100%;
		background:rgba(10, 10, 10, 0.6);
	}
	#divMoonSignsDetails {
		position: absolute;
		margin: auto;
		padding: 20px;  
		border: 2px solid white;
		border-radius: 7px;
		text-align: center;
		background: black;
		color: white;
		top: 50px;
		left: 0; 
		right: 0; 
		margin-inline: auto; 
		width: fit-content;
		z-index: 999;
	}
	#strMoonSignsDetails {
		margin-top:-8px;
	}
	input[type="datetime-local"] { 
		background: transparent;
		color: white;
		font-size: 20px;
		border: thin solid var(--blau);
		border-radius: 5px;
		color-scheme: dark;
		background-color: black;
		padding: 5px;
	}
	#selectTZ { 
		background: transparent;
		color: white;
		font-size: 16px;
		border: thin solid var(--blau);
		border-radius: 5px;
		color-scheme: dark;
		background-color: black;
		padding: 5px;
	}
	#imgContainer {
		z-index: 10;
		text-align: center;
		font-size: 22px;
		font-weight: 800;
		margin-top: -33px;
	}
	#closeMoonSignsDetails{
		position: absolute;
		line-height: 40px;
		width: 40px;
		top: 0;
		right: 0;
		margin-top: -11px;
		margin-right: -11px;
		font-size: 40px;
		font-weight: normal;
		cursor: pointer;
		background: var(--hellblau);
		color: var(--dunkelblau);
		border: 2px solid var(--white);
		border-radius: 50%;
	}
	#closeMoonSignsDetails:hover {
		color:var(--white);
	}
	
	#divImpressum {
		position: absolute;
		margin: auto;
		padding: 20px;  
		border: 2px solid white;
		border-radius: 7px;
		text-align: center;
		background: black;
		color: white;
		top: 200px;
		left: 0; 
		right: 0; 
		margin-inline: auto; 
		width: fit-content;
		z-index: 999;
	}
	
	#divDetails {
		position: absolute;
		margin: auto;
		padding: 20px;  
		border: 2px solid white;
		border-radius: 7px;
		text-align: center;
		background: black;
		color: white;
		top: 200px;
		left: 0; 
		right: 0; 
		margin-inline: auto; 
		width: fit-content;
		z-index: 99;
	}
	#contentDetails {
		padding-bottom: 20px;
	}
	#detailDate {
		font-weight:bold;
		font-size: 16px;
		margin-top:11px;
	}
	
	.line{
		border-bottom:1px solid var(--blau);
		margin-top:7px;
	}
	
	.button {
		display: inline-block;
		cursor: pointer;
		background: var(--hellblau);
		color: var(--dunkelblau);
		border: 2px solid var(--dunkelblau);
		border-radius: 5px;
		padding: 10px 22px;
		width: auto;
		margin: auto;
	}
	.button:hover { font-weight:bold; color:var(--dunkelblau); text-decoration:none; }
	
	#ecliptic-lon {
		position:absolute;
		bottom:0;
		left:0;
		margin-bottom:6px;
		margin-left:6px;
		cursor: help;
	}
	#sign-lon {
		position:absolute;
		bottom:0;
		right:0;
		margin-bottom:6px;
		margin-right:6px;
		cursor: help;
	}
	
	
	/* Tablet */
	@media only screen and (max-width: 890px) {
		.td, .th {
			font-size:18px;
		}
		.aktuell {
			font-size: 18px;
		}
		#counterNext {
			font-size: 21px;
		}
		h1 {
			font-size: 28px;
		}
		.ad_mondkalender {
			width: 468px;
			height: 60px;
		}
	}
	
	/* Smartphone */
	@media only screen and (max-width: 620px) {
		.td, .th {
			font-size:13px;
		}
		.tabelle {
			/*padding-left: 2px;
			padding-right: 2px;*/
		}
		.aktuell {
			font-size: 15px;
		}
		.footer {
			font-size: 13px;
		}
		#counterNext {
			font-size: 18px;
		}
		.werbung {
			/*display: none;*/
		}
		h1 {
			font-size: 26px;
		}
		.ad_mondkalender {
			width: 320px;
			height: 100px;
			/*display: none;*/
		}
		#tblFooter{
			margin-top: 8px;
			margin-bottom: 10px;
		}
		#stRahmen {
			font-size:26px;
		}
		#stMinus, #stPlus {
			font-size:30px;
		}
		#stMinus:hover, #stPlus:hover, #stJahr:hover {
			color: var(--hellblau);
		}
		#canvasMo_1 {
			margin-top: 8px;
			margin-left: 5px;
		}
		#imgSign_1 {
			margin-top: 0px;
			margin-right: 0px;
			width: 54px;
			height: 54px;
		}
		#imgSign_2 {
			margin-top: 0px;
			margin-right: 0px;
			width: 58px;
			height: 58px;
		}
		#divDetails {
			padding: 10px;  
			top: 90px;
		}
		#divMoonSignsDetails {
			top: 20px;
			padding: 10px;
		}
		#strMoonSignsDetails {
			margin-top: 0px;
		}
		input[type="datetime-local"] { 
			font-size: 18px;
			padding: 5px;
		}
		#selectTZ {
			min-width: 3ch;
			font-size: 14px;
			padding: 5px;
		}
		#imgContainer {
			font-size: 16px;
			font-weight: 600;
			margin-top: -20px;
		}
		#closeMoonSignsDetails {
			margin-top: -11px;
		}
	}
	
	@media screen and (max-width: 2800px) and (min-width: 620px) {
		table#tblAusgabe td:nth-child(5) {
			display: none;
		}
	}
	@media screen and (max-width: 620px) and (min-width: 300px) {
		table#tblAusgabe td:nth-child(4) {
			display: none;
		}
	}