/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @copyright (c) Sebastian Tschan
 * @license GNU Affero General Public License
 * @link https://blueimp.net/ajax/
 */


@import url('positions.css');
@import url('borders.css');
@import url('fonts.css');
@import url('misc.css');
@import url('print.css');

/*
 * Colors
 */

@media screen,projection,handheld {
	
	#loginContent {
		background-color:#000;
		color:#FFF;
	}
	#loginContent h1 {
		color:#FFF;
	}
	#loginContent a {
		color:#FFF;
	}
	#loginContent input, #loginContent select {
		background-color:#212121;
		color:#FFF;
	}
	#loginContent #loginFormContainer #loginButton {
		background-color:#212121;
		color:#FFF;
	}
	#loginContent #errorContainer {
		color:red;
	}
	
	#content {
		background:#000000 url(../img/background.png) no-repeat center center;
		background-attachment: fixed;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		-ms-background-size: cover;
		color:#FFF;
	}
	#content h1 {
		color:#FFF;
	}
	#content a {
		color:#FFF;
	}
	#content a:hover {
		border: 2px solid #5f0000;
		border-radius: 10px;
	}
	#content input, #content textarea {
		background: url(../img/chattextareabackground.png) top center;
		border: 2px solid #5f0000;
		border-radius: 10px;
		color:#FFF;
	}
	#content input:focus,
	#content input:active, 	
	#content textarea:focus,	
	#content textarea:active {
		outline: none !important;
		border-color: #440000 !important;
		box-shadow: 0 0 10px #ff0000;
	}
	#content select {
		background-color:#000;
		border: 2px solid #5f0000;
		border-radius: 10px;
		color:#FFF;
	}
	#content #chatList, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content #colorCodesContainer {
		border: 2px solid #5f0000;
		border-radius: 15px;
		background: url(../img/chattextareabackground.png) top center;
	}
	#content #bbCodeContainer {
		border: 0px;
		margin-bottom: 15px;
	}
	#content #emoticonsContainer {
		border: 0px;
		margin-bottom: 15px;
		margin-left: 10px;
	}
	#content #bbCodeContainer input, #content #logoutButton, #content #submitButton {
		background-color:#240000;
		color:#999999;
		border: 2px solid #5f0000;
		border-radius: 7px 0;
		font-size: 12px;
		font-weight: bold;
		-webkit-transition: all 1s ease;
	    -moz-transition: all 1s ease;
	    -o-transition: all 1s ease;
	    -ms-transition: all 1s ease;
	    transition: all 1s ease;
	}
	#content #bbCodeContainer input:hover, #content #logoutButton:hover, #content #submitButton:hover {
		background-color:#240000;
		color:#B11700;
		border: 2px solid #940000;
		border-radius: 7px 0;
		font-weight: bold;
	}
	#content #colorCodesContainer a {
		border-color:black;
	}
	#content #optionsContainer input {		
		margin-bottom: 15px;
	    background-color:transparent;
	}
	#content #optionsContainer #helpButton {
	    background:url('../img/help.png') no-repeat;
		border: 0px;
	}
	#content #optionsContainer #settingsButton {
	    background:url('../img/settings.png') no-repeat;
		border: 0px;
	}
	#content #optionsContainer #onlineListButton {
	    background:url('../img/users.png') no-repeat;
		border: 0px;
	}
	#content #optionsContainer #audioButton {
	    background:url('../img/audio.png') no-repeat;
	}
	#content #optionsContainer #audioButton.off {
	    background:url('../img/audio-off.png') no-repeat;
	}
	#content #optionsContainer #autoScrollButton {
	    background:url('../img/autoscroll.png') no-repeat;
		border: 0px;
	}
	#content #optionsContainer #autoScrollButton.off {
	    background:url('../img/autoscroll-off.png') no-repeat;
		border: 0px;
	}
	#content .rowEven {
		background-color:transparent;
	}
	#content .rowOdd {
		background-color:transparent;
	}
	#content .guest {
		color:gray;
	}
	#content .user {
		color:#FFF;
	}
	#content .moderator {
		color:#00AA00;
	}
	#content .globalmoderator {
	    color:#b44200;
	}
	#content .admin {
		color:red;
	}
	#content .chatBot {
		color:#FF6600;
	}
	#content #chatList, .chatBotErrorMessage {
		color:red;
	}
	#content #chatList, .chatBotMessage {
		color:#FF6600;
	}
	#content #chatList a {
		color:#1E90FF;
	}
	#content #chatList .delete {
		background:url('../img/delete.png') no-repeat right;
	}
	#content #chatList .deleteSelected {
		border-color:red;
	}
	#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
		color:#FFF;
	}
	#content #settingsContainer #settingsList input.playback {
	    background:url('../img/playback.png') no-repeat;
	}

}

/*####----BROWSER SCROLL BAR----####*/
::-webkit-scrollbar {
          background: -webkit-linear-gradient(40deg, #040404, #0C0C0C, #040404 100%)!important;
          border-left: 0px solid #5f0000 !important;
}
::-webkit-scrollbar-thumb {
          background-color: #272727!important;
          border-radius: 26px!important;
}

/* Overlays */
#overlay {
  background:#000 url(../img/background.png) no-repeat center center;background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-ms-background-size: cover;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1.0;
  z-index: 2;
  cursor: pointer; 
}

#overlay2 {
  background:#000 url(../img/background.png) no-repeat center center;background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-ms-background-size: cover;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  z-index: 2;
  cursor: pointer;
}

#overlay3 {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.0);
  z-index: 2;
  cursor: pointer;
}

#overlay4 {
  background:#000 url() no-repeat center center;background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-ms-background-size: cover;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1.0;
  z-index: 2;
  cursor: pointer; 
}

#overlay5 {
  background:#000 url() no-repeat center center;background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-ms-background-size: cover;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1.0;
  z-index: 2;
  cursor: pointer; 
}

#overlay6 {
  background:#000 url() no-repeat center center;background-attachment:fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;-ms-background-size: cover;
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1.0;
  z-index: 2;
  cursor: pointer; 
}

#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.8);
  max-height: 488px;
  overflow-y: auto;
  width: 60%;
  padding: 15px;
}

#text2{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  background: rgba(0, 0, 0, 0.8);
  max-height: 488px;
  overflow-y: auto;
  width: 60%;
  padding: 15px;
}

#text3{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#text4{
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width:auto;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#text5{
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width:auto;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#text6{
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  width:auto;
  top: 50%;
  left: 50%;
  font-size: 19px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

.zoomIn {
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	-webkit-animation-duration: 1500ms;
	animation-duration: 1500ms;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
	50% {
		opacity: 1;
	}
}
@keyframes zoomIn {
	0% {
		opacity: 0;
		-webkit-transform: scale3d(.3, .3, .3);
		transform: scale3d(.3, .3, .3);
	}
	50% {
		opacity: 1;
	}
}

/* BMC Spezialfarbe - Absolute Priorität */
.ajax-chat a.role-6, 
.ajax-chat span.role-6, 
.ajax-chat .role-6 .username,
#chatList .role-6, 
#chatList .role-6 a, 
#chatList .role-6 .username,
#onlineList .role-6, 
#onlineList .role-6 a, 
#onlineList .role-6 .username,
.ajax-chat .role-6 {
    color: #9f00d3 !important;
	font-weight: bold !important;
}