@font-face {
	font-family: 'Segoe UI Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Regular'), url('/fonts/SegoeUI.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Italic'), url('/fonts/SegoeUIItalic.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Bold'), url('/fonts/SegoeUIBold.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI Bold Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Bold Italic'),
		url('/fonts/SegoeUIBoldItalic.woff') format('woff');
}
body{
	font-family: 'Montserrat', sans-serif;
}
textarea{-moz-appearance:none;outline:0px none transparent;resize: none;}
textarea:focus, input:focus{outline: 0;}
*:focus {outline: 0;}
.mainWrapper {
	display: flex;
	flex-direction: row;
}
.leftContainer {
	width: 70%;
	display: flex;
	flex-direction: column;
	background: #000;
	height: calc(100vh - 0px);
    overflow: scroll;
    overflow-x: hidden;
}
.rightContainer {
	width: 30%;
	display: flex;
	flex-direction: column;
	background: #111111;
	border-left: 1px solid #222222;
}
header {
	width: 100%;
	background-color: #000;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	height: 72px;
	align-items: center;
	justify-content: space-between;
	padding: 15px 20px;
	border-bottom: 1px solid #222;
}
.brandingContainer {
	display: inherit;
}
.logo {
	display: inherit;
	align-items: center;
	justify-content: flex-start;
	padding-right: 20px;
	margin-right: 20px;
	border-right: 2px solid rgba(112, 112, 112, 0.5);
	max-width: 170px;
}
.logo img {
	width: 100%;
}
.meetingTitle .avatar {
	position: relative;
	width: 43px;
	height: 43px;
}
.meetingTitle {
	display: inherit;
	align-items: center;
}
.meetingTitle h2 {
	font-family: 'Segoe UI Regular';
	color: #ffcb74;
	font-size: 20px;
	margin: 0px;
	line-height: 24px;
	text-align: left;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	margin-left: 15px;
}
span.hostSubtittleName {
	color: #fff;
	font-size: 12px;
	line-height: 12px;
	font-weight: 400;
	opacity: 0.8;
}
.toolsOptions ul.actionsButtons {
	list-style: none;
	display: flex;
	flex-direction: row;
	padding: 0px;
	margin: 0px;
}
.toolsOptions ul.actionsButtons li {
	margin: 0 6px 0 0;
}
.toolsOptions ul.actionsButtons li:last-child {
	margin: 0 0px 0 0;
}
.recordingStatus {
	display: inherit;
	align-items: center;
	margin-left: 20px;
}
span.recording {
	font-size: 14px;
	color: #fff;
	font-weight: 500;
	border: 2px solid #ffffff;
	border-radius: 3px;
	padding: 0px 5px 0 20px;
	display: flex;
	align-items: center;
	line-height: 18px;
	position: relative;
	background: #000000;
	height: 22px;
}
span.recording::before {
	content: '';
	height: 12px;
	width: 12px;
	background-color: #E41C1C;
	display: block;
	position: absolute;
	top: 50%;
	left: 4px;
	border-radius: 100px;
	transform: translateY(-50%);
}
.broadCastArea .layout1 {
	overflow: hidden;
}
.broadCastArea .layout1 img {
	width: 100%;
	/* filter: blur(10px); */
	border-radius: 10px;
}
.fade.in {
	opacity: 1;
}
.rightContainer ul.nav.nav-pills {
	background-color: #191919;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	border-bottom: 1px solid #222222;
	position: fixed;
    width: 30%;
    z-index: 6;
}
.rightContainer ul.nav.nav-pills li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border-right: 1px solid #222222;
}
.rightContainer ul.nav.nav-pills li.active {
	background-color: #111111;
}
.rightContainer ul.nav.nav-pills li a {
	border: none;
	border-radius: 0px;
	font-size: 0.9rem;
	font-weight: 600;
	height: 28px;
	color: #fff;
	margin-right: 0px;
	background: none;
	padding: 0 12px;
	border-bottom: 3px solid transparent;
	text-decoration: none;
}
.rightContainer ul.nav.nav-pills li.active a {
	border-image-slice: 1;
	border-width: 3px;
	border-image-source: linear-gradient(
		50deg,
		rgba(255, 120, 0, 1) 0%,
		rgba(166, 61, 255, 1) 50%,
		rgba(0, 198, 255, 1)
	);
}
.actionsButtons li a {
	width: 38px;
	height: 38px;
	background: #3c3c3c;
	border-radius: 100px;
	text-align: center;
	line-height: 38px;
	display: block;
	color: #feca74;
}
.toolsOptions ul.actionsButtons li:nth-child(5) a {
	background: #f34459;
	color: #fff;
}
.toolsOptions ul.actionsButtons li:nth-child(6) a {
	background: #0abe51;
	color: #fff;
}
.toolsOptions ul.actionsButtons li:nth-child(7) a {
	background: #a63bd3;
	color: #fff;
}
.toolsOptions ul.actionsButtons li:nth-child(8) a {
	background: #dddddd;
	color: #2c2c2c;
}
.guests-hosts {
	padding: 72px 0px 0px 0px;
	overflow: scroll;
    overflow-x: hidden;
    height: calc(100vh - 0px);
}
.msg-inner-tab,
.message-tabs {
	padding: 35px 15px;
}
.heading-tabs h3 {
	color: #fff;
	font-size: 18px;
	position: relative;
	font-weight: bold;
}
.heading-tabs h3:before {
	content: '';
	width: 75%;
	height: 1px;
	background: #242424;
	position: absolute;
	right: 0px;
	top: 54%;
}
#Waiting .heading-tabs h3:before{
	width: 52%;
}
.heading-tabs {
	padding: 15px 0 15px 0;
}
.list-unstyled {
	padding-left: 0;
	list-style: none;
}
.avatar {
	position: relative;
	width: 70px;
	height: 70px;
}
.avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rounded-circle {
	border-radius: 50% !important;
}
.pd-l-15 {
	padding-left: 15px;
}
.pd-l-12 {
	padding-left: 12px;
}
.media-body {
    flex: 1;
   
}
.media-body h5.name {
	margin: 0 0 5px 0px;
	line-height: 16px;
}
.media {
	display: flex;
	align-items: flex-start;
}
.guest-list .media-body h5 a {
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1rem;
}
.guest-list h6.tx-color-03 {
	color: #888888;
	font-size: 14px;
}
.guest-list h5.name span {
	float: right;
	color: #ffc830;
	font-size: 14px;
	padding: 0;
	font-weight: 400;
}
span.sharingpoints ul {
	display: flex;
}
span.guest-email {
	display: flex;
	justify-content: space-between;
	margin: 4px 0 0 0;
	color: #10b0f4;
}
span.sharingpoints ul li {
	list-style: none;
}
span.sharingpoints ul li a {
	width: 22px;
	height: 22px;
	background: #707070;
	color: #000;
	margin: 0 0px 0 6px;
	padding: 0px;
	display: block;
	border-radius: 8px;
	text-align: center;
	line-height: 22px;
	font-size: 14px;
}
.guest-list .media + .media {
	margin-top: 1px;
}
.guest-list .speaking {
	color: #02ff00 !important;
}
.tabContainer ul.nav li a {
	color: #fff;
	padding: 14px 24px 14px 24px;
	font-size: 0.9rem;
	text-decoration: none;
	background: #191919;
	margin: 0px;
	height: 64px;
	min-width: 120px;
	display: flex;
	align-items: center;
	justify-content: center;
	
}
.tabContainer ul.nav li {
	border-left: 1px solid #222222;
	position: relative;
}
.tabContainer ul {
	background: #191919;
	height: 64px;
	display: flex;
	align-items: center;
}
.tabContainer ul.nav li a:hover {
	background: #111111;
}
.viewers-img {
	width: 80px;
	height: 80px;
	display: block;
	margin: 0px auto;
}
.viewer-tabs {
	padding: 30px 20px;
	display: flex;
	justify-content: center;
	flex-direction: row;
}
.viewer-tabs .tab-pane.active {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
}
.viewers-item {
	height: 157px;
	background: #1d1d1d;
	padding: 10px 5px;
	border-radius: 10px;
	margin: 5px;
	float: left;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: calc(12.5% - 10px);
}
.viewers-item:nth-child(8) {
	margin: 5px;
	width: calc(12.5% - 10px);
}
.viewers-img img {
	width: 100%;
	height: 100%;
	margin: 0px auto;
}
.viewers-item h6 {
	text-align: center;
	color: #f6f6f6;
	padding: 10px 0 0 0;
	margin-top: 10px;
}
.tabContainer ul.nav li.active a {
	background: #111111;
}
.tabContainer ul.nav li:first-child {
	border: none;
}
#Hosts .nav li a,
#Messages .nav li a {
	border: none;
}
.rightContainer #Hosts ul.nav.nav-pills li.active,
.rightContainer #Messages ul.nav.nav-pills li.active {
	background-color: rgb(60 60 60);
}
.marvel-device .screen {
	text-align: left;
}
.status-bar:after {
	content: '';
	display: table;
	clear: both;
}

.status-bar div {
	float: right;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	margin: 0 0 0 8px;
	font-weight: 600;
}
/* Chat */
.chat {
	height: calc(100% - 69px);
}
.chat-container {
	height: 100%;
}
/* User Bar */
.user-bar {
	padding: 8px 10px;
	color: #fff;
	height: auto;
	border-bottom: 1px solid #222;
}
.user-bar:after {
	content: '';
	display: table;
	clear: both;
}
.user-bar div {
	float: left;
}
.user-bar .actions {
	float: right;
	margin: 5px 0 0 10px;
}
.user-bar .actions img {
	height: 28px;
}
.user-bar .actions.more {
	margin: 0 12px 0 20px;
}
.user-bar .actions.attachment {
	margin: 0 0 0 20px;
}
.user-bar .actions.attachment i {
	display: block;
	/*   transform: rotate(-45deg); */
}
.user-bar .avatar {
	margin: 0 0 0 0px;
	width: 45px;
	height: 45px;
}
.user-bar .avatar img {
	border-radius: 50%;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	display: block;
	width: 100%;
}
.user-bar .name {
	font-size: 16px;
	font-weight: 600;
	text-overflow: ellipsis;
	letter-spacing: 0.3px;
	margin: 0 0 0 8px;
	overflow: hidden;
	white-space: nowrap;
	width: 110px;
	line-height: 20px;
}
.user-bar .status {
	display: block;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0;
}
/* Conversation */
.conversation {
	height: calc(100% - 12px);
	position: relative;
	background: #111;
	z-index: 0;
}
.conversation ::-webkit-scrollbar {
	transition: all 0.5s;
	width: 5px;
	height: 1px;
	z-index: 10;
}
.conversation ::-webkit-scrollbar-track {
	background: transparent;
}
.conversation ::-webkit-scrollbar-thumb {
	background: #b3ada7;
}

.conversation .conversation-container {
	box-shadow: inset 0 10px 10px -10px #000000;
	overflow-x: hidden !important;
	padding: 10px;
	margin-bottom: 19px;
	overflow: scroll;
	height: calc(100vh - 320px);
}
.conversation .conversation-container:after {
	content: '';
	display: table;
	clear: both;
}
/* Messages */
.message {
	color: #fff;
	border: 2px solid #313237;
	background: #313237;
	clear: both;
	line-height: 22px;
	font-size: 14px;
	padding: 8px 12px;
	position: relative;
	max-width: 85%;
	margin: 16px 0 8px;
	word-wrap: break-word;
	z-index: -1;
}
span.send-icon {
    padding: 0 0px 0 0px;
    width: 24px;
    height: 24px;
    background: #111;
    border-radius: 100px;
    margin: 0 1px 0 5px;
    line-height: 23px;
    font-size: 12px;
}
.metadata .time {
	color: rgba(0, 0, 0, 0.45);
	font-size: 11px;
	display: inline-block;
}
.metadata .tick {
	display: inline-block;
	margin-left: 2px;
	position: relative;
	top: 4px;
	height: 16px;
	width: 16px;
}
.metadata .tick svg {
	position: absolute;
	transition: 0.5s ease-in-out;
}
.metadata .tick svg:first-child {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: perspective(800px) rotateY(180deg);
	transform: perspective(800px) rotateY(180deg);
}
.metadata .tick svg:last-child {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: perspective(800px) rotateY(0deg);
	transform: perspective(800px) rotateY(0deg);
}
.metadata .tick-animation svg:first-child {
	-webkit-transform: perspective(800px) rotateY(0);
	transform: perspective(800px) rotateY(0);
}
.metadata .tick-animation svg:last-child {
	-webkit-transform: perspective(800px) rotateY(-179.9deg);
	transform: perspective(800px) rotateY(-179.9deg);
}
.message:first-child {
	margin: 16px 0 8px;
}
.message.received {
	background: #313237;
	border-radius: 0px 5px 5px 5px;
	border: 2px solid #313237;
	float: left;
}
.message.received .metadata {
	padding: 0 0 0 16px;
}
.message.received:after {
	border-width: 0px 10px 10px 0;
	border-color: transparent #fff transparent transparent;
	top: 0;
	left: -10px;
}
.message.sent {
	border-radius: 8px 0px 8px 8px;
	float: right;
}
/* .message.sent:after {
	border-width: 0px 0 10px 10px;
	border-color: transparent transparent transparent #e1ffc7;
	top: 0;
	right: -10px;
} */
/* Compose */
.conversation-compose {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	overflow: hidden;
	height: 52px;
	width: 100%;
	z-index: 2;
	margin: 0px 0px;
}
.conversation-compose div,
.conversation-compose input {
	background: #000;
	height: 100%;
}
.conversation-compose .emoji {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 0% 0 0 0%;
	flex: 0 0 auto;
	margin-right: 0px;
	width: 38px;
	height: 52px;
}
.conversation-compose .input-msg {
	border: 0;
	flex: 1 1 auto;
	font-size: 14px;
	margin: 0;
	outline: none;
	min-width: 50px;
	height: 52px;
	border-radius: 4px 0px 0px 4px;
	padding: 0px 0 0 10px;
	color: #f1ffda;
}
.conversation-compose .photo {
	flex: 0 0 auto;
	border-radius: 0 30px 30px 0;
	text-align: center;
	width: auto;
	display: flex;
	padding-right: 6px;
	align-items: center;
}

.conversation-compose .photo img {
	display: block;
	color: #7d8488;
	font-size: 24px;
	transform: translate(-50%, -50%);
	position: relative;
	top: 50%;
	margin-left: 10px;
}
	.conversation-compose .send {
    background: transparent;
    border: 0;
    cursor: pointer;
    flex: 1 0 auto;
    margin-right: 8px;
    padding: 10px;
    position: relative;
    outline: none;
    margin-left: 0.5rem;
    background-image: linear-gradient( 100deg, rgba(255, 120, 0, 1) 0%, rgba(166, 61, 255, 1) 50%, rgba(0, 198, 255, 1) );
    height: 35px;
    color: #fff;
    align-items: center;
    display: flex;
    border-radius: 4px;
	font-weight: 600;
}

.conversation-compose .send .circle {
	background: #008a7c;
	border-radius: 50%;
	color: #fff;
	position: relative;
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.conversation-compose .send .circle i {
	font-size: 24px;
	margin-left: 1px;
}
.message-host-chat {
	background: #11111100;
	padding: 14px 12px;
	margin: 10px 0px;
	/* height: 350px; */
    overflow: scroll;
    overflow-x: hidden;
}
span.message-host-chat {
	padding: 0 6px 0 0;
	font-weight: 600;
	font-size: 16px;
}
.color-host-1 {
	color: rgba(255, 120, 0, 1);
}
.color-host-2 {
	color: rgba(166, 61, 255, 1);
}
.color-host-3 {
	color: rgba(0, 198, 255, 1);
}
.color-host-4 {
	color: #337382;
}
.color-host-5 {
	color: #5c16c9;
}
.message-host-chat p {
	margin-bottom: 8px;
	color: #fff;
	font-size: 14px;
}
.wrapper {
	font-size: 14px;
}
.StepProgress {
	position: relative;
	padding: 40px 30px 30px 80px;
	background: #111;
	list-style: none;
}
.StepProgress::before {
	display: inline-block;
	content: '';
	position: absolute;
	top: 0;
	left: 15px;
	width: 10px;
	height: 100%;
}
.StepProgress-item {
	position: relative;
	counter-increment: list;
	color: #fff;
	padding: 0 0 0 12px;
}
.StepProgress-item span {
	color: #dddddd82;
	font-size: 14px;
	margin-bottom: 6px;
	display: block;
}

.StepProgress-item p {
	font-size: 14px;
	font-weight: 400;
	color: #ffffffb3;
}
.StepProgress-item:not(:last-child) {
	padding-bottom: 20px;
}
.StepProgress-item::before {
	display: inline-block;
	content: '';
	position: absolute;
	left: -28px;
	height: 100%;
	width: 10px;
	border-left: 2px solid #383838;
	top: 20px;
}
.StepProgress-item::after {
	content: '';
	font-family: 'Font Awesome 5 Pro';
	background: rgb(47 46 46);
	padding: 4px 12px;
	font-size: 12px !important;
	color: #fff;
	border-radius: 100px;
	width: 30px;
	text-align: center;
	margin-left: 8px;
	font-weight: bold;
	display: flex;
	height: 30px;
	align-items: center;
	justify-content: center;
	left: -50px;
	z-index: 4;
	top: 0px;
	position: absolute;
	line-height: 20px;
}
.StepProgress-item.is-done::before {
	border-left: 2px solid #383838;
}
.StepProgress-item.is-done::after {
	content: '\f00c';
	font-size: 10px;
	color: #fff;
	text-align: center;
	background-color: #0abe51;
	font-family: 'Font Awesome 5 Pro';
}
.StepProgress-item.current::before {
	border-left: 2px solid #383838;
}
.StepProgress-item.current::after {
	content: '';
	padding-top: 1px;
	width: 38px;
	height: 38px;
	top: -4px;
	left: -54px;
	text-align: center;
	color: green;
	border: 2px solid #fff;
	/* background-image: linear-gradient( 100deg, rgba(255, 120, 0, 1) 0%, rgba(166, 61, 255, 1) 50%, rgba(0, 198, 255, 1) );  */
	background-color: #f89931;
}
.StepProgress strong {
	display: block;
	font-size: 16px;
	font-weight: 600;
}
.StepProgress li:last-child {
	margin-top: 20px;
}
.StepProgress-item:last-child::before {
	border-left: 2px solid #38383800;
	content: '';
	position: absolute;
	top: 0;
	height: 100%;
	width: 10px;
}
.StepProgress-item.is-done.current strong {
	color: #ff8468;
}
.rightContainer ul.nav.nav-pills.buttonTab li {
	background-color: transparent !important;
}
.rightContainer ul.nav.nav-pills.buttonTab li a {
	border: none;
	padding: 6px 20px;
	border-radius: 0.25rem;
	font-size: 1rem;
	font-weight: 600;
	height: 40px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	background: #141414;
}
.rightContainer ul.nav.nav-pills.buttonTab li.active a {
	border: none;
	padding: 6px 20px;
	border-radius: 0.25rem;
	font-size: 0.9rem;
	font-weight: 600;
	height: 40px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 90%;
	background: #616161;
}
.rightContainer ul.nav.nav-pills.buttonTab li {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	border-right: none;
	background: transparent;
}
.rightContainer ul.nav.nav-pills.buttonTab li a .count-bubble {
	background: rgba(255, 255, 255, 0.1);
	line-height: 22px;
	font-size: 12px;
	color: #fff;
	border-radius: 100px;
	width: 22px;
	height:22px;
	text-align: center;
	margin-left: 8px;
	font-weight: 600;
	border: none;
}
.rightContainer ul.nav.nav-pills.buttonTab li.active a .count-bubble {
	background: #111111;
}
/* Scrollbar Styling */
.scroll-UI::-webkit-scrollbar {
    width: 6px;
}
.scroll-UI::-webkit-scrollbar-track {
    background-color: #111;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.scroll-UI::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #222222; 
}
.scroll-UI::-webkit-scrollbar-thumb:hover {
	background-image: linear-gradient( 100deg, rgba(255, 120, 0, 1) 0%, rgba(166, 61, 255, 1) 50%, rgba(0, 198, 255, 1) ); 
}
form.conversation-compose {
    position: fixed;
    bottom: 20px;
	width: 27.5%;
}
div#Hostsinner {
    position: relative;
}
.message-host-chat, .conversation-container {
    height: calc(100vh - 200px);
	padding: 40px 0 0 0px;
}
.videomember {
    width: 48%;
    height: auto;
    background: #222;
    border-radius: 10px;
    margin: 8px 8px;
	position: relative;
}
.broadCastArea {
    padding: 20px 10px;
}
.video-ivite-time {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    color: #fff;
    padding: 20px 0px;
	position: absolute;
}
span.invite i {
    width: 30px;
    height: 30px;
    background: #181818;
    padding: 5px;
    display: block;
    float: left;
    border-radius: 100px;
    text-align: center;
    line-height: 20px;
    margin: 0 6px 0 0;
    color: #fff;
    font-weight: normal;
}
span.invite {
    color: #ffcb69;
    font-weight: bold;
}
.video-ivite-time .time {
    border: 1px solid #f34459;
    border-radius: 30px;
    padding: 2px 10px 2px 10px;
    font-weight: bold;
}
span.time-circle {
    width: 10px;
    height: 10px;
    background: #f34459;
    float: left;
    margin: 7px 3px 0 0;
    border-radius: 100px;
}
.broadCastArea .layout1{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
.videomember span {
    width: auto;
    position: absolute;
    bottom: 30px;
    background: #1111118c;
    color: #fff;
    z-index: 1;
    right: 20px;
    border-radius: 2px;
    padding: 5px 12px;
    font-weight: bold;
}
span.speaker-off {
    position: absolute;
    top: 20px;
    left: 10px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    padding: 0px;
}
.video-ivite-time a {
    text-decoration: none;
	position: relative;
}
span.total-participate {
    /* position: absolute;
    top: -10px; */
    width: auto;
    left: 176px;
    color: #0abe51;
    border: 2px solid #0abe51;
    border-radius: 4px;
    text-align: center;
	padding: 2px 7px;
    margin: 0 0px 0 5px;
}
.download a:hover {
    background: #111111;
    color: #fff;
    border-color: #222222;
}
@media screen and (max-width:1289px){
	.mainWrapper{
		flex-direction: column;
	}
	.leftContainer, .rightContainer{
		width: 100%;
	}
	form.conversation-compose{
		position: static !important;
		width: 100% !important;
	}
	.message-tabs .except-or-not {
		margin-bottom: 2%;
	}
}
@media screen and (max-width:959px){
	header{
		flex-direction: column;
		height: auto;
		padding: 20px 20px;
	}
	.brandingContainer{
		padding-bottom: 20px;
	}
	.viewers-item:nth-child(8){
		width: calc(50% - 10px);
	}
	.viewers-item{
		width: calc(50% - 10px);
	}
	.tabContainer ul.nav li a{
		height: 64px;
    	min-width: 83px;
		padding: 4px 4px 4px 4px;
	}
	.videomember {
		width: 48%;
		margin: 8px 8px;
	}
	.hands .main-inner-hands, .documents .documents-inner, .tickers .viewers-item {
		width: calc(50% - 10px);
		margin: 6px 5px;
	}
	.tabContainer ul.nav li {
		border-bottom: 1px solid #222222;
		width: 50%;
		border-left:none;
	}
	.tabContainer ul{
		height:auto;
		justify-content: space-between;
	}
	.tabContainer .tickers .viewers-item{
		width: calc(50% - 10px);
		margin: 6px 5px;
	}
	form.conversation-compose{
		position: static !important;
		width: 100% !important;
	}
}
@media screen and (max-width: 835px){
	.videomember {
		width: 100%;
    	margin: 8px 11px;
	}
	form.conversation-compose{
		position: static !important;
		width: 100% !important;
	}
	
}
@media screen and (max-width: 480px){
.tabContainer ul.nav li a {
    height: 64px;
    min-width: 60px;
    padding: 4px 4px 4px 4px;
    font-size: 14px;
}
.brandingContainer {
    padding-bottom: 20px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.actionsButtons li a{
	width: 30px;
    height: 30px;
	line-height: 30px;
}
.msg-inner-tab, .message-tabs {
    padding: 15px 15px;
}
.videomember {
	width: 100%;
	margin: 8px 8px;
}

}
@media screen and (max-width: 320px){
	.brandingContainer {
	 flex-direction: column;
	 position: relative;
}
span.recording {
    position: absolute;
    right: 0px;
    top: 40px;
}
.tabContainer ul{
	background: #191919;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
}
.emoji i {
    font-size: 24px;
    color: #757575;
}
.except-or-not {
    margin-bottom: 10%;
    display: flex;
    justify-content: flex-end;
}
.except-or-not button:last-child {
    background: #111111;
    border: 1px solid #707070;
    border-radius: 5px;
    font-weight: normal;
}
.except-or-not button {
    border: none;
    padding:5px 12px;
    margin: 0px 4px;
    color: rgb(255, 255, 255);
    background: rgb(97, 97, 97);
    font-weight: normal;
    border-radius: 5px;
}
.except-or-not button i {
    margin: 0px 0px 0px 6px;
    width: 24px;
    height: 24px;
    background: #111111;
    border-radius: 100px;
    line-height: 24px;
    font-size: 14px;
}
.except-or-not button:last-child i{
	background: #707070;
}
#Waiting .media-body {
    display: flex;
    justify-content: space-between;
}
span.waiting-col-in-out ul {display: flex;flex-direction: column;justify-content: flex-end;align-items: flex-end;}
span.waiting-col-in-out ul li {list-style: none;text-decoration: none;padding: 0px;}
span.waiting-col-in-out ul li a {width: 30px;height: 30px;background: #616161;display: block;border-radius: 100px;margin: 2px 0 3px 0;text-align: center;line-height: 30px;color: #fff;font-size: 16px;}
.except-or-not button:hover {background-image: linear-gradient(  50deg,  rgba(255, 120, 0, 1) 0%,  rgba(166, 61, 255, 1) 50%,  rgba(0, 198, 255, 1) );}
span.waiting-col-in-out ul li:last-child a {border-color: #707070;border: 1px solid;background: #111;}
span.waiting-col-in-out ul li:last-child a {
    border-color: #707070;
    border: 1px solid;
    background: #111;
}
.guest-list li:hover {background: #191919;}
.guest-list li.media{
	padding: 5px;
	border-bottom: 1px solid #1a1a1a;
	cursor: pointer;
}
span.waiting-col-in-out ul li a:hover{
	background-image: linear-gradient(  50deg,  rgba(255, 120, 0, 1) 0%,  rgba(166, 61, 255, 1) 50%,  rgba(0, 198, 255, 1) );
}
.waiting-col {
    margin-top: 4px;
}
.hands .viewers-item:hover{
	background: #1676F5;
	cursor: pointer;
}
.hands .viewers-item h6 {padding: 15px 0 10px 0;margin: 0px;}
.main-inner-hands {width: calc(16.5% - 10px); margin: 0px 5px;}
.hands .viewers-item{padding: 0px !important; margin: 0px;display: block;width: 100%;height: auto;}
.hands .sharingpoints ul {display: flex;height: auto;align-items: center;margin: 10px 0 15px 0;padding: 0px;background: none;justify-content: center;}
.hands .sharingpoints ul li a {margin: 5px 2px;width: 28px;height: 28px;border-radius: 100px;line-height: 28px;background: #787878;}
.hands .viewers-item:hover .sharingpoints ul li a {background: #73ADF9;}
.hands .viewers-item:hover .sharingpoints ul li a:hover {color: #000; background:#fff;}
.main-inner-hands strong {width: 100%;text-align: center;display: block;color: #fff;font-weight: normal;font-size: 12px;margin: 10px 0 0 0 !important;clear: both;}
.clear {clear: both;}
.upload-new-document {width: 70px;height: 70px;background: #222222;border-radius: 100px;text-align: center;line-height: 70px;color: #fff;font-size: 30px;}
.documents-inner figure {position: relative;}
.documents-inner figure span {position: absolute;bottom: 30px;left: -20px;background: #FF725E;color: #fff;padding: 0px 6px;border-radius: 3px;text-transform: uppercase;font-weight: bold;}
.documents-inner {
    width: calc(16.5% - 10px);
}
.documents-inner {width: calc(16.5% - 10px); height: 210px;}
.download a {border: 1px solid #707070;border-radius: 5px;padding: 5px 9px;color: #707070;text-decoration: none; text-transform: uppercase;font-weight: bold;font-size: 12px;}
.download span {margin: 0 0px 0 8px;color: #ebebeb; cursor: pointer;}
.documents-inner h6 {padding: 0px;}
.tickers .viewers-item {width: calc(24% - 1px);padding: 12px; height: auto !important;display: block;margin: 5px 5px;}
.tickers-logo {display: flex;justify-content: space-between;}
.tickers-logo a {background: #F7931A;display: flex;border-radius: 30px;padding: 2px 9px;color: #fff;align-items: center;text-decoration: none;font-weight:700;}
.tickers-logo span i {font-size: 26px;margin: 3px 5px 0 0;}
.percent-tickers {color: #fff;text-align: center;line-height: 20px;}
span.percent {color: #3DD598;}
.tickersportfolio {display: flex;justify-content: space-between;padding: 30px 0px 0px 0px;align-items: center;}
.portfolio-text h6 {margin: 0px;padding: 0px;color: #fff;text-align: left;}
.tickersportfolio-graph img {width: 100%;}
.tickersportfolio-graph {width: 50%;}
.portfolio-text h6 strong {font-size: 18px;}
.tickers .viewers-item:nth-child(2) .tickers-logo a {background: #345d9d;}
.tickers .viewers-item:nth-child(3) .tickers-logo a {background: #26a17b;}
.tickers .viewers-item:nth-child(4) .tickers-logo a {background: #ffffff;color:#333333; font-weight:700;}
.tickers-logo span {width: 33%;}
span.count-tbs-num {width: 18px;height: 18px;background: #DE0000;display: block;border-radius: 100px;text-align: center;line-height: 18px;padding: 0px;color: #fff;position: absolute;top: 4px;right: 5px; display:none;}
.qa-section .inner-qa p {color: #fff;}
.qa-section .inner-qa .textarea {width: 100%; position: relative;border-radius: 5px;border: 1px solid #222222;}
.qa-section .inner-qa .textarea textarea {width: 83%;height: 90px;padding: 11px 0 0 9px;position: relative;background: none;color:#f5f5f5;border: none;}
.inner-qa {flex-wrap: wrap;flex-direction: row;width: 100%;}
.button-main-qa {width: 120px;position: absolute;bottom: 20px;z-index: 9999;right: 10px;}
.button-main-qa button {padding: 5px 15px;text-transform: capitalize;font-weight: 600; display: flex;align-items: center;background: linear-gradient(100deg, rgb(255, 120, 0) 0%, rgb(166, 61, 255) 50%, rgb(0, 198, 255)) transparent;
    border: none;
    color: #fff;}
.button-main-qa i {
    color: #fff;
    padding: 8px 0px;
    margin: 0 10px 0 -13px;
    float: left;
}
.button-main-qa button span {width: 24px;float: left;}
.button-main-qa button span img {width: 66%;}
.message-appeard {padding: 15px;width: 100%;display: block; border-bottom: 1px solid #222222;background: #111;margin: 6px 0px;}
.message-appeard .message-member {width: 34px;height: 34px;position: inherit;float: left;margin: 0 10px 0 0;}
.message-appeard .message-member p {margin: 0 6px 0 0;font-size: 14px;display: block;}
.message-appeard .message-member img {margin: 0 6px 0 0;width: 100%;}
.faceemoji-time {display: flex;justify-content: space-between;margin: 30px 0 0 0;}
.faceemoji-time span i {color: #fff;}
.just-member-name {background: #5231F4;border-radius: 100px;color: #fff;font-size: 12px;text-align: center;line-height: 34px;}
.documents .documents-inner:first-child {background: none;}
li.active span.count-tbs-num {display: block;}
.member-name {padding: 8px 0 0 0;overflow: hidden;}
.Video__Section__Area {width: 100%;height: 500px; position: relative;}
.Calling__Person {width: 112px;height: 112px;border: 1px solid #2A2A2A;border-radius: 100px;display: block;margin: 0px auto;}
.Video__Section__Area .Calling__Person img {
	border-radius: 100px;width: 90px;height: 90px;display: block;margin: 10px auto;
	border-width: 4px;
	border-style: solid;position: relative;
	border: 2px solid transparent;
	background: linear-gradient(orange, violet);
	padding: 2px;
  }
  .Calling__Person {
	width: 222px;
	height: 222px;
	border: 1px solid #2A2A2A;
	border-radius: 100%;
	display: block;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	
}
  .Video__Section__Area .Calling__Person img {
	border-radius: 100px;width: 172px;height: 172px;display: block;margin: 24px auto;
	border-width: 4px;
	border-style: solid;position: relative;
	border: 2px solid transparent;
	background: linear-gradient(orange, violet);
	padding: 2px;
  }
.Video__Point__Footer {position: absolute;bottom: 0px;display: flex;
    justify-content: space-between;
    width: 100%;
	padding: 10px 10px;
}
.Video__Point__Footer ul li {list-style: none;text-decoration: none;}
.Video__Point__Footer ul {display: flex;padding: 0px;}
.Video__Point__Footer ul li {padding: 0 4px 0 4px;}
.Video__Point__Footer ul li a {width: 30px;height: 30px;background: #181818;display: block;border-radius: 100px;text-align: center;line-height: 30px;color: #fff;}
.call_off{
	background: #0d90f9 !important;
}
.call_off i.fa-microphone-alt-slash{
	display: none;
}
i.fa-microphone{
	display: none;
}
.call_off i.fa-microphone{
	display: block;
	font-size: 14px;
    line-height: 30px;
}
.Video__Point__Center__Point {
    width: 155px;
}
.Video__Point__Footer ul li a i {font-size: 12px;}
.Video__Point__Center__Point ul li:nth-child(2) a {background: #1676F5;}
.Video__Point__Center__Point ul li:last-child a {color: #F56254;background: #fff;}
.Video__Section__Area__Main {padding: 0;}
.Video__Section__Area__Main .Calling__Person__Big_Image img {border-radius: 0px;height: 100%;}
.Two__Users {display: flex;}
.Two__Users .Calling__Person__Big_Image {width: 50%;height: auto;}
.Two__Users .Calling__Person__Big_Image img {height: 500px;}
.Two__Users .Calling__Person__Big_Image:last-child {position: absolute;right: 0px;}
.Two__Users .Calling__Person__Big_Image:last-child .video-ivite-time {position: absolute;top: 0px;}
.Two__Users .Calling__Person__Big_Image:last-child .video-ivite-time {justify-content: flex-end;}
.Two__Users .Calling__Person__Big_Image:last-child .video-ivite-time span {display: flex;align-items: center;padding: 0 6px 0 0;}
.Four__Users {display: flex;justify-content: flex-start;width: 100%;flex-wrap: wrap;}
.Four__Users span.invite i{opacity: 0.5; filter: alpha(opacity=50); zoom: 1;}
.Four__Users .Calling__Person__Big_Image {width: 50%;height: 250px;position: relative;}
.Four__Users .video-ivite-time {position: absolute;top: 0px;}
.Four__Users .video-ivite-time {display: flex;justify-content: flex-end;}
.Four__Users .video-ivite-time span {padding: 0 4px 0 4px; font-weight: bold;}
.Audio__Main__Inner {position: relative;width: 50%;height: 250px;border-left: 1px solid #222;
    border-bottom: 1px solid #222;}
.Audio__Main__Inner .video-ivite-time {justify-content: flex-end;}
.Audio__Main__Inner .video-ivite-time span {padding: 0 8px 0 4px;font-size: 12px; display: flex; align-items: center;}   
.Audio__Main__User {width: 100%;display: flex;flex-wrap: wrap;}
.Two__Users span.invite i {opacity: 0.5;  /* Opacity for Modern Browsers */
    filter: alpha(opacity=50);  /* Opacity for IE8 and lower */
    zoom: 1;
}
.Four__Users .Calling__Person__Big_Image:last-child .video-ivite-time span.invite i {background: #1676F5;opacity: 100;}
.Four__Users .Calling__Person__Big_Image:last-child .video-ivite-time span {color: #727272;font-weight: bold;}
.Audio__Main__User .Audio__Main__Inner .Calling__Person {width: 150px;height: 150px;}
.Audio__Main__User .Audio__Main__Inner .Calling__Person img {width: 100px;height: 100px;}
.Audio__Main__User .Audio__Main__Inner:last-child span.invite i {
    background: #1676F5 !important;
}
.Hand__Raised {width: 100%;position: absolute;bottom: 20px;left: 20px;}
.Hand__Raised i {color: #fff;}
.Hand__Raised span {font-size: 12px;padding: 0px 0 0 4px;color: #fff;}
.Audio__Main__User_Twelve {width: 100%; overflow: scroll;height: 440px; overflow-x: hidden;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner {width: 25%;height: 240px;position: relative; border-right: 1px solid #222;
    border-bottom: 1px solid #222; float: left;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner .Calling__Person {width: 150px;height: 150px;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner .Calling__Person img {width: 100px;height: 100px;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner .video-ivite-time {position: absolute;bottom: 0px;padding: 0px;justify-content: flex-start;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner .video-ivite-time span {font-size: 12px;display: flex;align-items: center;}
.Audio__Main__User_Twelve .Audio__Main__User_Twelve_Inner .video-ivite-time {padding: 5px 13px;}
#Guests {
    padding-top: 13%;
}
ul.dashboard {width: 280px;margin: 20px;padding: 10px;background: #201f1f;border: 1px solid #343232;border-radius: 5px;}
ul.dashboard li a {color: #fff;font-size: 14px;text-decoration: none;padding: 4px 0px;display: block;}
ul.dashboard li {margin: 5px 0px;}
ul.dashboard li{list-style: none;}
ul.dashboard li a:hover {color: #c9bd0b;}
.logos {display: block;width: 100%;margin: 24px;}
.toolsOptions {
    display: none;
}
.host-msg .chat-texts{
	overflow:auto;
  }
.host-msg .text{
	display:flex;
	padding:0.7rem;
	align-items:start;
	flex-wrap: wrap;
	width: 100%;
}
  @keyframes fade-in{
	from{
	   opacity:0;    
	}
	to{
	  opacity:1;
	}
  }
  
  .host-msg .text.sent{
	flex-direction:row-reverse;
  }
  .host-msg .text.sent .profile-pic{
	margin-right:0;
	margin-left:0.7rem;
  }
  .host-msg .text.sent .text-content{
	border-radius:20px 0px 20px 20px;
  }
  .host-msg .text.sent .text-content{
	background: rgb(97 97 97);
	color:white;
  }
  .host-msg .profile-pic{
	min-width:50px;
	height:50px;
	border-radius:50%;
	margin-right:0.7rem;
	display: flex;
    align-items: center;
  }
  .host-msg .profile-pic img{
	height:100%;
	object-fit:cover;
	border-radius:100%;
	margin: 0px 9px 0 
  }
  .host-msg .text-content{
	background: #3c3c3c;
	padding:1.5rem;
	border-radius:0px 20px 20px 20px;
	font-size:0.8rem;
	line-height:130%;
	letter-spacing:0.5px;
	color: #fff;
	margin: 10px 0 2px 0;
  }
  .host-msg .timestamp{
	display:block;
	font-size:0.7rem;
	color:#fff;  
	margin-top:0.2rem;
  }
  .host-msg .text.sent .timestamp{
	color:white;
  }
  .host-msg .text-content h5{
	letter-spacing:0;
	font-size:0.9rem;
	margin-bottom:0.2rem;
  }
  .host-msg .send-message{
	width:100%;
	padding:1rem;
	display:flex;
	align-items:center;
	justify-content:space-between;
  }
  .host-msg .message-text{
	width:80%;
	background:white;
	padding:1rem 1.2rem;
	border-radius:100vw;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-basis:80%;
	background:hsl(220, 20%, 94%);
  }
  .host-msg .smiley, 
  .host-msg .attachment{
	width:20px;
	height:20px;
	display:grid;
	place-items:center;
  }
  .host-msg .message-text input{
	padding:0.5rem;
	border:none;
	background:transparent;
  }
  .host-msg .message-text input:focus{
	outline:none;
  }
  .host-msg button{
	border:none;
	background:transparent;
	width:60px;
	height:60px;
	font-size:2rem;
	border-radius:50%;
	background:#04b4a9;
	color:white;
	display:grid;
	place-items:center;
	transition:300ms ease;
  }
  .host-msg button:hover{
	background:black;
	cursor:pointer;
}
.separater-span-msg {
    overflow: hidden;
    text-align: center;
   font-size: 12px;
   color: #fff;
   padding: 10px 10px;
}
.separater-span-msg:before,
.separater-span-msg:after {
    background-color: #222;
    content: "";
    display: inline-block;
    height: 1px;
    position: relative;
    vertical-align: middle;
    width: 50%;
}
.separater-span-msg:before {
    right: 0.5em;
    margin-left: -50%;
}
.separater-span-msg:after {
    left: 0.5em;
    margin-right: -50%;
} 
.video-point-right-point .Setting__Drop a {
	background: none !important;color: #fff;padding: 14px 0px 16px 90px;width: 100%;display: block;text-align: left;line-height: 0px;height: auto; position: relative;}
.video-point-right-point .Setting__Drop {width: 280px; border: none; padding: 15px 0px;}
.Setting__Drop a.dropdown-item span {position: absolute;top: 3px;left: 34px;}
.Setting__Drop a.dropdown-item span i {font-size: 20px;color: #5F6368;}
.Separator__Setting__Drop {
    width: 100%;
    height: 1px;
    background: #ccc;
	margin: 15px 0px;
}.video-point-right-point .Setting__Drop a {
	background: none !important;color: #000; padding: 14px 0px 16px 50px;width: 100%;display: block;text-align: left;line-height: 0px;height: auto; position: relative;}
.video-point-right-point .Setting__Drop {width: 280px; border: none; padding: 15px 0px; background: rgb(34 34 34);}
.Setting__Drop a.dropdown-item span {position: absolute;top: 3px;left: 34px;}
.Setting__Drop a.dropdown-item span i {font-size: 20px;color: #5F6368;}
.Separator__Setting__Drop {
    width: 100%;
    height: 1px;
    background: #ccc;
	margin: 15px 0px;
}
   .video-point-right-point .Setting__Drop a {
	background: none !important;color: #fff;padding: 14px 0px 16px 90px;width: 100%;display: block;text-align: left;line-height: 0px;height: auto; position: relative;}
.video-point-right-point .Setting__Drop {width: 326px; border: none; padding: 15px 0px;}
.Setting__Drop a.dropdown-item span {position: absolute;top: 3px;left: 34px;}
.Setting__Drop a.dropdown-item span i {font-size: 20px;color: rgb(254 202 116);}
.Separator__Setting__Drop {
    width: 100%;
    height: 1px;
    background: #323131;
	margin: 15px 0px;
}
.video-point-right-point a.dropdown-toggle:after {
    display: none;
}