@import url('./bootstrap5/bootstrap-icons.css');

@font-face {
	font-family: 'DSDIGI';
	src: url('./fonts/DSDIGI.eot');
	src: local('DSDIGI'), url('./fonts/DSDIGI.woff') format('woff'), url('./fonts/DSDIGI.ttf') format('truetype');
}
@font-face {
	font-family: 'Play';
	src: url('./fonts/play-regular-webfont.woff');
	src: local('Play'), url('./fonts/play-regular-webfont.woff2') format('woff'), url('./fonts/Play-Regular.ttf') format('truetype');
}

html,body {
	margin: 0px 0px 0px 0px;
	width: 100%;
	min-height: 100vh;
    height: 100vh;
	font-family: Play !important;
	font-size: 15px;
	line-height: 1.3;
	background:#3B446C;
	color: #111;
}

body {
	background-image: url('../../images/chateingang.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
}

#wrapper {
	margin: 0 auto;
	overflow: hidden;
	/*height: 100vmax;
	width: 100hmax;*/
}

a , a:hover, a:active {
	color: #000;
	font-weight: bold;
	text-decoration: underline;
	text-shadow: none;
}

.pointer {
	cursor: pointer;
}

img {
	border: 0;
	max-width: 100%;
	max-height: 100%;
}

ul {
	list-style: none;
}

form, input, ul, li, select, option, textarea, p, div, span, small, h1, h2, h3, h4, h5, h6 {
	font-family: Play !important;
}

h1 {
	font-size: 1.8em;
}
h2 {
	font-size: 1.7em;
}
h3 {
	font-size: 1.6em;
}
h4 {
	font-size: 1.5em;
}
h5 {
	font-size: 1.4em;
}
h6 {
	font-size: 1.3em;
}

small {
	font-size:0.7em;
}

strong {
	text-shadow: none;
	font-weight: bold;
}

.center {
	text-align: center;
}

.copyright_footer {
	font-size: 0.8em;
	text-align: center;
}
.copyright_footer, .copyright_footer>a {
	color: #eee;
}

/* Add Animation */
@keyframes animate-sidebar-in {
	from {width:0px;opacity:0;}
	to {width:280px;opacity:1;}
}
/* Add Animation */
@keyframes animate-sidebar-out {
	from {width:280px;opacity:1;}
	to {width:0px;opacity:0}
}

#sidebar {
	display: none;
	position:fixed;
	top:5px;
	bottom:0px;
	right: 0px;
	border: 0px solid #2AA1E8;
	border-right: 0;
	padding: 0px;
	height: calc(100% - 5px) !important;
	background: transparent;
	color: #111;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 2000;
}

#sidebar-content {
	background: #DDDEE1;
	padding: 3px;
	margin: 0;
	margin-top:60px;
	height: calc(100% - 60px);
	border: 2px solid #80A0C9;
	border-right: 0;
	border-radius: 10px 0 0 10px;
	width: 280px;
	overflow-x: hidden;
	overflow-y: auto;
	
}

#sidebar-button {
	position: absolute;
	top: 5px;
	right: 0px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border: 2px solid #0B283A;
	border-right: none;
	border-radius: 10px 0 0 10px;
	background: #0B283A;
	background-color: #80A0C9;
	background-repeat: repeat;
	text-align: center;
	line-height: 1.6;
	margin: 0;
	padding: 0px 10px 0px 10px;
	font-size: 2em;
	color: #0B283A;
	opacity: 0.6;
	display: none;
	z-index: 1000;
}
#sidebar-button:hover {
	opacity: 1.0;
}
#sidebar-off {
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border: 2px solid #0B283A;
	border-right: none;
	border-radius: 10px 0 0 10px;
	background: #80A0C9;
	margin: 0;
	padding: 0px 10px 0px 10px;
	font-size: 2em;
	line-height: 1.6;
	color: #0B283A;
	opacity: 1;
	display: block;
	z-index: 2000;
}
.sidebar-hide {
	width:0px;
	overflow:hidden;
	animation-name: animate-sidebar-out;
	animation-duration: 250ms;
	display:none;
	opacity:0;
}
.sidebar-show {
	width:280px;
	display:block;
	overflow: auto;
	opacity: 1;
	animation-name: animate-sidebar-in;
	animation-duration: 500ms;
	
}

.chat-header {
	background: transparent;
	height: 92px;
	color: #FFFFFF;
	display: block;
	overflow: hidden;
}

.header-left {
	position: absolute;
	left: 5px;
	top: 1px;
	width: 325px;
	padding: 0;
	margin: 0;
	height: 100%;
}

.header-middle {
	position: absolute;
	left: 335px;
	top: 0;
	width: 640px;
	max-width: 100%;
	padding: 5px;
	margin: 0;
	height: 100%;
}

.header-right {
	position: absolute;
	right: 0;
	top: 0;
	width: 330px;
	padding: 5px;
	margin: 0;
	height: 100%;
	text-align: right;
}

.chat-output {
	position: absolute;
	bottom: 130px;
	width: 100%;
	color: #FFFFFF;
	background: transparent;
	min-height: calc(100% - 230px) !important;
	height: calc(100% - 230px) !important;
	border: none;
	margin-top: 100px;
	overflow: hidden;
}

.chat-footer {
	position:absolute;
	bottom: 0;
	background: transparent;
	width: 100%;
	height: 130px;
	color: #FFFFFF;
}

.output-left {
	position: relative;
	left: 0;
	top: 0;
	float: left;
	width: calc(100% - 260px);
	background: transparent;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 5px;
	padding-bottom: 20px;
}

.output-right {
	position: relative;
	right: 0;
	top: 0;
	float: right;
	width: 260px;
	height: 100%;
	padding: 5px;
	background: transparent;
	visibility: visible;
	overflow-x: hidden;
	overflow-y: auto;
}

.input-left {
	position: relative;
	right: 0;
	top: 0;
	float: left;
	width: 50%;
	padding: 2px;
	margin: 0;
	height: 100%;
}

.input-tools, .input-options {
	position: relative;
	right: 0;
	top: 0;
	float: left;
	width: 25%;
	padding: 2px;
	margin: 0;
	height: 100%;
}

.tools-switcher {
	
}
.tools-switcher-btn {
	padding: 0%;
	cursor: pointer;
}
.tools-content {
	display:inline-flex;
	background-color: #eee;
	color: #111;
	top: 0;
	height: 100vmax;
	width: 100%;
	border: 1px solid #111;
	border-right: none;
	margin-left: 29px;
	border-radius: 0 0 0 5px;
}

@media only screen and (max-width:768px) {
	/*.chat-output {
		position: absolute;
		top: 0px;
		margin: 0;
		left: 0;
		min-height: calc(100% - 130px);
		height: calc(100% - 130px) !important;
	}*/
	.output-left {
		/*position: absolute;
		bottom: 0;
		left: 0;
		width: 100% !important;
		height: 100% !important;
		min-height: 100%;*/
		padding: 2px;
		padding-bottom: 10px;
	}
	.output-right {
		display: none;
	}
	.input-left {
		width:100%;
	}
	.input-tools, .input-options {
		display: none;
	}
	.header-middle, .header-right {
		display: none;
	}
	#chatmessages {
		width: 100%;
		/*overflow:scroll; display:flex; flex-direction:column-reverse;*/
	}
	
	#sidebar-button {
		display: block;
	}
	
	#sidebar {
		display:block;
	}
}

.tbl {
	color: #000;
	width: 100%;
	height: auto;
	background-color: #DDDEE1;
	text-align: center;
	padding: 5px;
	border-radius: 0;
	border: 0px solid #111;
	border-top: 0;

}

.tbl-border {
	background-color: #DDDEE1;
	padding: 3px;
	text-align: center;
	border: 1px solid #111;
	border-radius: 5px;
}

.tblheader {
	height: auto;
	color: #000;
	background-color: #80A0C9;
	background-image: url(./images/tab1.gif);
	background-repeat: repeat;
	text-align: center;
	font-family: Play !important;
	font-size: 1.0em;
	font-weight: bold;
	padding: 3px;
	padding-top: 5px;
	border: 1px solid #111;
	border-radius: 5px 5px 0 0;
}

.tblcell {
	color: #000;
	height: auto;
	background-color: #DDDEE1;
	background-image: url(./images/tab2.gif);
	background-position: top;
	background-repeat: repeat-x;
	text-align: left;
	font-size: 1.0em;
	font-weight: normal;
	padding: 3px;
	border-radius: 0;
	margin-bottom: 3px;
}

.cell1 {
	background-color: #DDDEE1;
	color: #000;
	padding: 2px;
}
.cell2 {
	background-color: #DDDEE1;
	color: #000;
	padding: 2px;
}

.formfield, .formfield:focus  {
	height: auto;
	padding: 5px;
	padding-left: 11px;
	padding-right: 11px;
	color: #000;
	background-color: #80A0C9;
	/*text-align: left;*/
	font-family: Play !important; 
	font-size: 1.2em;
	border: 1px solid #182B4C;
	border-radius: 18px;
}

.formbutton {
	height: auto;
	padding: 3px;
	padding-left: 11px;
	padding-right: 11px;
	width: auto;
	color: #000;
	background-color: #80A0C9;
	background-image: url(./images/tab1.gif);
	background-repeat: repeat-x;	
	text-align: center;
	font-family: Play !important; 
	font-size: 1.2em;
	font-weight: normal;
	border: 1px solid #182B4C;
	border-radius: 18px;
}

.messagetime {
	display: inline-block;
	background-color: #335;
	color: #00ccff;
	font-family: monospace !important;
	font-size: 0.7em;
	font-weight: bold;
	width: auto;
	text-align: center;
	border: 1px solid #111;
	border-radius: 4px;
	padding: 0 5px 0 5px;
	margin: 0px;
	background-color: #335;
	background-image: url(./images/blue_display.jpg);
	background-position: center;
	text-shadow: 0 0 1px #00aaee, 0 0 2px #0099cc, 0 0 4px #0077aa, 0 0 8px #005599;

}

.chatwelcome {
	display: inline-block;
	border: 1px solid #111;
	border-radius: 5px;
	background: #ffc;
	font-size: 1.0em;
	font-weight: normal;
	color: #114;
	padding: 3px;
	height: auto;
	width: auto;
	max-width: 100%;
	margin-bottom: 3px;
}

.roomwelcome {
	display: inline-block;
	font-weight: normal;
	padding: 5px;
	margin-bottom: 3px;
	border:0;
}

.chatrow {
	display: block;
	padding: 5px;
}

.chatmessage {
	border: none;
	border-radius: 5px;
	background: transparent;
	font-size: 1.0em;
	font-weight: normal;
	color: #FFF;
	max-width: 100%;
}

.botmessage {
	border: none;
	border-radius: 5px;
	background: transparent;
	font-size: 1.0em;
	font-weight: normal;
	color: orange;
	max-width: 100%;
	padding: 3px;
}

.sysmessage {
	display: block;
	border: 1px solid #2AA1E8;
	border-radius: 5px;
	background: #0B283A;
	font-size: 1.0em;
	font-weight: normal;
	font-style: normal;
	color: #FFF;
	padding: 5px;
	max-width: 100%;
}

.privmessage {
	display: inline-block;
	border: 0;
	background: transparent;
	font-size: 1.0em;
	font-weight: normal;
	font-style: italic;
	padding: 5px;
	max-width: 100%;
}
.privmessage_intro {
	color: #ffc;

	border: 0px solid #333;
	border-radius: 3px;
	background: #900E0E;
	background-repeat: no-repeat;
	background-position: left center;
	padding: 2px;
}

.room_comein {	
	float: left;
	font-size: 1.2em;
	background: transparent url(./images/arrow_right_green.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 22px;
	height: 22px;
	margin-right: 5px;
	border: 0;
}

.room_goout {	
	float: left;
	font-size: 1.2em;
	background: transparent url(./images/arrow_left_red.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	width: 22px;
	height: 22px;
	margin-right: 5px;
	border: 0;
}

#smilies_list {
	text-align: center;
	padding: 10px;
	font-style: italic;
}
#smilies_list.img {
	max-width: 50px;
	max-height: 50px;
	border: 0;
	display: inline;
}

/* neue Styles mit BS5 Templates */
.list-group, .list-group-item {
	background-color: transparent;
	border: 0;
	display: block;
}

.login_alert {
	background-color: #FCD2CD;
	color: #7F0000;
	border: 1px solid #7F0000;
}

.logout_success {
	
}

.logout_info {
	
}

.logout_warning {
	
}

.index_forms {
	width:500px;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
}

.loginform_user {
	width: 200px;
	display: inline-block;
}

.loginform_guest {
	width: 200px;
	display: inline-block;
}

.loginform_password {
	width: 200px;
	display: inline-block;
}

.loginform_roomselect {
	width: 200px;
	display: inline-block;
}

.loginform_roomoption {
	
}

.loginform_passwordlink {
	font-weight: normal;
	font-size: 1.0em;
}

.loginform_button {
	width: auto;
	margin: auto;
}

.newsticker {
	max-width: 100vw; /* iOS braucht das */
	white-space: nowrap;
	overflow: hidden;
	/* hier evtl. noch font-size, color usw. */
}

.newsticker span {
	display: inline-block;
	padding-left: 105%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
	animation: marquee 25s linear infinite;
}

/* mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
.newsticker span:hover {
	animation-play-state: paused 
}

/* Make it move */
@keyframes newsticker {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

	.marquee {
		width: 100%; /* iOS braucht das */
		white-space: nowrap;
		overflow: hidden;
		/* hier evtl. noch font-size, color usw. */
	}

	.marquee span {
		display: inline-block;
		padding-left: 102%; /* die zusätzlichen 5% erzeugen einen verzögerten Start und vermeiden so ein Ruckeln auf langsamen Seiten */
		animation: marquee 10s linear infinite;
	}

	/* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */
	.marquee span:hover {
		animation-play-state: paused 
	}

	/* Make it move */
	@keyframes marquee {
		0%   { transform: translateX(0); }
		100% { transform: translateX(-102%); }
	}

/*#song_title {
	animation-name: text-indent-animate;
	animation-duration: 8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes text-indent-animate {
	0% { text-indent: 100%; }
	100% { text-indent: -200%; }
}*/
	
.index_footer {
	text-align: center;

}

.index_rendertime {
	color: #ccc;
	font-size: 0.8em;
}

.register_forms {
	width:500px;
	max-width: 100%;
	margin: 0 auto;
	height: auto;
}

.registerform_user {
	width: 200px;
	display: inline-block;
}

.registerform_password {
	width: 200px;
	display: inline-block;
}

.registerform_mail {
	width: 200px;
	display: inline-block;
}

.registerform_genderselect {
	width: 200px;
	display: inline-block;
}

.registerform_button {
	width: auto;
	margin: auto;
}

 /* Modal Header */
 .modal-header {
	padding: 2px 8px;
	background-color: #DDDEE1;
	color: rgb(0, 0, 0);
	border-radius: 5px 5px 0 0;
	border: 0;
  }
  
  /* Modal Body */
  .modal-body {padding: 2px 16px;}
  
  /* Modal Footer */
  .modal-footer {
	padding: 2px 16px;
	background-color: #DDDEE1;
	color: black;
  }
  
  /* Modal Content */
  .modal-content {
	position: relative;
	background-color: #DDDEE1;
	margin: auto;
	padding: 0;
	border: 0px solid #111111;
	width: 80%;
	box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	animation-name: animatetop;
	animation-duration: 0.25s;
  }

  /* Modal Close in header */
  .modal-close {
	  cursor: pointer;
	  background: url(./images/close.png) no-repeat;
	  width: 18px;
	  height: 18px;
  }
  
  /* Add Animation */
  @keyframes animatetop {
	from {top: -100px; opacity: 0}
	to {top: 0; opacity: 1}
  }
  
#player {
	background-color:#084B8A;
	width:330px;
	margin-left:300px;
	padding:5px;
	box-sizing:border-box;
}
#player.input[type="image"] {
	float:left;
	height:20px;
	margin-left:2px;
	margin-right:5px;
	margin-top:2px;
}
#vol_img {
	margin-left:00px;
	width:30px;
}
input[type=range] {
  height: 34px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 176px;
  background-color: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000;
  background: #74A9D8;
  border-radius: 3px;
  border: 2px solid #333;
	border-bottom:  2px solid #bbb;
	border-right:  2px solid #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 8px #222;
	-moz-box-shadow: inset 0 0 8px #222;
	-webkit-box-shadow: inset 0 0 #222;
}
input[type=range]::-webkit-slider-thumb {
  height: 26px;
  width: 26px;
  background: transparent url(./images/volume-button.png);
  background-size: cover;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  border: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #222;
  border: 2px solid #333;
	border-bottom:  2px solid #bbb;
	border-right:  2px solid #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 8px #222;
	-moz-box-shadow: inset 0 0 8px #222;
	-webkit-box-shadow: inset 0 0 #222;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000;
  background: #222;
  border-radius: 3px;
  border: 2px solid #333;
	border-bottom:  2px solid #bbb;
	border-right:  2px solid #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 8px #222;
	-moz-box-shadow: inset 0 0 8px #222;
	-webkit-box-shadow: inset 0 0 #222;
}
input[type=range]::-moz-range-thumb {
  border: 0;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: transparent url(./images/volume-button.png);
  background-size: cover;
  cursor: pointer;
  border: 0;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 11px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #74A9D8;
  border: 0px solid #010101;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-fill-upper {
  background: #74A9D8;
  border: 0px solid #010101;
  border-radius: 2px;
  box-shadow: 1px 1px 1px #000000;
}
input[type=range]::-ms-thumb {
  margin-top: 1px;
  border: 0;
  height: 26px;
  width: 26px;
  border-radius: 15px;
  background: transparent url(./images/volume-button.png);
  background-size: cover;
  cursor: pointer;
  
}
input[type=range]:focus::-ms-fill-lower {
  background: #74A9D8;
}
input[type=range]:focus::-ms-fill-upper {
  background: #74A9D8;
}
#coverimage {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 80px;
	height:80px;
	padding: 0;
	overflow: hidden;
	background-color: #335;
	background-image: url(./images/blue_display.jpg);
	background-position: center;
	border: 2px solid #666;
	border-bottom:  2px solid #bbb;
	border-right:  2px solid #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 8px #222;
	-moz-box-shadow: inset 0 0 8px #222;
	-webkit-box-shadow: inset 0 0 #222;
}
#coverimage img {
	max-width: 76px;
	max-height: 76px;
	border: 0;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}
.player {
	position: relative;
	right: 3px;
	top: 1px;
	width: 310px;
	height: 88px;
	padding: 0px;
	margin: 0;
	background-color: #333;
	background-image: url(./images/brushedsteel.jpg);
	background-position: center;
	background-size: cover;
	border: 2px solid #bbb;
	border-bottom:  2px solid #999;
	border-right:  2px solid #999;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 0px 5px #0B283A;
	-moz-box-shadow: 0px 0px 5px #0B283A;
	-webkit-box-shadow: 0px 0px 5px #0B283A;
}
.playerdisplay {
	position: absolute;
	left: 124px;
	top: 2px;
	height: 52px;
	width: 180px;
	padding: 0px;
	padding-top: 2px;
	margin: 0;
	color: #00ccff;
	font-family: Play !important;
	font-size: 0.8em;
	background-color: #335;
	background-image: url(./images/blue_display.jpg);
	background-position: center;
	text-shadow: 0 0 1px #00aaee, 0 0 2px #0099cc, 0 0 4px #0077aa, 0 0 8px #005599;
	border: 2px solid #333;
	border-bottom:  2px solid #bbb;
	border-right:  2px solid #bbb;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: inset 0 0 8px #222;
	-moz-box-shadow: inset 0 0 8px #222;
	-webkit-box-shadow: inset 0 0 #222;
}

#song_title {
	position: absolute;
	top: 19px;
	left: 0px;
	width: 175px;
	white-space: nowrap;
	font-family: Play !important;
	font-size: 1.6em;
	overflow: hidden;
	border: 0;
	background: transparent;
}

#play_button {
	position: absolute;
	left: 90px;
	top: 10px;
	width: 32px;
	height: 32px;
	padding: 0px;
	cursor: pointer;
	border: 1px solid #00ccff;
	border-radius: 16px;
	text-shadow: 0 0 1px #00aaee, 0 0 2px #0099cc, 0 0 4px #0077aa, 0 0 8px #005599;
}
#speaker {
	position: absolute;
	left: 93px;
	top: 53px;
	width: 32px;
	height: 32px;
	font-size: 32px;
	color: #00ccff;
	text-shadow: 0 0 1px #00aaee, 0 0 2px #0099cc, 0 0 4px #0077aa, 0 0 8px #005599;
	padding: 0px;
}
#change_vol {
	position: absolute;
	top: 46px;
	left: 126px;
}
audio {
	display: none;
}