/*
 * @package AJAX_Chat
 * @author Sebastian Tschan
 * @author Philip Nicolcev
 * 
 * Color palette inspired by PunBB style "Cobalt":
 * http://punbb.org/
 */
@import url('global.css');
@import url('print.css');
@import url('custom.css');

/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on June 12, 2020 */

@font-face {
    font-family: 'Orbitron';
    src: url('./fonts/orbitron/orbitron-regular-webfont.woff2') format('woff2'),
           url('./fonts/orbitron/orbitron-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bitsumishi';
    src: url('./fonts/bitsumishi/bitsumis-webfont.woff2') format('woff2'),
           url('./fonts/bitsumishi/bitsumis-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Conthrax';
    src: url('./fonts/conthrax/conthrax-sb-webfont.woff2') format('woff2'),
            url('./fonts/conthrax/conthrax-sb-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Tarrget';
    src: url('./fonts/tarrget/tarrget-webfont.woff2') format('woff2'),
            url('./fonts/tarrget/tarrget-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Buttons */
#content #bbCodeContainer input, #content #logoutButton, #content #submitButton, #loginForm #loginButton, .fpButton {
	height:30px;
	background-color:#000;
	border-radius:5px;
	background-color:rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px #0040ff;
	border:solid 2px #3399ff;
	color:#fff;
    font-family: 'orbitron';
	font-size:15px;
	font-weight:bold;
	outline:none;
}

#content #bbCodeContainer input:hover, #content #logoutButton:hover, #content #submitButton:hover, #loginForm #loginButton:hover, .fpButton:hover {
	color:#80bfff;
	border:2px solid #3399ff;
	box-shadow:0px 0px 100px #99ccff;
}
#content select, #loginForm select, #loginForm input, #content textarea {
	background-color:#000;
	color:#fafafa;
	border: 1px solid #808080;
}

/* Status Icon */
#content #statusIconContainer {
	background: url('../img/loading-sprite.png') no-repeat 0px 0px; 
}
#content #statusIconContainer.waiting {
	background-position: 0px -22px;
}
#content #statusIconContainer.retrying {
	background-position: 0px -44px;
}

/* Other Theme Elements */
.ajax-chat, #indexWrapper {
	background-color:#000;
	color:#FFF;
	font-family:orbitron;
}

.ajax-chat a, #indexWrapper a {
	color:#80bfff;
	text-decoration:none;
}

.ajax-chat a:hover, #indexWrapper a:hover{
	color:#ff0000;
}

.ajax-chat a:visited, #indexWrapper a:visited, .ajax-chat a:active, #indexWrapper a:active {
	text-decoration:none;
}

.ajax-chat h1 {
	color:#FFF;
}
#loginContent input, #loginContent select {
	background-color:#212121;
	color:#FFF;
}
#loginContent #errorContainer {
	color:red;
}
#content #chatList, #content #chatListWrap,#content #customEmojiWrap, #content #onlineListContainer, #content #helpContainer, #content #settingsContainer, #content textarea, #videoPlayer {
	border: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.95);
	box-shadow: 0px 0px 40px #0040ff;
	border-radius:5px;
	letter-spacing:1.5px;
    color:#bfbfbf;
	font-size:14px;
	font-family:orbitron;
	font-weight:1000;
}

.ajax-chat .popup {
	background-color:#000;
	border: 1px solid gray;
}
#content #colorCodesContainer a {
	border-color:black;
}
#content #optionsContainer input {
	background-color:transparent;
}
#content .rowEven, #helpList dl:nth-child(even), #settingsList dl:nth-child(even) {
	background-color:rgba(0,38,77,0.6);
	line-height:60px;
}
#content .rowOdd, #helpList dl:nth-child(odd), #settingsList dl:nth-child(odd) {
	background-color:rgba(0,0,0,0.6);
	line-height:60px;
}
#content #chatList .rowOdd.private {
	background-color:#B83C1D;
}
#content #chatList .rowEven.private {
	background-color:#C84A24;
}

#content .banned {
	color:#994d00;
}

#content .guest {
	color:gray;
}
#content .user {
	color:#FFF;
}
#content .twitchTVuser {
	color:#8e24aa;
}
#content .youTubeUser {
	color:#ff4d4d;
}
#content .moderator {
	color:#00AA00;
}
#content .admin {
	color:red;
}
#content .chatBot {
	color:#FF6600;
}
#content #chatList .chatBotErrorMessage {
	color:red;
}
#content #chatList a {
	color:#1E90FF;
}
#content #chatList .deleteSelected {
	border-color:red;
}
#content #onlineListContainer h3, #content #helpContainer h3, #content #settingsContainer h3 {
	background-color:#212121;
	color:#FFF;
}

/*Misc*/

#logoutChannelContainer, #statusIconContainer, #headline, #copyright, #flashContainer, #optionsContainer{
	display:none;
}

/*FrontPagePortal Start*/

#cookieWarning{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	height:35px;
	font-size:20px;
	border-top: 2px solid #3399ff;
	border-bottom: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	letter-spacing:1.5px;
	z-index:10;
}

.cookieWarning{
	position:relative;
	top:5px;
}

#acceptCookies{
	position:relative;
	top:2.5px;
}

/*Blocks*/

#navigationBlock, #chatViewer, #newsBlock, #usersOnline, #loginBox, #administrationBlock, #closedBlock, #yourStats{
	border: 2px solid #3399ff;
	height:auto;
	background-color:rgba(0,0,0,0.85);
	box-shadow: 0px 0px 40px #0040ff;
	border-radius:10px;
	letter-spacing:1.5px;
	font-weight:bold;
    color:#e6f2ff;
}

li{
	line-height:25px;
}

#blockTitle{
	background: rgb(2,0,36);
	background: -moz-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 32%, rgba(0,212,255,1) 100%);
	background: -webkit-linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 32%, rgba(0,212,255,1) 100%);
	background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 32%, rgba(0,212,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
	border-radius:8px 8px 0px 0px;
	border-bottom: 2px solid #3399ff;
	height:35px;
	font-family:bitsumishi;
	font-size:20px;
}

.titlePos{
	position:relative;
	top:7px;
}

#userCount{
	position:relative;
	top:-10px;
	left:20px;
}

.userContainer:nth-child(even){
	background-color:rgba(0,38,77,0.6);
}

.userContainer{
	border-radius:0px 0px 8px 8px;
}

/*middleBlocks*/

#uploadPreview{
	border:solid 2px #e6e6e6;
}

#preStreamArea{
	position:relative;
	top:10px;
	height:auto;
	padding:10px;
}
	
#streamDashboard{
	position:relative;
	width:100%;
}
	
#subPhrase{
	position:absolute;
	top:45px;
	font-size:1.5em;
	width:100%;
}

/*rightBlocks*/

#yourStats{
	height:135px;
}

/*FrontPagePortal End*/

/*Chat Modifications*/

#streamTimeInfo{
	position:absolute;
	top:0px;
	left:0px;
	width:52%;
	height:70px;
	border-radius:0px 10px 10px 0px;
	border-bottom: 2px solid #3399ff;
	border-top: 2px solid #3399ff;
	border-right: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	box-shadow: 0px 0px 40px #0040ff;
    color:#e6f2ff;
}

#videoPlayer{
	position:absolute;
	top:5px;
	left:10px;
	width:62%;
	bottom:0px;
	z-index:2;
}

#sourceWrapper{
	position:absolute;
	margin:auto;
	top:-35%;
	bottom:0;
	left:90%;
	width:50px;
	height:380px;
	z-index:1;
}

#sourceWrapperM{
	display:none;
}

#source1tab{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:190px;
	writing-mode: vertical-lr;
	text-orientation: upright;
	font-size:10px;
	font-weight:bold;
	border-top: 2px solid #3399ff;
	border-right: 2px solid #3399ff;
	border-bottom: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	border-radius:0px 10px 10px 0px;
	color:#3399ff;
}

#source2tab{
	position:absolute;
	top:200px;
	left:0px;
	width:100%;
	height:190px;
	writing-mode: vertical-lr;
	text-orientation: upright;
	font-size:10px;
	font-weight:bold;
	border-top: 2px solid #3399ff;
	border-right: 2px solid #3399ff;
	border-bottom: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	border-radius:0px 10px 10px 0px;
	color:#ff0000;
}

.sourceTab{
	position:relative;
	top:8px;
}

.videoWrapper{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

 .adminVideoPlayer, .dashBoardChat{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}

.videoWrapper iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62.15%;
  border:none;
  z-index:5;
}

#privateStream, #offlineStream{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index:5;
}

.adminVideoPlayer iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none;
}

#privateStream, #offlineStream {
	border-bottom: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	box-shadow: 0px 0px 40px #0040ff;
    color:#e6f2ff;
}

#streamInfo{
	position:absolute;
	top:62.15%;
    width: 100%;
    height: 150px;
	border-bottom: 2px solid #3399ff;
	background: rgb(2,0,36);
	background: -moz-radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 95%, rgba(0,212,255,1) 100%);
	background: -webkit-radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 95%, rgba(0,212,255,1) 100%);
	background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 95%, rgba(0,212,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024",endColorstr="#00d4ff",GradientType=1);
}

#streamTitle{
	position:absolute;
	top:0px;
	left:280px;
	font-family:bitsumishi;
}

#streamDesc{
	position:absolute;
	top:45px;
	left:280px;
	font-family:orbitron;
	font-size:20px;
}

#streamGame{
	position:absolute;
	top:90px;
	left:280px;
	font-family:orbitron;
	font-size:15px;
}

#metaLogo{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:40px;
	height:140px;
}

#streamAds{
	position:absolute;
	top:62.15%;
	left:0px;
	right:0px;
	bottom:0px;
}

#streamAdsInner{
	position:absolute;
	top:152px;
	width:100%;
	bottom:0px;
}

#bgTopLeft{
	position:absolute;
	left:0px;
	width:32.25%;
}

#bgTopRight{
	position:absolute;
	right:0px;
	width:32.25%;
}

#playAds{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:100%;
	height:100%;
	z-index:10;
}


.layoutPreviewThumb{
	height:60%;
}

#previewOverlay{
	display:none;
	position:absolute;
	top:20%;
	left:0px;
	right:0px;
	bottom:20%;
	border-top: 2px solid #3399ff;
	border-bottom: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.95);
	box-shadow: 0px 0px 40px #0040ff;
    color:#e6f2ff;
	z-index:-1;
}

#adInfo{
	font-family:bitsumishi;
}

#adInfo, #adInfo2, #adInfo3, #adInfo4{
	letter-spacing:1.25px;
}

#adInfo4{
	position:relative;
	top:-15px;
}

#layoutFull{
	border: 2px solid #3399ff;
	box-shadow: 0px 0px 40px #0040ff;
	border-radius:10px;
}

td#vid, td#chat{
  position: relative;
  padding-bottom: 0.25%; /* 16:9 */
  height: 0;
  width:50%;
}

#chatCover{
	opacity:0;
}

#closeAd{
	position:absolute;
	right:10px;
	bottom:10px;
	z-index:10;
}

.dashBoardChat{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border:none; 
}

#chatWrap{
	position:fixed;
	top:0px;
	bottom:0px;
	right:0px;
	width:35%;
}

#userPanel{
	position:fixed;
	top:4px;
	height:150px;
	right:0px;
	width:36.35%;
	border-top: 2px solid #3399ff;
	border-bottom: 2px solid #3399ff;
	border-left: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.85);
	box-shadow: 0px 0px 40px #0040ff;
	border-radius:10px 0px 0px 10px;
	letter-spacing:1.5px;
	font-weight:bold;
    color:#e6f2ff;
	z-index:5;
}

#panelPic{
	position:absolute;
	margin:auto;
	top:0;
	left:10px;
	bottom:0;
	width:120px;
	height:120px;
}

#userPanelName{
	position:absolute;
	left:150px;
	top:0px;
	font-family:conthrax;
}

.userPanelName{
	position:relative;
	top:-5px;
}

#userPanelinfo{
	position:absolute;
	left:150px;
	top:20px;
}

.userPanelInfo{
	position:relative;
	top:3px;
	left:120px;
}

.userPanelInfo2{
	position:relative;
	top:-95px;
	left:120px;
}

.marquee{
	width:350px;
}

#songThumb{
	position:relative;
	top:-40px;
	width:100px;
	height:56px;
	border-radius:10px;
	border:2px solid #3399ff;
	box-shadow: 0px 0px 40px #0040ff;
}

#thumb{
	position:absolute;
	top:0px;
	left:0px;
	border-radius:10px;
	width:100%;
	height:100%;
}

#userPanelStats{
	position:absolute;
	left:150px;
	top:110px;
	font-size:14px;
}

#guestMsgInChat{
	position:absolute;
	left:150px;
	bottom:0px;
	font-size:13px;
}

/*Emotes*/

.customEmotes{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:none;
}

#emotesContainer{
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
}

#emoteHeaderB, #emoteHeaderSub, #emoteHeaderMeme, #emoteHeaderExtras{
	color:#fff;
	font-family:arial;
	width:100%;
}

.emoteWrap{
	position:relative;
	top:-17.5px;
	border:solid 2px #3399ff;
	border-radius:10px;
	background-color:rgba(0,0,50,0.5);
}

.emoteThumb{
	border-radius: 12px;
	border:solid 1px #3399ff;
	background-color:rgba(0,20,200,0.5);
}

.emoteThumb:hover{
	border:solid 1px #ff0000;
	background-color:rgba(200,20,200,0.5);
}

#emotesSubs, #emotesMeme, #emotesExtras{
	width:100%;
}

.fixEmotes{
	border-radius:5px;
	height:50px;
}

#basicEmotesWrap{
	position:absolute;
	bottom:105px;
	left:10px;
	right:0px;
	height:35px;
}

.basicEmotes{
	position:relative;
	top:-10px;
}

#blackout{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:#000;
	z-index:50;
	opacity:1;
}

#editStreamInfoBox{
	position:absolute;
	top:25%;
	left:1px;
	right:1px;
	bottom:25%;
	border:solid 2px #3399ff;
	border-radius:5px;
	background-color:rgba(0,0,0,0.95);
	z-index:-1;
	opacity:0;
}

#chatUserInfoCard{
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	left:0;
	right:0;
	width:880px;
	height:950px;
	z-index:-1;
	opacity:0;
}

#updateStreamInfo{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:none;
}

#streamInfoWrapper{
	font-family:orbitron;
	color:#fff;
}

input.streamInput{
	border: 2px solid #3399ff;
	background-color:rgba(0,0,0,0.95);
	box-shadow: 0px 0px 40px #0040ff;
	border-radius:5px;
	letter-spacing:1.5px;
    color:#bfbfbf;
	font-size:14px;
	font-family:orbitron;
	font-weight:1000;
	padding-left:10px;
}

#fbShare{
	z-index:100;
}