/* 024B Train Fare recovery */
#letterGrid{
  display:grid!important;
  grid-template-columns:repeat(13,minmax(42px,1fr))!important;
  gap:8px!important;
  min-height:45px!important;
  margin-top:12px!important;
}
#letterGrid:empty::before{
  content:"Loading station letters…";
  grid-column:1/-1;
  padding:14px;
  border:1px dashed #c7d1dc;
  border-radius:11px;
  color:#667085;
  background:#f7f9fb;
}
.letter-button{
  display:inline-flex!important;
  min-height:45px!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #ccd5df!important;
  border-radius:11px!important;
  color:#344054!important;
  background:#f7f9fb!important;
  box-shadow:0 2px 7px rgba(18,30,48,.035)!important;
  font-size:14px!important;
  font-weight:650!important;
  cursor:pointer!important;
}
.letter-button:hover,
.letter-button:focus-visible,
.letter-button.is-active{
  border-color:#e3131b!important;
  color:#fff!important;
  background:#e3131b!important;
  outline:none!important;
}
.letter-button:disabled{
  opacity:.28!important;
  filter:grayscale(.5)!important;
  cursor:not-allowed!important;
}
#clearFare[hidden],
#clearFare:disabled{
  display:none!important;
}
#fareResult:not(.is-visible){
  display:none!important;
}
@media(max-width:920px){
  #letterGrid{
    grid-template-columns:repeat(9,minmax(42px,1fr))!important;
  }
}
@media(max-width:650px){
  #letterGrid{
    grid-template-columns:repeat(5,minmax(42px,1fr))!important;
  }
}