/* TOKENS * * The sidebar palette. Nesting goes DOWN in lightness (a submenu is a well cut * into the rail, not a layer floating above it) and the accent has exactly one * meaning: "you are here". Everything below consumes these — no bare hex. */ .purple-skin { --wa-side-bg: #473B88; /* the rail */ --wa-side-hover: #584BA5; /* hover — lighter, raised */ --wa-side-sunken: #3B3072; /* open section + its submenu — darker, recessed */ --wa-side-accent: #E08FE8; /* current page / current section only */ --wa-side-accent-dim: rgba(224, 143, 232, 0.45); --wa-side-focus: #CFC9F5; /* focus ring, used for nothing else */ --wa-side-fg: rgba(255, 255, 255, 0.86); --wa-side-fg-muted: rgba(255, 255, 255, 0.72); --wa-side-icon: rgba(255, 255, 255, 0.74); --wa-side-tint: rgba(255, 255, 255, 0.09); --wa-side-rule: rgba(255, 255, 255, 0.14); --wa-side-speed: 0.14s; } /* LAYOUT */ .purple-skin .main-header .navbar { background-color: #473B88; } .purple-skin .content h3 { margin-top: 0; } .purple-skin .main-header .logo { color: #ffffff; background-color: #69619F; } .purple-skin .main-header li.user-header { background-color: #605ca8; } .purple-skin .main-header .logo:hover { background-color: #69619F; text-decoration: underline; } .purple-skin .sidebar a { color: #ffffff; } .purple-skin .main-header .navbar .nav>li>a { color: #ffffff; background-color: #69619F; } .purple-skin .main-header .sidebar-toggle { color: #ffffff; background-color: #473B88; } .purple-skin .main-header .navbar .sidebar-toggle:hover, .purple-skin .main-header .navbar .sidebar-toggle:focus, .purple-skin .main-header .navbar .sidebar-toggle:active { background-color: #524990; } .purple-skin .main-header .navbar .nav>li>a:hover, .purple-skin .main-header .navbar .nav>li>a:active, .purple-skin .main-header .navbar .nav>li>a:focus, .purple-skin .main-header .navbar .nav .open>a, .purple-skin .main-header .navbar .nav .open>a:hover, .purple-skin .main-header .navbar .nav .open>a:focus, .purple-skin .main-header .navbar .nav>.active>a { color: #ffffff; text-decoration: underline; background-color: #524990; } .purple-skin .main-sidebar { background-color: var(--wa-side-bg); } @media (min-width: 768px) { .purple-skin .main-sidebar { height: auto; position: absolute; top: 0; } /* The collapsed rail cannot be a scroll container: its hover flyouts * (label and submenu below) are absolutely positioned at left:50px, i.e. * outside the 50px rail, and any overflow other than visible clips them. * It stays in flow and scrolls with the page, as it does today. */ .purple-skin .sidebar { height: auto; overflow: visible; } /* SCROLLPORT - expanded rail only * * Without this the rail scrolls away with the page, so with ~25 sections * the bottom of the menu is always below the fold and reaching it means * scrolling the content. Worse, AdminLTE's layout.fix() (app-default.js) * forces `.content-wrapper { min-height: }` whenever the * menu is taller than the viewport - a long menu makes every short page * artificially tall. * * Fixed rather than sticky, deliberately: `body > .wrapper` is * overflow:hidden (css/layout/layout.css) and app-default.js sets its * height to auto at runtime, so the document is the scroller and a sticky * child would be trapped by that overflow and never activate. * * Only the rail is touched - keeps its layout, so the header * behaves as it always has on every page. .main-header is already * z-index 1030 against the sidebar's 810, so it covers the rail's 50px top * padding while it is on screen and the rail's own background fills that * strip once it scrolls away. * * Desktop only: below 768px AdminLTE runs the off-canvas layout, which * slides .main-sidebar by transform and sets its own padding-top. * * accordion.tpl drives .sidebar.scrollTop directly - restoring the current * item into view on load and keeping the position across navigation - and * both are inert unless the rail is a scroll container. */ .purple-skin:not(.sidebar-collapse) .main-sidebar { height: 100vh; position: fixed; } /* .main-sidebar carries padding-top:50px and border-box sizing, so 100% * here resolves to the viewport minus the header */ .purple-skin:not(.sidebar-collapse) .sidebar { height: 100%; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .purple-skin.sidebar-mini.sidebar-collapse .menu-search-form { display: none; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu, .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu:hover, .purple-skin.sidebar-mini.sidebar-collapse .sidebar.menu-search-active .sidebar-menu, .purple-skin.sidebar-mini.sidebar-collapse .sidebar.menu-search-active .sidebar-menu:hover { overflow: visible; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li > a { align-items: center; border-left: 0; box-sizing: border-box; display: flex; height: 44px; justify-content: center; min-height: 44px; padding: 0; position: relative; text-align: center; width: 50px; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .navigation-icon { background: transparent !important; display: inline-block !important; flex: 0 0 14px !important; height: 14px !important; left: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; top: auto !important; width: 14px !important; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right-container):not(.navigation-icon) { background-color: var(--wa-side-hover); display: block !important; left: 50px; margin-left: 0; padding: 12px 12px 12px 20px; position: absolute; text-align: left; top: 0; width: 180px; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu { background: var(--wa-side-sunken); display: block !important; left: 50px; margin-left: 0; overflow-y: auto; position: absolute; top: 44px; width: 180px; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-flyout-up:hover > .treeview-menu { border-bottom-right-radius: 0; border-top-right-radius: 4px; bottom: 44px; top: auto; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li.menu-flyout-up:hover > a > span:not(.pull-right-container):not(.navigation-icon) { border-bottom-right-radius: 4px; border-top-right-radius: 0; } .purple-skin.sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container { display: none !important; } } /* a dark panel with the default light OS scrollbar reads as broken */ .purple-skin .sidebar { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) transparent; } .purple-skin .sidebar::-webkit-scrollbar { width: 8px; } .purple-skin .sidebar::-webkit-scrollbar-track { background: transparent; } .purple-skin .sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.24); border-radius: 4px; } .purple-skin .sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.36); } /* SEARCH * * Was a full-bleed 35px stripe with no border, radius or icon, lighter than the * rail — so it read as a raised plate rather than a field, and its only focus * feedback was a background shift measuring 1.18:1. Now a recessed well with a * real ring. The input sits at top 8px and is 32px tall, so everything anchored * to its centre uses top: 24px. */ .purple-skin .menu-search-form { margin: 0; padding: 8px 10px; position: relative; } /* the magnifier is an inline SVG data-URI: the field must not depend on the * FontAwesome CDN in lte.tpl to look like a search box */ .purple-skin .menu-search-form::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Ccircle cx='6' cy='6' r='4.2'/%3E%3Cpath d='M9.2 9.2L12.5 12.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat; content: ""; height: 14px; left: 20px; opacity: 0.66; pointer-events: none; position: absolute; top: 17px; width: 14px; } .purple-skin .menu-search-input { -webkit-appearance: none; appearance: none; background-color: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; box-sizing: border-box; box-shadow: none; color: #ffffff; display: block; font-size: 14px; height: 32px; margin: 0; outline: none; padding: 0 62px 0 30px; transition: background-color var(--wa-side-speed) ease, border-color var(--wa-side-speed) ease, box-shadow var(--wa-side-speed) ease; width: 100%; } /* once there is a value the shortcut chip is replaced by the clear button, so * the text no longer floats in a gutter sized for two key caps */ .purple-skin .menu-search-form.menu-search-has-value .menu-search-input { padding-right: 34px; } .purple-skin .menu-search-input::placeholder { color: rgba(255, 255, 255, 0.62); } .purple-skin .menu-search-input:focus { background-color: rgba(0, 0, 0, 0.3); border-color: var(--wa-side-focus); box-shadow: 0 0 0 2px rgba(207, 201, 245, 0.28); color: #ffffff; outline: none; } /* two real key caps instead of the literal string "(⌘ K)" rendered inside one * bordered box — the parentheses used to sit inside the cap */ .purple-skin .menu-search-shortcut { display: flex; gap: 3px; pointer-events: none; position: absolute; right: 19px; top: 24px; transform: translateY(-50%); } .purple-skin .menu-search-shortcut kbd { background-color: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 3px; box-shadow: none; color: rgba(255, 255, 255, 0.9); font-family: inherit; font-size: 10px; line-height: 15px; min-width: 15px; padding: 0 3px; text-align: center; } .purple-skin .menu-search-form.menu-search-has-value .menu-search-shortcut { display: none; } /* Escape was the only way out of a filtered menu, and nothing on screen said so */ .purple-skin .menu-search-clear { background: none; border: 0; border-radius: 3px; color: var(--wa-side-fg-muted); cursor: pointer; display: none; height: 20px; line-height: 20px; padding: 0; position: absolute; right: 17px; text-align: center; top: 14px; transition: color var(--wa-side-speed) ease; width: 20px; } .purple-skin .menu-search-clear::before { content: "\00d7"; font-size: 18px; } .purple-skin .menu-search-form.menu-search-has-value .menu-search-clear { display: block; } .purple-skin .menu-search-clear:hover, .purple-skin .menu-search-clear:focus { color: #ffffff; } /* a query with no hits used to leave an empty purple column and no words */ .purple-skin .menu-search-status { color: var(--wa-side-fg-muted); display: none; font-size: 12px; line-height: 14px; padding: 6px 2px 0; } .purple-skin .menu-search-status.menu-search-status-visible { display: block; } /* the matched substring: a solid accent chip reads at 5.00:1 against the * submenu, where a translucent wash would have sat near 1.7:1 */ .purple-skin .menu-search-hit { background: var(--wa-side-accent); border-radius: 2px; color: var(--wa-side-sunken); padding: 0 1px; } /* filterMenuSections marks every matching section .active, which is the * current-page costume — during a search eight sections wore it at once. * Keep the opened look, drop the accent. */ .purple-skin .sidebar-menu > li.menu-search-expanded.active > a { background: var(--wa-side-sunken); border-left-color: transparent; } .purple-skin .sidebar.menu-search-active { max-height: calc(100vh - 50px); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { .purple-skin .sidebar.menu-search-active { max-height: calc(100vh - 100px); } /* no hardware keyboard to press ⌘K on, but the clear button still needs room */ .purple-skin .menu-search-input { padding-right: 34px; } .purple-skin .menu-search-shortcut { display: none; } } .purple-skin .sidebar.menu-search-active .sidebar-menu, .purple-skin .sidebar.menu-search-active .sidebar-menu:hover { overflow: hidden; } /* SECTIONS * * flex, not inline-block: whitespace-only text nodes never become flex items, * so the phantom ~4px space the template leaves between the icon and the * label disappears and the label edge lands on an exact 40px * (3px accent + 15px padding + 14px icon + 8px gap) — the same edge the leaf * links below are aligned to. */ .purple-skin .sidebar-menu > li > a { align-items: center; color: #ffffff; display: flex; font-size: 14px; font-weight: 600; gap: 8px; letter-spacing: 0.2px; line-height: 20px; padding: 10px 34px 10px 11px; } .purple-skin .sidebar-menu > li > a > .navigation-icon, .purple-skin .sidebar-menu > li > a > .recent-menu-icon { flex: 0 0 14px; margin: 0; } /* the label is the only flexible item: the icon must keep its 14px basis, and * .navigation-icon is itself a , so it has to be excluded explicitly — * otherwise this rule outranks the icon's own flex declaration and stretches it */ .purple-skin .sidebar-menu > li > a > span:not(.pull-right-container):not(.navigation-icon) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purple-skin .sidebar-menu > li > a > .navigation-icon { color: var(--wa-side-icon); } .purple-skin .sidebar-menu > li:hover > a { background-color: var(--wa-side-hover); border-left-color: var(--wa-side-accent-dim); } .purple-skin .sidebar-menu > li.active > a { background: var(--wa-side-sunken); border-left-color: var(--wa-side-accent); } .purple-skin .sidebar-menu > li:hover > a > .navigation-icon, .purple-skin .sidebar-menu > li.active > a > .navigation-icon { color: #ffffff; } /* Long labels used to be cut mid-glyph, and hovering anywhere in the menu let * AdminLTE's `.sidebar-menu:hover { overflow: visible }` spill them out over the * page content. Ellipsis on both levels instead. */ .purple-skin .sidebar-menu:hover { overflow: hidden; } /* SUBMENU * * Recessed, not raised: darker than the rail it sits in, with an inset shadow * so it reads as a well. White text goes from 5.51:1 to 11.34:1. */ .purple-skin .sidebar-menu > li > .treeview-menu { background: var(--wa-side-sunken); box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.22); margin: 0; padding: 4px 0; position: relative; } /* the parent-child spine, centred under the section icon (3 + 11 + 14/2) */ .purple-skin .sidebar-menu > li > .treeview-menu::before { background: rgba(255, 255, 255, 0.12); bottom: 8px; content: ""; left: 21px; position: absolute; top: 8px; width: 1px; } /* 3px accent border + 33px padding puts the leaf text on 36px, the same edge * as the section label above it (3 + 11 padding + 14 icon + 8 gap) */ .purple-skin .treeview-menu > li > a { border-left: 3px solid transparent; color: var(--wa-side-fg); font-size: 14px; line-height: 20px; overflow: hidden; padding: 7px 12px 7px 33px; text-overflow: ellipsis; white-space: nowrap; } /* hover used to repaint the label #9E94BD on #69619F — 1.95:1, i.e. hovering a * link made it harder to read than leaving it alone. Fill + white instead. */ .purple-skin .treeview-menu > li > a:hover { background-color: var(--wa-side-tint); border-left-color: var(--wa-side-accent-dim); color: #ffffff; } .purple-skin .treeview-menu > li.active > a { background-color: var(--wa-side-tint); border-left-color: var(--wa-side-accent); color: #ffffff; } .purple-skin .sidebar-menu .treeview-menu > li.menu-keyboard-selected > a { background-color: rgba(255, 255, 255, 0.12); border-left-color: var(--wa-side-accent); color: #ffffff; } /* CARET * * Rotate the glyph, not the positioned wrapper. The wrapper carries AdminLTE's * margin-right:10px, so flipping it 180deg moved the arrow ~10px sideways and * open/closed sections ended up with their carets on two different verticals. */ .purple-skin .sidebar-menu li > a > .pull-right-container { margin-top: -6px; right: 12px; text-align: center; transform: none; width: 12px; } .purple-skin .sidebar-menu li > a > .pull-right-container > .fa-angle-left { display: block; float: none !important; line-height: 12px; margin: 0; transform: rotate(-180deg); transform-origin: center; transition: transform 0.15s ease; width: 12px; } .purple-skin .sidebar-menu li.active > a > .pull-right-container > .fa-angle-left { transform: rotate(-90deg); } /* RECENT * * It used to carry the exact two declarations of li.active, so the first row of * the rail always wore the current-page costume — with the accent bar meaning * two different things at once. Neutral at rest; when expanded it gets the * recessed fill but a plain white bar, never the accent. */ .purple-skin .sidebar-menu > li.recent-menu-section { border-bottom: 1px solid var(--wa-side-rule); border-top: 0; margin-top: 0; } .purple-skin .sidebar-menu > li.recent-menu-section > a { background: none; border-left-color: transparent; } .purple-skin .sidebar-menu > li.recent-menu-section:hover > a { background-color: var(--wa-side-hover); border-left-color: var(--wa-side-accent-dim); } .purple-skin .sidebar-menu > li.recent-menu-section.active > a { background: var(--wa-side-sunken); border-left-color: rgba(255, 255, 255, 0.55); } .purple-skin .recent-menu-section .recent-menu-icon { display: inline-block; text-align: center; width: 14px; } .purple-skin .recent-menu-section .treeview-menu a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purple-skin .recent-menu-section .treeview-menu li > a { min-width: 0; } .purple-skin .recent-menu-title-row { align-items: center; display: flex !important; min-width: 0; } .purple-skin .recent-menu-title { flex: 1 1 auto; min-width: 0; } .purple-skin .recent-menu-title, .purple-skin .recent-menu-section-title { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .purple-skin .recent-menu-title { line-height: 18px; } /* was 10px at alpha .5 — 2.64:1, the smallest text in the product */ .purple-skin .recent-menu-section-title { color: var(--wa-side-fg-muted); font-size: 12px; line-height: 13px; margin-top: 1px; } /* a pinned favourite and a page opened three minutes ago used to look * identical — .recent-menu-item-pinned was emitted but styled nowhere */ .purple-skin .recent-menu-item-pinned + li:not(.recent-menu-item-pinned) { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 4px; padding-top: 4px; } /* the tack is state, not decoration: idle ones appear on hover so a 5-item list * is not five competing glyphs; pinned ones stay, in the accent colour */ .purple-skin .recent-menu-pin { background: transparent; border: 1px solid transparent; border-radius: 2px; color: var(--wa-side-fg-muted); cursor: pointer; display: inline-block; flex: 0 0 16px; font-size: 12px; height: 16px; line-height: 14px; margin-left: 6px; opacity: 0; padding: 0; text-align: center; transition: opacity var(--wa-side-speed) ease, color var(--wa-side-speed) ease; width: 16px; } .purple-skin .treeview-menu > li:hover .recent-menu-pin, .purple-skin .recent-menu-pin:focus, .purple-skin .recent-menu-pin:hover { opacity: 1; } .purple-skin .recent-menu-pin:hover { color: #ffffff; } .purple-skin .recent-menu-pin .fa { display: inline-block; } .purple-skin .recent-menu-pin-pinned { background: transparent; border-color: transparent; color: var(--wa-side-accent); opacity: 1; } .purple-skin .recent-menu-pin-pinned .fa { transform: rotate(0deg); } .purple-skin .recent-menu-pin-unpinned .fa { transform: rotate(-25deg); } .purple-skin .recent-menu-empty { color: var(--wa-side-fg-muted); display: block; padding: 8px 12px 8px 33px; } /* FOCUS * * There was no :focus-visible anywhere in the theme and three outright * `outline: none`, so tabbing through 30+ links in the rail was blind. * The offset must be negative: .sidebar-menu is overflow:hidden and an outward * ring gets clipped at the rail edge. */ /* the search input is deliberately absent here: it carries its own ring as a * box-shadow, which follows its border-radius where an outline would not */ .purple-skin .sidebar a:focus-visible, .purple-skin .menu-search-clear:focus-visible, .purple-skin .recent-menu-pin:focus-visible { outline: 2px solid var(--wa-side-focus); outline-offset: -2px; } .purple-skin .sidebar a:focus:not(:focus-visible), .purple-skin .recent-menu-pin:focus:not(:focus-visible) { outline: none; } /* MOTION * * Not `transition: all` — the icon's mask/background must not be animated. */ .purple-skin .sidebar-menu > li > a, .purple-skin .treeview-menu > li > a { transition: background-color var(--wa-side-speed) ease, border-left-color var(--wa-side-speed) ease, color var(--wa-side-speed) ease; } .purple-skin .sidebar-menu > li > a > .navigation-icon { transition: color var(--wa-side-speed) ease; } @media (prefers-reduced-motion: reduce) { .purple-skin .sidebar-menu > li > a, .purple-skin .treeview-menu > li > a, .purple-skin .sidebar-menu > li > a > .navigation-icon, .purple-skin .sidebar-menu li > a > .pull-right-container > .fa-angle-left, .purple-skin .recent-menu-pin, .purple-skin .menu-search-input, .purple-skin .menu-search-clear { transition: none; } } /* NAV ICONS * * The art was 14x14 @1x PNG, so every glyph was upscaled 2x and soft on any * retina display - the single most dated-looking thing in the rail. These are * FontAwesome glyphs instead: vector, crisp at any DPI, and one line per * section rather than a background pair. This adds no new dependency - the * sidebar already breaks without FontAwesome (the carets are fa-angle-left, * Recent is fa-history, the pins are fa-thumb-tack), and every codepoint below * was checked against the 4.5.0 stylesheet that lte.tpl actually loads. * * All 46 PNGs under img/aside-navigation/ leave the request path with this. */ /* the 14px box is fixed, not em-derived: the leaf links align to it with a * fixed padding, so a fractional icon width would drift the whole column */ .navigation-icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; height: 14px; text-align: center; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 14px; } .navigation-icon::before { content: var(--wa-nav-glyph, "\f013"); /* fa-cog for anything unmapped */ } /* every ReportGen section is generated from the database, so it can only be * matched by prefix - they used to fall through to the same gear as everything * else unmapped */ [class*="navigation-icon-reportgen-menu-"] { --wa-nav-glyph: "\f0f6"; } /* fa-file-text-o */ .navigation-icon-affiliate { --wa-nav-glyph: "\f0a1"; } /* fa-bullhorn */ .navigation-icon-affiliate-money { --wa-nav-glyph: "\f0d6"; } /* fa-money */ .navigation-icon-affiliate-money-man { --wa-nav-glyph: "\f19c"; } /* fa-university */ .navigation-icon-affiliate-profile { --wa-nav-glyph: "\f007"; } /* fa-user */ .navigation-icon-affiliate-rakeback { --wa-nav-glyph: "\f0e2"; } /* fa-undo */ .navigation-icon-acl-management { --wa-nav-glyph: "\f084"; } /* fa-key */ .navigation-icon-actions-log { --wa-nav-glyph: "\f1da"; } /* fa-history */ .navigation-icon-amoe { --wa-nav-glyph: "\f003"; } /* fa-envelope-o */ .navigation-icon-avatars-on-dav { --wa-nav-glyph: "\f118"; } /* fa-smile-o */ .navigation-icon-backoffice-user { --wa-nav-glyph: "\f21b"; } /* fa-user-secret */ .navigation-icon-banner-place { --wa-nav-glyph: "\f03e"; } /* fa-picture-o */ .navigation-icon-bitcoin { --wa-nav-glyph: "\f15a"; } /* fa-btc */ .navigation-icon-bonus { --wa-nav-glyph: "\f06b"; } /* fa-gift */ .navigation-icon-bonuscode { --wa-nav-glyph: "\f145"; } /* fa-ticket */ .navigation-icon-bots { --wa-nav-glyph: "\f17b"; } /* fa-android */ .navigation-icon-casino { --wa-nav-glyph: "\f11b"; } /* fa-gamepad */ .navigation-icon-clubs-management { --wa-nav-glyph: "\f0e8"; } /* fa-sitemap */ .navigation-icon-config { --wa-nav-glyph: "\f085"; } /* fa-cogs */ .navigation-icon-export-manage { --wa-nav-glyph: "\f019"; } /* fa-download */ .navigation-icon-fee-settings { --wa-nav-glyph: "\f1ec"; } /* fa-calculator */ .navigation-icon-fraud-info { --wa-nav-glyph: "\f132"; } /* fa-shield */ .navigation-icon-games { --wa-nav-glyph: "\f11b"; } /* fa-gamepad */ .navigation-icon-ganalytics { --wa-nav-glyph: "\f080"; } /* fa-bar-chart */ .navigation-icon-in-app-purchases { --wa-nav-glyph: "\f07a"; } /* fa-shopping-cart */ .navigation-icon-jackpot { --wa-nav-glyph: "\f219"; } /* fa-diamond */ .navigation-icon-limit { --wa-nav-glyph: "\f09d"; } /* fa-credit-card */ .navigation-icon-money { --wa-nav-glyph: "\f201"; } /* fa-line-chart */ .navigation-icon-multicurrencies { --wa-nav-glyph: "\f0ec"; } /* fa-exchange */ .navigation-icon-notification { --wa-nav-glyph: "\f0a2"; } /* fa-bell-o */ .navigation-icon-payments-settings { --wa-nav-glyph: "\f09d"; } /* fa-credit-card */ .navigation-icon-postback-url { --wa-nav-glyph: "\f0c1"; } /* fa-link */ .navigation-icon-predict { --wa-nav-glyph: "\f140"; } /* fa-bullseye */ .navigation-icon-profile { --wa-nav-glyph: "\f007"; } /* fa-user */ .navigation-icon-prohibited-user { --wa-nav-glyph: "\f05e"; } /* fa-ban */ .navigation-icon-prohibitedip { --wa-nav-glyph: "\f05e"; } /* fa-ban */ .navigation-icon-promotions-management { --wa-nav-glyph: "\f06b"; } /* fa-gift */ .navigation-icon-rakeback { --wa-nav-glyph: "\f0e2"; } /* fa-undo */ .navigation-icon-rakeback-manage { --wa-nav-glyph: "\f0e2"; } /* fa-undo */ .navigation-icon-realtimemonitoring { --wa-nav-glyph: "\f0e4"; } /* fa-dashboard */ .navigation-icon-redeem-code { --wa-nav-glyph: "\f029"; } /* fa-qrcode */ .navigation-icon-referer-manage { --wa-nav-glyph: "\f1e0"; } /* fa-share-alt */ .navigation-icon-referral { --wa-nav-glyph: "\f1e0"; } /* fa-share-alt */ .navigation-icon-referrers { --wa-nav-glyph: "\f1e0"; } /* fa-share-alt */ .navigation-icon-reportgen-list { --wa-nav-glyph: "\f0f6"; } /* fa-file-text-o */ .navigation-icon-server { --wa-nav-glyph: "\f233"; } /* fa-server */ .navigation-icon-skin { --wa-nav-glyph: "\f1fc"; } /* fa-paint-brush */ .navigation-icon-support-transaction { --wa-nav-glyph: "\f0d6"; } /* fa-money */ .navigation-icon-support-transactions { --wa-nav-glyph: "\f1cd"; } /* fa-life-ring */ .navigation-icon-support-user-list { --wa-nav-glyph: "\f007"; } /* fa-user */ .navigation-icon-table { --wa-nav-glyph: "\f192"; } /* fa-dot-circle-o */ .navigation-icon-transactionstatus { --wa-nav-glyph: "\f09d"; } /* fa-credit-card */ .navigation-icon-tournament { --wa-nav-glyph: "\f091"; } /* fa-trophy */ .navigation-icon-transactions { --wa-nav-glyph: "\f0ec"; } /* fa-exchange */ .navigation-icon-user { --wa-nav-glyph: "\f0c0"; } /* fa-users */