/* red #db1222 */
/* brighterwhite #fcfcfc */
/* darkerwhite #f5f5f5 */


:root {
  --whitepanel: #fcfcfc;
  --backcolour: #f5f5f5;
  --darktext: #031116;
  --whitetext: white;
  --rating:teal;
  --textlink1: #db1222;
  --cardheadercolor:#db1222;
  --chart1color: teal;
  
  --blackonbtnback:#031116;
  --blackonbtntext:#fcfcfc;    
  --blackoffbtnback:#e6e6e3;
  --blackoffbtntext:#031116;    

  
  --cardbuttonon: #fcfcfc;
  --cardbuttonontext: #031116;
  --cardbuttonoff: #e6e6e3;
  --cardbuttonofftext: #031116;
 
  --cardmarker: teal; 
  
}

hr{
  margin-top: 20px;
  margin-bottom: 30px;
}

body {
  background-color:var(--whitepanel);
  color:var(--darktext);
/*  font-family: 'Albert Sans', sans-serif;;*/
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
  margin:0;
}

.custom-button {
  background-color: var(--cardheadercolor);
  color: #fcfcfc;
  padding: 10px 20px;
  font-size: 16px;
  width:210px;
  margin-bottom: 20px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  transition-duration: 0.4s;
}



a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

/* header banner starts */
.logoGR {
    grid-area:logoGR;
    font-size: 24px;
    font-weight:100;
    font-family: 'Russo One', sans-serif;
}
.navbar{
  background-color:var(--whitepanel);
  border-bottom: 1px solid lightgrey;
  margin-bottom: 20px;
}

.navGrid {
  display: grid;
  grid-gap: 15px;
  margin-bottom: 8px;
  grid-template-columns: 45px 140px 1fr 100px 100px; /* Defines column widths */
  grid-template-areas:
    "logoG logoGR blank loginbtn joinbtn" /* Top row */
}

.loginbtn {
  grid-area: loginbtn; /* Assign to the top row */
  display: grid;
  margin-top:10px;
}
.joinbtn {
  grid-area: joinbtn; /* Assign to the top row */
  display: grid;
  margin-top:10px;
}
.loginbtn2 {
  border-radius:10px;
  background-color:white;
  color:#db1222;
  padding:5px 15px 5px 15px;
  border: 2px solid #db1222; 
  text-align: center;
}
.joinbtn2 {
  margin-left:-10px;
  border-radius:10px;
  background-color:#db1222;
  color:white;
  padding:5px 15px 5px 15px;
  border: 2px solid #db1222; 
  text-align: center;
}

.navmenu {
}

.navunits{
  display:inline-block;
  width: fit-content;
  text-align:left;
  cursor: pointer;
  margin-right: 50px;
}
.navunits2{
  display:inline-block;
  text-align:left;
  cursor: pointer;
}
.n2{
  margin-top: 6px;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 18px;
}
.menu_icon{

}


.navbar_mobile_dropdown{
  background-color: var(--backcolour);
  color:var(--darktext);
  max-width: 120px;
  cursor: pointer;
  text-align: center;
  float:right;
  margin-right: 2px;
  display:none;
  position: absolute;
  right:8px;
  z-index: 9999;
}
.navbar_mobile_item {
  padding: 20px;
  background-color: var(--backcolour);
  color:var(--darktext);
  text-align: center;
  text-decoration: none;
  border: none;
  margin-right: 2px; /* Adjust the gap size as needed */
  font-size: 13px;
  cursor: pointer;
  max-height: 35px;
}


.navbar_mobile{
  background-color:var(--whitepanel);
  height: 56px;
  border-bottom: 1px solid lightgrey;
  z-index: 9998;
}


/*end of navbar*/
/*general*/
.container{
  width:100%;
  margin:auto;
  max-width:1200px;
}


.maingrid{
  margin-top: 10px;
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 390px;
    grid-template-areas:
    "mainpanel rightpanel";
}
.rightpanel{
  grid-area:rightpanel;
  padding-left:10px;
  padding-right:10px
}
.leftpanel{
}
.mainpanel{
  grid-area:mainpanel;
  }

.racestimepanel{
  padding:10px;
  background-color:var(--whitepanel);
}
.whitepanel{
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
  background-color:var(--whitepanel);
}
.toppanel{
  margin-top: -20px;
  padding-left:10px;
  padding-right:10px;
  padding-bottom:-10px;
  margin-bottom: -20px;
  background-color:var(--whitepanel);
}
.race_menu_toggle{
  font-size: 11px;
  color:var(--textlink1);
  font-weight: bold;
  cursor: pointer;
}
.racetimetopmenu{
  display:inline-block;
}
.meetingracetimes{
  display:inline-block;
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  background-color:var(--whitepanel);
}
.racestimepanellinegrid{
  display:grid;
  grid-gap: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  grid-template-columns: 140px  1fr;
  border-bottom: 1px solid lightgrey;
  grid-template-areas:
  "meetingtitlegrid meetingracesgrid"; 
}

.meetingname{
  font-weight: 700;
}
.timeofrace{
  font-weight: 700;
  text-align: center;
  cursor: pointer;
}
.raceblock{
  display:inline-block;
  width: 60px;
  margin-bottom: 10px;
}
.meetingdetails{
  margin-top: 5px;
  margin-bottom: 5px;
  font-size:12px;
}
.picgridbig{
  margin-top: 10px;
  display:grid;
  cursor: pointer;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 2fr;
  grid-template-areas:
  "picarea"
  "textareabig";
}
.picgrid{meetingtitlegrid
  margin-top: 10px;
  display:grid;
  cursor: pointer;
  grid-template-columns: 1fr;
  grid-template-rows: 3fr 2fr;
  grid-template-areas:
  "picarea"
  "textarea";
}
.picarea{
  grid-area:picarea;
}
.textarea{
  grid-area:textarea;
  background-color:var(--whitepanel);
  font-size: 14px;
  padding:12px;
}
.textareabig{
  grid-area:textareabig;
  background-color: var(--whitepanel);
  font-size: 24px;
  padding:12px;
}

.herogrid{
 margin-top: 10px;
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "lefthero righthero";
} 
.fourgrid{
 margin-top: 10px;
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "gpic1 gpic2 gpic3 gpic4";
} 
.gpic1{
  grid-area:gpic1;
}
.gpic2{
  grid-area:gpic2;
}
.gpic3{
  grid-area:gpic3;
}
.gpic4{
  grid-area:gpic4;
}




@media screen and (max-width: 800px) {
  .navbar {
    display: none;
  }
  .navbar_mobile {
    display: block;
  }
  .navGrid{
    grid-template-columns: 45px 1fr 45px;
    grid-template-areas:
    "logoG logoGR menu_icon"
  }
}

@media screen and (min-width: 800px) {
  .navbar_mobile {
    display: none;
  }
  .navbar {
    display: block;
  }
  .navGrid{
    grid-template-areas:
    "logoG logoGR blank1 loginbtn joinbtn";
  }
}


@media screen and (max-width: 500px) {
  .herogrid{
    grid-template-columns: 1fr;
    grid-template-areas:
    "lefthero"
    "righthero";
  } 
  .fourgrid{
    grid-template-columns: 1fr;
    grid-template-areas:
    "gpic1"
    "gpic2"
    "gpic3"
    "gpic4";
  }
  .maingrid{
    grid-template-columns: 1fr;
      grid-template-areas:
      "mainpanel"
      "rightpanel"; 
  }
  .textareabig{
      font-size: 18px;
  }
  .textarea{
    font-size: 18px;
  }
}

@media screen and (min-width: 500px) and (max-width: 1200px) {
  .herogrid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "lefthero righthero";
  } 
  .fourgrid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
    "gpic1 gpic2"
    "gpic3 gpic4";
  }
  .maingrid{
    grid-template-columns: 1fr;
      grid-template-areas:
      "mainpanel"
      "rightpanel"; 
  }
  .textareabig{
      font-size: 18px;
  }
  .textarea{
    font-size: 18px;
  }
}

@media screen and (min-width: 1200px) {
  .herogrid{
      grid-template-columns: 1fr 1fr;
      grid-template-areas:
      "lefthero righthero";
    } 
    .fourgrid{
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-template-areas:
      "gpic1 gpic2 gpic3 gpic4";
    } 
    .maingrid{
      grid-template-columns: 1fr 390px;
        grid-template-areas:
        "mainpanel rightpanel";
    }
    .textareabig{
      font-size: 24px;
    }
    .textarea{
      font-size: 14px;
    }
}


.cardmarket{
  background-color:var(--cardmarker);
  color:var(--blackonbtntext);    
  padding: 1px 5px 1px 5px;
  font-size:10px;
  text-align:center;
  display:inline-block;
  border-radius: 20%;
  margin-left: 3px;
  position:relative;
  top:-2px;
}


.blackonbtn{
  background-color:var(--blackonbtnback);
  color:var(--blackonbtntext);    
  padding: 5px;
  font-size:16px;
  cursor: pointer;
  text-align:center;
  width:100px;
  margin-bottom: 10px;

}
.blackoffbtn{
  background-color:var(--blackoffbtnback);
  color:var(--blackoffbtntext);    
  padding: 5px;
  font-size:16px;
  cursor: pointer;
  text-align:center;
  width:100px;
  margin-bottom: 10px;
}

/*racecard*/

.racetitlespanel{
  padding:10px;
  background-color:var(--whitepanel);
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 70px 1fr;
  grid-template-areas:
  "racetime racecourse"   
  "racename racename";
}
.racetitlespanel2{
  padding-left:10px;
  padding-right:10px;
  padding-bottom:10px;
  background-color:var(--whitepanel);
  display:grid;
  grid-gap: 10px;
  grid-template-columns: 80px 80px 80px 1fr;
  grid-template-areas:
  "racechannel racedistance racegoing racedate";
}

.racetime{
  grid-area:racetime;
  font-weight: bold;
  font-size: 26px;
}
.racecourse{
  grid-area:racecourse;
  font-weight: bold;
  font-size: 26px;
}
.racedate{
  grid-area:racedate;
  font-size: 12px;
}
.racechannel{
  grid-area:racechannel;
  font-size: 12px;
}
.racedistance{
  grid-area:racedistance;
  font-size: 12px;
}
.racegoing{
  grid-area:racegoing;
  font-size: 12px;
}
.racename{
  grid-area:racename;

}

    h1{
      font-size: 22px;
      font-weight: 100;
      font-family: 'Russo One', sans-serif;
    }
    h2{
      font-size: 15px;
      font-weight: 100;
      font-family: 'Russo One', sans-serif;
    }
    .runner_grid{
      display: grid;
      margin-top: 6px;
      padding:8px;
      background-color: var(--whitepanel);
      
      grid-gap: 1px;
      grid-template-columns: 20px 45px 1fr 2fr 50px 50px;
      grid-template-areas:
      "number silk horse_name horse_name rating_sharp var(--cardbuttonon)"
      "draw silk jockey_name trainer_name rating_sharp odds_box";
    }


  .runner_picked_grid{
    display: grid;
    margin-top: 6px;
    padding:8px;
    background-color: var(--whitepanel);
    grid-gap: 1px;
    grid-template-columns: 50px 45px 1fr 50px 50px;
    grid-template-areas:
    "x silk horse_name horse_name horse_name"
    "pick_time silk jockey_name rating_sharp odds_box"
    "pick_course pick_course trainer_name rating_sharp odds_box";
  }

.runner_grid_extra {
  display: flex;
  margin-top: 1px;
  padding: 6px;
  background-color: var(--whitepanel);
  align-items: center;
  flex-wrap: nowrap; /* Prevent wrapping */
}

.runner_grid_extra > div {
  flex-grow: 1;
  flex-basis: calc(20% - 2px); /* Basic starting point */
  margin-right: 2px;
  box-sizing: border-box;
}

.runner_grid_extra > div:last-child {
  margin-right: 0;
}

.runner_grid_extra > .form_str {
  flex-grow: 0; /* Prevents it from growing */
  min-width: 120px; /* Minimum width */
  flex-basis: auto; /* Adjusts basis based on content and min-width */
}


    .runner_picked_grid_extra{
      display: flex;
      margin-top: 1px;
      padding:6px;
      background-color: var(--whitepanel);
      
      align-items: center;
      flex-wrap: wrap;
    }
    .runner_picked_grid_extra > div {
      flex-grow: 1;
      margin-right: 10px;
    }
    
    .number{
      grid-area: number;
      font-size: 14px;
      font-weight: bold;
    }
    .pick_time{
      grid-area: pick_time;
      font-weight: bold;
      font-size: 14px;
      margin-top: 2px;
      color: var(--textlink1);
    }

    .pick_course{
      grid-area: pick_course;
      font-size: 12px;
    }
    .draw{
      grid-area: draw;
      font-size: 12px;
      margin-top: 2px;
    }

    .silk{
      grid-area: silk;
    }
    
    .horse_name{
      grid-area: horse_name;
      font-size: 14px;
      font-weight: bold;
    }
    .jockey_name{
      grid-area: jockey_name;
      font-size: 12px;
      margin-top: 3px;
    }
    .trainer_name{
      grid-area: trainer_name;
      font-size: 12px;
    }
    .form_str{
      font-size: 11px;
      color:var(--textlink1);
      font-weight: bold;
      cursor: pointer;
    }
    .age{
      font-size: 11px;
    }
    .weight{
      font-size: 11px;
    }
    .rating_or{
      font-size: 11px;
    }
    .sex{
      font-size: 11px;
    }
    .circle {
      width: 50px; /* adjust the width as needed */
      height: 40px; /* adjust the height as needed */
      border-radius: 10%;
      background-color: var(--rating);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 14px;
      font-weight: bold;
    }

    .rating_sharp {
      grid-area: rating_sharp;
      border-radius: 10%;
      width: 50px; /* adjust the width as needed */
      height: 40px; /* adjust the height as needed */
      background-color: var(--rating);
      color: white;
    }
    .sharp_odds{
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      justify-content: center;
      margin-top: 5px;
    }
    .sharp_percentage{
      display: flex;
      align-items: center;
      font-size: 12px;
      justify-content: center;
     } 

    .odds_box {
      grid-area: odds_box;
      border-radius: 10%;
      width: 50px; /* adjust the width as needed */
      height: 40px; /* adjust the height as needed */

      background-color: black;
    }
    .odds_latest{
      color: white;
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: bold;
      justify-content: center;
      margin-top: 5px;
    }
    .odds_percentage{
      color: white;
      display: flex;
      align-items: center;
      font-size: 12px;
      justify-content: center;
    }

    .runner_headers_grid{
      display: grid;
      border-bottom: 1px solid lightgrey;
      margin-top: 0px;
      padding:6px;
      padding-top: 14px;
      background-color: var(--whitepanel);
      font-size: 13px;
      grid-gap: 1px;
      grid-template-columns: 15px 20px 38px 15px 1fr 86px 15px 2px 26px 18px;
      grid-template-areas:
      "no_order tri1 draw_order tri2 blank sharp_order tri3 blank2 odds_order tri4";
    }

    .runner_headers_grid_picks{
      display: grid;
      border-bottom: 1px solid lightgrey;
      margin-top: 0px;
      padding:6px;
      padding-top: 14px;
      background-color: var(--whitepanel);
      font-size: 13px;
      grid-gap: 1px;
      grid-template-columns: 25px 20px 1fr 86px 10px 10px 28px 18px;
      grid-template-areas:
      "no_order tri1 blank sharp_order tri3 blank2 odds_order tri4";
    }
    .blank2{
      grid-area: blank2;
    }
    .tri1{
      grid-area: tri1;
      color:var(--cardheadercolor);
      margin-top: -2px;
      cursor: pointer;
    }
    .tri2{
      grid-area: tri2;
      color:var(--cardheadercolor);
      margin-top: -2px;
      cursor: pointer;
    }
    .tri3{
      grid-area: tri3;
      color:var(--cardheadercolor);
      margin-top: -2px;
      cursor: pointer;
    }
    .tri4{
      grid-area: tri4;
      color:var(--cardheadercolor);
      margin-top: -2px;
      cursor: pointer;
    }
    .no_order{
      color:var(--cardheadercolor);
      font-weight: bold;
      grid-area: no_order;
      cursor: pointer;
    }
    .draw_order{
      color:var(--cardheadercolor);
      font-weight: bold;
      grid-area: draw_order;
      cursor: pointer;
    }
    .sharp_order{
      color:var(--cardheadercolor);
      font-weight: bold;
      grid-area: sharp_order;
      cursor: pointer;
    }
    .odds_order{
      color:var(--cardheadercolor);
      font-weight: bold;
      grid-area: odds_order;
      cursor: pointer;
    }
    .runner_ability{
      padding-left:6px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .comment {
      padding-top: 0px;
      padding-bottom: 0px;
    }
    .pedigree {
      padding-top: 6px;
      padding-bottom: 0px;
    }
    .owner {
      padding-top: 6px;
      padding-bottom: 0px;
    }
    
    .chart{
     padding-top: 12px;
      padding-bottom: 12px; 
    }

    .runner_sharp{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
      padding-bottom: 12px; 
    }
    .runner_ability{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_early_speed{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_pace_draw{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_jockey{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_trainer{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_going{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_distance{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_course{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_pedigree{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }
    .runner_owner{
      margin-top: 1px;
      padding-left:6px;
      padding-top:1px;
      background-color: var(--whitepanel);
      font-size: 12px;
    }


.runners_panel{
  padding-left: 10px;
  padding-right:10px;
}
.runner_panel{
  border-bottom: 1px solid lightgrey;
}

.runner_button_menu {
  flex: 1;
  margin-top: 5px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 2px;
  padding-right: 2px;
  background-color: var(--cardbuttonoff);
  color: var(--cardbuttonofftext);
  text-align: center;
  text-decoration: none;
  border: none;
  margin-right: 0px; /* Adjust the gap size as needed */
  font-size: 13px;
  cursor: pointer;
  max-height: 35px;
  border-radius: 15px 15px 0px 0px;
  border-style: solid;
  border-bottom-style: none;
  border-width: 1px;
}
.runners_menu_mobile_dropdown{
  background-color: var(--backcolour);
  color:var(--darktext);
  max-width: 120px;
  cursor: pointer;
  text-align: center;
  float:right;
  margin-right: 2px;
  display:none;
  position: absolute;
  right:8px;
}
.runner_button_menu2 {
  padding: 20px;
  background-color: var(--backcolour);
  color:var(--darktext);
  text-align: center;
  text-decoration: none;
  border: none;
  margin-right: 2px; /* Adjust the gap size as needed */
  font-size: 13px;
  cursor: pointer;
  max-height: 35px;
}



.sharp_verdict {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.ability_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.pace_draw_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.early_speed_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.jockey_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.trainer_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.going_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.distance_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.course_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.pedigree_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.owner_analysis {
  padding: 6px;
  padding: 6px;
  background-color: var(--whitepanel);
  font-size: 12px;
  margin-top: 8px;
}
.runner_form_table_heading{
  display: grid;
  margin-top: 1px;
  padding:6px;
  background-color: var(--darktext);
  color: var(--whitepanel);
  font-size: 10px;
  grid-gap: 1px;

  text-align: center;
  grid-template-columns: 50px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "header_date header_course header_type header_going header_distance header_position header_beaten header_pace header_sp header_or";
}
.header_date{
  grid-area: header_date;
}
.header_course{
  grid-area: header_course;
}
.header_type{
  grid-area: header_type;
}
.header_going{
  grid-area: header_going;
}
.header_distance{
  grid-area: header_distance;
}
.header_position{
  grid-area: header_position;
}
.header_beaten{
  grid-area: header_beaten;
}
.header_pace{
  grid-area: header_pace;
}
.header_sp{
  grid-area: header_sp;
}
.header_{
  grid-area: header_or;
}

.runner_form_table_row{
  display: grid;
  padding:6px;
  background-color: var(--backcolour);
  font-size: 11px;
  grid-gap: 1px;

  text-align: center;
  grid-template-columns: 55px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
  "row_date row_course row_type row_going row_distance row_position row_beaten row_pace row_sp row_or";
}
.runner_form_table_row:nth-child(even) {
  background-color: lightgrey; /* or any other lighter grey color */
}
.row_date{
  grid-area: row_date;
}
.row_course{
  grid-area: row_course;
}
.row_type{
  grid-area: row_type;
}
.row_going{
  grid-area: row_going;
}
.row_distance{
  grid-area: row_distance;
}
.row_position{
  grid-area: row_position;
}
.row_beaten{
  grid-area: row_beaten;
}
.row_pace{
  grid-area: row_pace;
}
.row_sp{
  grid-area: row_sp;
}
.row_{
  grid-area: row_or;
}
.runner_form_table{
  display: none;
}
.triangle{
  display:inline;
}

.odds_table {
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-top: 12px;
    padding-bottom: 12px;
    
}

.odds_table_header, .odds_table_odds {
    display: flex;
    flex-wrap: wrap;
}

.odds_table_cell {
    flex: 1 0;
    padding: 5px;
    border: 1px solid #ccc;
    text-align: center;
    max-width: 34px;
    font-size: 12px;
}

.runners_menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.runners_menu_mobile {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media screen and (max-width: 950px) {
  .runners_menu {
    display: none;
  }
  .runner_grid{
    display: grid;
    grid-template-columns: 20px 45px 1fr 55px 50px;
    grid-template-areas:
    "number silk horse_name horse_name horse_name"
    "draw silk jockey_name rating_sharp odds_box"
    "draw silk trainer_name rating_sharp odds_box";
  }
}

@media screen and (min-width: 950px) {
  .runners_menu_mobile {
    display: none;
  }
  .runner_grid{
    display: grid;
    grid-template-columns: 20px 45px 1fr 2fr 55px 50px;
    grid-template-areas:
    "number silk horse_name horse_name rating_sharp odds_box"
    "draw silk jockey_name trainer_name rating_sharp odds_box";
  }
}

@media screen and (min-width: 950px) {
  .footPanel {
      display: grid;
    margin-top:60px;
    margin-bottom:60px;
    margin-left:30px;
    margin-right:30px;
    line-height: 1.4;
    grid-gap: 30px;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-template-areas:
      "foot1 foot2 foot3 foot4 foot5"
      "ageWarning ageWarning ageWarning ageWarning ageWarning"
    }
  }

@media screen and (max-width: 950px) {
    .footPanel {
    grid-template-columns: 1fr 1fr;
    width:80%;
    line-height: 1.4;
    grid-gap: 30px;
    margin-left: 10%;
      grid-template-areas:
      "foot1 foot2"
      "foot3 foot4"
      "foot5 foot5"
      "ageWarning ageWarning";
   }
}

.footText{
  font-size:12px;
  grid-area:footText;
}
.foot1{
  grid-area:foot1;
}
.foot2{
  grid-area:foot2;
}
.foot3{
  grid-area:foot3;
}
.foot4{
  grid-area:foot4;
}
.foot5{
  grid-area:foot5;
}
.ageWarning {
  font-size: 12px;
  text-align: center; /* Align text center within the ageWarning div */
  margin: 0 auto; /* Center the ageWarning div horizontally */
}
.leftMenuTitle {
  font-weight: bold;
  fontsize:20px;
  margin-top: 20px;
}

.showAllOddsMoves{
  margin-top:-5px;
  margin-bottom: 5px;
  font-size: 11px;
  color:var(--textlink1);
  font-weight: bold;
  cursor: pointer;
}
.hideAllOddsMoves{
  margin-top:-5px;
  margin-bottom: 5px;
  font-size: 11px;
  color:var(--textlink1);
  font-weight: bold;
  cursor: pointer;
}
.quote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 10px solid #db1222;
  font-size: 1.3rem;
  line-height: 1.6;
  font-style: italic;
  background-color: #f9f9f9;
  position: relative;
  padding-left: 30px; /* Adds space for the quotation mark */
  text-indent: 0px; /* Aligns the first line of the text */
}

.quote::before {
  content: "“";
  font-size: 1.5rem;
  color: black;
  position: absolute;
  left: 10px;
  top: 5px;
}

.quote::after {
  content: "”";
  font-size: 1.5rem;
  color: black;
  top-margin: 5px;

}