.center-in-parent {
	position: absolute;
	top: 50%;
	left: 50%;
}
input[type=text]:not(.form-control), input[type=password]:not(.form-control), textarea:not(.form-control) {
	padding: 3px;
	border: 2px solid lightgray;
}
input[type=button]:not(.btn), input[type=submit]:not(.btn) {
	padding: 3px;
}
.page-button {
	padding: 3px 5px 3px 5px;
	border-radius: 3px;
	cursor: pointer;
}
.page-button:hover {
	background-color: lightgray;
}
.page-button.selected {
	background-color: black;
	color: white;
}
input.gray-button {
	border: none;
	border-radius: 4px;
	padding: 4px 8px 4px 8px;
	background-color: #555;
	color: white;
	cursor: pointer;
	white-space: nowrap;
}
.gray-button:hover {
	background-color: #333;
}
.dropdown-menu a {
	cursor: pointer;
}
.material-icons {
	vertical-align: middle;
}

.spinner {
	border-style: solid;
	border-color: #ccc;
	border-top-color: #3498db;
	border-radius: 50%;
	animation: spin 2s linear infinite;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}


/* ---- Games ---- */
.side-panel {
	width: 100%;
	height: 40px;
	border-collapse: collapse;
	border-spacing: 0;
}
.side-panel .player-name {
	font-weight: bold;
}
.side-panel .game-status {
	font-weight: bold;
	padding-left: 10px;
}
.side-panel .sit-button {
	width: 80px;
}
.timer {
	display: inline-block;
	padding: 4px 0 3px 0;
	text-align: center;
	width: 40px;
	border-radius: 5px;
	background: gray;
	color: white;
	font-size: 1.2em;
}
.new-game-dialog {
	position: relative;
	width: 280px;
	left: -140px;
	top: -80px;
	padding: 15px;
	background: lightgray;
	border-radius: 5px;
	border: 3px outset;
}
.new-game-dialog hr {
	margin: 10px 0;
	border-color: gray;
}
.new-game-dialog .title {
	font-weight: bold;
}
.new-game-dialog .setting {
	width: 100%;
}
.new-game-dialog .setting .name {
	font-weight: bold;
}
.new-game-dialog .start-message {
	color: red;
	text-align: center;
	margin-top: 15px;
}
.kick-expired-dialog {
	position: relative;
	width: 200px;
	left: -100px;
	top: -20px;
	padding: 15px;
	background: lightgray;
	border-radius: 5px;
	border: 3px outset;
}



/* ---- Components ---- */
.smiley-browser {
	padding: 1em;
}
.smiley-browser .close-button {
	display: inline-block;
	border-radius: 5px;
	background-color: black;
	color: white;
	font-weight: bold;
	padding: 4px 12px 4px 12px;
	cursor: pointer;
}
.smiley-browser .smiley-list {
	text-align: center;
	margin-top: 10px;
}
.smiley-browser .smiley-list > img {
	max-height: 64px;
}


.feedback-dialog textarea {
	width: 100%;
	box-sizing: border-box;
}


.alert-dialog {
	position: fixed;
	left: 20px;
	bottom: 30px;
	max-width: 30%;
	padding: 10px 20px 10px 20px;
	background: #95d641;
	border-radius: 5px;
	font-size: 16px;
}
.alert-dialog img {
	height: 50px;
}


.dropzone {
	background: #eee url(../images/filestack.png) no-repeat center;
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
}
.dz-clickable {
	cursor: crosshair;
}
.dz-default.dz-message {
	font-family: Arial, sans-serif;
	font-size: 28px;
	color: lightgray;
	text-align: center;
	margin: 0 40px;
}
.dz-started .dz-default {
	display: none;
}
.dz-details, .dz-size, .dz-filename, .dz-error-message {
	display: inline;
}
.dz-size:before {
	content: "(";
}
.dz-size:after {
	content: ")";
}
.dz-progress {
	display: inline-block;
	margin-left: 5px;
	width: 150px;
	height: 10px;
	background-color: lightgray;
}
.dz-upload {
	display: inline-block;
	height: 10px;
	background-color: green;
}
.dz-error-message {
	color: red;
}
.dz-success-mark svg, .dz-error-mark svg {
	width: 12px;
	height: 12px;
	padding: 1px;
	border-radius: 50px;
}
.dz-success-mark svg {
	background-color: green;
}
.dz-error-mark svg {
	background-color: red;
}
.dz-image, .dz-complete .dz-progress, .dz-success-mark, .dz-error-mark {
	display: none;
}
.dz-success .dz-success-mark, .dz-error .dz-error-mark {
	display: inline;
}


.user-info-popup {
	position: absolute;
	width: 290px;
	background: white;
	border-radius: 5px;
	border: 1px solid lightgray;
}


.user-profile-dialog table.layout {
	width: 100%;
	border-collapse: separate;
	border-spacing: 1px;
}
.user-profile-dialog table.layout > tbody > tr > td {
	padding: 3px;
}
.user-profile-dialog .black-bar {
	height: 10px;
	background-color: black;
}


.header {
	color: white;
	margin-bottom: 1rem;
}
.header .navi {
	background-color: #1c3f50;
}
.header .navi > .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.header .logo {
	font-size: 2em;
	font-weight: bold;
	font-family: Chewy, cursive;
	letter-spacing: .1em;
	cursor: pointer;
}
.header .dropdown-item {
	cursor: pointer;
}
.header .room-buttons > button {
	margin-left: .5em;
}
.header .room-buttons > button:first-child {
	margin-left: 2.5em;
}
.header .close {
	margin: .5em;
	color: #ccc;
}


.verified-check {
	display: inline-block;
	width: 20px;
	height: 20px;
	background: url(/images/verified-check.png) center/cover;
}


.progress-overlay {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	opacity: .5;
}
.progress-overlay .spinner {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -60px;
	margin-top: -60px;
	width: 120px;
	height: 120px;
	border-width: 16px;
}


.search-suggestion {
	box-sizing: border-box;
	background-color: white;
	border: 1px solid gray;
	box-shadow: 0 5px 15px gray;
}
.search-suggestion li {
	padding: 5px;
}
.search-suggestion li:hover {
	background-color: #ddd;
}


.transfer-coin-dialog .modal-title {
	font-size: 1.25rem;
	font-weight: bold;
}
.transfer-coin-dialog .modal-body > :last-child {
	margin-bottom: 0;
}
.transfer-coin-dialog .layout {
	display: grid;
	grid-template-columns: 120px auto;
	grid-gap: 1rem;
	align-items: center;
	margin-bottom: 1rem;
}
.transfer-coin-dialog .verified-badge {
	height: 12px;
	vertical-align: baseline;
}


.super-footer {
	margin-top: 4em;
	background-color: #002c41;
	color: #ddd;
	font-size: smaller;
	padding: 1em;
}


.flash-component {
	position: relative;
}
.flash-component object {
	display: block;
}


.color-picker .swatch {
	width: 20px;
	height: 20px;
	border: 2px solid white;
	display: inline-block;
	cursor: pointer;
}
.color-picker .swatch.selected {
	border: 2px solid black;
}
.color-picker-spectrum .sp-palette {
	max-width: 200px;
}


.login-method-dialog .social-login-button {
	cursor: pointer;
	display: inline-block;
}
.login-dialog table {
	border-collapse: separate;
	border-spacing: 4px;
}
.register-dialog table {
	border-collapse: separate;
	border-spacing: 5px;
}
.forgot-password-dialog table {
	border-collapse: separate;
	border-spacing: 4px;
}
.reset-password-dialog table {
	border-collapse: separate;
	border-spacing: 4px;
}


.account-page h1 {
	margin-top: .5em;
	font-weight: bold;
}
.account-page .card {
	margin-top: 2em;
}
.account-page .card-header {
	font-weight: bold;
	background-color: rgba(107, 30, 30, 0.839);
	color: white;
}
.account-page .expired {
	display: none;
}
.account-page img.gift {
	max-height: 2em;
}


.buy-nick-page h1 {
	margin-top: .5em;
	font-weight: bold;
}
.buy-nick-page .card {
	margin-top: 2em;
}
.buy-nick-page .card-header {
	font-weight: bold;
	background-color: rgba(107, 30, 30, 0.839);
	color: white;
}
.buy-nick-page .expired {
	color: lightgray;
}
.buy-nick-page .question:not(:first-child) {
	margin-top: 1em;
}


.buy-coin-page h1 {
	margin-top: .5em;
	font-weight: bold;
}
.buy-coin-page .card {
	margin-top: 2em;
}
.buy-coin-page .card-header {
	font-weight: bold;
	background-color: rgba(107, 30, 30, 0.839);
	color: white;
}
.buy-coin-page .card-header .btn-group {
	float: right;
}
.buy-coin-page .btn-stripe {
	width: 250px;
}
.buy-coin-page .accepted-cards {
	margin-top: 5px;
	width: 250px;
	display: flex;
	justify-content: space-around;
}
.buy-coin-page .accepted-cards > img {
	height: 1.2em;
	margin-right: 5px;
}
.buy-coin-page .question:not(:first-child) {
	margin-top: 1em;
}


.sell-coin-page h1 {
	margin-top: .5em;
	font-weight: bold;
}
.sell-coin-page .card {
	margin-top: 2em;
}
.sell-coin-page .card-header {
	font-weight: bold;
	background-color: rgba(107, 30, 30, 0.839);
	color: white;
}
.sell-coin-page .layout {
	display: grid;
	grid-template-columns: max-content auto max-content;
	grid-gap: 15px 10px;
	align-items: center;
	justify-items: start;
}
.sell-coin-page .check-valid {
	color: #aaa;
}
.sell-coin-page .check-valid.valid {
	color: #0a0;
}
.sell-coin-page .question:not(:first-child) {
	margin-top: 1em;
}


.admin-spy-panel table {
	border-collapse: collapse;
}


.admin-bans-panel table.listing th {
	text-align: left;
}


.admin-transfers-panel {
	height: 500px;
	overflow: auto;
}


.pm-history-dialog > .scroller {
	height: 400px;
	overflow: auto;
}


.admin-find-panel .verified-badge {
	height: 12px;
	vertical-align: baseline;
}


.admin-transaction-history-panel .gift {
	height: 2em;
}


.caro {
	position: relative;
	background-image: url("/images/metal-1.jpg");
	padding: 5px 15px;
	border-radius: 5px;
	font-family: Arial;
	box-shadow: 1px 1px 10px black;
}
.caro .board {
	margin: 3px 0;
	background: white;
	width: 100%;
	border: 3px inset #efefef;
	padding: 5px;
}
.caro .new-game-dialog {
	opacity: .9;
}
.caro .inner-shadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	box-shadow: inset 0 0 10px #333;
	pointer-events: none;
}
.caro button {
	box-shadow: 1px 1px 3px #333;
}
.caro .rank-badge {
	height: 24px;
}
.caro .legend {
	opacity: .25;
	font-weight: bold;
	font-size: large;
}


.cchess {
	position: relative;
	background-image: url("/images/wood-1.jpg");
	padding: 5px 15px;
	border: 4px outset #c17f4c;
	box-sizing: border-box;
	font-family: Arial;
	box-shadow: 1px 1px 10px black;
}
.cchess .board {
	margin: 3px 0;
	position: relative;
	border: 4px inset #e48d47;
}
.cchess .piece {
	background-size: 100% 100%;
	position: absolute;
}
.cchess .last-move {
	background: #0888ff;
	border-radius: 5px;
	position: absolute;
}
.cchess button:not(.dropdown-item) {
	box-shadow: 1px 1px 3px #333;
}
.cchess .rank-badge {
	height: 24px;
}

.kick-expired-dialog, .new-game-dialog {
	opacity: .93;
}


.floating-webcam-app .title-bar {
	border: 1px solid #494437;
	border-radius: 8px 8px 0 0;
	background: #817865 url("/images/ui-bg_gloss-wave_45_817865_500x100.png") 50% 50% repeat-x;
	display: flex;
}
.floating-webcam-app .title {
	flex: 1 0 auto;
	padding: .4em;
	cursor: move;
}
.floating-webcam-app .buttons {
	flex: 0 0 auto;
	padding: .4em;
	cursor: pointer;
}
.floating-webcam-app .material-icons {
	font-size: 20px;
}


.webcam-publish-dialog table.layout {
	border-collapse: separate;
	border-spacing: 5px;
}


.webcam-grant-dialog ul.requests > li {
	margin-bottom: 5px;
}
.webcam-grant-dialog div.buttons > input {
	margin-right: 5px;
}



.room-tabs > span {
	padding: 8px 10px 8px 10px;
	line-height: 30px;
	margin-left: 4px;
	font-weight: bold;
	text-align: center;
	border-radius: 5px 5px 0px 0px;
	background-color: rgb(216, 223, 234);
	color: rgb(59, 89, 152);
	border: 1px solid rgb(216, 223, 234);
	cursor: pointer;
}
.room-tabs > span.active {
	background-color: rgb(237, 239, 244);
	color: rgb(59, 89, 152);
	border: 1px solid rgb(216, 223, 234);
	border-bottom: 1px solid rgb(237, 239, 244);
	position: relative;
	top: 1px;
}
.room-list {
	background-color: rgba(5, 35, 49, 0.902);
	font-family: Roboto, Verdana, sans-serif;
	font-size: 16px;
	white-space: nowrap;
}
.room-list .holder {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}
.room-list .layout {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
}
.room-list .room-name {
	cursor: pointer;
	color: #cecdcd;
}
.room-list .room-name:hover {
	color: white;
}
.room-list .room-name.selected {
	color: #fea3ff;
}
.room-list .room-count {
	color: #808080;
}
.room-list .room-count.non-zero {
	color: #e0be6e;
	font-weight: bold;
}



.edit-user-info-dialog table {
	border-collapse: separate;
	border-spacing: 10px;
}


.chat-window {
	flex: 1 1 auto;
	font-family: "Times New Roman", serif;
	font-size: 1rem;
	border: 1px solid rgb(200, 207, 218);
	background-color: rgb(237, 239, 244);
	padding: 5px;
	min-height: 0;
}
.chat-window .verified-badge {
	height: 12px;
	vertical-align: baseline;
}

.chat-tabs {
	position: relative;
	overflow: hidden;
	top: 1px;
}
.chat-tabs > li {
	float: left;
	border: 1px solid rgb(200, 207, 218);
	background-color: rgb(216, 223, 234);
	color: #555;
	padding: 5px;
	margin-right: 5px;
	cursor: pointer;
	border-radius: 5px 5px 0px 0px;
	white-space: nowrap;
	display: flex;
	align-items: center;
}
.chat-tabs > li > :not(:first-child) {
	margin-left: 3px;
}
.chat-tabs > .notice {
	color: red;
}
.chat-tabs > .selected {
	border-bottom-color: white;
	background-color: white;
}

.user-list {
	flex: 2 2 30%;
	border: 1px solid rgb(200, 207, 218);
	background-color: white;
	overflow: auto;
	white-space: nowrap;
	padding: 2px;
	border-radius: 5px;
	margin-left: 5px;
}
.user-list .item {
	display: flex;
	align-items: flex-start;
	margin: 3px;
}
.user-list .item > * {
	flex: 0 0 auto;
	margin-right: .25em;
}
.user-list .info {
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.user-list .avatar {
	cursor: pointer;
	height: 1.5em;
}
.user-list .nick {
	cursor: pointer;
}
.user-list .nick:hover {
	color: black !important;
}
.user-list .status {
	color: gray;
}

.chat-window .smiley-browser {
	position: absolute;
	border: 1px solid rgb(200,207,218);
	background-color: #eee;
}

.chat-window .fileupload {
	position: absolute;
	border: 1px solid rgb(200,207,218);
}
.chat-window .fileupload .close-button {
	position: absolute;
	top: 10px;
	right: 20px;
	width: 24px;
	cursor: pointer;
}

.chat-log {
	border: 1px solid rgb(200, 207, 218);
	background-color: white;
	overflow: auto;
	word-break: break-all;
	word-break: break-word;
	padding: 5px;
}
.chat-log img.sendfile {
	vertical-align: text-bottom;
	margin: 0 2px 0 8px;
}
.chat-log .reward-notice {
	padding: 5px 10px;
	margin: 5px;
	background-color: #d8f4f5;
	border-radius: 5px;
}
.chat-log .reward-notice .gift {
	max-height: 64px;
}
.chat-log.private .chat-entry {
	margin-top: 3px;
	clear: both;
}
.chat-log.private .chat-message {
	display: inline-block;
	padding: .5em 1em;
	border-radius: .5em;
}
.chat-log.private .chat-message.mine {
	float: right;
	background-color: #f7f7f7;
}
.chat-log.private .chat-message:not(.mine) {
	background-color: #fbf7db;
}

.control-panel {
	padding: .25em;
	overflow: hidden;
	display: flex;
	align-items: center;
}
.control-panel > :not(:first-child) {
	margin-left: .25em;
}
.control-panel > img {
	display: block;
	cursor: pointer;
}
.control-panel .extra-menu {
	font-family: sans-serif;
}
.control-panel .extra-menu .dropdown-item .material-icons {
	font-size: 1em;
}
.control-panel .extra-menu .dropdown-item span {
	vertical-align: middle;
}

.chat-input input[name=message] {
	box-sizing: border-box;
	border: 1px solid rgb(200, 207, 218);
}



.send-gift-dialog .form-group {
	margin: 10px 0 15px 0;
}
.send-gift-dialog .form-group > label {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}
.send-gift-dialog input[type=text] {
	padding: 5px;
}
.send-gift-dialog .smiley {
	display: inline-block;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	cursor: pointer;
	vertical-align: middle;
}
.send-gift-dialog .smiley img {
	display: block;
	max-height: 64px;
}
.send-gift-dialog button {
	padding: 6px 12px;
	border-radius: 4px;
	border: 1px solid #2e6da4;
	background-color: #337ab7;
	color: white;
}
.send-gift-dialog button:not(:disabled) {
	cursor: pointer;
}
.send-gift-dialog button:hover {
	background-color: #286090;
	border-color: #204d74;
}
.send-gift-dialog button:disabled {
	opacity: .65;
	background-color: #007bff;
	border-color: #007bff;
}
.send-gift-dialog .check-valid {
	display: inline-block;
	padding: 1px 4px 4px 4px;
	border-radius: 50px;
	border: 1px solid #ccc;
	background-color: #ddd;
	vertical-align: middle;
	float: right;
}



.gift-notification {
	pointer-events: none;
}
.gift-notification > .aligner {
	display: inline-block;
}
.gift-notice {
	padding: 10px 20px;
	background-image: linear-gradient(to top, #d8f4f5, white);
	border: 10px ridge #92baca;
	border-left-color: darkorange;
	display: inline-block;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	display: none;
}
.gift-notice > * {
	margin-right: 5px;
}
.gift-notice > .gift {
	max-height: 64px;
}



.coin-balance-dialog img.gift {
	max-height: 2em;
}



.role-assignments-dialog th:not(:first-child), .role-assignments-dialog td:not(:first-child) {
	text-align: center;
}


.chess {
	position: relative;
	background-image: url("/images/marble-1.jpg");
	padding: 5px 15px;
	border: 6px outset #868645;
	box-sizing: border-box;
	box-shadow: 1px 1px 10px black;
}
.chess .board {
	margin: 3px 0;
	position: relative;
	border: 5px inset #868645;
}
.chess .piece {
	background-size: 100% 100%;
	position: absolute;
}
.chess .last-move {
	background: black;
	opacity: .25;
	position: absolute;
}
.chess button:not(.dropdown-item) {
	box-shadow: 1px 1px 3px #333;
}
.chess .rank-badge {
	height: 24px;
}

.chess-leaderboard .heading {
	font-weight: bold;
	color: darkred;
	text-transform: uppercase;
}
.chess-leaderboard .rank-badge {
	height: 24px;
}


.search-tabs > span {
	padding: 6px 10px 6px 10px;
	line-height: 29px;
	margin-left: 5px;
	font-weight: bold;
	font-family: "MS Arial", sans-serif;
	text-align: center;
	border-radius: 5px 5px 0px 0px;
	cursor: pointer;
	background-color: rgb(216, 223, 234);
	color: rgb(59, 89, 152);
	border: 1px solid rgb(216, 223, 234);
}
.search-tabs > span.active {
	background-color: white;
	border-bottom: 1px solid white;
	position: relative;
	top: 1px;
}

.search-filters > span {
	color: blue;
	margin-right: 3px;
	cursor: pointer;
}
.search-filters > span:hover {
	text-decoration: underline;
}
.search-entry {
	margin-top: 6px;
}

.search-nav {
	color: #606060;
}
.search-nav > table {
	width: 100%;
}
.search-pager {
	text-align: right;
}

.diepkhuc-results, .zing-results, .sannhac-results {
	height: 360px;
}
.diepkhuc-results {
	margin-top: 10px;
	display: grid;
	grid-template-columns: auto auto auto;
}
.diepkhuc-results > .item {
	width: 145px;
	color: #606060;
}
.diepkhuc-results .thumbnail {
	width: 145px;
	height: 109px;
	border-radius: 5px;
	cursor: pointer;
}
.diepkhuc-results .caption {
	margin-top: 5px;
	height: 50px;
}

.zing-results > table {
	width: 100%;
}
.zing-results > table tr {
	height: 55px;
}
.zing-results > table tr.odd {
	background-color: #F1F1F1;
}
.zing-results .song-title {
	font-weight: bold;
	color: #505050;
	text-decoration: none;
	cursor: pointer;
}
.zing-results .singer {
	font-weight: bold;
	color: #FF0066;
}
.zing-results .song-type {
	font-weight: bold;
	color: #FF8800;
}

.sannhac-results > table {
	width: 100%;
}
.sannhac-results > table tr {
	height: 35px;
}
.sannhac-results > table tr.odd {
	background-color: #F1F1F1;
}
.sannhac-results .song-title {
	font-weight: bold;
	color: #505050;
	text-decoration: none;
	cursor: pointer;
}
.sannhac-results .singer {
	font-weight: bold;
	color: #FF0066;
}
.sannhac-results .song-type {
	font-weight: bold;
	color: #FF8800;
}

.song-browser-dialog .song-browser {
	width: 500px;
	height: 500px;
}


.live-listener {
	display: inline-block;
	box-sizing: content-box;
}
.live-listener .title-bar {
	border: 1px solid #494437;
	border-radius: 8px 8px 0 0;
	background: #817865 url("/images/ui-bg_gloss-wave_45_817865_500x100.png") 50% 50% repeat-x;
	padding: .4em;
	cursor: move;
}
.live-listener .title-bar .material-icons {
	font-size: 20px;
}
.live-listener .flash-component {
	width: 240px;
	height: 180px;
}
.live-listener .volume-controls {
	padding: .5em;
	background-color: white;
}

.performance-list {
	float: right;
	width: 230px;
	height: 260px;
	overflow-x: hidden;
	overflow-y: auto;
}
.performance-list > li {
	padding: 8px;
	border: 1px solid #bfbf9d;
	border-radius: 5px;
	white-space: nowrap;
	background: linear-gradient(white, rgba(214, 214, 173, 0.8), rgba(214, 214, 173, 0.8));
	color: gray;
	font-size: 11px;
	margin-bottom: 1px;
}
.performance-list > li.selected {
	background: linear-gradient(white, rgb(211, 171, 171));
}
.performance-list > li > div {
	padding: 1px;
}



.create-room-dialog table {
	border-collapse: separate;
	border-spacing: 4px;
}

.edit-room-dialog table {
	border-collapse: separate;
	border-spacing: 4px;
}
.edit-room-dialog input[type=text], .edit-room-dialog textarea {
	width: 200px;
}
.edit-room-dialog input[type=submit] {
	width: 80px;
}

.karaoke-password-list select {
	width: 200px;
}



.reward-performer-dialog .form-group {
	margin: 10px 0 15px 0;
}
.reward-performer-dialog .form-group > label {
	display: block;
	margin-bottom: 4px;
	font-weight: bold;
}
.reward-performer-dialog input[type=text] {
	padding: 5px;
}
.reward-performer-dialog .smiley {
	display: inline-block;
	background-color: #eee;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	cursor: pointer;
	vertical-align: middle;
}
.reward-performer-dialog .smiley img {
	display: block;
	max-height: 64px;
}


.mic-test-widget {
	display: inline-block;
	border: 5px outset darkgray;
	box-shadow: 1px 1px 10px black;
}
.mic-test-widget .display {
	position: relative;
	width: 300px;
	height: 580px;
}
.mic-test-widget .display > div {
	position: absolute;
	width: 100%;
	height: 100%;
}
.mic-test-widget .buttons {
	display: flex;
	align-items: center;
	padding: 5px;
	background-color: #333331;
}
.mic-test-widget .buttons > :not(:last-child) {
	margin-right: 5px;
}
.mic-test-widget .buttons > * {
	flex: 1;
}


.mic-gain-slider {
	background-image: url(/images/mictest/panel.png);
}
.mic-gain-slider .knob {
	transform: translate(-50%, -50%);
	height: 124px;
	position: absolute;
	cursor: pointer;
}
.mic-gain-slider .lamp {
	position: absolute;
}


.change-roombg-dialog .default-bgs img {
	margin: .25em;
	cursor: pointer;
}
.change-roombg-dialog .upload-bg .thumbnail {
	width: 128px;
	overflow: hidden;
}
.change-roombg-dialog .upload-bg .thumbnail img {
	height: 128px;
}


.video-phone td {
	text-align: center;
}
.video-phone .status {
	text-align: center;
}
.video-phone .action {
	margin-top: 5px;
	text-align: center;
}
.video-phone .green-button {
	width: 50px;
	background-color: darkgreen;
	border: none;
	border-radius: 5px;
	color: white;
	font-weight: bold;
	padding: 3px;
	cursor: pointer;
}
.video-phone .red-button {
	width: 50px;
	background-color: darkred;
	border: none;
	border-radius: 5px;
	color: white;
	padding: 3px;
	cursor: pointer;
	font-weight: bold;
}

.tetris-leaderboard .heading {
    font-size: larger;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}
.tetris-leaderboard .rank-badge {
    height: 24px;
}


.tienlen {
	position: relative;
}
.tienlen .hand {
	position: absolute;
}
.tienlen .card {
	position: absolute;
}

.music-playlist .panel-header {
  display: flex;
  align-items: center;
}
.music-playlist label {
  margin: 0;
}

.music-playlist .playlist-menu ul {
  background-color: #eee;
  border: 1px #ccc solid;
  border-radius: 5px;
  padding: 4px;
}
.music-playlist .playlist-menu ul li {
  padding: 4px;
  cursor: pointer;
}
.music-playlist .playlist-menu ul li:hover {
  background-color: #666;
  color: #fff;
}

.music-playlist .playlist li {
  padding: 3px 4px 4px 4px;
  background-color: white;
  cursor: pointer;
}
.music-playlist .playlist li.odd {
  background-color: #F0F0F0;
}
.music-playlist .playlist li.playing {
  background-color: #CCCCCC;
}
.music-playlist .playlist .song-title {
  color: #330;
}

.music-playlist .playlist-info {
	display: none;
	position: absolute;
	background: #feeebd;
	border: 1px solid rgb(200,207,218);
	border-radius: 5px;
	box-shadow: 1px 1px 0 gray;
	padding: 10px;
}
.music-playlist .playlist-info table td {
  padding: 3px;
}