/* ============================================================================== 
   File: scr_flag.css
	- Stylesheet for TipTool FLAGS and ADVERSARIES
	- Author: Daniel Hugentobler (DH)
	- created: 19.DEC.2018, taken from scr_generic.css
	- amended: 17.JAN.2021, DH: new media-width-breakpoints for: narrow/medium/wide
   ============================================================================== */

.flag {
	height: 3rem;
	width: 3rem;
	border-radius: 1.5rem;
	border: none;
	-webkit-filter: saturate(1.3);
	filter: saturate(1.3);
	-webkit-filter: grayscale(0.1);
	filter: grayscale(0.1);
	-webkit-box-shadow: 0.2rem 0.2rem 0.4rem #454545;
	-moz-box-shadow: 0.2rem 0.2rem 0.4rem #454545;
	box-shadow: 0.2rem 0.2rem 0.4rem #454545;
}
.byNight .flag {
	-webkit-box-shadow: 0 0 2.4rem gray;
	-moz-box-shadow: 0 0 2.4rem gray;
	box-shadow: 0 0 2.4rem gray;
}
.big_flag {
	height:4rem;
}

.flagList {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-start;
	flex-wrap: wrap; 
	display: -webkit-flex;
	flex-direction: -webkit-row;
	justify-content: -webkit-space-around;
	align-items: -webkit-flex-start;
	flex-wrap: -webkit-wrap; 
}

.flagList span {
	display: inline-block;
	text-align: center;
	padding: 1rem;
}

/* override for team-flag as a link */
a.teamLink {
	align-content: center;
} 

/* language-flags are smaller */
td img.flag_language,
.buffer .flag_language {
	height: 1.8rem;
	width: 1.8rem;
	border-radius: 50%;
	border: none;
}
.byNight td img.flag_language,
.byNight .buffer .flag_language {
	/* smaller and darker shadow than clickable flags  */
	-webkit-box-shadow: 0 0 1.5rem gray;
	-moz-box-shadow: 0 0 1.5rem gray;
	box-shadow: 0 0 1.5rem gray;

}
/* override for team-flag as a link */
a.teamLink:focus .flag,
a.teamLink:hover .flag,
a.teamLink:active .flag {
	display: inline-block;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
a.teamLink .flag {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

/* container for a game's adversaries; handle it like a table with cells */
.vs_advs {
	display: table;
	width: 100%;
	max-width: 25rem;
}
.champ_flag,
.vs_flag {
	display: table-cell;
	min-width: 5rem;
	max-width: 5rem;
	text-align: center;
}
/* make it higher in NARROW viewport, to prevent cutted flag */
@media (max-width: 40rem) {
	.champ_flag,
	.vs_flag {
		display: inline-block;				/* allow sizing */
		min-height: 5rem; 
		max-height: 5rem; 
	}
	.vs_advs {
		margin-top: 0.4rem;
	}
	.byNight .flag {
		-webkit-box-shadow: 0 0 1.2rem gray;	/* smaller */
		-moz-box-shadow: 0 0 1.2rem gray;
		box-shadow: 0 0 1.2rem gray;
	}
}
.champion {
    display: inline-block;
	vertical-align: middle;
}

.vs {
	display: table-cell;
	padding-top: 0.8rem;
	padding-bottom: 0.4rem;
    min-width: 10rem; 
	max-width: 15rem;
    vertical-align: top;
    text-align: center;
	margin-top: 0.1rem;
}
.champ_data {
	display: inline-block;
    display: flex; /* what now???? */
	max-width: 25rem;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    display: -webkit-flex;
    flex-direction: -webkit-row;
    justify-content: -webkit-flex-start;
    align-items: -webkit-center;
}
.champ {
    display: inline-block;
    min-width: 10rem;
	width: auto;
    vertical-align: top;
    text-align: center;
	margin-top: 0.1rem;
}