/* Page body styles */
body {
  margin: 0; /* Remove the default page margin */
}

a {
  color: #004e9d; /* Link color */
}
a:hover {
  color: #000; /* Hovered link color */
}

h1 {
  text-align: center;
}

/* Responsive images */
figure {
  text-align: center;
  margin: 0.5rem 0;
  padding: 0;
}
figure svg,
figure img {
  max-width: 100%;
  height: auto;
}
figcaption {
  margin-bottom: 0.25rem;
  font-family: verdana;
}

figcaption a {
  color: #333; /* Link color */
  text-decoration: none;
  font-size: 0.75rem;
}

figcaption:hover a {
  text-decoration: underline;
}
/* Header */
.header {
  border-bottom: 2px solid #000;
  background: #9c0606;
  padding: 1rem;
  text-align: center;
}
.header figure {
  margin: 0;
  padding: 0;
}
.header figure img,
.header figure svg {
  display: inline-block;
}

.header a {
  color: #fff; /* Header Link color */
}

/* Horizontal menu links used in the header and footer */
.menu-links {
  list-style: none;
  margin: 0.5em 0;
  padding: 0;
}
.menu-links li {
  display: inline-block;
}
.menu-links a {
  display: block;
  padding: 0.5em;
  white-space: nowrap;
}

/* Main Content Column */
.main-content {
  background: #fff;
}

/* Left Sidebar Column */
.left-sidebar {
  background: #fff;
}

/* Right Sidebar Column */
.right-sidebar {
  background: #fff;
}

/*************************/
/*        FIXTURES       */
/*************************/
/****** FIXTURE CARD *****/

.fixturecard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.fixturecard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#fixturecard-img img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  object-fit: contain;
}

#fixturecard-league-img {
  margin-top: -40px;
}

#fixturecard-league-img img {
  border-radius: 50%;
  border: #fff 6px solid;
}

/* Add some padding inside the card container */
#fixturecardcontainer {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#fixturecardcontainer p {
  font-size: 0.75rem;
}

#fixturecard-date {
  padding: 16px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}
/****** FIXTURE PAGE *****/
#fixturedate p {
  color: #fff;
}

#fixturepageleague {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#fixturepagelocation {
  width: 100%;
  margin-top: 2rem;
  padding: 2px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background-color: #9c0606;
  color: #fff;
}
#fixturepagedate {
  padding: 2px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background-color: #9c0606;
  color: #fff;
  height: 60px;
}

#fixturepagecontainer {
  padding: 2px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background-color: #9c0606;
  color: #fff;
}
#fixturepagecourse {
  margin: 2rem auto;
  padding: 2px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
}

#fixturepagecoursemap {
  padding: 0px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#fixturepagenarrow img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

#fixturepageclub {
  padding: 2px 0px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
}
/*************************/
/*        RESULTS        */
/*************************/
/****** RESULTS CARD *****/

.resultcard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.resultcard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#resultcard-img img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  object-fit: cover;
  height: 300px;
}

#resultcard-league-img {
  margin-top: -40px;
}

#resultcard-league-img img {
  border-radius: 50%;
  border: #fff 6px solid;
}

/* Add some padding inside the card container */
#resultcardcontainer {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#resultcardcontainer p {
  font-size: calc(6px + 0.390625vw);
}

#resultcard-date {
  margin-top: 0.5rem;
  padding: 16px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #0f0f83;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

/*** RESULTS CARD BLACK **/
#resultcardblack {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position: relative;
  width: 400px;
  height: 300px;
  position: relative;
}

/* On mouse-over, add a deeper shadow */
#resultcardblack:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

#resultcardblackcontainer {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0px;
  /* background-image: linear-gradient(to top, #000, transparent); */
  background: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 0.8743872549019608) 75%,
    rgba(0, 0, 0, 1) 100%
  );
  text-align: center;
}

#resultcardimageblack img {
  width: 400px;
  height: 300px;
  object-fit: cover;
  display: block;
}

#resultcardtextblackcentered {
  width: 100%;
  position: absolute;
  top: 80%;
  color: #fff;
  text-align: center;
}
/***** OPEN RACE CARD ****/
#openracecard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
  width: 350px;
  height: 200px;
  display: flex;

  border-bottom-right-radius: 20px;
}

/* On mouse-over, add a deeper shadow */
#openracecard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#openracecardimage img {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  height: 200px;
  object-fit: cover;
}
#openracecardimage {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  width: 100%;
  height: 200px;
  /* object-fit: contain; */
}

#openracecardtext {
  width: 100%;
  height: 200px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  /* background: linear-gradient(#9c0606, #fff); */
  background: linear-gradient(#9c0606 0%, #9c0606 55%, #fff 100%);
}

#openracecardtexttop {
  padding: 12px;
  /* background-color: #9c0606; */
  color: #fff;
  text-align: center;
}

#openracecardtexttop a {
  color: #fff;
}
#openracecardtextmid {
  /* background-color: #9c0606; */
  color: #fff;
  text-align: center;
}

#openracecardtextmid a {
  /* background-color: #9c0606; */
  color: #fff;
  text-align: center;
}

#openracecardtextbtm {
  color: #9c0606;
  padding: 12px;
}

/*************************/
/*        RUNNERS       */
/*************************/
/****** RUNNER CARD *****/

.runnercard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.runnercard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#runnercard-img img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  height: 300px;
  width: 100%;
  object-fit: cover;
}

#runnercard-league-img {
  margin-top: -40px;
}

#runnercard-league-img img {
  border-radius: 50%;
  border: #fff 6px solid;
}

/* Add some padding inside the card container */
#runnercardcontainer {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

#runnercardcontainer p {
  font-size: 0.75rem;
}

#runnercard-date {
  padding: 16px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

/*************************/
/*        RECORDS       */
/*************************/
/****** RECORD CARD *****/

.recordcard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.recordcard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#recordcard-img img {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  object-fit: contain;
}

#recordcard-league-img {
  margin-top: -40px;
}

#recordcard-league-img img {
  border-radius: 50%;
  border: #fff 6px solid;
}

/* Add some padding inside the card container */
#recordcardcontainer {
  padding: 10px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#recordcardcontainer p {
  font-size: 0.75rem;
}

#recordcardholder {
  padding: 10px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

#recordcardholder p {
  font-size: 0.75rem;
}

#recordcardevent {
  padding: 10px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#recordcardevent p {
  font-size: 0.75rem;
}

#recordcard-date {
  padding: 10px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}
/*************************/
/*        Links        */
/*************************/
/****** LINKS CARD *****/

.listcard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.listcard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

/* Add rounded corners to the top left and the top right corner of the image */
#listcard-img img {
  /* border-top-left-radius: 5px;
  border-top-right-radius: 5px; */
  object-fit: cover;
  height: 80px;
}

#listcard-league-img {
  margin-top: -40px;
}

#listcard-league-img img {
  border-radius: 50%;
  border: #fff 6px solid;
}

/* Add some padding inside the card container */
#listcardcontainer {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#listcardcontainer p {
  font-size: calc(6px + 0.390625vw);
}

#listcard-date {
  margin-top: 0.5rem;
  padding: 16px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #0f0f83;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

/*** RESULTS CARD BLACK **/
#listcardblack {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  position: relative;
  width: 400px;
  height: 300px;
  position: relative;
}

/* On mouse-over, add a deeper shadow */
#listcardblack:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}

#listcardblackcontainer {
  width: 400px;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0px;
  /* background-image: linear-gradient(to top, #000, transparent); */
  background: linear-gradient(
    transparent 0%,
    rgba(0, 0, 0, 0.8743872549019608) 75%,
    rgba(0, 0, 0, 1) 100%
  );
  text-align: center;
}

#listcardimageblack img {
  width: 400px;
  height: 300px;
  object-fit: cover;
  display: block;
}

#listcardtextblackcentered {
  width: 100%;
  position: absolute;
  top: 80%;
  color: #fff;
  text-align: center;
}

/************************/
/*        STORIES       */
/************************/
/****** STORY CARD ******/

.storycard {
  /* Add shadows to create the "card" effect */
  /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s; */
  position: relative;
  width: 525px;
  height: 300px;
  display: flex;
  justify-content: center;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
  /* border-style: solid;
  border-color: #9c0606;
  border-width: 2px; */
}

/* On mouse-over, add a deeper shadow */
.storycard:hover {
  box-shadow: 0 32px 64px 0 rgba(0, 0, 0, 0.9);
}

/* Add rounded corners to the top left and the top right corner of the image */
.storycardimage img {
  /* border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; */
  padding-bottom: 4px;
  padding-top: 4px;

  width: 100%;
  height: 300px;
  object-fit: contain;
  background: #fff;
}
.storycardimage {
  /* border-top-left-radius: 5px;
  border-bottom-left-radius: 5px; */
  width: 50%;
  height: 300px;
}

/* STORY LIST */

/*Flex items*/
.story {
  display: flex;
  width: 50%;
  background-color: #fff;
}
.story-item {
  display: flex;
}

.story-content {
  background: #fff;
  /* color: #9c0606; */
  display: flex;
  flex-direction: column;
  /* padding: 1em; */
  /* width: 50%; */
  /* align-items: center; */
  padding: 0.5em;
  justify-content: space-between;
}
.story-content p {
  flex: 1 0 auto;
  color: black;
}

.story-content h4 {
  flex: 1 0 auto;
  color: black;
  font-size: larger;
}

.story-content a {
  color: black;
}

.story-date-image {
  display: flex;
  /* align-items: flex-start; */

  /* justify-content: flex-start; */
}

.story-date {
  color: black;
  flex-basis: 80%;
}
.story-header {
  font-size: larger;
  /* flex-basis: 80%; */
}
/* RESULTS */
/* Add some padding inside the card container */
#resultcontainer {
  padding: 2px 2px;
  display: flex;

  gap: 1rem;
  align-items: center;
  justify-content: center;
  /* background-color: #9C0606; */
}

#resultdate {
  padding: 2px 16px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

#resultdate p {
  color: #fff;
}

#resultpageleague {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#resultpagelocation {
  margin-top: 2rem;
  padding: 2px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background-color: #9c0606;
  color: #fff; /* background-color: #4f4e4e; */
}
#resultpagedate {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background-color: #9c0606;
  color: #fff;
  height: 3rem;
}

#resultpagecontainer {
  padding: 2px 2px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  color: #111;

  font-weight: bold;
}
#resultpagecontainer p {
  font-size: 1.25rem;
}

#resultpagecourse {
  margin: 2rem auto;
  padding: 2px 10px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
}

#resultpagecoursemap {
  padding: 0px;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#resultsnav {
  margin: 0;
  padding: 0px;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  justify-content: left;
  background-color: #9c0606;
  color: #fff;
}

#resultsnav a {
  line-height: 2rem;
  text-decoration: none;
  color: #fff;
  padding: 2px 10px;
}

#resultsnav a:hover {
  color: #fff;
  background-color: #0f0f83;
}

.resultsnavlist {
  list-style-type: none;
}

/* Add rounded corners to the top left and the top right corner of the image */
.result-img {
  border-radius: 5px 5px 0 0;
}

.active {
  color: #fff;
  background-color: #6cf;
}

#teamresultsheader {
  color: #fff;
  background-color: #6cf;
}

#map {
  width: 100%;
  height: 400px;
  margin: auto;
}

@media (max-width: 1250px) {
  table#otherresults img {
    width: 80%;
    height: auto;
  }
  .eventpic img {
    width: 80%;
    height: auto;
  }

  div#aboutimg img {
    width: 90%;
    height: auto;
  }
}
@media (max-width: 1020px) {
  .superdetailed {
    display: none;
  }
  #myheader img {
    height: 150px;
    margin: auto;
  }
  #myheader {
    background-color: #9c0606;
    height: 150px;
  }
  #map {
    width: 100%;
    height: 300px;
  }
}
@media (max-width: 800px) {
  #myheader img {
    height: 100px;
    margin: auto;
  }
  #myheader {
    height: 100px;
  }
  table#otherresults img {
    width: 60%;
    height: auto;
  }

  /* Centered Dropdown Menu */
  div#centeredsubmenu {
    clear: both;
    float: left;
    margin: 0 0 0.8em;
    padding: 0;
    width: 100%;
    background: #0f0f83;
    font-family: Verdana; /* Menu font */
    font-size: 90%; /* Menu text size */
    z-index: 10; /* This makes the dropdown menus appear above the page content below */
    position: relative;
  }

  /* Top menu items */
  div#centeredsubmenu ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: right;
    position: relative;
    right: 50%;
  }
  div#centeredsubmenu > ul > li {
    margin: 0 0 0 0px;
    padding: 0;
    float: left;
    position: relative;
    left: 50%;
  }

  div#centeredsubmenu > ul > li a {
    display: block;
    margin: 0;
    padding: 0.48em 0.4em 0.32em;
    font-size: 0.96em;
    line-height: 1.12em;
    background: #0f0f83;
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
    border-right: 10px solid #9c0606;
  }

  div#centeredsubmenu > ul > li.active a {
    border-left: 10px solid #9c0606;
  }

  /* Submenu items */
  div#centeredsubmenu ul ul {
    display: none; /* Sub menus are hidden by default */
    position: absolute;
    top: 1.9em;
    left: 0;
    width: 14.4em; /* width of the drop-down menus */
  }

  div#centeredsubmenu ul ul li a,
  div#centeredsubmenu ul li.active li a,
  div#centeredsubmenu ul li:hover ul li a {
    /* This line is required for IE 6 and below */
    font-size: 0.96em;
    font-weight: bold; /* resets the bold set for the top level menu items */
    background: #0f0f83;
    color: #ffffff;
    line-height: 1.12em; /* overwrite line-height value from top menu */
    border-bottom: 1px solid #ddd; /* sub menu item horizontal lines */
    border-left: 0px;
    border-right: 0px;
  }
}
@media (max-width: 750px) {
  #myheader img {
    height: 75px;
    margin: auto;
  }
  #myheader {
    height: 75px;
  }
  .detailed {
    display: none;
  }
  table#newotherresults th.NewPosition {
    width: 25%;
  }
  table#newotherresults th.NewName {
    width: 50%;
  }
  table#newotherresults th.NewRacetime {
    width: 25%;
  }
  table#newotherresults td.NewName {
    font-size: medium;
  }
  #resultpagecontainer p {
    font-size: 1rem;
  }
  #map {
    width: 100%;
    height: 200px;
  }
}
@media (max-width: 600px) {
  table#otherresults img {
    width: 50%;
    height: auto;
  }

  table#otherresults img {
    width: 75%;
    height: auto;
  }

  table#newotherresults img {
    width: 75%;
    height: auto;
  }

  table#newotherresults th.NewPosition {
    width: 25%;
  }
  table#newotherresults th.NewName {
    width: 50%;
  }
  table#newotherresults th.NewRacetime {
    width: 25%;
  }
  table#newotherresults td.NewName {
    font-size: small;
  }
  #map {
    width: 100%;
    height: 300px;
  }
}

/* TABLES */
table#teamresults {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  width: 100%;
}

table#teamresults th {
  background-color: #9c0606;
  color: white;
  padding: 10px;
  text-align: center;
}
table#teamresults th.Clubbadge {
  width: 5%;
}
table#teamresults th.Club {
  width: 25%;
  text-align: left;
}
table#teamresults th.P1,
th.P2,
th.P3,
th.P4,
th.P5,
th.P6,
th.P7,
th.P8,
th.P9,
th.P10 {
  width: 5%;
  text-align: center;
}
table#teamresults td.Club {
  text-align: left;
  vertical-align: middle;
}
table#teamresults td.Team {
  text-align: left;
  vertical-align: middle;
}
table#teamresults td.P1,
td.P2,
td.P3,
td.P4,
td.P5,
td.P6,
td.P7,
td.P8,
td.P9,
td.P10 {
  text-align: center;
  vertical-align: middle;
}

table#teamresults tr:hover {
  background-color: #ddd;
}

table#teamresults td {
  border-bottom: 1px solid black;
  vertical-align: middle;
}
table#teamresults td.P1,
td.P2,
td.P3,
td.P4,
td.P5,
td.P6,
td.P7,
td.P8,
td.P9,
td.P10,
td.P11,
td.P12,
td.total {
  width: 6%;
  text-align: right;
}
table#teamresults th.teamresultsheader {
  text-align: center;
  color: black;
  background-color: #fff;
  font-family: verdana;
  font-size: 14pt;
}

.cent {
  text-align: center;
}

/*************************/
/*    Club Results       */
/*************************/
table#clubresults {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  border-collapse: collapse;
  margin-top: 0px;
}
table#clubresults th {
  padding: 0.2rem;
  text-align: center;
  background-color: #b4b5b1;
  border-bottom: 1px solid black;
  /* line-height: 34px; */
}

table#clubresults td.ClubGender {
  border-bottom: 0px;
}
table#clubresults td.ClubAgeCategory {
  border-bottom: 0px;
}
table#clubresults td {
  padding: 0.1rem;
  padding-top: 0px;
  padding-bottom: 0px;
  /* text-align: center; */
  background-color: #fff;
  border-bottom: 2px solid #9c0606;
}

table#clubresults td.ClubRaceNumber {
  border-bottom: 2px solid #9c0606;
}
table#clubresults td.ClubPosition,
td.ClubRaceTime,
td.ClubName,
td.Club {
  font-weight: 600;
  font-size: 0.9rem;
  /* width: 12%; */
}
table#clubresults td.ClubGender,
td.ClubAgeCategory {
  font-weight: 600;
}

table#clubresults th.Club,
td.Club {
  text-align: Left;
  width: 20%;
}
table#clubresults th.ClubName,
td.Name {
  text-align: Left;
  width: 20%;
}
table#clubresults td.ClubVest {
  width: 10%;
}
table#clubresults td.ClubVest img {
  height: 50px;
}

table#clubresults th.ClubCategory,
td.ClubCategory {
  width: 8%;
}
table#clubresults td.ClubRaceTime {
  text-align: center;
}
table#openresults th.ClubPosition,
th.ClubRaceNumber,
th.ClubGender,
th.ClubAC {
  width: 10%;
  text-align: center;
}
table#clubresults thead,
tfoot {
  background: #fff;
}
table#clubresults thead {
  position: sticky;
  top: 0;
  border-bottom: 1px solid black;
}

table#clubresults body {
  /* font: 110%/1.4 system-ui; */
  margin: 0;
  /*   padding: 10rem 2rem 50rem; */
}

th#clubresults,
td#clubresults {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd; /* Add a border for better visibility */
}

tbody#clubresults {
  max-height: max-content; /* Set a maximum height for the tbody to enable scrolling */
  overflow-y: auto;
}
table#clubresults tbody.mybody:hover td {
  background-color: #b4b5b1;
}

/*************************/
/*    Old Club Results   */
/*************************/

table#results {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0px;
}
table#results th {
  padding: 0.25rem;
  text-align: center;
  background-color: #b4b5b1;
  border-bottom: 1px solid black;
}

table#results td {
  padding: 0.25rem;
  padding-top: 0px;
  padding-bottom: 0px;
  /* text-align: center; */
  background-color: #fff;
  border-bottom: 1px solid black;
}
table#results th.Club,
td.Club {
  text-align: Left;
  width: 20%;
}
table#results th.Name,
td.Name {
  text-align: Left;
  width: 20%;
}
table#results th.Category,
td.Category {
  width: 10%;
}
table#results thead,
tfoot {
  background: #fff;
}
table#results thead {
  position: sticky;
  top: 0;
  border-bottom: 1px solid black;
}

table#results body {
  /* font: 110%/1.4 system-ui; */
  margin: 0;
  /*   padding: 10rem 2rem 50rem; */
}

th#results,
td#results {
  padding: 10px;
  text-align: left;
  border: 1px solid #ddd; /* Add a border for better visibility */
}

tbody#results {
  max-height: max-content; /* Set a maximum height for the tbody to enable scrolling */
  overflow-y: auto;
}

table#results tr:hover td {
  background-color: #b4b5b1;
}

.dropbtn {
  background-color: #9c0606;
  color: white;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px; /* 5px rounded corners */
}

.dropdown {
  position: relative;
  display: inline-block;
  /* float: left; */
}

.dropdown-content {
  display: none;
  position: absolute;
  left: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #0f0f83;
}
.dropbtndate {
  background-color: #9c0606;
  color: white;
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 5px; /* 5px rounded corners */
}

.dropdowndate {
  position: relative;
  /* display: inline-block; */
  float: right;
}

.dropdown-contentdate {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-contentdate a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-contentdate a:hover {
  background-color: #f1f1f1;
}
.dropdowndate:hover .dropdown-contentdate {
  display: block;
}
.dropdowndate:hover .dropbtndate {
  background-color: #0f0f83;
}

.filterclear {
  clear: both;
}

/*************************/
/*        MEMBERSHIP     */
/*************************/
/**** MEMBERSHIP CARD ****/

.membershipcard {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  position: relative;
}

/* On mouse-over, add a deeper shadow */
.membershipcard:hover {
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.4);
}
/* Add some padding inside the card container */
#membershipcontainer {
  padding: 2px 2px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}

#membershipcontainer p {
  font-size: 0.75rem;
}

#membershipcard-name {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background-color: #9c0606;
  color: #fff;
  border-top-left-radius: 5px; /* 5px rounded corners */
  border-top-right-radius: 5px; /* 5px rounded corners */
}

#membershipcard-nameblue {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  background-color: #0f0f83;
  color: #fff;
  border-top-left-radius: 5px; /* 5px rounded corners */
  border-top-right-radius: 5px; /* 5px rounded corners */
}

#membershipcard-base {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  background-color: #9c0606;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

#membershipcard-baseblue {
  padding: 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  background-color: #0f0f83;
  color: #fff;
  border-bottom-left-radius: 5px; /* 5px rounded corners */
  border-bottom-right-radius: 5px; /* 5px rounded corners */
}

h1.abouthead {
  margin-top: 1rem;
  padding: 1rem 1rem;
  background-color: #9c0606;
  color: #fff;
  font-weight: 600;
  text-align: center;
}

div#aboutheader p {
  font-weight: 600;
  font-size: 1.5rem;
  text-align: center;
  color: #000;
  padding: 1rem;
}

div#abouttext p {
  font-weight: 400;
  font-size: 1rem;
  color: #000;
  padding: 1rem;
}