:root{
    --bg-image: url('');
	--player-size: 1;
	--size-divisor: 1;
	--header_background_color: #ffffff;
	--body_background_color: #ffffff;
	--qa_pos: 0%;
	--qa_opacity: 0%;
	--mag_bot: -50px;
	--qa_height: 0px;
}
html,body{
	height: 100vh;
	width: 100vw;
	margin: 0;
    background-color: var(--body_background_color);
}
h1{
    color: #111111;
}
h2
{color: #eb5d11;
}
.btn-client{
    color: ;
    background-color: ;
    border-color: ;
}
.btn-client:hover{
    color: ;
    background-color: ;
}
#background{
    background: var(--bg-image) no-repeat scroll 0% 0% / cover transparent;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-100;
}
.footer{
  height: 40px;
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #eb5d11;
  color: white;
  text-align: center;
  /*z-index:100;*/
}
#logoimg{
    max-height:100px;
	width: 100%;
}
#header {
    position:absolute;
    left:50%;
    top:0;
    margin-left:-480px;
    width:960px;
    height:100px;
}
#wrapper-container-content{
    margin-top:30px;
	min-height:100%;
	margin-bottom: 60px;
}
#chatWrapper{
    display: inline-block;
    width:960px;
}
#streamcontent{
	position: relative;
}
#container-header-title{
	/*width: 100%;
	text-align:center;*/
}
#streamplayer{
    /*width: calc((100%/var(--size-divisor))*var(--player-size)) !important;*/
	width: 100%;
	height: 100%;
	position: relative;
    display: inline-block;
    margin:0 auto;
	padding: 0.5em;
	z-index: 3;
	transition: all 2s;
	margin-left:-15px;
}
#streamqa{
    /*width: calc((960px/var(--size-divisor))*var(--player-size)) !important;
    display: inline-block;
    margin:0 auto;
	padding: 0.5em;*/
	z-index: 2;
	position: relative;
	top: var(--qa_pos);
	left: -1%;
	margin-right:auto;
	margin-left:auto;
	width: 100%;
	/*height: 100%;*/
	height: var(--qa_height);
	transition: all 2s;
	/*min-height: 500px;*/
	opacity: var(--qa_opacity);
	/*right:30px;*/
}
#controlarea{
	position: absolute;
	z-index: 4;
	top: 20px;
	left: 20px;
}
#output{
	/*min-height: 100vh;*//*
	position: relative;*/
	position: relative;
	overflow: hidden;
}
.header-title{
	background: var(--header_background_color);
	color: #FFFFFF;
	width: 100%;
	min-height:40px;
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	font-weight: normal;
	font-size: 1.9em;
}
.header-container{
	margin-left:auto;
	margin-right:auto;
}
.badgevod {
    background-color: #26365c;
}
.badgeedit {
    background-color: #4f4f4f;
}
.badgelive {
    background-color: #7d1d1d;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.list-group-item:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
a.list-group-item {
    color: #555;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid #ddd;
}
a {
    color: #428bca;
    text-decoration: none;
}
.controlbutton1{
	pointer-events: auto;
	border-style: solid;
	border-width: 1px;
	opacity: 1;
	user-select: none;
	background-color: rgb(121, 121, 121);
	border-radius: 4px;
	border-color: rgb(160, 160, 160);
	line-height: 13px;
	/*overflow-wrap: break-word;*/
	display: inline;
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	font-size: 16px;
	text-align: center;
	font-weight: normal;
	color: rgb(255, 255, 255);
	cursor: pointer;
	/*overflow: visible;*/
	text-shadow: none;
	width: 53px;
	height: 25px;
	/*transform-origin: 50% 50%;*/
	/*transform: translateX(30px) translateY(705px);*/
}
.controlbutton2{
	pointer-events: auto;
	border-style: solid;
	border-width: 1px;
	opacity: 1;
	user-select: none;
	background-color: rgb(121, 121, 121);
	border-radius: 4px;
	border-color: rgb(160, 160, 160);
	line-height: 13px;
	/*overflow-wrap: break-word;*/
	display: inline;
	font-family: Verdana, Tahoma, Geneva, sans-serif;
	font-size: 16px;
	text-align: center;
	font-weight: normal;
	color: rgb(255, 255, 255);
	cursor: pointer;
	/*overflow: visible;*/
	text-shadow: none;
	width: 103px;
	height: 25px;
	/*transform-origin: 50% 50%;*/
	/*transform: translateX(30px) translateY(705px);*/
}

#videoarea{
	width: 100%;
	height: auto;
}
#player{
	position: relative;
	width: calc(1280px/var(--size-divisor));
	height: calc(720px/var(--size-divisor));
}
#qaachat{
	position: absolute;
	width: calc(368px/var(--size-divisor));
	height: calc(720px/var(--size-divisor));
	right: -10px;
}
#resizable-player{
	width: calc((1280px/var(--size-divisor))*var(--player-size));
	height: calc((720px/var(--size-divisor))*var(--player-size));
	padding: 0.5em;
	z-index: 2;
	position: absolute;
	transition: all 2s;
}