#predict-counts
{
   display: grid;
   margin-right: 4px;

   #tick-box, #cross-box
   {
     @include edged-panel();
     max-height:26px;
     max-width:55px;
     font-size: 23px;
     margin: 0px;
     padding: { left:4px; right:4px; top:5px; bottom:2px; }
     color: lighten(Black, 20%);
     background: lighten($darker-color,30%);
     border: none;
     display: inline-flex;
     $predictFadePercent: 15%;

     &.red   { background: lighten($red,   $predictFadePercent); }
     &.amber { background: lighten($amber, $predictFadePercent); }
     &.green { background: lighten($green, $predictFadePercent); }
   }
   #tick-img, #cross-img
   {
     width: 16px;
     height: 16px;
     padding: { left:3px; right:3px; top:3px; bottom:0px; }
   }
   #tick-count, #cross-count
   {
     font-size: 19px;
     padding: { left:3px; right:3px; }
     color: lighten(Black, 20%);
     position: relative;
     top: -2px;
   }
}

#predict-counts
{
   display: grid;
   margin-right: 4px;

   #tick-box, #cross-box
   {
     @include edged-panel();
     max-height:26px;
     max-width:55px;
     font-size: 23px;
     margin-bottom: 1px;
     padding: { left:4px; right:4px; top:5px; bottom:2px; }
     color: lighten(Black, 20%);
     background: lighten($darker-color,30%);
     border: none;
     display: inline-flex;
     $predictFadePercent: 15%;

     &.red   { background: lighten($red,   $predictFadePercent); }
     &.amber { background: lighten($amber, $predictFadePercent); }
     &.green { background: lighten($green, $predictFadePercent); }
   }
   #tick-img, #cross-img
   {
     width: 16px;
     height: 16px;
     padding: { left:3px; right:3px; top:3px; bottom:0px; }
   }
   #tick-count, #cross-count
   {
     font-size: 19px;
     padding: { left:3px; right:3px; }
     color: lighten(Black, 20%);
     position: relative;
     top: -2px;
   }
}

Tweak correct/incorrect prediction counts CSS.
Tweak correct/incorrect prediction counts CSS.
