html {
  scroll-behavior: smooth!important;
}

#contentPane {
  min-height: 500px;
}

div#unmatchedBetsFlag {
  background: #ff0000;
  font-weight: 700;
}

.content-wrapper {
  padding: 20px 20px 0 20px;
  height: calc(100vh - 100px);
  overflow: auto;
}

/*racecards*/

.bg-green {
  background-color: #8deb96;
}

.bg-raceCards {
  background-color: #e1eaf5
}

.card-select.card-body:hover {
  background-color: #e3e3e3;
  border-radius: 8px;
  
}

img.silk-img {
  width: 40px;
}

img.silk-img-lg {
  width: 54px;
}

.cardTime {
  font-size: 1.2em;
  font-weight: 700;
  color: #ec3a0e;
}

/* summary stats */
.summary-stats {
  background: linear-gradient(135deg, #5776a2 0%, #344966 100%);
  color: white;
  border-radius: 10px;
}

.race-card {
  border-left: 4px solid #007bff;
}
.race-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.runner-card {
  transition: all 0.3s ease;
  border-left: 10px solid #28a745;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.runner-card:hover {
  background: linear-gradient(135deg, #e8f7f6 0%, #f2fff8 100%);
  box-shadow: 2px 2px 5px 4px #0000001a;
  transition: 0.3s;
}
.race-header {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  color: white;
}
.badge-custom {
  font-size: 0.75em;
}
.runner-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.5rem;
}
.stat-item {
  text-align: center;
  padding: 0.5rem;
  background: rgba(0,123,255,0.1);
  border-radius: 0.25rem;
}
.form-string {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 1px;
}
.non-runner {
  opacity: 0.6;
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}
.non-runner .runner-number {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
}
.search-filter {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.odds-display {
  background: linear-gradient(135deg, #ffc107 0%, #fd7e14 100%);
  color: white;
  border-radius: 15px;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
  font-size: 0.9em;
}
.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* LTP match flash — soft yellow fade */


.ltp-flash > button {
  animation: ltpGlow 0.6s ease-out;
}

/* Subtle yellow overlay that doesn't fight existing backgrounds */
@keyframes ltpGlow {
  0%   { box-shadow: inset 0 0 0 9999px rgba(255, 230, 0, 0.75); }
  100% { box-shadow: inset 0 0 0 0 rgba(255, 230, 0, 0); }
}

.back1-price, .back2-price, .back3-price,
.lay1-price,  .lay2-price,  .lay3-price {
  position: relative;
}

/* Persistent dot shown when LTP changed & matched this cell's price */
.ltp-match-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 9px;              /* tweak if you need more/less gap */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd400;      /* yellow */
  box-shadow: 0 0 0 1px rgba(0,0,0,.25);
  z-index: 2;
  pointer-events: none;
}

/* historical price indicator */
.hpi_profit-badge {
    font-size: 1.1em;
    padding: 0.5em 0.8em;
    min-width: 100%;
    display: inline-block;
    border-radius: 5px;
}
.hpi_comparison-text {
    font-size: 1.2em;
    font-weight: bold;
}
.hpi_bg-custom-profit {
    background-color: #d4edda; /* Light green for profit */
    color: #155724; /* Dark green text */
    border-radius: 5px;
}
.hpi_bg-custom-loss {
    background-color: #f8d7da; /* Light red for loss */
    color: #721c24; /* Dark red text */
    border-radius: 5px;
}

/*dob & trob colours */
td.dob-yes {
  background-color: #ff651c !important;
  font-weight: 600;
}

td.trob-yes {
  background-color: #62bcff !important;
  font-weight: 600;
}

tr.top-three-price > td {
  background-color: #e7fae6 !important;
  border: solid;
}

#displayMarketGrid button {
    width: 100px;
}

#displayMarketGrid td {
    vertical-align: middle;
}

span#timeToStart.greenTime {
  background-color: #00aa33;
  border-radius: 5px;
}

span#timeToStart.redTime {
  background-color: #d40023;
  border-radius: 5px;
  color: #fff;
}

span#timeToStart {
  padding-left: 8px;
  padding-right: 8px;
}

/* tradeTable */

#selectionBoxTD {
  max-width: 130px;
}

.smallTradeRangeGauge {
  min-width: 120px;
}

.selectionName {
  font-size: clamp(0.7rem, 2.5vw, 1rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 100%; /* Adjust based on your layout */
}

#selectionBoxform, #selectionBoxform2 {
  display: block;
  font-size: 0.8em;
  margin-top: -1px;
}

span.selectionName {
  font-size: 1.1em;
  font-weight: 600;
}

span#stallDrawSpan {
  font-size: 0.8em;
  font-weight: 400;
}

div#selectionBox {
  
  position: relative;
}

table.table-bordered tbody tr.winner-row td {
  background-color: #a6fda6 !important; 
}

/*chart Columns */
.chart-column {
  transition: all 0.4s ease;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}


/* Alternative approach - completely remove from layout */
.chart-column.hiding-complete {
  display: none;
}

/* WOM Bar area */
.wom-bar{
  display:flex;
  height:.75rem;
  min-width:60px;
  border-radius:4px;
  overflow:hidden;
  margin-top: 3px;
}

.wom-back{background:#198754;}  /* green  */
.wom-lay {background:#dc3545;}  /* red    */

/* Event details area 
.event-height-md {
  height: 100%;
}
*/
#eventMap {
  height: 100%;
}

#betfairEventDescription p {
  font-size: 1rem;
  font-weight: 400;
}

/* small trade range gauge */

.small-trade-range-container {
  position: relative;
  width: 30px; /* Match background image */
  height: 80px; /* Match background image */
  margin: 0 auto; /* Center the container block within the table cell */
  /* overflow: hidden; */ /* Optional: if you want to clip pointer overhang */
}

/* .lines-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 0.5px, transparent 1px, transparent 40px);
}
*/

.range-lines-canvas {
  position: absolute; /* Position relative to the container */
  top: 0;           /* Match the image's top position */
  left: 1px;          /* Match the image's left position */
  width: 28px;      /* Match the image width */
  height: 80px;     /* Match the image height */
  pointer-events: none; /* Allows clicks to pass through the canvas */
  z-index: 1;       /* Ensure it's above the background image, below pointer/labels if necessary */
}

.smallTradeRangePointer {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  /* height: 19px; */ /* Set height? */
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

.smallTradeRangeMaxPrice {
  position: absolute;
  right: -34px;
  font-size: 9px;
  top: 70px
}

.smallTradeRangeMinPrice {
  position: absolute;
  right: -34px;
  font-size: 9px;
  top: 0px
}

.selectionVolume {
  position: absolute;
  right: -40px;
  font-size: 10px;
  top: 33px;
  color: crimson;
  font-weight:600;
  
}

.tradeRangeDeltaGauge {
  position: absolute;
  right: 47px;
  font-size: 10px;
  top: 33px;
  color: crimson;
  font-weight:600;
}

/* subHeader */
.header-actions-container {
  justify-content: flex-start;
  margin-left: 50px;
  margin-right: auto;
}

.header-actions-content2 {
  justify-content: flex-end;
  margin-right: 50px;
}

/* Gauge Area */

#sportXtraderChartArea,
#sportXtraderChartArea2,
#sportXtraderChartArea3 {
    padding: 10px; 
}

.chart-container {
  border: 1px solid #ccc; 
  margin: 10px;
  width: 300px;
  height: 300px;
}


#marketVol li.nav-item {
  width: 50%;
}

/* CSS for the Volatility Circle Container */
/* This container holds the background, border, needle, and center dot */
#marketVolatilityCircleContainer {
  /* Make it a circle using border-radius */
  width: 200px;  /* Your size */
  height: 200px; /* Must be same as width for a circle */
  border-radius: 50%;

  box-sizing: border-box; /* Include padding/border in width/height calculation */

  /* === CONFIRM THESE STYLES ARE PRESENT === */
  border: 4px solid rgb(83, 83, 83); /* The thick black border you requested (adjust thickness as needed) */
  position: relative;      /* CRITICAL: Needed for absolute positioning of children (needle/dot) */
  overflow: hidden;        /* Hide anything that goes outside the circle boundary (optional, but good practice) */
  /* ===================================== */

  /* Example: Center the circle if its parent container allows */
  margin-left: auto;
  margin-right: auto;
  display: block;

  /* Add some spacing */
  margin-top: 20px;

  /* The background (color + radial gradient for fade) is set by JavaScript */
  /* Smooth transition for background color changes (optional, but nice) */
  transition: background 0.3s ease-in-out;
  background: url('/sportxtrader/images/pulseBG.webp');
  background-position: center;
}

/* CSS Keyframes for the Pulsation Animation */
@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.6; } /* Scale up slightly, fade out a bit */
  100% { transform: scale(1); opacity: 1; }
}

/* Apply the pulsation animation to the container when the class is added */
#marketVolatilityCircleContainer.pulsing {
  animation: pulse 0.5s ease-out; /* Name, Duration, Timing Function */
  /* The duration (0.5s) MUST match the setTimeout duration
     in your updateMarketVolatilityCircleStyles JavaScript function. */
}


/* CSS Keyframes for the small Pulsation Animation */
@keyframes pulsesm {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.6; } /* Scale up slightly, fade out a bit */
  100% { transform: scale(1); opacity: 1; }
}

#marketVolatilityCircleContainer.pulsingsm {
  animation: pulsesm 0.2s ease-out; 
}


/* --- CSS for the Needle Shaft Element (.volatility-circle-needle) --- */
/* This is the main div element created by your JavaScript */
.volatility-circle-needle {
  /* === ADD/CONFIRM THESE STYLES AND THEIR VALUES === */
  position: absolute;
  /* Position the base of the needle at the center of the parent (the container) */
  /* We start the top-left corner at 50% from top and 50% from left... */
  top: 50%;
  left: 50%;
  /* ...Then translate it up by its full height (-100% translateY) */
  /* and left by half its width (-50% translateX). */
  /* This places the bottom-center of the needle div at the 50%/50% mark. */
  /* The transform property itself is set dynamically by JS, combining translate and rotate. */
  /* Example of what JS sets: transform: translate(-50%, -100%) rotate(90deg); */

  /* CRITICAL: Ensure rotation happens around the base (bottom center) */
  transform-origin: 50% 100%;

  /* Define the appearance of the needle shaft (adjust size and color as needed) */
  width: 4px;      /* Thickness of the needle shaft */
  height: 80px;    /* Length of the needle shaft (adjust as needed, maybe proportional to container size) */
  background-color: black; /* Color of the needle shaft */

  /* Add a smooth transition for the transform property (handles both translate and rotate) */
  transition: transform 0.3s ease-out; /* Adjust duration/timing for animation */
  /* ================================================= */

  box-sizing: border-box; /* Include padding/border in dimensions if added later */
  z-index: 0; /* Ensure needle is below the center dot */
}

/* --- CSS for the Needle Pointer Tip (using ::before pseudo-element) --- */
/* This creates a triangle at the top of the needle shaft */
.volatility-circle-needle::before {
  /* === ADD THIS ENTIRE BLOCK === */
  content: '';        /* Required for pseudo-elements */
  display: block;     /* Make it a block element */
  position: absolute; /* Position relative to the parent (.volatility-circle-needle) */

  /* Position the base of the triangle at the top edge of the parent div */
  /* 'bottom: 100%' places the bottom edge of this pseudo-element's box exactly at the top edge of its parent (.volatility-circle-needle div). */
  bottom: 100%;
  left: 50%;    /* Center horizontally relative to the parent div */

  /* Shift the triangle left by half its own width (which is border-left + border-right) */
  /* border-left (4px) + border-right (4px) = 8px base width. Half is 4px. */
  transform: translateX(-4px); /* Adjust this value based on the triangle's base width (should match border-left/right width) */

  /* Style the triangle using borders */
  width: 0; height: 0; /* Set width/height to 0 to use borders for shape */
  border-left: 4px solid transparent;  /* Half base width of the triangle pointer (adjust size) */
  border-right: 4px solid transparent; /* Half base width of the triangle pointer (adjust size) */
  border-bottom: 8px solid black;      /* Height of the triangle pointer and color (adjust size/color) */
  /* =========================== */

  /* Optional z-index if layering is complex */
  /* z-index: 1; /* This would put the pointer on top of the center dot if needed */
}


/* --- CSS for the Center Dot Element (.volatility-circle-center-dot) --- */
/* This is the element created by your JavaScript to cover the needle base */
.volatility-circle-center-dot {
  /* === ADD/CONFIRM THESE STYLES === */
  position: absolute;
  /* Center the dot relative to the parent container */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shift by half its own size to center its midpoint */

  /* Define the appearance of the dot (adjust size and color) */
  width: 10px;  /* Size of the dot */
  height: 10px; /* Size of the dot */
  border-radius: 50%; /* Make it round */
  background-color: #990000; /* Example color (matches gauge needle base) */

  z-index: 1; /* Ensure it's on top of the needle and pointer */
  /* =============================== */
}


/*green up modal area*/
i.bi.bi-trophy {
  font-size: 5em;
  color:#990000;
}
#greenUpModal p {
  font-size: 2em;
  font-weight: 600;
}

/* right Side Panel */

#mainTradeTableContainer {
  transition: width 0.3s ease-in-out; /* Animate the width */
  width: 100% /* Initial width (adjust 300px as needed) */
  /* Important:  Remove any col-xl-* classes from the HTML */
}

#mainTradeTableContainer.expanded {
  width: 100%; /* Full width when expanded */
}

button#sidePanelButton {
  text-align: center; 
}

.reverseBook-button, .greenUp-button, .sidePanelButtonClass, .tradeSettings-button, .tradeInfo-button {
  border-radius: 3px;
}

#panelRightSide {
  transition: transform 0.3s ease-in-out; /* Smooth transition */
  overflow-y: auto;
  position: relative;
  width: 0; /* Initially hidden */
  z-index: 1; /* Ensure it's on top of other content (adjust as needed) */
}

#panelRightSide.hidden {
  transform: translateX(101%); /* Move it off-screen to the right */
  width: 0!important;
  height: 0!important;
}

/* footer */
.app-footer {
  display: flex;
  justify-content: space-between;
}


/*settings area */

#stakeArea .card-body {
  font-size: 0.7em;
}

.stakeArea {
  border: 1px solid #c3c3c3;
  border-radius: 5px;
  background-color: #f0f8ff;
}

.form-check.form-check-inline.stakeNumber {
  width: 33%;
}

input#customValueInput {
  margin-left:15px;
}

.form-check .form-check-input[type=radio] {
  width: 1.1rem!important;
  height: 1.1rem!important;
  margin-top: .4em;

}

#reverseBookButton.active-color, #reverseBookButton.active-color:hover {
  background-color: #e5ff00!important; 
  color: #111!important;
  border: 1px solid #e5ff00!important; 
}

#stakeSettings .accordion-body {
  padding: 0px;
}

.tradeSettings-button {
  left: 20px;
}

.tradeBar {
  position: relative;
    top: 0px;
    z-index: 10;             
    cursor: pointer;
}

.form-label {
  font-size: 0.75rem;
}

/*trade table flashing indicators*/
.price-up {
  background: rgb(0,218,3);
  background: linear-gradient(270deg, rgba(0,218,3,1) 0%, rgba(0,0,0,0) 100%);
  transition: background .5s ease-in-out;
}

.price-down {
  background: rgb(255,0,18);
  background: linear-gradient(90deg, rgba(255,0,18,1) 0%, rgba(0,0,0,0) 100%);
  transition: background .5s ease-in-out;
}

.redText {
  color: #990000!important;
  font-weight: 900;
}

.greenText {
  color: #009c2f!important;
  font-weight: bold;
}

div#inPlayFlag h2.inplayH2 {
  background-color: rgb(0, 170, 51);
  display: inline-block;
  padding: 10px;
  border-radius: 8px;
}

.matchDetailsArea {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center; 
  /*width: 100%; */

}

.matchDetailsArea canvas {
  margin: 0 10px; 
}

/* Style the score element */
.matchDetailsArea #score {
  font-size: 20px;
  font-weight: bold;
  padding: 5px 10px;

}

.matchDetailsArea #score span {
  white-space: nowrap; /* prevent text from wrapping */
}

/* trade table */

#displayMarketGrid img.gaugeButton:hover {
  border: 2px solid #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.1s;
}

canvas.chart {
  border: 1px solid #222;
  border-radius: 5px;
  padding: 7px;
  box-shadow: inset 1px 1px 5px #aaa;
  width: 130px;
  height: 80px;
}

th.backbook, th.laybook {
  text-align: center;
  font-size: 0.9rem !important;
  font-weight: 400;
}

.main-container {
  background: #dce8ed;
  margin-top: 21px;
}

button#showCheckbox {
  width: 58px;
}

.inline-wrapper {
  display: flex;
  align-items: center; /* Vertically aligns items in the middle */
  gap: 10px; /* Adds a nice space between the text and the button */
}

#showCheckbox {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


#showCheckbox.is-hidden {
  opacity: 0;
  visibility: hidden;
}

/* sidebar */
.sidebar-menu ul li a {
  color: #d6dde7;
}

.sidebar-menu {
  padding: 0 0 20px 0;
  height: calc(100vh - 75px);
}

.sidebar-custom-nav {
  border-radius: 0px 20px 0px 0px;
  background: #191c24;
}

.sidebar-wrapper {
  border-radius: 0px 20px 0px 0px;
}

li.sidebar-dropdown.account-dropdown {
  padding: 0px 30px;
}

#marketsListTable .accordion-body {
  padding: 0;
}

.mt-64 {
  margin-top: 64px !important;
}




.sidebar-menu .sidebar-dropdown.account-dropdown > a:after {
    /* Reset the properties applied by the original rule */
    content: none !important; /* Crucial: Removes the icon content */
    display: none !important; /* Optionally hide the pseudo-element entirely */

    /* You might potentially reset others if needed, but content/display are key */
    /* position: static !important; */
    /* transform: none !important; */
}

i.sportXicon {
  background-image: url(/sportxtrader/images/sportxX.svg);
  background-repeat: no-repeat;
  background-size: 27px;
  background-position: center;
}

.main-header {
  margin-left: 10px;
  border-radius: 10px 0px 0px 10px;
}

/* different colour header for display-markets page */
.page-header.display-markets-page-header {
  background-color: #ffdab0;
}

.page-header {
  background-color: #dce8ed;
  border-bottom: none;
  min-height: 64px;
}

.card {
  box-shadow: rgba(76, 78, 100, .1) 0px 2px 5px 0px;
}

@media (max-width: 1441px){
  #displayMarketGrid td {
    padding: 4px;
}
#displayMarketGrid button {
    width: 80px;
    height: auto;
    font-size: 0.85em;
  }
  canvas.chart {
    width: 80px;
    height: 60px;
  }
}


/*sparklines*/
.sparkline-cell-content {
  display: flex; /* Use flexbox */
  align-items: center; /* Vertically align items */
  /* Optional: adjust spacing between items */
  gap: 5px; /* Or use margin on individual items */
}

.sparkline-canvas {
  /* Ensure the canvas doesn't shrink to zero and has a minimum size */
  flex-shrink: 0;
  /* Define a specific width for the sparkline area */
  /* This is key! Prevents it from being squeezed out by growing text */
  width: 60px; /* Adjust this value based on your needs */
  height: 20px; /* Adjust height if needed */
  /* Also make sure its max width is controlled if necessary */
  max-width: 100px; /* Example max, prevent it from becoming huge */
}

/* @media(max-width: 1441px) {
  .page-wrapper .sidebar-wrapper {
      left:-290px
  }

  .page-wrapper.toggled .sidebar-wrapper {
      left: 0
  }

  .page-wrapper .main-container {
      padding: 0 0 30px 0
  }
}

@media screen and (max-width: 1441px) {
  .page-header .toggle-sidebar-fullscreen {
      display: none
  }

  button#sidePanelButton {
    display: none
  }

  .page-header .toggle-sidebar {
    display:flex
  }

  .page-header .sidebar-togglescreen {
      display: none
  }
}


*/

@media(max-width: 1537px) {
  .page-wrapper .sidebar-wrapper {
      left:-290px
  }

  .page-wrapper.toggled .sidebar-wrapper {
      left: 0
  }

  .page-wrapper .main-container {
      padding: 0 0 30px 0
  }
}
  
  @media screen and (max-width: 1537px) {
  .page-header .toggle-sidebar-fullscreen {
      display: none
  }

  
  .page-header .toggle-sidebar {
    display:flex
  }

  .page-header .sidebar-togglescreen {
      display: none
  }
}

@media screen and (max-width: 1441px) {
  button#sidePanelButton {
    display: none
  }
}

@media (min-width: 1441px) { /* Adjust 768px (md) to your desired breakpoint */
  #mainTradeTableContainer {
      width: calc(100% - 440px); 
  }

  #panelRightSide {
      width: 440px; /* Initial width of the sidebar */
   }
  .sidePanelButtonClass {
      left: -16px; /* Button position when visible*/
  }
  .sidePanelButtonClass.hidden-panel {
     left: 0;
  }
}

/*FONTS*/
h3, h2, h1 {
  font-family: 'Red Hat Display', sans-serif;
  
}

p, td, body {
  font-family: 'Red Hat Text', sans-serif;
}