/* Crosslink V171: standard type styling and enlarging the actual selected piece. */
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings {
 display:block!important;width:100%!important;margin:0!important;padding:0!important;
 border:0!important;background:transparent!important;box-shadow:none!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-row {
 display:flex!important;align-items:center!important;justify-content:flex-start!important;
 flex-wrap:wrap!important;gap:12px!important;width:100%!important;
 min-height:64px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title {
 display:inline-flex!important;align-items:center!important;gap:5px!important;
 font:700 16px/1.4 system-ui,sans-serif!important;
 white-space:nowrap!important;color:#405873!important;margin:0 10px 0 0!important;
 width:auto!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-amp {
 font:inherit!important;font-style:normal!important;font-size:inherit!important;
 line-height:inherit!important;color:inherit!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice {
 display:block!important;width:260px!important;min-width:155px!important;max-width:100%!important;
 flex:0 1 260px!important;height:49px!important;margin:0!important;
 color:#243e59!important;background:#fff!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-choices {
 display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;
 flex-wrap:wrap!important;gap:12px!important;margin:0!important;padding:0!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece {
 box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;
 justify-content:center!important;width:46px!important;height:46px!important;
 min-width:46px!important;min-height:46px!important;padding:3px!important;margin:0!important;
 border:1px solid #b9cadc!important;border-radius:50%!important;background:#fff!important;
 cursor:pointer!important;box-shadow:0 0 0 1px #e2eaf2!important;
 transition:transform 220ms ease-out,box-shadow 220ms ease-out,border-color 220ms ease-out!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece img {
 display:block!important;width:35px!important;height:35px!important;object-fit:contain!important;
 pointer-events:none!important;transform:scale(1)!important;
 transition:transform 240ms cubic-bezier(.2,.7,.2,1)!important;transform-origin:center!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece.selected {
 transform:scale(1.12)!important;
 border:2px solid #263956!important;
 box-shadow:0 0 0 1px rgba(38,57,86,.12)!important;z-index:1!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece:focus-visible{
 outline:3px solid #1b2c47!important;outline-offset:5px!important;
}
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings > #pieceStylePreview {display:none!important;}
.cl-preferred-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;}
@media(max-width:650px){
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-row{gap:12px!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-colour-title{font-size:16px!important;gap:5px!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings .cl-piece-amp{font-size:inherit!important;}
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings #pieceStyleChoice{flex:1 1 165px!important;}
}

/* Size the actual chosen piece, not just its outer circle. */
body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece.selected img {
 transform:scale(1.27)!important;
}

/* Reduced-motion users get the same clear selection, without animation. */
@media (prefers-reduced-motion: reduce) {
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece,
 body:not(.board-view) #view-settings #clThemesPanel #pieceSettings button.cl-preferred-piece img {
   transition:none!important;
 }
}