@font-face {
	font-family: 'avenir-regular';
	src: url(../php/vendor/fonts/AvenirNext-Regular.ttf) format('truetype');
	src: url(../php/vendor/fonts/AvenirNext-Regular.eot) format('truetype');
	src: url(../php/vendor/fonts/AvenirNext-Regular.otf) format('truetype');
	src: url(../php/vendor/fonts/AvenirNext-Regular.svg) format('truetype');
	src: url(../php/vendor/fonts/AvenirNext-Regular.woff) format('truetype');
	src: url(../php/vendor/fonts/AvenirNext-Regular.woff2) format('truetype');
}
@font-face {
	font-family: 'avenir-black';
	src: url(../php/vendor/fonts/AvenirLT_Black.ttf) format('truetype');
	src: url(../php/vendor/fonts/AvenirLT_Black.eot) format('truetype');
	src: url(../php/vendor/fonts/AvenirLT_Black.svg) format('truetype');
	src: url(../php/vendor/fonts/AvenirLT_Black.woff) format('truetype');
	src: url(../php/vendor/fonts/AvenirLT_Black.woff2) format('truetype');
}
@font-face {
	font-family: 'avenir-heavy';
	src: url(../php/vendor/fonts/AvenirNext_Heavy.otf);
	src: url(../php/vendor/fonts/AvenirNext_Heavy.ttf);
	src: url(../php/vendor/fonts/AvenirNext_Heavy.eot);
	src: url(../php/vendor/fonts/AvenirNext_Heavy.svg);
	src: url(../php/vendor/fonts/AvenirNext_Heavy.woff);
	src: url(../php/vendor/fonts/AvenirNext_Heavy.woff2);
}

body {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	
	position: relative;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 14px;

	/*background: #333;*/
	color: #222;

	-ms-overflow-style: none;
	overflow: -moz-scrollbars-none;
}
body::-webkit-scrollbar { width: 0 !important }

h1 {
	margin: 0px;
	padding-bottom: 20px;
	/*font-family: 'avenir-heavy';*/
	font-size: 32px;
	line-height: 30px;
    font-style: italic;
}

p {
	margin-bottom: 0px;
	padding-bottom: 20px;
}

a {
	cursor: pointer;
}

a:hover{
	text-decoration: none;
}

tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.05);
}

/*.admin-table tr td:first-child,
.admin-table tr th:first-child {
	padding-left: 5px;
}*/
.admin-table tr td:first-child {
	text-indent: 10px;
}

.admin-table td {
    vertical-align: top;
    padding: 5px;
    font-size: 12px;
}

.admin-table td.upload {
    vertical-align: middle;
}

.admin-table img {
    display: block;
    max-width: 100%;
}

.display-table {
	display: table;
}

.display-table-cell {
	display: table-cell;
	float: none !important;
}

.vertical-middle {
	vertical-align: middle;
}

/* --------- MAIN CONTENT ---------- */

.create-room {
	margin-bottom: 20px;
}

.room-user-action {
	padding: 20px;
}

.form-group span {
    padding-right: 10px;
}

.game-select .btn {
    background: #ccc;
}
.game-select .btn.is-host{
	cursor: pointer;
}

.game-select .selected .btn {
    background: #007bff;
    color: white;
}

.game-select .btn .title {
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
}

.card.leaderboard {
    border: none;
    border-top: rgba(0,0,0,.125) solid 1px;
    margin-top: 20px;
    border-radius: unset;
}

/* ---------- MAIN GAME PORTRAIT WARNING ---------- */
.warning {
    display: none;
    color: #f27474;

    position: fixed;
    left: 50%;
    top: 50%;
    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.portrait .warning {
    display: block;
}

.portrait #gameDiv,
.portrait .score-row {
    display: none;
}

#gameDiv canvas {
    margin: 0px auto !important;
}
.fullscreen .container {
    max-width: unset;
}
.fullscreen #gameDiv {
    height: 100vh !important;
}

/* ---------- MAIN GAME SCORE TABLE ---------- */
.display-score {
    padding: 10px;
}

.display-score .table {
    margin-bottom: 0px;
}

.table td, .table th {
    padding: 5px;
}

.table thead th {
    font-weight: bold;
    background: #28a745;
    color: white;
}

.table td {
    font-size: 11px;
    font-weight: normal;
}

/* ========= MOBILE RESPONSIVE ========== */

.game.isMobile .container {
    max-width: unset;
}

@media only screen and (min-width : 481px) {
   .flex-row.row {
	 display: flex;
	 flex-wrap: wrap;
   }
   .flex-row.row > [class*='col-'] {
	 display: flex;
	 flex-direction: column;
   }
  .flex-row.row:after, 
  .flex-row.row:before {
	 display: flex;
  }
}