@font-face {
  font-family: 'CFCrayons';
  src: url('../font/CFCrayons-Regular.ttf?niykz5') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
	font-family: 'Handshrift';
	src: url('../font/ursula-handschrift.ttf');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Roboto";
	src: url("../font/Roboto-Regular.ttf");
}
@font-face {
	font-family: 'RobotoBold';
	src: url('../font/Roboto-Bold.ttf');
	font-weight: normal;
	font-style: normal;
}

body {
	padding-top: 64px;
	background-image: linear-gradient(to bottom, #e0fce6, rgba(231, 224, 255, 0.1)), url(../img/nutivillak_field.png);
	background-repeat: repeat-x;
	background-position: bottom;
	background-size: contain;
	min-height: 100vh;
    color: rgb(70, 70, 80);
    background-color: #fefefe;
    touch-action: manipulation;
}

h1, h2, h3, h4, h5, h6 {
    color: rgb(60, 60, 70);
}
input, .input, button, .button {
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.button.js-dialog-close {
	background-color: #143D59;
	color: white;
}

.input .prepend {
	color: #143D59 !important;
    background-color: transparent !important;
}

.file .prepend, .input .prepend, .select .prepend, .textarea .prepend, .tag-input .prepend, .spinner .prepend, .file .append, .input .append, .select .append, .textarea .append, .tag-input .append, .spinner .append {
	color: #143D59;
}

.header, .h3, h3 {
	font-weight: 400;
	font-size: 1.75rem;
}

.login-form {
    width: 350px;
    height: auto;
    top: 50%;
    margin-top: 0px;
}

.player-form {
	width: 100%;
	height: 72vh;
	top: 50%;
	margin-top: 0px;
	padding: 6px 8px 8px 8px !important;
	max-width: 500px;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.player-form h3 {
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 24px;
	line-height: 30px;
}
.circle {
    background-color:#fff;
	border: 3px solid #143D59;
    height:200px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
    width:200px;
	margin: 50px;
}

.minw300{
	min-width: 300px;
}

.minw320{
	min-width: 320px;
}

.minh300{
	min-height: 300px;
}

.maxw400{
	max-width: 400px;
}

.maxw500{
    max-width: 500px;
}

.join-game, .play-game {
	max-width: 440px;
	margin: 0 auto;
	width: 100%;
}

@media (min-width: 576px) {
	.join-game, .play-game {
		margin-bottom: 16px;
	}
}

@media (min-width: 788px) {
	.join-game, .play-game {
		box-shadow: -4px 4px 10px 3px rgba(0,0,0,0.15);
		padding: 24px 24px;
		border-radius: 4px;
		margin-bottom: 16px;
		float: right;
		background: white;
	}
}

.clickable:hover {
	cursor: pointer;
}

.customtable a {
	color: #143D59 !important;
}

.customtable a:hover {
	color: #143D59;
    text-decoration: none;
}

.desktop_only {
	display: none !important;
}

@media (min-width: 576px) {
	.desktop_only {
		display: block !important;
	}
}

#customGSignInButton span {
	vertical-align: super !important;
	line-height: 36px;
}

.button.customicon {
	font-size: 12px;
	padding: 0px;
	height: 35px;
	line-height: 30px;
	vertical-align: text-top;
	margin: 5px 5px 5px 0px;
}

.button.customicon img {
	height: 1.9rem;
}

.customcollapse tbody tr td {
	font-weight: bold;
}

.customcollapse tbody tr td + td {
	font-weight: normal;
}

.container-fluid {
    z-index: 1000;
}

.dataTable.w-100 {
    max-width: calc(100% - 28px);
}

.dataTables_processing {
	top: 80px;
	width: 100%;
	text-align: center;
	height: 100vh;
	width: 100vw;
	background-color: rgba(0,0,0,0.4);
	position: fixed;
	left: 0px;
	top: 0px;
	/* margin: auto; */
}

.dataTables_filter label {
	max-width: 350px;
	float: right;
}

.clickedit {
	cursor: pointer;
}

.googleButton:hover {
	background-color: transparent !important;
}

.logo-style {
	font-family: 'Handshrift';
	height: 40px;
	line-height: 50px;
	font-size: 2rem;
	width: 100%;
	color: rgb(255,128,0) !important;
	/*text-shadow: -2px 2px 2px rgba(249,212,119,1);*/
}

.logo-style-left {
	font-family: 'Handshrift';
	height: 40px;
	line-height: 50px;
	font-size: 2rem;
	width: 100%;
	color: #143D59;
}

.app-bar-expand .brand, .app-bar-expand .app-bar-item, .app-bar-expand .app-bar-container {
	background-color: transparent;
}

.app-bar {
	min-height: 50px;
	background-color: #fefefe;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 100% !important;
	-webkit-transition: all .5s ease !important;
	-moz-transition: all .5s ease !important;
	-o-transition: all .5s ease !important;
	transition: all .5s ease !important;
}

.app-bar .app-bar-menu {
	background-color: transparent;
}

.app-bar .hamburger {
	height: 50px;
	width: 50px;
	padding-right: 36px;
}
.hamburger.menu-down.active {
	padding-top: 18px;
}

.app-bar .brand, .app-bar .app-bar-item, .app-bar .app-bar-container, .app-bar .app-bar-button {
	height: 50px;
	line-height: 50px;
	padding: 0 4px 0 16px;
}

.app-bar .app-bar-menu > li > a {
	font-weight: bold;
	text-transform: uppercase;
}

.app-bar .brand:not(.no-hover):hover, .app-bar .app-bar-menu li:not(.no-hover):hover, .app-bar .hamburger:not(.no-hover):hover, .app-bar .app-bar-item:not(.no-hover):hover, .app-bar .brand:not(.no-hover):active, .app-bar .app-bar-menu li:not(.no-hover):active, .app-bar .hamburger:not(.no-hover):active, .app-bar .app-bar-item:not(.no-hover):active, .app-bar .brand:not(.no-hover) .active, .app-bar .app-bar-menu li:not(.no-hover) .active, .app-bar .hamburger:not(.no-hover) .active, .app-bar .app-bar-item:not(.no-hover) .active {
	background: transparent;
}

.app-bar .app-bar-menu > li, .app-bar .app-bar-menu > li > a {
	line-height: 50px;
	/*cursor: pointer;*/
}

.app-bar .app-bar-menu > li > a {
	height: 30px !important;
	line-height: 36px !important;
    margin: 12px 0px;
	padding: 0 6px;
	color: #143D59;
	letter-spacing: 0.8px;
	font-family: 'Handshrift';
	font-size: 21px;
	font-weight: normal;
}

.app-bar-item:hover, .app-bar-item:active, .app-bar-item:focus {
	color: rgba(0,0,0,0.5) !important;
	-webkit-transition: all .5s ease !important;
	-moz-transition: all .5s ease !important;
	-o-transition: all .5s ease !important;
	transition: all .5s ease !important;
}

.dialog.warning {
	border: none;
}

.dialog.warning .dialog-title {
	background-color: #ff9447;
	border-bottom-color: #ff9447;
	color: #ffffff;
	padding: 12px 12px 10px 24px !important;
}

.app-bar-expand .app-bar-menu .d-menu {
	width: 100%;
}
.app-bar.app-bar-collapsed {
	min-height: 50px;
	box-shadow: 0px 1px 5px rgba(0,0,0,0.2);
	-webkit-transition: all .5s ease !important;
	-moz-transition: all .5s ease !important;
	-o-transition: all .5s ease !important;
	transition: all .5s ease !important;
}

.app-bar-item.border-left {
    border-left: 2px solid #143D59 !important;
}

.modalSubHeader {
	font-size: 18px;

}
.modalSubForm {
	padding: 25px;
	box-shadow: 0 0 5px 3px rgba(0,0,0,0.1);
}
.button.closer {
	background-color: transparent;
}

.dialog .closer::before {
	display: block;
	content: "\00d7";
	font-size: 46px;
	color: #143D59;
	margin-top: -6px;
}

.dialog {
	max-width: calc(100vw - 50px);
	max-height: calc(100vh - 50px);
    border-radius: 4px;
}

.app-bar-item img {
	height: 25px;
	width: auto;
	margin: 0px 4px 0px 0px;
	vertical-align: sub;
}
.app-bar-item:hover {
	color: rgb(255,128,0) !important;
	-webkit-transition: all .2s ease !important;
	-moz-transition: all .2s ease !important;
	-o-transition: all .2s ease !important;
	transition: all .2s ease !important;
}
.app-bar-item:hover img {
	/*height: 26px;
	margin: 0px 7px;*/
	-webkit-transition: all .2s ease !important;
	-moz-transition: all .2s ease !important;
	-o-transition: all .2s ease !important;
	transition: all .2s ease !important;
	/*filter: invert(1);*/
}

.app-bar-item .fa-instagram {
	font-size: 26px;
}

.app-bar-item .fa-facebook {
	font-size: 23px;
	margin-top: -1px;
}

@media screen and (max-width: 991px) {
	.app-bar-item.border-left {
		border: none !important;
	}

	.app-bar {
		min-height: 50px !important;
		box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2) !important;
		background-color: white !important;
		-webkit-transition: all .5s ease !important;
		-moz-transition: all .5s ease !important;
		-o-transition: all .5s ease !important;
		transition: all .5s ease !important;
	}
	.app-bar .app-bar-menu > li > a {
		padding: 0 24px !important;
	}
	#playTheme {
		display: none;
	}
	#stopTheme {
		display: none;
	}

    .default-menu {
        display: none !important;
    }

    .app-bar-menu.mobile-menu {
		height: calc(100vh - 50px);
		text-align: center;
		margin-top: calc((100vh - 500px) / 2);
	}

    .app-bar-menu.mobile-menu li > a {
        font-size: 25px !important;
    }

    .globe {
        margin-left: 0px !important;
    }
}

.adminBar h2 {
	font-family: 'Handshrift';
}

#instructionsBox h5 {
	font-family: 'Handshrift';
}
.gamecode {
	color:rgb(230, 174, 72);
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;
}

.joingame {
	background-color: #143D59 !important;
	outline-color: none !important;
	color: whitesmoke !important;
	border: none;
	border-radius: 4px;
	font-size: 16px;
	-webkit-transition: all .5s ease !important;
	-moz-transition: all .5s ease !important;
	-o-transition: all .5s ease !important;
	transition: all .5s ease !important;
}
.joingame:hover {
	color: whitesmoke !important;
	font-size: 16px;
	background-color: rgb(255,128,0) !important;
	-webkit-transition: all .5s ease !important;
	-moz-transition: all .5s ease !important;
	-o-transition: all .5s ease !important;
	transition: all .5s ease !important;
}

.dataTable {
    background-color: transparent;
    margin: 16px;
    border-radius: 4px;
}
.dataTable tr, .dataTable td {
	min-width: 50px !important;
}

.dataTable tbody tr:hover {
	background-color: #143D59 !important;
	color: white;
}

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
	background-color: rgba(255, 255, 255, 0.1);
}
::-webkit-scrollbar-thumb {
	border-radius: 25px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
	background-color: #143D59;
}
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgb(255,128,0,0.5);
	border-radius: 10px;
	background-color: white;
}

.abcRioButton {
    min-width: 150px !important;
}

@media screen and (max-width: 1200px) {
    .img-container img, .img-container svg, #jeopardy_world_svg {
        max-width: 300px !important;
    }
	.dataTables_wrapper {
		overflow: hidden;
	}
	.dataTable.w-100 {
		width: calc(100vw - 28px) !important;
		overflow: auto;
		display: block;
	}
}

@media screen and (min-width: 1600px) {
	.app-bar {
		margin: 0px calc((100% - 1460px) / 2);
		width: 1460px;
		max-width: 1600px;
		padding: 0px calc((6%) / 2);
	}
}

@media screen and (max-width: 1900px) {
    .img-container img, .img-container svg, #jeopardy_world_svg {
        max-width: 380px !important;
	}
}

@media screen and (min-width: 600px) {
	.table tbody td, .table .tbody td, .table tbody .td, .table .tbody .td {
		padding: 0.6rem 0.4rem !important;
	}
}

@media screen and (min-width: 1200px) {
	.table tbody td, .table .tbody td, .table tbody .td, .table .tbody .td {
		padding: 0.7rem 0.4rem !important;
	}

    .globe {
        margin-left: 4px !important;
    }
}

@media screen and (min-width: 1901px) {
	.img-container {
		padding: 2px !important;
	}

    .img-container img, .img-container svg, #jeopardy_world_svg {
        max-width: 380px !important;
    }

	.table tbody td, .table .tbody td, .table tbody .td, .table .tbody .td {
		padding: 0.8rem 0.4rem !important;
	}
}

.stat-row {
	max-width: 1000px;
	margin: auto;
    padding: 24px 0px 24px;
}
.stat-container {
	text-align: center;
    width: 120px;
    height: 120px;
	margin: auto;
    /*border: 1px solid whitesmoke !important;
    border-radius: 50%;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, .5), inset 0px 3px 1px 1px white, inset 0px -2px 1px 1px rgba(204, 198, 197, .5);
    background-color: rgba(255,250,250,0.9);*/
	cursor: default;
    /*background-image: -webkit-linear-gradient(top, whitesmoke, #fff);
    background-image: linear-gradient(top, whitesmoke, #fff);*/
}
.stat-container:hover {
	/*background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);*/
	/*background-image: linear-gradient(top, #fff, #f4f1ee);*/
}
.stat-cell {
	margin: 0px 32px;
}

/*.stat-cell:hover {
	-webkit-animation: bounce 1s ease-in-out !important;
	-moz-animation: bounce 1s ease-in-out !important;
	-o-animation: bounce 1s ease-in-out !important;
}*/
.stat-container img {
    width: 1.2em;
}
.stat-circle {
    font-size: 0.9em;
	color: #143D59;
	font-weight: bold;
}
.stat-fact {
    font-size: 1.5rem;
	font-weight: bold;
	color: rgb(255,128,0);
}
.bounce1 {
	-webkit-animation: bounce 2s 4s ease-in-out;
	-moz-animation: bounce 2s 4s ease-in-out;
	-o-animation: bounce 2s 4s ease-in-out;
}
.bounce2 {
	-webkit-animation: bounce 2s 5s ease-in-out;
	-moz-animation: bounce 2s 5s ease-in-out;
	-o-animation: bounce 2s 5s ease-in-out;
}
.bounce3 {
	-webkit-animation: bounce 2s 6s ease-in-out;
	-moz-animation: bounce 2s 6s ease-in-out;
	-o-animation: bounce 2s 6s ease-in-out;
}

/* --------------------------------
ANIMATION
*/


@keyframes bounce{
	0% {
		transform:  translate(0px,0px)  ;
	}
	50% {
        transform: translate(0px, -16px);
	}
	100% {
		transform:  translate(0px,0px)  ;
	}
}

@-moz-keyframes bounce{
	0% {
		-moz-transform:  translate(0px,0px)  ;
	}
	50% {
        -moz-transform: translate(0px, -16px);
	}
	100% {
		-moz-transform:  translate(0px,0px)  ;
	}
}

@-webkit-keyframes bounce {
	0% {
		-webkit-transform:  translate(0px,0px)  ;
	}
	50% {
        -webkit-transform: translate(0px, -16px);
	}
	100% {
		-webkit-transform:  translate(0px,0px)  ;
	}
}

@-o-keyframes bounce {
	0% {
		-o-transform:  translate(0px,0px)  ;
	}
	50% {
        -o-transform: translate(0px, -16px);
	}
	100% {
		-o-transform:  translate(0px,0px)  ;
	}
}

@-ms-keyframes bounce {
	0% {
		-ms-transform:  translate(0px,0px)  ;
	}
	50% {
        -ms-transform: translate(0px, -16px);
	}
	100% {
		-ms-transform:  translate(0px,0px)  ;
	}
}

.fb-share-button {
	-webkit-animation: 3s ease 0s normal forwards 1 fadein;
	-moz-animation: 3s ease 0s normal forwards 1 fadein;
	animation: 3s ease 0s normal forwards 1 fadein;
}

@keyframes fadein{
	0% { opacity:0; }
	66% { opacity:0; }
	100% { opacity:1; }
}

@-webkit-keyframes fadein{
	0% { opacity:0; }
	66% { opacity:0; }
	100% { opacity:1; }
}

.dataTables_paginate .current {
	background-color: rgb(255,128,0) !important;
	color: #143D59 !important;
}

.dataTables_paginate .next, .dataTables_paginate .previous, .dataTables_paginate span a {
	cursor: pointer;
	display: block;
	position: relative;
	padding: .5rem .75rem;
	line-height: 1;
	font-size: 1rem;
	text-decoration: none;
	background-color: #fff;
	color: #1d1d1d;
	border: 1px solid #dfdfdf;
	margin: .25rem;
	border-radius: 3px;
	background-color: #143D59;
	border: 0px none;
	color: whitesmoke !important;
	font-weight: normal;
}

.dataTables_wrapper {
    padding-bottom: 32px;
}

.dataTables_paginate span {
    line-height: 40px;
    margin: 0px 6px;
}

.dataTables_filter, .dataTables_length {
    margin-right: 16px;
}

.table tbody td, .table .tbody td, .table tbody .td, .table .tbody .td {
    padding: 0.48rem;
}

.customNoFilter thead {
    border-bottom: 4px solid rgba(249,212,119,1);
}
.customNoFilter .sorting, .sorting_asc, .sorting_desc {
	 background-color: transparent !important;
	 padding: 10px 24px 10px 4px !important;
 }
.customNoFilter .sorting_asc, .customNoFilter .sorting_desc {
	color: rgb(255,128,0);
	cursor: pointer;
}
.customNoFilter th, .customNoFilter .th {
	vertical-align: middle;
	white-space: nowrap;
}

@media screen and (max-width: 600px) {
	.stat-fact {
		font-size: 1em;
		line-height: 1em;
	}
	.stat-container {
        width: 100px;
        height: 100px;
		padding: 0px !important;
	}
	.stat-circle {
		font-size: 0.8em;
	}
	.stat-container img {
		width: 1.2em;
        margin: 14px 0px 4px 0px;
	}
	.minw300{
		min-width: 240px;
	}
	.stat-cell {
		margin: 8px 0px;
	}
	.container-fluid {
		width: 100%;
	}
	body {
		background-image: linear-gradient(to bottom, #e0fce6, rgba(231, 224, 255, 0.1)), url("../img/forrest.png");
	}
}

.dataTables_paginate .next:hover, .dataTables_paginate .previous:hover, .dataTables_paginate span a:hover {
	background-color: rgb(255,128,0);
	color: #143D59 !important;
}

.itanic-spinner-border {
	display: inline-block;
	vertical-align: text-bottom;
	border: .125em solid rgb(255,128,0);
	border-right-color: transparent;
	-webkit-animation: spinner-border 3s linear infinite;
	animation: itanic-spinner-border 3s linear infinite;
}

.itanic-spinner-content {
	background-image: url('../img/nutivillak.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 80px;
	background-color: white;
	margin: auto;
}

.itanic-spinner-border, .itanic-spinner-content {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	z-index: 1;
	top: calc(50% - 50px);
}

@keyframes itanic-spinner-border {
	to {
		transform: rotate(360deg);
	}
}

.ajax-lister-container {
	min-height: 100px;
}

.ajax-lister-container .itanic-spinner-container {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	background: rgba(245, 245, 245, 0.7);
}

.ajax-lister-container .itanic-spinner-content {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	position: fixed;
}
.itanic-spinner-container {
	height: 100% !important;
}
.dataTables_paginate {
	margin: auto;
}

.gamelist-filter-box {
	text-align: center;
	max-width: 600px;
	margin: auto;
	width: 100%;
	white-space: nowrap;
	display: flex;
}
.gamelist-filter-box a:hover {
	opacity: 1;
	color: #143D59;
}
.gamelist-filter-box img {
	opacity: 0.5;
}
.gamelist-filter-box a.active, .gamelist-filter-box a.active img {
	color: #143D59;
    opacity: 1;
}
.gamelist-filter-box a:hover img {
	opacity: 1;
}
.gamelist-filter-box button {
	color: rgba(0,0,0,0.3);
}
.gamelist-filter-button-left {
	padding: 12px 12px 6px 32px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
}

.gamelist-filter-button-left, .gamelist-filter-button-right {
	line-height: 18px;
	font-family: "Roboto";
	font-size: 18px;
	font-weight: normal;
	border: 1px solid lightgrey;
	border-radius: 2px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	background-color: rgba(255,250,250,0.9);
	background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
	background-image: linear-gradient(top, #f4f1ee, #fff);
	width: 100%;
	max-width: 300px;
	cursor: pointer;
	color: lightgray;
}
.gamelist-filter-box a.active span {
	opacity: 1;
}
.gamelist-filter-box a span {
	opacity: 0;
}
.gamelist-filter-button-left span, .gamelist-filter-button-right span {
	font-size: 16px;
	margin: 0px 8px 0px 0px;
	line-height: 25px;
	vertical-align: text-top;
}
.gamelist-filter-button-right {
	padding: 12px 64px 6px 24px;
	border-top-right-radius: 50px;
	border-bottom-right-radius: 50px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
}
.gamelist-filter-button-left {
	padding: 12px 24px 6px 64px;
	border-top-left-radius: 50px;
	border-bottom-left-radius: 50px;
	-webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	-moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
	box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
}
button {
    outline: 0;
}
button:focus {
	outline: 0;
}
.suggested-game {
	width: 24px;
	margin-top: -3px;
}
a:hover {
	color: lightgrey;
	text-decoration: none;
}

@media only screen and (max-width: 450px) {
    .stat-square {
        width: 100px !important;
        height: 100px !important;
    }
}

@media only screen and (max-width: 600px) {
	.gamelist-filter-box {
		display: block;
	}
	.gamelist-filter-box button {
		padding: 12px 24px 12px 12px !important;
	}

	.gamelist-filter-box {
		white-space: normal !important;
	}

	.gamelist-filter-box {
		white-space: normal !important;
	}

	.gamelist-filter-button-left {
		display: block;
		border-radius: 0px !important;
		border-top-left-radius: 35px !important;
		border-top-right-radius: 35px !important;
		padding: 12px 0px;
		width: 100%;
		margin: auto;
	}

	.gamelist-filter-button-right {
		display: block;
		border-radius: 0px !important;
		border-bottom-left-radius: 35px !important;
		border-bottom-right-radius: 35px !important;
		padding: 12px 0px;
		width: 100%;
		margin: auto;
	}
}

.tippy-popper {
    font-size: 14px;
}
.pressed {
    color: rgb(255,128,0) !important;
}

.debug-table td, .debug-table th {
    font-size: 12px !important;
    min-width: 20px !important;
    padding: 1px 3px !important;
    max-width: 80vw !important;
    border-top: 1px solid;
}

.debug-table {
    width: calc(100% - 24px);
}

.container-debug {
    font-size: 12px !important;
    padding: 2px 12px !important;
	z-index: 9999;
}

.show-history-btn {
    cursor: pointer;
}

@media only screen and (max-width: 1200px) {
    .app-bar {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0px auto !important;
		padding: 0px 4px !important;
    }

    .brand {
        padding: 0px !important;
    }

    .mr-4 {
        margin-right: 16px !important;
    }

    .app-bar-item img {
        height: 22px;
        margin: 0px 4px;
    }

    .app-bar .app-bar-menu > li > a {
        height: 30px !important;
        line-height: 36px !important;
        margin: 12px 0px;
        padding: 0 6px;
        font-size: 18px;
    }

    .app-bar-item:hover img {
        /*height: 22px;
        margin: 0px 4px;*/
        -webkit-transition: all .2s ease !important;
        -moz-transition: all .2s ease !important;
        -o-transition: all .2s ease !important;
        transition: all .2s ease !important;
        filter: sepia(1);
    }
}

@media screen and (max-width: 991px) {
    .brand {
        padding: 0px 12px !important;
    }

    .stat-container {
        border-radius: 50% !important;
    }

    .stat-cell {
        margin: 0px 4px;
        padding: 0px;
    }
}

.answerButton {
    touch-action: manipulation;
    box-shadow: rgb(0 0 0 /45%) 1px 1px 0, rgb(0 0 0 /35%) 2px 2px 0, rgb(0 0 0 /25%) 3px 3px 0, rgb(0 0 0 /15%) 4px 4px 0;
}

.answerButton h1 {
    touch-action: manipulation;
    color: #fafafa !important;
}

.fb_iframe_widget span {
    height: 21px !important;
}

.background-icons .player-icon img {
	max-width: 80px;
}

.background-icons {
	position: fixed;
	width: 100vw;
	left: 0;
	top: 400px;
	height: calc(100vh - 400px);
}

.background-icons .player-icon-name {
	background-color: white;
	padding: 0px 16px 2px 16px;
	border-radius: 2px;
}

.background-icons .player-icon {
	position: fixed;
	width: auto;
	text-align: center;
}

.background-icons .player-icon.p1 {
	left: 10vw;
	bottom: 20vh;
}

.background-icons .player-icon.p2 {
	right: 19vw;
	bottom: 17vh;
}

.background-icons .player-icon.p3 {
	right: 36vw;
	bottom: 8vh;
}

.background-icons .player-icon.p4 {
	right: 12vw;
	bottom: 42vh;
}

.background-icons .player-icon.p5 {
	left: 26vw;
	bottom: 12vh;
}

.background-icons .player-icon.p5 img {
	max-height: 60px;
}

.background-icons .player-icon.p6 {
	right: 39vw;
	bottom: 13vh;
}

.supported-formats .cell {
    width: 206px;
}

.gradient-line {
    background: -moz-linear-gradient(left, rgba(252, 252, 252, 0) 5%, rgba(255, 128, 0, 1) 40%, rgba(255, 168, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 95%);
    background: -webkit-linear-gradient(left, rgba(252, 252, 252, 0) 5%, rgba(255, 128, 0, 1) 40%, rgba(255, 168, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 95%);
    background: linear-gradient(to right, rgba(252, 252, 252, 0) 5%, rgba(255, 128, 0, 1) 40%, rgba(255, 168, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 95%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccfcfcfc', endColorstr='#ccfcfcfc', GradientType=1);
    height: 2px;
    border: none;
    outline: none;
}

.gradient-line2 {
    background: -moz-linear-gradient(left, rgba(252, 252, 252, 0) 2%, rgba(255, 128, 0, 1) 40%, rgba(255, 128, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 98%);
    background: -webkit-linear-gradient(left, rgba(252, 252, 252, 0) 2%, rgba(255, 128, 0, 1) 40%, rgba(255, 128, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 98%);
    background: linear-gradient(to right, rgba(252, 252, 252, 0) 2%, rgba(255, 128, 0, 1) 40%, rgba(255, 128, 0, 1) 50%, rgba(255, 128, 0, 1) 60%, rgba(252, 252, 252, 0) 98%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccfcfcfc', endColorstr='#ccfcfcfc', GradientType=1);
    height: 2px;
    border: none;
    outline: none;
}

.section-title:empty {
    opacity: 0;
    transform: translateX(16px);
}

.section-title {
    transition-property: opacity, transform;
    transition-duration: 1.2s;
    transition-timing-function: cubic-bezier(.1, .6, 0, 1);
}

.img-container object {
    width: 100%;
    max-width: 100%;
    height: auto;
    position: relative;
}

.jeopardy-world-logo {
    text-shadow: 2px 1px 1px rgb(215 215 215), 2px 1px 1px rgb(235 235 235), 1px 2px 1px rgb(235 235 235), 1px 3px 1px rgb(235 235 235), 1px 4px 1px rgb(235 235 235), 2px 6px 1px rgb(0 0 0 / 20%), 1px 8px 6px rgb(16 16 16 / 40%), 1px 10px 10px rgb(16 16 16 / 20%), 1px 12px 35px rgb(16 16 16 / 20%), 1px 14px 60px rgb(16 16 16 / 40%);
    white-space: nowrap;
}

.globe {
    border-radius: 50%;
    height: 110px;
    left: 120px;
    overflow: hidden;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 110px;
    margin-left: -12px;
    transform: scale(0.3);
    background-color: #143D59;
    box-shadow: 2px 6px 1px rgb(0 0 0 / 10%), 1px 8px 6px rgb(16 16 16 / 10%), 1px 8px 10px rgb(16 16 16 / 10%), 1px 10px 35px rgb(16 16 16 / 10%);
}

.globe svg {
    animation: rotation 5s linear 0s infinite;
}

.globe path {
    stroke: #8BC34A;
}

@keyframes rotation {
    from {
        transform: translateX(0);
    }

    from {
        transform: translateX(-50%);
    }
}

.hamburger .line {
    background-color: #143D59 !important;
}

@media screen and (min-width: 992px) {
    .mobile-menu, .mobile-menu li {
        display: none !important;
    }
}

.stat-square {
    position: relative;
    width: 140px;
    height: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-square span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 43% 58% 69% 43% / 48% 42% 59% 55%;
    transition: 0.5s;
    animation: animate 12s linear infinite;
}

.stat-square span:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 38% 62% 63% 47% / 41% 44% 56% 59%;
    transition: 0.5s;
    animation: animate 8s linear infinite;
}

.stat-square span:nth-child(3) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #143D59;
    border-radius: 51% 45% 64% 35% / 38% 56% 51% 77%;
    transition: 0.5s;
    animation: animate2 20s linear infinite;
}

.gamecount span:nth-child(1), .gamecount span:nth-child(2), .gamecount span:nth-child(3) {
    border: 1px solid #f07e6e;
}

.questioncount span:nth-child(1), .questioncount span:nth-child(2), .questioncount span:nth-child(3) {
    border: 1px solid #84cdfa;
}

.playercount span:nth-child(1), .playercount span:nth-child(2), .playercount span:nth-child(3) {
    border: 1px solid #5ad1cd;
}

.gamecount:hover span:nth-child(1), .gamecount:hover span:nth-child(2), .gamecount:hover span:nth-child(3) {
    background-color: #f07e6e;
    color: #fefefe !important;
}

.gamecount:hover .stat-fact.count, .questioncount:hover .stat-fact.count, .playercount:hover .stat-fact.count {
    color: white;
}

.questioncount:hover span:nth-child(1), .questioncount:hover span:nth-child(2), .questioncount:hover span:nth-child(3) {
    background-color: #84cdfa;
}

.playercount:hover span:nth-child(1), .playercount:hover span:nth-child(2), .playercount:hover span:nth-child(3) {
    background-color: #5ad1cd;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate2 {
    0% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.site-selection {
    box-shadow: 0px 7px 10px rgba(0, 0, 0, 0.15);
    background-color: white;
    padding: 16px 8px;
}

.translation-input {
    width: 50vw !important;
}

.translationTable tbody td {
    padding: 2px !important;
}

.play-zoom {
	line-height: 30px;
	font-size: 24px;
}

.button, .flat-button, .action-button {
	color: #143D59;
}

.cursor {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: var(--width);
	height: var(--height);
	transform: translate(calc(var(--x) - var(--width) / 2), calc(var(--y) - var(--height) / 2));
	/* transition-duration: 125ms;
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
    transition-property: width, height, transform; */
	transition: 150ms width cubic-bezier(0.39, 0.575, 0.565, 1),
	150ms height cubic-bezier(0.39, 0.575, 0.565, 1),
	150ms transform cubic-bezier(0.39, 0.575, 0.565, 1);
	z-index: 9000;
	pointer-events: none;
	will-change: transform;
}
@media (pointer: fine) {
	.cursor {
		display: block;
	}
}
.cursor::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: var(--radius);
	border: 2px solid #143D59;
	opacity: var(--scale);
	-webkit-transform: scale(var(--scale));
	transform: scale(var(--scale));
	transition: 300ms opacity cubic-bezier(0.39, 0.575, 0.565, 1),
	300ms transform cubic-bezier(0.39, 0.575, 0.565, 1),
	150ms border-radius cubic-bezier(0.39, 0.575, 0.565, 1);
}

html:not(html:hover) .cursor::after {
	opacity: 0;
	transform: scale(0);
}

html, div:hover, input:hover, button:hover, a:hover, object:hover, td:hover, th:hover, span:hover, textarea:hover {
	cursor: url("data:image/svg+xml,%3Csvg height='6' width='6' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='4' cy='4' fill='rgb(255,128,0)' r='4'/%3E%3C/svg%3E") 3 3, auto !important;
}