* {
    -webkit-tap-highlight-color: transparent;
}
select:focus, textarea:focus, input:focus {
    outline: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-9);
    box-shadow: 0 0 100px 100px inset var(--mainBackground);
}

* :focus {
    outline-width: 0;
}

/* SURFACE TOKENS -- the start of a design system, set 2026-09-10 at the product
   owner's request.

   The colour tokens below are per theme. These are not: a card is the same
   shape in every theme, and only its colours change. They were hand-picked
   per component before this, so the head-to-head card was padded 12px 14px 10px
   and the result table 4px 12px 8px -- close enough to look like a mistake
   rather than a choice, which is exactly how it read.

   Anything that draws a panel spends these instead of inventing its own. New
   components always; existing ones as they are next opened, the same way the
   CSS-in-CSS rule is being applied. */
:root{
    --card-px:14px;          /* a card's left and right padding      */
    --card-py:12px;          /* its top and bottom                   */
    --card-radius:12px;
    --card-line:1px;
    --row-py:10px;           /* the breathing room in a table row    */
    --label-fs:12px;         /* a row label, a field name            */
    --figure-fs:15px;        /* a number the reader came for         */
    --eyebrow-fs:10px;       /* the small uppercase caption above it */

    /* A COMPARISON BAR. Two of them, one per side, growing out from a gap in
       the middle -- the gap is what says they are two bars and not one
       measure cut in half. Added 2026-09-11 with the Result tab's statistics;
       anything else that compares two sides spends these. */
    /* RATE MOVEMENT. These were six literals inside one page's stylesheet
       (#7ac201, #ff5050 and four rgba() built from them), which is why a rate
       going up was the one thing on the page that could not follow a theme.
       The soft pair is the wash; it is deliberately more transparent than the
       bar, which is a hairline and has to hold its own against the figure. */
    --rate-up:#7ac201;
    --rate-down:#ff5050;
    --rate-up-soft:rgba(122,194,1,.42);
    --rate-down-soft:rgba(255,80,80,.44);
    --rate-up-haze:rgba(122,194,1,.22);
    --rate-down-haze:rgba(255,80,80,.24);

    --bar-h:9px;
    --bar-radius:5px;
    --bar-gap:7px;
}
/* ==========================================================================
   THE SURFACE, AS SOMETHING A THEME CAN CHANGE

   A theme can only change what has a name, and until now the only names were
   colours -- which is why 22 themes are one page with the accent swapped. These
   are the decisions that actually make a surface read as charcoal, or paper, or
   flat, or raised.

   Every value here is copied from the rule it replaces, so today's rendering is
   unchanged. A theme that wants a different feel overrides these instead of
   touching components:

       html[main-theme="themeN"]{
           --surface-sheen: none;          a flat theme
           --surface-elevation: none;
           --surface-radius: 4px;
       }

   Declared on bare html so every theme inherits; a theme block carries an
   attribute and outranks this whatever the source order.
   ========================================================================== */
html{
  /* the ground a panel sits on, and the one a raised part sits on */
  --surface-bg: var(--color-2);
  --surface-bg-raised: var(--color-3);

  /* the edge: width and colour separately, so a theme can keep the colour and
     drop the line, or the other way round */
  --surface-border: var(--color-4);
  --surface-border-w: 1px;

  /* how round. sm is for the small parts -- chips, rate cells, flags */
  --surface-radius: 10px;
  --surface-radius-sm: 5px;

  /* light falling across a surface. Two, because the match row and the page
     panels were drawn with different strengths and both are worth keeping. */
  --surface-sheen: linear-gradient(145deg, rgba(255,255,255, .075), rgba(0, 0, 0, .0));
  --surface-sheen-panel: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.06));

  /* whether it sits above the page or in it */
  --surface-elevation: 0 0 25px var(--color-2), 0px -25px 20px 0px var(--color-3) inset;
}

html[main-theme="theme1"] {
    --mainColor: #ffcc00;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme2"] {
    --mainColor: #ecbb0d;
    --virtualColor: #79b93f;
    --mainBackground: #e5e5e5;
    --color-1: #eee;
    --color-2: #fff;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme3"] {
    --mainColor: #a1ff0a;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme4"] {
    --mainColor: #7dc2ff;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme5"] {
    --mainColor: #ff3636;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme6"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme7"] {
    --mainColor: #57ce57;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme8"] {
    --mainColor: #cddc39;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme9"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme10"] {
    --mainColor: #deb887;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme11"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme12"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme13"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme14"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme15"] {
    --mainColor: #a550a6;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme16"] {
    --mainColor: #e95a5c;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme17"] {
    --mainColor: #ff4040;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme18"] {
    --mainColor: #8bc34a;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme19"] {
    --mainColor: #ac284f;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme20"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #fff7f4;
    --mainGlow: rgba(236,103,30,.16);
    --mainGlow2: rgba(236,103,30,.09);
    --mainArc: rgba(236,103,30,.08);
    --color-1: #fffdfa;
    --color-2: #f5ece9;
    --color-3: #e4dbd8;
    --color-4: #d3cbc7;
    --color-5: #9f9894;
    --color-6: #6c6562;
    --color-7: #5a5451;
    --color-8: #38322f;
    --color-9: #090000;
}

html[main-theme="theme21"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #16100c;
    --mainGlow: rgba(236,103,30,.22);
    --mainGlow2: rgba(236,103,30,.13);
    --mainArc: rgba(236,103,30,.10);
    --color-1: #090000;
    --color-2: #16100c;
    --color-3: #27211e;
    --color-4: #38322f;
    --color-5: #6c6562;
    --color-6: #9f9894;
    --color-7: #b0a9a5;
    --color-8: #d3cbc7;
    --color-9: #fffdfa;
}

html[main-theme="theme22"] {
    --mainColor: #d369bb;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[sport-theme="ca1"] {
    --sportColor: var(--mainColor);
}

html[sport-theme="ca2"] {
    --sportColor: var(--virtualColor);
}

body {
    background: linear-gradient(45deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),linear-gradient(135deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),radial-gradient(circle, transparent 25%, var(--color-1) 26%),linear-gradient(0deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%), linear-gradient(90deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%);
    background-size: 3em 3em;
    background-color: var(--color-1);
    opacity: 1;
    margin: 0 auto;
    font-family: DDIN, aller, ubuntu, tahoma;
    color: var(--color-9);
    cursor: default
}

p{font-family:Aller,tahoma;font-size:12px;padding:0 10px}
strong{color:var(--mainColor);font-weight:400}
a{text-decoration:none;color:var(--color-9)}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:5px auto;text-align:center}
input{padding:10px;font-family:DDIN;border-radius:5px;width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px;box-shadow:0 0 0 20px inset var(--mainBackground);max-width:90%}
input:disabled{opacity:.5}
textarea{padding:10px;font-family:DDIN;background:var(--mainBackground);border-radius:5px;width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
input[type="radio"]{display:inline-block;accent-color:var(--mainColor);width:auto;box-shadow:none}
label{cursor:pointer;display:table;margin:5px}
section{margin:10px;padding:10px}
select{padding:10px;border-radius:5px;font-family:DDIN;width:220px;background:var(--mainBackground);color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
select:disabled{opacity:.5}
.header{margin-bottom:60px}
.content{max-width:500px;margin:10px auto;position:relative;padding-bottom:20px}
.center{text-align:center;margin:5px auto 20px;display:block}
.hide{display:none}
.disabled{opacity:.3;filter: grayscale(1);}
.disabled:hover{transform:none!important}
.noCase{display:block;font-size:28px;margin:80px auto 0;text-align:center;font-family:DDIN}
.noCase video{max-width:90%;width:auto;max-height:500px;border:3px solid #fff;border-radius:10px}
/* 2026-09-10: the mask runs the whole height of the label, not its bottom
   59%. The border below crosses half a pixel above where the paint used to
   begin, so the line ran through the words instead of stopping either side
   of them. Same two colours; only the geometry changed. Moving the -12px
   pull instead would have shifted the spacing of every field on the site. */
.fieldTitle{margin:0 auto -12px;display:table;border-radius:10px;z-index:1;position:relative;padding:0 7px;font-size:10px;color:var(--color-6);background-image:linear-gradient(0deg,var(--mainBackground) 0%,var(--color-2) 100%)}
.fieldDescription{width:220px;margin:0 auto 50px;display:table;font-family:'Aller';font-size:10px;color:var(--color-6)}
.icon{display:table;width:128px;margin:10px auto;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .25s forwards}
.dialog-icon{display:table;width:128px;margin:-10px auto 10px;opacity:0;animation:zoomIn .75s cubic-bezier(0,0,0,2) .25s forwards}
.audio{position:absolute;top:5px;right:5px;width:18px;height:18px;display:table;z-index:101;border-radius:2px;cursor:pointer}
.audio[au="0"]{background:var(--mainColor) url(/images/sound_off_v1.png) no-repeat center / cover}
.audio[au="1"]{background:var(--mainColor) url(/images/sound_on_v1.png) no-repeat center / cover}
.help{position:absolute;top:5px;right:25px;width:18px;height:18px;background:var(--mainColor) url(/images/question_v1.png) no-repeat center / cover;border-radius:2px;display:table;cursor:pointer;z-index:101}
.loading{margin:100px auto;display:table}
.main{display:none}
.p_ga_2_m[demo="0"] .demo{display:none}
.p_ga_2_m[demo="1"] .demo{margin:0;display:table;position:sticky;left:0;top:60px;color:var(--mainColor);font-size:22px;z-index:4}
.p_ga_2_m[demo="1"] .demo span{background:#fff;display:inline-block;color:#000;padding:0 10px;transform:scale(.8);margin-right:-13px;border-radius:5px}
.p_ga_2_m[demo="1"] .demo a{background:var(--mainColor);color:#000;display:inline-block;padding:3px 30px 3px 10px;border-radius:5px;position:relative}
.p_ga_2_m[demo="1"] .demo a::before{content:"";position:absolute;width:12px;height:11px;top:50%;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:translateY(-50%) rotate(-90deg) scale(.8)}
.round{background:var(--mainColor);color:#111;position:relative;cursor:pointer;display:table}
.round.dark{background:var(--color-4);border-radius:110px;transform:scale(.7);width:auto;padding:10px 40px}
.mediumBox{margin:10px auto;border:2px solid var(--color-3);border-radius:10px;padding:20px;background:var(--color-2);width:calc(90% - 40px);max-width:300px;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .1s forwards;position:relative;z-index:1;overflow:hidden}
.mediumBox-title{margin:-20px auto 15px;color:var(--color-5);display:table;background:var(--color-3);padding:5px 30px 7px;border-radius:0 0 50% 50%;animation:fromTop 1s cubic-bezier(0,0,0,1) .9s forwards;opacity:0;text-align:center}
body,.promoColumnLeft{scrollbar-color:var(--color-4) var(--color-3);scrollbar-width:thin}
::-webkit-scrollbar{width:5px;height:8px;background:var(--color-4)}
::-webkit-scrollbar-thumb{background:var(--color-5);border-radius:5px}
.arrow{border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px}
.arrow.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.arrow.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
.arrow.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.arrow.down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.button{transition:.3s;background:var(--mainColor);color:#000;padding:10px;border-radius:100px;text-align:center;margin:5px auto;position:relative;cursor:pointer;display:flex;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);width:200px;justify-content:center;align-items:center;max-width:90%;border:none;box-shadow:0 5px 18px 2px var(--color-1),0px 6px 4px -2px var(--color-6),0 5px 5px -3px var(--color-1);top:-3px;z-index:1}
.button:active{transition:.3s;box-shadow:0 1px 5px 0 var(--color-1);transform:scale(.95) translate(0px,4px);filter:brightness(.9)}
.button.arrowRight{text-align:left}
.button.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg)}
.button.arrowRight::after{content:"";position:absolute;width:20px;height:47px;top:0;right:20px;border-left:5px solid var(--color-2)}
.button.dark{background:var(--mainBackground);transform:scale(.85);color:var(--color-5);border:1px solid var(--color-4);transition:.3s;width:auto;padding:2px 20px;margin:10px auto;border-radius:100px;max-width:max-content;min-width:auto;box-shadow:none;z-index:0;animation:fadeIn 1s cubic-bezier(0,0,0,1.2) 2s forwards;opacity:0}
.button.dark:active{transform:scale(.8);transition:.3s}
.button.dark.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg) scale(.75)}
.button.dark.arrowRight::after{display:none}
.backSmallButton{background:var(--mainColor);height:30px;width:30px;display:block;margin:10px;cursor:pointer;text-align:center;line-height:30px;color:var(--color-2);opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) .5s forwards;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);border-radius:3px}
.backSmallButton::before{content:"Back";color:var(--color-1);width:30px;text-align:center;display:block;padding-top:18px;font-size:9px;font-family:Aller;font-weight:700;display:none}
.button::after{content:'';display:block;width:1.2em;height:1.2em;position:absolute;left:calc(50% - 0.75em);top:calc(50% - 0.75em);border:3px solid transparent;border-right-color:#000;border-radius:50%;animation:none;opacity:0}
@keyframes button-anim {
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.button.button-loading{color:transparent!important}
.button.button-loading::after{opacity:1;animation:button-anim .7s linear infinite}
.moreInfo{padding:5px 10px;border:1px solid var(--color-6);display:table;margin:50px auto 0 10px;border-radius:5px;background:var(--color-1)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.progressbar{counter-reset:step;padding:0;height:50px;margin-bottom:20px;opacity:0;animation:fromTop 1s cubic-bezier(0,0,0,1.5) .5s forwards}
.progressbar li{list-style-type:none;float:left;font-size:12px;position:relative;text-align:center;color:var(--color-5)}
.progressbar li:before{height:10px;aspect-ratio:1;content:counter(step);counter-increment:step;display:block;text-align:center;margin:5px auto 10px;background:var(--color-5);padding:5px;color:transparent;border-radius:100px;line-height:11px;position:relative;z-index:2;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);box-shadow:0 0 5px var(--color-1)}
.progressbar li:after{width:100%;height:1px;content:'';position:absolute;background-color:var(--color-5);top:15px;left:-50%;z-index:-1}
.progressbar li:first-child:after{content:none}
.progressbar li.active a{color:#666}
.progressbar li.current{color:var(--color-9)}
.progressbar li.current a{color:var(--mainColor)}
.progressbar li.current:before{background-color:var(--color-9)}
.progressbar-close span{position:absolute;top:0;right:0;width:25px;height:25px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 40%;display:block}
.tab *{transition:.2s}
.tab{background:var(--color-3);display:flex;padding:0;margin:0;font-size:13px;line-height:20px;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .1s forwards;position:relative;z-index:2;overflow-x: clip;}
.tab ul{background:blue}
.tab li{display:flex;flex-grow:1;text-align:center;justify-content:center;cursor:pointer;padding:5px 0;background: linear-gradient(174deg, var(--color-3),  var(--color-4));overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])){--has-multi-tabs:initial}
.tab li.selected{background:var(--color-1);position:relative;border-radius:5px;box-shadow: 0 33px 15px -38px inset var(--color-8),0 -33px 15px -38px inset var(--color-8),0 0 10px rgba(0,0,0, .1);border:none;transform:var(--has-multi-tabs,none) scale(1.1);transform: scale(1.11);border-radius: 5px;position: relative;z-index: 2;}
.tab:not(:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"]))) li.selected{transform:none!important;box-shadow:none;border-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):first-child{transform-origin:left;border-bottom-left-radius: 0;border-top-left-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):not(:has(~ li:not([style*="display: none"]))){transform-origin:right;border-bottom-right-radius: 0;border-top-right-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):is(
:nth-child(2),:nth-child(3),:nth-child(4)
){}.tab li.selected::before{content:"";width: 50px;height:1.5px;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background-image: linear-gradient(135deg,transparent,var(--mainColor),transparent);}
.tab li.selected a{color:var(--color-9)}
.tab li:last-child{}
.table .header{background:var(--mainColor);display:grid;margin-bottom:5px;grid-template-columns:1fr 1fr 1fr auto auto auto auto;position:sticky;top:49px;color:#000;z-index:1;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .25s forwards;background-image:linear-gradient(135deg,#fff3,#0003)}
.table .cell{padding:10px;justify-self:normal;text-align:center}
.table .row{opacity:0;background:var(--color-2);display:grid;margin:2px auto;grid-template-columns:1fr 1fr 1fr auto auto auto auto;align-items:center;justify-content:center;align-content:center;justify-items:start;background-image:linear-gradient(135deg,#ffffff1a,#0000001a);border-radius:5px}
.table .row.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.table .row:nth-child(even){background-color:var(--color-3)}
.table .row.one{background:var(--color-3)}
.table .row.two{background:var(--color-2)}
.animatedRows{opacity:0}
.animatedRows.animated{animation:fromBottom .5s ease-in-out 0s forwards}
.am-bo{display:inline-flex;align-items:center;margin:0 5px}
.am-vc{display:flex;align-items:center}
.am-cus,.am-cut{transform:scale(0.9);opacity:.75;padding-right:2px}
.am-ic.coin{float:left;margin-right:3px;background:url(/images/coin_v1.png) no-repeat scroll center top / contain}
.am-ic.gem{float:left;margin-right:5px;background:url(/images/gem_v3.png) no-repeat scroll center top / contain}
.am-bo[am-ic="12"] .am-ic,.am-in-bo[am-ic="12"] .am-ic{width:12px;height:12px}
.am-bo[am-ic="15"] .am-ic,.am-in-bo[am-ic="15"] .am-ic{width:15px;height:15px}
.am-bo[am-ic="16"] .am-ic,.am-in-bo[am-ic="16"] .am-ic{width:16px;height:16px}
.am-bo[am-ic="18"] .am-ic,.am-in-bo[am-ic="18"] .am-ic{width:18px;height:18px}
.am-bo[am-ic="30"] .am-ic,.am-in-bo[am-ic="30"] .am-ic{width:30px;height:30px}
.am-bo[am-ic="40"] .am-ic,.am-in-bo[am-ic="40"] .am-ic{width:40px;height:40px}
.am-bo[am-ic="80"] .am-ic,.am-in-bo[am-ic="80"] .am-ic{width:80px;height:80px}
.am-in-bo{position:relative;padding:5px 35px 5px 15px;font-size:22px;border-radius:5px;display:table;cursor:pointer;background:var(--mainColor);color:#000;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);margin:auto}
.am-in-bo.disabled{opacity:0!important}
.am-in-bo .am-vc{display:flex;align-items:center}
.am-in-bo .am-va{width:75px;height:30px;margin-left:10px;padding:0;font-family:DDIN;font-size:21px;background:none;border:none;border-radius:unset;box-shadow:none;text-align:left}
.am-in-bo .am-up{position:absolute;top:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_up_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-up:active{transform:scale(1.5);transition:.2s}
.am-in-bo .am-do{position:absolute;bottom:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_down_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-do:active{transform:scale(1.5);transition:.2s}
.chip{position:relative;display:inline-block;margin:5px;width:40px;height:40px;border-radius:50%;line-height:43px;text-align:center;color:#fff;font-size:14px;cursor:pointer;background-image:url(/images/UI-187WL-min.png);background-size:cover;font-family:DDIN;box-shadow:1px 1px 5px #333;transition:1s;z-index:1;transform:scale(.9);background-color:#673ab7}
.chip:hover{transform:scale(1.6) rotate(10deg);transition:.2s;position:relative;z-index:2}
.chip.selected{box-shadow:0 0 0 2px black,0 0 0 4px var(--mainColor);transform:scale(1.2);z-index:2}
.chip[am="0.10"]{background-color:#3f51b5}
.chip[am="0.1"]{background-color:#3f51b5}
.chip[am="0.50"]{background-color:#388e3c}
.chip[am="0.5"]{background-color:#388e3c}
.chip[am="1"]{background-color:#296821}
.chip[am="5"]{background-color:#4d9ed8}
.chip[am="10"]{background-color:#135f96}
.chip[am="25"]{background-color:#a2574b}
.chip[am="100"]{background-color:#c62828}
.chip[am="200"]{background-color:#5e35b1}
.chip[am="500"]{background-color:#9c27b0}
.game-result{position:absolute;right:0;left:0;width:0;height:0;margin:0 auto;opacity:0;background:#000000e6;text-align:center;display:table;padding-bottom:10px}
.game-result-close{position:absolute;top:5px;right:5px;width:30px;height:30px;background:url(/images/UI-197.png) no-repeat scroll center / cover;z-index:1;border-radius:3px;cursor:pointer}
.game-result-image{position:absolute;top:0;margin:0;z-index:-1}
.game-result-image::before{content:"";width:100%;height:60%;position:absolute;background:linear-gradient(0deg,#000 0%,#3330 100%);bottom:0;left:0}
.game-result-image img{width:100%}
.game-result-text{position:relative;background:var(--mainColor);padding:10px 0;color:#000;margin-bottom:50px}
.game-result-chip{position:relative;background-color:#870284;background-image:url(/images/UI-187-min.png);width:200px;height:200px;line-height:210px;margin:0 auto!important;display:table;font-size:52px;transform:scale(.5)}
.game-result-chip:hover{transform:rotate(5deg)}
.game-result-reward{margin:75px auto 25px;display:table;font-size:69px;color:#fff;transform:scale(.5)}
.game-result-reward:hover{transform:rotate(5deg)}
.game-result.game-result-win{animation-name:zoomOut;animation-duration:1s;background:#030106;border-radius:5px;box-shadow:0 0 30px 70px #9c27b042}
.game-result.game-result-win .game-result-text{background:none;font-size:72px;margin:10px auto -20px;color:#fff;text-shadow:0 0 10px #aaa;opacity:0}
.game-result.game-result-win .game-result-image{background:url(/images/game-result-win-v297.jpg) no-repeat center / cover;border-radius:5px;height:160px;width:100%}
.game-result.game-result-lose{animation-name:zoomIn;animation-duration:1s;background:#030106;border-radius:5px;box-shadow:0 0 10px #000}
.game-result.game-result-lose .game-result-close{background:url(/images/UI-198.png) no-repeat scroll center / cover}
.game-result.game-result-lose .game-result-text{display:flex;align-items:center;justify-content:center;background:none;color:#eee;font-size:27px;top:160px}
.game-result.game-result-lose .game-result-image{background:url(/images/game-result-gameover.jpg) no-repeat center / cover;border-radius:5px;height:160px;width:100%}
.game-result-inplace{font-size:16px;display:flex}
.game-result-inplace-text{margin-right:2px;color:var(--mainColor)}
.game-result-inplace-reward{color:#fff}
.game-reward{position:absolute;padding:5px 10px!important;background:var(--mainColor);box-shadow:0 0 10px #000;border-radius:100px!important;display:flex;z-index:1000;border:2px solid var(--color-4);min-width:30px;text-align:center;justify-content:center;color:#000}
.game-reward-reward{margin-left:2px;font-size:16px;color:#fff}
.game-reward-chip{position:absolute;width:30px;height:30px;line-height:30px;font-size:12px;background:#870284 url(/images/UI-187-min.png) no-repeat scroll center / cover;border-radius:100%!important;text-align:center;z-index:1000}
.copy-notification{position:absolute;background-color:var(--color-9);color:var(--color-1);padding:5px 10px;border-radius:50px;font-size:12px;z-index:1000;transition:opacity .5s ease,display 0s 2s;transform:translate(10px,-50%);box-shadow:0 0 10px}
@keyframes zoomIn {
0%{opacity:0;transform:scale(0.3)}
100%{opacity:1}
}
@keyframes zoomOut {
0%{opacity:0;transform:scale(2)}
100%{opacity:1}
}
@keyframes fromTop {
0%{opacity:0;transform:translateY(-100%)}
100%{opacity:1}
}
@keyframes fromBottom {
0%{opacity:0;transform:translateY(100%) scale(.75)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
@keyframes fromLeft {
0%{opacity:0;transform:translateX(-100%) scale(.8)}
100%{opacity:1}
}
@keyframes fromRight {
0%{opacity:0;transform:translateX(100%) scale(.8)}
100%{opacity:1}
}
@keyframes pulse {
50%{transform:scale(1.2)}
}
@keyframes pulse-back {
50%{transform:scale(.75)}
}
.promoColumnLeft{width:150px;position:fixed;left:50%;border-radius:5px;display:block;transform:translateX(calc(-50% - 340px));max-height:calc(100vh - 50px);overflow-y:auto;top:50px}
.promoColumnLeft2{width:200px;position:absolute;left:50%;border-radius:5px;display:block;transform:translateX(calc(-50% - 525px));height:100%}
.promoColumnLeft2 img{max-width:100%;float:right;margin:10px auto;border-radius:10px;box-shadow:0 0 3px var(--sportColor);position:sticky;top:10px}
.promoColumnRight{width:150px;position:absolute;right:50%;transform:translateX(calc(50% + 340px));display:block;top:0}
.promoColumnRight2{width:200px;position:absolute;right:50%;border-radius:5px;display:block;transform:translateX(calc(50% + 525px))}
.promoColumnRight2 img{max-width:100%;float:right;margin:10px auto;border-radius:10px;box-shadow:0 0 3px var(--sportColor)}
.promoColumnRight2 .indexMoreInfo{float:left;position:sticky;width:100%}
.promoColumnRight2 .indexMoreInfo a{display:block;margin-bottom:5px;transition:1.5s;padding:5px 10px;border:1px solid var(--color-4);border-radius:10px;background:var(--color-1)}
.promoColumnRight2 .indexMoreInfo a:hover{transition:.5s;color:var(--mainColor)}
.promoColumnRight2 .footer-license{display:table;font-family:aller;font-size:10px;opacity:.5;padding:10px}
.promoColumnRight2 .footer-lgs-main{display:flex;flex-wrap:wrap;padding:0 5px}
.promoColumnRight2 .footer-lgs{height:16px;background:#fff;margin:2px;padding:4px;border-radius:2px;opacity:.5;transition:.4s;filter:grayscale(1)}
.promoColumnRight2 .footer-lgs:hover{opacity:.95;transition:.4s;transform:scale(1.2);box-shadow:0 0 10px var(--color-3);z-index:2}
.promoColumnRight2 .footer-lgs img{height:100%;margin:0;padding:0;box-shadow:none}
.promoColumnRight2 .official-logos p{opacity:.5;font-size:10px}
@media only screen and (max-width: 820px) {
.promoColumnLeft{position:relative;left:auto;transform:initial;top:auto;width:100%;overflow-x:scroll;padding:0;margin-bottom:-10px;display:none}
.promoColumnRight{right:auto;transform:none;text-align:center;width:100%;overflow:hidden;position:relative;margin-top:-10px;z-index:1;background:var(--color-1)}
}
@media only screen and (max-width: 1240px) {
.promoColumnLeft2{display:none}
.promoColumnRight2{display:none}
}
.ui-dialog .ui-widget-content{border:0}
.ui-dialog .ui-dialog-titlebar{display:none}
.ui-dialog .ui-dialog-content{padding:5px;font-family:Aller;font-size:13px;color:#141414;background:var(--mainColor)}
.ui-dialog .ui-dialog-buttonpane{margin:0;padding:0}
.ui-dialog .ui-dialog-buttonpane button{font-family:Aller;font-size:14px;color:#333;background:var(--mainColor);border-radius:100px;padding:10px;margin:0 5px;border:none;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);min-width:75px;box-shadow:0 0 30px #eee}
.ui-button .ui-button-text{padding:0!important}
.mf_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#1b1b1cbf;display:inline-block;z-index:1000}
.mf_p{position:fixed;top:0;left:0;width:100%;height:100%;font-family:DDIN;font-size:16px;display:table;z-index:1000;color:var(--color-9)}
.mf_p .mf_p1{height:100%;vertical-align:middle;display:table-cell}
.mf_p .mf_p2{position:relative;width:70%;max-width:480px;height:80%;margin:0 auto;text-align:center;display:block}
.mf_p .mf_cl{position:absolute;top:-41px;right:0;width:38px;height:38px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 33%;display:inline-block;cursor:pointer;border-radius:4px}
.mf_p .nano{width:100%;height:100%;background:var(--color-1);display:block;border-radius:5px;box-shadow:0 0 30px #000}
.mf_p .nano-content{margin:0;padding:0;overflow-x:hidden;overflow-y:scroll;display:inline-block}
.mf_p .nano-pane{background:#ffffff1a none repeat scroll 0 0!important}
.mf_p .nano-slider{background:#fff3 none repeat scroll 0 0!important}
@media only screen and (max-width: 820px) {
.mf_p .mf_p2{width:90%}
}

/* 2026-09-10: body is a block formatting context so the header's top margin does not collapse through it;
   without this the body box moved 60px when pull-to-refresh prepended its bubble (a 0.07 layout shift on every page). */
body{display:flow-root}

/* A BACKDROP FOR A SITE PEOPLE PLAY ON.

   A tile was one motif and hairline diagonals were another; both are wallpaper,
   and wallpaper is the wrong idea behind dense data. Nothing here repeats.

   Three layers, all curved, all in the theme's own accent:

     - a wide bloom falling from the top left,
     - a second rising from the bottom right,
     - and between them a soft ARC: a radial gradient that is transparent in the
       middle and at the edge, so what is drawn is a band -- a curve sweeping
       across the page rather than a straight edge anywhere.

   Fixed, so they do not travel with the list, and stronger than the first pass:
   a backdrop nobody can see is a backdrop that does not do its job.

   The alphas live in their own tokens because a hex custom property cannot take
   one without color-mix, which this tree avoids -- the app runs on a million
   unaudited devices -- and it means every theme carries its own three. */
html[main-theme="theme21"] body,
html[main-theme="theme20"] body {
    background:
        radial-gradient(100% 62% at 8% -12%, var(--mainGlow), transparent 56%),
        radial-gradient(78% 130% at 50% 118%, transparent 52%, var(--mainArc) 63%, transparent 74%),
        radial-gradient(90% 58% at 96% 106%, var(--mainGlow2), transparent 58%);
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-color: var(--color-1);
}


/* TOOLTIP -- design system, 2026-09-11, at the product owner's request.

   The browser's own title= tooltip is unstyled, about a second late, and does
   not exist at all on a touch screen. This frontend is also a WebView app with
   over a million installs, so most of the people who see it have no pointer to
   hover with. This one shows on hover, on keyboard focus, and on press.

   Anything that wants one carries data-tip="the words"; nothing else changes.
   Add aria-label with the same words and do NOT also set title, or the browser
   draws its own bubble on top of this one.

   A bubble centred on something near the edge of the page hangs past it, and an
   absolutely positioned box that hangs past the edge makes the whole page
   scroll sideways. data-tip-x="start" or "end" aligns the bubble to that edge
   instead of centring it; the arrow stays on the thing it belongs to. */
[data-tip]{position:relative}
[data-tip]:before,[data-tip]:after{opacity:0;pointer-events:none;transition:opacity .12s ease-out;z-index:20}
[data-tip]:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);width:max-content;max-width:min(62vw,190px);padding:5px 8px;border-radius:6px;background:var(--color-4);color:var(--color-9);font-size:11px;line-height:1.35;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
[data-tip]:before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-4)}
[data-tip][data-tip-x="start"]:after{left:0;transform:none}
[data-tip][data-tip-x="end"]:after{left:auto;right:0;transform:none}
[data-tip]:hover:before,[data-tip]:hover:after,
[data-tip]:focus-visible:before,[data-tip]:focus-visible:after,
[data-tip]:active:before,[data-tip]:active:after{opacity:1}
@media (prefers-reduced-motion:reduce){[data-tip]:before,[data-tip]:after{transition:none}}

/* PULL TO REFRESH -- an override, so the vendor file stays untouched.

   mk-pullfresh draws its indicator in hard-coded #aaa: a hairline ring, a
   hairline arrow, and -- while it is working -- a single 6px dot orbiting
   inside the ring, which reads as something broken rather than as something
   loading. On the dark themes the whole thing is washed out and on the light
   one it is barely there.

   Rewritten in the tokens, with the ring given the same surface, border and
   shadow as every other chip on the site, and the dot replaced by the arc
   that everybody already recognises as waiting. */
.mk-pullfresh-bubble .mkpf-indicator{box-sizing:border-box;border:1px solid var(--color-4);background:var(--color-2);box-shadow:0 2px 10px rgba(0,0,0,.28)}
/* THE ARROW, redrawn rather than recoloured.

   The vendor draws it as a 1px line twenty pixels tall inside a thirty-pixel
   circle, with a small square rotated onto the end. It reads as a skewer: too
   long, too thin for the weight of everything else on the site, and the head
   too small to be a head. Rebuilt at the same weight as the chevrons on the
   bracket -- a 2px stem twelve pixels long with a proper arrowhead under it --
   and both parts take currentColor, so the state change is one property. */
.mk-pullfresh-bubble .mkpf-indicator{color:var(--color-8)}
.mk-pullfresh-bubble .mkpf-arrow-down{border:0;background:currentColor;width:2px;height:12px;top:7px;left:14px;border-radius:1px}
.mk-pullfresh-bubble .mkpf-arrow-down:after{content:"";position:absolute;left:-4px;top:8px;width:9px;height:9px;border:2px solid currentColor;border-width:0 2px 2px 0;border-radius:0 0 2px 0;transform:rotate(45deg)}
/* Far enough to let go: the arrow turns the site's colour as well as turning
   over, so the state is not carried by rotation alone. */
[data-mkpf-state=ready] .mk-pullfresh-bubble .mkpf-indicator{color:var(--mainColor)}
/* The arc. The vendor's orbiting dot is switched off rather than restyled. */
.mk-pullfresh-bubble .mkpf-spinner{box-sizing:border-box;border:2px solid var(--color-4);border-top-color:var(--mainColor);background:none}
.mk-pullfresh-bubble .mkpf-spinner:after{display:none}
@media (prefers-reduced-motion:reduce){
    .mk-pullfresh-bubble .mkpf-spinner{animation-duration:2.4s}
    .mk-pullfresh-bubble .mkpf-icon-wrapper{transition:none}
}

/* IN-PAGE JUMPS EASE, AND THEY DO NOT LAND UNDER THE HEADER.
   -------------------------------------------------------------------------
   A link to an anchor on the same page used to teleport, which is the one
   place on this site where something still snapped. Site-wide, so every such
   link gets it without each page remembering to.

   scroll-padding-top is the other half and matters more than the easing: the
   header is position:fixed and 51px tall -- measured on the live country page,
   not guessed -- so without it a jump puts the heading it aimed at UNDER the
   header and the reader lands on the wrong thing. The extra 10px is so the
   target sits clear of the edge rather than flush against it.

   Two places must NOT ease and are handled in their own files: the scroll
   restores in p-ga-6-restore-v2.js and p-ga-8-restore-v2.js, which put the
   reader back where they were. Animating those would scroll the whole page
   down in front of them every time they come back. */
html{scroll-behavior:smooth;scroll-padding-top:61px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   THE PAGE DOES NOT MOVE WHEN A DIALOG OPENS

   A dialog locks the page behind it, the scrollbar goes with the scrolling, and
   the content widens by exactly the bar -- measured here at 15px -- so the text
   under the overlay jumps sideways the moment it appears, and jumps back when it
   closes. It reads as the page flinching.

   Reserving the gutter always means there is nothing to give back. One
   declaration, on the element that owns the scrollbar, for every page.

   Phones are unaffected: their scrollbars are overlays with no width, so no
   gutter is reserved and nothing changes.
   ========================================================================== */
html{scrollbar-gutter:stable}

/* ==========================================================================
   THE TRAIL AT THE TOP OF A SPORT PAGE

   Home > Baseball > United States > Il. Every step that goes somewhere should
   say so on hover; the one naming the page you are already on should not, and
   nor should a step the page rendered as plain text rather than a link.

   a[href] is exactly that test, and it needs no list of which crumb is a link on
   which page -- p-ga-13 renders .le_na as a div and p-ga-14 as an anchor, and
   this is right on both without knowing that.

   Written once for the three pages that carry the trail rather than three times
   in three stylesheets, which is how p-ga-12, p-ga-13 and p-ga-14 already hold
   three identical copies of the .bo_in rule.
   ========================================================================== */
/* Nothing is declared at rest. A transparent underline waiting to be revealed
   was tried first and did not take -- measured, the colour computed white, so
   the trail would have carried a permanent white underline, worse than before.
   Only the hover state is written, so there is nothing to fail. */
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{
  transition:color .16s ease;
}
.p_ga_12_m .bo .bo_in a[href]:hover,
.p_ga_13_m .bo .bo_in a[href]:hover,
.p_ga_14_m .bo .bo_in a[href]:hover{
  color:var(--mainColor);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
@media (prefers-reduced-motion:reduce){
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{transition:none}
}
/* The separator is decoration and used to carry the same weight as the steps:
   measured, #fff at 16px, identical to the links beside it. Muted so the trail
   reads as steps with marks between them rather than one alternating line.
   #999 on this ground is 9.6:1, so it is quiet, not faint.

   Here rather than in the two page stylesheets, for the same reason the hover
   rule above is here. p-ga-12 carries the same trail markup but renders no
   divider at all, so it is not listed. */
.p_ga_12_m .bo .divider,
.p_ga_13_m .bo .divider,
.p_ga_14_m .bo .divider{color:var(--color-6)}