@import url('https://fonts.googleapis.com/css2?family=PT+Sans+Narrow:wght@400;700&display=swap');

/* variables couleurs */
:root {
  --bg_body: 	#777777;
  --bg_titre: 	#00468F;
  --bg_winner:	#92B3FF;
  --bg_looser: 	#000000;
  
  --bor_titre: 	#ffffff;
  --bor_jeux :  #ffffff;

  --tx_titre:	#FFFFFF;
  --tx_numero:	#FFFFFF;
  --tx_winner:	#FFFFFF;
  --tx_looser:  #CCCCCC;
  
  --width_1col : 450px;
  --width_2col : 825px;
}

/* ELEMENTS COMMUNS */
body {
	background-color: var(--bg_body);
	font-family: 'PT Sans Narrow', sans-serif;
	font-weight: 400;
	margin: 0;
	padding: 0;
	justify-content: center;
}

.banner{
	/* haut | droit | bas | gauche */
	margin: 7px auto 7px auto;
	padding: 10px;
	background-color: var(--bg_titre);
	color: var(--tx_titre);
	width: var(--width_2col);
	font-size: 50px;
	font-weight: 700;
	text-align: center;
	border: 2px solid var(--bor_titre);
}
.titre{
	/* haut | droit | bas | gauche */
	margin: 25px auto 0 auto;
	padding : 3px;
	background-color: var(--bg_titre);
	color:var(--tx_titre);
	width : var(--width_2col);
	font-size: 20px;
	font-weight: 700;
	text-align: center;
    vertical-align: middle;
	border: 2px solid;
	border: 2px solid var(--bor_titre);
}
.box-container{
	margin: 0 auto 3px auto;
	padding: 0;
	width : var(--width_2col);
}
.box-cell{
	display: inline-table;
	margin: 3px auto 3px 8px;
	width: 400px;
	height: 100px;
	padding: 0;
}
.box-invisible{
	display: inline-table;
	margin: 7px auto 7px 8px;
	background-color: var(--bg_body);
	width: 200px;
	height: 100px;
	padding: 0;
}
.box-table{
	width: 100%;
	padding:0;
	margin: 0;
	border-spacing: 0;
    border-collapse: collapse;
	border-color: var(--bor_jeux);
}
tr{
	padding: 0;
	height:22px;
}
.box-jeu{
	padding: 0;
	width: 40px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	border: 2px solid var(--bor_jeux);
	font-size:3vh;
	font-weight: 700;
	text-align: center;
    vertical-align: middle;
}
.box-score-1{
	padding: 0;
	width: 40px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size: 3vh;
	font-weight: 700;
	text-align: center;
    vertical-align: middle;	
	border: 2px solid var(--bor_jeux);
}
.box-score-2{
	padding: 0;
	width: 40px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size:3vh;
	font-weight: 700;
	text-align: center;
    vertical-align: middle;	
	border: 2px solid var(--bor_jeux);
}
.box-nom-1{
	padding: 0 0 0 8px;
	width: 320px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size: 1.9vh; /*15px;*/
	font-weight: 700;
	text-align: left;
    vertical-align: middle;	
	border-bottom: 1px dotted var(--bor_jeux);
	border-top: 2px solid var(--bor_jeux);
}
.box-nom-2{
	padding: 0 0 0 8px;
	width: 320px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size: 1.9vh; /*15px;*/
	font-weight: 700;
	text-align: left;
    vertical-align: middle;	
	border-bottom: 1px dotted var(--bor_jeux)
}
.box-societe-1{
	padding: 0 8px 0 0;
	width: 320px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size: 1.8vh; /*12px;*/
	font-weight: 400;
	text-align: right;
    vertical-align: middle;	
	border-bottom: 2px solid var(--bor_jeux);
}
.box-societe-2{
	padding: 0 8px 0 0;
	width: 320px;
	background-color: var(--bg_looser);
	color: var(--tx_looser);
	font-size: 1.8vh; /*12px;*/
	font-weight: 400;
	text-align: right;
    vertical-align: middle;	
    border-bottom: 2px solid var(--bor_jeux);
}

/* Input box:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

input {
  border: 1px solid transparent;
  background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}

input[type=text] {
  background-color: #f1f1f1;
  width: 100%;
}

input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
  cursor: pointer;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}