/*Applies to All */
* {
    margin:"0";
    padding:"0";
     }
.bg-white-ebs
{
  background-color:white;
}
.bg-navy-ebs
{
  background-color: #162d4a;
}
.bg-euk-pink
{
  background-color:#C50067;
}

.btn-navy-ebs
{
  background-color: #162d4a;
}
.btn-navy-ebs:hover
{
background-color: #1e5496
}
.btn-euk-pink
{
  background-color: #C50067;
  color: white;
}
.btn-euk-pink:hover
{
  background-color:#91024c;
  color: white; 
}
.content-bottom-right {
    position: absolute;
    bottom: 0; /*This is the part that glues it to the bottom*/
    margin-right: 0;
    }
 .montserrat-links {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 700;
  }
a {
   font-size: 12pt;
  color: white;
  text-decoration: none;
}
a:hover {
  color: lightgray;
}

.lilac-bg {
  width: 100%;
  height: 100%;      /* full screen height 100vh */
  background-image: url("../siteImages/lilacbbg.png");          /* or any color/image */
  background-color: #d0d0ed;
margin:0;
}
/* Welcome to Euk on Homepage */
.hero-text-white {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 30pt;
  font-weight: 800;
  color: white;
  background-color: #C50067;
  line-height: 1.2;
  }
  .hero-text-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 30pt;
  font-weight: 800;
  color:black;
  line-height: 1.2;
    }
      .big-hero-text-black {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 36pt;
  font-weight: 850;
  color:black;
  padding-top: 225px;
  padding-bottom: 150px;
    }
.hero-text-sml {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 12pt;
  font-weight: 400;
  color:black;
}
.sub-text-white-bold {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 16pt;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  }
  .sub-text-sml {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-size: 11pt;
  font-weight: 400;
  color:white;
  line-height: 1.2;
}
.skew-btn {
    display: inline-block;
    padding: 12px 40px;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    
    /* The Shape: Skew the container */
    transform: skew(-25deg);
    border: 2px solid #C50067;
    background: transparent;
    color: #C50067;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .skew-btn span {
    /* The Fix: Counter-skew the text so it stays upright */
    display: block;
    transform: skew(25deg);
  }

  /* Hover State: Fills the background */
  .skew-btn:hover {
    background-color: #C50067;
    color: white;
  }

.home-img {
  width: 100%;       /* example size */
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* crops anything outside */
  padding-top: 10px;
}

.home-img img {
  width: 80%;
  height: 80%;
  object-fit: cover;  /* crops nicely */
  border-radius: 15px;
}
.mobhome-img {
  width: 100%;       /* example size */
   display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;   /* crops anything outside */
  padding-top: 10px;
}

.mobhome-img img {
  width: 80%;
  object-fit: cover;  /* crops nicely */
  border-radius: 15px;
}


/* padding and positioning of the images and text on the homepage */
.sub td{
  vertical-align: top;
  padding: 6px;
  align-items: center;
}

footer .white-txt /*used in EBS */
{
  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 /*used in EBS */
{
  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 /*used in EBS */
{
  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;  
}


Euk Pink is #c50067
Euk Navy is #162d4a

.bg-black
{
  background-color:white;
}
.bg-ltgrey
{
  background-color: rgb(231, 231, 231);
}
header .bg-grey {background-color: #383838;}




/*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 h5
{
  font-family: "Noto Sans", sans-serif;
  font-weight: 500;
  color: white;
}
footer a:hover
{
  color:rgb(175, 175, 175);
  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;
    }
  .carousel-item {
        aspect-ratio: 4 / 3;
        overflow: hidden;
      }

      /* Make images fill and crop nicely */
      .carousel-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
     /* 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;
}