body { margin: 0; border: 0; padding: 0; font: 13px sans-serif; background-color: white; direction: __MSG_@@bidi_dir__; min-width: 180px; } h1,h2,h3,h4 { margin: 0; padding: 4px; border: 0; color: white; background-color: #444; text-align: center; cursor: pointer; } a { color: inherit; text-decoration: none; } *:focus { outline: 0; } #version { margin-left: 1em; font-weight: normal; font-size: 11px; } body > div { padding: 4px 12px 0 12px; } p { margin: 16px 0; white-space: nowrap; text-align: center; } #switch .fa { margin: 0; font-size: 96px; color: green; cursor: pointer; } #switch .fa:hover { opacity: 0.9; } #switch .fa.off { color: #ccc; } #switch-hint { font-size: 11px; color: #888; } #page-blocked { margin-top: 4px; font-size: 20px; } #total-blocked { margin-top: 4px; margin-bottom: 8px; font-size: 14px; } #stats { margin-bottom: 4px; text-align: center; } .tool { font-size: 14px; color: #aaa; cursor: pointer; display: none; } .tool.enabled { display: inline; } .tool:hover { color: #444; } #dynamicFilteringToggler { margin: 0; border: 0; padding: 0; width: 100vw; text-align: center; cursor: pointer; position: relative; } #dynamicFilteringToggler > div { font-size: 9px; line-height: 100%; color: #aaa; position: absolute; bottom: 0; width: 25vw; display: none; pointer-events: none; } #dynamicFilteringToggler.on:hover > div { display: initial; } #dynamicFilteringToggler > div:nth-of-type(1) { left: 0; } #dynamicFilteringToggler > div:nth-of-type(2) { left: 25vw; } #dynamicFilteringToggler > div:nth-of-type(3) { left: 50vw; } #dynamicFilteringToggler > div:nth-of-type(4) { left: 75vw; } #dynamicFilteringToggler a { padding: 0 2px 0 8px; position: absolute; __MSG_@@bidi_end_edge__: 0; color: #aaa; visibility: hidden; } #dynamicFilteringToggler a:hover { color: #444; } #dynamicFilteringToggler.on:hover a { visibility: visible; } #dynamicFilteringToggler::before { content: '\f107'; } #dynamicFilteringToggler.on::before { content: '\f106'; } #dynamicFilteringContainer { margin: 0; border: 0; padding: 0; display: none; } #dynamicFilteringToggler.on + #dynamicFilteringContainer { display: initial; } .dynamicFiltering { margin: 0; border: 0; padding: 0; height: 2.75em; position: relative; } .dynamicFiltering.local { border-bottom: 1px solid white; } .dynamicFiltering.global { height: 1.25em; } .dynamicFiltering > div { margin: 0; border: 1px solid #e6e6e6; padding: 0; box-sizing: border-box; background-color: #e6e6e6; position: absolute; cursor: pointer; } .dynamicFiltering > div:not(:first-child) { border-left: 1px solid white !important; } .dynamicFiltering > div:nth-of-type(1) { left: 0; width: 7vw; height: 100%; } .dynamicFiltering > div:nth-of-type(2) { left: 7vw; width: 18vw; height: 100%; } .dynamicFiltering > div:nth-of-type(3) { left: 25vw; width: 25vw; height: 100%; } .dynamicFiltering > div:nth-of-type(4) { left: 50vw; width: 25vw; height: 100%; } .dynamicFiltering > div:nth-of-type(5) { left: 75vw; width: 25vw; height: 100%; } .dynamicFiltering > div:nth-of-type(6) { left: 0; width: 50vw; } .dynamicFiltering > div:nth-of-type(7) { left: 50vw; width: 50vw; } .dynamicFiltering > div.label { margin: 0; border: 0; padding: 0; pointer-events: none; color: black; opacity: 0.2; font: 12px monospace; text-align: center; top: 50%; transform: translateY(-50%); background-color: transparent; } .dynamicFiltering > div.blocked { border-color: #fbb; background-color: #fbb; } .dynamicFiltering > div.ownFilter { border-color: #bbb; background-color: #bbb; } .dynamicFiltering > div.blocked.ownFilter { border-color: #f66; background-color: #f66; }