*:fullscreen
*:-ms-fullscreen, *:-webkit-full-screen, *:-moz-full-screen {
	overflow: auto !important;
}

:root {
	--vwl: 1;
}

@font-face {
	font-family: 'remi-font';
	src: url('../css/remi-font.ttf') format('truetype');
}

body {
	background: #353444;
	scrollbar-face-color: #b46868;
	padding: calc(var(--vwl) * 0vmin);
	margin: calc(var(--vwl) * 0vmin);
	font-family: monospace;
	max-width: 100%;
	overflow: hidden;
}

.outer {
	display: table;
	position: absolute;
	height: 100%;
	width: 100%;
}

.middle {
	display: table-cell;
	vertical-align: middle;
}

.inner {
	width: calc(var(--vwl) * 100vmin);
	margin: auto;
}

.jspContainer {
	overflow: hidden;
	position: relative;
}

.jspPane {
	position: absolute;
}

.jspVerticalBar {
	position: absolute;
	top: 0;
	right: 0;
	width: calc(var(--vwl) * 1.1vmin);
	height: 100%;
	background: red;
}

.jspHorizontalBar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(var(--vwl) * 1.1vmin);
	background: red;
}

.jspCap {
	display: none;
}

.jspHorizontalBar .jspCap {
	float: left;
}

.jspTrack {
	background: #1d5930;
	position: relative;
}

.jspDrag {
	background: #bbd;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
	background: #0e400a;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspArrow {
	background: #1d5930;
	text-indent: calc(var(--vwl) * -200vmin);
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}

.jspArrow.jspDisabled {
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow {
	height: calc(var(--vwl) * 1.1vmin);
}

.jspHorizontalBar .jspArrow {
	width: calc(var(--vwl) * 1.1vmin);
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus {
	outline: none;
}

.jspCorner {
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner {
	margin: 0 calc(var(--vwl) * -0.2vmin) 0 0;
}

#login-info {
	display: none;
	margin: auto;
	width: calc(var(--vwl) * 8vmin);
	padding: calc(var(--vwl) * 1vmin);
}

#sign-out {
	display: none;
}

#page-frame {
	margin-left: auto;
	margin-right: auto;
	padding: calc(var(--vwl) * 0.5vmin);
}

#loading {
	width: calc(var(--vwl) * 10.8vmin);
	height: calc(var(--vwl) * 2.6vmin);
	background: center url("../img/main-loader.gif") no-repeat;
	float: right;
	background-size: calc(var(--vwl) * 9.6vmin);
	display: table-cell;
	vertical-align: middle;
}

#game-status-text {
	min-width: calc(var(--vwl) * 10.8vmin);
	height: calc(var(--vwl) * 2.6vmin);
	font-size: calc(var(--vwl) * 1.1vmin);
	font-weight: bold;
	font-family: monospace;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #d2f001;
}

#game-copyright {
	min-width: calc(var(--vwl) * 10.8vmin);
	height: calc(var(--vwl) * 2.6vmin);
	font-size: calc(var(--vwl) * 1vmin);
	font-weight: lighter;
	font-family: remi-font;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #1d5930;
}

.float-right {
	float: right;
}

#console {
	color: #353444;
}

#menu-tabs {
	height: calc(var(--vwl) * 33vmin);
	border-right-color: white;
	border-right-style: dashed;
	border-right-width: calc(var(--vwl) * 0.1vmin);
	margin-right: calc(var(--vwl) * 0.5vmin);
	float: left;
}

.left-tab-button {
	height: calc(var(--vwl) * 4vmin);
	width: calc(var(--vwl) * 3vmin);
	border: calc(var(--vwl) * 0.1vmin) solid white;
	border-radius: calc(var(--vwl) * 0.5vmin) 0 0 calc(var(--vwl) * 0.5vmin);
	background-position: center;
	background-size: auto;
	border-color: white;
}

#search-tab-button {
	background-image: url("../img/search-tab.png");
	background-size: calc(var(--vwl) * 3vmin);
}

#user-tab-button {
	background-image: url("../img/user-tab.png");
	background-size: calc(var(--vwl) * 3vmin);
}

.left-tab-button:HOVER, .selectedTabButton {
	cursor: pointer;
	background-color: #4E8065;
}

.left-tab {
	display: none;
	height: calc(var(--vwl) * 33vmin);
	border-radius: calc(var(--vwl) * 0.8vmin);
	width: calc(var(--vwl) * 48.5vmin);
	float: left;
	margin-right: calc(var(--vwl) * 0.3vmin);
	border: calc(var(--vwl) * 0.1vmin) solid #25682a;
	overflow: hidden;
	background: #1A1A22;
}

.selectedTab {
	display: block;
}

#buttons {
	height: calc(var(--vwl) * 3vmin);
	clear: both;
	vertical-align: middle;
	display: inline-block;
	width: 100%;
}

.button-separator-left, .button-separator-right {
	border-right: white dashed;
	border-right-width: calc(var(--vwl) * .1vmin);
	margin-left: calc(var(--vwl) * .2vmin);
	margin-right: calc(var(--vwl) * .2vmin);
	height: calc(var(--vwl) * 2.5vmin);
}

.button-separator-left {
	float: left;
}

.button-separator-right {
	float: right;
}

.button-separator {
	border-right: white dashed;
	border-right-width: calc(var(--vwl) * .1vmin);
	margin-left: calc(var(--vwl) * .2vmin);
	margin-right: calc(var(--vwl) * .2vmin);
	width: calc(var(--vwl) * .2vmin);
}

#sign-out-button {
	background-image: url("../img/sign-out.png");
	float: right;
}

#full-screen-button {
	background-image: url("../img/full-screen-tab.png");
	float: right;
}

#search-button {
	background-image: url("../img/search-tab.png");
}

#game-button {
	background-image: url("../img/game-button.png");
	background-size: calc(var(--vwl) * 1.5vmin) calc(var(--vwl) * 1.5vmin);
	background-repeat: no-repeat;
	background-position: center;
}

.button {
	margin: calc(var(--vwl) * 0.3vmin); 
	width: calc(var(--vwl) * 5vmin);
	height: calc(var(--vwl) * 2vmin);
	background-color: #043614;
	float: left;
	border: calc(var(--vwl) * 0.1vmin) solid white;
	border-radius: calc(var(--vwl) * 0.5vmin);
	color: white;
	text-align: center;
	font-size: calc(var(--vwl) * 1.6vmin);
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(var(--vwl) * 1.5vmin) calc(var(--vwl) * 1.5vmin);
}

.button-tab {
	width: calc(var(--vwl) * 5vmin);
	height: calc(var(--vwl) * 2.4vmin);
	float: left;
	border: calc(var(--vwl) * 0.1vmin) solid white;
	border-radius: 0 0 calc(var(--vwl) * 0.5vmin) calc(var(--vwl) * 0.5vmin);
	color: white;
	text-align: center;
	font-size: calc(var(--vwl) * 1.6vmin);
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: calc(var(--vwl) * 1.5vmin) calc(var(--vwl) * 1.5vmin);
}

.button:HOVER, .button-tab:HOVER, .selectedButton {
	background-color: #4E8065;
	border-color: #100e39;
	cursor: pointer;
}

#search-tab, #game-tab, #user-tab {
	color: #027220;
	font-size: calc(var(--vwl) * 0.875vmin);
}

#game-div, #search-div {
	clear: both;
	height: calc(var(--vwl) * 34vmin);
	border-bottom: white dashed;
	border-bottom-width: calc(var(--vwl) * .1vmin);
}

#game-div {
	display: none;
}

#search-tab fieldset, #game-tab fieldset, #user-tab fieldset {
	padding: calc(var(--vwl) * 0.5vmin);
	margin-top: calc(var(--vwl) * 0.5vmin);
	margin-left: calc(var(--vwl) * 0.5vmin);
	margin-right: calc(var(--vwl) * 0.5vmin);
	border: calc(var(--vwl) * 0.1vmin) solid white;
	border-radius: calc(var(--vwl) * 0.5vmin);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

#search-tab fieldset {
	float: left;
	height: calc(var(--vwl) * 5vmin);
	width: calc(var(--vwl) * 37vmin);
}

#search-criteria input, #game-prefs input {
	display: none;
}

#search-criteria label, #game-prefs label {
	padding: calc(var(--vwl) * 0.1vmin);
	margin: calc(var(--vwl) * 0.3vmin);
	float: left;
	border-radius: calc(var(--vwl) * 0.3vmin);
	background: #1b7e5a;
	cursor: pointer;
	color: white;
	text-align: center;
	width: calc(var(--vwl) * 11.5vmin);
}

#game-prefs label {
    width: calc(var(--vwl) * 13.5vmin);
}

#search-criteria label.checked, #game-prefs label.checked {
	background: #1b7e5a;
	color: white;
}

#search-criteria label.unchecked, #game-prefs label.unchecked {
	background: #bb5251;
	color: black;
}

#search-criteria label:HOVER , #game-prefs label:HOVER {
	color: blue;
}

#search-criteria label.disabled:HOVER , #game-prefs label.disabled:HOVER,
#search-criteria label.disabled, #game-prefs label.disabled {
	background: #e6d0d0;
	color: #edabab;
	cursor: wait;
}

#game-prefs {
	height: calc(var(--vwl) * 5vmin);
}

#game-tab {
	width: calc(var(--vwl) * 45.5vmin);
	float: left;
	clear: right;
}

#invite-text, #enc-root-phrase, #nickname {
	background: #2d8466;
	border: none;
	border-radius: calc(var(--vwl) * 0.3vmin);
	padding: calc(var(--vwl) * 0.4vmin);
}

#invite-text, #nickname {
	width: calc(var(--vwl) * 29vmin);
	height: calc(var(--vwl) * 0.9vmin);
}

#enc-root-phrase {
	width: calc(var(--vwl) * 45.5vmin);
	height: calc(var(--vwl) * 8vmin);
}

#create-button a, #save-user-prefs-button a, #find-button a {
	float: right;
	margin-right: calc(var(--vwl) * 0.4vmin);
}

#game-drop {
	padding: calc(var(--vwl) * 0.8vmin);
}

#games-table {
	height: 100%;
}

#create-game, #start-game, #join-game, #pick-card, #check-win,
	#login-info a, #save-user-prefs-button a, #find-games {
	cursor: pointer;
	padding: calc(var(--vwl) * 0.4vmin) calc(var(--vwl) * 0.6vmin);
	border: calc(var(--vwl) * 0.1vmin) solid #25682a;
	background: #3FB449;
	background: -webkit-gradient(linear, left top, left bottom, from(#3FB449), to(#25682a));
	background: linear-gradient(to bottom, #3FB449 0%, #25682a 100%);
	color: #fff;
	font-weight: bold;
	border-radius: calc(var(--vwl) * 0.4vmin);
	margin-top: calc(var(--vwl) * 0.4vmin);
	text-align: center;
	font-weight: lighter;
	font-size: calc(var(--vwl) * 0.8vmin);
}

#start-game, #join-game, #pick-card, #check-win {
	display: none;
}

#start-game, #join-game {
	display: block;
	margin: calc(var(--vwl) * 4vmin);
}

#create-game:HOVER, #start-game:HOVER, #join-game:HOVER, #pick-card:HOVER,
	#check-win:HOVER, #login-info a:HOVER, #save-user-prefs-button a:HOVER,
	#find-games:HOVER {
	background: #3FB449;
	background: -webkit-gradient(linear, left top, left bottom, from(#2FA429),
		to(#25682a));
	background: linear-gradient(to bottom, #2FA429 0%, #25682a 100%);
	color: blue;
}

#game-board {
	border: calc(var(--vwl) * 0.1vmin) solid black;
	background-image: url("../img/wood-texture.png");
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: calc(var(--vwl) * 1vmin);
	clear: both;
	height: calc(var(--vwl) * 19.5vmin);
}

#game-results {
	height: calc(var(--vwl) * 25.3vmin);
	clear: both;
	margin: calc(var(--vwl) * 0.3vmin);
	border: calc(var(--vwl) * 0.1vmin) solid white;
	border-radius: calc(var(--vwl) * 0.4vmin);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	width: calc(var(--vwl) * 47.8vmin);
}

#game-results-content .game-row.even {
	background-color: #2C2C33;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

#game-results-content .game-row {
	padding: calc(var(--vwl) * 0.33vmin);
  	color: white;
	padding-left: calc(var(--vwl) * 1vmin);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	height: calc(var(--vwl) * 1.1vmin);
}

#game-results-content .game-row.selectedGame {
	background-color: #218ee7;
}

#game-results-content .game-row:HOVER {
	background-color: #9199e7;
}

#board-div {
	float: left;
	width: calc(var(--vwl) * 76vmin);
}

#gold-card {
	float: left;
	width: calc(var(--vwl) * 5vmin);
	padding: calc(var(--vwl) * 0.8vmin);
	background: #1D5930;
	background-size: cover;
	border-bottom: calc(var(--vwl) * 0.1vmin) solid black;
	height: calc(var(--vwl) * 8.6vmin);
}

#card-win.active,
#card-dealer.active {
	cursor: pointer;
}

#card-win {
	background: url("../img/winner-cup.png") no-repeat;
    background-position-x: 0%;
    background-position-y: 0%;
	background-size: auto;
	background-size: calc(var(--vwl) * 3.4vmin);
	background-position-x: calc(var(--vwl) * 1.5vmin);
	background-position-y: calc(var(--vwl) * 1vmin);
	cursor: default;
}

#card-dealer {
	background: #1d5930;
	cursor: default;
}

#dealer-card {
	border-radius: calc(var(--vwl) * 0vmin) calc(var(--vwl) * 0vmin) calc(var(--vwl) * 0vmin) calc(var(--vwl) * 1vmin);
	border: calc(var(--vwl) * 0.1vmin) solid black;
	border-top-width: calc(var(--vwl) * 0vmin);
	border-right-width: calc(var(--vwl) * 0.1vmin);
	border-top-style: solid;
	border-right-style: solid;
	border-top-color: black;
	border-right-color: black;
	margin-left: calc(var(--vwl) * 1.3vmin);
	padding: calc(var(--vwl) * 0.8vmin);
	float: left;
	height: calc(var(--vwl) * 8.6vmin);
	background: #1d5930;
}

#infinite-container {
	width: calc(var(--vwl) * 60vmin);
	float: left;
	overflow-x: scroll;
	overflow-y: hidden;
	border-bottom: calc(var(--vwl) * 0.1vmin) solid black;
	background: #1d5930;
	border-radius: calc(var(--vwl) * 0vmin) calc(var(--vwl) * 0vmin) calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0vmin);
	border-left: calc(var(--vwl) * 0.1vmin) solid black;
	border-right: calc(var(--vwl) * 0.1vmin) solid black;
	height: calc(var(--vwl) * 10.2vmin);
}

#game-players {
	margin: auto;
	margin-top: auto;
	display: block;
	clear: both;
	padding-left: calc(var(--vwl) * 2.3vmin);
	margin-top: calc(var(--vwl) * 0.3vmin);
	height: calc(var(--vwl) * 2.5vmin);
}

#game-players div {
	background-color: #1d5930;
	color: #f6c109;
	float: left;
	border-radius: calc(var(--vwl) * 1vmin) calc(var(--vwl) * 1vmin) calc(var(--vwl) * 0vmin) calc(var(--vwl) * 0vmin);
	padding-top: calc(var(--vwl) * 0.5vmin);
	padding-right: calc(var(--vwl) * 1vmin);
	padding-bottom: calc(var(--vwl) * 0.6vmin);
	padding-left: calc(var(--vwl) * 1.6vmin);
	font-size: calc(var(--vwl) * 1.5vmin);
	width: calc(var(--vwl) * 16vmin);
	overflow-x: hidden;
	border-top: calc(var(--vwl) * 0.1vmin) solid black;
	border-left: calc(var(--vwl) * 0.1vmin) solid black;
	border-right: calc(var(--vwl) * 0.1vmin) solid black;
	margin-left: calc(var(--vwl) * -1vmin);
	overflow-x: hidden;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

#game-players .winner {
	background: left url("../img/winner-cup.png") no-repeat #1d5930;
	background-size: calc(var(--vwl) * 2vmin);
	background-position: calc(var(--vwl) * 0.4vmin) calc(var(--vwl) * 0.5vmin);
}

#game-players .selected {
	background-color: #4e8065;
}

#game-players .active:HOVER {
	cursor: pointer;
	background-color: #777;
}

#bottom-board {
	height: calc(var(--vwl) * 10vmin);
}

#game-drop {
	height: calc(var(--vwl) * 7vmin);
	display: inline-block;
	white-space: nowrap;
	background: transparent;
	min-width: calc(var(--vwl) * 58.3vmin);
}

.formation {
	border: none;
	padding: 0;
	display: inline-block;
	background: transparent;
	color: #86fe7f;
	font-size: small;
	font-weight: bold;
	border-radius: calc(var(--vwl) * 1vmin);
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	margin-top: calc(var(--vwl) * 1vmin);
	margin-left: calc(var(--vwl) * 1vmin);
}

.card {
	width: calc(var(--vwl) * 4.7vmin);
	height: calc(var(--vwl) * 7vmin);
	border: black calc(var(--vwl) * 0.1vmin) solid;
	background: #faf8d4;
	text-align: center;
	display: inline-block;
	border-radius: calc(var(--vwl) * 0.5vmin);
	margin-left: calc(var(--vwl) * 0.1vmin);
	overflow: hidden;
}

.gold {
	background: #c0a031 url("../img/gold-card.png") no-repeat;
	background-size: cover;
}

.card .number {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size: calc(var(--vwl) * 3vmin);
	font-weight: bolder;
	font-synthesis: weight;
	text-shadow: calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) #100e39;
	font-family: remi-font;
	height: calc(var(--vwl) * 3.3vmin);
	overflow: hidden;
}

.card .text {
	color: #f1fff1;
	text-shadow: calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) #4aba18;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size: large;
	font-weight: bold;
	margin-top: calc(var(--vwl) * 1.2vmin);
	font-size: calc(var(--vwl) * 1.2vmin);
}

#gold-card .card {
	cursor: default;
}

#game-drop .card {
	background: #c2c0a6;
	cursor: default;
}

#game-drop .hand {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	font-size: calc(var(--vwl) * 1.2vmin);
	text-shadow: calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) #66a470;
	font-family: remi-font;
	overflow: hidden;
	display: inline-block;
	margin-left: calc(var(--vwl) * 0.1vmin);
	width: calc(var(--vwl) * 1.5vmin);
	height: calc(var(--vwl) * 7vmin);
	text-align: right;
	color: #1d5930;
}

#gold-card .active {
	cursor: move;
}

#game-drop .active {
	background: #faf8d4;
	cursor: move;
}

.active:HOVER {
	cursor: move;
}

.inactive:HOVER {
	cursor: default;
}

/*--------------------
Chat
--------------------*/
.chat {
	height: calc(var(--vwl) * 33vmin);
	float: right;
	width: calc(var(--vwl) * 22vmin);
	clear: none;
	z-index: 2;
	overflow: hidden;
	box-shadow: 0 calc(var(--vwl) * 0.3vmin) calc(var(--vwl) * 0.3vmin) rgba(0, 0, 0, 0.2);
	background: rgba(0, 0, 0, 0.5);
	border-radius: calc(var(--vwl) * 0.8vmin);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	border: calc(var(--vwl) * 0.1vmin) solid #25682a;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/*--------------------
Chat Title
--------------------*/
.chat-title {
	/* -webkit-box-flex: 0;
	-ms-flex: 0 1 calc(var(--vwl) * 3.4vmin);
	flex: 0 1 calc(var(--vwl) * 3.4vmin); */
	position: relative;
	z-index: 2;
	background: rgba(0, 0, 0, 0.2);
	color: #fff;
	text-transform: uppercase;
	text-align: left;
	padding: calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 4vmin);
	height: calc(var(--vwl) * 2.6vmin);
}

.chat-title h1, .chat-title h2 {
	font-weight: normal;
	font-size: calc(var(--vwl) * 0.8vmin);
	margin: 0;
	padding: 0;
}

.chat-title h2 {
	color: rgba(255, 255, 255, 0.5);
	font-size: calc(var(--vwl) * 0.5vmin);
	letter-spacing: calc(var(--vwl) * 0.1vmin);
}

.chat-title .avatar {
	position: absolute;
	z-index: 1;
	top: calc(var(--vwl) * 0.5vmin);
	left: calc(var(--vwl) * 0.65vmin);
	border-radius: calc(var(--vwl) * 1.8vmin);
	width: calc(var(--vwl) * 1.8vmin);
	height: calc(var(--vwl) * 1.8vmin);
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: calc(var(--vwl) * 0.1vmin) solid rgba(255, 255, 255, 0.24);
}

.chat-title .avatar img {
	width: 100%;
	height: auto;
}

/*--------------------
Messages
--------------------*/
.messages {
	-webkit-box-flex: 1;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	color: rgba(255, 255, 255, 0.5);
	overflow: hidden;
	position: relative;
	width: calc(var(--vwl) * 21.5vmin);
	height: calc(var(--vwl) * 23vmin);
	overflow-y: scroll;
	overflow-wrap: break-word;
	background: rgb(29, 89, 48);
}

.messages .messages-content {
	top: 0;
	left: 0;
	height: 101%;
	width: 100%;
}

.messages .message {
	clear: both;
	float: left;
	padding: calc(var(--vwl) * 0.3vmin) calc(var(--vwl) * 1vmin) calc(var(--vwl) * 0.5vmin);
	border-radius: calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0.8vmin) 0;
	background: rgba(0, 0, 0, 0.3);
	margin: calc(var(--vwl) * 0.8vmin) calc(var(--vwl) * 0vmin);
	font-size: calc(var(--vwl) * 0.875vmin);
	line-height: 1.4;
	margin-left: calc(var(--vwl) * 2.2vmin);
	position: relative;
	text-shadow: 0 calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * 0.1vmin) rgba(0, 0, 0, 0.2);
	max-width: calc(var(--vwl) * 16vmin);
}

.messages .jspTrack {
	background: #1a1a22;
}

.messages .message .timestamp {
	position: absolute;
	bottom: calc(var(--vwl) * -1.1vmin);
	font-size: calc(var(--vwl) * 0.8vmin);
	color: rgba(255, 255, 255, 0.3);
}

.messages .message::before {
	content: '';
	position: absolute;
	bottom: calc(var(--vwl) * -0.6vmin);
	border-top: calc(var(--vwl) * 0.6vmin) solid rgba(0, 0, 0, 0.3);
	left: 0;
	border-right: calc(var(--vwl) * 0.6vmin) solid transparent;
}

.messages .message .avatar {
	position: absolute;
	z-index: 1;
	bottom: calc(var(--vwl) * -1vmin);
	left: calc(var(--vwl) * -2.0vmin);
	border-radius: calc(var(--vwl) * 2vmin);
	width: calc(var(--vwl) * 2vmin);
	height: calc(var(--vwl) * 2vmin);
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: calc(var(--vwl) * 0.1vmin) solid rgba(255, 255, 255, 0.24);
}

.messages .message .avatar img {
	width: 100%;
	height: auto;
}

.messages .message.message-personal {
	float: right;
	color: #fff;
	text-align: right;
	background: -webkit-linear-gradient(330deg, #248A52, #257287);
	background: linear-gradient(120deg, #248A52, #257287);
	border-radius: calc(var(--vwl) * 1vmin) calc(var(--vwl) * 1vmin) calc(var(--vwl) * 0vmin) calc(var(--vwl) * 1vmin);
}

.messages .message.message-personal::before {
	left: auto;
	right: 0;
	border-right: none;
	border-left: calc(var(--vwl) * 0.4vmin) solid transparent;
	border-top: calc(var(--vwl) * 0.3vmin) solid #257287;
	bottom: calc(var(--vwl) * -0.3vmin);
}

.messages .message:last-child {
	margin-bottom: calc(var(--vwl) * 3vmin);
}

.messages .message.new {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-animation: bounce 500ms linear both;
	animation: bounce 500ms linear both;
}

.messages .message.loading::before {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: '';
	display: block;
	width: calc(var(--vwl) * 0.3vmin);
	height: calc(var(--vwl) * 0.3vmin);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	z-index: 2;
	margin-top: calc(var(--vwl) * 0.3vmin);
	-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate
		infinite;
	animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
	border: none;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}

.messages .message.loading span {
	display: block;
	font-size: 0;
	width: calc(var(--vwl) * 1.5vmin);
	height: calc(var(--vwl) * 1vmin);
	position: relative;
}

.messages .message.loading span::before {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: '';
	display: block;
	width: calc(var(--vwl) * 0.3vmin);
	height: calc(var(--vwl) * 0.3vmin);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	z-index: 2;
	margin-top: calc(var(--vwl) * 0.3vmin);
	-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate
		infinite;
	animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
	margin-left: calc(var(--vwl) * -0.6vmin);
}

.messages .message.loading span::after {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	content: '';
	display: block;
	width: calc(var(--vwl) * 0.3vmin);
	height: calc(var(--vwl) * 0.3vmin);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.5);
	z-index: 2;
	margin-top: calc(var(--vwl) * 0.3vmin);
	-webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate
		infinite;
	animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;
	margin-left: calc(var(--vwl) * 0.6vmin);
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}

/*--------------------
Message Box
--------------------*/
.message-box {
	-webkit-box-flex: 0;
	-ms-flex: 0 1 calc(var(--vwl) * 3.5vmin);
	flex: 0 1 calc(var(--vwl) * 3.5vmin);
	width: calc(var(--vwl) * 22vmin);
	background: rgba(0, 0, 0, 0.3);
	padding: calc(var(--vwl) * 0.7vmin);
	position: relative;
}

.message-box .message-input {
	background: none;
	border: none;
	outline: none !important;
	resize: none;
	color: #fff;
	font-size: calc(var(--vwl) * 0.875vmin);
	margin: 0;
	width: calc(var(--vwl) * 15vmin);
	height: calc(var(--vwl) * 4vmin);
}

.message-box textarea:focus:-webkit-placeholder {
	color: transparent;
}

.message-box .message-submit {
	z-index: 1;
	top: calc(var(--vwl) * 1vmin);
	right: calc(var(--vwl) * 1vmin);
	color: #fff;
	border: none;
	background: #248A52;
	font-size: calc(var(--vwl) * 0.875vmin);
	text-transform: uppercase;
	line-height: 1;
	padding: calc(var(--vwl) * 0.4vmin) calc(var(--vwl) * 1vmin);
	border-radius: calc(var(--vwl) * 1vmin);
	outline: none !important;
	-webkit-transition: background .2s ease;
	transition: background .2s ease;
	float: right;
	margin-right: calc(var(--vwl) * 1.5vmin);
}

.message-box .message-submit:hover {
	background: #1D7745;
}

/*--------------------
Custom Srollbar
--------------------*/
.mCSB_scrollTools {
	margin: calc(var(--vwl) * 0.1vmin) calc(var(--vwl) * -0.2vmin) calc(var(--vwl) * 0.1vmin) 0;
	opacity: 0;
}

.mCSB_inside>.mCSB_container {
	margin-right: calc(var(--vwl) * 0vmin);
	padding: 0 calc(var(--vwl) * 0.7vmin);
}

.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
	background-color: rgba(0, 0, 0, 0.5) !important;
}