/*
dark #6f533b
normal #875f46
light #d0a771
contrast: #fab72d
*/

/* great-vibes-regular - latin */


@font-face {
	font-family: 'Great Vibes';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/great-vibes-v14-latin-regular.eot'); /* IE9 Compat Modes */
	src: local(''),
		 url('../fonts/great-vibes-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		 url('../fonts/great-vibes-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		 url('../fonts/great-vibes-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
		 url('../fonts/great-vibes-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		 url('../fonts/great-vibes-v14-latin-regular.svg#GreatVibes') format('svg'); /* Legacy iOS */
  }
  
  :root {
	--black-color: #35281c;
	/*--dark-color: #6f533b;*/
	--dark-color: #311d08;
	--dark-color-t: #6f533b80;
	--normal-color: #875f46;
	--light-color: #ffd093;
	--white-color: #ffdfb5;
	--contrast-color: #fab72d;
	--red-color: #ff0000;
	--headline-color: var(--contrast-color);
	--text-dark: var(--black-color);
	--text-light: var(--white-color);
	--text-size: 3vw;
	--light-hsl: hsl(34, 100%, 79%);
	--color-primary: rgb(255 125 0);
}

html {
	scroll-padding-top: 4rem;
	/*scroll-margin-top: 10rem;*/
}

body {
	/*background-image: url('../res/wood-2.webp');*/
	background-image: url('../res/rasen.jpeg');
	background-position: center;
	height: 100vh;
	overflow: hidden;
	padding: 0px;
	margin: 0px;
	font-size: large;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	scroll-padding-top: 55px; 
}

/* Spielplan */
.hometeam, .col_result {
	text-align: right;
}
.awayteam, .matchdate, .col_points{
	text-align: left;
}
.hometeam img, .awayteam img {
	width: 2rem;
	height: 1.25rem
}
.col_result {
	padding-right: 1rem;
}
.col_points {
	padding-left: 1rem;
}

/* Tabellen */
table {
	max-width: 30rem;
	margin-left: auto;
	margin-right: auto;
}
td {
	max-width: 6rem;
	overflow: hidden;
	text-overflow: ellipsis; 
	white-space: nowrap;
}
.teamname {
	text-align: left;
}
.teamname img {
	width: 2rem;
	height: 1.25rem
}

.w3-container {
	padding: 0px;
	margin: 0px;
}

#big-container {
	overflow-y: scroll;
	scrollbar-width: auto;  /* Firefox */
	-ms-overflow-style: auto;  /* IE and Edge */
	height: 100vh;
	background-color: #ff000000;
	padding: 0px;
	max-width: 1024px;
	margin: auto;
}

#big-container::-webkit-scrollbar {
	display: none;
}

#big-container header {
	margin: 0px;
}

.box {
	margin: auto;
	padding: 1rem;
	background-color: var(--light-color);
	border-color: var(--dark-color);
	border-width: 3px;
	border-style: solid;
	border-radius: .75rem;
	max-width: 300px;
}
.box input {
	height: 3rem;
	margin: 0.5rem  auto;
    display: block;
}
.box button {
	margin: 0.5rem auto;
    display: block;
}

.widget {
	margin: 0px;
	padding: 0px;
}

.dark-widget {
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.95;
	margin: 0px;
	padding: 0px;
}

.lyrics-widget h2 {
	font-size: 1.5rem;
	line-height: 1.0;
}

.widget-header-small {
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	color: var(--headline-color);
	/*font-family: 'Great Vibes', normal;*/
	position: relative;
}
.darkbg {
	background-color: var(--dark-color);
}
.blackbg {
	background-color: var(--black-color);
}

.widget-header p, .widget-header-small p {
	margin: 0px;
	font-size: 2rem;
}

/* band widget */
.smallh1 h1 {
	font-size: .2rem;
	line-height: .2;
}

h1, h2 {
	/*font-family: 'Great Vibes', normal;
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;*/
	text-align: center;
	margin: 0px;
}
.widget-header-small h2 {
	font-size: 2.5rem;
	line-height: 2.0;
}

#home-widget h1 {
	font-size: 7rem;
}
#home-widget h1 {
	font-size: 5rem;
	/*font-family: 'Great Vibes', normal;*/
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	margin: 0px;
}


.band-widget, .lyrics-widget, .lyrics-viewer, .contact-widget, .impressum-widget, .privacy-widget {
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.85;
	/*border-radius: 1vh;*/
	margin: 0rem;
	padding: 1rem;
}

.lyrics-widget, .lyrics-viewer {
	line-height: 1.5;
	position: relative;
	height: 100%;
}

.lyrics-viewer {
	background-color: transparent;
}

#viewer-container .widget-header {
	position: relative;
}

.lyrics-widget a {
	text-decoration: none;
}
.lyrics-widget a:link, a:visited  {
	color: var(--text-light);
}
.lyrics-widget a:hover  {
	color: var(--contrast-color);
}

.lyrics-viewer {
	opacity: 1.0;
}

/* event widget */

.event-widget {
	background-color: var(--light-color);
	text-align: center;
	border-bottom: 0.3rem solid var(--dark-color);
}

.event-date {
	color: var(--text-light);
	background-color: var(--dark-color);
	border-radius: 0.3rem;
	width: 6rem;
	margin: 1rem auto;
}

.event-name {
	margin: 1rem 0 0 0;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.event-name a {
	color: var(--text-dark);
	text-decoration: none;
}

.event-name a:link {
	text-decoration: underline;
}

.event-name h3 {
	font-size: large;
	font-weight: bold !important;
}

.event-location {
	margin: 0 0 1rem 0;
}

.event-time {
	margin: 2rem 0;
}

.event-status {
	margin: 0vw 0vw -2rem 0vw;
}

@media screen and (max-width: 600px) {
	.event-date {
		width: 9rem;
		margin: .5rem auto;
	}
	.event-name, .event-location, .event-time {
		margin: 0;
	}
}

.music-widget p {
	text-align: center;
	color: var(--text-light);
	background-color: var(--dark-color);
	opacity: 0.75;
	padding: 1rem;
	margin: 0px;
	font-weight: bold !important;
	text-transform: uppercase !important;
}

.video {
	padding: 1rem;
}

.music-widget iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*#news-widget, #band-widget, #lyrics-widget, #events-widget, #music-widget, #info-widget, #contact-widget {
	background-color: var(--dark-color-t);
}*/

.contact-widget {
	min-height: calc(100vh - 11.8rem);
}
.contact-widget p {
		float: right;
}

/*#Home, #News, #Band, #Events, #Music, #Info, #Contact {
	margin: 0px;
	padding: 0px;
	height: 500px;
	background-color: #ff6600ff;
}
#News{
	margin: 20px;
	padding: 0px;
	height: 500px;
	background-color: #ff660080;
}*/

#home-widget {
	/*background-color: #ff660080;*/
	padding: 10%;
}

#home-widget p {
	margin-block-start: 0em;
	margin-block-end: 0em;
}

#description, #pre-description {
	/*font-family: 'Great Vibes', normal;*/
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	line-height: 0.75;
}

#pre-description {
	font-size: 2rem;
}
#description {
	padding-top: .5rem;	
	font-size: 2rem;
	line-height: 10rem;
}

.bandname, .bandname-prefix {
	font-size: 5rem;
	/*font-family: 'Great Vibes', normal;*/
	color: var(--contrast-color);
	text-shadow: 3px 3px 5px #000;
	text-align: center;
	line-height: 1.2;
	/*background-color: #66ff0080;*/
}

.bandname {
	font-size: 7rem;
}

.bandname-prefix {
	font-size: 3.5rem;
}

#home-widget h1 {font-size: 3.5rem;}
@media screen and (min-width: 600px) {

	#home-widget h1 {font-size: 4.5rem;}
	
	.bandname {
		font-size: 9rem;
	}
	.bandname-prefix {
		font-size: 4.5rem;
	}
	#description {
		font-size: 3rem;
		line-height: 15rem;
		padding-top: .75rem;	
	}
	#pre-description {
		font-size: 3rem;
	}
}

@media screen and (min-width: 1024px) {
	#home-widget h1 {font-size: 5.5rem;}
	.bandname {
		font-size: 11rem;
	}
	.bandname-prefix {
		font-size: 5.5rem;
	}
	
	#description {
		font-size: 4rem;
		line-height: 20rem;
		padding-top: 1rem;	
	}
	#pre-description {
		font-size: 4rem;
	}
}

#home-widget img {
	width: 100%;
	/*margin: 5% 0.5% 0.5%;
	padding: 2%;*/
	height: auto;
	/*opacity: 0.9;*/
	/*transform: rotate(25deg);*/
}

footer {
	margin: 0px;
	padding: 0px;
	background-color: var(--black-color);
}

#copyright {
	clear: both;
	background-color: var(--black-color);
	color: var(--text-light);
	padding: 0 0 40px 0;
	margin: 0px;
	text-align: center;
	/*font-size: var(--text-size);*/
}

.button {
	background-color: var(--dark-color);
	color: var(--text-light);
	border-radius: 5px;
	padding: 0.75rem 20px;
  	margin: 0.25rem;
	border: none;
	/*color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 0.75rem;*/
}

.sortbutton {
	top: 0;
	color:  var(--dark-color);
	background: var(--text-light);
	border: none;
	border-radius: 5px;
	padding: 0 0.5rem;
	margin: 0.25rem;
	transition: background .2s linear;
	font-size: 0.75rem;
}

#SortField {
	margin: 1rem;
	font-style: italic;
}

.messagebox {
	background-color: var(--light-color);
	padding: 1rem;
	border-radius: 1vh;
	opacity: 1.0;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

.doorplate {
	height: 10rem;
	background-image: url("../res/doorplate.png");
	background-size: 100% 100%;
	margin: 3rem auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 400px) {
	.doorplate {
		width: 80%;
	}
}

@media screen and (min-width: 600px) {
	.messagebox {
		width: 60%;
		margin:auto;
	}
	.doorplate {
		width: 60%;
		height: 15rem;
	}
}
@media screen and (min-width: 1024px) {
	.messagebox {
		width: 60%;
		margin:auto;
	}
	.doorplate {
		width: 60%;
		height: 20rem;
	}
}

#myName {
	width: 8rem;
	height: 1.5rem
}

/* dialog settings */
#favDialog, #messageDialog {
	background-color: var(--light-color);
	border-radius: .75rem;
	position:relative;

}

.dlg_line {
	padding:0rem 1rem;
	margin: 2rem 0rem;
}
.dlg_line label span{
	
	text-overflow: ellipsis;
	overflow: hidden;
	max-width: 8rem;
	white-space: nowrap;
}

.dlg_line label, .dlg_footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	/*background: var(--surface-2);
	flex-wrap: wrap;
	gap: var(--size-3);
	padding-inline: var(--size-5);
	padding-block: var(--size-3);*/
  
}

.dialogbutton {
	background-color: var(--dark-color);
	color: var(--text-light);
	border-radius: .75rem;
	padding: 0.75rem 20px;
  	margin: 0.25rem;
	border: none;
	width: 10rem;
}

#dlghomegoals, #dlgawaygoals {
	width: 4rem;
}

#dlghome, #dlgaway {
	margin-top: 2px;
	display: inline-block;
	width: 60%;
}

#dlghomeimage, #dlghomeimage {
	margin-top: 8px;

}

.col_pkt {
	font-weight: bold;
}

#tippsbox {
	width: 100%;
	overflow-x: scroll;
}

#tippsbox table {
	max-width: none;
	width: 100%;
	border: thin solid black;
	table-layout: fixed;
	border-collapse: collapse;
	overflow: hidden;
	text-overflow: ellipsis; 
}

#tippsbox table td {
	max-width: none;
	padding: 0.5rem;
}

#tippsbox table thead, .tr4 {
	border: thin solid black;
	background-color: color-mix(in srgb, black 20%, var(--light-color));
}

#tippsbox table thead td {
	padding: 0;
}

.tr2, .tr1 {
	background-color: color-mix(in srgb, black 30%, var(--light-color));
}

.tr3 {
	border-top: thin solid black;
}

#tippsbox table, #tippsbox th, #tippsbox td, #tippsbox tr {
}

#tippsbox .td1, .td2, .td3 {
}

.matchescol {
	background-color: color-mix(in srgb, black 10%, var(--light-color));
}

.usercol {
}

.tippcol {
	border-left: thin solid black;
}

#tippsbox img {
	width: 2rem;
	height: 1.25rem;
}

/*#tippsbox td {
	max-width: 10rem;
	width: 20rem;
	overflow: hidden;
	text-overflow: ellipsis; 
	white-space: nowrap;
	padding: 0.5rem 1rem;
}*/
.col_teams {
	white-space: nowrap;
}

#tipps_button {
	position:absolute;
	bottom: 1rem;
	right: 1rem;
}

@media screen and (min-width: 1024px) {
	#tipps_button {
		right: calc((100vw - 1024px)/2 + 1rem);
	}
}

#userbars {
	padding: 3rem 0;
}
.ch_bar {
	margin-left: 0.5rem;
	margin-top: 0.4rem;
	height: 1rem;
	float:left;
	border-radius: 0.25rem;
}
.ch_value {
	margin-left: 0.5rem;
	float:left;
}

.ch_name {
	text-align: right;
	padding-right: 0.5rem;
}