/* Main body and HTML styles */
body {
	height: 100vh; /* Full height */
	margin: 0; /* No margin */
	padding: 0; /* No padding */
	background-color: #f2f2f2;
	display: flex;
	justify-content: center;
	align-items: center; /* Centering content */
	background-image: url('background.webp');
	background-size: cover;
	background-attachment: fixed;
}
.container {
	text-align: center;
	background: rgba(255, 255, 255, 0.8);
	padding: 20px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	width: 90%;
	max-width: 90%;
	margin: auto;
	overflow-y: auto; /* Scrollbar for container */
	/*max-height: 90vh; /* Adjust max height to avoid overflow */
}

.table-fixed {
	width: auto;
	border-collapse: collapse;
}
.table-scrollable {
	width: auto;
	overflow-x: auto;
	border-collapse: collapse;
}
.rules-container {
    text-align: left;
}
.button, .button-delete {
	background-color: #0044cc;
	color: white;
	padding: 15px 20px;
	margin: 10px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	width: 300px; /* Consistent width */
}
.action-btn, .action-btn-delete {
	background-color: #0044cc;
	color: white;
	padding: 10px 10px;
	margin: 5px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	text-align: center; /* Ensure text is centered */
}
.button:hover, .action-btn:hover {
	background-color: #003399;
}
.button-delete, .action-btn-delete {
    background-color: #cc0000; /* Red color for delete button */
}

.button-delete:hover, .action-btn-delete:hover {
    background-color: #990000; /* Darker red on hover */
}
.button-group {
	display: flex;
	gap: 5px; /* Space between buttons */
}

.correct {
	background-color: green;
	color: white;
}
.incorrect {
	background-color: red;
	color: white;
}
.partially-correct {
	background-color: yellow;
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}
th, td {
	border: 1px solid #ccc;
	text-align: left;
	padding: 8px;
}
th {
	background-color: #0044cc;
	color: white;
}
tr:nth-child(even) {
	background-color: #f2f2f2;
}

.sticky {
	position: -webkit-sticky;
	position: sticky;
	background-color: white;
	z-index: 1;
	color: black;
}
.sticky-col {
	position: -webkit-sticky;
	position: sticky;
	left: 0;
	background-color: white;
	z-index: 2;
	color: black;
}
.equal-width {
	width: 50px;
	text-align: center;
}
th.sticky {
	top: 0;
	z-index: 2;
}
		
.position {
	width: 10%;
}
.team {
	width: 90%;
}
.80-percent {
	width: 80%;
}
.70-percent {
	width: 70%;
}
.results {
	width: 25%;
}
.player {
	width: 75%;
}
.compare {
	width: 40%;
}
.35-percent{
	width: 35%;
}
.30-percent{
	width: 30%;
}
.25-percent{
	width: 25%;
}
.15-percent{
	width: 15%;
}
.center-text{
	text-align: center;
}
.right-text{
	text-align: right;
}
.info-button {
	display: inline-block;
	width: 20px;
	height: 20px;
	line-height: 20px;
	border-radius: 50%;
	background-color: #007BFF;
	color: white;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	margin-left: 5px;
	vertical-align: middle;
}

.modal {
	display: none;
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}

.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 20px;
	border: 1px solid #888;
	width: 80%;
	max-width: 600px;
}

.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Additional structural styles */
h2 {
    display: inline-block;
    margin-right: 10px;
}

h1 {
	margin-bottom: 20px; /* Add some space between the message and the buttons */
}

.welcome-text {
	font-size: 2em; /* Adjust the size as needed */
}

.block {
    display: block;
    clear: both;
	margin: 0 auto;
}

.small-input {
	width: 50px; /* Adjust the width as needed */
	max-width: 100%; /* Ensures input does not overflow its container */
	box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

select {
	width: 100%;
	padding: 8px;
	margin-bottom: 20px;
}
.ellipsis {
  white-space: nowrap; /* Keep the text on a single line */
  overflow: hidden;    /* Hide text that doesn't fit in the container */
  text-overflow: ellipsis; /* Add ellipses at the end of the hidden text */
}

.equal-width {
	width: 100px;
	text-align: center;
}
.form-name {
	cursor: pointer;
}
		
/* Style for table headers and cells on smaller screens */
@media only screen and (max-width: 600px) {
  th, td {
    padding: 4px; /* Reduce padding */
    font-size: 10px; /* Reduce font size */
  }
}

label {
	margin-bottom: 10px;
	font-size: 16px; /* Larger text for readability */
}

input[type="text"], input[type="password"], input[type="submit"], input[type="email"], input[type="number"], input[type="button"] {
	box-sizing: border-box;
	width: calc(100% - 24px);
	padding: 12px; /* Larger padding for easier interaction */
	margin-bottom: 15px; /* More space between elements */
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px; /* Larger text for readability */
}

input[type="password"] {
	-webkit-text-security: disc;
}

input[type="submit"] {
	background-color: #0044cc;
	color: white;
	cursor: pointer;
	border: none; /* No border for buttons */
}

input[type="submit"]:hover {
	background-color: #003399;
}

.forgot-link {
	font-size: 12px; /* Slightly smaller font size for the link */
	margin-top: -10px; /* Aligns link better with the flow of the form */
}

.alert {
    color: red; /* Sets the text color to red */
}
#calculateButton {
    margin-top: 20px; /* Adds space above the button */
}
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 200px;
	background-color: black;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	bottom: 150%;
	left: 50%;
	margin-left: -100px;
	opacity: 0;
	transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}