*{
	padding:0;
	margin:0;
	outline:none;
	font-family:'Lato';
	box-sizing:border-box;
	color:#eee;
}
html,body{
	height:100%;
	background:#555;
	font-size:14px;
	overflow:hidden;
}
#dashboard{
	display:flex;
	flex-direction:column;
	width:100%;
	height:100%;
	background:#333;
}


.client-access .is-dev{
	display:none;
}


body.swal2-height-auto{
	height:100% !important;
}

.hidden{
	display:none !important;
}

ul{
	list-style:none;
}

.blur-1{
	backdrop-filter:blur(30px);
}

::-webkit-scrollbar{
    width: 12px;
}
::-webkit-scrollbar-track {
	background:#666;
}
 
::-webkit-scrollbar-thumb {
	background:#333;
	border-radius:10px;
	border:2px solid #666;
}

.green{
	color:#48af45;
}
.red{
	color:#d45151;
}
.yellow{
	color:#d4cc53;
}


#content{
	display:flex;
	flex:1;
	background:#111;
}
#footer{
	display:flex;
	height:0px;
}

button.on{
	background:#48af45;
}
button.off{
	background:#d45151;
}
button.wait{
	background:#d4cc53;
}


.title{
	font-size:0.8rem;
	text-transform:uppercase;
	padding:1% 2%;
	text-align:center;
}


#info{
	width:400px;
	background:#333;
	position:relative;
}

#player{
	
}
#player-container{
	position:relative;
	width:100%;
	padding-bottom:56.25%;
}
#player-container iframe{
	position:absolute;
	top:0;
	left:0;
	border:none;
	width:100%;
	height:100%;
}



#live{
	display:flex;
	width:100%;
	background:rgba(0,0,0,0.2);
}
.online-users{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	width:100%;
	font-size:2rem;
	padding:2% 0 3.5% 0;
	font-weight:700;
}
.online-users p{
	font-size:12px;
	font-weight:400;
	text-transform:uppercase;
	padding-top:8px;
}
.server-state{
	display:flex;
	flex-direction:column;
	padding:10px 20px 20px 20px;
}
#server-button-block{
	display:flex;
	margin-bottom:10px;
}
#server-plug{
	border-radius:100px;
	border:none;
	width:32px;
	height:32px;
	display:flex;
	align-items:center;
	justify-content:center;
	align-self:center;
}
#server-plug span{
	font-size:20px !important;
	color:rgba(255,255,255,0.7) !important;
}
#server-data{
	padding:10px 10px;
	flex:1;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}
#server-data > div{
	margin-left:10px;
}
#server-name{
	font-size:1.4rem;
	font-weight:700;
	width:100px;
}
#server-status-text{
	font-size:1rem;
	width:100px;
}

.rtmp-state{
	flex:2;
	display:flex;
	align-items:center;
	justify-content:space-around;
	list-style:none;
}
.rtmp-state li{
	flex:1;
	padding:10px 10px;
	background:rgba(0,0,0,0.2);
	margin-left:10px;
	border-radius:4px;
}
.rtmp-state li:first-child{
	margin-left:0;
}
.rtmp-state h1{
	font-size:14px;
	padding-bottom:5px;
	font-weight:400;
}
.rtmp-state h2{
	font-size:12px;
	padding-bottom:6px;
	font-weight:400;
	color:#ccc;
}
.rtmp-state h3{
	font-size:10px;
	color:#aaa;
	font-weight:400;
}


.webrtc-state{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	list-style:none;
	height:200px;
	overflow-x:none;
	overflow-y:auto;
	padding:10px 0 0 0;
}
#webrtc-streams{
	display:flex;
	flex-direction:column;
	width:100%;
	padding:10px 20px 0px 20px;
}
.webrtc-state li{
	flex:1;
	padding:5px 10px;
	background:rgba(0,0,0,0.2);
	width:100%;
	margin-bottom:5px;
	border-radius:10px;
	font-size:0.8rem;
	display:flex;
}
.webrtc-state li div{
	margin:0px 10px;
	display:flex;
	align-items:center;
}
.webrtc-state li div:nth-child(1){
	width:20px;
}
.webrtc-state li div:nth-child(2){
	width:100px;
}
.webrtc-state li div:nth-child(3){
	width:100px;
}
#webrtc-more{
	border-radius:100px;
	border:none;
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	align-self:center;
}
#webrtc-more span{
	font-size:2rem !important;
	color:#fff !important;
}

#graphic{
	margin:10px 0px 10px 10px;
}





#details{
	flex:1;
	display:flex;
}

#tabs{
	flex:1;
	display:flex;
}
#tabs > li{
	width:100%;
	height:100%;
	display:none;
	position:relative;
}
#tabs li.show{
	display:flex;
}

#tab-list{
	width:50px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background:#333;
}
#tab-list li{
	width:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin:3px 0px;
	font-size:0.4rem;
	text-transform:uppercase;
	background:#333;
	border-radius:10px;
	cursor:pointer;
	padding:10px 0px;
}
#tab-list li span{
	font-size:2rem;
}
#tab-list li.selected{
	margin-left:-13px;
	padding-left:13px;
	z-index:1;
	border-left:1px solid rgba(255,255,255,0.4);
}
.disabled{
	opacity:0.2;
}

.session-title{
	text-transform:uppercase;
	text-align:center;
	padding:20px 0;
}

#tab-map{
	
}
#map-container{
	flex:1;
	display:flex;
	overflow:hidden;
}
#map{
	flex:1;
}

#user-traits{
	position:absolute;
	height:auto;
	width:100%;
	bottom:0;
	left:0;
	display:flex;
	max-width:100%;
	padding:0px 0px 0px 0px;
	align-items:center;
	justify-content:center;
}
#user-traits > ul{
	display:flex;
	background:rgba(50,50,50,0.6);
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}
#user-traits > ul > li{
	flex:1;
	padding:10px 20px;
	min-width:160px;
}
#user-traits > ul li h1{
	text-transform:uppercase;
	text-align:center;
	font-size:12px;
	font-weight:400;
}
#user-traits > ul li h2{
	text-transform:uppercase;
	text-align:center;
	font-size:38px;
	padding-bottom:10px;
}

#user-traits .sublist{
	display:flex;
	flex-direction:column;
	display:none;
}
#user-traits .sublist li{
	font-size:0.7rem;
	display:flex;
}
#user-traits .sublist li span{
	display:block;
	min-width:50px;
	text-align:right;
	padding:0px 10px 0px 0px;
}
#user-traits .show-tech{
	display:flex;
	flex-direction:column;
	justify-content:space-around;
	padding:20px 0px;
}
#user-traits .show-tech > div{
	display:flex;
	align-items:center;
	padding:12px 0;
}
#user-traits .show-tech div span{
	font-size:3rem;
}
#user-traits .show-tech div p{
	font-size:1.3rem;
	font-weight:700;
	text-align:right;
	flex:1;
	padding-right:20px;
}
#user-traits #sub-mobile{
	
}
#user-traits .subs li{
	display:flex;
	align-items:center;
	font-size:1rem;
	font-weight:700;
	margin-bottom:4px;
}
#user-traits .subs img{
	width:32px;
	margin-right:10px;
}
#user-traits hr{
	border:1px solid rgba(0,0,0,0.4);
	height:1px;
	margin:20px 0;
}
#user-traits .subtitle{
	font-size:0.8rem !important;
	padding-bottom:10px;
}

#tab-tech{
	display:flex;
	flex-direction:column;
	overflow-y:scroll;
	max-height:100vh;
}
#tech-traits{
	height:auto;
	padding:30px 0;
}
.show-tech{
	display:flex;
	align-items:center;
	justify-content:center;
}
.show-tech h3{
	font-size:1rem;
	text-transform:uppercase;
	font-weight:400;
	padding:10px 0;
}
.show-tech > div{
	margin:0px 20px;
	padding:20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-size:4rem;
	background:rgba(255,255,255,0.1);
	border-radius:20px;
	width:200px;
}
.show-tech > div span{
	font-size:6rem;
}
#tech-traits .subs{
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
#tech-traits .low-session{
	margin-top:50px;
}
#tech-traits img{
	width:48px;
	margin-right:10px;
}
#tech-traits .subs li{
	font-size:4rem;
	margin:0px 30px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
#tech-traits .subs li span{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	font-size:1rem;
	margin-right:20px;
}
#tech-traits .subs li span:before{
	font-size:4rem;
}
#show-mobile,#show-desktop{
	margin-top:50px;
}





#tab-users{
	background:#555;
	display:flex;
	flex-direction:column;
}
#user-select{
	padding:10px 20px;
	display:flex;
	height:50px;
}
#user-select button{
	padding:5px 10px;
	background:rgba(0,0,0,0.4);
	border:none;
	border-radius:10px;
	margin:0px 5px;
	font-size:0.8rem;
	cursor:pointer;
}
#user-select button.enabled{
	opacity:0.2;
}
#user-select button span{
	margin-right:5px;
}
#user-select input{
	flex:1;
	border:1px solid #ccc;
	background:none;
	margin-left:10px;
	border-radius:20px;
	padding:5px 20px;
}
#user-select input::placeholder{
	color:#888;
}
#tab-users-content{
	margin-bottom:0px;
	width:100%;
	height:calc(100vh - 150px);
	border-bottom:1px solid rgba(255,255,255,0.2);
	overflow-x:hidden;
	overflow-y:scroll;
}
#user-buttons{
	height:100px;
}
#users-list{
	padding:20px;
	border-top:1px solid rgba(255,255,255,0.2);
}
#users-list li{
	width:100%;
	cursor:pointer;
	display:flex;
	border-bottom:1px solid rgba(255,255,255,0.2);
}
#users-list li.hidden{
	display:none;
}
#users-list li:hover{
	background:rgba(0,0,0,0.4);
}
#users-list div.td{
	overflow:hidden;
	padding:5px 10px;
	font-size:0.8rem;
	display:flex;
	align-items:center;
	flex:1;
}
#users-list div.td span{
	font-size:1.5rem;
}
#users-list div.td:nth-child(1){
	width:40px !important;
	max-width:40px;
}
#users-list div.td:nth-child(2){
	
}
#users-list div.td:nth-child(3){
	width:150px !important;
	max-width:150px;
}
#users-list div.td:nth-child(4){
	width:50px !important;
	max-width:50px;
}
#users-list div.td:nth-child(5){
	width:80px !important;
	max-width:80px;
}
#users-list div.td:nth-child(6){
	width:90px !important;
	max-width:90px;
}
#users-list div.td:nth-child(7){
	width:120px !important;
	max-width:120px;
}
#users-list div.td:nth-child(8){
	width:40px !important;
	max-width:40px;
}
#users-list div.td:nth-child(9){
	width:50px !important;
	max-width:50px;
}
#users-list div.td:nth-child(10){
	
}

#users-list.hide-online .online{
	display:none;
}
#users-list.hide-offline .offline{
	display:none;
}

#command-list{
	max-width:100%;
	display:flex;
	padding:10px 10px;
}
#command-list button{
	flex:1;
	margin:5px;
	background:rgba(0,0,0,0.2);
	border:none;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	font-size:0.7rem;
	text-transform:uppercase;
	padding:10px 20px;
	border-radius:10px;
	cursor:pointer;
}
#command-list button span{
	font-size:2rem;
	margin-bottom:5px;
}


.user-popup{
	width:600px !important;
	background:#222;
	padding:20px 30px;
}
.user-icons{
	display:flex;
	margin:10px 0;
	width:100%;
}
.user-icons li{
	display:flex;
	flex:1;
	margin:15px 0;
	padding:0px 20px;
	flex-direction:column;
	justify-content:space-around;
	align-items:center;
	font-size:0.9rem;
}
.user-icons li span{
	font-size:2rem;
}
.user-commands{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	border-top:1px solid rgba(255,255,255,0.1);
	padding:10px 0 0 0;
}
.user-commands button{
	background:rgba(0,0,0,0.4);
	border:none;
	border-radius:10px;
	padding:10px 10px;
	display:flex;
	flex-direction:column;
	align-items:center;
	font-size:12px;
	text-transform:uppercase;
	min-width:21%;
	margin:3px;
	cursor:pointer;
}
.user-commands button:hover{
	background:rgba(0,0,0,0.2);
}
.user-commands button span{
	margin-bottom:10px;
}
.user-popup h1{
	text-align:left;
	text-transform:uppercase;
	font-size:30px;
	color:#bbb;
}
.user-traits{
	
}
.user-traits li{
	text-align:left;
	margin:5px 0;
	font-size:16px;
	display:flex;
	align-items:center;
}
.user-traits .mdi{
	margin-right:10px;
	font-size:1.4rem;
}
.user-commands .mdi{
	font-size:2rem;
}


#tab-chat iframe{
	border:none;
	width:100%;
}


.swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation{
	background:rgba(0,0,0,0.8);
	backdrop-filter:blur(5px);
}
.swal2-container *{
	font-family:inherit !important;
}
.swal2-popup{
	background:#222 !important;
	min-width:25em;
	width:100%;
	max-width:50vw;
}
.swal2-title{
	font-size:0.8rem !important;
	text-transform:uppercase !important;
	color:#ccc !important;
}
.swal2-styled:focus,.swal2-file:focus, .swal2-input:focus, .swal2-textarea:focus{
	box-shadow:none !important;
	border:1px solid #aaa;
}
.swal2-styled.swal2-confirm,.swal2-styled.swal2-cancel,.swal2-styled.swal2-deny{
	font-weight:400 !important;
	text-transform:uppercase !important;
	font-size:0.8rem !important;
	padding:15px 25px;
	border-radius:20px;
}
.swal2-styled.swal2-confirm{
	background:#319035 !important;
	color:#eee !important;
}
.swal2-styled.swal2-cancel{
	background:#ba3636 !important;
	color:#eee !important;
}
.swal2-styled.swal2-deny{
	background:#2877a5 !important;
	color:#eee !important;
}
.swal2-input{
	font-size:0.8rem !important;
	color:#fff !important;
}
.swal2-input::placeholder{
	color:#777;
}

.dash-hls .webrtc-state{
	display:none;
}

.dash-webrtc .webrtc-state{
	display:flex;
}
.dash-webrtc .server-state{
	display:none;
}


#tab-poll{
	display:flex;
	flex-direction:column;
}


.toolbar{
	display:flex;
	padding:10px 0;
	margin-bottom:20px;
	border-bottom:1px solid rgba(255,255,255,0.1);
}
.toolbar .title{
	flex:1;
	text-align:left;
}
.toolbar-buttons{
	display:flex;
	align-items:center;
	padding:0px 20px 0px 20px;
}

.poll-popup{
	background:#333;
	padding:20px 30px;
	display:flex;
	flex-direction:column;
	width:100%;
	max-width:600px;
}
#poll-item{
	padding:5px 0px 0px 10px;
	background:rgba(0,0,0,0.2);
	margin:0px 0px;
	margin-top:10px;
}
.poll-popup button{
	background:rgba(0,0,0,0.4);
	border:none;
	border-radius:10px;
	padding:5px 30px;
	display:flex;
	align-items:center;
	font-size:0.6rem;
	text-transform:uppercase;
	cursor:pointer;
	align-self:center;
	margin-top:10px;
}

.poll-popup button span{
	font-size:2rem;
	margin-right:10px;
}
#poll-option-save{

}

#poll-add{
	background:#265e89;
	font-size:0.8rem;
	padding:5px 20px;
	border:none;
	border-radius:10px;
	text-transform:uppercase;
	display:flex;
	align-items:center;
	justify-content:center;
}
#poll-add span{
	margin-right:10px;
	font-size:1.4rem;
}

.poll-popup h1{
	font-size:0.8rem;
	text-transform:uppercase;
	margin-bottom:20px;
}
.poll-popup input[type="text"]{
	background:none;
	border:1px solid #777;
	padding:8px 20px;
}
.poll-popup #poll-item li{
	display:flex;
	margin:0px 0px 10px 0px;
	align-items:center;
}
.poll-popup #poll-item input[type="text"]{
	flex:1;
}
.poll-popup #poll-item input[type="checkbox"]{
	appearance:none;
	border:1px solid #777;
	width:20px;
	height:20px;
	margin:0px 10px 0px 10px;
	position:relative;
}
.poll-popup #poll-item input[type="checkbox"]:checked::before{
	position:absolute;
	content:' ';
	background:#aaa;
	width:80%;
	height:80%;
	left:10%;
	top:10%;
	border-radius:20px;
}

#poll-list-table{
	padding:20px;
	border-collapse:collapse;
	width:100%;
	/* border-top:1px solid rgba(255,255,255,0.2); */
	flex:1;
}
#poll-list-table tr{
	width:100%;
	cursor:pointer;
}
#poll-list-table td{
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:10px 10px;
	font-size:1rem;
	border-bottom:1px solid rgba(255,255,255,0.2);
}
#poll-list-table td span{
	font-size:1.3rem;
}
#poll-list-table td:nth-child(2),#poll-list-table td:nth-child(3),#poll-list-table td:nth-child(4){
	width:60px;
	text-align:center;
}
#poll-list-table td:nth-child(5){
	width:130px;
	text-align:center;
}


.poll-popup #poll-item button{
	padding:0px 10px;
	border:none;
	background:none;
	font-size:1.5rem;
	cursor:pointer;
	min-width:auto;
	margin:0px;
}
.poll-status{
	padding:4px 20px;
	border:none;
	border-radius:10px;
	font-size:0.8rem;
}
.poll-status.green{
	color:#eee;
	background:#319035 !important;
}
.poll-status.red{
	background:#ba3636 !important;
	color:#eee !important;
}


#overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	backdrop-filter:blur(10px);
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
}


.toastify{
	text-transform:uppercase;
	font-size:0.8rem;
	box-shadow:none !important;
}

#block-user.blocked{
	background:rgba(255,0,0,0.2);
}

/*
#graphics{
	flex:1;
	padding:20px 20px;
}
.graphic-full-wrapper{
	width:100%;
}
.chart{
	max-height:400px;
	height:400px;
}
*/












@media only screen and (max-width: 600px){
	
	#player{
		display:none;
	}
	html,body{
		font-size:3vw;
	}
	#content{
		flex-direction:column;
	}
	#info{
		max-width:100%;
	}
	#details{
		flex-direction:column;
	}
	.online-users{
		font-size:2.5rem;
		padding:2% 0;
	}
	.online-users p{
		font-size:0.9rem;
		padding-top:10px;
	}
	
	.server-state{
		padding:2% 3%;
	}
	#server-plug{
		width:60px;
		height:60px;
		font-size:1rem;
	}
	#server-plug span{
		font-size:2.5rem !important;
	}
	#server-data{
		padding:2% 3%;
	}
	#server-name{
		font-size:1.3rem;
	}

	.rtmp-state{
		flex:3;
		display:flex;
		align-items:center;
		justify-content:space-around;
		list-style:none;
	}
	.rtmp-state li{
		flex:1;
		padding:10px;
		margin:0px 2px;
	}
	.rtmp-state h1{
		font-size:1.1rem;
		padding-bottom:5px;
	}
	.rtmp-state h2{
		font-size:0.7rem;
		padding-bottom:5px;
	}
	.rtmp-state h3{
		font-size:0.8rem;
	}
	
	#command-list{
		padding:0px 10px 10px 10px;
	}
	#command-list button{
		height:50px;
		font-size:0px;
		margin:0px 8px;
	}
	#command-list button span{
		font-size:2rem;
	}
	
	#map-container{
		height:auto;
	}
	#map{
		height:auto;
	}
	
	#tab-list{
		width:100%;
		display:flex;
		flex-direction:row;
		align-items:center;
		justify-content:center;
		background:#333;
	}
	#tab-list li{
		width:100%;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:center;
		margin:10px 0px;
		font-size:0.4rem;
		text-transform:uppercase;
		background:#333;
		border-radius:10px;
		background:#f0f;
	}
	#tab-list li span{
		font-size:2rem;
	}
	#tab-list li.selected{
		margin-left:-10px;
		z-index:1;
	}
	
	#user-traits{
		padding:0;
	}
	#user-traits .sublist{
		display:none;
	}
	#user-traits > ul > li{
		margin:0;
		padding:10px 0px 0px 0px;
	}
	#user-traits > ul li h1{
		font-size:0.7rem;
	}
	#user-traits > ul li h2{
		padding-bottom:0;
		margin-bottom:10px;
		font-size:2rem;
	}
	
	
	
  
}