/* === arbmate-tool.css ================================================
* The tool pages (surebets, middles, polish middles; prematch and live) on
* OSDS with the ArbMate brand (stage 4, Chapa 2026-10-25: "за юзъра не
* трябва да има голяма промяна в поведението, единствено в дизайна").
*
* The page keeps its markup and its scripts (public/js/app): the same
* panels in the same places, the same clicks. This file replaces the old
* webapp.css (and the few styles.css rules the tool used): every size and
* position is the old one; colours, type, icons and controls are OSDS, in
* the visitor's theme (light / dark / system).
*
* Load order (layouts.arbs + pages/surebets): arbmate-tool-base.css (the
* Bootstrap 3.3.7 rules the tool uses, verbatim), /_design/css/design.css,
* arbmate-brand.css (tokens), arbmate-chrome.css, this file.
* ================================================================== */
/* ---- Tokens ----------------------------------------------------------
* Lucide icons (ISC), the OSDS icon style, as masks: an icon takes the
* colour of its text. They replace Font Awesome 4 and the Glyphicons; the
* markup keeps its fa-* / glyphicon-* classes (the scripts swap them). */
:root {
--am-ic-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
--am-ic-square-check-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E");
--am-ic-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22V4a1 1 0 0 1 .4-.8A6 6 0 0 1 8 2c3 0 5 2 7.333 2q2 0 3.067-.8A1 1 0 0 1 20 4v10a1 1 0 0 1-.4.8A6 6 0 0 1 16 16c-3 0-5-2-8-2a6 6 0 0 0-4 1.528'/%3E%3C/svg%3E");
--am-ic-boxes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.97 12.92A2 2 0 0 0 2 14.63v3.24a2 2 0 0 0 .97 1.71l3 1.8a2 2 0 0 0 2.06 0L12 19v-5.5l-5-3-4.03 2.42Z'/%3E%3Cpath d='m7 16.5-4.74-2.85'/%3E%3Cpath d='m7 16.5 5-3'/%3E%3Cpath d='M7 16.5v5.17'/%3E%3Cpath d='M12 13.5V19l3.97 2.38a2 2 0 0 0 2.06 0l3-1.8a2 2 0 0 0 .97-1.71v-3.24a2 2 0 0 0-.97-1.71L17 10.5l-5 3Z'/%3E%3Cpath d='m17 16.5-5-3'/%3E%3Cpath d='m17 16.5 4.74-2.85'/%3E%3Cpath d='M17 16.5v5.17'/%3E%3Cpath d='M7.97 4.42A2 2 0 0 0 7 6.13v4.37l5 3 5-3V6.13a2 2 0 0 0-.97-1.71l-3-1.8a2 2 0 0 0-2.06 0l-3 1.8Z'/%3E%3Cpath d='M12 8 7.26 5.15'/%3E%3Cpath d='m12 8 4.74-2.85'/%3E%3Cpath d='M12 13.5V8'/%3E%3C/svg%3E");
--am-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v6l4 2'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
--am-ic-volume-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z'/%3E%3Cpath d='M16 9a5 5 0 0 1 0 6'/%3E%3Cpath d='M19.364 18.364a9 9 0 0 0 0-12.728'/%3E%3C/svg%3E");
--am-ic-banknote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='12' x='2' y='6' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Cpath d='M6 12h.01M18 12h.01'/%3E%3C/svg%3E");
--am-ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
--am-ic-chromium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.88 21.94 15.46 14'/%3E%3Cpath d='M21.17 8H12'/%3E%3Cpath d='M3.95 6.06 8.54 14'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E");
--am-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
--am-ic-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
--am-ic-crosshair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='22' x2='18' y1='12' y2='12'/%3E%3Cline x1='6' x2='2' y1='12' y2='12'/%3E%3Cline x1='12' x2='12' y1='6' y2='2'/%3E%3Cline x1='12' x2='12' y1='22' y2='18'/%3E%3C/svg%3E");
--am-ic-refresh-cw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3Cpath d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/%3E%3Cpath d='M8 16H3v5'/%3E%3C/svg%3E");
--am-ic-calculator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='16' height='20' x='4' y='2' rx='2'/%3E%3Cline x1='8' x2='16' y1='6' y2='6'/%3E%3Cline x1='16' x2='16' y1='14' y2='18'/%3E%3Cpath d='M16 10h.01'/%3E%3Cpath d='M12 10h.01'/%3E%3Cpath d='M8 10h.01'/%3E%3Cpath d='M12 14h.01'/%3E%3Cpath d='M8 14h.01'/%3E%3Cpath d='M12 18h.01'/%3E%3Cpath d='M8 18h.01'/%3E%3C/svg%3E");
--am-ic-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
--am-ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
--am-ic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
--am-ic-funnel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/%3E%3C/svg%3E");
--am-ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17v5'/%3E%3Cpath d='M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1z'/%3E%3C/svg%3E");
--am-ic-circle-question-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
--am-ic-shopping-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='21' r='1'/%3E%3Ccircle cx='19' cy='21' r='1'/%3E%3Cpath d='M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12'/%3E%3C/svg%3E");
--am-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
--am-ic-external-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E");
--am-ic-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Tool colours over the brand tokens. Dark is the default, html.light the
* overlay, as everywhere in OSDS. The head of a card (the % column and the
* event's two lines) stays a dark band in both themes, as ArbMate's always
* was; orange is kept for what is chosen and for links. Every text pair is
* measured >= 4.5:1 on its background. */
:root {
--am-tint: var(--surface-container); /* striped rows (the other rows: --surface) */
--am-team-bg: var(--surface-container-highest);
--am-team-text: var(--text);
--am-team-dim: var(--text-muted); /* 6.0 on the band */
--am-badge-bg: #222220;
--am-badge-text: var(--text);
--am-band-bg: var(--surface-container-high); /* the sport over a card */
--am-band-text: var(--text-muted);
}
html.light {
--am-tint: var(--surface-container-low);
--am-team-bg: #3b3b38;
--am-team-text: #ffffff;
--am-team-dim: #d0d0c9; /* 7.2 on the band */
--am-badge-bg: #262624;
--am-badge-text: #ffffff;
--am-band-bg: var(--surface-container);
--am-band-text: var(--text-muted); /* 6.5 */
}
/* ---- Page canvas ----------------------------------------------------- */
body.am-tool {
background-color: var(--bg);
color: var(--text);
font-family: var(--font-body);
}
body.am-tool button,
body.am-tool input,
body.am-tool select,
body.am-tool textarea { font-family: inherit; }
/* The tool's own links and focus; the chrome (header, drawer) keeps its own. :where() adds no specificity:
* a link that is a button or a menu row takes its colour from those rules below. */
/* The same colour named by class, for browsers without :where() (Chrome < 88: 14 of the tool's visitors in 14 days ran
Chrome 81, who saw Bootstrap's blue links): the tool's own links only, none of them a button or a menu row. */
a.single-outcome-nav,
.visit-bookie-container a,
#left-sidebar .text-center a,
.am-tool-dialog p a { color: var(--primary); }
:where(#application-wrapper, .am-tool-dialog) a:not(.btn) { color: var(--primary); text-decoration: none; }
:where(#application-wrapper, .am-tool-dialog) a:not(.btn):is(:hover, :focus-visible) { color: var(--primary); text-decoration: underline; }
:where(#application-wrapper, .am-tool-dialog) a.btn { text-decoration: none; }
#application-wrapper hr { border-top-color: var(--border); }
:where(#application-wrapper, .am-tool-dialog) :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
dialog.am-tool-dialog:focus,
dialog.am-tool-dialog:focus-visible { outline: none; }
/* ---- Layout (as before) ---------------------------------------------- */
header .container { width: 100% !important; }
.display-flex { display: flex; }
#contentWrapper { padding: 0 !important; }
#rightPanelWrapper { padding-left: 0 !important; }
@media (max-width: 992px) {
#wrapper-container { display: flex; flex-direction: column; }
#rightPanelWrapper { order: 1; }
#surebetWrapper { order: 2; }
.nopadding { padding: 0 !important; margin: 0 !important; }
}
#application-wrapper { padding-top: 15px; }
/* ---- Icons ------------------------------------------------------------
* One rule draws every icon: a box of 1em in the icon's font size, filled
* with its colour through the mask. The old glyphs were font characters of
* the same size, so every place keeps its spacing. */
.fa,
.glyphicon {
display: inline-block;
position: relative;
width: 1em;
height: 1em;
font-style: normal;
line-height: 1;
vertical-align: -0.125em;
background-color: currentColor;
-webkit-mask: var(--am-ic) center / contain no-repeat;
mask: var(--am-ic) center / contain no-repeat;
}
.fa::before,
.glyphicon::before { content: none; }
.fa-cogs { --am-ic: var(--am-ic-settings); }
.fa-check-square-o { --am-ic: var(--am-ic-square-check-big); }
.fa-flag { --am-ic: var(--am-ic-flag); }
.fa-cubes { --am-ic: var(--am-ic-boxes); }
.fa-clock-o { --am-ic: var(--am-ic-clock); }
.fa-volume-up { --am-ic: var(--am-ic-volume-2); }
.fa-money { --am-ic: var(--am-ic-banknote); }
.fa-eye { --am-ic: var(--am-ic-eye); }
.fa-chrome { --am-ic: var(--am-ic-chromium); }
.fa-info-circle { --am-ic: var(--am-ic-info); }
.fa-download { --am-ic: var(--am-ic-download); }
.fa-crosshairs { --am-ic: var(--am-ic-crosshair); }
.fa-refresh { --am-ic: var(--am-ic-refresh-cw); }
.fa-calculator { --am-ic: var(--am-ic-calculator); }
.glyphicon-minus { --am-ic: var(--am-ic-minus); }
.glyphicon-plus { --am-ic: var(--am-ic-plus); }
.glyphicon-remove { --am-ic: var(--am-ic-x); }
.glyphicon-filter { --am-ic: var(--am-ic-funnel); }
.glyphicon-pushpin { --am-ic: var(--am-ic-pin); }
.glyphicon-question-sign { --am-ic: var(--am-ic-circle-question-mark); }
.glyphicon-shopping-cart { --am-ic: var(--am-ic-shopping-cart); }
.glyphicon-ok { --am-ic: var(--am-ic-check); }
.glyphicon-new-window { --am-ic: var(--am-ic-external-link); }
/* .hidden / .invisible from the base layer keep winning over the display above */
.fa.hidden, .glyphicon.hidden { display: none !important; }
/* The odd moves: the old 7x6 px PNG arrows, drawn as triangles on the ![]()
* itself (its picture collapses to a 0 px box, the borders draw the arrow). */
img[src$="/img/app/arrow_up.png"],
img[src$="/img/app/arrow_down.png"] {
display: inline-block;
width: 0;
height: 0;
padding: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
vertical-align: middle;
overflow: hidden;
color: transparent;
font-size: 0;
}
img[src$="/img/app/arrow_up.png"] { border-bottom: 6px solid var(--status-ok); }
img[src$="/img/app/arrow_down.png"] { border-top: 6px solid var(--status-err); }
/* ---- Arbitrages ---------------------------------------------------------- */
#arbsNotification { margin-bottom: 20px; }
.notification {
box-shadow: var(--elev-2);
z-index: 2;
padding: 10px;
border-radius: var(--shape-xs);
}
.notification-info { color: var(--text); background-color: var(--surface-container-high); border-color: var(--border-strong); }
.notification-warning { color: #1d1206; background-color: var(--status-warn); border-color: var(--status-warn); }
.notification-error { color: #fff; background-color: #b84023; border-color: #b84023; }
.notification-invisible { display: none; }
.notification-visible { display: block; }
.pin-matchid {
float: right;
padding: 2px 5px 0 0;
cursor: pointer;
}
.progress .pin-matchid { margin-top: 3px; padding: 0; font-size: 12px; margin-right: 6px; }
#filterMatchByIdBox {
color: var(--text);
background-color: var(--surface-container-high);
border: 1px solid var(--primary-fill);
box-shadow: var(--elev-2);
z-index: 2;
padding: 10px;
border-radius: var(--shape-xs);
margin-bottom: 10px;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#filterMatchByIdBox .glyphicon-remove {
position: absolute;
top: 8px;
right: 8px;
cursor: pointer;
color: var(--text-muted);
}
#filterMatchByIdBox .glyphicon-remove:hover { color: var(--text); }
#filterMatchTeamNames { display: inline-block; font-weight: 700; }
#minMaxMatchFilter { display: inline-block; width: 100%; }
#minMaxMatchFilter * { display: inline-block; }
#minMaxMatchFilter .form-control { max-width: 70px; display: inline-block; margin: 5px; }
#surebetsHeader { display: none; }
.glyphicon-filter { top: 3px !important; }
.nowrap { display: flex; flex-wrap: nowrap; }
.dots-overflow {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: nowrap;
max-width: 100%;
width: auto;
}
.padding10-left { padding-left: 10px !important; }
.clear-paddings { padding-right: 0 !important; padding-left: 0 !important; }
.clear-padding-right { padding-right: 0 !important; }
.clear-padding-left { padding-left: 0 !important; }
.markers-wrapper { text-align: center; }
.odd-types, .hc-value { display: inline-block; }
/* The sport over each card: a quiet band; the chosen card's band is the
* brand orange (it was orange on every card, a darker orange when chosen). */
.arb-navbar { text-transform: uppercase; color: var(--am-band-text); }
.progress {
margin-bottom: 0 !important;
border-radius: 0 !important;
letter-spacing: 1px;
background-color: var(--am-band-bg);
box-shadow: none;
}
.progress-bar-warning,
.progress-bar-warning.progress-bar-striped { background-image: none; box-shadow: none; }
.progress-bar-warning {
background-color: var(--am-band-bg);
color: var(--am-band-text);
font-weight: 700;
font-size: 11px;
transition: background-color var(--t-fast), color var(--t-fast);
}
.progress-bar-warning.progress-bar-striped {
background-color: var(--primary-fill) !important;
color: var(--on-primary);
font-weight: 800 !important;
font-size: 12px !important;
}
.shadow-arb {
box-shadow: var(--elev-2);
border: 1px solid var(--primary-fill) !important;
}
.padding-left-sm { padding-left: 15px; }
.matchBox {
padding-left: 15px;
padding-right: 15px;
background-color: var(--am-badge-bg);
color: var(--am-badge-text);
}
.matchBox * { color: var(--am-badge-text); }
.row.teamsBox { display: flex; flex-direction: row; }
.surebetOddPart { display: flex; flex-direction: row; }
.filter-odds-container { width: 24px; }
.filter-dropdown-icon-container { min-width: 18px; max-width: 18px; color: var(--text-muted); }
.teamsBox .filter-dropdown-icon-container { color: var(--am-team-dim); }
.hidden-filter { display: none; }
.shadow-arb .hidden-filter { display: inline-block; }
.surebetTable:hover .hidden-filter { display: inline-block; }
.show-all-filters .hidden-filter { display: inline-block; }
.padding-odd-label { padding-left: 24px; }
.padding-bookmakers-label { padding-left: 15px; }
.odds-cancel-padding { padding-right: 10px; }
.surebetTable {
border: 1px solid var(--border-strong);
margin-bottom: 5px;
background-color: var(--surface);
}
.surebetBookmakerRow label { font-weight: normal; }
.white { color: var(--text); font-weight: normal; }
div.black * { color: var(--text); font-weight: normal; }
div.green * { color: var(--status-ok-text); font-weight: normal; }
div.dateAndTime { color: var(--am-team-dim); }
.filter-x-normal { color: var(--text-dim); }
.odd-up { color: var(--status-ok-text); }
.odd-down { color: var(--status-err-text); }
.teamsBox { background-color: var(--am-team-bg); }
.teamsBox .white,
.teamsBox label { color: var(--am-team-text); }
.teamsBox .matchBox,
.teamsBox .matchBox * { color: var(--am-badge-text); }
.matchBox-start { background-color: #b84023; }
.matchBox-start,
.matchBox-start * { color: #fff !important; }
.header { background-color: var(--surface-container-high); }
.header.white,
.header.white * { color: var(--text-muted); }
.header .matchBox,
.header .matchBox * { color: var(--am-badge-text); }
.oddRow { background-color: var(--am-tint); }
.evenRow { background-color: var(--surface); }
.settings-bgr { background-color: var(--surface-container-low); }
.bookies-footer { background-color: var(--surface-container); }
.bookies-footer,
.bookies-footer label { color: var(--text-muted); font-weight: 600; }
/* The filter menu a bookmaker / event / league / odd opens */
.drop-down-visible { position: fixed; display: block; }
.drop-down-invisible { display: none; }
.handCursor { cursor: pointer; }
.handCursor:hover { color: var(--primary); }
/* Tooltips: the tool places #tooltip-span itself; it looks like the OSDS tip. */
.tooltip > .tooltip-inner {
border: 1px solid var(--border-strong) !important;
background-color: var(--surface-container-highest);
color: var(--text);
border-radius: var(--shape-xs);
}
.tooltip.in { opacity: 1 !important; }
#tooltip-span {
border: 1px solid var(--border-strong);
background-color: var(--surface-container-highest);
color: var(--text);
border-radius: var(--shape-xs);
box-shadow: var(--elev-2);
font-size: 12px;
line-height: 1.42857143;
max-width: 200px;
width: 100%;
height: auto;
text-align: center;
padding: 5px 8px;
transition: opacity .15s linear;
position: fixed;
z-index: 1027;
display: none;
opacity: 1;
}
#tooltip-bottom-arrow {
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: var(--surface-container-highest) transparent transparent transparent;
}
.starting-soon {
background-color: #b84023;
color: #fff;
font-weight: bold;
font-size: 14px;
padding: 5px 15px;
}
#fitlerOptions { position: fixed; }
/* ---- Calculator ----------------------------------------------------------- */
#calculator-body {
margin-bottom: 30px;
border: 1px solid var(--border-strong);
background-color: var(--surface);
}
.calculatorHeaders { background-color: var(--surface-container-high); }
.calculatorHeaders.white,
.calculatorHeaders.white label,
.calculatorHeaders .white { color: var(--text); font-weight: 700; }
.bordered-calc-total {
border: 1px solid var(--border-strong);
padding: 5px 0;
font-size: 12px;
line-height: 1.5;
border-radius: var(--shape-xs);
min-height: 30px;
background-color: var(--surface-container-low);
color: var(--text);
}
.calc-summary {
text-align: center;
background-color: var(--surface-container-high);
color: var(--text-muted);
font-weight: bold;
}
.calc-arbitrage-positive { color: var(--status-ok-text); font-weight: 800; }
.calc-arbitrage-negative { color: var(--status-err-text); font-weight: 800; }
#legs .legRow { padding-top: 3px !important; padding-bottom: 3px; }
#legs .legOddTypeWrap { padding-top: 4px; }
#expired-arbitrage-message {
background-color: #b84023;
color: #fff;
font-weight: bold;
font-size: 16px;
padding: 5px 15px;
}
.middles-condition { padding: 3px 15px; color: var(--text-muted); }
#calculator-footer {
background-color: var(--surface-container-low);
padding: 5px 15px;
font-size: 21px;
vertical-align: bottom;
color: var(--text-muted);
border-top: 1px solid var(--border);
}
#calculator-footer .fa { cursor: pointer; }
#calculator-footer .fa:hover { color: var(--primary); }
#calculator-footer .fa-crosshairs { font-size: 24px; vertical-align: bottom; }
#calculator-footer .fa-refresh { font-size: 22px; vertical-align: middle; margin-left: 4px; }
#calculator-footer .fa-calculator { margin-left: 9px; vertical-align: middle; }
#calculator-footer .fa-download { font-size: 22px; vertical-align: middle; }
.stakeInput { border-color: var(--primary-fill); }
.stakeInput.deselected { border-color: var(--border-strong); box-shadow: none; }
@media (max-width: 1200px) {
#legs .legRow input.form-control,
#legs .legRow select.form-control { padding: 0 0 0 2px !important; }
}
/* ---- Outcomes ------------------------------------------------------------- */
#outcomesHeader { padding-left: 15px; padding-right: 15px; }
#selectedSurebetData { margin-bottom: 15px; }
.outcomes-collapse { padding-left: 15px; padding-right: 15px; }
.outcome-odd { display: inline-block; float: left; padding-right: 3px; }
.outcome-arrow { display: inline-block; float: left; }
.outcome-bookmaker { display: inline-block; }
.outcome-bookmaker label { font-weight: normal; }
.outcome-filter-odd { display: inline-block; float: right; }
.oddRow,
.evenRow { padding-top: 0; padding-bottom: 0; }
.filter-elipsis {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: nowrap;
}
.filter-diaplay-inline { display: inline-block; }
.filter-float-right { float: right; padding-right: 15px !important; display: inline-block; }
.outcome-period { float: right; }
#oddHistoryWrapper { padding-left: 0 !important; }
#outcomesAccordion,
#oddHistoryContent {
border-left: 1px solid var(--border-strong);
border-bottom: 1px solid var(--border-strong);
border-right: 1px solid var(--border-strong);
background-color: var(--surface);
}
#outcomesAccordion .oddRow,
#outcomesAccordion .evenRow { padding: 0 !important; }
#outcomesAccordion .outcomes-row,
#outcomesAccordion .expandRow { padding-left: 15px; padding-right: 15px; }
#outcomesAccordion .oddsTableRow:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
#outcomesAccordion .oddsTableRow.selected .outcome-bookmaker { color: var(--primary); }
.expandLabel { float: left; padding-left: 5px; color: var(--text-muted); }
#outcomeOdd { display: none; }
.outcome-bookmaker .fa-calculator { color: var(--text-muted); }
.outcome-bookmaker .fa-calculator:hover { color: var(--primary); }
@media (max-width: 992px) {
#outcomesAndOddHistory {
margin-right: 0 !important;
margin-left: 0 !important;
border-bottom: 1px solid var(--border-strong);
}
#outcomesAccordionWrapper,
#oddHistoryWrapper { padding-left: 0 !important; padding-right: 0 !important; }
#outcomesAccordionWrapper { border-right: 1px solid var(--border-strong); }
}
@media (max-width: 768px) {
#outcomesAccordionWrapper { border-right: none; }
#outcomesAccordionWrapper .expandRow { margin-right: 0; }
#outcomesAccordionWrapper .outcomes-row { margin-right: 0; padding-right: 0; }
#outcomesAccordionWrapper .outcomes-row .clear-padding-left { margin-right: 0; }
}
/* ---- Odd history ----------------------------------------------------------- */
#outcomesAndOddHistory label { margin-bottom: 0 !important; }
#oddHistoryUpdateTime { position: absolute; right: 5px; padding-right: 15px; }
.oddhistory { display: inline-block; }
/* ---- Quick filters ----------------------------------------------------------- */
#filtersHeader { position: relative; }
#filtersWrapper { margin-bottom: 20px; }
#filtersWrapper .filtersTable { border: 1px solid var(--border-strong); }
.filtersTable { background-color: var(--surface); }
.remove-row-margin-filter { margin-left: 0 !important; margin-right: 0 !important; }
#filtersAccordion .filtersTable .row.header { padding-left: 15px; }
.filters-wrapper.bordered-grey { border-color: var(--border-strong); }
#outcomesHeader .outcome-filter-collapse { left: 20px; }
@media (max-width: 992px) {
#outcomesHeader { padding-left: 0; }
#outcomesHeader .outcome-filter-collapse { left: 5px; }
}
/* The fold buttons of Outcomes, Odd History and Quick Filters: the OSDS
* chevron, down when open, right when folded (the tool swaps - and +). */
.outcome-filter-collapse {
position: absolute;
z-index: 1;
left: 5px;
top: 5px;
font-size: 12px;
color: var(--text-muted);
--am-ic: var(--am-ic-chevron-down) !important;
transition: transform var(--t-fast);
}
.outcome-filter-collapse.glyphicon-plus { transform: rotate(-90deg); }
.outcome-filter-collapse:hover { color: var(--text); }
.additional-filters-header label { margin-bottom: 0; }
.glyphicon-minus:hover,
.glyphicon-plus:hover { cursor: pointer; }
.bordered-grey { border-color: var(--border-strong); }
/* ---- Settings: the panel the icon row opens ---------------------------------- */
#overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
z-index: 10;
display: none;
}
#app-top-nav-icons .nav-tabs { border-bottom: none !important; }
#app-top-nav-icons .nav-tabs a {
padding: 0 !important;
border: 0 !important;
background: none !important;
color: var(--text-muted);
}
#app-top-nav-icons .nav-tabs li.active a { color: var(--primary) !important; }
#app-top-nav-icons {
padding-top: 2px;
color: var(--text-muted);
float: left;
position: relative;
z-index: 12;
}
#app-top-nav-icons i {
margin-right: 20px;
font-size: 22px;
cursor: pointer;
transition: color var(--t-fast);
}
#app-top-nav-icons a:hover i { color: var(--text); }
#app-top-nav-icons li.active i { color: var(--primary); }
#app-top-nav-icons #settings-chrome { font-size: 21px; }
#left-sidebar {
position: absolute;
left: -290px;
top: 0;
bottom: 0;
max-width: 270px;
min-width: 270px;
background-color: var(--surface-container-low);
z-index: 12;
box-shadow: var(--elev-3);
border-right: 1px solid var(--border-strong);
overflow-y: auto;
overflow-x: hidden;
min-height: 200px;
color: var(--text);
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
#left-sidebar.active { left: 0; }
#left-sidebar .heading {
line-height: 26px;
border-bottom: 1px solid var(--border);
padding-bottom: 5px;
position: relative;
font-size: 16px;
font-weight: 800;
text-transform: uppercase;
margin: 20px 0;
}
#left-sidebar .heading::after {
background: var(--primary-fill) !important;
width: 48px;
height: 2px;
display: block;
position: absolute;
content: '';
bottom: -1px;
}
#left-sidebar .header-text { color: var(--primary); letter-spacing: 1px; }
.filterHeader {
font-weight: 800;
font-size: 15px;
margin-top: 11px;
margin-bottom: 2px;
}
.filterHeader + .fa-info-circle { color: var(--text-muted); font-size: 14px; margin-left: 2px; }
.settings-padding-top { padding-top: 7px; }
.filter-top-padding { padding-top: 20px; }
#save_settings,
#reset_settings { margin-bottom: 20px; height: 30px; }
#save_settings .glyphicon-ok,
#reset_settings .glyphicon-ok { color: var(--status-ok-text) !important; }
#left-sidebar small,
#left-sidebar small em { color: var(--text-muted); }
/* - value + : the OSDS stepper (the - and + were a red and a green button) */
.plus-minus-toggle { display: table; width: 100%; }
.el-input-toggle { display: table-cell; height: 30px; }
.minus-button,
.plus-button {
color: var(--text);
background-color: var(--surface-container-high);
border: 1px solid var(--border-strong);
font-size: 16px;
font-weight: 700;
vertical-align: middle;
cursor: pointer;
text-align: center;
width: 30px;
user-select: none;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.minus-button { border-radius: var(--shape-xs) 0 0 var(--shape-xs); border-right: none; }
.plus-button { border-radius: 0 var(--shape-xs) var(--shape-xs) 0; border-left: none; }
.minus-button:hover,
.plus-button:hover { background-color: var(--surface-container-highest); border-color: var(--primary); }
.middle-input {
width: 100%;
color: var(--text);
background-color: var(--surface-container);
padding: 0 12px;
border: 1px solid var(--border-strong);
height: 32px;
border-radius: 0;
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.middle-input:focus { outline: none; border-color: var(--primary); box-shadow: var(--focus-ring); position: relative; z-index: 1; }
.middle-input[disabled] { color: var(--text-dim); background-color: var(--surface-container-low); }
.middle-input::-webkit-inner-spin-button,
.middle-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prefix-text {
white-space: nowrap;
line-height: 30px;
border: 1px solid var(--border-strong);
border-left: none;
border-right: none;
background-color: var(--surface-container-low);
color: var(--text-muted);
text-align: center;
padding: 0 12px;
}
.postfix-min-width { min-width: 70px; }
/* On / off: the OSDS switch (same box, 44 x 20) */
.switch { display: inline-block; float: right; }
.lbl {
position: relative;
display: block;
height: 20px;
width: 44px;
background: var(--surface-container-highest);
border: 1px solid var(--border-strong);
border-radius: 100px;
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.lbl::after {
position: absolute;
left: 1px;
top: 1px;
display: block;
width: 16px;
height: 16px;
border-radius: 100px;
background: var(--text-muted);
box-shadow: var(--elev-1);
content: '';
transition: left var(--t-fast), background-color var(--t-fast);
}
.cbx:checked ~ label { background: var(--primary-fill); border-color: var(--primary-fill); }
.cbx:checked ~ label::after { left: 25px; background: var(--on-primary); }
.cbx:disabled ~ label { opacity: .45; pointer-events: none; }
.cbx:focus-visible ~ label { box-shadow: var(--focus-ring); }
/* the pin switch of the panel carries a pin on its knob */
.pinbar .lbl::after,
.pinbar .cbx:checked ~ label::after {
-webkit-mask: none;
background-image: none;
}
.pinbar .lbl::before {
content: '';
position: absolute;
z-index: 1;
left: 4px;
top: 4px;
width: 10px;
height: 10px;
background-color: var(--surface-container-low);
-webkit-mask: var(--am-ic-pin) center / contain no-repeat;
mask: var(--am-ic-pin) center / contain no-repeat;
transition: left var(--t-fast), background-color var(--t-fast);
pointer-events: none;
}
.pinbar .cbx:checked ~ label::before { left: 28px; background-color: var(--primary-fill); }
/* ---- Bookmakers / leagues / markets / periods lists ---------------------------- */
#bookiesTable {
max-height: 250px;
padding-right: 15px;
margin-bottom: 5px;
}
#bookiesTable label {
margin: 0 !important;
font-weight: normal;
letter-spacing: .3px;
cursor: pointer;
}
.bookmakerNameWrapper { padding: 3px 5px !important; width: 100%; }
.bookmakerName { max-width: 137px; }
.bookmakerName.bookie-down { color: var(--status-err-text); }
.bookmakerName.disabled { color: var(--text-dim); }
.collapse-bookie-submenu .caret { color: var(--text-muted); }
/* The checkbox: OSDS look on the same 20 px box */
.md-checkbox { position: relative; }
.md-checkbox label::before,
.md-checkbox label::after {
content: "";
position: absolute;
left: 0;
top: 0;
}
.md-checkbox label::before {
width: 20px;
height: 20px;
background: var(--surface-container);
border: 1.5px solid var(--border-strong);
border-radius: 5px;
cursor: pointer;
transition: background-color var(--t-fast), border-color var(--t-fast);
}
.md-checkbox input[type="checkbox"] {
outline: 0;
cursor: pointer;
margin-right: 15px;
visibility: hidden;
}
.md-checkbox input[type="checkbox"]:checked + label::before,
.md-checkbox input:indeterminate + label::before,
.md-checkbox input.indeterminate + label::before {
background: var(--primary-fill);
border-color: var(--primary-fill);
}
.md-checkbox input[type="checkbox"]:checked + label::after {
transform: rotate(-45deg);
top: 5px;
left: 4px;
width: 12px;
height: 6px;
border: 2px solid var(--on-primary);
border-top-style: none;
border-right-style: none;
cursor: pointer;
}
.md-checkbox input:indeterminate + label::after,
.md-checkbox input.indeterminate + label::after {
background: var(--on-primary);
border: none;
height: 10px;
width: 10px;
top: 5px;
left: 5px;
cursor: pointer;
border-radius: 2px;
box-shadow: none;
}
.md-checkbox input[type="checkbox"]:disabled + label::before { opacity: .45; }
.md-checkbox input[type="checkbox"]:disabled:checked + label::before,
.md-checkbox input:indeterminate:disabled + label::before { background: var(--text-dim); border-color: var(--text-dim); }
/* The brand orange (--primary-fill, the same in both themes) at 16 %. Not color-mix(): it is Chrome 111+ / Safari 16.2+
(Chrome 102 and 106 still run the tool), and with a var() inside, an older browser keeps the declaration and turns it
into "no colour" when it computes it, so a fallback before it never shows. */
tr.bookieFilter.selected { background-color: rgba(247, 160, 33, .16); }
/* Search over bookmakers / leagues */
#seachForBookiesInputWrapper,
#seachForLeaguesInputWrapper { position: relative; width: 100%; }
#input-highlight,
#input-highlight2 {
font-size: 14px;
user-select: none;
line-height: 20px;
position: absolute;
left: 0;
bottom: 0;
max-width: 100%;
height: 0;
color: transparent;
overflow: hidden;
font-weight: normal;
}
#seachForBookiesInput,
#seachForLeaguesInput {
height: 20px;
width: 100%;
min-width: 100%;
padding: 0;
border-radius: 0;
line-height: 20px;
background-color: transparent;
color: var(--text);
font-size: 14px;
border: none;
font-weight: normal;
outline: none;
border-bottom: 1px solid var(--border-strong);
}
#seachForBookiesInput::placeholder,
#seachForLeaguesInput::placeholder { color: var(--text-dim); opacity: 1; }
#seachForBookiesInput:focus + #input-highlight,
#seachForLeaguesInput:focus + #input-highlight2 { border-top: 2px solid var(--primary-fill); }
#bookiesTableBody,
#bookiesTableBody .bookieFilter,
#bookiesTableBody .bookmakerNameWrapper { display: inline-block; width: 100%; }
.bookieInnerTable { background-color: transparent !important; margin-bottom: 0; }
.bookieInnerTable tr > td { border-top: none !important; padding: 0 !important; width: 100%; }
.bookmaker-commission-container { margin-top: 3px; margin-bottom: 3px; }
.visit-bookie-container { text-align: right; margin-top: 3px; }
.collapse-bookie-submenu { text-align: right; cursor: pointer; }
#leaguesTable { max-height: 300px; padding-right: 15px; margin-bottom: 5px; }
.leagueName { width: 165px; display: inline-block; }
.tournamentName { font-size: 12px; color: var(--text-muted); font-style: italic; }
#settings-leagues-check { font-size: 21px !important; }
#settings-markets-filter { font-size: 21px !important; }
#marketGoalsTable,
#marketCornersTable { max-height: 212px; padding-right: 15px; margin-bottom: 5px; }
.marketGoalsName,
.marketCornersName { width: 165px; display: inline-block; }
.all-markets { margin-left: 5px; }
#currency-settings-wrapper table { max-height: 310px; }
/* The legend under the lists: "must exist" / "show odds" */
.mustExistIconWrapper { font-size: 11px; color: var(--text-muted); }
.mustExistIcon,
.showOddsIcon { position: relative; padding-right: 12px; }
.mustExistIcon::before,
.showOddsIcon::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 10px;
color: transparent;
height: 10px;
background-color: var(--primary-fill);
border-radius: 2px;
}
.mustExistIcon::after {
content: "";
position: absolute;
background: var(--on-primary);
height: 6px;
width: 6px;
top: 2px;
left: 2px;
}
.showOddsIcon::after {
content: "";
position: absolute;
transform: rotate(-45deg);
top: 3px;
left: 2px;
width: 6px;
height: 3px;
border: 1px solid var(--on-primary);
border-top-style: none;
border-right-style: none;
}
/* Scroll areas */
.scrollbar {
display: inline-block;
height: 100%;
overflow-y: scroll;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
.force-overflow { min-height: 250px; }
#contentWrapper,
#outcomesAccordion,
#oddHistoryContent,
#filtersWrapper,
#rightPanelWrapper,
#afterCalcWrapper {
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: var(--border-strong) transparent;
}
/* ---- Bootstrap pieces, OSDS look ------------------------------------------------ */
body.am-tool .form-control {
background-color: var(--surface-container);
border-color: var(--border-strong);
color: var(--text);
border-radius: var(--shape-xs);
box-shadow: none;
}
body.am-tool .form-control:focus {
border-color: var(--primary);
box-shadow: var(--focus-ring);
outline: none;
}
body.am-tool .form-control::placeholder { color: var(--text-dim); opacity: 1; }
body.am-tool .form-control[readonly],
body.am-tool .form-control[disabled] {
background-color: var(--surface-container-low);
color: var(--text-muted);
opacity: 1;
}
body.am-tool select.form-control { color-scheme: inherit; }
body.am-tool .input-group-addon {
background-color: var(--surface-container-low);
border-color: var(--border-strong);
color: var(--text-muted);
border-radius: 0 var(--shape-xs) var(--shape-xs) 0;
}
body.am-tool .input-group .form-control:first-child { border-radius: var(--shape-xs) 0 0 var(--shape-xs); }
body.am-tool .table > tbody > tr > td { border-color: var(--border); }
body.am-tool .table { background-color: transparent; color: var(--text); }
/* Buttons: the old Bootstrap sizes, OSDS colours and corners */
body.am-tool .btn {
border-radius: var(--shape-pill);
font-weight: 700;
transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
body.am-tool .btn-warning,
body.am-tool input.btn-warning {
background: var(--brand-gradient);
border-color: transparent;
color: var(--on-primary);
}
body.am-tool .btn-warning:hover,
body.am-tool .btn-warning:focus { filter: brightness(1.06); color: var(--on-primary); }
body.am-tool input.btn-warning.form-control { border-radius: var(--shape-pill); font-weight: 700; cursor: pointer; }
body.am-tool .btn-default {
background-color: var(--surface-container);
border-color: var(--border-strong);
color: var(--text);
}
body.am-tool .btn-default:hover,
body.am-tool .btn-default:focus { background-color: var(--surface-container-high); border-color: var(--primary); color: var(--text); }
body.am-tool .btn-danger {
background-color: #b84023;
border-color: #b84023;
color: #fff;
}
body.am-tool .btn-danger:hover,
body.am-tool .btn-danger:focus { background-color: #9e351c; border-color: #9e351c; color: #fff; }
body.am-tool .btn-success {
background: var(--brand-gradient);
border-color: transparent;
color: var(--on-primary);
}
body.am-tool .btn[disabled],
body.am-tool .btn.disabled { opacity: .45; filter: none; }
/* The filter menu and other Bootstrap dropdown menus: the OSDS popover */
body.am-tool .dropdown-menu {
background-color: var(--surface-container-high);
border: 1px solid var(--border-strong);
border-radius: var(--shape-sm);
box-shadow: var(--elev-2);
color: var(--text);
padding: 5px 0;
}
body.am-tool .dropdown-menu > li > a { color: var(--text); padding: 5px 16px; }
body.am-tool .dropdown-menu > li > a:hover,
body.am-tool .dropdown-menu > li > a:focus {
background-color: rgba(247, 160, 33, .14); /* the brand orange at 14 %; not color-mix(), see tr.bookieFilter.selected */
color: var(--text);
text-decoration: none;
}
body.am-tool .caret { border-top-color: currentColor; }
/* ---- Dialogs: native