@font-face { font-family:fr; src: url('../FRADMCN.TTF'); }
-webkit-appearance: none;

html { width:100vw; height:100vh; overflow:hidden; background:black; padding:0; margin:0; }

body { position:fixed; padding:0; margin:0; width:100vw; height:100vh; background:black; overflow:hidden;
	font-family:fr; color:white; font-size:30px; overscroll-behavior: none;}

#appcontainer { position:absolute; height:100%; width:100%; max-width:56vh; left:50%; transform:translateX(-50%); background:black; }

#listTurnaments { position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background-image: url('/score/pics/default.jpg'); background-size:cover; }
#backcache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }

#standings { position:relative; width:100%; height:100px; top:0; text-align:center; font-size:30px; line-height:100px; color:rgba(255,255,255,0.7); }
#titrestandings { position:relative; width:100%; height:100px; top:0; text-align:center; font-size:30px; line-height:100px; color:rgba(255,255,255,0.7); }
.stand { position:absolute; width:100%; top:0; left:0; }
/*#standt2 { position:absolute; width:30%; top:0; right:0; }*/

#saison { position:relative; width:100%; height:30px; background:rgba(0,0,0,0.2); border-top:4px solid white; font-size:25px; }
#nomtournoi { position:relative; width:100%; height:50px; background:rgba(0,0,0,0.2); border-top:4px solid white;border-bottom:4px solid white; font-size:40px; }
#history {
	position:relative;
	width:100%; 
	height:30px; 
	/*background:rgba(0,0,0,0.2); */
	font-size:10px; 
	}

#teams { position:relative; top:0; display:flex; width:100%; border-top:4px solid white; border-bottom:4px solid white; }
.team { flex:1; position:relative; }
.team img { width:100%; display:block; }
.teamcache { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); }
.teamname { position:absolute; width:100%; top:0; filter:drop-shadow(0 0 5px black); }
.teamscore { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -40%); font-size:90px; filter:drop-shadow(0 0 5px black); }
.teamscoreTurn { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -40%); font-size:90px; filter:drop-shadow(0 0 5px black); }

#newgame { position:relative; width:85%; top:120px; left:50%; transform:translateX(-50%); cursor: pointer;}
#newseason { position:relative; width:85%; top:120px; left:50%; transform:translateX(-50%); cursor: pointer;}
#endgame { position:relative; width:85%; top:120px; left:50%; transform:translateX(-50%); cursor: pointer;}
#newtournoi { position:fixed; width:20%; top:85%; left:70%;  }

#cache { display:none; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); }

#scoringpanel { display:none; position:relative; width:100%; height:50%; top:0px; text-align:center;}
#t1input { left:5%; }
#t2input { right:5%; }
#buttonpanel { display:none; position:relative; width:100%; height:20%; top:0px; text-align:center;}

.scoreinput { position:absolute; top:4px; width:40%; height:50px; line-height:50px; background:rgba(0,0,0,0.2);
	border:2px solid white; border-radius:10px; font-family:fr; color:white; font-size:40px;  
}
.scoreinput.selected {
	box-shadow: 0 0 20px 10px white;
};
.scoreinput.notselected {
	box-shadow: none;
};

.inputactive { position:absolute; top:4px; width:40%; height:50px; line-height:50px; background:rgba(0,0,0,0.2);
	border:2px solid white; border-radius:10px; font-family:fr; color:white; font-size:40px; box-shadow: 0 0 20px 10px white; 
}

.inputinactive { position:absolute; top:4px; width:40%; height:50px; line-height:50px; background:rgba(0,0,0,0.2);
	border:2px solid white; border-radius:10px; font-family:fr; color:white; font-size:40px;  
}

/*#inputfields { display:none; position:relative; width:100%; top:20px; text-align:center;}*/

.inputfields { 
	position:relative; 
	width:100%; 
	top:20px; 
	text-align:center;
	
	.inputfield { 
		position:relative;
		top:0px; 
		width:80%;
		transform:translate(11%,21%);		
		height:50px; 
		line-height:50px; 
		background:rgba(0,0,0,0.2);
		font-size:28px;
	}
}



#keypad {display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; width:90%; left:5%; top:80px; }
.key { width:30%; margin-bottom:2%;  }
.grey { border-color:grey; color:grey; }
#enterscore { position:relative; width:90%; left:5%; top:5px; background:rgba(255,255,255,0.2); }

#tournoipanel {
	display:none; 
	position:absolute; 
	width:100%; 
	height:100%; 
	top:0; 
	text-align:center;
	background-size: cover;
	background-position: center center;
    background-repeat: no-repeat;
	}
#titre { position:relative; width:100%; height:50px; background:rgba(0,0,0,0.2); border-top:4px solid white; border-bottom:4px solid white; font-size:40px; }
#listetournois {
    position: relative;
    width: 90%;
    /*height: 24px;*/
    margin-top: 4px;
	margin-left: 4px;
	margin-right: 4px;
    /*line-height: 30px;*/
}

.tabletournois {
  border-collapse: collapse;
  width: 95%;
    height: 100%;
    color: white;
    font-size: 18px;
	text-align: left;
}

.tabletournois tr {
  border-top: 0px solid #ddd;
}

.tabletournois td {
  border: 0px solid #ddd;
  padding-left: 5px;
}

.tabletournois td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  width:50%;
}
.tabletournois td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


/*.tournoi {
    width: 50%;
    padding-left: 5%;
    text-align: left;
}*/

.scoretournoi {
    width: 50%;
    padding-right: 5%;
    text-align: left;
}

/*#promptpanel { display:none; position:absolute; width:80%; height:50%; top:55%; left:50%; transform:translate(-50%,-50%); background:black; border:4px solid white; border-radius:20px; font-size:40px; text-align:center;}*/
#promptwinner { position:relative; width:100%; top:10%; }
#promptnon { position:absolute; bottom:10%; left:10%; color:grey; }
#promptoui { position:absolute; bottom:10%; right:10%; }
#reload { position:absolute; bottom:10px; right:10px; width:50px; }

.promptpanel-verybig { 
	display:none; 
	position:absolute; 
	width:80%; 
	top:33%; 
	left:50%; 
	transform:translate(-50%,-33%); 
	background:black; 
	border:4px solid white; 
	border-radius:20px; 
	text-align:center;
	height:80%; 
	font-size:34px;	
	
	.buttonoui { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; right:10%; }
	.buttonnon { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; left:10%; color:grey; }
	}
	
.promptpanel-big { 
	display:none; 
	position:absolute; 
	width:80%; 
	top:55%; 
	left:50%; 
	transform:translate(-50%,-50%); 
	background:black; 
	border:4px solid white; 
	border-radius:20px; 
	text-align:center;
	height:50%; 
	font-size:34px;	
	
	.buttonoui { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; right:10%; }
	.buttonnon { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; left:10%; color:grey; }
	}
	
.promptpanel-small { 
	display:none; 
	position:absolute; 
	width:80%; 
	top:55%; 
	left:50%; 
	transform:translate(-50%,-50%); 
	background:black; 
	border:4px solid white; 
	border-radius:20px; 
	text-align:center;
	height:50%; 
	font-size:40px;	
	.buttonoui { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; right:10%; }
	.buttonnon { width:100px; height:50px; background:rgba(0,0,0,0.2); border:2px solid white; border-radius:10px; font-size:40px; position:absolute; bottom:10%; left:10%; color:grey; }
	}
	

.button { 
	width:100px; 
	height:50px; 
	background:rgba(0,0,0,0.2); 
	border:2px solid white; 
	border-radius:10px; 
	font-size:40px; 
}
.float-button {
      position: fixed;
      bottom: 100px;
      right: 20px;
      padding: 10px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
}
    
	table {
      border-collapse: collapse;
      width: 100%;
	  font-size:18pt;
    }

    td, th {
      border: 0px solid #ccc;
      padding: 0px;
	  cursor:pointer;
	  text-align: center;
    }
    .tournoi {
      border-collapse: collapse;
	  overflow: hidden;
      border-radius: 3px; /* Rounded corners for each group of two rows */
      overflow: hidden; /* Ensure the rounded corners are visible */
 	  font-size:18pt;
   }

	.tournoi tr{
		padding: 0px;
	}
	.tournoi td{
	  border: none;
      padding: 5px;
      cursor: pointer;
	  text-align: left;
	}
    .tournoi td:first-child {
      background-color: #e74c3c; /* Red background color for column 1 */
      color: white;
    }

    .tournoi td:last-child {
      background-color: #2c3e50; /* Black background color for column 2 */
      color: white;
	  padding-top : 2px;
	  padding-bottom : 2px;
	  width : 40%;
	  font-size: 16pt;

    }

	
    .spacer {
      height: 10px; /* Adjust the height to add spacing between rows */
    }

    input {
      width: 100%;
      box-sizing: border-box;
	  background:rgba(0,0,0,0.2);
	  border:2px solid white; 
	  border-radius:10px; 
	  font-family:fr; 
	  color:white; 
	  font-size:40px;
	  text-align:center;
    }

    /* Highlighted class */
    .highlighted {
      background-color: #ffcc00;
    }