:root{
	--red:#e66a6a;
	--blue:#4a83d1;
	--green:#4bb94d;
	--yellow:#ffdc00;
}
*{
    margin:0;
    outline:none;
    padding:0;
    box-sizing:border-box;
    user-select:none;
}
html,body{
    height: 100%;
    overflow: hidden;
}
body{
    display:flex;
    height:100%;
    font-family:'Lato';
}
ul{
    list-style:none;
}
input[type=text]{
    border:none;
    border-radius:20px;
    font-size:11px;
    padding:7px 10px;
	border:1px solid rgba(0,0,0,0.3);
}
input,textarea{
	font-family:'Lato';
	font-size:12px;
}
::placeholder{
	font-family:'Lato';
    color:rgba(0,0,0,0.2);
    font-style:italic;
}
.icon{
	opacity:0.75;
}

.color-red{
	color:#bc2323;
}
.color-green{
	color:#2aae33;
}
.color-blue{
	color:#1884b6;
}


.editing{
	background:#f8f4da;
}

.reverse{
	transform:rotate(180deg);
}
.buttons{
	display:flex;
}
.buttons button{
    padding:0;
    border:none;
    background:none;
	width:32px;
	height:32px;
	cursor:pointer;
	border-radius:24px;
}
.buttons button:hover{
	background:rgba(0,0,0,0.05);
}
.buttons .icon{
	width:16px;
}
.buttons .left{
	min-width:30px;
}
.buttons .center{
	display:flex;
	flex:1;
	align-items:center;
	justify-content:center;
}
.buttons .right{
	min-width:30px;
	display:flex;
	justify-content:flex-end;
}

button svg{
	width:18px;
	height:18px;
}


input[type=checkbox]{
	-webkit-appearance:none;
	width:32px;
	height:20px;
	background:#fad5d5;
	border-radius:10px;
	cursor:pointer;
}
input[type=checkbox]:checked{
	background:#fff;
}
input[type=checkbox]:after{
	display:block;
	content:' ';
	width:16px;
	height:16px;
	background:#e45a5a;
	border-radius:10px;
	margin:2px;
	transition:all 0.2s ease-out;
}
input[type=checkbox]:checked:after{
	margin-left:14px;
	background:#3ec948;
}



#root{
    flex:1;
    height:100%;
    background:#f4f4f4;
    display:flex;
    flex-direction:column;
}
#header{
    height:44px;
	display:flex;
	align-items:center;
	padding:0px 10px;
}
#header .left{
	
}
#header .center{
	flex:1;
}
#header .right{
	display:flex;
}
#header #chat-moderator-name{
	width:150px;
}
#header #chat-name{
	width:200px;
}
#header button{
	background:none;
	border:none;
	height:40px;
	padding:0px 15px;
	border-radius:40px;
	margin:0px 1px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:9px;
	text-transform:uppercase;
	font-weight:700;
}
#header button:hover{
	background:rgba(0,0,0,0.1);
}
#header button svg{
	margin-right:5px;
}



#content{
    flex:1;
    display:flex;
    padding:0 2.5px;
}

.box{
    margin:5px 2.5px;
    background:#fff;
	height:100%;
	display:flex;
	flex-direction:column;
	min-height:0;
}
.box>h1{
    font-size:10px;
	height:27px;
    text-transform:uppercase;
    font-weight:400;
    text-align:right;
    padding:4px 8px;
    background:#666;
    color:#fff;
	display:flex;
	align-items:center;
	justify-content:space-between;
}

#tab-box{
	flex:1;
	display:flex;
	flex-direction:column;
	padding-bottom:5px;
}
#tab-options{
	display:flex;
	padding:0px 8px 0px 0px;
	overflow:hidden;
	height:28px;
	border-bottom:2px solid #666;
}
#tab-options ul{
	display:flex;
}
#tab-options li{
	color:#fff;
	text-transform:uppercase;
    font-weight:400;
    text-align:right;
	font-size:10px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:8px 10px 8px 10px;
	margin:0px 2px 0px 0px;
	margin-top:4px;
	background:#666;
	opacity:0.6;
}
#tab-boxes{
	flex:1;
}
#tab-options li.selected{
	padding:8px 10px 8px 10px;
	margin-top:0px;
	opacity:1;
}

#problems-box{
	display:none;
}





.search{
    padding:4px 4px 2px 4px;
	display:flex;
}
.search input{
    flex:1;
}

#panel{
	width:60px;
	background:#666;
	padding:10px 5px;
}


#users-box{
	flex:1;
    display:flex;
    flex-direction:column;
	display:none;
}
#users{
    flex:1;
}
#users li{
    display:flex;
    border-bottom:1px solid rgba(0,0,0,0.3);
    padding:5px 10px;
}
#users li.offline{
	opacity:0.1 !important;
	display:none;
}
#users li.blocked{
	background:#ecaaaa;
}
#users li.talking{
	border-left:5px solid #090;
}
#users .info{
    flex:1;
}
#users .buttons{
    display:flex;
	align-items:center;
}



#users .name{
    font-size:11px;
    font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#users .room{
    font-size:10px;
    font-style:italic;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
#users .city{
    font-size:10px;
    color:#bbb;
    font-style:italic;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}




#messages-box{
    flex:1;
}
#stack-box{
    flex:1;
}
#internal-box{
    flex:1;
}

::-webkit-scrollbar{
	width:10px;
}
::-webkit-scrollbar-thumb{
	background:#ccc;
	border:2px solid #fff;
	border-radius:20px;
}
::-webkit-scrollbar-track{
	background:#fff;
	border-radius:20px;
}

.scroll-container{
	flex:1;
	display:flex;
	overflow-y:scroll;
	overflow-x:hidden;
	min-height:0;
	flex-basis:0;
	scrollbar-width:thin;
	scrollbar-color:#ccc #fff;
}
.messages{
	display:block;
	flex:1;
}
.messages li{
	padding:10px;
	border-bottom:1px dotted rgba(0,0,0,0.3);
	min-height:0;
}
.messages li.direct{
	background:#f0f0f0;
}
.messages li .name{
	font-weight:700;
	font-size:12px;
}
.messages li .name a{
	color:#000;
	text-decoration:none;
}
.messages li .room{
	font-weight:400;
	font-style:italic;
	padding:3px 0;
	font-size:11px;
}
.messages li .date{
	font-size:11px;
    color:#777;
    font-style:italic;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.messages li .extra{
	background:#f4f4f4;
	padding:5px 10px;
	margin:5px 0;
	font-size:11px;
    color:#555;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.messages li .message{
	font-size:12px;
	padding:15px 0;
}
.messages li .message.edit{
	padding:10px;
	background:#f8f4da;
	border-radius:10px;
}
.message-box{
	padding:5px 5px 10px 5px;
}
.message-box textarea{
	border:1px solid rgba(0,0,0,0.3);
	padding:10px;
	border-radius:10px;
	height:70px;
	width:100%;
	resize:none;
}
.message-box-subtitle{
	font-size:11px;
	font-style:italic;
	line-height:25px;
	padding:0 15px;
	margin:5px 0;
	font-weight:bold;
	background:#666;
	color:#ddd;
	border-radius:20px;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
}

.list{
	display:flex;
	flex-wrap:wrap;
	width:100%;
	overflow:hidden;
	padding:10px 0px 5px 0px;
}
.list li{
	font-size:8px;
	font-weight:400;
	display:flex;
	align-items:center;
	margin:0px 2px 3px 2px;
	background:#e0e0e0;
	color:#fff;
	border-radius:20px;
	padding:4px 10px 5px 5px;
	text-transform:uppercase;
	filter:grayscale(100%);
	cursor:pointer;
}
.list li input{
	margin-right:6px;
}
.list li.selected{
	filter:grayscale(0%);
}
.list input[type=checkbox]{
	-webkit-appearance:none;
	width:14px;
	height:14px;
	background:#fff;
	border-radius:14px;
	cursor:pointer;
}
.list input[type=checkbox]:checked{
	background:inherit;
}
.list input[type=checkbox]:after{
	display:block;
	content:' ';
	width:8px;
	height:8px;
	background:#fff;
	border-radius:10px;
	margin:0px;
	transition:none;
	border:4px solid rgba(255,255,255,0);
}
.list input[type=checkbox]:checked:after{
	background:inherit;
	border:4px solid #fff;
}
	


.filter{

}
.filter ul{
    display:flex;
    justify-content:space-around;
}
.filter li{
    display:flex;
    width:100%;
    border-radius:10px;
    align-items:center;
    justify-content:center;
    padding:2px 3px;
	margin:5px 0;
    font-size:20px;
    font-weight:400;
}
.filter input[type=checkbox]{
    -webkit-appearance:none;
    padding-left:3px;
    cursor:pointer;
}
.filter input[type=checkbox]:after{
    display:block;
    content:' ';
    width:8px;
    height:8px;
    border-radius:100px;
    background:#fff;
    border:4px solid #fff;
}
.filter input[type=checkbox]:checked:after{
    background:none;
}
.filter .room-1{
    background:var(--red);
    color:#fff;
}
.filter .room-2{
    background:var(--blue);
    color:#fff;
}
.filter .room-3{
    background:var(--green);
    color:#fff;
}
.filter .room-4{
    background:var(--yellow);
    color:#fff;
}

.scroll-container{
	scroll-behavior:smooth;
}

.btn{
	padding:10px 20px;
	border:none;
	text-transform:uppercase;
	font-size:10px;
	font-weight:700;
	color:#fff;
	margin:5px;
}
.btn-success{
	background:#2aaf1c;
}
.btn-error{
	background:#b84d42;
}

#internal-url{
	color:#fff;
	background:#e36c6c;
	border-radius:30px;
	text-decoration:none;
	cursor:pointer;
	padding:5px 10px;
	text-transform:uppercase;
	font-size:0.65rem;
	display:flex;
	align-items:center;
	margin-left:10px;
}
#archives{
	position:fixed;
	width:200px;
	right:290px;
	min-height:80px;
	max-height:80%;
	top:1px;
	background:#fff;
	box-shadow:0px 5px 5px rgba(0,0,0,0.3);
	padding:45px 0px 0px 0px;
	display:none;
}
#archives.show{
	display:block;
}
#archives h1{
	font-size:0.85rem;
	font-weight:400;
	position:absolute;
	top:13px;
	left:20px;
}
#archives button{
	position:absolute;
	top:0;
	right:0;
}
#archives button svg{
	margin:0;
}
#archives ul{
	list-style:none;
	height:100%;
	min-height:100px;
	border-top:1px solid #d0d0d0;
}
#archives li{
	display:block;
	border-bottom:1px solid #d0d0d0;
}
#archives li:hover{
	background:rgba(0,0,0,0.05);
}
#archives li a{
	display:block;
	padding:10px 20px;
	width:100%;
	height:100%;
	font-size:0.7rem;
	text-decoration:none;
	color:#555;
	font-weight:700;
	cursor:pointer;
}


#overlay{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0);
	z-index:100;
}
.float-popup{
	position:fixed;
	z-index:101;
	background:#fff;
	padding:10px 10px 10px 10px;
	font-size:0.7rem;
	box-shadow:4px 4px 10px rgba(0,0,0,0.4);
}
.float-popup #close-popup{
	position:absolute;
	right:3px;
	top:2px;
	font-size:1.5rem;
	color:#e36c6c;
}
#send-direct{
	min-width:300px;
	width:300px;
}
#send-direct .container{
	display:flex;
	flex-direction:column;
}
#send-direct label{
	display:block;
	margin-bottom:3px;
}
#send-direct textarea{
	width:100%;
	resize:none;
	border:1px solid rgba(0,0,0,0.3);
	padding:10px;
	border-radius:10px;
	height:70px;
}
#send-direct button{
	display:block;
	color:#fff;
	background:#e36c6c;
	border:none;
	border-radius:30px;
	text-decoration:none;
	cursor:pointer;
	padding:5px 10px;
	align-self:flex-end;
	margin-top:5px;
	text-transform:uppercase;
	font-size:0.6rem;
}