* {
	font-family: 'Oxanium';
	cursor: default;
	max-width: 100%;
	margin: 0;
	padding: 0;
}
:root {
	--haut-tab: 330px;
	--hauteur: -340px;
	--haut-tab2: 180px;
	--hauteur2: -190px;
	--bgcolor: transparent;
	--bgcolorHead: rgb(0, 1, 6);
	--bgcoloroverall: linear-gradient(rgb(203, 203, 203), rgb(128, 128, 128));
	--bgtable: rgb(41, 41, 41);
	--bordertable: #4d4d4d;
	--bgbouton: rgb(39, 39, 39);
	--texte: #eeeeee;
	--bgbox: #5c5c5c;
	--radius: 3px;
	--hauteurHead: min(20vh, 100px);
	--fontSizeOverall: 200%;
}
html {
	background: radial-gradient(ellipse at top, #237A0F, #005500), radial-gradient(ellipse at bottom, #30A813, #005500);
}
header {
	margin-top: 10px;
	width: 80%;
	height: 80px;
	/*border: 1px solid black;*/
}
header h1 {
	position:absolute;
	left:50px;
	top: 10px;
	color: var(--texte);
	text-decoration: none;
	font-weight: normal;
}
input[type=number] {
    -moz-appearance: textfield;
}
input::-webkit-inner-spin-button, input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin:0;
}
input::-o-inner-spin-button, input::-o-outer-spin-button {
	-o-appearance: none;
	margin:0
}

table {
	width: 100%;
	overflow: hidden;
}
table.left {
	width: 39.23vw;
	margin-left: 1.5vw;
}
table.right {
	position: relative;
	top: 0;
	float: right;
	width: 39.23vw;
	margin-right: 1.5vw;
}
tr {
	width: 100%;
}
td {
	width: 33.33%;
}
#defense1, #miss1 {
	background: url("images/white.jpg") center center;
	width: calc(39vw/2);
	position: relative;
	top: 0;
	float: left;
}
#miss1 {
	margin-left: 1.5vw;
	margin-right: 3px;
}
#miss2, #defense2 {
	background: url("images/white.jpg") center center;
	position: relative;
	top: 0;
	float: right;
	width: calc(39vw/2);
}
#miss2 {
	margin-right: 1.5vw;
	margin-left: 3px;
}
.overall {
	width: 15vw;
	border-radius: 2px;
	background: linear-gradient(rgb(203, 203, 203), rgb(128, 128, 128));
	display: flex;
	height: 100%;
}
.overalltxt {
	text-align: center;
	background: transparent;
	font-weight: bold;
	display: inline-block;
	/* height: var(--hauteurHead); */
	/* padding-top: 2vw; */
	/* padding-bottom: 2vw; */
}
#overall {
	max-width: calc(18px);
	display: inline-block;
	font-size: var(--fontSizeOverall);
	cursor: text;
	/* height: var(--hauteurHead); */
}
#parenthesis1, #parenthesis2 {
	display: inline-block;
	max-width: calc(100%/7 + 0px);
	font-size: var(--fontSizeOverall);
	/* height: var(--hauteurHead); */
}
#parenthesis1 {
	text-align: right;
	font-size: var(--fontSizeOverall);
}
#parenthesis2 {
	text-align: left;
	font-size: var(--fontSizeOverall);
}
#overallP1, #overallP2 {
	display: inline-block;
	max-width: calc(100%*2/6.4);
	font-size: 250%;
	/* height: var(--hauteurHead); */
}
.players {
	width: 100%;
	height: var(--hauteurHead);
	background-color: var(--bgcolorHead);
}
.players td {
	/* border: 1px solid brown; */
}
.player {
	font-size: 350%;
	font-weight: bold;
	width: 27vw;
	background-color: var(--bgcolorHead);
	color: rgb(236, 240, 241);
	text-transform: uppercase;
	cursor: text;
	padding-top: 5px;
}
#player1 {
	text-align: left;
	padding-left: 2.5vw;
}
#player2 {
	text-align: right;
	padding-right: 2.5vw;
}
.triangle1 {
	position: absolute;
	top: calc(var(--hauteurHead)/2);
	left: calc(50vw - 20vw);
	transform: translatex(-50%) translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 50px 50px;
	border-color: transparent transparent #CCCCCC transparent;
}
.triangle2 {
	position: absolute;
	top: calc(var(--hauteurHead)/2);
	left: calc(50vw + 20vw);
	transform: translatex(-50%) translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 50px 0 0 50px;
	border-color: transparent transparent transparent #c2c2c2;
}
/* .scores {
	width: 90%;
	height: auto;
	margin-left: 50%;
	transform: translateX(-50%);
} */

/* @media only screen and (max-device-width: 1030px) {
	input.score#S2 {
		transform: translateX(-5%);
	}
	.scores {
		transform: translateX(-51.5%);
	}
} */

input {
	text-align: center;
	border: none;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-o-border-radius: 3px;
}
input.score {
	width: 10vw;
	/* height: var(--hauteurHead); */
	padding-top: 5px;
	font-size: 350%;
	font-weight: bold;
	background-color: var(--bgcolorHead);
	color: rgb(236, 240, 241);
}
#S1 {
	text-align: right;
	margin-right: 1vw;
}
#S2 {
	text-align: left;
	margin-left: 1vw;
}
input.ecart {
	position: absolute;
	border: none;
	top: calc(var(--hauteurHead) + 9vh - 35px);
	transform: translateX(-50%);
	width: 11.54vw;
	height: 3.5vw;
	background-color: transparent;
	font-size: 190%;
	cursor: default;
	text-align: center;
}
input.reste {
	position: absolute;
	top: calc(var(--hauteurHead) + 9vh);
	transform: translateX(-50%);
	width: 11.54vw;
	height: 5.8vw;
	border: none;
	background-color: rgb(3, 170, 5);
	font-size: 225%;
	cursor: default;
	text-align: center;
}
input.break_display {
	position: absolute;
	top: calc(var(--hauteurHead) + 23vh);
	transform: translateX(-50%);
	width: 16vw;
	height: 3vw;
	border: none;
	background-color: transparent;
	text-align: center;
	font-size: 140%;
	cursor: default;
	text-align: center;
}
input.break_player_display {
	position: absolute;
	top: calc(var(--hauteurHead) + 23vh + 30px);
	transform: translateX(-50%);
	width: 16vw;
	height: 2vw;
	border: none;
	background-color: transparent;
	font-size: 100%;
	cursor: default;
	text-align: center;
}

input.points {
	width: 100%;
	height: calc(70vh/4);
	font-size: 1.2em;
	border: none;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
}

input.back_button {
	background: url("images/white.jpg") center center;
	position: absolute;
	top: calc(var(--hauteurHead) + 50vh);
	transform: translateX(-50%) translateY(-50%);
	width: 10vw;
	height: 5.8vw;
	min-width: 100px;
	font-size: 1em;
	border: none;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	display: none;
}
input.rm_button {
	background: url("images/white.jpg") center center;
	position: absolute;
	transform: translateX(-50%) translateY(-50%);
	top: calc(var(--hauteurHead) + 50vh + 70px);
	width: 10vw;
	height: 5.8vw;
	min-width: 100px;
	font-size: 0.9em;
	border: none;
	text-align: center;
	cursor: pointer;
	text-transform: uppercase;
	white-space: pre-wrap;       /* css-3 */
	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	display: none;
}
#reset{
	display: none;
}

input[disabled] {
	filter: opacity(10%);
	cursor: default;
}



#r1, #r2 {
	background: url("images/darkred.jpg") center center;
	border: none;
	color: white;
}
#J1, #J2 {
	background: url("images/blue.jpg") center center;
	border: none;
	color: black;
}
#M1, #M2 {
	background: url("images/purple.jpg") center center;
	border: none;
	color: white;
}
#V1, #V2 {
	background-size: contain;
	background: url("images/red.jpg");
	border: none;
	color: white;
}
#B1, #B2 {
	background: url("images/orange.jpg") center center;
	border: none;
	color: white;
}
#R1, #R2 {
	background: url("images/green.jpg") center center;
	border: none;
	color: black;
}
#N1, #N2 {
	background: url("images/black.jpg") center center;
	border: none;
	color: white;
}
#blanche1, #blanche2 {
	background: url("images/white.jpg") center center;
	color: black;
}
#faute1, #faute2 {
	background: url("images/foul.jpg") center center;
	color: black;
	font-weight: normal;
}


.infos {
	border: none;
	background-color: var(--bgcolor);
	color: black;
	font-weight: bold;
	width: 100%;
	font-size: 1.5em;
}
#infos1 {
	margin-top: -30px;
}