:root{--selection-on:url('selection-on.svg');--selection-off:url('selection-off.svg')}
.role-card:after,.role-card[aria-pressed=true]:after,
.rank-pick-check,.portrait-choice>b{
 content:'';width:24px;height:24px;border:0;border-radius:0;
 background:transparent var(--selection-off) center/contain no-repeat;
 box-shadow:none;font-size:0;line-height:0;color:transparent;
}
.role-card:after,.role-card[aria-pressed=true]:after{top:14px;right:14px}
.role-card[aria-pressed=true]:after,.rank-pick-check,.portrait-choice>b{background-image:var(--selection-on)}
.role-card>span{padding-right:19px}
.rank-pick-check{top:12px;right:12px}
.portrait-choice>b{top:6px;right:6px;width:22px;height:22px}
.character-options input,.mode-picker input{
 appearance:none;-webkit-appearance:none;position:absolute;z-index:1;
 width:24px;height:24px;margin:0;border:0;border-radius:0;
 background:transparent var(--selection-off) center/contain no-repeat;
 cursor:pointer;opacity:1;
}
.character-options input{left:15px;top:19px}
.character-options input+span{padding-left:51px}
.mode-picker input{left:11px;top:17px;width:22px;height:22px}
.mode-picker label>span{padding-left:43px}
.character-options input:checked,.mode-picker input:checked{background-image:var(--selection-on)}
.character-options input:focus-visible,.mode-picker input:focus-visible{outline:2px solid #356cc5;outline-offset:3px}
.role-card:focus-visible{outline:2px solid #356cc5;outline-offset:3px}
.portrait-choice:focus-visible{outline:none}
.mode-comparison button[aria-pressed=true]>span:after{content:none}
.mode-comparison button[aria-pressed=true]:after{content:'';display:inline-block;flex:none;width:24px;height:24px;margin-left:15px;background:var(--selection-on) center/contain no-repeat}
.order-summary,.service-summary{border-top:1px solid #cdd9eb}
@media(max-width:650px){
 .character-options input{top:17px;left:13px}
 .character-options input+span{padding-left:49px}
 .mode-picker input{left:8px}
 .mode-picker label>span{padding-left:37px}
 .rank-pick-check{width:22px;height:22px;right:9px;top:9px}
}
@media(forced-colors:active){
 .portrait-choice:after{border-color:ButtonText;box-shadow:none}
 .portrait-choice[aria-pressed=true]:after,.portrait-choice:focus-visible:after{border-color:Highlight}
 .character-options input,.mode-picker input{appearance:auto;-webkit-appearance:auto}
 .role-card[aria-pressed=true]:after,.rank-pick-check,.portrait-choice>b{background:none;color:Highlight;font-size:20px;line-height:24px}
 .role-card[aria-pressed=true]:after{content:'\2713'}
}