.center-in-parent {
	position: absolute;
	top: 50%;
	left: 50%;
}
input[type=text]:not(.form-control),
input[type=number]:not(.form-control),
input[type=password]:not(.form-control),
textarea:not(.form-control),
select:not(.form-control) {
	padding: .25em .25em;
	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: 2.5em;
	border-collapse: collapse;
	border-spacing: 0;
}
.side-panel .player-name {
	font-weight: bold;
}
.side-panel .game-status {
	font-weight: bold;
	padding-left: .625em;
}

.chess-timer {
	display: inline-block;
	padding: 4px 5px 3px 5px;
	text-align: center;
	border-radius: .3em;
	background-color: gray;
	color: white;
	font-size: 1.2em;
}
.chess-timer:not(.active) {
	opacity: .5;
}

.new-game-dialog {
	position: relative;
	width: 22em;
	left: -11em;
	top: -5em;
	padding: 1em;
	background: lightgray;
	border-radius: .3em;
	border: .2em outset;
}
.new-game-dialog hr {
	margin: .625em 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: 1em;
}

.kick-expired-dialog {
	position: relative;
	width: 12em;
	left: -6em;
	top: -3em;
	padding: 1em;
	background: lightgray;
	border-radius: .3em;
	border: .2em outset;
}



/* ---- Components ---- */
.smiley-browser {
	padding: 1em;
}
.smiley-browser .smiley-list {
	text-align: center;
	margin-top: 10px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
}
.smiley-browser .smiley-list img,
.smiley-browser .smiley-list video {
	max-height: 64px;
}


.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: 2em;
}


.dropzone {
	background: #eee url(../images/filestack.png) no-repeat center;
	padding: 10px;
	height: 100%;
	box-sizing: border-box;
	overflow: auto;
}
.dz-clickable {
	cursor: pointer;
}
.dz-default.dz-message {
	font-size: 1.25em;
	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: 1.5em;
	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: flex-start;
	margin-bottom: 1rem;
}


.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;
}


.dynamic-button {
	display: inline-block;
}


.context-menu {
	display: none;
}
.context-menu ul.menu {
	position: absolute;
	z-index: 500;
	list-style: none;
	padding: 1px;
	margin: 0px;
	background-color: white;
	border: 1px solid #999;
}
.context-menu ul.menu > li {
	margin: 0px;
	color: black;
	display: block;
	cursor: default;
	padding: 3px;
	border: 1px solid white;
	background-color: transparent;
}
.context-menu ul.menu > li:hover {
	border: 1px solid #0a246a;
    background-color: #b6bdd2;
}
.context-menu ul.menu > li > img {
	height: 18px;
	vertical-align: middle;
	padding-right: 2px;
}
.context-menu .shadow {
	position: absolute;
	z-index: 499;
	background-color: black;
	opacity: 0.2;
}



.messenger {
	position: fixed;
	bottom: 0px;
	width: 100%;
	pointer-events: none;
}

.messenger .bottom-dock {
	margin: 0 auto;
	max-width: 1200px;
	font-family: Arial, sans-serif;
	font-size: 14px;
}

.messenger .popup {
	float: right;
	display: none;
	max-height: 320px;
	padding: 10px;
	background-color: gray;
	border-radius: 10px;
	pointer-events: auto;
	display: flex;
}
.messenger .popup > div {
	display: flex;
	flex-flow: column;
}

.messenger .dock-bar {
	float: right;
	clear: both;
	margin-top: 3px;
	background-color: #303030;
	color: white;
	border: 2px outset #606060;
	pointer-events: auto;
}
.messenger .dock-bar .my-name {
	margin: 10px 50px 0px 10px;
}
.messenger .dock-bar img {
	float: right;
	margin: 5px 5px 0px 0px;
	cursor: pointer;
}

.messenger .buddylist-titlebar {
	border-radius: 10px 10px 0px 0px;
	background-color: #303030;
	padding: 7px;
	color: yellow;
	font-weight: bold;
}
.messenger .buddy-list {
	min-width: 230px;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #303030;
	border-radius: 0 0 10px 10px;
}
.messenger .buddy-list li {
	padding: 5px;
	background-color: #505050;
	margin: 2px;
	color: #666;
	user-select: none;
	display: flex;
	align-items: center;
}
.messenger .buddy-list li.online {
	color: white;
	cursor: pointer;
}
.messenger .buddy-list li.online:hover {
	background-color: #585858;
}
.messenger .buddy-list li.selected {
	background-color: #707070;
}

.messenger .chat-box {
	padding: 10px;
	width: 280px;
	background-color: #303030;
	margin-right: 5px;
	position: relative;
	border-radius: 10px 10px 10px 10px;
}

.messenger .chat-log {
	flex: 1;
	padding: 3px;
	overflow-y: auto;
}
.messenger .chat-log .chat-entry {
	margin-top: 3px;
	display: flex;
}
.messenger .chat-log .chat-message {
	display: inline-block;
	padding: .5em 1em;
	border-radius: .5em;
}
.messenger .chat-log .chat-message.mine {
	margin-left: auto;
	background-color: #d3dfff;
}
.messenger .chat-log .chat-message:not(.mine) {
	background-color: #fbf1ac;
}

.messenger .send-chat-form {
	flex: 0;
	display: flex;
}
.messenger .send-chat-form input {
	flex: 1;
	background-color: #606060;
	border: 3px solid #606060;
	color: white;
}
.messenger .send-chat-form button {
	flex: 0;
}



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



.image-or-video {
	display: flex;
}



.slideshow img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: opacity 3s linear;
}

.login-method-dialog .button-holder {
	margin-top: .25em;
}
.login-method-dialog .button-holder img {
	cursor: pointer;
}
.login-method-dialog .legal {
	font-size: small;
}
.login-method-dialog .legal a {
	color: blue;
	text-decoration: underline;
}


.login-dialog form .section {
	margin-top: .25em;
}
.login-dialog form .section input {
	width: 100%;
}
.login-dialog .other-actions {
	margin-top: .5em;
	font-size: small;
}


.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;
}
.account-page .reverify-phone-notice {
	color: darkorange;
	cursor: pointer;
}
.account-page .reverify-phone-notice:hover {
	text-decoration: underline;
}


.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 {
	text-decoration: line-through;
}
.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;
}


.recording-list .list {
	display: flex;
	flex-direction: column;
	gap: 1em;
}
.recording-list .item {
	display: flex;
	align-items: center;
	gap: .75em;
	cursor: pointer;
}
.recording-list .item.playing {
	background-color: #e1e1e1;
	border-radius: .5em;
	padding: .5em;
	cursor: auto;
}
.recording-list .thumbnail {
	flex: 0 0 auto;
	width: 3.6em;
	height: 3.6em;
	background: linear-gradient(45deg, #667eea, #764ba2);
	border-radius: .75em;
	color: white;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.recording-list .item.playing .thumbnail {
	background: linear-gradient(45deg, #4CAF50, #45a049);
}
.recording-list .thumbnail .btn {
	position: absolute;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}
.recording-list .thumbnail .spinner {
	position: absolute;
	width: 2em;
	height: 2em;
	border-color: white;
	border-top-color: #fff0;
	border-width: thick;
}
.recording-list .btn-play {
	color: #667eea;
	opacity: 0;
}
.recording-list .item:hover .btn-play {
	opacity: 1;
}
.recording-list .btn-pause,
.recording-list .btn-resume {
	color: #4CAF50;
}
.recording-list .btn-pause:hover,
.recording-list .btn-resume:hover {
	transform: scale(1.1);
}
.recording-list .player-controls {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: .5em;
}
.recording-list .player-controls .btn {
	width: 2em;
	height: 2em;
	border: none;
	border-radius: 50%;
	background: linear-gradient(45deg, #667eea, #764ba2);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.3s ease;
}
.recording-list .player-controls .btn:hover {
	transform: scale(1.1);
	box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}
.recording-list .item-info {
	flex: 1 1 auto;
	min-width: 0;
}
.recording-list .title {
	font-weight: 600;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.recording-list .line2 {
	color: #666;
	font-size: 0.9em;
	display: flex;
	justify-content: space-between;
}
.recording-list .like-button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1px solid #ddd;
	border-radius: 20px;
	background: white;
	color: #666;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 0.9em;
}
.recording-list .like-button:hover {
	border-color: #FF6B6B;
}
.recording-list .like-button.liked {
	background: #FF6B6B;
	color: white;
	border-color: #FF6B6B;
}
.recording-list .pagination-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: .5em;
	margin-top: 1em;
}
.recording-list .pagination-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5em;
	height: 2.5em;
	border: 1px solid #ddd;
	background: white;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #333;
	text-decoration: none;
	font-weight: 500;
}
.recording-list .pagination-button:hover {
	background: #667eea;
	color: white;
	border-color: #667eea;
	text-decoration: none;
	transform: translateY(-1px);
}
.recording-list .pagination-button.active {
	background: #667eea;
	color: white;
	border-color: #667eea;
}
.recording-list .pagination-button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}
.recording-list .pagination-button:disabled:hover {
	background: white;
	color: #333;
	border-color: #ddd;
	transform: none;
}
.recording-list .pagination-info {
	margin: 0 1em;
	color: #666;
	font-size: 0.9em;
}
@media (max-width: 768px) {
	.recording-list .thumbnail {
		width: 3em;
		height: 3em;
	}
	.recording-list .like-button span {
		display: none;
	}
}


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


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


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


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


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


.caro-game {
	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-game .board {
	margin: 3px 0;
	background: white;
	width: 100%;
	border: 3px inset #efefef;
	padding: 5px;
}
.caro-game .new-game-dialog {
	opacity: .9;
}
.caro-game .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-game .rank-badge {
	height: 24px;
}
.caro-game .legend {
	opacity: .25;
	font-weight: bold;
	font-size: large;
}


.cchess-game {
	position: relative;
	background-image: url("/images/wood-1.jpg");
	padding: 5px 0;
	box-sizing: border-box;
	font-family: Arial;
    border: 2px outset #c17f4c;
    border-radius: 0;
}
@media (min-width: 768px) {
    .cchess-game {
        border-width: 4px;
    }
}
.cchess-game .inner-shadow {
    display: none;
}
.cchess-game .board {
	margin: 3px 0;
    border: 2px inset #e48d47;
}
@media (min-width: 768px) {
    .cchess-game .board {
        border-width: 4px;
    }
}
.cchess-game .board-float {
	position: absolute;
}
.cchess-game .piece {
	background-size: 100% 100%;
	position: absolute;
}
.cchess-game .last-move {
	background: #0888ff;
	border-radius: 5px;
	position: absolute;
}
.cchess-game .rank-badge {
	height: 24px;
}

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

.captured-pieces {
	flex: 1 1;
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	opacity: .3;
}
.captured-pieces > img {
	width: 85%;
}


.webcam-app video {
	width: 200px;
	height: 150px;
	background-color: #333;
}
.webcam-app {
	display: flex;
	flex-flow: row wrap;
}
.webcam-app .webcam {
	position: relative;
	display: flex;
	flex-flow: column;
}
.webcam-app .nick {
	text-align: center;
	background-color: black;
	color: white;
}
.webcam-app .controls {
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}
.webcam-app.active .controls {
	display: block;
}
.webcam-app .controls > i {
	background-color: #6c757d88;
	color: #ddd;
	font-size: 2em;
	cursor: pointer;
}


.floating-webcam-app {
	display: inline-flex;
	flex-flow: column;
}
.floating-webcam-app .title-bar {
	border: 1px solid #494437;
	border-radius: 8px 8px 0 0;
	background: #817865 url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/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;
}
.floating-webcam-app .webcam-app {
	display: grid;
}
.floating-webcam-app .c1 .webcam-app {
	grid-template-columns: 1fr;
}
.floating-webcam-app .c2 .webcam-app {
	grid-template-columns: 1fr 1fr;
}
.floating-webcam-app .c3 .webcam-app {
	grid-template-columns: 1fr 1fr 1fr;
}
.floating-webcam-app .c4 .webcam-app {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}
.floating-webcam-app .c5 .webcam-app {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.floating-webcam-app .w0 video {
	width: 160px;
	height: 120px;
}
.floating-webcam-app .w1 video {
	width: 200px;
	height: 150px;
}
.floating-webcam-app .w2 video {
	width: 240px;
	height: 180px;
}
.floating-webcam-app .w3 video {
	width: 280px;
	height: 210px;
}
.floating-webcam-app .w4 video {
	width: 320px;
	height: 240px;
}


.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;
}


.select-capture-device-dialog select {
	max-width: 100%;
}



.room-list {
	background-color: rgba(5, 35, 49, 0.902);
	font-family: Roboto, Verdana, sans-serif;
	white-space: nowrap;
}
.room-list .holder {
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px 0;
}
.room-list .layout {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.room-list .layout > div {
	margin-right: 1em;
}
.room-list .vip-badge {
	margin-right: .25em;
	vertical-align: baseline;
}
.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;
}

.android-room-list {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
}
.android-room-list .close {
	color: white;
	opacity: 1;
}
.android-room-list .room-buttons {
	padding: .5em;
	background-color: #1d485e;
}
.android-room-list .room-buttons button {
	margin-right: .25em;
}
.android-room-list .room-list {
	flex: 1;
	overflow: auto;
	padding: .5em 0 0 .75em;
	background-color: rgb(5, 35, 49);
}



.edit-user-info-dialog table {
	border-collapse: separate;
	border-spacing: 10px;
}
.edit-user-info-dialog button img {
	max-height: 2em;
}


.chat-window {
	flex: 1 1 auto;
	border: 1px solid rgb(200, 207, 218);
	background-color: rgb(237, 239, 244);
	padding: 5px;
	min-height: 0;
}
.chat-window > :nth-child(1) {
	flex: 0 1 70%;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	position: relative;
	font-family: 'Times New Roman', Times, serif;
}
.chat-window > :nth-child(2) {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.chat-window > :nth-child(3) {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	font-family: 'Times New Roman', Times, serif;
}
.chat-window .verified-badge {
	margin-left: 2px;
}

.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 .close-btn {
	margin-left: 2px;
}
.chat-tabs > .notice {
	color: red;
}
.chat-tabs > .selected {
	border-bottom-color: white;
	background-color: white;
}

.user-list {
	flex: 1 1 auto;
	border: 1px solid rgb(200, 207, 218);
	background-color: white;
	overflow: auto;
	padding: 2px;
	border-radius: 5px;
}
.user-list .item {
	display: flex;
	align-items: center;
	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 .leading-badge, .user-list .trailing-badge {
	cursor: pointer;
	height: 32px;
}
.user-list .status {
	color: gray;
}

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

.chat-window .fileupload {
	position: absolute;
	border: 1px solid rgb(200,207,218);
}
.chat-window .fileupload .close {
	float: none;
	position: absolute;
	top: 10px;
	right: 10px;
}

.chat-window .scam-alert {
	background-color: #bf0000;
	color: white;
	line-height: normal;
}

.chat-log {
	border: 1px solid rgb(200, 207, 218);
	background-color: white;
	overflow: auto;
	word-break: break-all;
	word-break: break-word;
	padding: .4em;
}
.chat-log img.sendfile {
	vertical-align: text-bottom;
	margin: 0 2px 0 8px;
}
.chat-log .reward-notice {
	padding: .3em .6em;
	margin: .3em;
	background-color: #d8f4f5;
	border-radius: .3em;
}
.chat-log .reward-notice .gift {
	max-height: 3em;
	vertical-align: middle;
}
.chat-log .private .chat-entry {
	margin-top: .2em;
	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;
}
.chat-log .time-marker {
	text-align: center;
	color: #aaa;
	font-size: smaller;
	clear: both;
}
.chat-log .time-marker hr {
	margin: 0 auto;
	width: 60%;
}
.chat-log .server-message {
	color: #6c757d;
}
.chat-log .server-message img {
	vertical-align: bottom;
}
.chat-log .server-message::before {
	content: "⍾ ";
}
.chat-log .sponsor-room-vip {
	color: #6c757d;
}
.chat-log .sponsor-room-vip::before {
	content: "⍣ ";
}

.control-panel {
	padding: .25em;
	display: flex;
	align-items: center;
}
.control-panel > :not(:first-child) {
	margin-left: .25em;
}
.control-panel .my-nick {
	cursor: pointer;
}
.control-panel .my-nick img {
	max-height: 1em;
}
.control-panel > img {
	height: 1.25em;
	display: block;
	cursor: pointer;
}
.control-panel .extra-menu {
	font-family: sans-serif;
}
.control-panel .extra-menu > .material-icons {
	font-size: 1.25em;
}
.control-panel .extra-menu .dropdown-item .material-icons {
	font-size: 1em;
}
.control-panel .extra-menu .dropdown-item span {
	vertical-align: middle;
}
.control-panel input[type=color] {
	width: 1.5em;
}

.chat-input textarea {
	flex: 1;
	min-width: 0;
	box-sizing: border-box;
	border: 1px solid rgb(200, 207, 218);
}



.send-gift-dialog table.layout {
	width: 100%;
}
.send-gift-dialog table.layout td {
	padding-bottom: .75em;
}
.send-gift-dialog input,
.send-gift-dialog select {
	background-color: #eee;
}
.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,
.send-gift-dialog .smiley video {
	display: block;
	max-height: 64px;
}



.gift-notification {
	pointer-events: none;
}
.gift-notice {
	max-height: 104px;
	overflow: hidden;
	padding: 10px 20px;
	background-image: linear-gradient(to top, #d8f4f5, white);
	border: 10px ridge #92baca;
	border-left-color: darkorange;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	display: inline-flex;
}
.gift-notice > span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	max-width: 12em;
	overflow: hidden;
	overflow-wrap: break-word;
	text-align: center;
}
.gift-notice > :not(:last-child) {
	margin-right: .5em;
}
.gift-notice img,
.gift-notice video {
	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;
}
.role-assignments-dialog th img {
	max-height: 18px;
}



.room-action-log tr:last-child {
	border-bottom: 1px solid #dee2e6;
}
.room-action-log .bright {
	color: #d45a1e;
}



.chat-settings-dialog table td {
	border: none;
}



.hosted-game .caro-game {
	box-shadow: none;
}



.sponsor-room-vip-dialog table.layout td {
	padding-bottom: .75em;
}



.manage-room-icons-dialog .icon-list img,
.manage-room-icons-dialog .icon-list video {
	max-height: 64px;
}


.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 .rank-badge {
	height: 24px;
}

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


.enter-song-dialog .notes {
	background-color: white;
	border-radius: .5em;
	color: #666;
	font-size: smaller;
}



.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("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/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;
	background-image: url(/images/webcam_backdrop.png);
	background-size: cover;
	background-position: center;
}
.live-listener .flash-component video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(/images/webcam_backdrop.png);
	background-size: cover;
	background-position: center;
}
.live-listener .flash-component .progress-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
}
.live-listener .flash-component .progress-layer .spinner {
	width: 45px;
	height: 45px;
	border-width: 7px;
}
.live-listener .volume-controls {
	padding: .5em;
	background-color: #c3c3c3;
}

.performance-list {
	flex: 1;
	margin-left: .5em;
}
.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;
}



.mic-activity-ind {
	display: inline-flex;
	align-items: center;
}
.mic-activity-ind .gain-slider-popup {
	position: absolute;
	height: 24px;
	padding: 0 16px;
	background-color: #ddd;
	border-radius: 4px;
	display: flex;
	align-items: center;
	transform-origin: left top;
	transform: rotate(270deg);
}
.mic-activity-ind .level-meter {
	width: 80px;
	background-color: #aaa;
}
.mic-activity-ind .level-meter > div {
	height: 10px;
	background-image: url(/images/micActivityInd.png);
}



.audio-visualizer {
	position: relative;
	overflow: hidden;
	height: 60px;
	background-color: black;
}
.audio-visualizer .legend {
	position: absolute;
	top: 0;
	right: .5em;
	color: #888;
}



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

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



.reward-performer-dialog table.layout td {
	padding-bottom: .5em;
}
.reward-performer-dialog input {
	background-color: #eee;
}
.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,
.reward-performer-dialog .smiley video {
	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;
	height: 128px;
	background: center/cover url(/images/placeholder.png);
}
.change-roombg-dialog .upload-bg .thumbnail img,
.change-roombg-dialog .upload-bg .thumbnail video {
	width: 128px;
	height: 128px;
	object-fit: cover;
	object-position: center;
}


.rtc-mic-test-widget {
	padding: 1em;
	background-color: white;
	border-radius: 4px;
}
.rtc-mic-test-widget label {
	margin: 0;
	font-size: smaller;
}
.rtc-mic-test-widget select {
	display: block;
}
.rtc-mic-test-widget .mic-gain-control {
	padding: 0 1em 0 .5em;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: inline-flex;
	align-items: center;
}



.karaoke-player .display {
	position: relative;
	aspect-ratio: 16/9;
}
.karaoke-player .title {
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
	text-align: center;
	font-size: 28px;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 2px black;
	transition: opacity 3s linear;
}
.karaoke-player .lyrics {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding-bottom: .5em;
	color: #96ff00;
	font-size: 24px;
	font-weight: bold;
	text-shadow: 0 0 2px black;
	display: flex;
	flex-flow: column;
	align-items: stretch;
	justify-content: end;
}
.karaoke-player .lyrics .line {
	text-align: center;
}
.karaoke-player .lyrics .word.hilite {
	color: #FF9600;
}
.karaoke-player .controls {
	background-color: #333;
	color: white;
	display: flex;
}
.karaoke-player .controls .button {
	flex: 0 0 auto;
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.karaoke-player .controls .seek-bar {
	flex: 1;
	position: relative;
	background-color: #222;
	display: inline-flex;
	align-items: center;
	justify-content: start;
	touch-action: none;
}
.karaoke-player .controls .seek-bar .progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 0%;
	height: 100%;
	background-color: #444;
}
.karaoke-player .controls .seek-bar .status-text {
	margin-left: 1em;
	z-index: 1;
	user-select: none;
}



.song-search .alphabet-filters > span {
	color: blue;
	cursor: pointer;
}
.song-search .alphabet-filters > span:hover {
	text-decoration: underline;
}
.song-search .search-form {
	margin-top: 6px;
}

.song-search .search-result {
	margin-top: 1em;
}
.song-search .search-result .item {
	min-height: 4em;
	padding: .25em 0;
	cursor: pointer;
}
.song-search .search-result .item.odd {
	background-color: #F1F1F1;
}
.song-search .song-title {
	font-weight: bold;
	color: #333;
	text-decoration: none;
}
.song-search .lyric-preview {
	color: #888;
}
.song-search .singer {
	float: right;
	margin-left: .5em;
	font-weight: bold;
	color: #FF0066;
}
.song-search .song-type {
	font-weight: bold;
	color: #FF8800;
}

.song-search table.paginator {
	margin-top: 1em;
	width: 100%;
	color: #666;
}
.song-search .paging-buttons {
	text-align: right;
}
.song-search .paging-buttons > span {
	padding: .25em;
	border-radius: 3px;
	cursor: pointer;
}
.song-search .paging-buttons > span.selected {
	background-color: black;
	color: white;
}



.user-recordings [role=tab] {
	display: inline-block;
	padding: 7px 15px 7px 15px;
	margin-left: 5px;
	text-align: center;
	text-shadow: 1px 1px white;
	border: 1px solid rgb(216, 223, 234);
	border-radius: 5px 5px 0 0;
	background-color: rgb(216, 223, 234);
	color: gray;
	cursor: pointer;
}
.user-recordings [role=tab].active {
	border-bottom: 1px solid rgb(237, 239, 244);
	background-color: rgb(237, 239, 244);
	color: rgb(59, 89, 152);
	position: relative;
	top: 1px;
}
.user-recordings .tab-pane {
	background-color: rgb(237, 239, 244);
	border: 1px solid rgb(216, 223, 234);
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px;
	border-radius: 5px;
}


.video-phone td {
	text-align: center;
}
.video-phone .status {
	text-align: center;
	color: red;
}
.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;
}
.video-phone .alert-info {
	width: 320px;
	margin: 0 auto;
}
.video-phone .alert-info > div:not(:first-child) {
	margin-top: 1rem;
}
.video-phone .local-stream video {
	width: 160px;
}

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


.tienlen-game .board {
	position: absolute;
	width: 600px;
	height: 600px;
	transform-origin: top left;
}
.tienlen-game .buttons {
	position: absolute;
	right: 10px;
	bottom: 10px;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.tienlen-game .new-game-timer {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -15px 0 0 -15px;
}

.tienlen-seat {
	position: absolute;
	top: 50%;
	width: 100%;
	transform-origin: top;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tienlen-seat > :nth-child(2) {
	margin-top: 14px;
}
.tienlen-seat > .tienlen-timer {
	position: absolute;
	top: 50px;
}
.tienlen-seat > .tienlen-player-info {
	margin-top: 2px;
}
.tienlen-seat.rotate-180 > .tienlen-timer, .tienlen-seat.rotate-180 > .tienlen-player-info {
	transform: rotate(180deg);
}
.tienlen-seat.rotate-90 > .tienlen-timer {
	transform: rotate(90deg);
}
.tienlen-seat.rotate-270 > .tienlen-timer {
	transform: rotate(270deg);
}

.tienlen-card-set {
	height: 96px;
}

.tienlen-card {
	display: inline-block;
	position: relative;
}

.tienlen-timer {
	width: 30px;
	height: 30px;
	border-radius: 30px;
	background-color: black;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tienlen-player-info {
	text-align: center;
	color: white;
	font-weight: bold;
}

.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;
}


.loto-game-list tr:last-child {
    border-bottom: 1px solid #dee2e6;
}



.loto-game-details .my-card {
    border-top: .5em solid #bcd8bc;
    padding: 1em;
}
.loto-game-details .my-card-heading {
    font-weight: bold;
}
.loto-game-details .winners .round-number {
    font-weight: bold;
    font-size: smaller;
}
.loto-game-details .winners .round-number:before {
    content: "[";
}
.loto-game-details .winners .round-number:after {
    content: "]";
}
.winning-numbers {
    border: .5em solid orange;
    border-radius: .25em;
    display: inline-grid;
    grid-template-columns: repeat(10, 2em);
    grid-template-rows: repeat(9, 2em);
    align-items: stretch;
    user-select: none;
}
.winning-number {
    border-right: 1px dashed orange;
    border-bottom: 1px dashed orange;
    display: flex;
    align-items: center;
    justify-content: center;
}
.winning-number.drawn {
    background-color: #ffd587;
}
.loto-game-details .tickets tr:hover {
    background-color: #eee;
}
.loto-game-details .pick {
    margin: 0 1px;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: smaller;
}
.loto-game-details .pick.drawn {
    background-color: #ffd587;
}



.loto-game {
    background-color: white;
    border: .5em solid #bcd8bc;
}



.loto-singer-panel {
    padding: 1em;
}
.loto-singer-panel .heading {
    font-weight: bold;
}



.loto-admin-panel {
    padding: 1em;
}
.loto-admin-panel .heading {
    font-weight: bold;
}



.loto-buy-ticket-dialog .winning-number {
    cursor: pointer;
}