a,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
} /* turns off default underline on links */

/* Define colors at the root level */
:root {
  --purple: #38003c; /* Dark purple */
  --purple-comp: #043C00; /* Complemantary to purple */
  --light-purple: #963cff; /* Light Purpe */
  --bright-green: #00ff85; /* Bright green */
  --turqouise: #04f5ff; /* Turqouise */
  --red: #e90052; /* Redish */
  --yellow: #eaff04; /* yellow */

  --text-light: #ffffff; /* White for contrast */
  --text-dark: #37003c; /* Dark purple */
  --primary-hover-color: #2c0030; /* Slightly darker purple for hover */
  --secondary-hover-color: #00ef77; /* Slightly darker purple for hover */
}

.text-color-light {
  color: var(--text-light);
}

.btn-turqouise {
  background-color: var(--turqouise);
  color: var(--text-dark);
}

.btn-turqouise:hover {
  background-color: var(--yellow);
  color: var(--text-dark);
}

/* for dropdown leagues */
.red-text a {color:var(--red);}
.green-text a {color:green;}

/* Team colors */
.team-1 {
  background-color: #ef0107 !important;
  color: white !important;
}

/* Manchester United */
.team-3 {
  background-color: #ef0107 !important;
  color: white !important;
}

/* Arsenal */
.team-4 {
  background-color: #241f20 !important;
  color: white !important;
}

/* Newcastle */
.team-6 {
  background-color: #ffffff !important;
}

/* Tottenham */
.team-7 {
  background-color: #7a263a !important;
  color: white !important;
}

/* Aston Villa */
.team-8 {
  background-color: #034694 !important;
  color: white !important;
}

/* Chelsea */
.team-9 {
  background-color: #1b458f !important;
}

/* Leicester City */
.team-11 {
  background-color: #274488 !important;
  color: white !important;
}

/* Everton */
.team-13 {
  background-color: #0101e8 !important;
  color: white !important;
}

/* Leicester */
.team-14 {
  background-color: #dd0000 !important;
  color: white !important;
}

/* Liverpool */
.team-17 {
  background-color: #e53233 !important;
  color: white !important;
}

/* Nottingham Forest */
.team-20 {
  background-color: #ff0000 !important;
}

/* Southampton */
.team-31 {
  background-color: #0a4af5 !important;
  color: white !important;
}

/* Crystal Palace */
.team-39 {
  background-color: #fdb913 !important;
}

/* Wolves */
.team-36 {
  background-color: #0057b8 !important;
  color: white !important;
}

/* Brighton */
.team-43 {
  background-color: #3a64a3 !important;
  color: white !important;
}

/* Ipswich */
.team-43 {
  background-color: #6cabdd !important;
}

/* Manchester City */
.team-54 {
  background-color: #ffffff !important;
}

/* Fulham */
.team-91 {
  background-color: #da291c !important;
  color: white !important;
}

/* Bournemouth */
.team-94 {
  background-color: #d20000 !important;
  color: white !important;
}

/* Brentford */
.default-team {
  background-color: #eeeeee !important;
}

/* Fallback */

 
/* TABLE */
/* table colours */
.bg-team {
  background-color: var(--red) !important;
  color: white !important;
} /* th team */
.bg-team a {
  background-color: var(--red) !important;
  color: white !important;
} /* th links */

.th-purple th {
  background-color: var(--purple);
  color: white;
} /* th */
.th-purple th a {
  background-color: var(--purple);
  color: white;
} /* th links */

.td-red td {
  background-color: var(--red);
  color: white;
}

.bg-purple {
  background-color: var(--purple);
  color: white;
} /* in use? */
.bg-green {
  background-color: var(--bright-green);
} /* in use? */
.bg-red {
  background-color: var(--red);
  color: white;
}
.bg-red:hover {
  background-color: var(--yellow);
}
.bg-yellow {
  background-color: var(--yellow);
  color: black;
}
.bg-purple-comp {
  background-color: var(--purple-comp);
  color: white;
}

.th-yellow th {
  background-color: var(--yellow);
} /* Totals, not in use? */
.td-yellow td {
  background-color: var(--yellow);
}

td.green-text {
  color: green;
} /* +/- columns */
td.red-text {
  color: red;
} /* +/- columns */
td.turqouise-text {
  color: var(--turqouise);
}

/* In order to overlap the player images */
table {
  position: relative;
  z-index: 2;
}

/* TABLE HEADERS */
th:hover.sort-team {
  color: var(--purple) !important;
}
th:hover.sort {
  color: var(--red);
}

/* Cursors */
th {
  cursor: default;
  background-color: blueviolet;
}
th.sort,
th.sort-team {
  cursor: pointer;
} /* Changes the cursor to a pointer */
td {
  cursor: default;
}

/* BORDERS */

/* custom borders for the table */
.vert-border {
  border-left: 1px solid rgb(222, 226, 230);
}
.vert-border-bold {
  border-left: 1px solid black;
}
.vert-border-end {
  border-right: 1px solid rgb(222, 226, 230);
}
.vert-border-white {
  border-left: 1px solid whitesmoke;
}
.vert-border-end-white {
  border-right: 1px solid whitesmoke;
}
.btm-border-white {
  border-bottom: 1px solid whitesmoke !important;
}

/* Rounded borders */
.round-border {
  border-radius: 20px;
}

.round-border-top {
  border-radius: 20px 20px 0 0;
}
.round-border-top-left{
  border-radius: 20px 0 0 0;
}
.round-border-top-right {
  border-radius: 0 20px 0 0;
}
.round-border-btm {
  border-radius: 0 0 20px 20px;
}
.round-border-btm-left {
  border-radius: 0 0 0 20px;
}
.round-border-btm-right {
  border-radius: 0 0 20px 0;
}

.player-image-container {
  position: relative;
  xoverflow: hidden;  /* Prevent images from spilling outside */
  height: 180px;      /* You might need to set an explicit height depending on your layout */
  z-index: 3; /* Make sure this is higher than the table's z-index */
}

/* All child wrappers should be absolute */
.player-image-container div {
  position: absolute;
  top: 20px;
}

.table-responsive {
  position: relative; /* Ensure it creates a stacking context */
  z-index: 20;         /* Higher than the player images */
}

/* Overlap effect with different left offsets and stacking orders */
.player-image-1 {
  left: 0;
  z-index: 10;
}
.player-image-2 {
  left: 15%;  /* Adjust this value for desired overlap */
  z-index: 9;
}
.player-image-3 {
  left: 30%;
  z-index: 8;
}
.player-image-4 {
  left: 45%;
  z-index: 7;
}
.player-image-5 {
  left: 60%;
  z-index: 6;
}

/* Responsive image sizing */
.overlap-img {
  max-width: 150px; /* or use a percentage */
  width: auto;
}




.skeleton-loader-container {
  width: 100%;
  height: 190px;
  background: linear-gradient(90deg, #FFF 0%, #FFF 50%, #FFF 75%);
  background-size: 100% 100%;
  animation: skeleton-animation 1.5s infinite ease-in-out;
}


/* header */
#header-logo-gw a {
  border-radius: 5px;
  padding: 0.5rem;
}

#header-logo {
  color: black;
  font-size: 1rem;
  font-weight: bold;
}
#header-gw {
  color: black;
  font-size: 0.7rem;
}

#flag span {
  font-size: 2.1em;
  border-radius: 5px;
}

#header-team-name h2 {
  font-size: 1rem;
}

/* #tables-btn {
  background-color: var(--red);
  color: white;
}
#tables-btn:hover {
  background-color: var(--red);
  color: black;
} */
#tables-btn.show {
  background-color: yellow;
  color: black;
}
.dropdown-item:active {
  /* Just when clicking on it */
  background-color: white;
  color: var(--red) !important;
}
.dropdown-item:hover {
  /* Just when clicking on it */
  background-color: white;
  color: var(--red) !important;
}
.active {
  background-color: var(--yellow) !important;
  color: black !important;
}


/* SLIDERS */
/* make every form-label a full-width block and center its text */

#filter .slider-narrow {
  max-width: 85%;
  width: 100%;
}

.noUi-horizontal .noUi-tooltip {
  transform: translateX(-50%) !important;
  white-space: nowrap;
  padding: 2px 4px;
  font-size: 0.85rem;
}

/* Change the color of the "connect" section (the range between handles) */
#price-slider .noUi-connect {
  background: rgb(13, 110, 253); 
}
#minutes-slider .noUi-connect {
  background: rgb(13, 110, 253); 
}


/* #filter {
  padding-top: 4px;
  padding-bottom: 4px;
} */

/* Chips page */
.team-player { /* photo */
  width: 100%;
  max-width: 200px;
  position: relative;
  z-index: 2;
}


.managers {
  width: 100%;
  max-width: 200px;
  position: relative;
  z-index: 2;
}

.text-overlay { /* On chips */
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  background-color: var(--purple);
  color: white;
  padding: 0 1rem;
  z-index: 1;
  /* width: 100%; */
  
}
.chips-text {
  font-size: x-large;
  top: 20%; left: 0;
  z-index: 1;
}
.chips-text-points {
  width: 100%;
  bottom: 0%; left: 0%;
  z-index: 3;
}

#bench-player-2 {
  border-left: 1px solid rgba(var(--bs-dark-rgb));
  /* --bs-border-opacity: 1; */
  /* border-right: 1px solid rgba(var(--bs-dark-rgb), var(--bs-border-opacity)); */
}
#bench-player-3 {
  border-right: 1px solid gray;
}

.fluid-font {
  font-size: clamp(1rem, 2vw, 111rem);
}



/* Sticky cols */
/* General style for sticky columns */
.sticky-col {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  background: #fff; /* Ensure the background covers underlying content */
  left: 0;
  z-index: 3; /* Higher z-index so it overlaps the second column if needed */
}

/* 1) Outer coloured background */
th.sorted.sort-team::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--red);
  z-index: -2;
}

th.sorted:not(.sort-team)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--purple);
  z-index: -2;
}

/* 2) Inner white curved shape */
th.sorted.sort-team::after,
th.sorted:not(.sort-team)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  border-radius: 10px 10px 0 0;
  z-index: -1;
}

/* 3) Make sure th can hold those pseudos */
th.sorted {
  position: relative;
  z-index: 1;
  color: black !important;
}

/* position that little <span> over to the right, vertically centered */
.sort-arrow {
  /* position: absolute;
  /* right: 0.5rem; */
  /* top: 50%;
  transform: translateY(-50%);
  font-size: 0.75em;
  z-index: 2;
  pointer-events: none; */ 
  /* so clicks go through to the TH */
}


/* mini league current team highlighter */
/* .highlight-current>td:nth-child(-n+4) { */
.highlight-current {
  border: 2px solid var(--red) !important;
}

/* mini league cell highlighter */
.highlight {
  background-color: #fff3b0 !important;
}

/* Loading... */
@keyframes dots {
  0% {
    content: '.';
  }

  10% {
    content: '..';
  }

  20% {
    content: '...';
  }

  100% {
    content: '....';
  }
}

#loading::after {
  content: '';
  animation: dots 1s steps(1, end) infinite;
}

/* Chart.js */
.chart-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: 300px;
  /* You can adjust this */
  margin: 0 auto;
}

@media (min-width: 768px) {
  .chart-container {
    height: 400px;
  }
}

@media (min-width: 1200px) {
  .chart-container {
    height: 500px;
  }
}


/* log/linear scale buttons */
.toggle-group {
  position: absolute;
  bottom: -5%;
  /* 5% up from the bottom of the container */
  right: 2%;
  /* 2% in from the right edge */

}

/* scroll box for manager history and gameweek history */
.manager-scrollable-table {
  max-height: 500px; 
  overflow-y: auto;
  /* border: 1px solid gray; */
  border-radius: 5px;
}
/* Media query for small screens */
@media (max-width: 576px) {
  .manager-scrollable-table {
    max-height: 200px;
  }
}


/* make the table header stick to the top of that scrollable box */
.manager-scrollable-table thead th {
  position: sticky;
  top: 0;
  background: white;
  /* or whatever your table’s bg is */
  z-index: 2;
  /* sit above the body rows */
  /* optional: add a little shadow so you see the separation */
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
}

/* testing fixed sort bar at bottom of the page on small screens */