@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
body {
	background-color:#004050;
}

.wrapper {
	margin-left:auto;
	margin-right:auto;
}

.badge-panel {
	margin-left:10px;
	background-color: #fff;
}

.badge-success {
	color: #3fb618;
}

.badge-primary {
	color: #007fff;
}

.featurette-divider {
	border-color: #111 !important;
}

.white, .white a {
  color: #fff;
}
.red-bg { background-color: #d85237 !important; }
.yellow-bg { background-color: #e3a21a !important; }
.purple-bg { background-color: #603cba !important; }
.green-bg { background-color: #01a31c !important; }
.gray-bg { background-color: #f5f5f5 !important; color: #333333 !important; }
.yellow-color { color: #e3a21a !important; }
.purple-color { color: #603cba !important;}
.green-color { color: #01a31c !important; }
.red-color { color: #d85237 !important;}
.gray-color { color: #333333 !important;}
.blue-color { color: #007fff !important;}

blockquote.purple-color {
	border-left: 5px solid #603cba;
}
blockquote.red-color {
	border-left: 5px solid #d85237;
}
blockquote.blue-color {
	border-left: 5px solid #007fff;
}

ul.online {
	list-style:none;
}
ul.online li span {
	margin-right:15px;
}
ul.online li {
	margin-bottom:20px;
	padding:0;
}
ul.online li:last-of-type {
	margin-bottom: 0;
}
ul, li { margin: 0; padding: 0; }

#informer > div:last-of-type {
	margin-bottom: 0;
}

.form-signin { padding: 15px; }
.refresh-button { padding: 15px 49px !important; }
.login-wrapper { max-width: 330px; margin: 0 auto; }
.panel { border: 0 !important; }

/*.btn-publish { padding: 10px 26px 10px 28px; float:left;}
.btn-unpublish { padding: 10px 16px 10px 18px; float:left;}
.btn-leave { padding: 10px 33px; float:right;}*/

#messages {  max-height:200px; overflow-x: hidden; /*overflow-y: scroll;*/}
.btn-chat-submit { padding: 11px 18px; }
.video-notice.alert { font-size:12px !important; padding:5px; margin-bottom:5px; }
#notification {  max-height:113px; overflow-x: hidden; /*overflow-y: scroll;*/  }
.mt-20 { margin-top: 20px }

/** Room **/
.vc-wrapper {
	display: grid;
	gap: 21px;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: auto 1fr;
	margin-bottom: 21px;
}
.vc-subscriber {
	grid-column: 1/2;
	grid-row: 1/3;
	z-index: 1;
}
.vc-publisher {
	grid-column: 2/3;
	grid-row: 1/2;
	z-index: 2;
}
.vc-notifications {
	grid-column: 2/3;
	grid-row: 2/3;
}

#publishVideo {
	display: none;
}

.vc-publisher-buttons {
	display: flex;
}
.vc-publisher-buttons button {
	flex: 1;
}

.vc-publisher-buttons .vc-btn-icon {
	display: none;
}
.vc-publisher-buttons .vc-btn-text {
	display: inline;
}
.vc-publisher-buttons .vc-btn-icon {
	width: 18px;
	height: 18px;
	background-size: cover;
	margin: 0 auto;
}

.vc-btn-leave {
	background: center no-repeat url("../images/icon-leave.png");
}
.vc-btn-unpublish {
	background: center no-repeat url("../images/icon-hide.png");
}
.vc-btn-publish {
	background: center no-repeat url("../images/icon-eye.png");
}

.vc-notifications > .panel {
	margin-bottom: 0;
}

.panel-video {
	margin-bottom: 0;
}

.panel-video .panel-body {
	padding: 0;
}

@media (max-width: 992px) {
	.vc-wrapper {
		grid-template-columns: 1fr;
	}
	.vc-notifications, .vc-subscriber, .vc-publisher {
		grid-column: 1;
	}
	.vc-notifications {
		grid-row: 1;
	}
	.vc-subscriber {
		grid-row: 2;
	}
	.vc-publisher {
		grid-row: 2;
		align-self: end;
		justify-self: end;
		margin: 21px;
	}
	#publisher {
		width: 128px;
		height: 128px;
	}

	.vc-publisher-buttons button {
		padding: 3px 5px;
	}

	.vc-publisher-buttons .vc-btn-icon {
		display: block;
	}
	.vc-publisher-buttons .vc-btn-text {
		display: none;
	}
	.vc-publisher > .panel > .panel-heading {
		padding: 3px 5px;
	}
	.vc-publisher > .panel > .panel-heading > .panel-title {
		font-size: 12px;
	}
}