/* release 422 (owner: "I don't like the yellow dotted square around players"; "show change like the stock market, green or red
   triangle"). The players this demo can change get an indigo name tag instead of a dashed gold square; the one chosen gets a pale
   indigo background, and a player swapped in gets a white tag with an indigo edge. The change column shows a move larger than its
   margin as a green up or red down triangle with its sign; the sign and the triangle carry it without colour too. */
.ht-skater.ht-can, .ht-lab .fantasy-player.ht-can { outline: 0; }
.ht-skater.ht-can svg { filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.ht-lab .fantasy-player.ht-can .fpl-jersey { filter: none; }
.ht-skater.ht-can span, .ht-lab .fantasy-player.ht-can > span { background: #3C3CC3 !important; color: #fff !important; }
.ht-skater.ht-can { transition: transform .15s ease; }
.ht-skater.ht-can:hover { transform: translate(-50%, -50%) translateY(-2px); }
.ht-skater.ht-can:hover span { background: #2F2FA6 !important; }
.ht-skater.is-selected, .ht-lab .lineup-lab .fantasy-player.is-selected { background: rgba(60, 60, 195, .12); }
.ht-skater.ht-swapped span, .ht-lab .fantasy-player.ht-swapped > span { background: #fff !important; color: #2F2FA6 !important; box-shadow: inset 0 0 0 2px #3C3CC3; }
.ht-skater:focus-visible { outline: 3px solid var(--b-primary, #5663F0); outline-offset: 2px; }
.ht-chg { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ht-chg i { font-style: normal; font-size: .8em; }
.ht-chg.is-up { color: #067647; }
.ht-chg.is-down { color: #B42318; }
.ht-chg.is-flat { color: #6F6C90; font-weight: 500; }
.ht-chg.is-flat { flex-wrap: wrap; justify-content: flex-end; column-gap: 4px; }
.ht-chg small { flex-basis: 100%; text-align: right; color: #6F6C90; font-size: 11.5px; font-weight: 500; }