/**
 * PEAR Coding Standard.
 *
 * PHP version 5
 *
 * CSS file
 *
 * @author    ai-dev <contact@ai-dev.fr>
 * @copyright ai-dev since 2022
 * @license   Read the multi-language license license.txt
 * @category  template
 * @package   FDJ
 *
 * @version   0.1.0
 *
 * @link      https://www.boutique.ai-dev.fr
 */
 
@font-face {
	font-family: "MetropolisB";
	src: url("Metropolis-Black.otf") format("opentype");
}
@font-face {
	font-family: "Metropolis";
	src: url("Metropolis-Regular.otf") format("opentype");
}

body {
	font-family: "Metropolis";
	font-size: .5vw;
}

.row {
 	float: left;
 	margin: 10px 0;
 	width: 100%;
}

.subtitle {
	font-size: 10px;
	text-align: center;
	width: 195px;
}
 
.label {
 	float: left;
	font-size: 1vw;
 	width: 30%;
}

.data {
 	float: left;
 	width: 70%;
}

.data.reduced select {
	margin-right: 15px;
}

.data.reduced select#subtype_select_2 {
	display: none;
}

.row.stars,
.row.supp,
.row.dream {
	display: none;
}

.ball {
	border-radius: 25px;
	color: #ffffff;
	display: inline-block;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	width: 50px;
}

.ball.e_ball {
	background-color: #001367;
}

.ball.e_star {
	background-color: #eebb05;
	/*background: url('e_star.png');
	border-radius: 0;*/
}

.ball.l_ball {
	background-color: #00a2d9;
}

.ball.l_supp {
	background-color: #ea3946;
}

.ball.d_ball {
	background-color: #781ea6;
}

.ball.d_dream {
	background-color: #ff3c69;
}

.times {
	display: inline-block;
	margin-left: 15px;
}


.radio_selector {
	background-color: #1a4bb8;
	border-radius: 20px;
	color: #fff;
	display: inline-block;
	font-family: "MetropolisB";
	margin: 0 10px 5px 0;
	padding: 8px 16px;
	position: relative;
}

.radio_selector:hover,
.radio_selector.selected {
	background-color: #05adf3;
}

.radio_selector.selected input {
	cursor: default;
}

.radio_selector .game_select,
.radio_selector .type_select {
	cursor: pointer;
	height: 100%;
	left: 0;
	margin: 0;
	opacity: 0;
	padding: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

input {
	background-color: #ffffff;
	border: solid 1px #1a4bb8;
	border-radius: 20px;
	font-family: "MetropolisB";
	padding: 10px 20px;
	text-align: center;
}

input:hover,
input:focus {
	border: solid 1px #05adf3;
	outline: 1px solid #05adf3;
}

.hidden {
	display: none;
}

.submit {
	text-align: center;
}

.submit button {
	background-color: #1a4bb8;
	border: none;
	border-radius: 20px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	margin: 0 auto;
	padding: 10px 20px;
}

.submit button:hover {
	background-color: #05adf3;
}

.last_maj {
	color: #aaaaaa;
	text-align: center;
}

/* Reduced screens */
@media screen and (max-width: 1280px) {
	body {
		font-size: 1vw;
	}
	
	.label {
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 900px) {
	body {
		font-size: 1.2vw;
	}
	.label {
		font-size: 1.8vw;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 1.5vw;
	}
	.label {
		font-size: 2vw;
	}
}