/* Styles for the error message container */
.error-messages {
  color: #a94442; /* Red color for error text */
  background-color: #f2dede; /* Light red background */
  border-color: #ebccd1; /* Light red border */
  padding: 10px 20px;
  border-radius: 4px;
  border: 1px solid transparent;
  margin-bottom: 20px;
}

/* Style for individual error messages if they are in a list */
.error-messages ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.error-messages li {
  margin: 5px 0;
}
/* Style for all text inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
  width: 100%; /* Full width */
  padding: 10px; /* Some padding */
  margin: 8px 0; /* Margin for spacing between fields */
  display: inline-block; /* Allows the width to take effect */
  border: 1px solid #ccc; /* A light grey border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* To include padding and border in the element's total width and height */
}

.datetime-select select {
  width: auto;
  margin: 0 5px;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

/* Style modifications for checkboxes */
input[type="checkbox"] {
  transform: scale(1.5);
  margin: 10px; /* Space around the checkbox */
}

/* Style for checkbox labels for better usability */
.checkbox-label {
  margin-left: 5px; /* Space after the checkbox */
  cursor: pointer; /* Indicates an interactive element */
}

/* Style for form labels for better readability */
label {
  display: block; /* Ensure the label is on a new line */
  margin-top: 15px; /* Space above the label */
  font-weight: bold; /* Make the label text bold */
}

.disclaimer {
  font-size: 12px;
  font-style: italic;
}
/* Overall body styling */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-color: #ecf0f1;
  color: #333;
  margin: 0;
  padding: 20px;
}

/* Header and Subheader styling */
h1, h2 {
  color: #333;
  text-align: center;
}

/* Style for the form */
.form-container {
  max-width: 600px; /* Adjust width as needed */
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Style for form elements */
select {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px; /* Space between form elements */
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box; /* To include padding in the width */
}

/* Styling the labels for better readability */
label {
  margin-top: 20px;
  display: block;
  font-weight: bold;
}

/* Button styling */
button {
  background-color: #2ecc71; /* A green shade */
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Button hover effect */
button:hover {
  background-color: #27ae60; /* A darker green shade */
}

/* Return home button styling */
.home-button {
  background-color: #3498db; /* A blue shade */
  text-align: center;
  display: block;
  text-decoration: none;
  padding: 10px;
  color: white;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.home-button:hover {
  background-color: #2980b9; /* A darker blue shade */
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.playerPhoto {
  width: 175px;
  height: 127px;
}

/* General body styling */
body {
  font-family: 'Helvetica', sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 20px;
  color: #333;
}

/* Style for the header */
h1 {
  background-color: #003366; /* Dark blue color */
  color: #fff;
  padding: 10px 0;
  text-align: center;
  margin-bottom: 10px;
}

/* Table styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

/* Table header styling */
th {
  /* background-color: #0042C6; Darker blue color */
  /* color: #fff; */
  padding: 10px;
  text-align: left;
  font-size: 20px;
}

.multiplier {
  font-size: 14px;
}

.week-header {
  text-align: center;
}

/* Table row styling */
tr:nth-child(even) {
  background-color: #ececec;
}

/* Table data styling */
td {
  padding: 5px;
}

/* Links and buttons styling */
a, .button {
  background-color: #28a745; /* Green color */
  color: #fff;
  padding: 10px 15px;
  text-decoration: none;
  display: inline-block;
  margin: 5px 0;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.big-button {
  background-color: #28a745; /* Green color */
  font-size: 16px;
  font-weight: bold;
}

.user-info {
  display: flex;
  align-items: center;
  justify-content: start;
  margin-bottom: 20px;
}

.inline-form {
  display: inline; /* This makes the form generated by button_to inline */
  margin-left: 10px; /* Add space between the span and the button */
}

.tiny-button {
  background-color: #28a745; /* Green color */
  font-size: 12px;
  font-weight: bold;
  display: inline
}

/* Change background color on hover for links and buttons */
a:hover, .button:hover {
  background-color: #218838; /* Darker green color */
}

.disabled {
  pointer-events: none;
  color: #ccc;
}

/* Footer styling */
.footer {
}

/* Admin link styling */
.admin {
  background-color: #dc3545; /* Red color */
  padding: 10px 15px;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.admin:hover {
  background-color: #bd2130; /* Darker red color */
}

.player-name {
  font-size: 12px;
  text-align: center;
}

.score {
  font-size: 16px;
  text-align: center;
}

.not-started {
  font-size: 14px;
  text-align: center;
  color: #aaa;
}

.total-score {
  font-size: 20px;
  font-weight: bold;
}

.statline-total {
  font-size: 16px;
  text-align: center;
}

.statline-header {
  font-size: 12px;
  text-align: center;
}

.small-statline {
  font-size: 12px;
  text-align: center;
}

.no-stats-yet {
  font-size: 14px;
  color: #999;
}

.leaderboard-header {
  text-align: center;
}

.weekly-with-multiplier {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.weekly-without-multiplier {
  font-size: 14px;
  color: #555;
  text-align: center;
}