.game-border {
	border: 12px solid transparent;
	border-image: url('../res/GameBorder.png') 12 stretch;
	display: flex;
	flex-flow: column;
	align-items: stretch;
	margin-bottom: 1em;
}

.timer {
	padding: 1em;
	justify-content: center;
	align-items: center;
}

.timer-container {
	flex-flow: column;
	align-items: center;
	justify-content: center;
}

.game-border > div:nth-child(1) {
	padding: 1em;
	min-width: 400px;
	display: flex;
	-webkit-font-smoothing: none;
	font-smooth: never;
	font-size: 20pt;
	background: #ffcb7b;
	background: linear-gradient(to bottom,  #ffcb7b 0%,#eba867 100%);
	border: 4px solid rgba(0, 0, 0, 0.1);
	border: 4px solid #d68f54;
	border-top: 4px solid #c47a48;
	height: 100%;
}

.timer {
	padding: 0;
    font-size: 14pt;
    text-shadow: -2px 2px 0 #dd9454;
    color: #221122;
    display: flex;
    flex-flow: column;
}

.body, .timer {
	font-family: "Stardew Valley", sans-serif;
	text-shadow: -2px 2px 0 #dd9454;
    color: #221122;
}

h2 {
	font-size: 28pt;
	font-weight: normal;
	margin:0 0 1em 0;
}

.viewer {
	display: flex;
	flex-flow: row;
}

.viewer-list {
	flex: 2;
}

.viewer-list > * {
	display: flex;
	flex-flow: row;
}

.viewer-player {
	flex: 4;
	margin-left: 1em;
}

.viewer-player > * {
	display: flex;
	flex-flow: row;
}

.participants {
	display: flex;
	flex-flow: column;
	flex-wrap: nowrap;
	max-height: 580px;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.participant {
	display: flex;
	flex-flow: row;
	margin: 0.125em 0;
	padding: 0.125em 0.25em;
	transition: all 0.2s ease-in-out;
}

.participant-img {
	flex: 1;
	min-width: 50px;
	min-height: 50px;
	max-width: 300px;
	max-height: 300px;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

.participant-title {
	margin-left: 0.25em;
	display: flex;
	flex-flow: column;
	flex: 3 0 100%;
}

.participant-name.live::before {
	border-radius: 50%;
    background-color: #ea3b3b;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 0.25em;
}
.participant-name.live.nogame::before {
    background-color: #9a9a9a;
}

.participant.active, .participant.active:hover {
	background-color: rgba(255, 255, 255, 0.4);
	cursor: default;
}
.participant:hover {
	background-color: rgba(255, 255, 255, 0.2);
	cursor: pointer;
}

.stream-title {
	width: 620px;
}

.stream-title > a {
	color: #b11212;
	text-decoration: underline;
}

.player {
	display: flex;
	flex-flow: column;
	align-items: center;
}