/*===================
	Title Section	
===================*/
.title-bar {
        display: flex;
        justify-content: center;
        align-items: flex-end;
	position: relative;
	height: 14vh;
	min-height: 73.5px; /* 14% of browser window at 525px */
}

.title {
	display: flex;
	justify-content: center;
	height: 85%;
}

.title img{
	height: 100%;
}

#play-side-container {
	width: 100%;
	display: inline-block;
	position: relative;
	vertical-align: top;
}

#info-side-container {
	width: 33%;
	display: inline-block;
	position: relative;
	vertical-align: top;
}

/*====================
	Player Section
====================*/
.player-bar {
	height: 43vh;
	width: 100%;
	min-height: 225px;
	padding: 10px 0;
	display: inline-block;
	position: relative;
}

/* =================
	Meta Section
==================*/
.meta-bar {
	height: calc(43vh - 1px);
	min-height: 250px;
	display: inline-block;
	width: 100%;
}

.analytics {
	width: 67%;
}

.leaderboard {
	width: 100%;
	border-top: 0;
}

/* ==========
	Modal
===========*/
.modal {
	display: none;
	/*position: absolute; Issue #530. Erika*/
	position: fixed;
	left: 0;
	top : 0;
    right: 0;
    bottom: 0;
	z-index: 1;
	width: 100%;
    min-width: 700px;
	height: 100%;
    min-height: 525px;
	background-color: rgba(0,0,0,0.4);
}

.game-modal {
	display: none;
	/*position: absolute; Issue #530. Erika*/
	position: fixed;
	left: 0;
	top : 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	min-width: 700px;
	height: 100%;
	min-height: 525px;
	background-color: rgba(0,0,0,0.4);
}

.modal-content {
    display: inline-block;
	position: absolute;
	top: 50%;
	left: 50%;
    min-width: 350px;
    height: auto;
	transform: translate(-50%, -50%);
	background-color: #f7f7f7;
	color: black;
	border: 2px solid black;
	overflow: visible;
}

/*Custom styles for badge-specific modals

newbadge-modal-content = when you earn multiple badges after a match
badge-modal-content = when you earn a single badge

Issue #644 - Erika
*/
#newbadge-modal-content,
#badge-modal-content {
    overflow: auto;
	max-width: 100%;
    max-height: 100%;
}
/*Center in the middle when multiple badges are earned*/
#newbadge-modal-content-inner{
    display: flex;
	flex-direction: column;
	flex-wrap: wrap;
}

/*Widen the 'You have earned a new badge' message when multiple badges earned, with the new formatting*/
#newbadge-header{
	margin: 0;
}

/*For phones bigger than 900
@media screen and (max-width: 915px) {

	#login-modal-content {
		position: fixed;
		overflow: auto;
		top: 50%;
	}

	#register-modal-content {
		position: fixed;
		height: 100vh;
		overflow: auto;
	}

	#recovery-modal-content {
		position: fixed;
		height: 100%;
		overflow: auto;
	}

	.modal, .game-modal {
		display: none;
		position: fixed; /* Change from absolute to fixed 
	}

}

@media screen and (max-width: 900px) {

	/*general modals
	#login-modal-content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow: auto;
	}

	#register-modal-content {
		position: fixed;
		width: 100%;
		height: 100vh;
		overflow: auto;
	}

	#recovery-modal-content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow: auto;
	}



	/*
	.modal-content {
		position: fixed;
		top: 46.3%;
		left: 50%;
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		overflow-x: hidden;
		min-height: 100vh;
		border: none;
	}*/

	/*
	.register-modal {
		/*top: 40%;
		left: 50%;
		transform: translate(40%, 0%);
	}

	/*
	#register-modal-content {
		top: 50%;
	}

	#recovery-modal-content {
		top: 50%;
	}
	
}
*/

/*.meta-container table thead th {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    padding: 5px 15px !important;
}
.meta-container table tr td {
    border: 1px solid #000;
    background: #fff;
    color: #000;
    padding: 5px 5px !important;
}*/
.meta-container label {font-size:calc(5px + .5vw + .2vh); font-family: arial;}
.meta-container option {font-size:calc(5px + .5vw + .2vh); font-family: arial;}
.meta-container select {font-size:calc(5px + .5vw + .2vh); font-family: arial;}
.fancybox-container label {font-size:calc(5px + .5vw + .2vh); font-family: arial;}
.fancybox-container option {font-size:calc(5px + .5vw + .2vh); font-family: arial;}
.fancybox-container select {font-size:calc(5px + .5vw + .2vh); font-family: arial;}