.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

input[type="text"] {
  width: 60%;
  padding: 10px;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-top: constant(safe-area-inset-top); /* For older iOS versions */
}


button {
  padding: 10px 20px;
  margin-left: 0px;
 /* margin-bottom: 20px;  Adds space between buttons or other elements */
  cursor: pointer;
}

:root {
  /* Override Bootstrap primary color */
  --bs-primary-rgb: 37, 77, 190; /* RGB equivalent of #254DBE */
  /* Override Bootstrap primary color */
  --bs-primary-rgb: 37, 77, 190; /* RGB equivalent of #254DBE */  
  /* Override Bootstrap button background color */
  --bs-btn-bg: #254DBE; /* Custom button background */
  --bs-btn-bg-hover: #1e4da0; /* Darker shade for hover effect */
  --bs-btn-color: #ffffff; /* White text color for better contrast */
}

.custom-close-icon {
  background: none !important; /* Forcefully remove the background "X" icon */
  border: none; /* Removes the border for cleaner appearance */
  padding: 0; /* Tightens the spacing around the icon */
}

.custom-close-icon i {
  font-size: 1.2rem; /* Adjust the size of the custom icon */
  color: #000; /* Adjust color to match your theme */
  cursor: pointer; /* Ensures it looks clickable */
}

.alert {
  line-height: 1.2; /* Adjusts line height to make it more compact */
  padding: 0.5rem 1rem; /* Reduces padding for a narrower banner */
}

/* Accessibility */
/* Darken the nav link color for better contrast */
.players-link {
  padding-top: .75rem;
  padding-bottom: 0.25rem;
}
.nav-link {
  color: #CFD4E2; /* Darker color for better readability */
}

/* Optional: Adjust color for hover and active states */
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
  color: #99a8d4 !important; /* Slightly darker shade on hover/focus */
}

/* Accessibility */
/* Styling specifically for the Preferences + Subscriptions link */
.nav-link.pref-link {
  color: #01f0f9 !important; /* Different color for better visibility or distinction */
}

/* Optional: Adjust hover, focus, and active states for the Preferences link */
.nav-link.pref-link:hover,
.nav-link.pref-link:focus,
.nav-link.pref-link.active {
  color: #02aeb4 !important; /* Slightly darker shade on hover/focus */
}

/* Override margin for buttons in the schedule list */
.marginLeft0 {
  margin-left: 0px !important;
}

/*Accessibility Change. This was added to add extra space between each stat on the sport specific pages */
/* Apply to all <a> elements within .lists-container */
.lists-container .list ul li a {
  display: inline-block;
  position: relative;
  padding: 4px 0; /* Adds some internal padding to each link */
  text-decoration: underline;
  /* pointer-events: none;  Added to prevent hyperlinks for accessibility issues */
}

.lists-container .list ul li a::before {
  content: "";
  position: absolute;
  top: -14px; /* Expands clickable area above */
  bottom: -14px; /* Expands clickable area below */
  left: -6px; /* Expands clickable area on the left */
  right: -6px; /* Expands clickable area on the right */
  background: transparent; /* Keeps the expanded area invisible */
}
/*Accessibility Change. This added extra space between each stat */
/* Base styles for team stats container */
.team-stats, .stat-details {
  padding: 12px 16px; /* Increased padding for better spacing */
  margin: 8px 0; /* Add more space between entries */
  min-height: 48px; /* Ensures touch target meets accessibility requirements */
  touch-action: pan-y; /* Ensures touch swipes work */
  
  border: 3px dashed rgba(255, 149, 0, 0.7); /* Fatter dotted lines with orange color */
  /* border: 2px dashed rgba(255, 149, 0, 0.7);  Longer dashed lines with a subtle orange color */
  border-radius: 12px; /* Rounded corners for a softer look */
  
  background-color: rgba(255, 245, 230, 0.1); /* Light background for subtle emphasis */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Slight shadow for depth */
  
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Add a hover effect transition
  /* pointer-events: none;  Added to prevent hyperlinks for accessibility issues */
}

.team-stats h6, .stat-details h6 {
  font-size: 1rem; /* Maintain readable text size */
}
.team-stats h6 span {
  display: inline-block; /* Allows padding and dimensions to affect layout */
  padding: 4px 0px; /* Increase clickable area */
  background-color: transparent; /* Ensure no visual changes */
}

/* Team name link styling */
.team-stats {
  position: relative; /* Ensure relative positioning for child elements */
}

/* Styling the paragraph and links */
.team-stats p {
  margin: 0; /* Remove default margin */
}

.team-stats a { 
  display: inline-block; /* Keeps padding and dimensions active */
  text-decoration: underline; /* Keeps underline for links */
  padding: 4px 0; /* Smaller padding to maintain spacing */
  min-height: 48px; /* Minimum height for touch target */
  line-height: 1.2; /* Adjusts text line spacing */
  margin-top: -4px; /* Reduces extra space above link */
  margin-bottom: -30px; /* Reduces extra space below link */
  /* pointer-events: none;  Added to prevent hyperlinks for accessibility issues */
} 

/* Optional: Improve focus state for accessibility */
.team-stats a:focus,
.team-stats a:hover {
  outline: none; /* Remove default outline */
  /*border: 1px solid #fa8d11;  Add custom focus styling */
  border-radius: 4px; /* Match the button styling */
}
.team-stats:hover, .stat-details:hover {
  transform: translateY(-4px); /* Slight lift on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Enhanced shadow for hover */
}


/* accordion additions 
/* Customize accordion button icon */
/* accordion additions 
/* Customize accordion button icon */
/* General Accordion Styles */
/* Base styles (applies to light mode by default) */
#subscribedTeamsScheduleList,
#subscribedTeamsScheduleListNFL,
#subscribedTeamsScheduleListNBA,
#subscribedTeamsScheduleListNHL {
  border: 1px solid #ffffff;
  background-color: #ffffff; /* Light background for light mode */
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.file-upload-label {
  display: inline-block;
  padding: 12px 20px;  /* Large enough for touch */
  background-color: #0066d3d2;  /* Button color for better visibility */
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

.file-upload-label:hover {
  background-color: #0056b3;
}

.file-upload-label:focus, .file-upload-label:hover {
  background-color: #0056b3;
  outline: 2px solid #004085;
}

.file-upload-label:focus, .file-upload-label:hover {
  background-color: #0056b3;
  outline: 2px solid #004085;
}

#imageUpload {
  padding: 12px 20px;  /* Make input area larger */
  font-size: 16px;
  border: 2px solid #007bff;
  border-radius: 5px;
  background-color: #f8f9fa;
  cursor: pointer;
}

/* Dark mode using a custom class */
.dark-mode #subscribedTeamsScheduleList,
.dark-mode #subscribedTeamsScheduleListNFL,
.dark-mode #subscribedTeamsScheduleListNBA,
.dark-mode #subscribedTeamsScheduleListNHL {
  border: 1px solid #222;
  background-color: #222;
}

.accordion {
  border-radius: 8px;
  overflow: hidden; /* Prevents inner content from spilling out */
  border: 1px solid rgba(128, 128, 128, 0.2); /* Light border */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow around accordion */
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-color: rgba(128, 128, 128, 0.5); /* Softer gray with transparency */

}

/* Apply border radius only to the first and last list items */
#baseballStatsList li:first-child,
#basketballStatsList li:first-child,
#footballStatsList li:first-child,
#hockeyStatsList li:first-child,
#teamsBaseballList li:first-child,
#teamsBasketballList li:first-child,
#teamsFootballList li:first-child,
#teamsHockeyList li:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

#baseballStatsList li:last-child,
#basketballStatsList li:last-child,
#footballStatsList li:last-child,
#hockeyStatsList li:last-child,
#teamsBaseballList li:last-child,
#teamsBasketballList li:last-child,
#teamsFootballList li:last-child,
#teamsHockeyList li:last-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Ensure all items have their own top border */
#baseballStatsList li,
#basketballStatsList li,
#footballStatsList li,
#hockeyStatsList li,
#teamsBaseballList li,
#teamsBasketballList li,
#teamsFootballList li,
#teamsHockeyList li {
  border-top: 1px solid #ccc; /* Add a visible top border */
  box-shadow: inset 0 1px 0 #ddd; /* Subtle inner shadow for better border visibility */
}

/* Optionally, manage the border radius for middle items */
#baseballStatsList li:not(:first-child):not(:last-child),
#basketballStatsList li:not(:first-child):not(:last-child),
#footballStatsList li:not(:first-child):not(:last-child),
#hockeyStatsList li:not(:first-child):not(:last-child),
#teamsBaseballList li:not(:first-child):not(:last-child),
#teamsBasketballList li:not(:first-child):not(:last-child),
#teamsFootballList li:not(:first-child):not(:last-child),
#teamsHockeyList li:not(:first-child):not(:last-child) {
  border-radius: 8px; /* Keep the rounding effect consistent */
}

/* Adds background to accordion when opened
.accordion-button:not(.collapsed) {
  background-color: #007bff;
  color: white;
  border-bottom: none;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}
*/

.accordion-button:not(.collapsed) {
  background-color: inherit;
}

  
.accordion-body {
  background-color: transparent;
  border-top: 1px solid #dee2e6;
  padding: 1rem;
  border-radius: 8px;
} 

/* Dark Mode */
body.dark-mode .accordion-button {
  color: #f8f9fa;
  background-color: #222;
}


body.dark-mode .accordion-body {
  color: #f8f9fa;
}

/* Icons */
/* Default styling for all sport icons */
.accordion-button::before {
  font-family: 'Font Awesome 5 Free'; /* Assuming Font Awesome is used */
  font-weight: 900; /* Bold font for icons */
  padding-right: 10px; /* Spacing between the icon and text */
}

/* Specific icons for each sport */
#headingMLB :before {
  content: "\f433"; /* Baseball icon */
}

#headingNFL :before {
  content: "\f44e"; /* Football icon */
}

#headingNBA :before {
  content: "\f434"; /* Basketball icon */
}

#headingNHL :before {
  content: "\f453"; /* Hockey icon */
}

/* Schedule Icons */
/* Specific icons for each sport */
#headingBaseball :before {
  content: "\f433"; /* Baseball icon */
}
#headingFootball :before {
  content: "\f44e"; /* Football icon */
}
#headingBasketball :before {
  content: "\f434"; /* Basketballball icon */
}
#headingHockey :before {
  content: "\f453"; /* Hockey icon */
}


/* Smoother transitions */
.accordion-collapse {
  transition: max-height 0.4s ease, opacity 0.4s ease;
}

li {
  margin-bottom: 10px;
}

/* To add opacity to a color in CSS, you can use the rgba() function,
where "a" stands for alpha (which determines opacity).
The first three values specify the red, green, and blue values of the color,
and the last value is the opacity level, ranging from 0 (completely transparent) to 1 (completely opaque) */
.modal-dialog {
 /* border: 2px solid rgba(13, 110, 253, .7);  Temporary border */
  border-radius: 30px;
  overflow: hidden;
}

/* Limit the image size within the modal */
.modal-dialog img {
  max-width: 100%; /* Ensure the image fits the width of the modal */
  max-height: 80vh; /* Ensure the image doesn't exceed 80% of the viewport height */
  object-fit: contain; /* Ensure the image maintains its aspect ratio */
}

.modal-header {
  color:  #fa8d11;
   
 }
 .modal-footer {
  color:  #f6cd02;
   
 }

/* Accessibility Change  Made to blck out the background and hide items detected by Google's test*/
.modal-backdrop {
  backdrop-filter: blur(8px) !important; /* Optional: keeps blur, can be increased */
  --bs-backdrop-opacity: 1 !important; /* Set backdrop opacity to fully opaque */
  background-color: rgba(0, 0, 0, 1) !important; /* Fully opaque black background */
}

.modal-backdrop.show {
  backdrop-filter: blur(8px) !important; /* Optional: keeps blur */
  --bs-backdrop-opacity: 1 !important; /* Set backdrop opacity to fully opaque */
  background-color: rgb(31, 33, 31) !important; /* Fully opaque black background */
}

 #locationModal .modal-dialog {
  margin-top: 8rem; /* Accessibility change. Adjust the value as needed. The idea here is to move the modal down to prevent from overlapping with the banner at the top of the page, as Google automated testing is detecting this as a text contrast issue. */
}

 /* Accessibility Change */
 #modalVoteButton {
  background: none;
  border: none;
  padding: 8px; /* Adjust to increase touch target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  cursor: pointer;
}


.card {
  border: 2px solid rgba(13, 110, 253, .7); /* Temporary border */
  padding: 1.5px;
  border-radius: 30px;
  overflow: hidden;
  touch-action: pan-y; /* Ensures touch swipes work */
  pointer-events: auto !important; /* Ensures mouse events register */
  user-select: none; /* Prevents accidental text selection */
  cursor: grab; /* Shows grab cursor on hover */
}

.card img {
  width: auto; /* Adjust as needed for truncated view */
  min-height: 48px; /* Ensure minimum height for touch area */
  height: 75px;
  transition: opacity 0.3s ease;
}

.card.swipe-left {
  transform: translateX(-100%) rotate(-10deg);
  opacity: 0;
}

.card.swipe-right {
  transform: translateX(100%) rotate(10deg);
  opacity: 0;
}

.card.pinned img {
  width: 100%; /* Adjust as needed for truncated view */
  height: 100px;
  border-radius: 8px;
  border: 2px solid #856d02e3; /* Light border around the image */
  object-fit: cover; /* Ensure the image fits within the specified height without stretching */
  transition: opacity 0.3s ease;
}

/*.pinned .card-body {
  padding: 0;
  margin: 0;
} */

/*card background color. Adjust darkmode separate 
.card-body {
  transition: transform 0.2s ease-in-out;
  background-color: #f7f9fa;
} */

.card:hover {
  transform: scale(1.07);
 /* box-shadow: 0 8px 16px rgba(250, 234, 5, 0.553); */
  box-shadow: 0 8px 16px #f3b1098c; 
 /* box-shadow: 0 8px 16px  #f6cd02; */
 
} 

.card img {
  border: 2px solid #ddd; /* Light border around the image */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

@media (hover: none) {
  .card {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Default subtle shadow */
  }

  .card:active {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Stronger shadow when pressed */
  }
}

@media (min-width: 576px) {
  .modal {
    --bs-modal-margin: 1rem; /* Adjust this value as needed for laptops and larger screens */
  }
}

@media (max-width: 768px) {
  #addItemBtn1, #addItemBtn {
      width: 100%;  /* Full width on mobile */
      padding: 12px 20px; /* Increase padding for larger touch target */
  }
}

/* Adjust for smaller screens */
@media (max-width: 600px) {
  .btn {
    width: 90%; /* Slightly larger width */
    padding: 8px 12px; /* Adjust padding */
  }
}

@media (max-width: 400px) {
  .btn {
    width: 100%; /* Full width for very small screens */
    padding: 6px 10px;
  }
}
/* Light mode background */
.modal-content {
  background-color: #f7f7f9; /* Light gray to contrast with white background */
  padding-top: 1rem; /* Adjust as needed to avoid overlap */
}

/* Dark mode background */
body.dark-mode .modal-content {
  background-color: #333333; /* Slightly lighter than #222222 background */
}

/* Custom CSS for adjusting navbar */
.navbar {
  padding-top: 5px; /* Adjust the top padding of the navbar */
  padding-bottom: 5px; /* Adjust the bottom padding of the navbar */
}

.navbar {
  position: fixed; /* Fix it to the top */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  z-index: 1040; /* Higher than bottom navbar */
  background: rgba(37, 77, 190, 0.85) !important; /* Bootstrap 5 Primary */
  backdrop-filter: blur(10px); /* Smooth blur effect */
  padding: 8px 0; /* Adjust padding */
}

/* Custom CSS for adjusting SelectedLocation */
.navbar-text#selectedLocation {
  padding-top: 30px; /* Adjust the top padding of the navbar */
  padding-bottom: 0px; /* Adjust the bottom padding of the navbar */
}

/* Custom CSS for adjusting text color of the user log in*/
.navbar-text#authIndicator {
  color: #f7f01f;
}


/* Default for larger screens */
.navbar-spacer {
  height: 120px; /* Approximate navbar height for desktops */
}

/* Tablets */
@media (max-width: 1024px) {
  .navbar-spacer {
    height: 125px; /* Adjust for tablets */
  }
}

/* Phones (larger screens like iPhones, Pixel) */
@media (max-width: 768px) {
  .navbar-spacer {
    height: 90px; /* Adjust for mid-size phones */
  }
}

/* Small phones (iPhone SE, smaller Androids) */
@media (max-width: 480px) {
  .navbar-spacer {
    height: 90px; /* Reduce height for small screens */
  }
}

/* Tiny devices (older phones, very small screens) */
@media (max-width: 360px) {
  .navbar-spacer {
    height: 80px; /* Minimal spacing for very small devices */
  }
}

/* Bottom Navbar (Floating & Semi-Transparent) */
/* Bottom Navbar */
.navbar-bottom {
  background: rgba(33, 37, 41, 0.75); /* Dark gray with transparency */
  backdrop-filter: blur(10px); /* Smooth glass effect */
  position: fixed;
  bottom: 0; /* Position at the very bottom */
  left: 0; /* Align to the left of the screen */
  width: 100%; /* Full width */
  display: flex;
  justify-content: space-evenly; /* Reduces spacing between icons */
  padding: 10px 5px; /* Less horizontal padding */
  box-shadow: 0px -4px 15px rgba(0, 0, 0, 0.3); /* Shadow at the top for effect */
  z-index: 1030;
}

/* Navbar Buttons */
/* Add some vertical padding to center icons */
.navbar-bottom button {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  padding: 18px 10px; /* Increased vertical padding */
  cursor: pointer;
  transition: transform 0.2s ease, color 0.2s ease;
  display: flex;
  align-items: center; /* Ensures icons are centered */
  justify-content: center;
}


.navbar-bottom button:hover {
  transform: scale(1.1);
  color: #f8f9fa;
}

/* Exit Button (Neutral Look) */
#exitBtn {
  color: #ffcc00;
}

#exitBtn:hover {
  color: #ffd700;
}

/* Icon Styles (Bootstrap Icons) */
.navbar-bottom button i {
  font-size: 2.0rem;
}

.sign-out-container {
  display: flex;
  flex-direction: column; /* Stack icon and text */
  align-items: center; /* Center align */
  gap: 2px; /* Small spacing between icon and text */
}

.sign-out-text {
  font-size: 1.0rem; /* Smaller text */
}



.colorh1 {
  color:  #f6cd02;
}

.colorh2 {
  color:  #fa8d11;
}


/* Custom CSS for adjusting navbar */
.navbar-brand img {
    width: 150px; /* Adjust the width of the logo */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Adjust the right margin of the logo */
  }
   /* Custom CSS for adjusting logo size */
.navbar-brand {
padding: 0; /* Remove padding */
  }

.navbar-nav .nav-link {
    margin-right: 10px; /* Adjust the right margin of the menu items */
  }

  /* Override the navbar toggler icon with higher contrast */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23AEFDBE'%3e%3cpath fill-rule='evenodd' d='M1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5zm0 5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13a.5.5 0 0 1-.5-.5z'/%3e%3c/svg%3e");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 44px; /* Ensure the button is large enough for accessibility */
  height: 44px; /* Increase size for touch devices */
}
/*Accessibility change */
/* Apply a consistent, high-contrast border for focus states */

/* Override to ensure border color and shadow on focus and active states */
.navbar-toggler:focus, .navbar-toggler:active {
  box-shadow: 0 0 0 3px #C4D0F5; /* Fully opaque outline color */
}

/* CSS to adjust the alignment of checkboxes and close button */
.dropdown-menu {
  padding: 10px; /* Add padding to the dropdown menu */
}

.dropdown-menu .form-check {
  display: flex; /* Use flexbox layout */
  align-items: center; /* Align items vertically */
  margin-bottom: 5px; /* Add margin between checkboxes */
}

.text-end {
  margin-top: 2px; /* Adjust margin to align the close button */
}

.btn {
  display: block;
  margin: 10px 10px; /* Center the button */
  width: 40%; /* Default width */
  padding: 12px 20px;
  min-height: 48px;
  font-size: clamp(14px, 2vw, 16px); /* Responsive font size */
  text-align: center; /* Ensure text is centered */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* CSS for customizing the appearance of the close button and checkboxes */
.btn-close-custom {
  font-size: 1.2rem; /* Adjust the font size of the close button */
  color: #f6e205; /* Change the color of the close button */
  opacity: 0.6; /* Adjust the opacity of the close button */
  width: 1.5rem;
  height: 1.5rem;
  padding: 0.5rem;
}

.btn-close-custom:hover {
  color: #fd5806; /* Change the color of the close button on hover */
}

.btn-primary:focus, .btn-primary:hover {
  outline: none;
  background-color: #254DBE;  /* Change background color for focus */
  border: 2px solid #004085;   /* Optional: Increase border thickness on focus */
  padding: 10px 18px;  /* Ensure the padding remains on focus */
}


/* Light mode close button */
.btn-close {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  width: 55px;
  height: 55px;
  background-size: 1.5rem 1.5rem;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  opacity: 1;
}

/* Dark mode close button */
.btn-close.dark-mode {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23A5A09A'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
  background-color: transparent;
}

/* Hover state for both light and dark modes */
.btn-close:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234E4A4A'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}
/* Hover state for both light and dark modes */
.btn-close.dark-mode:hover {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFD700'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* Increase the height of the select element. Accessibility change */
select.form-control {
  min-height: 48px; /* Ensures a minimum height of 48px for accessibility */
  padding: 10px 12px; /* Optional: adjust padding for visual comfort */
  font-size: 16px; /* Optional: Increase font size for readability */
}


/* Custom Checkbox Styling */
.checkbox-custom {
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #b1b2b2; /* Thicker border for better visibility */
  width: 48px;  /* Larger width for accessibility */
  height: 48px; /* Larger height for accessibility */
  border-radius: 4px;
  cursor: pointer;
  margin-right: 15px; /* More space between checkbox and label */
  box-sizing: border-box;
  position: relative;
  background-color: gray; /* Default background color */
  background-image: none; /* Disable the inherited Bootstrap background-image */
  transition: background-color 0.3s ease; /* Smooth transition for background */
}

/* When checkbox is checked, change the background color */
.checkbox-custom:checked {
  background-color: #007bff; /* Background color when checked */
  border-color: #007bff;
}

/* Custom Checkmark: Use a pseudo-element to create the checkmark */
.checkbox-custom:checked::before {
  content: '';
  display: block;
  width: 12px; /* Increased width for larger checkmark */
  height: 24px; /* Increased height for larger checkmark */
  border: solid #fa8d11; /* Color of the checkmark */
  border-width: 0 3px 3px 0; /* This creates the checkmark shape */
  transform: rotate(45deg); /* Rotate to make it look like a checkmark */
  position: absolute;
  top: 8px; /* Adjusted positioning */
  left: 16px; /* Centering the checkmark horizontally */
}

/* Flexbox layout for better alignment */
.form-check-group {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Space between each checkbox */
}

/* Form check label style for accessibility */
.form-check-label {
  font-size: 1.2em; /* Increase label size for readability */
  cursor: pointer;
}

/* Optional: add hover effect for custom checkbox */
.checkbox-custom:hover {
  border-color: #0056b3; /* Darken border on hover */
}

/*Added for side-by-side placement of top players */

.lists-container {
    display: flex;
    flex-wrap: wrap;
}

.list {
    flex: 1 1 175px; /* Adjust width as needed */
    margin: 0 10px;
    padding: 10px;
    border: 1px solid #ccc; 
    border-radius: 5px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .list {
        flex-basis: 100%; /* Stack items on smaller screens */
        margin: 10px 0;
    }
}

#itemList  {
  padding-left: 1rem;
  padding-right: 1rem;
}
/* Focus and responsive adjustments */
.btn:focus {
  outline: 3px solid #0056b3;
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .btn-block {
    width: 100%;
  }
}

.center-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*align-items: left;
  text-align: left; */
  /*min-height: 100vh; */
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.center-this {
  display: grid;
  place-items: center;
  align-content: center;
}

/* unvisited link */
.list a:link {
  color: rgb(5, 5, 5);
}

/* visited link */
.list a:visited {
  color: rgb(6, 6, 6);
}

/* mouse over link */
.list a:hover {
  color: rgb(165, 165, 165);
}

/* selected link */
.list a:active {
  color: rgb(14, 14, 14);
}

/* unvisited link. Using .links here. .list can be changed in the future*/
.links a:link {
  color: rgb(5, 5, 5);
}

/* visited link */
.links a:visited {
  color: rgb(6, 6, 6);
}

/* mouse over link */
.links a:hover {
  color: rgb(165, 165, 165);
}

/* selected link */
.links a:active {
  color: rgb(14, 14, 14);
}

/* Larger clickable area for the thumbs-up voting icon */
.far.fa-thumbs-up {
  position: relative;
  cursor: pointer;
  color: #f6cd02;
  padding: 10px; /* Adds padding around the icon to increase clickable area */
  font-size: 2rem; /* Ensures icon itself remains the desired size */
  border-radius: 50%; /* Rounds out the clickable area */
}

.far.fa-thumbs-up::after {
  content: '';
  position: absolute;
  top: -10px; /* Adjust to control the extra clickable area */
  right: -10px;
  bottom: -10px;
  left: -10px;
  background: transparent;
  z-index: -1; /* Ensure it doesn't interfere visually */
}

/* Hover effect for better feedback */
.far.fa-thumbs-up:hover {
transform: scale(1.2);
color: #fa8d11;
}

@keyframes pop {
0% {
    transform: scale(1);
}
50% {
    transform: scale(1.3);
}
100% {
    transform: scale(1);
}
}

/* Animation on click */
.far.fa-thumbs-up:active {
animation: pop 0.8s ease;
color: #07ffc5;
}

/* Style for the expand text used on cards */
.expand-text {
  color: #fa8d11; /* Example color: Bootstrap primary blue */
  font-style: italic; /* Optional: italicize the text */
  font-size: 1.1rem; /* Optional: adjust the font size */
  cursor: pointer; /* Change cursor to pointer on hover */
  display: block; /* Makes the span take up the full width */
  text-align: center; /* Center-align the text */
  padding: 4px 0; /* Adjust top and bottom padding to increase height */
  cursor: pointer; /* Makes it clear that it's clickable */
}

/* Style for the expand text used on cards */
.thumb-text {
  color: #f6e205; /* Example color: Bootstrap primary blue */
  font-style: italic; /* Optional: italicize the text */
  font-size: 0.7rem; /* Optional: adjust the font size */
  cursor: pointer; /* Change cursor to pointer on hover */
  text-align: left; /* Center-align the text */
}

/* Pinned card with thumbtack overlay */
.pinned::before {
  content: "\f08d"; /* Font Awesome Unicode for the thumbtack icon */
  font-family: "Font Awesome 5 Free"; /* Ensure you're using Font Awesome */
  font-weight: 900; /* Ensure solid icon */
  position: absolute;
  top: 16px;  /* Adjust for positioning */
  left: 16px; /* Adjust for positioning */
  font-size: 24px; /* Adjust size as needed */
  color: #6fff47; /* Choose a color for the icon (e.g., tomato) */
  z-index: 10;  /* Make sure it's above other elements */
  pointer-events: none; /* Ensure the icon doesn't interfere with clicking */
  transform: rotate(-45deg); /* Rotates the icon 45 degrees */
  opacity: 0.7; /* Semi-transparency */
  backdrop-filter: blur(5px); /* Blurs the background behind the icon */
}
/* Pinned card with thumbtack overlay on hover */
.pinned:hover::before {
  transform: rotate(-45deg) scale(1.2); /* Slightly larger on hover */
  color: #6fff47; /* Changes to a deeper color on hover */
  transition: all 0.2s ease-in-out; /* Smooth transition */
}

/* Getting Started Card */
.link-highlight:hover {
  transform: scale(1.07); /* Slightly increase size on hover */
}

/* Close Button Styling Introducted for the quota modal*/
.close {
  position: absolute;
  top: 10px;
  right: 10px;
  text-decoration: none;
  font-size: 24px;
  color: black;
  cursor: pointer;
}

/* Show modal when its ID is targeted */
:target {
  display: flex;
}

#readQuotaDisplay {
  padding: 10px;  /* Adjust the value as needed */
}

/* Accessiblity Change */
.icon-btn {
  background: transparent;
  border: none;
  padding: 8px; /* Adds padding around the icon */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px; /* Ensures minimum touch target size */
  min-height: 48px;
  cursor: pointer;
  pointer-events: auto !important;
}

.icon-btn i {
  font-size: 2.0em; /* Adjust as needed */
}

/* Accessibility change */
#logo {
  height: 48px;
}
/* Accessibility change */
.dropdown-item {
  min-height: 48px; /* Ensure minimum touch target height */
  padding: 12px 16px; /* Adjust padding as needed */
}
/* Change Bootrap 5  defaults. Set a neutral gray for dropdown item hover that works in both light and dark mode */
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #a1a3a4 !important; /* Neutral gray */
  color: #ffffff !important; /* White text for accessibility */
}


.guest-buttons-container {
  display: flex;
  flex-direction: row; /* Buttons in a row */
  flex-wrap: wrap; /* Allow wrapping to the next line */
  gap: 2px; /* Space between buttons */
  margin-bottom: 20px; /* Space below the buttons */
}

.btn-sport,
.btn-clear {
  flex: 1; /* Distribute space evenly */
  min-width: 50px; /* Minimum width for buttons */
  padding: 3px 3px; /* Smaller padding */
  font-size: 13px; /* Smaller font size */
  color: white;
  border: none;
  border-radius: 8px; /* Slightly rounded corners */
  cursor: pointer;
  text-align: center; /* Center text inside buttons */
  margin-left: 6px;
  margin-right: 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  border: 2px solid transparent; /* Transparent border to avoid layout shift */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

.btn-sport {
  background: linear-gradient(45deg, #007bff, #0056b3); /* Gradient for sport buttons */
}

.btn-sport:hover {
  background: linear-gradient(45deg, #0056b3, #007bff); /* Reverse gradient on hover */
  transform: translateY(-2px); /* Slight lift on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
  border: 2px solid rgba(255, 255, 255, 0.5); /* White border on hover */
}

.btn-sport:active {
  transform: translateY(1px); /* Slight push down when clicked */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Smaller shadow when clicked */
}

.btn-clear {
  background: linear-gradient(45deg, #dc3545, #c82333); /* Gradient for clear button */
}

.btn-clear:hover {
  background: linear-gradient(45deg, #c82333, #dc3545); /* Reverse gradient on hover */
  transform: translateY(-2px); /* Slight lift on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Larger shadow on hover */
  border: 2px solid rgba(255, 255, 255, 0.5); /* White border on hover */
}

.btn-clear:active {
  transform: translateY(1px); /* Slight push down when clicked */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Smaller shadow when clicked */
}

/* Apple Google Toggle */
.auth-toggle-wrapper {
  display: flex;
  align-items: center;
  font-size: 1rem;
}

.toggle-pill {
  position: relative;
  display: flex;
  background: #e0e0e0;
  border-radius: 50px;
  padding: 5px;
  width: 100px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.toggle-pill input[type="radio"] {
  display: none;
}

.toggle-pill label {
  flex: 1;
  text-align: center;
  z-index: 2;
  padding: 6px 0;
  font-size: 1.1rem;
  color: #555;
  transition: color 0.3s ease;
}

.toggle-pill input[type="radio"]:checked + label {
  color: white;
}

.toggle-pill .toggle-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 44%;
  height: 80%;
  background-color: #007bff;
  border-radius: 50px;
  z-index: 1;
  transition: left 0.3s ease;
}

#appleToggle:checked ~ .toggle-indicator {
  left: 52%;
}


/* Media query for smaller screens (e.g., mobile devices) */
@media (max-width: 600px) {
  .guest-buttons-container {
    gap: 2px; /* Smaller gap for mobile */
  }

  .btn-sport,
  .btn-clear {
    min-width: 50px; /* Smaller minimum width for mobile */
    padding: 3px 3px; /* Even smaller padding for mobile */
    font-size: 13px; /* Even smaller font size for mobile */
  }
}

/* Accessiblity Change */
#navbarDropdown, 
#navbarDropdownTags, 
#navbarDropdownPages,
#navbarDropdownGames {
  padding-top: 12px;
  padding-bottom: 12px;
  padding: 12px 12px; /* Increase both vertical and horizontal padding */
}

/* Accessiblity Change */
.dark-mode-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  gap: 0.5rem; /* Space between toggle and icon */
}

.dark-mode-toggle input {
  /* Hides the native checkbox */
  appearance: none;
  width: 40px;
  height: 24px;
  background-color: #ccc;
  border-radius: 12px;
  position: relative;
  outline: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Custom toggle appearance */
.dark-mode-toggle input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Toggle state styles */
.dark-mode-toggle input:checked {
  background-color: #222;
}

.dark-mode-toggle input:checked::before {
  transform: translateX(16px); /* Moves the inner circle to the right */
}

.dark-mode-icon {
  background: transparent; /* Remove background */
  border: none; /* Remove border */
  cursor: pointer; /* Change cursor to pointer */
  padding: 10px; /* Add padding for better click area */
}

.dark-mode-icon i {
  font-size: 2rem; /* Use rem or px for a larger icon size */
  color: inherit; /* Ensure it inherits color for better visibility */
}

/* Accessibilty */ 
#darkModeToggle {
  min-height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
}


/* Icon color changes */
#darkModeIcon {
  color: #ffcc00;
  transition: color 0.3s;
}

/* Switch to moon icon for dark mode */
.dark-mode-toggle input:checked + #darkModeIcon {
  color: #f0f0f0;
}

.dark-mode-label {
  font-weight: bold;
  color: #222;
  margin-left: 10px;
  margin-right: 10px;
  vertical-align: middle;
}

/* Default light mode for select */
select.form-control.darktag {
  background-color: #fff; /* Light background color */
  color: #333; /* Dark text color */
  border: 1px solid #ccc; /* Light border */
}

/* Dark mode styling */
body.dark-mode select.form-control.darktag {
  background-color: #222; /* Dark background color */
  color: #f8f9fa; /* Light text color */
  border: 1px solid #444; /* Dark border */
}

/* Dark mode focus */
body.dark-mode select.form-control.darktag:focus {
  outline: none;
  box-shadow: 0 0 5px 2px rgba(248, 249, 250, 0.5); /* Light glow effect for accessibility */
}


/* Dark mode styles */
.dark-mode {
  background-color: #222;
  color: #fff;
}

.dark-mode .form-check-label {
  color: #fff;
}

.dark-mode .card {
  background-color: #222; /* Adjust as needed */
}

.dark-mode .darktag {
  background-color: #222; /* Adjust as needed */
}

.dark-mode .modal-content {
  background-color: #222; /* Adjust as needed */
}

.dark-mode #itemInput {
  background-color: #222; /* Adjust as needed */
  color: #fff;
}
.dark-mode .dropdown-menu {
  background-color: #222; /* Adjust as needed */
}
/* CSS for dark mode */
.dark-mode .navbar-dark .navbar-nav .dropdown-menu .dropdown-item {
  color: #efec86; /* Change to your desired dark mode text color */
}

/* unvisited link */
.dark-mode .list a:link {
  color: rgb(250, 246, 246);
}

/* visited link */
.dark-mode .list a:visited {
  color: rgb(251, 248, 248);
}

/* mouse over link */
.dark-mode .list a:hover {
  color: rgb(165, 165, 165);
}

/* selected link */
.dark-mode .list a:active {
  color: rgb(250, 246, 246);
}

/* unvisited link  Using .links here. .list can be changed in the future*/ 
.dark-mode .links a:link {
  color: rgb(250, 246, 246);
}

/* visited link */
.dark-mode .links a:visited {
  color: rgb(251, 248, 248);
}

/* mouse over link */
.dark-mode .links a:hover {
  color: rgb(165, 165, 165);
}

/* selected link */
.dark-mode .links a:active {
  color: rgb(250, 246, 246);
}