﻿.col,
.item p,
span.item {
	font-size: 16px;
	color: #000
}

.tab-title {
	font-size: 16px
}

a.statistics-tab {
	min-width: 200px
}

.modal pre {
	text-align: left;
	font-size: 12px
}

.modal a[target="_blank"] img {
	pointer-events: none
}

.modal a[target="_blank"] {
	display: inline-block
}

.col .card {
	text-align: center;
	padding-top: 5px
}

.bar-header .button-clear {
	color: #333
}

.selected {
	background: #6495ed
}

.avatar-chooser .col img {
	width: 100%
}

.avatar-chooser .item-input-inset {
	padding: 50px 10px
}

.avatar-chooser .spacer {
	height: 100px
}

.avatar-wrapper {
	text-align: center
}

.avatar-wrapper img {
	max-width: 60px
}

.spacer {
	height: 50px
}

.item-input-wrapper {
	margin-left: 10px
}

.popup-buttons button:last-child {
	order: -1
}

#current-game-score .col {
	padding: 14px
}

#current-game-score .row {
	padding-left: 0;
	padding-right: 0
}

#current-game-score .row:first-child {
	padding-top: 0
}

#current-game-score .row:last-child {
	padding-bottom: 0
}

#current-game-score .header .col {
	background-color: #f5f5f5;
	padding: 8px 14px
}

#current-game-score .table .scroll>div {
	margin: 20px 10px;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .298039)
}

.table .normal .col {
	font-weight: 400
}

.table .col {
	border-bottom: 1px solid #ddd
}

.empty circle {
	stroke: gray
}

circle {
	fill: green;
	stroke: red;
	stroke-width: 199px
}

svg {
	fill: green;
	margin: 10px;
	border-radius: 50%;
	overflow: hidden;
	transform: rotate(-90deg);
	width: 200px
}

.graphic {
	position: relative
}

.piechart .col:last-child .row {
	margin: 5px 0
}

.piechart .lost:before,
.piechart .won:before {
	content: "";
	width: 10px;
	height: 10px;
	display: inline-block;
	border-radius: 50%;
	margin-left: 5px;
	margin-right: 5px
}

.piechart .won:before {
	background: green
}

.piechart .lost:before {
	background: red
}

.col.streak {
	flex-grow: 2
}

.piechart>.col:first-child {
	text-align: center
}

.clear-statistics {
	border: 1px solid #ddd;
	margin-top: 0
}

.clear-statistics .item {
	border: none;
	background: 0 0
}

.popup .popup-buttons button {
	margin: 0
}

.popup .popup-buttons button:nth-child(2) {
	margin-right: 10px
}

@media screen and (max-width:929px) {
	svg {
		width: 200px
	}
}

@media screen and (max-width:800px) {
	.col.streak {
		flex-grow: 7
	}
}

@media screen and (max-width:545px) {
	.piechart {
		flex-direction: column
	}
	.piechart .col:last-child .row:nth-child(3) {
		display: none
	}
	.piechart .col:last-child .row:nth-child(2) {
		width: 50%;
		position: absolute;
		top: 10px;
		right: 10px
	}
	svg {
		width: 250px
	}
	.piechart>.col:last-child {
		border: 1px solid #aaa;
		position: relative
	}
	.clear-statistics {
		margin-top: 10px
	}
	.piechart>.col {
		width: 400px;
		align-self: center
	}
}

@media screen and (max-width:375px) {
	.piechart {
		flex-direction: column
	}
	svg {
		width: 160px
	}
	.piechart>.col:last-child {
		border: 1px solid #aaa
	}
	.piechart>.col {
		width: 300px;
		align-self: center
	}
	.piechart-labels {
		right: -70px;
		font-size: .9em
	}
}

.button-clear.menu-toggle-button,
.button-clear.menu-toggle-button.activated {
	background: url(../img/buttons/menu_command.png) no-repeat center;
	padding-top: 30px;
	margin: 5px;
	color: #fff
}

.trial .trial-body {
	padding-top: 185px;
	background: url(../img/others/splash.png) no-repeat;
	background-position: center -60px;
	background-size: 315px;
	text-align: center;
	margin-top: 15px
}

.locale-es .trial .trial-body,
.locale-fr .trial .trial-body,
.locale-ja .trial .trial-body,
.locale-nl .trial .trial-body {
	background: url(../img/others/hearts-logo_300x300.png) center 2px no-repeat;
	background-size: 182px
}

.trial-buttons {
	text-align: center;
	margin-top: 20px
}

.trial-progress-bar {
	text-align: center;
	margin: 10px
}

.trial-progress-bar span {
	display: inline-block;
	height: 22px;
	line-height: 22px;
	vertical-align: middle
}

.trial-progress-wrapper {
	border: 1px solid #ddd;
	width: 200px;
	display: inline-block;
	vertical-align: middle;
	overflow: hidden;
	margin: 0 7px
}

.trial-progress {
	padding: 10px 0;
	background: #2e8b57
}

.trial a.button {
	margin-right: 4px
}