/* =========================================================
   DSX0 LB3 ? RACE LAYOUT FINAL
   ========================================================= */

.race-zone{
  box-sizing:border-box !important;

  padding-left:52px !important;
  padding-right:52px !important;

  border-color:rgba(39,184,227,.14) !important;

  overflow:hidden !important;
}


/* =========================
   CABE?ALHO
   ========================= */

.race-zone .progress-head{
  position:relative !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;

  align-items:center !important;

  width:100% !important;

  margin:0 !important;
  padding:0 !important;

  box-sizing:border-box !important;
}

.race-zone .progress-label{
  position:static !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;

  justify-self:start !important;
}

.race-zone .progress-right{
  position:static !important;

  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:12px !important;

  width:auto !important;
  min-width:0 !important;
  max-width:none !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;

  justify-self:end !important;

  overflow:visible !important;
  white-space:nowrap !important;
}

.race-zone .progress-right span,
.race-zone .progress-right strong{
  position:static !important;

  display:inline-block !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;

  white-space:nowrap !important;
}

.race-zone #racePct{
  min-width:56px !important;
  text-align:right !important;
}


/* =========================
   WAGER
   ========================= */

.race-zone #dsxWagerTotalEdicao{
  width:100% !important;

  margin-left:0 !important;
  margin-right:0 !important;

  padding-left:0 !important;
  padding-right:0 !important;

  transform:none !important;

  box-sizing:border-box !important;
}


/* =========================
   BARRA
   ========================= */

.race-zone .progress-track{
  position:relative !important;

  width:100% !important;
  max-width:100% !important;

  margin-left:0 !important;
  margin-right:0 !important;

  box-sizing:border-box !important;

  border-color:rgba(47,170,211,.13) !important;
}


/* =========================
   LINHA IN?CIO / FIM
   ========================= */

.race-zone .timeline.lb3-timeline-without-counter{
  position:relative !important;

  display:grid !important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;

  align-items:end !important;

  width:100% !important;
  max-width:100% !important;

  margin:22px 0 0 !important;

  padding:
    20px
    10px
    0
    10px !important;

  box-sizing:border-box !important;

  overflow:visible !important;
}


/* ambos */
.race-zone .timeline .date-block{
  position:static !important;

  width:max-content !important;
  min-width:0 !important;
  max-width:100% !important;

  margin:0 !important;
  padding:0 !important;

  transform:none !important;

  overflow:visible !important;
}


/* IN?CIO */
.race-zone .timeline .date-block:first-child{
  justify-self:start !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;

  text-align:left !important;
}


/* FIM */
.race-zone .timeline .date-block:last-child{
  justify-self:end !important;

  display:flex !important;
  flex-direction:column !important;
  align-items:flex-end !important;

  margin:0 !important;
  padding:0 !important;

  text-align:right !important;

  transform:none !important;
}


/* labels */
.race-zone .timeline .tiny-label{
  position:static !important;

  width:max-content !important;

  margin:0 !important;

  transform:none !important;
}


/* datas */
.race-zone .timeline .date-value{
  position:static !important;

  display:block !important;

  width:max-content !important;
  max-width:none !important;

  margin-top:9px !important;
  padding:0 !important;

  white-space:nowrap !important;

  overflow:visible !important;
  text-overflow:clip !important;

  transform:none !important;
}


/* seguran?a extra para o lado direito */
.race-zone #endDate{
  margin-right:0 !important;
  padding-right:0 !important;

  transform:none !important;
}


/* =========================
   MOBILE
   ========================= */

@media(max-width:800px){

  .race-zone{
    padding-left:18px !important;
    padding-right:18px !important;
  }

  .race-zone .progress-head{
    grid-template-columns:1fr !important;
    gap:8px !important;
  }

  .race-zone .progress-right{
    justify-self:start !important;
  }

  .race-zone .timeline.lb3-timeline-without-counter{
    grid-template-columns:1fr !important;
    gap:20px !important;
  }

  .race-zone .timeline .date-block:last-child{
    justify-self:start !important;
    align-items:flex-start !important;
    text-align:left !important;
  }
}


/* =========================================
   DSX0 LB3 ? FOOTER / TIMELINE FIX
   ========================================= */

.race-zone .timeline.lb3-timeline-without-counter{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  align-items:end !important;

  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;

  margin-top:22px !important;
  padding:22px 26px 0 26px !important;

  overflow:visible !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block{
  position:relative !important;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;

  margin:0 !important;
  padding:0 !important;

  left:auto !important;
  right:auto !important;
  transform:none !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:first-child{
  justify-self:start !important;
  text-align:left !important;
  align-items:flex-start !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child{
  justify-self:end !important;
  text-align:right !important;
  align-items:flex-end !important;
}

.race-zone .timeline.lb3-timeline-without-counter .tiny-label{
  display:block !important;
  margin:0 0 8px 0 !important;
  padding:0 !important;

  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;

  white-space:nowrap !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-value{
  display:block !important;
  margin:0 !important;
  padding:0 !important;

  position:relative !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;

  white-space:nowrap !important;
  overflow:visible !important;
  text-overflow:clip !important;
}

.race-zone .timeline.lb3-timeline-without-counter #startDate{
  text-align:left !important;
}

.race-zone .timeline.lb3-timeline-without-counter #endDate{
  text-align:right !important;
  margin-right:0 !important;
  padding-right:0 !important;
}

/* evita cortar o lado direito */
.race-zone{
  overflow:hidden !important;
}

@media (max-width: 800px){
  .race-zone .timeline.lb3-timeline-without-counter{
    grid-template-columns:1fr !important;
    row-gap:18px !important;
    padding:18px 18px 0 18px !important;
  }

  .race-zone .timeline.lb3-timeline-without-counter .date-block:last-child{
    justify-self:start !important;
    text-align:left !important;
    align-items:flex-start !important;
  }

  .race-zone .timeline.lb3-timeline-without-counter #endDate{
    text-align:left !important;
  }
}


/* =========================================
   DSX0 LB3 ? ELEGANT RACE FINISH
   ========================================= */

/* Cabe?alho da ?rea */
.race-zone .progress-head{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  align-items:center !important;
  gap:18px !important;
}

.race-zone .progress-label{
  font-size:18px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  font-weight:800 !important;
  color:rgba(235,245,255,.96) !important;
  text-shadow:0 0 14px rgba(0,210,255,.10) !important;
}

/* lado direito: paga top + percentual */
.race-zone .progress-right{
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
}

.race-zone .progress-right span{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  padding:8px 14px !important;
  border-radius:999px !important;

  color:#9fb3c9 !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;

  border:1px solid rgba(90,220,255,.20) !important;
  background:linear-gradient(180deg, rgba(8,20,35,.92), rgba(5,12,24,.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 18px rgba(0,180,255,.08) !important;
}

.race-zone .progress-right span::before{
  content:"?";
  color:#7fe8ff;
  font-size:12px;
  opacity:.95;
}

.race-zone #racePct{
  color:#d2ff4d !important;
  font-weight:900 !important;
  font-size:18px !important;
  letter-spacing:.03em !important;
  text-shadow:
    0 0 10px rgba(210,255,77,.18),
    0 0 22px rgba(180,255,0,.10) !important;
}

/* linha divis?ria da ?rea */
.race-zone .progress-track{
  margin-top:16px !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-shadow:
    inset 0 0 0 1px rgba(80,220,255,.10),
    inset 0 0 18px rgba(0,0,0,.35) !important;
}

/* timeline / datas */
.race-zone .timeline.lb3-timeline-without-counter{
  margin-top:28px !important;
  padding-top:20px !important;
  border-top:1px solid rgba(120,170,220,.14) !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block{
  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;
}

/* badges in?cio / fim */
.race-zone .timeline.lb3-timeline-without-counter .tiny-label{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  width:auto !important;
  align-self:flex-start !important;
  padding:8px 14px !important;

  border-radius:999px !important;
  font-size:12px !important;
  font-weight:900 !important;
  letter-spacing:.10em !important;
  text-transform:uppercase !important;

  color:#ecf6ff !important;
  border:1px solid rgba(84,220,255,.22) !important;
  background:linear-gradient(180deg, rgba(8,22,36,.92), rgba(4,12,22,.92)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 16px rgba(0,180,255,.06) !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:first-child .tiny-label::before{
  content:"?";
  color:#46dcff;
  font-size:11px;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label{
  align-self:flex-end !important;
  border-color:rgba(255,210,90,.24) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 16px rgba(255,190,60,.06) !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label::before{
  content:"?";
  color:#ffd76a;
  font-size:11px;
}

/* valores das datas */
.race-zone .timeline.lb3-timeline-without-counter .date-value{
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  color:#a8bdd3 !important;
  letter-spacing:.01em !important;
}

.race-zone .timeline.lb3-timeline-without-counter #startDate{
  text-align:left !important;
}

.race-zone .timeline.lb3-timeline-without-counter #endDate{
  text-align:right !important;
}

/* card inteiro mais refinado */
.race-zone{
  border-color:rgba(0,225,255,.20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(0,225,255,.04),
    0 18px 40px rgba(0,0,0,.20) !important;
}

@media (max-width: 800px){
  .race-zone .progress-head{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .race-zone .progress-right{
    justify-content:flex-start !important;
    flex-wrap:wrap !important;
  }

  .race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label{
    align-self:flex-start !important;
  }

  .race-zone .timeline.lb3-timeline-without-counter #endDate{
    text-align:left !important;
  }
}


/* =========================================
   DSX0 LB3 ? START / END PILLS SAME SIZE
   ========================================= */

/* mesma largura e alinhamento nas 2 pills */
.race-zone .timeline.lb3-timeline-without-counter .tiny-label{
  width:110px !important;
  min-width:110px !important;
  max-width:110px !important;
  justify-content:center !important;
  text-align:center !important;
  box-sizing:border-box !important;
}

/* in?cio */
.race-zone .timeline.lb3-timeline-without-counter .date-block:first-child .tiny-label{
  align-self:flex-start !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:first-child .tiny-label::before{
  content:"?" !important;
  color:#46dcff !important;
  font-size:11px !important;
}

/* fim */
.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label{
  align-self:flex-end !important;
  width:110px !important;
  min-width:110px !important;
  max-width:110px !important;
  justify-content:center !important;
  text-align:center !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label::before{
  content:"??" !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* no mobile deixa alinhado ? esquerda */
@media (max-width: 800px){
  .race-zone .timeline.lb3-timeline-without-counter .date-block:first-child .tiny-label,
  .race-zone .timeline.lb3-timeline-without-counter .date-block:last-child .tiny-label{
    align-self:flex-start !important;
  }
}


/* =========================================
   DSX0 LB3 ? START / END ICON FIX
   ========================================= */

/* limpa qualquer s?mbolo antigo */
.race-zone .timeline.lb3-timeline-without-counter
.date-block:first-child .tiny-label::before,
.race-zone .timeline.lb3-timeline-without-counter
.date-block:last-child .tiny-label::before{
  content:'' !important;
  display:inline-block !important;

  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;

  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;

  font-size:0 !important;
  line-height:0 !important;
}

/* IN?CIO ? play circular premium */
.race-zone .timeline.lb3-timeline-without-counter
.date-block:first-child .tiny-label::before{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='9' fill='none' stroke='%2346dcff' stroke-width='2'/>\
<path d='M10 8.5L16 12L10 15.5Z' fill='%2346dcff'/>\
</svg>") !important;

  filter:
    drop-shadow(0 0 4px rgba(70,220,255,.45)) !important;
}

/* FIM ? bandeira quadriculada premium */
.race-zone .timeline.lb3-timeline-without-counter
.date-block:last-child .tiny-label::before{
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M6 21V3' fill='none' stroke='%23ffd451' stroke-width='1.8' stroke-linecap='round'/>\
<path d='M7 4H18V13H7Z' fill='none' stroke='%23ffd451' stroke-width='1.6'/>\
<path d='M7 4H12.5V8.5H7Z' fill='%23ffd451'/>\
<path d='M12.5 8.5H18V13H12.5Z' fill='%23ffd451'/>\
<path d='M12.5 4H18V8.5H12.5Z' fill='%23081422'/>\
<path d='M7 8.5H12.5V13H7Z' fill='%23081422'/>\
</svg>") !important;

  filter:
    drop-shadow(0 0 4px rgba(255,212,81,.45)) !important;
}


/* deixa as duas pills perfeitamente iguais */
.race-zone .timeline.lb3-timeline-without-counter .tiny-label{
  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;

  height:46px !important;

  padding:0 14px !important;

  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:9px !important;

  box-sizing:border-box !important;
}


/* =========================================================
   DSX0 LB3 ? PAGA TOP 20 ICON FIX
   ========================================================= */

.race-zone .progress-right span::before{
  content:'' !important;

  display:inline-block !important;

  width:16px !important;
  height:16px !important;
  flex:0 0 16px !important;

  margin-right:2px !important;

  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;

  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'>\
<path d='M8 4H16V7C16 10.3 14.2 12.6 12 13.5C9.8 12.6 8 10.3 8 7V4Z' stroke='%237FE8FF' stroke-width='1.8' stroke-linejoin='round'/>\
<path d='M8 6H5V7C5 9.2 6.2 10.5 8.5 10.8' stroke='%237FE8FF' stroke-width='1.6' stroke-linecap='round'/>\
<path d='M16 6H19V7C19 9.2 17.8 10.5 15.5 10.8' stroke='%237FE8FF' stroke-width='1.6' stroke-linecap='round'/>\
<path d='M12 13.5V17' stroke='%237FE8FF' stroke-width='1.8' stroke-linecap='round'/>\
<path d='M9 20H15' stroke='%237FE8FF' stroke-width='1.8' stroke-linecap='round'/>\
<path d='M10 17H14V20H10V17Z' stroke='%237FE8FF' stroke-width='1.6'/>\
</svg>") !important;

  filter:
    drop-shadow(0 0 4px rgba(127,232,255,.40)) !important;

  font-size:0 !important;
  line-height:0 !important;
}


/* =========================================================
   DSX0-LB3-END-CARD-FIX-V1
   Corrige o card da direita ("Encerramento")
   para n?o ultrapassar a ?rea vis?vel.
   ========================================================= */

.race-zone .timeline.lb3-timeline-without-counter{
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:28px !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:first-child,
.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child{
  justify-self:stretch !important;
  align-self:stretch !important;
}

.race-zone .timeline.lb3-timeline-without-counter .date-block:last-child{
  margin-right:0 !important;
  padding-right:28px !important;
}

.race-zone .timeline.lb3-timeline-without-counter #endDate{
  max-width:100% !important;
  word-break:break-word !important;
}