@import url('https://fonts.googleapis.com/css?family=Merienda+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato&display=swap');

:root {
	--pageback: #374a56;	
	--inputback: #d0e0ea;	
	--tabborder: #335266;
	--tabhead: #539cca;
	--tabdark: #acbbc6;
	--tablight: #bacedc;
	--headred: #da2b2b;
	--bordaux: #461010;
	--tabbtnho: #8f7a7a;
	--tabbtnactive: #cf6161;
}

h1 {
	font-family: 'Merienda One', cursive;
	font-size: 36px;
	color: var(--headred);
	text-decoration: underline;	
	text-shadow: 1px 1px var(--inputback);	
}

h2 {
	font-family: 'Merienda One', cursive;
	font-size: 24px;
}

h3 {
	font-family: 'Lato', sans-serif;
	font-size: 18px;
}

h4 {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	text-decoration: underline;	
}

h5 {
	font-family: 'Lato', sans-serif;
	font-size: 14px;	
	text-decoration: underline;
}

a:hover{
	color: var(--headred);
}
a:active{
	color: var(--headred);
}
a:link{
	color: var(--headred);
}
a:visited{
	color: var(--headred);
}

body {
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	background: var(--pageback);
	color: var(--inputback);	
}

p.none {
	font-weight: bold;
	color: var(--headred);
}

input, select, textarea {
	font-family: 'Lato', sans-serif;
    font-size: 14px;
	background: var(--inputback);
}

input.wide {
	width: 250px;
}

.sbtn {
	font-family: 'Merienda One', cursive;
	font-size: 24px;
	color: var(--bordaux);
	background: var(--tabdark);
	padding: 10px;
	border-color: var(--bordaux);
	/* -webkit-border-radius: 28; */
	/* -moz-border-radius: 28; */
	/* border-radius: 28px;	 */
}

.sbtnsmall {
	font-family: 'Merienda One', cursive;
	font-size: 16px;
	color: var(--bordaux);
	background: var(--tabdark);
	padding: 5px;
	border-color: var(--bordaux);

}

.firstCol {
	border: 3px solid var(--tabborder);
	background: var(--tabhead);	
	padding: 5px;
	font-family: 'Merienda One', cursive;
	font-size: 20px;
	color: var(--inputback);
}

.r-a {
	text-align: right;
}

.c-a {
	text-align: center;
}

table.TAll {
	border-collapse: collapse;
}

table.TAll td {
	border: 1px solid var(--tabborder);
	padding: 5px;
	color: black;
}

table.TAll th {
	border: 3px solid var(--tabborder);	
	background: var(--tabhead);
	padding: 5px;
	font-family: 'Merienda One', cursive;
	font-size: 20px;
	color: var(--inputback);	
}

table.TAll tbody {
	font-family: 'Lato', sans-serif;
    font-size: 14px;	
}

table.TAll tfoot {
	padding: 5px;
	font-weight: bold;
	background: var(--tabhead);	
}

table.TAll tbody tr:nth-child(odd) {
	background: var(--tablight);	
}

table.TAll tbody tr:nth-child(even) {
	/* oben, dunkel */
	background: var(--tabdark);	
}


/* TAB */
.tab {
  overflow: hidden;
  border: 1px solid var(--bordaux);
  background-color: var(--inputback);
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-family: 'Merienda One', cursive;
  background-color: var(--inputback);
  color: var(--bordaux);
  font-size: 20px;
}

.tab button:hover {
  background-color: var(--tabbtnho);
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: var(--tabbtnactive);
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;  
  border: 1px solid var(--pageback);
  border-top: none;
}
.tabcontentNT {  
  padding: 6px 12px;  
  border: 1px solid var(--pageback);
  border-top: none;
}
