body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  /* display: inline; */
  padding: 20px;
  background-color: #000000; /* Optional: Add a background color */
}

.logo-container {
  display: flex;
  margin-left: 20px;
  /* align-items: center; */
}

.logo {
  width: 100px; /* Adjust size as needed */
  height: auto;
}

nav {
  background-color: #000000;
  color: rgb(218, 71, 71);
  padding: 10px;
  display: flex;
  gap: 10px;
  margin-bottom: 2px;
  align-items: flex-end;
}
nav a {
  text-decoration: none; /* Remove underline */
  color: #ffffff; /* Default color */
  font-size: 16px; /* Adjust font size */
  padding: 5px; /* Optional padding for better click area */
}

nav a:visited,
nav a:active {
  color: #ffffff; /* Prevent color change on click or visit */
}

nav a:hover {
  color: #ff0000; /* Change to white on hover */
  transition: color 0.3s ease; /* Smooth transition effect */
}

.burger {
  position: absolute;
  width: 40px;
  height: 30px;
  left: 10px;
  background: transparent;
  cursor: pointer;
  display: block;
}
.burger-menu {
  display: none;
  background-color: #000000;
}
.burger input {
  display: none;
}

.burger span {
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  background: #fff;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.burger span:nth-of-type(1) {
  top: 0px;
  transform-origin: left center;
}

.burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
  transform-origin: left center;
}

.burger span:nth-of-type(3) {
  top: 100%;
  transform-origin: left center;
  transform: translateY(-100%);
}

.burger input:checked ~ span:nth-of-type(1) {
  transform: rotate(45deg);
  top: 0px;
  left: 5px;
}

.burger input:checked ~ span:nth-of-type(2) {
  width: 0%;
  opacity: 0;
}

.burger input:checked ~ span:nth-of-type(3) {
  transform: rotate(-45deg);
  top: 28px;
  left: 5px;
}

.dropdown-menu {
  display: none;
  position: absolute;
  width: 200px;
  height: 70%;
  top: 100%;
  right: 0;
  margin-top: 20px;
  left: -40px;
  z-index: 1000;
  background-color: #ffffff;
  border-radius: 8px;
}

.burger input:checked ~ .dropdown-menu {
  display: block;
}
.dropdown-menu ul {
  list-style: none;
  padding: 10px 0;
  margin: 0;
  width: 200px;
  height: 70%;
}

.dropdown-menu li {
  padding: 10px 20px;
  border-bottom: 1px solid #1fbd2d;
}

.dropdown-menu a {
  text-decoration: none;
  color: #fff;
}
.horizontal-menu {
  display: flex; /* Enables flexbox */
  justify-content: flex-end;

  padding-right: 40px;
  margin: 0;
}
.horizontal-menu ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.htpi {
  width: 350px;
  height: auto;
}
.htpl {
  display: flex;
  width: 400px;
  justify-content: center;
}
.horizontal-menu li {
  margin: 0 15px;
  align-items: center;
  left: 50%;
}

.horizontal-menu a {
  text-decoration: none;
  color: #fff;
}

/* Wrapper for the icon with background */
.account-icon-wrapper {
  background-color: #f0f0f0; /* Grey or white background */
  padding: 10px;
  border-radius: 50%; /* Circle around the icon */
  width: 30px; /* Set the size of the wrapper */
  height: 30px; /* Set the size of the wrapper */
  margin: 0 auto; /* Center the icon */
}

.account-icon {
  width: 30px;
  height: 30px;
  margin: 0 auto;
}

.account-username {
  text-align: center;
  margin-top: 5px; /* Space between icon and username */
}

/* Optional: Style the account link */
.account-link {
  text-decoration: none;
  color: rgb(255, 255, 255); /* Color of the link */
  text-align: center;
  /* display: block; */
}
.ac-w {
  height: 740px;
}
.account-container {
  max-width: 350px;
  margin: 40px auto;
  padding: 20px;

  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.account-container h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.form-group .toggle-dark-mode {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.form-group .toggle-dark-mode input {
  margin-right: 10px;
}
#modeSelect {
  margin-top: 15px;
}
.logout-balance {
  margin-top: 20px;
  text-align: center;
}

.logout-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #f44336;
  color: #fff;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.pl {
  margin-left: 20px;
}
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-left: 25px;
}

.card {
  border: 1px solid #ccc;
  width: 150px;
  padding: 16px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.difference {
  font-weight: bold;
  padding: 2px 5px;
  border-radius: 4px;
}

.rise {
  color: #28a745; /* Green for rise */
  background-color: #e6ffe6; /* Light green background */
}

.fall {
  color: #dc3545; /* Red for fall */
  background-color: #ffe6e6; /* Light red background */
}
.players {
  margin-left: 20px;
}
.players,
.portfolio {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.players a {
  text-decoration: none; /* Remove underline */
  color: #000000; /* Default color */
  font-size: 16px; /* Adjust font size */
  text-decoration: none;
  padding: 5px; /* Optional padding for better click area */
}
.player-detail {
  margin-left: 20px;
}
.fixture-container {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap; /* Ensures it wraps to the next row if necessary */
  gap: 15px; /* Space between fixtures */
}

/* Style for each fixture card */
.fixture-card {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  width: 110px;
  height: 100px;
  background-color: #ffffff;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

/* Headings and paragraphs */
.fixture-card p {
  font-weight: bolder;
  font-size: 14px;
  color: #000000;
}
.darkred {
  background-color: darkred;
}

.brightred {
  background-color: #ff0000;
}

.graycolor {
  background-color: gray;
}

.lightgreen {
  background-color: #1fbd2d;
}

.darkgreen {
  background-color: darkgreen;
}
.title {
  font-size: 40px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
}
.section-title {
  font-size: 28px;
  font-weight: bold;
  justify-content: center;
  align-items: center;
  display: flex;
  margin-bottom: 20px;
  margin-top: 20px;
}
.players a:visited,
.players a:active {
  color: #000000; /* Prevent color change on click or visit */
}

.h-c {
  margin-left: 20px;
}
.player-card,
.portfolio-item {
  border: 1px solid #ddd;
  padding: 10px;
  width: 200px;
}
.player-kit-image {
  width: 100px; /* Adjust the width to your desired size */
  height: auto; /* Maintain the aspect ratio */
}
.search-form {
  width: 600px;
  border-radius: 30px;
  height: 30px;
  margin-top: 20px;
  margin-bottom: 20px;
}
.search-form input {
  height: 20px;
  width: 250px;
}
.custom-select {
  width: 200px;
  border-radius: 4px;
  height: 30px;
  margin-top: 20px;
  margin-bottom: 30px;
  -webkit-tap-highlight-color: #1fbd2d; /* General appearance reset */
}
.custom-select option {
  background-color: #fff; /* Default background */
  color: #000000; /* Default text color */
}

/* Highlight the selected option (hover or focus) */
.custom-select:focus,
.custom-select option:focus {
  outline: none; /* Remove the default outline */
  background-color: #4caf50; /* Set your custom highlight color */
  color: #fff; /* White text color when highlighted */
}
.custom-select option:hover {
  background-color: #4caf50; /* Set your custom hover color */
  color: #fff; /* White text color */
}
#position_sort {
  margin-left: 20px;
}

.playerdetail-kit {
  padding-top: 0; /* No space above the div */
  margin-top: 0;
  margin-left: 0;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.playerdetail-kit img {
  width: 150px;
  height: 140px;
  margin-bottom: 200px;
  object-fit: contain;
}
.playerdetail-kit h3 {
  margin-top: 0;
  margin-left: 20px;
  font-weight: bold;
  font-size: 22px;
}
#stock-graph {
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-end;

  gap: 10px;
}
#stock-graph .candle {
  color: black; /* Set text color to black */
  font-size: 14px; /* Adjust font size if needed */
  text-align: center; /* Center the text */
  line-height: 20px; /* Adjust line-height to vertically center text if candles have a fixed height */
}

.candle-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.candle {
  width: 20px;
  border-radius: 3px;
  min-height: 1px;
}

.candle.green {
  background-color: #1fbd2d; /* Green for gain */
}

.candle.red {
  background-color: #ff0000; /* Red for loss */
}

.candle-label {
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
}
.empty {
  background-color: transparent;
  border: 1px solid black; /* Optional: Add a visible border for 0-value candles */
}
.trade-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 90%;
}
.purchase-stock-header {
  display: none;
}
.trade-header {
  display: flex;
  justify-content: space-between;
  width: 80%;
  padding: 0 10px;
}
.trade-content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 20px; /* Add some spacing */
}
#buy-form {
  flex: 1;
  max-width: 300px; /* Keeps the form closer to the center */
  display: flex;
  flex-direction: column; /* Ensures vertical stacking */
  align-items: center;
  padding: 20px;
  border-radius: 8px;
}
#buy-form label,
#buy-form input {
  margin-bottom: 15px; /* Adds space between form elements */
}
#buy-form input,
#buy-form button {
  width: 80px;
  height: 40px;
  margin-bottom: 15px; /* Adds space between the input and the button */
}
#buy-form .quantity-container {
  display: flex;
  align-items: center; /* Aligns the label and input vertically */
  margin-bottom: 15px;
}

#buy-form label {
  margin-right: 10px; /* Adds space between the label and the input */
  font-weight: bold;
}

#buy-form input {
  width: 200px; /* Adjusts the input field width */
}

#buy-form button {
  padding: 10px;
  background-color: #1fbd2d; /* Green background for the button */
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#buy-form button:hover {
  background-color: #45a049; /* Darker green when hovering */
}

.leaderboard-table {
  height: 500px;
  width: 70%;
  margin-left: 20px;
}
/* Base styles for both tables */
table {
  width: 70%;
  border-collapse: collapse;
}
#your-rank-section {
  width: 70%;
}
/* Main leaderboard table */
#leaderboard-table,
#your-rank-table {
  width: 70%;
}

/* Table headers */
#leaderboard-table thead th,
#your-rank-table thead th {
  text-align: left;
  padding: 8px;
  font-weight: bold;
}

/* Table body cells */
#leaderboard-table tbody td,
#your-rank-table tbody td {
  padding: 8px;
  text-align: left;
  border-spacing: 0;
}

/* Row borders */
#leaderboard-table tbody tr,
#your-rank-table tbody tr {
  border-bottom: 1px solid #1fbd2d; /* Light border for separation */
}

/* Highlight row */
#leaderboard-table tbody tr.highlight,
#your-rank-table tbody tr.highlight {
  background-color: #1fbd2d;
}

/* Ensure proper spacing and border for headers */
#leaderboard-table thead,
#your-rank-table thead {
  border-bottom: 1px solid #1fbd2d; /* Green bottom border for headers */
}

/* Highlight row styling */
.highlight {
  background-color: #1fbd2d;
}

/* Ensure your rank table aligns the same */
#your-rank-table {
  width: 100%;
  border-collapse: collapse;
}

#your-rank-table td,
#leaderboard-table td {
  padding: 8px;
  text-align: left;
}

#your-rank-table tbody tr {
  border-bottom: 1px solid #1fbd2d;
}

/* Make sure your rank section table is aligned with leaderboard table */
#your-rank-table td,
#leaderboard-table td {
  padding: 8px;
}

#your-rank-table thead th,
#leaderboard-table thead th {
  font-weight: bold;
  padding: 8px;
  text-align: left;
}
/* Ensure both tables have identical column widths */
#leaderboard-table th:nth-child(1),
#your-rank-table td:nth-child(1) {
  min-width: 50px;
  width: 20%;
}

#leaderboard-table th:nth-child(2),
#your-rank-table td:nth-child(2) {
  min-width: 100px;
  width: 40%;
}

#leaderboard-table th:nth-child(3),
#your-rank-table td:nth-child(3) {
  min-width: 80px;
  width: 40%;
}

.show-more-wrapper {
  text-align: center;
  margin-top: 20px;
}

.show-more-wrapper .btn {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 5px;
}

.show-more-wrapper .btn:hover {
  background-color: #0056b3;
}

.highlight-message {
  margin-top: 10px;
  background-color: #f8d7da;
  color: #721c24;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

footer {
  bottom: 0;
  position: relative;
  text-align: center;
  padding: 20px;
  background-color: #000000;
  /* margin-top: 20px; */
}

.footer-content a {
  color: #ffffff;
  text-decoration: none;
  margin-left: 10px;
}

.footer .footer-content-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-logo,
.footer-links,
.footer-socials {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-right: 100px;
}

.footer-logo img {
  width: 80px; /* Adjust logo size */
  margin-bottom: 10px;
}

.footer-logo-text {
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
}

.footer-links-title {
  font-size: 1.1rem;
  margin-bottom: 10px;
  color: #fff;
}

.footer-about {
  font-size: 0.9rem;
  color: #fff;
}

.footer-auth-link a {
  text-decoration: none;
  color: #ffffff;
}

.footer-auth-link {
  text-align: center;
  margin-top: 20px;
}

.footer-auth-link a {
  font-size: 1rem;
  color: #ffffff;
  text-decoration: none;
}
/* From Uiverse.io by 0800Gonza */
.sc {
  width: fit-content;
  height: fit-content;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 25px 25px;
  gap: 40px;
}

/* for all social containers*/
.socialContainer {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: rgb(44, 44, 44);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition-duration: 1s;
}
/* instagram*/
.containerOne:hover {
  background-color: #d62976;
  transition-duration: 0.3s;
}
/* twitter*/
.containerTwo:hover {
  background-color: #00acee;
  transition-duration: 0.3s;
}

/* Youtube*/

.containerFour:hover {
  background-color: #eb1616;

  transition-duration: 0.3s;
}

.socialContainer:active {
  transform: scale(0.9);

  transition-duration: 0.3s;
}

.socialSvg {
  width: 17px;
}

.socialSvg path {
  fill: rgb(255, 255, 255);
}

.socialContainer:hover .social Svg {
  animation: slide-in-top 0.3s both;
}

@keyframes slide-in-top {
  0% {
    transform: translateY(-50p x);
    opacity: 0;
  }

  100% {
    transform: translateY(0);

    opacity: 1;
  }
}

.pagination {
  margin-top: 20px;

  display: flex;

  width: 60%;

  justify-content: space-betwe en;
}

.userbalance {
  text-align: right;

  font-size: 20px;

  margin-right: 10px;

  margin-top: 10px;

  font-weight: bold;
}

.stockprice {
  margin-top: 20px;

  display: flex;
}

.footer-content a:hover {
  text-decoration: underline;
}

/* From Uiverse.io by akshat-p
atel28 */
.errorcard {
  width: 330px;

  height: 80px;

  border-radius: 8px;

  box-sizing: border-box;

  padding: 10px 15px;

  background-color: #ffffff;

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: space-aroun d;
  gap: 15px;
}

.wave {
  position: absolute;

  transform: rotate(90deg);

  left: -31px;

  top: 32px;

  width: 80px;

  fill: #fc0c0c3a;
}
.hhtp {
  font-family: "Poppins", sans-serif; /* Modern, readable font */
  font-size: 24px; /* Adjust header size */
  font-weight: bold;
  color: #2c3e50; /* Dark blue shade */
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 3px solid #1fbd2d; /* Adds a blue underline effect */
  padding-bottom: 5px;
  margin-bottom: 15px;
}

.thtp {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.6; /* Improves readability */
  color: #444; /* Dark gray for easy reading */
  margin-bottom: 15px;
}
.spacer {
  height: 10px; /* Adjust gap */
}

h2.hhtp::after {
  content: "⚽"; /* Optional: Adds a football emoji */
  margin-left: 8px;
  color: #e74c3c; /* Red accent color */
}

.icon-container {
  width: 35px;

  height: 35px;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #fc0c0c48;
  border-radius: 50%;

  margin-left: 8px;
}

.icon {
  width: 17px;

  height: 17px;

  color: #d10d0d;
}

.message-text-container {
  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  flex-grow: 1;
}

.message-text,
.sub-text {
  margin: 0;

  cursor: default;
}

.message-text {
  color: #d10d0d;

  font-size: 17px;

  font-weight: 700;
}

.sub-text {
  font-size: 14px;

  color: #555;
}

.cross-icon {
  width: 18px;

  height: 18px;

  color: #555;

  cursor: pointer;
}

.saveformation {
  display: flex;

  justify-content: center;
}

.htp {
  margin-bottom: 20px;
  margin-left: 20px;
}
.ptf {
  margin-left: 20px;
}
@media (max-width: 1024px) {
  .burger {
    position: relative;
    width: 25px;
    height: 20px;
  }
  .burger-menu {
    display: block;
  }

  .horizontal-menu {
    display: none;
  }

  .burger input:checked ~ span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 0px;
    left: 3px;
  }

  .burger input:checked ~ span:nth-of-type(2) {
    width: 0%;
    opacity: 0;
  }

  .burger input:checked ~ span:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 18px;
    left: 3px;
  }

  .filters {
    margin-top: 40px;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .header {
    width: 600px;
  }
  .footer {
    width: 600px;
  }
  .dropdown-menu {
    width: 400px;
    height: 800px;
  }
  .searchBoxcontainer {
    margin-top: 0;
  }

  .sc {
    display: block;
    margin: 5px 0;
  }
  .socialContainer {
    margin-bottom: 25px;
  }
}

@media (max-width: 768px) {
  main {
    margin-left: 0;
  }
  .logo-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 20px;
  }
  .htpi-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .pagination {
    display: grid;
    justify-content: flex-end;
  }
  .page {
    margin-bottom: 20px;
  }
  .search-form {
    width: 300px;
  }
  .player-search {
    margin-top: 10px;
    border-radius: 8px;
  }
  .hhtp,
  .thtp {
    width: 250px;
    margin-right: 10px;
  }

  .fixture-container {
    left: 10px;
    width: 350px;
  }
  .burger {
    position: relative;
    width: 25px;
    height: 20px;
  }
  .burger-menu {
    display: block;
  }

  .horizontal-menu {
    display: none;
  }

  .burger input:checked ~ span:nth-of-type(1) {
    transform: rotate(45deg);
    top: 0px;
    left: 3px;
  }

  .burger input:checked ~ span:nth-of-type(2) {
    width: 0%;
    opacity: 0;
  }

  .burger input:checked ~ span:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 18px;
    left: 3px;
  }
  .dropdown-menu {
    width: 280px;
    height: 500px;
  }

  .pl {
    margin-left: 30px;
  }
  .players a {
    padding: 2px;
    font-size: 13px;
  }
  #position_sort {
    margin-left: 0;
  }
  .custom-select {
    margin-right: 40px;
  }
  .trade-container {
    margin-top: 20px;
    width: 100%;
  }
  .trade-header {
    flex-direction: column; /* Stacks the header items vertically */
    align-items: flex-start; /* Align to the left */
    width: 100%; /* Make it full width */
  }
  .trade-header h2:nth-child(2) {
    display: none; /* Hides the second h2 element (Purchase Stock) */
  }
  .trade-content {
    flex-direction: column; /* Stacks the items vertically */
    align-items: center; /* Centers the items */
  }
  .trade-header h2 {
    margin-bottom: 10px; /* Adds space between the headers */
  }
  .purchase-stock-header {
    display: block;
  }
  #buy-form {
    width: 100%; /* Takes full width of the container on smaller screens */
    max-width: 100%; /* Removes the max-width constraint */
  }
  #stock-graph {
    width: 600px;
  }
  .sc {
    display: block;
    margin: 5px 0;
  }
  .socialContainer {
    margin-bottom: 25px;
  }
  .footer-links {
    margin-right: 40px;
  }
  .wide-layout .header,
  .wide-layout .header,
  .wide-layout .footer,
  .wide-layout .playerdetail-kit {
    width: 800px;
  }

  .wide-layout .logo-container,
  .row {
    width: 50%;
  }
  .htpi {
    width: 200px;
  }
  .htpl {
    width: 250px;
  }
}