/*Applies to All */
* {
    margin:"0";
    padding:"0";
     }
.bg-white
{
  background-color:white;
}
.bg-black
{
  background-color:white;
}
.bg-ltgrey
{
  background-color: rgb(231, 231, 231);
}
header .bg-grey {background-color: #383838;}

header .smooch-regular { 
  font-family: "Smooch", cursive; 
  font-size: 32pt;
  font-weight: bold;
  font-style: normal;
  color: #CF0;
}
.racing-sans-one {
  font-family: "Racing Sans One", sans-serif;
  font-weight: 400;
  font-style: normal; 
  font-size: 20pt;
  color:#F00;
  text-decoration-line: underline;
}

.oswald-style {
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

header .bg-dkred
{
  background-color: rgb(206, 0, 0);
}
header .bg-ltred
{
  background-color: rgb(247, 107, 107);
}

/* redtabs for the tabbed menu */
header .redtabs ul{
margin: 0;
padding: 0;
padding-left: 10px; /*offset of tabs relative to browser left edge*/
font: 14px verdana;
list-style-type: none;
}

header .redtabs li{
display: inline;
margin: 0;
}

header .redtabs li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 7px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background:rgb(206, 0, 0); /*background of tabs (default state)*/
}

header .redtabs li a:visited{
color: white;
}

header .redtabs li a:hover, .redtabs li.selected a{
background: #F00; /*background of tabs for hover state, plus tab with "selected" class assigned to its LI */
} 

/*Nav Select for fixtures page to set width of drop down menu*/
#navSelect {
  width: fit-content;
}

/* Starting Menu Here */
/* Base menu styling */
/* Base menu styling */
#menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #000;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
#menu h2 {
font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight:bold;
    color: lightgrey ;
}
#menu h3 {
font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight:bold;
    color: lightgrey ;
}
/* Top-level items inline */
#menu > li {
    display: inline-block;
    position: relative;
}

/* Links */
#menu > li > a {
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
}

/* Hover state */
#menu > li > a:hover,
#menu > li:hover > a {
    background-color: #555;
}

/* DROPDOWNS HIDDEN BY DEFAULT */
#menu li .dropdown_1column,
#menu li .dropdown_3columns {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;

    background-color: #000;
    padding: 10px;
    z-index: 9999;

    font-family: Arial, sans-serif;
    font-size: 14px;
}

/* SHOW DROPDOWN ON HOVER */
#menu li:hover .dropdown_1column,
#menu li:hover .dropdown_3columns {
    display: block;
}

/* Dropdown link styling */
#menu li .dropdown_1column a,
#menu li .dropdown_3columns a {
    color: #fff;
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

/* Hover inside dropdown */
#menu li .dropdown_1column a:hover,
#menu li .dropdown_3columns a:hover {
    background-color: #555;
}

/* Optional: spacing for columns */
.dropdown_3columns {
    width: 600px;
}

.dropdown_3columns .col_1,
.dropdown_3columns .col_3 {
    float: left;
    padding: 10px;
}

.col_1 { width: 180px; }
.col_3 { width: 560px; }

/* Clear floats */
.dropdown_3columns::after {
    content: "";
    display: block;
    clear: both;
}

/* End of Menu CSS */


  h2
 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  color: rgb(206, 0, 0);
  font-variation-settings:
    "width" 100;

  }

 h3
 {
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  color: rgb(206, 0, 0);
  font-variation-settings:
    "width" 100;

  }

   h1
{
     font-family: "Ariel", sans-serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  color: black;
  font-variation-settings:
    "width" 100;
} 

.fixture
{
  background-color: #ffffff;
  border-radius: 8px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-style: normal;
  color: rgb(82, 81, 81);
  font-variation-settings:
    "width" 100;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.fixture-white
{
  background-color: #ffffff;
  border-radius: 8px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-style: normal;
  color: rgb(82, 81, 81);
  font-variation-settings:
    "width" 100;
    word-break: break-word;
    overflow-wrap: anywhere;
    border: 1px solid #a8a8a8;
}
.fixture-yellow
{
  background-color: #fbface;
  border-radius: 8px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-style: normal;
  color: rgb(82, 81, 81);
  font-variation-settings:
    "width" 100;
    word-break: break-word;
    overflow-wrap: anywhere;
    border: 1px solid #a8a8a8;
}
 .fixture-green
{
  background-color: #e1fbe4;
  border-radius: 8px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-style: normal;
  color: rgb(82, 81, 81);
  font-variation-settings:
    "width" 100;
    word-break: break-word;
    overflow-wrap: anywhere;
    border: 1px solid #a8a8a8;
}
.fixture-blue
{
  background-color: #d3f0ff;
  border-radius: 8px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-style: normal;
  color: rgb(82, 81, 81);
  font-variation-settings:
    "width" 100;
    word-break: break-word;
    overflow-wrap: anywhere;
    border: 1px solid #a8a8a8;
}
.fixture-date
{
  border-right: 1px solid #a8a8a8;

}
main p
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-weight: 300;
  font-style: normal;
  color: black;
  font-variation-settings:
    "width" 100;
    
}

main .bg-midgrey
{
  background-color: rgb(216, 216, 216)
}

footer .white-txt
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 250;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;
}
footer .white-txt-sml
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: none;
  font-size: 10pt;
  font-weight: 300;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;
}


footer a
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: white;
  font-variation-settings:
    "width" 100;
    text-decoration: none;  
}
footer h5
{
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  color: white;
}
footer a:hover
{
  color:rgb(175, 175, 175);
  text-decoration: none;
}
header a
{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  color: rgb(206, 0, 0);
  font-variation-settings:
    "width" 100;
  text-decoration: none;
  }
header a:hover
{
  color:rgb(247, 107, 107);
  text-decoration: none;
}

main a
{
  font-family: "Gabarito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 650;
  font-style: bold;
  color:black;
  font-variation-settings:
    "width" 100;
  text-decoration: none;
  }
main a:hover
{
  color:slategray;
  text-decoration: none;
}

/* Login Box Styles */
.login-box { max-width: 400px; margin: 50px auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; }
input[type=text], input[type=password] { width: 100%; padding: 8px; margin: 5px 0; }
input[type=submit] { padding: 10px 20px; margin-top: 10px; cursor: pointer; }

/* Menu Styles */
.fw-list {
      width: 100%;
       }

    /* Style for non-clickable headers */
    .fw-break {
      background-color: #f8f9fa;
      font-family: "Noto Sans", sans-serif;
      font-weight: 600;
      color: #212529;
      cursor: default;
    }
    .fw-header {
      background-color: rgb(206,0,0);
      font-family: "Noto Sans", sans-serif;
      font-weight: 600;
      color: white;
      cursor: default;
    }
    .list-group-item-action {
      background-color: rgb(231, 231, 231);
      color: #212529;
      border: none; /* cleaner look */
      padding: 0.4rem 0.75rem;
    }

    .list-group-item-action-mob {
      background-color:white;
      color: #212529;
      }

    /* Hover effect for links */
    .list-group-item-action:hover,
    .list-group-item-action:focus {
      background-color: rgb(165, 165, 165); 
      color:black;
      text-decoration: none;
    }

    .list-group-item-action-mob:hover,
    .list-group-item-action-mob:focus {
      background-color: rgb(165, 165, 165); 
      color:black;
      text-decoration: none;
    }

     /* 50% opaque gray background for captions */
      .carousel-caption {
        background-color: rgba(128, 128, 128, 0.5);
        border-radius: 0.5rem;
        padding: 1rem 1.25rem;
      }

      .news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.news-grid img {
  width: 100%;
  height: auto;
  display: block;
}
/* enable horizontal scrolling */
.table-sticky-wrapper {
  position: relative;
  overflow-x: auto;
}

/* shared sticky behaviour */
.sticky-left,
.sticky-right {
  position: sticky;
  background: #fff;
  z-index: 2;
}

/* header layering */
thead .sticky-left,
thead .sticky-right {
  z-index: 4;
}

/* left frozen columns */
.col-no {
  left: 0;
  min-width: 70px;
}

.col-driver {
  left: 70px;
  min-width: 180px;
}

.col-points {
  left: 250px;
  min-width: 90px;
}

/* right frozen column */
.col-grade {
  right: 0;
  min-width: 220px;
  z-index: 3;
}

/* prevent visual overlap borders */
.sticky-left::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #dee2e6;
}

.sticky-right::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: #dee2e6;
}