* {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
}

/* ------------------------ ALLGEMEIN -------------------------*/
body {
	background-color:#edf2f7; // #e9ecef
	
	/* Weihnachtsdeko
	background-image: url("../images/weihnachten/new-year-ge7731ceff_1920_top_trans.png");
	background-repeat:repeat-x;
	#background-position:top right;
	background-size:100%;
	*/

	/* Silvester 
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../images/backgrounds/mountains-7561636_1920.png");
	//background-image: url("../images/backgrounds/cedar-6850925_1920.jpg");
	background-repeat:repeat-x;
	//background-position:top left;
	background-size:cover;
	width:100%;
	*/
}

.bg-weihnachten {
	background-image: url("../images/weihnachten/new-year-ge7731ceff_1920_top_trans.png"),
					  linear-gradient(to bottom, rgba(236, 236, 236, 0.8), rgba(236, 236, 236, 0.8)), url("../images/backgrounds/christmas-2605818_1920.jpg");
	background-repeat:repeat-x;
	background-attachment: fixed;
	background-position:top right, center;
	background-size:100%, cover;
}

.bg-halloween {
	background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0.9), rgba(236, 236, 236, 0.3)), url("../images/backgrounds/halloween-2837936_1920.webp");
	background-repeat:repeat-x;
	background-attachment: fixed;
	background-position:center;
	background-size:cover;
}

.bg-winterwonderland {
	background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0.0), rgba(236, 236, 236, 0.0)), url("../images/backgrounds/mountains-7777164_1920.jpg");
	background-repeat:repeat-x;
	background-attachment: fixed;
	background-position:center;
	background-size:cover;
}

.bg-herbst2 {
	background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0.8), rgba(236, 236, 236, 0.8)), url("../images/backgrounds/mountains-7777164_1920.jpg");
	background-repeat:repeat-x;
	background-attachment: fixed;
	background-position:center;
	background-size:cover;
}


.notify-container {
	position: fixed;
	top: 0px;
	right: 0px;
	width:300px;
	z-index: 2000;
}

#notifications {
    cursor: pointer;
    position: fixed;
    right: 0px;
    z-index: 9999;
    bottom: 0px;
    margin-bottom: 22px;
    margin-right: 15px;
    max-width: 300px;   
}

/* Style the tab */
.tab {
  float: left;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  width: 32%;
  height: 300px;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: inherit;
  color: black;
  padding: 10px;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 12px;
  border: 1px solid #ccc;
  width: 70%;
  border-left: none;
  height: 300px;
}


/* Storybox Home */
#story-box {
	width:100%;
	max-width:380px;
	margin:0px 5px 20px 0px;
}

#story-box a{
	color:#000000;
}

#story-box .datetime {
	float:right;color:#cccccc;
}
#story-box .story {
	padding:10px 10px 10px 8px;
	font-style:italic;
	border-radius:5px;
}
.storyicon {
	font-size:36px;
	margin-top:-22px;
	padding:0;
	float:left;
}
#story-box .story-text{
	margin-left:25px;
	padding:0;
}


textarea, input {
font-size: 12px;
margin-bottom:10px !important;
}

ul.list {
	margin-left:30px;
}

img {
border:none;
}

a, a:hover {
text-decoration:none;
}

th, thead {
	border-top:0px !important;
}
.borderbox {
    padding: 10px;
    line-height: 20px;
	background-color: #f5f5f5;
    #background-color: #ececec;
	#border-radius:3px;
	border:solid 1px #cccccc;
	box-shadow: 1px 2px 3px silver;
	margin-right:2px;
	overflow:auto;
	text-decoration:none;
	font-weight:normal;
}

.card {
	margin:20px 10px 20px 10px;
}

.alert {
	margin:10px;
}

dl a {
	color:#000000;
	font-weight:normal;
	text-decoration:none;
}

dl a:hover{
	text-decoration:none;
}

input, select, textarea {
	padding:5px;
	border-radius:3px;
	border:solid 1px #cccccc;
}

.topbar_input {
	width:145px;
}

/* Shoutbox CSS */

#container {
    line-height: 20px;
}

#shouts {
	overflow-y:scroll;
	height:430px;
	background-color:#ffffff;
	border:1px solid #ececec;
	margin-top:5px;
}

#shouts ul {
	margin:0;
	padding:0;
}

#shouts li {
	list-style:none;
	padding:2px 4px 2px 4px;
	border-bottom:1px solid #ececec;
	overflow:auto;
}

#shouts li .greydate {
	color:grey;
	float:right;

}

li .name, .online, .text {
color:#000000;
}

.smilies {
	font-size:18px;
}

li.kaffeebot {
	background-color:#fff3e6;
}
li.actionbot {
	background-color:#eaf2f8;
}
li.foryou {
	background-color:#e6ffe6;
}
li.admin span.name {
	color:#990000;
}
li.mod span.name {
	color:#995c00;
}

#shouts2 {
	height:400px;
	background-color:#ffffff;
}

#shouts2 li {
	list-style:none;
	padding:2px;
	border-bottom:1px solid #ececec;
}

#shouts2 li .greydate {
	color:grey;
	float:right;
}

#container form{
	overflow:auto;
}

input#shout {
	padding:5px;
	width:662px;
	float:right;
	margin-right:5px;
}

#container input#submit {
	padding:6px;
	width:80px;
	float:right;
}

.sb-profil-img-container {
	float:left;
	margin:2px;
	border:1px solid #cccccc;
}

/* Guthabenbox */
.guthaben {
  position: relative;
  display: inline-block;
}
.guthaben .guthabentext {
  visibility: hidden;
  width: 130px;
  font-size:10px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 10px;
  text-indent:0px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-left:-150px;
  margin-top:20px;
}

.guthaben:hover .guthabentext {
  visibility: visible;
}

/* Smiliebox */
.emojibox .emojis {
  display:none;
  width: 750px;
  background-color: #f5f5f5;
  border:1px solid #cccccc;
  color: #000000;
  text-align: left;
  border-radius: 0px;
  padding: 10px 20px;
  text-indent:0px;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  margin-left:0px;
  margin-top:0px;
}

#slot {
	width:700px;
	background-color:#663300;
}

#slot .wheels {
	font-size:60px;
	padding:20px;
	margin:0px auto;
	background-color:#ffffff;
	border-radius: 25px;
	width:500px;
}
#slot #spin {
	padding:20px;
}

#slot .infobox {
	background-color:#ffffff;
	color:#cc0000;
	font-weight:bold;
	margin:20px auto;
	padding:20px;
	border-radius: 25px;
	width:300px;
}

#slot .kontobox {
	background-color:#ffffff;
	height:90px;
	width:500px;
	margin:20px auto;
	padding:20px;
	border-radius: 25px;
}
#slot .kontoinfo {
	width:150px;
	float:left;
	text-align:left;
	#border:1px solid #000000;
}
#slot .kontostand {
	font-size:20px;
	font-weight:bold;
}



/* MSG CSS */

#mshouts {
	overflow-y:scroll;
	height:430px;
	background-color:#ffffff;
	font-size: 11px;
}

#mshouts li {
	list-style:none;
	padding:2px;
	border-bottom:1px solid #ececec;
	font-size: 11px;

}

#mshouts li .greydate {
	color:grey;
	#font-size:8px;
	float:right;

}
.msg-body {
	padding:10px;
	width:100%;
	margin:10px auto;
	background-color:#ffffff;
	overflow:auto;
	border-radius:3px;
	border:1px solid #cccccc;
}
.msg-date {
	font-size:10px;
	float:right;
	color:#cccccc;
}

#advent {
	overflow:auto;
	margin:20px auto;
	width:720px;
}

#advent a{
	float:left;
	display:block;
	width:120px;
	padding:20px 40px 20px 20px;
	font-size:32px;
	text-align:right;
	font-weight:bold;
	background-color:#343a40;
	border-radius:3px;
	color:#ffffff;
	border:3px solid #ececec;
}

.profilimage {
	width:80px;
	border:1px solid #000000;
	padding:10px;
	margin:10px 20px 10px 20px;
	float:left;
	background-color:#fff;
}

.newsbox {
	float:left;
	width:100%;
	max-width:360px;
	min-height:130px;
	margin:8px;
	padding:10px;
	color:#000000;
	
}

/* Desktop */
@media all and (min-width: 480px) {

#header-mobile, .mobi-info {
	display:none;
}

#wrapper {
width:1200px;
margin:auto;
overflow:auto;
overflow-x:hidden;
overflow-y:hidden;
}

header {
    margin:20px auto;
	width:1180px;
    height:110px;
	background-color:#ffffff;
	border-radius:3px;
}

#logobar{
    width:1200px;
    margin:0 auto;
}

#logo {
	margin:20px 0px 0px 30px;
	/* width:250px; */
}

/* Main Navigation */
#topnavline {
	width:100%;
	min-height:43px;
	background-color:#343a40;
}

ul#topnav {
	background-color:#343a40;
	margin:auto;
	padding-right:10px;
	padding-left:10px;
	width:1200px;
	list-style: none;
}
 
ul#topnav li {
    display:inline;
    margin:0;
    padding:0;
    position:relative;
	list-style: none;
}

ul#topnav li a {
	margin:0px;
    padding:12px;
    color:#ffffff;
    text-decoration:none;
    display:inline-block;
	font-weight:bold;
	font-size:13px;

    -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;
}
 

ul#topnav li a:hover {
    background:#ffffff;
    color:#000000;
}
 
ul#topnav li a.first, ul#topnav li ul.first {
	margin-left:20px;
}
 
ul#topnav li:hover > a {
    background:#ffffff;
    color:#000000;
}

/* Drop-Down topnav */
ul#topnav li:hover > ul
{
    visibility:visible;
    opacity:1;
}
 
ul#topnav ul, ul#topnav ul li ul {
    list-style: none;
    margin: 0;
    padding: 0;
    visibility:hidden;
    opacity:0;
    position: absolute;
    z-index: 99999;
    width:180px;
	background-color:#343a40;
    box-shadow:1px 1px 3px #ccc;
	border-bottom-right-radius: 5px;
	border-bottom-left-radius: 5px;
	/* css3 transitions for smooth hover effect */
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;
    transition:opacity 0.2s linear, visibility 0.2s linear;
}

ul#topnav ul.guthabenbox  li {
	color:#ffffff;
	width:150px;
	text-align:left;
    display:inline-block;
    clear:both;
    padding:7px 15px;
	line-height:20px;

}
 
ul#topnav ul {
    top: 28px;
    left: 0px;
}

ul#topnav ul.last {
    top: 28px;
    left: -134px;
}

ul#topnav ul li ul {
    top: 0;
    left: -180px; /* strong related to width:180px; from above */
}
 
ul#topnav ul li {
    clear:both;
    width:100%;
    border:0 none;
}
 
ul#topnav ul li a {
    background:none;
    padding:7px 15px;
    color:#ffffff;
    text-decoration:none;
    display:inline-block;
    border:0 none;
    float:left;
    clear:both;
    width:180px;
	margin:0px;
    font-weight:normal;
}

.werblabel {
	font-size:10px;
	color:grey;
}

#banner {
	float:right;
	height:60px;
	width:468px;
	margin:20px 10px 0px 0px;
}

#megabanner {
	float:right;
	height:90px;
	width:728px;
	margin:8px 40px 0px 0px;
}

#banner2 {
	float:right;
	height:60px;
	width:234px;
	margin:20px 10px 0px 0px;
}

#banner320 {
	float:right;
	height:50px;
	width:320px;
	margin:25px 10px 0px 0px;
}
.tl-shoutbox {
	margin-top:0px;
	float:left;
}
.stickyRight {
	position:absolute;
	right:0px;
	top:196px;
	width:120px;
	height:600px;
	text-align:center;
}

.stickyLeft {
	position:absolute;
	left:0px;
	top:196px;
	width:160px;
	height:600px;
	text-align:center;
}

/*-- Page-*/
#content {
width:1200px;
margin:0 auto 0 auto;
overflow:auto;
}
#left {
float:right;
width:360px;
text-align:left;
text-indent:10px;
margin:0px;
padding:0;
}
#middle {
float:left;
width:840px;
margin:0px;
padding:0px;
}

/*---Footer---*/
footer {
    margin:0px auto;
    width:100%;
	max-width:1180px;
    height:110px;
	background-color:#ffffff;
	border-radius:3px;
}
footer a, .copyright a {
	font-size:12px;
	color:#663300;
}
footer a:hover, .copyright a:hover  {
	text-decoration:none;
}

.copyright {
	max-width:1180px;
	margin:0px 20px 20px 20px;
}

}


.topbanner {
	margin:0px 10px 0px 10px;
	/* min-height:250px; */
}


/* ------------------------------- Mobile ----------------------------------- */
@media all and (max-width: 480px) {
	
	.bg-weihnachten {
		background-image: linear-gradient(to bottom, rgba(236, 236, 236, 0.8), rgba(236, 236, 236, 0.8)), url("../images/backgrounds/christmas-2605818_1920.jpg");
		background-repeat:repeat-x;
		background-attachment: fixed;
		background-position:center;
		background-size:cover;
	}

	#header, #topnavline, .stickyLeft, .stickyRight {
		display:none;
	}

	.topbanner {
		margin:15px 15px -10px 30px;
		overflow:hidden;
		/*min-height:132px;*/
	}

	header {
		margin:0px;
		padding:15px;
		width:100%;
	}

	#wrapper {
		/* Weihnachtsdeko 
		background-image: url("../images/weihnachten/new-year-ge7731ceff_1920_top_trans.png");
		background-repeat:repeat-x;
		#background-position:top 120px right;
		#background-size:200%;
		*/
		
	}

	/* Main Navigation */
	 /* Style the navigation menu */
	.topnav {
	  overflow: hidden;
	  background-color:#343a40;
	  position: relative;
	  top:10px;

	}

	/* Hide the links inside the navigation menu (except for logo/home) */
	.topnav #myLinks {
	  display: none;
	  margin-top:20px;
	  margin-left:0;
	  padding:0;
	  list-style:none;
	}

	.topnav #myLinks li {
	  font-weight:bold;
	  margin-bottom:10px;
	}

	.topnav #myLinks ul li{
	  font-weight:normal;
	  margin-bottom:0px;
	  list-style:none;
	}

	/* Style navigation menu links */
	.topnav a {
	  color: white;
	  padding: 5px;
	  text-decoration: none;
	  font-size: 14px;
	  display: block;
	}

	/* Add a grey background color on mouse-over */
	.topnav a:hover {
	  background-color: #ddd;
	  color: black;
	}

	 /* Style the hamburger menu */
	a.icon, a.icon:visited {
	  display: block;
	  position: absolute;
	  right: 0;
	  top: 0;
	  padding:12px 18px 12px 12px;
	  font-size:18px;
	  color:#ffffff;
	}

	/* Style the active link (or home/logo) */
	.active {
	  background-color: #4CAF50;
	  color: white;
	}

	input#shout {
		padding:5px;
		width:60%;
		float:right;
		margin-right:5px;
		font-size:13px;
	}

	#shouts {
		height:380px;
	}

	.card-body {
		overflow:auto;
	}

	.emojibox .emojis {
	  width: 310px;
	  display:none;
	}

	#timerm {
		border-radius:5px;
	}
	#anchorSymplr {
		display:none !important;
	}
	
}

@media screen and (max-width:1200px) {

	#megabanner {
		overflow:auto;
	}

}

@media screen and (max-width: 1500px) {

	.stickyRight, .stickyLeft {
		display:none;
	}

}

@media screen and (min-width: 1500px) {

	.stickyLeft {
		left:0px;
	}
	.stickyRight {
		right:0px;
	}

}

@media screen and (min-width: 1600px) {

	.stickyLeft {
		left:50px;
	}
	.stickyRight {
		right:50px;
	}
}

@media screen and (min-width: 1800px) {

	.stickyLeft {
		left:80px;
	}
	.stickyRight {
		right:80px;
	}
}

@media screen and (min-width: 1900px) {

	.stickyLeft {
		left:100px;
	}
	.stickyRight {
		right:100px;
	}
}



/* Silvester */

#clockdiv{
  color: #fff;
  text-align: center;
}

#clockdiv > div{
  padding: 5px;
  width:60px;
  border-radius: 5px;
  display: inline-block;
}

#clockdiv div > span{
  border-radius: 3px;
  display: inline-block;
  font-weight:bold;
  font-size:24px;
}

.smalltext{
  padding-top: 5px;
}
.fa-solid {
	margin-right:2px;
	font-size:14px;
}

/* hide symplr logo */
#anchorLogoSymplr, #stickyFooterLogoContainer {
	display:none !important;
}
.symplr-ad-holder {
	margin:0;
	padding:0;
	min-height:0px !important;
}

.modal-fader {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 99998;
	background: rgba(0,0,0,0.8);
}

.modal-window {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 99999;
	background: #fff;
	padding: 30px;
	border-radius: 5px;
	font-family: sans-serif;
}




/* AP-Bar */
.progress-circular {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #e9ecef;
}

.progress-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background: white;
    border-radius: 50%;
    text-align: center;
}

.progress-value h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
}

.progress-value p {
    color: #6c757d;
    font-size: 1rem;
}

@media (max-width: 768px) {
    .progress-circular {
        width: 150px;
        height: 150px;
    }
    
    .progress-value {
        width: 110px;
        height: 110px;
    }
    
    .progress-value h3 {
        font-size: 1.2rem;
    }
    
    .progress-value p {
        font-size: 0.9rem;
    }
}