@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
	width: 100%;
	height: 100%;
	margin: 0;
	overflow: hidden;
	font-family: "Open Sans", sans-serif;
}
#fullMainContainer {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.checkbox input[type="checkbox"],
.checkbox input[type="radio"],
button,
input,
textarea {
	outline: none !important;
}

#tableRoomBody .activeRoom {
	background-color: #EBF5FF;
}

#header .btn .fa {
	margin-right: 5px;
}

.whisper::after {
	content: "Whisper";
	text-transform: uppercase;
	position: absolute;
	background-color: #ff0142;
	left: auto;
	right: 0;
	top: 0;
	bottom: 0;
	width: 80px;
	text-align: center;
	height: 24px;
	color: white;
	font-size: 11px;
	line-height: 24px;
}

#customExit, #purchseCreditsBtn, #askPrivateConferenceBtn,#displayActivityBtn {
	background-color: #ff0142;
	margin: 0px !important;
	padding: 0px 15px !important;
	border: 0px;
	justify-content: center;
	align-items: center;
	display: flex !important;
	margin-right: 20px !important;
	width: auto;
	font-size: 12px;
	min-height: 25px;
	color: white;
	border-radius: 25px !important;
}

#purchseCreditsBtn {
	font-size: 0.85em;
	line-height: 11px !important;
	width: auto;
	text-transform: initial;
	margin: 8px!important;
}

.myMessage.whisper::after {
	content: "Whisper";
	text-transform: uppercase;
	position: absolute;
	background-color: #ff0142;
	left: 0;
	right: auto;
	top: 0;
	bottom: 0;
	width: 80px;
	text-align: center;
	height: 24px;
	color: white;
	font-size: 11px;
	line-height: 24px;
}

.msg-flex {
	align-items: center;
}

.filtergender .filtergenderItem label img {
	/*display: none !important;*/
}

#conferenceWebcamContainer {
	height: 100%;
	width: 100%;
	display: none;
}

.visible {
	display: block;
}

.flex-property {
	display: -webkit-box;
	/* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;
	/* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;
	/* TWEENER - IE 10 */
	display: -webkit-flex;
	/* NEW - Chrome */
	display: flex !important;
	/* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-center {
	justify-content: center;
	align-items: center;
}

.hiddenImportant, .displayNoneImportant {
	display: none!important;
}

.hidden, .displayNone  {
	display: none;
}

.chat-input-icons.displayNone {
	display: none!important;
}

.message-info {
	flex-wrap: wrap;
	flex-direction: column;
	margin-top: 0;
	margin-left: 0;
	width: auto;
	max-width: calc(100% - 300px) !important;
}

#container {
	width: 100%;
	height: 100%;
	display: inline-block;
}

#header {
	height: 70px !important;
	padding-right: 20px !important;
	padding-left: 20px !important;
	justify-content: center;
	align-items: center;
}

.group-btns {
	align-items: center;
	width: 100%;
	justify-content: flex-end;
	flex: 1;
}
div.group-btns button:last-child {
	border-left: none;
}

.btn-group {
	margin: 0;
	padding: 10px;
}


.btn .fa,
.btn .glyphicon {
	margin-right: 5px;
}

.toggle-handle {
	padding: 0 !important;
	width: 35px !important;
	height: 35px !important;
	display: none;
}


#myAvatar {
	padding: 0 10px;
	cursor: pointer;
}

.userAvatar {
	width: 32px;
	height: 32px;
	padding: 5px;
	border-radius: 0;
	background-color: white;
}

.userItem img.avatarUser {
	width: 35px;
	height: 35px;
	border-radius: 50%;
	cursor: pointer;
}

.flag {
	position: absolute;
	left: 4px;
	bottom: 4px;
}

.userTabAvatar {
	width: 20px;
	height: 20px;
	border-radius: 20px;
}

#chatContainer {
	width: 100%;
	float: left;
	box-sizing: border-box;
	position: relative;
	right: 0;
	padding: 0;
	height: calc(100% - 70px);
}

.welcome {
	padding: 5px 0;
	margin: 10px 0;
	text-transform: capitalize;
	text-align: center;
	border-radius: 2px !important;
}

.btn-success:hover {
	color: #fff;
	background-color: #45b775;
	border-color: #45b775;
}

#webcamsContainer {
	display: none;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	/* Lets it scroll lazy */
	-webkit-overflow-scrolling: auto;
	/* Stops scrolling immediately */
	white-space: nowrap;
}

.webcamContainer {
	position: relative;
	display: inline-block;
	border: 1px solid #CCC;
	box-shadow: 2px 2px 11px;
	margin-bottom: 20px;

}

.webcamCloseBtn {
	cursor: pointer;
}

.webcamHeader {
	background-color: #fff;
	line-height: 16px;
	height: auto;
	cursor: move;
	padding: 5px 10px;
	border: none;
}

.webcamHeader span {
	font-size: .9em;
}

#usersContainer {
	bottom: 0;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	transition: all .3s ease;
	background-color: #fff;
	top: 0;
	padding: 0;
	border: none;
	box-shadow: 0 0 0 0;
	display: none;
}

#usersContainer li .nav > li > a {

}


#searchInput, .searchInputRoom {
	width: calc(100% - 50px);
	border-radius: 5px;
	border: none;
	padding: 5px 10px 5px 40px;
	box-sizing: border-box;
	margin: 10px 0;
	font-size: 1.1em;
	font-weight: 100;
	background-color: transparent;
	color: #d9d9d9;
}
#searchInput {
	width: calc(100% - 123px);
}
#usersContainer2 .fa.fa-search, #searchRoomContainer .fa.fa-search {
	position: absolute;
	margin-left: 0;
	left: 17px;
	font-size: 15px;
	margin-top: 0;
	top: 19px;
}

#roomName {
	font-size: 1.2em;
	border-bottom: 1px solid #F0F0F0;
}

#tabs,
.chat {
	height: 100%;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;

}

#colorPickerContainer {
	display: table-cell;
}

.tableBlank {
	display: table-cell;
	width: 10px;
}

#chatInput {
	white-space: nowrap;
	resize: none;
	outline: none;
	color: #747f8d;
	font-size: 1.2em;
	width: 100%;
	padding: 4px;
	box-sizing: border-box;
	padding-right: 40px;
	line-height: 1;
	height: auto;
	overflow: hidden;
	border: none;
}

#chatInput:disabled {
	background-color: #FFF;
	color: #EEE;
}

.myUser.disabled {
	font-weight: bold;
	opacity: 0.90;
}

.myUser div.userLabel {
	font-weight: bold !important;
}

.disabled {
	pointer-events: none;
	opacity: .5;
	background-color: #0000001c;
}

#backgroundBtn,
#clearButton,
#djBtn,
#smileyButton {
	cursor: pointer;
	font-size: 1.6em;
	padding-top: 2px;
}

#backgroundBtn:hover,
#clearButton:hover,
#djBtn:hover,
#smileyButton:hover {
	color: #513400;
	transform: scale(1.1, 1.1);
}

#backgroundsContainer,
#smileyContainer {
	padding: 2px 0;
	max-width: 281px;
	z-index: 999;
	background-color: white;
	position: absolute;
	bottom: 34px;
	text-align: center;
	box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, .15);
	min-height: 200px;
	min-width: 200px;
	margin-bottom: 25px;
	display: none;
	bottom: 35px;
	right: 335px;
}

#backgroundsContainer {
	max-width: 330px;
}

.smileyItem {
	display: inline-block;
	width: 40px;
	cursor: pointer;
	padding: 3px 0;
}

.smileyItem:hover img {
	transform: scale(1.3, 1.3);
	transition-duration: .2s;
}

.overlay {
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: .5;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
}

.unread {
	display: inline-block;
	background-color: #50ce85;
	border-radius: 50%;
	font-size: 0.75qem;
	width: 15px;
	text-align: center;
	float: right;
	color: white;
	margin-top: 3px;
	margin-left: 5px;
	line-height: 15px;
}

.unread:empty {
	display: none;
}

.status, .status2 {
	position: relative;
	display: inline-block;
	border-radius: 10px;
}

.status.online, .status2.online {
	background-color: #50ce84;
}

.status.offline, .status2.offline {
	background-color: #FF0000;
}

.status.busy {
	background-color: #FFA600;
}


.userItem {
	cursor: pointer;
	clear: both;
	position: relative;
	font-weight: 500;
	font-size: 0.9em;
	border-bottom: 1px solid #F3F3F3;
}

button.handActive i {
	color: red;
}

button.handActive i {
	color: red;
}

.roomJoinBtn {
	min-width: 90px;
	width: 100%;
}

.userLabel {
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;
	line-height: 32px;
	display: inline-block;
	font-size: 14px !important;
	margin-left: -26px;
	cursor: default;
	position: absolute;
	top: 6px;
	left: 75px;
	font-weight: 300 !important;
	max-width: 170px;
}

.message {
	padding: 3px 0 !important;
	flex-wrap: wrap;
	border: none;
	position: relative;
}

#quitBtn {
	float: right;
	margin: 0 !important;
	padding: 0 25px !important;
	height: 40px !important;
	justify-content: center;
	align-self: center;
	margin-right: 15px !important;
}

#smileysHeader {
	height: 30px;
	padding: 5px;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 500;
}

#closeSmileysBtn {
	cursor: pointer;
}

#myWebcamContainer {
	width: 100%;
	display: none;
}

#myWebcamContainer div.btn-group label {
	width: calc(50% - 10px);
}

#myWebcamContainer div.btn-group label:first-child {
	margin-left: 10px;
}

#myUserMenu, #userMenu {
	position: absolute;
	background-color: white;
	top: 0;
	min-width: 200px;
	color: #444;
	display: none;
	font-size: 1.1em;
	z-index: 2000;
	padding: 0;
}

.menuUserItem {
	cursor: pointer;
	padding: 5px;
	font-size: .7em;
}

.menuUserItem:hover {
	background-color: #CCC;
}

.muted {
	opacity: .2;
}

.message span {
	margin-left: 5px;
}

.message .timeStamp, .messageWindowPrivate .timeStamp {
	float: right;
	padding-top: 2px !important;
	display: block;
	margin-left: 10px;
	font-size: 10px;
}

div.message div.content {
	margin: 2px 0 5px;
	padding-left: 0;
	font-size: .9em;
	width: auto;
	padding: 3px 10px;
	font-weight: 300;
	margin-left: 5px!important;
	border-radius: 6px;
	position: relative;
	margin-top: 7px;
	max-width: 100%;
	word-break: break-word;
	border-top: 0;
	min-width: 50px;
}

.roomImage {
	max-height: 32px;
	max-width: 32px;
}

.nav-tabs > li .close {
	margin: -2px 0 0 10px;
}

.userLink {
	cursor: pointer;
	font-weight: bold;
	text-decoration: underline;
}

.tab-content {
	position: relative;
	top: 0;
	width: 100%;
}

.tab-pane {
	overflow: scroll;
	position: absolute;
	-webkit-overflow-scrolling: touch;
	/* Lets it scroll lazy */
	-webkit-overflow-scrolling: auto;
	/* Stops scrolling immediately */
	left: 0;
	right: 0;
	top: 0;
	bottom: 45px;
	padding-bottom: 0;
	padding-right: 20px;
	padding-left: 20px;
	background-repeat: no-repeat;
	background-size: cover;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
	overflow-y: hidden;
}

.m,
.male {
	color: #008CFF;
}

.f,
.female {
	color: #DB7DF4;
}

.c,
.couple {
	color: #5E5E5E;
}

.webcamBtn .fa-lock,
.webcamBtn .fa-unlock {
	font-size: 13px;
	margin-left: 9px !important;
	margin-right: 0;
}


.privateRequested div,
.webcamRequested div {
	display: inline;
	margin-left: 40px;
}


.myUsername {
	display: inline-block;
	font-size: 12px;
	margin-left: -10px;
	margin-right: 10px;
	font-weight: bold;
	letter-spacing: 1.14px;
}

.windowChat {
	background-color: #FDFDFD;
	position: absolute;
	height: calc(100% - 45px);
	width: 100%;
	padding: 40px 10px 0 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;
}

.windowInputContainer {
	position: absolute;
	width: calc(100% - 20px);
	margin: auto;
	left: 0;
	right: 0;
	bottom: 6px;
	display: flex;
	align-items: center
}
.windowInputContainer i {
	padding: 5px;
	cursor: pointer;
}
.windowEraser {
	cursor: pointer;
	color: white;
}
.windowInputContainer .windowEraser {
	color:black;
}

.windowInputChat {
	width: calc(100% - 24px);
	padding-left: 4px;
	border-radius: 3px;
	border: 2px solid #EEE;
	margin: 2px;
	font-size: 1.25em;
}

.messageWindowPrivate {
	display: flex;
	justify-content: flex-start;
	position: relative;
}
.messageWindowPrivate.sent {
	justify-content: flex-end;
}


.bubbleReceive {
	font-size: .95em;
	position: relative;
	padding: 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: #E5E5E5 solid 1px;
	background: #EFF9FF;
	margin: 5px 5px 5px 10px;
	/* margin-left: 50px; */
	width: calc(100% - 50px);
	word-wrap: break-word;
}

.bubbleReceive:before {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	border-color: transparent #E5E5E5;
	display: block;
	width: 0;
	z-index: 0;
	margin-top: -6px;
	left: -7px;
	top: 12px;
}

.bubbleReceive:after {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 6px 6px 6px 0;
	border-color: transparent #EFF9FF;
	display: block;
	width: 0;
	margin-top: -6px;
	left: -6px;
	top: 12px;
}

.bubbleSend {
	font-size: .95em;
	position: relative;
	padding: 5px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	border: #E5E5E5 solid 1px;
	background: #ffffff;
	margin: 5px 5px 5px 20px;
	width: calc(100% - 100px);
	clear: both;
	word-wrap: break-word;
}

.bubbleSend:before {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent #E5E5E5;
	display: block;
	width: 0;
	z-index: 0;
	margin-top: -6px;
	right: -7px;
	top: 50%;
}

.bubbleSend:after {
	content: "";
	position: absolute;
	border-style: solid;
	border-width: 6px 0 6px 6px;
	border-color: transparent #FCFCFC;
	display: block;
	width: 0;
	/* z-index: 1; */
	margin-top: -6px;
	right: -6px;
	top: 50%;
}

.jsPanel div.bubbleReceive, .jsPanel div.bubbleSend {
	width: auto;
	margin: 5px;
	font-size: 1.1em;
}
.speech-bubble {
	z-index: 1;
	position: absolute;
	background: #c0c0c0;
	border-radius: .4em;
	max-width: 260px;
	padding: 1px 10px;
	display: inline-block;
	text-align: center;
	color: white;
	font-size: 0.75em;
	top:40px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 0;
	left: 27px;
	width: 0;
	height: 0;
	border: 12px solid transparent;
	border-bottom-color: #c0c0c0;
	border-top: 0;
	border-right: 0;
	margin-left: -23px;
	margin-top: -10px;

}

.conferenceWebcamContainer {
	display: none;
}

#lightBox.flexed {
	display: flex;
}

#lightBox {
	cursor: pointer;
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 0.95);
	width: 100%;
	top: 0;
	height: 100%;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
#lottiePlayerContainer {
	display: flex!important;
	position: absolute;
	background: #FFF;
	width: 100%;
	top: 0;
	height: 100%;
	z-index: 999999;
	align-items: center;
	justify-content: center;
}


#lightBox img {
	max-width: 90vw;
	max-height: 90vh;
}

#lightBox video {
	max-width: 90%;
	max-height: 90%;
	display: none;
}

#lightBox1to1 {
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 1);
	width: 100%;
	top: 0;
	height: 100%;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}

#header1to1Call div {
	text-align: center;
	font-size: 1.3em;
	margin: 10px;
}

#header1to1Call {
	top: 0;
	width: 100%;
	position: absolute;
	max-height: 150px;
	background: rgba(0, 0, 0, 0.7);
	color: white;
}

#hisVideo1to1Container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#lightBox1to1 #myVideo {
	border: 1px solid #333;
	position: absolute;
	width: 160px;
	height: 120px;
	bottom: 10px;
	right: 10px;
}


#call1to1EndedBtn {
	border: none;
	position: absolute;
	bottom: 70px;
	left: 70px;
	text-align: center;
	color: white;
	background: red;
	border-radius: 50px;
	width: 64px;
	height: 64px;
}

#call1to1EndedBtn:hover {
	background-color: #7f001a;
}


#userListMain {
	height: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	/* Lets it scroll lazy */
	-webkit-overflow-scrolling: auto;
	/* Stops scrolling immediately */
	position: relative;
	min-height: 150px;

}

#userList, #friensdList {
	width: 100%;
	height: 100%;
	transition-duration: .5s;
	bottom: 0;
	padding: 0;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	-webkit-overflow-scrolling: auto;
}

#userList:hover {
	overflow-y: auto;
	transition-duration: .5s;
}

.flex-container {
	display: -webkit-flex;
	display: flex;
	height: calc(100% - 50px);
	flex-direction: column;
}

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
	background-color: darkgrey;
	outline: 1px solid slategrey;
}

.toggleSize {
	margin: 10px 5px;
	float: right;
	display: none;
}

/* start responsive styles */

.open .slide_block {
	right: 315px !important;
}

.slide_block {
	border-radius: 3px 0px 0px 3px !important;
	z-index: 10;
	width: 30px;
	height: 60px;
	background-color: #ffffff !important;
	border: 1px solid #efefef;
	border-right: 0;
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	margin-top: -50px;
	cursor: pointer;
	box-shadow: 0 0 0 rgba(0, 0, 0, 0.05), 0 1px 6px rgba(0, 0, 0, 0.1) !important;
}

.slide_block:before {
	display: block;
	position: absolute;
	top: 50%;
	margin-top: -7px;
	left: 50%;
	margin-left: -3px;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 7.5px 10px 7.5px 0;
	border-color: transparent #d4d0d0 transparent transparent;
}

.open #chatContainer {
	padding: 0px 335px 0px 20px !important;
}

.open .slide_block:before {
	border-width: 7.5px 0 7.5px 10px;
}

.open #usersContainer {
	width: 315px;
	display: block;
	transition: all .3s ease;
}

.open #chatContainer {
	padding-right: 315px;
	transition: all .3s ease;
	padding-left: 0;
	border: 0;
	padding-top: 0;
}

.open #footer {
	right: 315px;
	width: auto;
	transition: all .3s ease;
}


#pushToTalkWindow {
	position: absolute;
	width: 160px;
	height: 120px;
	bottom: 12px;
	right: 10px;
	border: 1px solid #CCC;
	box-shadow: 1px 1px 30px #CCC;
	opacity: 0;
	background-color: #fff;
	/*pointer-events: none;*/
	height: 125px;
	display: none;
}

#pushToTalkSWF {
	opacity: .2;
}

#pushToTalkWindowHeader {
	font-size: .8em;
	color: #000;
	border-bottom: 1px solid #CCC;
	padding-left: 10px;
	background-color: #F6F6F6;
}

#pushToTalkContainer {
	background-image: url("../img/micro.svg");
	width: 100%;
	height: 100px;
	background-repeat: no-repeat;
	background-size: contain;
	background-position-x: 32px;
}

#pushToTalkBtnClose {
	cursor: pointer;
	position: absolute;
	right: 2px;
	top: 2px;
	font-size: 1em;
	background-color: transparent;
}

.pushToTalkFreeHand {
	color: green;
}

#pushTalkBtn {
	cursor: pointer;
	font-size: 1.6em;
	padding-top: 3px;
}

.serverText {
	margin: 5px 0;
	text-align: center;
}
.serverText .red {
	background-color: red;
	color:white;
	font-size: 1.5em;
}


.serverMessage p {
	margin: 0;
}

.serverMessageKick, .serverMessageBan, .serverMessageMute {
	font-weight: bold;
	color: black;
	background: #b1b1b1;
	padding: 9px;
	line-height: 2px;
	opacity: 0.9;
	margin: 10px 0px;
}

#chatInput::-webkit-input-placeholder {
	color: #888888;
	left: 0;
	position: relative;
	transition: left .3s ease-in-out;
}

#chatInput::-moz-placeholder {
	color: #888888;
	left: 0;
	position: relative;
	transition: left .3s ease-in-out;
}

/* Firefox 19+ */

#chatInput:-moz-placeholder {
	color: #888888;
	left: 0;
	position: relative;
	transition: left .3s ease-in-out;
}

/* Firefox 18- */

#chatInput:-ms-input-placeholder {
	color: #888888;
	left: 0;
	position: relative;
	transition: left .3s ease-in-out;
}

#chatInput:focus::-webkit-input-placeholder {
	color: #888888;
	left: -100%;
}

#chatInput:focus::-moz-placeholder {
	color: #888888;
	left: -100%;
}

/* Firefox 19+ */

#chatInput:focus:-moz-placeholder {
	color: #888888;
	left: -100%;
}

/* Firefox 18- */

#chatInput:focus:-ms-input-placeholder {
	color: #888888;
	left: -100%;
}

div.news {
	font-size: 1.2em;
	padding: 5px 10px !important;
	margin: 5px 0 !important;
	background-color: #fdfdfd;
	border: 1px solid #ebebeb9e;
	font-size: 1em;
	padding: 10px;
	margin: 15px 0;
	text-align: center;
	border-radius: 3px;
}

div.allowFlash {
	font-weight: bold;
	text-align: center;
	background-color: red;
	padding: 20px;
	position: absolute;
	width: 100%;
}

#usersContainer div.allowFlash {
	position: relative;
}

div.allowFlash a {
	color: white;
}
div.speaksUser {
	width: 5px;
	padding: 1px;
	margin: 1px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
div.speaksUser div.volume {
	width: 100%;
	transition-duration: 0.1s;
	background: linear-gradient(yellow,green);
}

video.redBorder {
	border:5px solid red;
}
div.speaks {
	position: absolute;
	top: 50px;
	left: 5px;
	width: 10px;
	bottom: 33px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
div.speaks div.volume {
	width: 100%;
	transition-duration: 0.1s;
	background: linear-gradient(red, yellow,green);
}

.blink {
	animation: blink-animation 1s steps(5, start) infinite;
	-webkit-animation: blink-animation 1s steps(5, start) infinite;
	color: red;
}
.blink2 {
	animation: blink-animation2 1s steps(5, start) infinite;
	-webkit-animation: blink-animation2 1s steps(5, start) infinite;
	transition-duration: 0.3s;
}
#userList .userItem.red {
	background: red;
}
#userList .userItem.green {
	background: green;
}
@keyframes blink-animation2 {
	to {
		opacity: 1;
	}
}

@-webkit-keyframes blink-animation2 {
	to {
		opacity: 1;
	}
}


@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

@-webkit-keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

div.question {
	border: 1px solid #DDD;
	padding: 10px;
	background-color: #F8F8F8;
	border-radius: 5px;
	margin: 5px;
}

div.question img {
	width: auto;
	max-height: 65px;
	pointer-events: none;
}

div.question p {
	margin: 0;
}

.quizBadAnswer {
	padding: 5px;
	color: red;
}

.quizGoodAnswer {
	padding: 20px;
	background-color: #e2ffe2;
	font-size: 1.5em;
}

div.question p {
	margin: 0;
	font-size: 1.4em;
}

div.pointsQuiz {
	font-size: .5em;
	color: white;
	background: #d9534f;
	left: 47px;
	padding: 2px 5px;
	border-radius: 64px;
	top: 0;
	text-align: center;
	max-width: 45px !important;
	display: inline;
}

div.creditsUser {
	display: inline;
	color: white;
	background: #d9534f;
	left: 48px;
	padding: 2px 5px;
	border-radius: 64px;
	bottom: 3px;
	text-align: center;
}

#broadcastContainer {
	display: none;
	padding: 0 20px;
	margin-bottom: 10px;
}

#broadcastContainer div.toggle {
	width: 100% !important;
}

/*video::-webkit-media-controls-timeline {
    display: none;
}

video::-moz-media-controls-timeline {
    display: none;
}

audio::-webkit-media-controls-timeline {
    display: none;
}

audio::-moz-media-controls-timeline {
    display: none;
}

video#myVideo::-webkit-media-controls-play-button {
    display: none;
}

video#myVideo::-webkit-media-controls-volume-slider {
    display: none;
}

video#myVideo::-webkit-media-controls-mute-button {
    display: none;
}*/
video.paused {
	pointer-events: none;
	opacity: 0;
}
video.paused ~.speaks {
	display: none;
}
div.paused::before {
	content: "Webcam paused";
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	text-align: center;
	background: black;
	color: white;
	font-size: 1.6em;
	height: 100%;
}

.emojionearea, .emojionearea.form-control {
	outline: none;
	box-shadow: none;
	font-size: 1.1em;
	margin-top: 0px;
	border-radius: 5px;
	height: 100% !important;
	padding-top: 35px !important;
}

div.emojionearea-editor {
	-moz-user-select: text;
	-khtml-user-select: text;
	-webkit-user-select: text;
	-o-user-select: text;
}

#sortBtn, #sortWebcamtBtn, #sortWatchersBtn, #sortRoleBtn {
	position: relative;
	display: block;
	height: auto;
	top: 0;
	margin: 11px 5px !important;
	padding: 0 10px;
}

#usersContainer2 button.selected {
	background: lightgrey;
	color: white;
}

i.microphoneTalking {
	position: absolute;
	display: none;
}

i.raiseHand {
	position: absolute;
	display: none;
	left: 0px;
	top: 2px;
}

#myWebcamContainer label.btn {
	font-size: .9em;
	/*padding-top: 7px;*/
}

#searchGifInput {
	margin: -1px 0 0;
	width: 100%;
	left: 0;
	top: 0;
	border: 1px solid #d8d8d8;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
}

#uploadImageBtnLabel, #snpashotlabel {
	cursor: pointer;
	margin-top: 20px;
	position: relative;
	padding: 2px 25px;
	border-radius: 25px;
}

#uploadImageBtnLabel:after {
	content: "Upload";
	position: absolute;
	bottom: -17px;
	text-align: center;
	left: 12px;
	font-size: 10px;
}


#smileysContent, #gifsContent {
	display: flex;
	flex-flow: wrap;
	align-items: end;
	justify-items: center;
}

#smileysContent img, #gifsContent img {
	width: auto;
	max-height: 48px;
	cursor: pointer;
	margin: 10px auto;
	max-width: 84px;
}

div.emojionearea-editor img {
	max-height: 27px;
	border: 1px solid #666;
	margin-right: 20px;
	max-width: 80px;
}

.message img.gifMaximized {
	width: auto;
	height: auto !important;
	transition-duration: .5s;
}

.message img.gif {
	cursor: pointer;
}

.addPrivateMessage b img.gif,
.message img.gif {
	border: none;
	width: auto;
	max-height: 96px;
	border-radius: 0;
	transition-duration: .5s;
	max-width: 100%;
	padding: 5px;
}

#myWebcam {
	top: 0;
	max-height: 190px;
}

#usersListMenu {
	display: none;
	position: absolute;
	background: inherit;
	z-index: 999;
	bottom: 55px;
	max-height: 200px;
	width: 200px;
	left: 26px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	/* Lets it scroll lazy */
	-webkit-overflow-scrolling: auto;
	/* Stops scrolling immediately */
	border: 1px solid #CCC;
}

#usersListMenu div {
	padding: 5px;
	border-bottom: 1px solid #EEE;
}

#usersListMenu div:hover {
	background-color: #EEE;
	cursor: pointer;
}

div.userAutoComplete {
	cursor: pointer;
}

div.userAutoComplete img {
	width: 32px;
	height: 32px;
}

.dropdown-menu.textcomplete-dropdown[data-strategy=emojionearea] li.textcomplete-item a {
	background-color: inherit;
	border-left: 5px solid #5f5fd2;
}

#calendarContainer {
	display: none;
}

#tabs .nav-tabs {
	overflow-x: auto;
	overflow-y: hidden;
}

#tabs ul.nav-tabs::-webkit-scrollbar {
	width: 0.5em;
	height: 0.5em;
}

#tabs ul.nav-tabs::-webkit-scrollbar-button {
	background: #ccc;
}

#tabs ul.nav-tabs::-webkit-scrollbar-track-piece {
	background: #888;
}

#tabs ul.nav-tabs::-webkit-scrollbar-thumb {
	background: #eee;
}

.emojionearea .emojionearea-editor {
	min-height: 100%;
	max-height: 100%;
}

.jsPanel-titlebar h3 {
	text-align: left;
	padding-left: 25px;
}

div.webcamSwfContainer {
	background-image: url('../img/loadingCam.gif');
	background-repeat: no-repeat;
	background-position: center;
	position: inherit;
}

div.webcamSwfContainer.audio {
	background-image: url('../img/mic.svg');
	background-size: contain;
}

button.createRoomBtn {
	margin: 5px 0;
}

div.isMobile {
	position: absolute;
	left: 22px;
	bottom: -5px;
	font-size: 1.3em;
}

div.isMobile > img {
	width: 12px;
}

#oas_Position1 {
	display: none;
}

div.message div.content {
	box-shadow: 1px -1px 4px -2px #6a696945;
	background-color: #fff;
	border: 1px solid #f1f1f1;
	border-top: 0px;
}


div.message div.content:before {
	bottom: 100%;
	left: 15px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ffffff;
	border-width: 10px;
	margin-left: -10px;
}

div.message div.content:before {
	display: none;
}


/* end start responsive styles */

.name-time {
	margin-top: 0;
	justify-content: flex-start;
	align-items: center;
	margin-left: 5px !important;
}

/*  important layout chat fixes */


.btn-danger,
.btn-primary,
.btn-success,
.dark-blue-btn {
	border-radius: 5px;
	min-height: 35px !important;
	line-height: 20px !important;
	text-transform: capitalize;
	font-size: .90em;
}

.btn-warning {
	font-size: 0.9em;
}
.btn-danger,
.btn-danger.active {
	background-color: #ff0142 !important;
	border: 1px solid #ff0142 !important;
	box-shadow: 0 0 white !important;
}

div#header .toggle-off.btn, div#header .toggle-on.btn {
	box-shadow: 1px 1px 4px -1px #000000ab !important;
	margin-left: 0px !important;
	padding: 0px !important;
}


.btn-succes.active,
.btn-success {
	background-color: #51ce86;
	border: 1px solid #51ce86 !important;
	color: white !important;
}


.btn-primary {
	color: #fff;
	background-color: #4c8ec7;
	border-color: #4c8ec7;
	box-shadow: 0px 0px 0px 0px #00000030;
	border: 1px solid #4c8ec7;
}

.btn-success.active,
.btn-success.active.focus,
.btn-success.active:focus,
.btn-success.active:hover,
.btn-success:active,
.btn-success:active.focus,
.btn-success:active:focus,
.btn-success:active:hover,
.open > .dropdown-toggle.btn-success,
.open > .dropdown-toggle.btn-success.focus,
.open > .dropdown-toggle.btn-success:focus,
.open > .dropdown-toggle.btn-success:hover {
	color: #fff;
	background-color: #50c180;
	border-color: #50c180;
}

.search-bar {
	justify-content: center;
	position: relative;
	margin-bottom: 0 !important;
}

#youTubeCloseBtn {
	height: 25px;
	padding: 0;
	border-radius: 0;
}

/*.online-user-item {
    padding: 7px 5px;
    height: 48px;
}*/

.online-user-item {
	padding: 7px 5px;
	height: auto;
}

.info-icons {
	position: absolute;
	right: 0;
	width: 65px !important;
	top: 0;
	height: 100%;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding-right: 5px;
}

.hand {
	padding: 0;
	margin-top: -2px;
	margin-left: 10px;
	margin-right: 5px;
	border: 0 solid !important;
	background-color: transparent;
}

.hand .fa,
.hand .glyphicon {
	margin: 0;
	font-size: 16px;
}


#usersContainer ul li {
	width: 100%;
}


.nav > li > a {
	text-align: center;
	/*padding: 2px 7px 0px 2px;*/
	color: #7e7e7e;
	border: 1px solid #e2e2e2;
	border-bottom: 0;
	height: 100%;
	font-size: 0.95em;
}

.eye-icon .fa-eye,
.fa-eye-slash,
.webcamBtn .fa {
	font-size: 15px;
	margin-right: 0;
	opacity: .4;
	margin-bottom: -5px !important;
}

.canWatchMe {
	opacity: 1 !important;
	color: #50ce85 !important;
}

.isWatching {
	color: red;
	opacity: 1 !important;

}

.nav-tabs {
	padding-top: 10px;
}

.checkbox label::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 17px;
	height: 17px;
	left: 0;
	margin-left: -20px;
	margin-top: 0;
	border-radius: 2px;
	-webkit-transition: border .15s ease-in-out, color .15s ease-in-out;
	-o-transition: border .15s ease-in-out, color .15s ease-in-out;
	transition: border .15s ease-in-out, color .15s ease-in-out;
}

.checkbox label::after {
	display: inline-block;
	position: absolute;
	width: 16px;
	height: 16px;
	left: 1px;
	margin-left: -20px;
	padding-left: 3px;
	padding-top: 1px;
	font-size: 10px;
	top: -2px !important;
}

.radio label::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 17px;
	height: 17px;
	left: 0;
	margin-top: 1px;
	margin-left: -20px;
	border-radius: 4px;
	-webkit-transition: border .15s ease-in-out;
	-o-transition: border .15s ease-in-out;
	transition: border .15s ease-in-out;
}

.radio label::after {
	display: inline-block;
	position: absolute;
	content: " ";
	width: 10px;
	height: 9px;
	left: 3px;
	top: 0;
	margin-left: -19px;
	margin-top: 5px;
	border-radius: 2px;
	-webkit-transform: scale(0, 0);
	-ms-transform: scale(0, 0);
	-o-transform: scale(0, 0);
	transform: scale(0, 0);
	-webkit-transition: -webkit-transform .1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	-moz-transition: -moz-transform .1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	-o-transition: -o-transform .1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
	transition: transform .1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.audioMedia {
	width: 100%;
	position: absolute;
	bottom: 0;
	left: 0;
}

#myAudioCheckBox {
	display: block;
}

#myWebcamDiv {
	position: relative;
	background-image: url("../img/mic.svg");
	background-size: 50%;
	background-repeat: no-repeat;
	background-position: center;
}



.myAudioCheckBox, .myVideoCheckBox {
	margin-bottom: 10px !important;
	margin-right: 10px !important;
	width: 50px !important;
	position: absolute;
	top: 3px;
	right: 18px;
	display: block;
}

.myVideoCheckBox {
	top: 3px;
	right: 70px;
	width: 55px;
}

#myWebcamDiv i.fa-video-camera {
	font-size: 0.9em;
}

#myWebcamDiv .toggle-off.btn-xs {
	padding-left: 10px;
}

.myAudioCheckBox .toggle-off,
.myAudioCheckBox .toggle-on {
	padding-top: 2px !important;
}

.myAudioCheckBox .btn-info, .myVideoCheckBox .btn-info {
	background-color: #50ce85;
	border: 1px solid #50ce85;
	text-transform: uppercase;
	font-size: 9px;
}

.myAudioCheckBox .btn-default, .myVideoCheckBox .btn-default {
	color: white;
	background-color: #ff0142;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
	border: 1px solid #ff0142;
}

.myAudioCheckBox .btn-info:hover {
	background-color: #43c178;
	border: 1px solid #43c178;
}

.myAudioCheckBox .btn-default:hover {
	background-color: #e8053f;
	border: 1px solid #e8053f;
}

.jsPanel-title .userAvatar {
	height: 33px;
	max-height: 33px;
	padding: 5px;
	margin-top: -8px;
	margin-left: 7px;
	border: 0 !important;
	border-radius: 50%;
	width: auto;
}

/* right user message css */
.myMessage {
	justify-content: flex-end;
}

.myMessage img {
	order: 2 !important;
	margin-left: 10px !important;
}

.myMessage .message-info {
	justify-content: flex-end !important;
	align-items: flex-end !important;
	max-width: 80% !important;
}

.myMessage .arrow-chat::after {
	left: auto !important;
	right: 20px !important;
	top: 2px !important;
}


.myMessage.addPrivateMessage::after {
	right: auto !important;
	left: 0 !important;
}

.chat-window-wrap .message.myMessage .private-message .timeStamp {
	text-align: right;
}

div.roomName {
	color: #0c74a0;
}

.roomDescription {
	font-size: .7em;
}

#tableRoomBody2 div.roomDescription {
	display: none;
}

#tableRoomBody2 tr td:first-child div {
	white-space: nowrap;
	font-size: .8em;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 110px;
}

#tableRoomBody2 img {
	width: 16px;
	/*display: none;*/
}

/* CHAT LAYOUT Css for new chat design - must be included in all chat designs */
/* =========== layout fixes =========== */

#quitBtn {
	display: none;
}

#colorPicker_palette-0 {
	bottom: 100px !important;
	top: auto !important;
}

#header .btn .fa {
	display: none;
}

#backgroundsheader {
	padding: 5px;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: 500;
}

.mobile-text-lobby {
	display: none;
}


#pushToTalkWindowHeader {
	font-size: .8em;
	padding-left: 10px;
	text-transform: uppercase;
	padding: 3px 5px;
}

#loginGuestModal .radio label::before {
	width: 18px !important;
	height: 17px;
}

.status.offline {
	background-color: #ff0142;
}

/* footer is chat input field */
#footer {
	height: 90px !important;
	padding: 10px 5px !important;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: all .3s ease;
	width: 100%;
	background-color: white;
}

.textarea-icons-wrapper {
	margin-top: 0 !important;
	flex-direction: row;
	align-items: center;
	z-index: 100;
	position: absolute;
	top: 20px;
	left: 12px !important;
	order: 2;
}

#chatInputContainer {
	margin: 0 !important;
	order: 1;
	height: 100%;
	align-self: flex-start;
	width: 80vw !important;
	border-radius: 15px;
	padding-bottom: 0;
	margin-right: 10px;
}

.chat-input-icons {
	padding: 2px !important;
	margin: 0 8px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid transparent;
	cursor: pointer;
}

.chat-input-icons.fontSelected {
	border: 1px solid #666;
	background: #cecece;
}

.colorPicker-picker {
	padding: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 0 !important;
	margin-left: 0 !important;
	height: 17px;
	width: 17px;
}


#pushToTalkFreeHandContainer {
	margin-left: 0 !important;
}

#send-msg-btn, #sendTipBtn {
	display: block;
	order: 3;
	padding: 7px 10px;
	align-self: flex-end;
	margin: 0 10px;
	text-align: center;
	text-transform: uppercase;
	border-radius: 2px;
	font-size: 12px;
	font-weight: bolder;
}

#footer .emojionearea.emojionearea-inline > .emojionearea-editor {
	height: 100%;
	min-height: auto;
	white-space: normal;
	overflow: auto;
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	padding: 5px 10px;
	margin: 0;
}

#tabs {
	height: calc(100% - 90px);
}

#usersContainer #usersContainer2 .flex-container {
	height: calc(100% - 50px) !important;
	bottom: 0 !important;
}

#roomsContainer2, #usersContainer2, #friendsContainer2 {
	height: 100% !important;
	bottom: 0 !important;
	background-color: white;
	z-index: 100;
	overflow-y: auto;
}

#tabs .tab-content {
	height: calc(100% - 40px) !important;
	/*height: 100% !important;*/
}

.open #chatContainer {
	padding: 0 335px 0 20px !important;
}

#chatContainer {
	padding: 0 20px !important;
}


#tabs .nav-tabs {
	display: flex;
	align-items: flex-end;
	/* height: 35px !important; */
	padding: 0 !important;
	border: 0 !important;
	flex-wrap: wrap;
}

#tabs .nav-tabs > li {
	margin: 0 !important;
	border-bottom: 0 !important;
	border-top-right-radius: 3px;
	border-top-left-radius: 3px;
	/*height: 26px;*/
}

#usersContainer .nav-pills > li.active > a,
#usersContainer .nav-pills > li.active > a:focus,
#usersContainer .nav-pills > li.active > a:hover {
	border-radius: 0 !important;
	height: 37px;
	justify-content: center;
	align-items: center;
	margin-right: 0;
}

.filtergender {
	border-top: 0 !important;
	padding: 5px 0 !important;
	padding-top: 0px !important;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 0;
	flex-wrap: wrap;
}


#usersContainer li a {
	text-transform: capitalize;
	font-size: 10px;
	padding-top: 10px;
	color: #787878;
	border-radius: 0;
	border: 0;
	border-left: 1px solid #ebebeb;
}

#usersContainer .nav-pills > li > a:hover,
#usersContainer .nav-pills > li.active > a:hover {
	border-radius: 0 !important;
}

#usersContainer .nav-tabs > li.active > a,
#usersContainer .nav-tabs > li.active > a:focus,
#usersContainer .nav-tabs > li.active > a:hover {
	font-size: 14px;
	padding: 5px 10px;
}

/* right content with users and search */


#usersContainer .tab-content {
	padding: 0 !important;
	height: calc(100% - 40px) !important;
}

#header .userAvatar {
	border-radius: 50%;
}

.header-chat-logo {
	/*max-width: 170px !important;*/
	max-height: 50px;
	margin-right: 10px;
}

.header-chat-logo img {
	object-fit: cover;
	height: 100%;
}

#header .status, #header .status2 {
	bottom: -14px;
	top: -16px;
	width: 8px;
	margin-right: 5px !important;
	height: 8px;
	left: -3px;
}

.hamburger-header {
	width: 40px;
	height: 74px;
	border: 0;
	display: block !important;
	margin-top: 5px;
}

.ham-dropdown-menu {
	height: 70px;
	margin-top: -10px;
}

.hamburger-header div {
	display: block;
	width: 100%;
	margin: 4px 0;
	border-radius: 35px;
	padding-top: 3px;
}

#header .btn {
	width: 20px !important;
	height: 20px !important;
	min-height: 20px !important;
	margin: 0 5px !important;
}

.header-custom-btns .toggle.btn {
	min-width: 35px;
}

.ham-dropdown-list {
	margin: 1px 0 !important;
	border-radius: 0;
}

.ham-dropdown-list > li > a {
	padding: 5px 10px;
}

.buttons-subnames {
	margin-right: 0;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	letter-spacing: 1.14px;
	text-transform: uppercase;
}

.buttons-subnames .fa {
	font-size: 18px;
	margin-right: 3px;
}

.right-container-icons {
	height: 12px;
	margin-right: 3px;
	margin-top: -3px;
	display: inline;
}

.nav > li > a > img.white-svg {
	display: none;
}


.nav > li.active > a > img.black-svg {
}

.svg-header-icons {
	width: 21px !important;
	margin-right: 5px;
}

.header-btn-wrap {
	margin: 0 10px;
	padding-right: 20px;
	justify-content: center;
	align-items: center;
}

.header-btn-wrap:last-child {
	border: 0 !important;
	padding: 0 !important;
	margin-right: 0 !important;
}

#chatContainer {
	height: 100%!important;
}

.menuUserItem .fa-circle {
	margin-right: 5px;
}

.link-icons .fa {
	font-size: 14px;
	margin-left: 5px;
}

.arrow-chat {
	display: block !important;
}


#pushTalkButtonContainer img {
	width: 17px;
}

#backgroundBtn,
#clearButton,
#djBtn,
#smileyButton {
	width: 19px;
}

.emojionearea .emojionearea-button > div,
.emojionearea .emojionearea-picker .emojionearea-wrapper:after {
	background-size: 20px 23px !important;
}

.chat-input-icons .fa {
	font-size: 15px;
}


.emojionearea .emojionearea-button {
	right: 5px !important;
	top: 6px !important;
	width: 20px !important;
	height: 21px !important;
	overflow: hidden;
}


#sortBtn .btn .fa,
#sortBtn .btn .glyphicon {
	margin-right: 0;
	margin-top: 0;
}

#searchInput::placeholder {
	/* Chrome, Firefox, Opera, Safari 10.1+ */
	font-size: 13px !important;
	font-weight: 200 !important;
	/* Firefox */
}

#searchInput:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	font-weight: 200 !important;
	font-size: 13px !important;
}

#searchInput::-ms-input-placeholder {
	/* Microsoft Edge */
	font-weight: 200 !important;
	font-size: 13px !important;
}

.users-info {
	padding: 5px 10px 5px 10px !important;
	text-transform: capitalize;
	font-size: 13px;
	margin: 5px 0px;
	letter-spacing: inherit;
	width: 100%;
}

.filtergenderItem {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	flex: 1;
	padding-left: 0;
	border: 0 !important;
	left: 4px;
}
filtergender .checkbox label {
	padding-left: 0;
}
/*
#userList .status {
    width: 11px !important;
    height: 11px !important;
    top: -42px !important;
    left: 25px !important;
}
*/


#userList .status {
	width: 6px !important;
	height: 6px !important;
	top: 0;
	left: 27px !important;
	position: absolute;
}

#userList .search-bar {
	margin-bottom: 0;
	border-bottom: 1px solid #e1e1e1 !important;
}

.keyboard {
	position: absolute;
	font-size: 16px;
	left: auto;
	bottom: 3px;
	top: auto;
	opacity: 0;
}

i.microphoneTalking {
	top: 4px !important;
}

.eye-icon .fa-eye {
	margin-right: 1px !important;
}

.webcamBtn {
	width: 56px;
	cursor: pointer;
	font-size: 12px;
	text-align: center;
	border-radius: 20px;
	margin-top: 1px;
	height: 21px;
	padding-top: 3px;
	border: 1px solid #EEE;
}

#roomsContainer2 .table-bordered {
	border: 0;
	margin: 0 !important;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
	font-weight: 300;
	font-size: 13px;
	padding-top: 3px;
	padding-bottom: 3px;
	line-height: 25px;
	border: 1px solid #f3f3f3;
	border-left: 0;
}

.light-modal .table > caption + thead > tr:first-child > td,
.table > caption + thead > tr:first-child > th,
.table > colgroup + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > td,
.table > thead:first-child > tr:first-child > th {
	/*text-transform: uppercase;*/
	font-size: 11px;
	text-align: center;
	font-weight: 800;
}

.userTabAvatar {
	width: 22px;
	height: 22px;
	border-radius: 20px;
	margin: 0 5px;
}

#roomsContainer2 table .btn-success {
	border-radius: 4px;
	padding: 0;
	height: 18px;
	display: block;
	min-height: 25px !important;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 500;
}

#usersContainer .nav-pills > li + li {
	margin-left: 0;
}

#tabs .nav-tabs > li .close {
	font-size: 14px;
	height: 100%;
	display: block;
	padding: 2px;
	margin-left: 5px;
	margin-top: -2px !important;
}

#tabs .nav-tabs > li.active a {
	margin: 0 !important;
}

.jsPanel-headerbar img {
	vertical-align: middle;
	max-height: 19px;
	position: absolute;
	left: 0;
}

/*.jsPanel-titlebar h3 {
    text-align: center;
}*/

.jsPanel-controlbar {
	margin-right: 5px;
}

.menuUserItem:hover {
	background-color: #f7f7f7;
}

#roomsBtn img {
	height: 21px;
	margin-top: -6px;
	margin-right: 5px;
	opacity: .9;
}

.hide-btn {
	display: none !important;
}

.colorPicker_hexWrap {
	display: none !important;
}

#roomsBtn, #parametersTopButton, #directAdminButtonAccessBtn {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	border: 0;
	/*padding-right: 30px !important;*/
	justify-content: center;
	align-items: center;
	display: flex !important;
	margin-right: 20px !important;
	font-size: 12px;
	letter-spacing: 1.14px;
	text-transform: uppercase;
	line-height: 28px !important;
	min-height: 35px;
	padding-left: 25px !important;
}

#smileyContainer {
	bottom: 85px !important;
	right: auto !important;
	left: 180px !important;
}

.nav-tabs-clone {
	display: none !important;
}

.oneRoomDiv {
	padding: 10px;
	justify-content: space-around;
	margin-bottom: 10px;
}

.roomTitle {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 500;
}

.roomsRightInfo {
	flex-direction: column;
	padding-left: 20px;
	flex: 1;
}

.roomsLeftInfo {
	flex-direction: column;
	flex: 2;
}

.joinRoomModal {
	display: block;
	padding: 8px 30px;
	margin-left: auto;
	margin-right: 0;
	text-align: center;
	border-radius: 2px;
	min-width: 110px !important;
	width: auto !important;
	border: 0;
}

.roomUsers,
.roomUsers a {
	margin-bottom: 0;
}

.right-subtitle {
	font-size: 16px;
}

.privateClosed, .privateRequest, .webcamRequest {
	padding: 10px;
	margin: 2px 0;
	text-align: center;
}

#roomContainer .table-bordered {
	margin: 0;
}

.rooms-modal {
	font-size: 20px;
}

.oneRoomDiv:last-child {
	margin-bottom: 0 !important;
}

.gender-select-name {
	text-transform: capitalize;
	line-height: 20px;
	font-size: 11px;
}

.emojionearea .emojionearea-picker .emojionearea-filters .emojionearea-filter {
	width: 38px !important;
	height: 38px !important;
}

.private-message {
	flex-direction: column;
	position: relative;
}

.private-message .content {
	margin-top: 6px !important;
}

.private-message .message .timeStamp {
	margin-left: 5px !important;
}

.addPrivateMessage::after {
	text-transform: uppercase;
	position: absolute;
	content: "Mention";
	top: 0;
	right: 0;
	width: 80px;
	text-align: center;
	height: 24px;
	font-size: 10px;
	font-weight: 700;
	padding-top: 4px;
	background-color: #50ce85;
	color: white;
}

#usersContainer li a .badge {
	min-width: 15px !important;
	padding: 3px 3px !important;
	font-size: 9px !important;
	margin-top: -5px;
}

.emojionearea .emojionearea-picker.emojionearea-filters-position-top .emojionearea-filters {
	padding: 0 !important;
}

.chat-input-icons .fa:hover {
	transform: scale(1.1, 1.1);
}

div.addPrivateMessage {
	padding: 5px !important;
	background-color: #ededed9e;
}

#backgroundsContainer {
	max-width: 330px;
	position: absolute;
	right: 0;
	top: 0;
	height: fit-content;
}

.privateRequested,
.webcamRequested {
	padding: 10px;
	margin: 0;
	text-align: center;
}

.privateRequested .btn,
.webcamRequested .btn {
	border-radius: 3px !important;
	padding: 0 12px !important;
	min-height: 28px !important;
	line-height: 28px !important;
	font-size: .95em;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 1.08px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.home-tab {
	width: 13px;
	margin: 1px 2px 3px !important;
}

.privateRequested .btn .fa,
.privateRequested .btn .glyphicon,
.webcamRequested .btn .fa,
.webcamRequested .btn .glyphicon {
	margin-top: 0 !important;
}

#calendarBtn {
	border-radius: 0;
}

.youtubeMessage {
	min-height: 240px;
	width: 320px;
}


.addPrivateMessage b img,
.chat-window-wrap .message img {
	height: 40px;
	max-width: 100%;
	max-height: 100%;
	margin-right: 5px;
}

div.content img.emojioneemoji {
	max-width: 32px;
	max-height: 32px;
}


.whisper {
	background-color: #f4f4f4 !important;
	padding: 10px 10px !important;
}

.content {
	word-break: break-all;
}

#usersContainer .userItem img.imageRole {
	max-height: 12px;
	height: auto;
	width: auto;
	position: absolute;
	left: 0;
	top: 0;
	border-radius: 0;
	border: none !important;
}
#usersContainer .userItem img.imageRole[src=""] {
	display: none;
}

#friendsContainer2 .friendIRequested, #friendsContainer2 .friendIneedToApprove {
	opacity: 0.75;
}

#friendsContainer2 div.friendApproved button.friendActionBtn::before {
	font-family: FontAwesome;
	content: "\f088";
}

#friendsContainer2 div.friendIRequested button.friendActionBtn::before {
	font-family: FontAwesome;
	content: "\f021";
}

#friendsContainer2 div.friendIneedToApprove button.friendActionBtn::before {
	font-family: FontAwesome;
	content: "\f2b5";
}

#friendsContainer2 button.friendActionBtn {
	width: 24px;
	height: 24px;
	position: relative;
	top: 5px;
	border: none;
}

#friendsContainer2 button.friendActionBtn:hover {
	background-color: #82c1c4;
	color: white;
}

#backgroundsContainer label {
	cursor: pointer;
	padding: 5px 10px;
	font-size: 0.8em;
}

div.jsPanel h3.jsPanel-title span {
	padding-left: 10px;
}

div.ui-pnotify-closer {
	float: right;
}

div.ui-pnotify-sticker {
	display: none;
}

#footer.activeMention #privateOrMentionContainer, #footer.activeWhisper #privateOrMentionContainer {
	display: block;
}

#footer.activeMention div.emojionearea-editor, #footer.activeWhisper div.emojionearea-editor {
	padding-left: 65px;
}
#footer.activeMention div.textarea-icons-wrapper.flex-property, #footer.activeWhisper div.textarea-icons-wrapper.flex-property {
	padding-left: 50px;
}

#privateOrMentionContainer {
	width: 64px;
	height: 68px;
	order: 0;
	top: 11px;
	left: 6px;
	position: absolute;
	overflow: hidden;
	margin: auto;
	text-align: center;
	background-size: cover;
	cursor: pointer;
	z-index: 999;
	border-radius: 3px;
	display: none;
}

#privateOrMentionContainer:hover #texteCaption {
	background-color: red;
	transition-duration: 0.3s;
	top:64px;
}

#privateOrMentionContainer:hover #texteCaption:before {
	color: white;
	content: "\f00d";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;;
}

#privateOrMentionContainer #texteCaption:before {
	color: white;
	content: "\f061";
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;;
}

#privateOrMentionContainer img {
	width: 40px;
	height: 40px;
	cursor: pointer;
}

#texteCaption {
	display: none;
	font-size: 0.7em;
	position: relative;
	top: 45px;
	background-color: #51ce86;
	color: white;
	border-radius: 0;
	transition-duration: 0.3s;
	line-height: 12px;

}

#footer.activeMention #texteCaption, #footer.activeWhisper #texteCaption {
	display: block;
}
.broadcast {
	display: initial;
}

.broadcastUser {
	border: 5px solid #f40303;
	border-radius: 30px;
	height: 64px;
	width: 64px;
	position: absolute;
	left: 0;
	top: -16px;
	animation: pulsate 0.5s ease-out;
	animation-iteration-count: infinite;
	opacity: 0.0;
}

.pulsateCircle {
	border: 5px solid #f40303;
	border-radius: 30px;
	height: 64px;
	width: 64px;
	position: relative;
	left: 0;
	top: -16px;
	animation: pulsate 0.5s ease-out;
	-webkit-animation-iteration-count: 2;
	opacity: 0.0;
}

@-webkit-keyframes pulsate {
	0% {
		-webkit-transform: scale(0.1, 0.1);
		opacity: 0.0;
	}
	50% {
		opacity: 1.0;
	}
	100% {
		-webkit-transform: scale(1.0, 1.0);
		opacity: 0.0;
	}
}

@keyframes pulse {
	0% {
		-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
		box-shadow: 0 0 0 0 rgba(204, 169, 44, 0.4);
	}
	70% {
		-moz-box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
		box-shadow: 0 0 0 30px rgba(204, 169, 44, 0);
	}
	100% {
		-moz-box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
		box-shadow: 0 0 0 0 rgba(204, 169, 44, 0);
	}
}

i.favoriteStar {
	cursor: pointer;
	float: right;
	padding: 2px;
	color: #ff9b00;
}

i.favoriteStar:hover {
	color: red;

}

button.banClass {
	width: 70px;
	font-size: 0.8em;
}

ul div.menuUserItem[data-action="invisible"] {
	border-bottom: 1px solid rgba(255, 255, 255, .3);
}

.opacity50 {
	opacity: 0.5;
}

#progressUploadPicture {
	height: 5px;
	width: 0;
	background: red;
}

span.age {
	font-size: 0.7em;
	display: inline-block;
	padding-right: 23px;
	position: absolute;
	right: 0;
	/*top: 20px;*/
}

.reportRoomBtn {
	padding: 2px;
	font-size: 0.9em;
	cursor: pointer;
}

.modal-dialog {
	overflow-y: initial !important
}

#roomsModal .modal-body {
	max-height: 60%;
	overflow-y: auto;
}

.adultRoom {
	text-transform: initial;
	font-size: 12px;
	letter-spacing: inherit;
	line-height: 12px;
}

.roomDescription {
	line-height: initial;
}

#closeLightBoxBtn, #downloadImageLightBox {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 32px;
	height: 32px;
	padding: 0;
}
#downloadImageLightBox {
	right: 46px;
}

#marqueeContainer {
	position: absolute;
	bottom: 79px;
	font-size: 0.8em;
	width: 100%;
	height: 16px;
	overflow: hidden;
}

.modal {
	z-index: 999999;
}

#usersContainer ul.nav {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

#conferenceWebcamContainer video {
	position: absolute;
}

#purchseCreditsBtn span {
	padding-right: 5px;
}

#header.conference.user {
}

.displayNoneImportant {
	display: none !important;
}

#sendTipBtn {
	border: none;
	float: right;
	position: absolute;
	right: 0;
	top: 12px;
	background-color: #ff0142;
	color: white;
	margin: 0 15px;
	font-size: 0.7em;
	width: 79px;
}

#loginModal .modal-footer .btn {
	font-size: 0.8em;
}

#colorPicker {
	display: none;
}

div.centered {
	text-align: center;
}

div.jsPanel #myVideo {
	background-color: #fff;
	height: 100%;
}

#userHeader #myVideo {
	max-height: 240px!important;
}

#chatrouletteContainer {
	margin: auto;
	text-align: center;
	padding: 5px;
}

#chatRouletteBtn {
	width: calc(100% - 30px);;
}

#webcamConfigBtn {
	position: absolute;
	top: 0;
	right: 0;
	margin: 3px;
	text-align: center;
	width: 22px;
}
#webcamMinimizeBtn {
	position: absolute;
	top: 0;
	left: 0;
	margin: 3px;
	text-align: center;
	width: 22px;
}

div.webcamSwfContainer.audioOnly video {
	opacity: 0;
}

div.webcamSwfContainer.audioOnly {
	background-image: url('../img/presenter.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

div#myWebcamDiv.audioOnly #myVideoCheckBox, div#myWebcamDiv.audioOnly div.toggle.myVideoCheckBox {
	display: none;
}

div#myWebcamDiv.audioOnly #myVideo {
	opacity: 0;
}

div.userItem.userItem.selectedUser {
	background-color: #50ce85;
	color: white;
}
div.serverMessage div.userItem {
	display: inline-block;
	font-weight: bold;
}

div.webcamOpened {
	padding: 5px;
	background: #F8F8F8;
	font-size: 0.9em;
	margin: 2px;
}
#usersContainer #myWebcamDiv.webcamMinimized {
	height: 40px!important;
	background-size:10%!important;
}
#myWebcamDraggable #webcamMinimizeBtn {
	display:none
}
/*#userList div[data-status="busy"] div.webcamBtn {
    display: none;
}
 */
button.webcamSmall {
	border: none;
	background: none;
	margin-right: 20px;
	padding-left: 0;
	font-size: 0.75em;
}
button.webcamSmall:hover {
	color:black;
}


#whoWatchesMeCheckbox {
	display: none!important;
}
/* ============ medias for phones ============== */
.webcamBtn.green {
	color:green;
}
div.userSince {
	font-size: 0.75em;
	position: absolute;
	top: 14px;
	left: 0;
}
div.tab #chatContainer {
	display: flex;
	flex-flow: column;
}
div.tab #webcamsContainer {
	display: flex;
}
div.tab  #tabs {
	flex:1;
	overflow-y: auto;
	overflow-x: hidden;
}

div.tab  #footer {
	height: 120px !important;
	padding: 10px 5px !important;
	position: relative;
}
#usersContainer.leftLayout {
	order:-1;
}
#usersContainer.leftLayout.toggleWidth #usersContainer2{
	display: none;
}
/*#usersContainer.leftLayout.toggleWidth ul {
    display: none!important;
}*/
#usersContainer.leftLayout #slide_block {
	left: 350px;
}
#usersContainer.leftLayout #slide_block.opened {
	left: 35px;
	transform: rotate(180deg);
}
#fullMainContainer.tab.splitterWebcamChat div.webcamContainer.noFloat {
	height:100%;
	width: auto;

}
#fullMainContainer.tab.splitterWebcamChat video{
	width: auto!important;
	height: 100%;
	max-height: initial!important;
	max-width: initial!important;
}
#fullMainContainer video#videoRecord, #fullMainContainer video#videoPlayBack {
	width: 100% !important;
}


#fullMainContainer.tab div.webcamSwfContainer {
	width: auto;
	height: calc(100% - 30px)!important;
	max-width: initial;
	max-height: initial!important;
	top: 28px;
	position: relative;
}
#fullMainContainer.tab #webcamsContainer {
	max-width: calc(100vw - 320px);
	overflow-y: hidden;
	overflow-x:scroll;
}
.opacity100 {
	opacity: 1;
}
.opacity30  {
	opacity: 0.3;
}
.webcamOutsideBtn {
	cursor: pointer;
}
.webcamOutsideBtn:before {
	content: "\f2d2";
	display: inline-block;
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	font-family: "Font Awesome 5 Free";
	font-weight: 900
}
.size50 {
	font-size: 0.5em;
}
.size80 {
	font-size: 0.8em;
}

.size100 {
	font-size: 1em;
}
.size120 {
	font-size: 1.2em;
}
.size150 {
	font-size: 1.5em;
}
.size200 {
	font-size: 2em;
}
#attachmentBtn i {
	font-size: 20px;
}
div.serverText div.uploading {
	background: #F3F3F3;
	padding: 5px;
	border-radius: 10px;
	color: black;
}
div.uploading img, div.uploaded img {
	max-width: 64px;
	max-height: 64px;
	transition-duration: 0.3s;
	cursor: pointer;
}
div.uploaded img {
	padding: 5px;
	border: 1px solid #CCC;
	border-radius: 16px;
}

div.uploading img.maximized {
	max-width: 128px;
	max-height: 128px;
	transition-duration: 0.3s;
}
div.progressUploadContainer {
	border: 1px solid #DDD;
	width: 200px;
	height: 10px;
	display: inline-block;
	margin-left: 30px;
	border-radius: 5px;
	max-width: 50%;
}
div.progressUploadContainer div.progressUpload {
	background-color: #999999;
	width: 0;
	height: 100%;
}
#downloadMenu {
	display: none;
	position: absolute;
	background-color: white;
	top: 0;
	color: #444;
	font-size: 1.1em;
	z-index: 2000;
	padding: 0;
	border: 1px solid #EEE;
}
.downloadItem {
	cursor: pointer;
	padding: 5px;
	font-size: .8em;
	color: #000!important;
}
.downloadItem a {
	color: #000!important;
}
.downloadItem:hover {
	background-color: #CCC;
}
div.bootbox-body img {
	max-width: 100%;
	max-height: 100%;
}
#drawIframe {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
}
#lightBoxDraw {
	display: none;
	position: absolute;
	background: rgba(0, 0, 0, 1);
	width: 100%;
	top: 0;
	height: 100%;
	z-index: 9999;
	align-items: center;
	justify-content: center;
}
#screenSharingVideoContainer {
	display: none;
}
#screenSharingVideo {
	width: 100%;
	max-height: 260px;
	border: 3px solid red;
}
.jsPanel-content.jsPanel-content-nofooter {
	border-top: none!important;
}
div.menuUserItem[data-action="quit"] {
	border-bottom: none;
}
#professorContainer {
	display: flex;
}
#professorContainer button {
	flex-grow: 1;
	margin: 1px;
}
#lockRoomBtn[data-value="locked"] {
	background: red;
	color:white;
}

#lockRoomBtn[data-value="locked"] i.fa:before {
	content: "\f023";
}
#lockRoomBtn[data-value="unlocked"] i.fa:before {
	content: "\f09c";
}
.numberWatchers {
	font-size: 0.7em;
	background: lightgray;
	padding: 0px 5px;
	border-radius: 80%;
	height: 13px;
	margin: 2px 2px;
}
.watchingMeContainer {
	float: right;
	display: flex;
}
#professonScreenSharingBtn.active {
	background: red;
	color:white;
}
div.uploadFileDiv {
	border: 1px solid #EEE;
}
#backgroundsContainer {
	max-width: 330px;
	left: 20%;
	bottom: 90px;
	right: auto;
}
.headerPrivateBtn, .headerWhisperBtn {
	float: right;
	font-size: 0.5em;
	border: none;
	margin: 0 2px;
	padding: 0 2px;
	color: #666;
}
.headerPrivateBtn:hover, .headerWhisperBtn:hover {
	color: #000;
}
.jsPanel-title .headerPrivateBtn, .jsPanel-title .headerWhisperBtn {
	position: relative;
	border:1px solid #DDD;
	top: 2px;
	height: 15px;
}

.jsPanel-title .headerPrivateBtn:hover, .jsPanel-title .headerWhisperBtn:hover {
	border:1px solid #888;
}
#tabsAndFooter {
	height: 100%;
}
div.jsPanel[data-btnmaximize="enabled"] .jsPanel-headerbar {
	display: flex;

}
#userList .userItem {
	display: flex;
	padding: 0;
	margin: 0;
	height: 44px;
}
.userLabel {
	position: relative;
	left: 0;
	flex-grow: 1;
	margin-left: 10px;
	max-width: inherit;
}
.keyboard {
	left: 22px;
	right: initial;
	bottom: -5px;
}

.webcamBtn {
	width: auto;
	cursor: pointer;
	height: auto;
	position: relative;
	border: 1px solid #EEE;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 6px;
	border-radius: 8px;
	margin:4px
}
.numberWatchers {
	background: #f20d47;
	color: #FFF;
	position: absolute;
	left: 32px;
	top: -6px;
	border: 1px solid #333;
}
.eye-icon .fa-eye.isWatching {
	color:red!important;
}
#userList .userAvatarContainer {
	position: relative;
}
.webcamMessage {
	position: absolute;
	top: 50%;
	color: white;
	text-shadow: 2px 2px 2px #000;
	display: none;
}

.webcamSwfContainer:hover button.privateChatRequestedBtn,
.webcamSwfContainer:hover button.sendTipBtn {
	display: block;
}
.webcamSwfContainer:hover .webcamMessage {
	display: block;
}

.webcamSwfContainer button.privateChatRequestedBtn,
.webcamSwfContainer button.sendTipBtn {
	display: none;
	position: absolute;
	right: 0;
	border: 0;
	font-size: 0.9em;
	border:none;
	font-weight: bold;
	top: 26px;
}
.jsPanel-content .webcamSwfContainer button.privateChatRequestedBtn,
.jsPanel-content .webcamSwfContainer button.sendTipBtn {
	top: 35px;
}

.webcamSwfContainer button.privateChatRequestedBtn {
	left: 0;
}
div.buttonProfil {
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

div.youtubeMessage img.userItem {
	background-color: white;
	border-radius: 64px;
	margin: 0 6px;
}
.youtubeMessage {
	width: 480px;
	max-width: 100%!important;
	height: 240px;
}


div.btnYoutubeCloseMessageContainer {
	text-align: left;
	margin: 4px 41px;
}
#tabs div.serverText.youtubeText {
	background: initial!important;
}
#tabs div.youtubeMessage .flex-property.message-info {
	height: 100%;
}

/*.myMessage + .myMessage div.name-time{
    display : none!important
}

.myMessage + .myMessage .userItem {
    display: none;
}
.myMessage + .myMessage .timeStamp {
    display:none;
}
.myMessage + .myMessage  .message {
    margin: 0;
}
.myMessage + .myMessage  div.content {
    margin: 0!important;
    padding: 0!important;
}*/
button.btnYoutubeLock {
	border-radius: 25px;
}
button.btnYoutubeLock.selected {
	background-color:#ff0142;
	border-color:#ff0142;
}
button.deleteRoom {
	border: 0;
	background: red;
	color:white;
}
div.privateWindowHasWebcamContainer {
	display: flex;
	width: 50%;
	height: calc(100% - 83px);
	float: right;
	flex-direction: column;
	margin-top: 38px;
}
div.windowChat.privateWindowHasWebcam {
	width: 50%;
}
div.privateWindowHisWebcamContainer, div.privateWindowMyWebcamContainer {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50%;
	background: black;
	color: white;
	font-size: 1.5em;
	flex-direction: column;
	padding: 3px;
}

div.privateWindowMyWebcamContainer button#webcamMinimizeBtn {
	display: none!important;
}

div.privateWindowMyWebcamContainer button#webcamConfigBtn {
	display: none!important;
}
div.privateWindowMyWebcamContainer #myWebcamDiv {
	position: relative!important;
}
#userList div[data-status='privateWebcam'] div.webcamBtn  {
	display: none;
}
#myWebcamContainer div.btn-group label {
	font-size: 0.8em;
}
#selectDestinationTextChat {
	border-radius: 7px;
	border: 1px solid #ccc;
	font-size: 0.95em;
}
.header-custom-btns span {
	padding-right: 10px;
}
#pushTalkBtn.red {
	color:red;
}
#usersContainer2 div.header-btn-wrap {
	margin: 0;
	padding: 0;
}


#usersContainer2 div.header-btn-wrap div.toggle {
	width: calc(100% - 15px)!important;
	border-radius: 0;
}
#footer div.textarea-icons-wrapper.flex-property {
	width: initial;
}
.fa.fa-arrows-alt:before {
	content: "\f31e";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
}
.webcamFooter {
	display: flex;
}
div.userAutoComplete span {
	padding: 5px;
}
div.zabuto_calendar .table tr th, div.zabuto_calendar .table tr td {
	background: initial!important;
}
#myAvatar.displayMyProfileInUserList {
	order: 0;
}

#myAvatar.displayMyProfileInUserList .userAvatar {
	padding: 3px;
	border: 0;
	margin-right: 20px;
}
.ham-dropdown-menu.displayMyProfileInUserList .hamburger-header {
	height: auto;
}
.ham-dropdown-menu.displayMyProfileInUserList {
	height: auto;
}
#groupText {
	display: flex;
}
#groupText.grouped {
	width: 0;
	overflow: hidden;
	transition-duration: 0.3s;
}
#groupText.grouped.revealed {
	width: 135px;
	transition-duration: 0.3s;
}
#webradioPlayerContainer{
	display: flex;
	justify-items: center;
	align-items: center;
}


#usersContainer.toggleWidth .filtergender {
	display: none;
}
#usersContainer .filtergender {
	display: flex;
}

/*#usersContainer.toggleWidth  #myWebcamDiv {
	display: none;
}*/
#usersContainer #myWebcamDiv {
	display: flex;
	justify-content: center;
	align-items: center;
}

#usersContainer.toggleWidth .watchingMeContainer {
	display: none;
}

#usersContainer .watchingMeContainer {
	display: initial;
}

#usersContainer.toggleWidth #userHeader {
	display: none;
}

#usersContainer.toggleWidth #userHeader {
	display: initial;
}
.ps.ps--active-x>.ps__scrollbar-x-rail, .ps.ps--active-y>.ps__scrollbar-y-rail {
	z-index: 1;
}
#cannotInteract {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 9999;
}
.emojiContainer {
	position: absolute;
	right: 0;
	bottom: 30px;
	background: #FFF;
	display: none;
}
.videoContainer {
	display: flex;
	align-items: center;
}
.videoContainer::after {
	content:"\f04b";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	width: 100%;
	text-align: center;
	pointer-events: none;
	font-size: 2em;
	color:white;
	text-shadow: 2px 2px #000;
	transition-duration: 0.2s;
	left: 50%;
}
.videoContainer:hover::after {
	font-size: 3em;
	transition-duration: 0.2s;
}
#userList div.userMessagesHistory {
	font-size: 0.6em;
	padding: 2px;
	border-bottom: 1px solid rgba(200,200,200,0.2);
}
#userList div.userMessagesHistory:last-child {
	border-bottom: none;
}
button.userMessagesHistoryClearBtn {
	width: 100%;
	border: none;
	font-size: 0.8em;
	background: black;
	color: white;
}
div.voteToMute {
	display: inline;
	cursor: pointer;
}
.serverMessage.gift {
	background: rgba(100,255,100,0.2);
	padding: 2px;
	color: white;
	font-size: 1.1em;
}
.serverMessage.gift img {
	width: 25px;
	margin-left: 9px;
}
div.userBadge {
	display: flex;
	justify-content: center;
	align-items: center;
}
div.userBadge img {
	cursor: initial;
	max-width: 24px;
	max-height: 24px;
}
#webradioPlayerContainer>div {
	width: 100%!important;
}
.userDataContainer {
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 20px;
}
div.gift.tab-pane {
	position: initial;
}
div.badgeDescription {
	font-size: 0.65em;
}
.badgeItem {
	text-align: center;
	font-size: 0.9em;
	cursor: pointer;
	padding: 15px;
	max-width: 150px;
}
.badgeItem:hover {
	background: #EEE;
}
#usersContainer.window.leftLayout.toggleWidth #userHeader {
	display: none;
}

#usersContainer.window.leftLayout.toggleWidth ul.nav {
	display:none!important;
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	#send-msg-btn, #sendTipBtn {
		position: relative;
		top: -75px;
	}
}
div.drawHeader button {
	margin: 5px;
}
#userHeader label[for="whoWatchesMeCheckbox"] {
	cursor: pointer;
}

.jsPanel-headerbar {
	/*position: absolute;*/
	top: 0;
	width: 100%;
	z-index: 1;
	background: inherit;
	/*display: none;*/
}
#fullMainContainer.tab #webcamsContainer .webcamContainer:hover div.webcamHeader {
	position: absolute;
}

/*
.webcamContainer.visible .jsPanel-headerbar {
	display: block;
}
 */

#myWebcamDraggable .jsPanel-headerbar {
	display: flex;
	position:initial;
	top:initial;
	z-index: initial;
}
div.jsPanel:hover .jsPanel-headerbar {
	display: flex;
}
div.webcamHeader {
	z-index: 1;
	position: absolute;
	width: 100%;
}
div.webcamHeader.webcamHideHeaderOnHover {
	display: none;
}
#webcamsContainer .webcamContainer:hover div.webcamHeader {
	display: block;
}
#webcamsContainer .webcamContainer:active div.webcamHeader {
	display: block;
}
#usersContainer li div.watchingMeContainer {
	font-size: 11px;
	position: absolute;
	right: 10px;
}
#usersContainer li div.watchingMeContainer label{
	margin-bottom: 0;
}

#usersContainer li #watchAtMe {
	font-size: 1em;
}
@media (max-width: 850px) {
	#usersContainer #userHeader {
		display: none;
	}
	#usersContainer.toggleWidth #userHeader {
		display: initial;
	}
	#chatContainer {
		height: 100%;
	}

	#usersContainer.leftLayout #slide_block {
		left: initial;
		opacity: 1;
	}

	#loginModal .modal-footer .btn {
		font-size: 0.8em;
		display: block;
		width: 100%;
		margin: 5px;
	}

	div.webcamHeader {
		z-index: 1;
		display: block;
		position: absolute;
		width: 100%;
	}

	.jsPanel-headerbar {
		display: flex;
	}
	.headerPrivateBtn, .headerWhisperBtn {
		display: none;
	}
	.downloadItem {
		font-size: 1em;
	}
	#fullMainContainer.tab #webcamsContainer {
		max-width: calc(100vw);
	}
	#privateOrMentionContainer #texteCaption {
		top:30px;
	}

	#usersContainer.leftLayout #slide_block {
		left:initial;
	}
	#usersContainer.leftLayout #slide_block.opened {
		left: 0;
		transform: rotate(180deg);
	}
	#usersContainer.leftLayout {
		order: initial;
	}
	#usersContainer.leftLayout.toggleWidth #usersContainer2{
		display: initial;
	}
	#usersContainer.leftLayout.toggleWidth ul {
		/*display: flex!important;*/
	}


	.chat-input-icons {
		margin: 0 4px !important;
	}

	div.allowFlash {
		display: none;
	}
}

@media (max-width: 510px) {
	#chatInputContainer div.emojionearea-editor {
		width: calc(100% - 95px);
	}
	#usersContainer {
		border-left: 1px solid #EEE;
	}

	#userHeader #myVideo {
		max-height: 110px;
	}

	#loginModal .modal-footer button {
		width: 22%;
		padding: 8px 0px;
		margin: 1px;
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 0.85em;
	}

	#myWebcamDiv video {
		max-height: inherit;
	}


	#userList, #friensdList {
		height: calc(100% - 50px);
	}

	.menuUserItem {
		font-size: 1.05em;
	}

	.open #chatContainer {
		padding-right: 0;
	}

	#tabs {
		padding-bottom: 83px;
		position: relative;
	}

	#usersContainer #myWebcamDiv {
		max-height: 110px !important;
		height: 110px !important;
	}

	div.allowFlash {
		display: none;
	}

	.close {
		font-size: 19px;
	}

	.myUsername {
		display: none;
	}

	#loginGuestModal .form-group .radio-inline {
		padding-left: 0;
	}

	#loginGuestModal .form-group .radio-inline label {
		padding: 5px 10px;
		box-sizing: border-box;
		text-align: center;
		transition: border .3s ease-in-out;
	}

	#loginGuestModal .form-group .radio-inline label span {
		display: block;
	}

	#loginGuestModal .form-group .radio-inline input,
	#loginGuestModal .form-group .radio-inline label::after,
	#loginGuestModal .form-group .radio-inline label::before {
		display: none;
	}

	#loginGuestModal .form-group .radio-inline input:checked + label {
		border: 1px solid #01a8ff;
		border-radius: 3px;
	}

	.filtergender .checkbox {
		padding-left: 0;
	}

	.filtergender .checkbox input[type="checkbox"] + label::before,
	.filtergender .checkbox input[type="checkbox"] + label::after,
	.filtergender .checkbox input[type="checkbox"],
	.filtergender .checkbox input[type="radio"] {
		display: none;
	}

	.filtergender .checkbox input[type="checkbox"] + label {
		opacity: .4;
		transition: opacity .3s ease-in-out;
	}

	.filtergender .checkbox input[type="checkbox"]:checked + label {
		opacity: 1;
	}

	div.colorPicker-palette {
		width: calc(100% - 10px) !important;
		left: 0 !important;
		right: 0 !important;
		margin: auto;
	}

	div.colorPicker-palette div.colorPicker-swatch {
		width: 30px;
		height: 30px;
	}

	div.colorPicker-palette .colorPicker_hexWrap {
		display: none;
	}

	div.colorPicker-palette div.colorPicker_hexWrap input,
	div.colorPicker-palette div.colorPicker_hexWrap label {
		font-size: 100%;
	}

	div.colorPicker-palette div.colorPicker_hexWrap input {
		color: #000;
		padding: 3px 5px;
		box-sizing: border-box;
	}


	#smileyContainer .smileyItem {
		width: 44px;
		padding: 8px;
	}

	#smileyContainer .smileyItem img {
		width: 100%;
		height: auto;
	}

	#smileyContainer #smileysHeader #closeSmileysBtn {
		font-size: 20px;
	}

	/*    #pushTalkButtonContainer,#pushToTalkFreeHandContainer {
			display: none;
		}*/

	#chatInput {
		font-size: 1em;
		padding: 5px;
		margin-top: 4px;
	}

	#userMenu {
		left: 35px;
	}

	ul.zg-ul-select.active {
		position: absolute;
		left: 0;
		right: 0;
		top: 53px;
		z-index: 9999;
		background: #fff;
	}

	.selected--zg-ul-select .close {
		display: none;
	}

	#selected--zg-ul-select.active,
	.nav > li > a {
		padding: 5px;
	}


	#selected--zg-ul-select {
		box-sizing: border-box;
		color: #111;
	}

	#selected--zg-ul-select.active {
		border: 1px solid #ddd;
		border-radius: 3px;
		box-shadow: 0 0 2px #aaa;
	}

	.privateRequested div {
		display: block;
	}

	.privateRequested .btn {
		width: auto !important;
		display: inline-block;
		color: #fff;
	}

	.privateRequested .btn .fa {
		padding: 0;
		display: inline-block;
	}

	#quitBtn {
		display: none;
	}

	#myWebcamContainer .btn-group .btn .fa {
		padding: 0;
	}

	.modal-footer .fa {
		padding: 0;
	}

	.modal-footer .btn-primary {
		color: #fff;
	}
}


@media only screen and (max-width: 991px) {
	#roomsBtn,
	.header-btn-wrap {
		flex-direction: column;
	}

	#roomsBtn img {
		margin: 0 1px !important;
	}

	.buttons-subnames span {
		display: none !important;
	}

	#searchRoomContainer span {
		display: inline !important;
		position: relative;
		top: 5px;
	}

	.svg-header-icons {
		margin-bottom: 5px;
		margin-right: 0;
	}
}

@media only screen and (max-width: 768px) {
	/*#send-msg-btn {
		display: none;
	}*/
	.message-info,
	.private-message {
		max-width: calc(100% - 110px) !important;
	}

	#header .group-btns {
		flex: unset;
	}

	#chatInputContainer {
		width: 100% !important;
	}

	#footer {
		flex-direction: column;
		padding: 10px !important;
		bottom: auto;
	}

	#chatContainer {
		padding: 0 10px !important;
	}


	#send-msg-btn {
		z-index: 100;
		margin-right: 5px;
		height: 30px;
		position: absolute;
		top: 45px;
		right: 10px;
	}

	#footer .emojionearea.emojionearea-inline {
		padding-right: 100px;
	}

	#header {
		align-items: center;
		padding: 0 5px !important;
	}

	.header-chat-logo {
		height: 35px;
		margin-right: 5px !important;
	}

	.userAvatar {
		width: 40px;
		height: 40px;
		border: 1px solid #efefef;
	}

	.header-btn-wrap {
		margin: 0 5px;
		padding-right: 10px;
	}

	.myUsername {
		margin-right: 10px;
	}

	.ham-dropdown-menu {
		height: 70px;
	}

	#roomsBtn {
		padding-right: 3px !important;
		margin-right: 2px !important;
		padding-left: 3px !important;
		line-height: 16px !important;
	}
	#customExit {
		margin-right: 7px !important;
		width: 53px;
		font-size: 10px;
		line-height: 23px !important;
		min-height: 23px;
	}

	.open #chatContainer {
		padding: 0 10px !important;
	}

	.open #footer {
		width: 100%;
	}

	.table-bordered > tbody > tr > td {
		padding: 3px 10px !important;
	}


	.addPrivateMessage::after {
		width: 60px;
		height: 20px;
		padding-top: 2px;
	}
}
img.screenshot {
	max-height: 40%;
}
/*#webradioPlayer {
    width: 105px;
    position: absolute;
    right: 0px;
    top: 11px;
    background: none;
    outline: none;
}*/
#webradioPlayer {
	width: 100%;
	background: none;
	outline: none;
	height: 40px;
}
audio::-internal-media-controls-download-button {
	display:none;
}

#usersContainer #myWebcamDiv #myVideo {
	height: inherit;
}
#usersContainer.leftLayout {
	display: flex;
	flex-direction: column;
}


@media only screen and (max-width: 510px) {
	#underlineDiv, #italicDiv {
		display: none;
	}

	.chat-input-icons {
		margin: 0 8px !important;
	}

	#smileyContainer {
		bottom: 125px !important;
		left: 0 !important;
		right: 0 !important;
		margin: auto !important;
		width: 90% !important;
		max-width: 90% !important;
	}

	.filtergender .checkbox input[type="checkbox"] + label::before,
	.filtergender .checkbox input[type="checkbox"] + label::after,
	.filtergender .checkbox input[type="checkbox"],
	.filtergender .checkbox input[type="radio"] {
		display: block !important;
	}

	#backgroundsContainer {
		bottom: 115px !important;
		left: 0 !important;
		right: 0 !important;
		width: 90% !important;
		margin: auto !important;
		max-width: 90% !important;
	}

	#header .status {
		margin: 0;
	}

	.message-info,
	.private-message {
		max-width: calc(100% - 60px) !important;
		width: calc(100% - 60px) !important;
	}
}
@media only screen and (max-width: 850px) {
	#webradioPlayer {
		top: -43px;
		width: 102px;
	}

	#quitBtn {
		width: 10px !important;
		padding: 5px 25px;
	}

	#tabs {
		padding-bottom: 0;
	}

}

@media only screen and (max-width: 510px) {
	#backgroundsContainer {
		right: 15px;
	}

	ul.zg-ul-select li.active {
		border: 0 solid #ddd;
		border-radius: 3px;
		box-shadow: 0 0 0 #aaa;
		display: block;
	}


	#header .btn-danger .fa,
	#header .btn-danger .glyphicon,
	#header .btn-primary .fa,
	#header .btn-primary .glyphicon,
	#header .btn-success .fa,
	#header .btn-success .glyphicon {
		padding-left: 2px;
	}


	.dark-modal .modal-body {
		padding: 10px;
	}

	.dark-modal .table-bordered > tbody > tr > td,
	.table-bordered > tbody > tr > th,
	.table-bordered > tfoot > tr > td,
	.table-bordered > tfoot > tr > th,
	.table-bordered > thead > tr > td,
	.table-bordered > thead > tr > th {
		font-size: 12px;
	}

	#roomsModal .btn {
		min-width: 80px;
		padding: 0;
		min-height: 29px !important;
	}
}

@media only screen and (max-width: 400px) {
	#header .btn {
		margin: 0 3px !important;
	}

	#myAvatar {
		padding: 0 6px;
	}

	.group-btns {
		margin-left: -10px;
	}

	#backgroundsContainer {
		right: 15px;
	}
}

@media only screen and (max-width: 480px) {
	#backgroundsContainer {
		right: 15px;
	}

	.webcamContainer.noFloat .webcamSwfContainer {
		max-height: 140px !important;
		height: 120px !important;
		max-width: 210px;
	}

	#webcamsContainer {
		overflow-y: auto;
	}

	.webcamContainer {
		max-width: 100%;
	}

	.webcamSwfContainer {
		max-width: 100%;
	}

	.header-chat-logo {
		display: none;
	}

	#chatContainer {
		height: calc(100% - 120px);
	}

	.group-btns {
		margin-left: -10px;
	}

	.message .userItem {
		font-size: .9em;
	}

	div.message div.content:before {
		display: none;
	}

	div.message div.content {
		padding: 8px 10px;
	}


	#header {
		height: 57px;
	}

	#chatContainer {
		padding-top: 2px;
	}

	.emojionearea.focused {
		border: 1px solid #efefef;
		box-shadow: none;
	}

	.message-info {
		width: 85%;
	}

	#tabs {
	}

	.mobile-text-lobby {
		display: none;
	}

	.nav-tabs > li.active > a,
	.nav-tabs > li.active > a:focus,
	.nav-tabs > li.active > a:hover {
		padding: 3px 5px;
		margin-top: 5px;
	}
}

#webcamsContainer.noFloat {
	display: flex !important;
	justify-content: flex-start;
	align-items: center;
	/* padding: 2px 20px 8px 5px; */
}

.webcamContainer.noFloat {
	margin: 5px 0px 10px !important;
	margin-right: 10px !important;
	box-shadow: 1px 1px 13px -2px #2d2d2d5c;
	border: 0px solid black;
}


.webcamContainer.noFloat .webcamHeader {

}

/* width */
#webcamsContainer::-webkit-scrollbar {
	width: 10px;
	height: 9px;

}

/* Handle */
#webcamsContainer::-webkit-scrollbar-thumb {
	border-radius: 25px !important;
}

/* Handle on hover */
#webcamsContainer::-webkit-scrollbar-thumb:hover {
	background: #50ce85;
}

.radio.radio-inline img {
	margin-top: -10px;
}

#loginGuestModal .form-group {
	margin-bottom: 30px !important;
}

#usersContainer2 {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow-y: hidden;
}

.boldClasse {
	font-weight: bold !important;
}

.italicClasse {
	font-style: italic !important;
}

.underlineClasse {
	text-decoration: underline !important;
}

#userMenu div[data-action="reportUser"]:hover,
#userMenu div[data-action="mute"]:hover,
#userMenu div[data-action="kick"]:hover,
#userMenu div[data-action="ban"]:hover,
#userMenu div[data-action="mutePrison"]:hover,
#userMenu div[data-action="deleteUserMessages"]:hover,
#userMenu div[data-action="deleteMessage"]:hover,
#userMenu div[data-action="promoteUser"]:hover {
	background-color: #ac2925;
	color: #FFF!important;
}

.gutter {
	background-color: #eee;
	background-repeat: no-repeat;
	background-position: 50%;
}

.gutter.gutter-vertical {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
	cursor: ns-resize;
}

.gutter.gutter-horizontal {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');
	cursor: ew-resize;
}

#usersContainer.conference .tab-content {
	height: 100% !important;
}

#tableRoomBody2 td {
	font-size: 12px;
	line-height: 18px;
}