--- a/browser/base/content/browser-trackingprotection.js
+++ b/browser/base/content/browser-trackingprotection.js
@@ -3,16 +3,17 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
var TrackingProtection = {
// If the user ignores the doorhanger, we stop showing it after some time.
MAX_INTROS: 20,
PREF_ENABLED_GLOBALLY: "privacy.trackingprotection.enabled",
PREF_ENABLED_IN_PRIVATE_WINDOWS: "privacy.trackingprotection.pbmode.enabled",
PREF_APP_MENU_TOGGLE: "privacy.trackingprotection.appMenuToggle.enabled",
+ PREF_ANIMATIONS_ENABLED: "toolkit.cosmeticAnimations.enabled",
enabledGlobally: false,
enabledInPrivateWindows: false,
container: null,
content: null,
icon: null,
activeTooltipText: null,
disabledTooltipText: null,
@@ -31,27 +32,40 @@ var TrackingProtection = {
init() {
let $ = selector => document.querySelector(selector);
this.container = $("#tracking-protection-container");
this.content = $("#tracking-protection-content");
this.icon = $("#tracking-protection-icon");
this.appMenuContainer = $("#appMenu-tp-container");
this.appMenuSeparator = $("#appMenu-tp-separator");
+ this.iconBox = $("#tracking-protection-icon-box");
+ this.animatedIcon = $("#tracking-protection-icon-animatable-image");
+ this.animatedIcon.addEventListener("animationend", () => this.iconBox.removeAttribute("animate"));
+
this.broadcaster = $("#trackingProtectionBroadcaster");
this.enableTooltip =
gNavigatorBundle.getString("trackingProtection.toggle.enable.tooltip");
this.disableTooltip =
gNavigatorBundle.getString("trackingProtection.toggle.disable.tooltip");
this.enableTooltipPB =
gNavigatorBundle.getString("trackingProtection.toggle.enable.pbmode.tooltip");
this.disableTooltipPB =
gNavigatorBundle.getString("trackingProtection.toggle.disable.pbmode.tooltip");
+ this.updateAnimationsEnabled = () => {
+ this.iconBox.toggleAttribute("animationsenabled",
+ Services.prefs.getBoolPref(this.PREF_ANIMATIONS_ENABLED, false));
+ };
+
+ this.updateAnimationsEnabled();
+
+ Services.prefs.addObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
+
this.updateEnabled();
this.updateAppMenuToggle = () => {
if (Services.prefs.getBoolPref(this.PREF_APP_MENU_TOGGLE, false)) {
this.appMenuContainer.removeAttribute("hidden");
this.appMenuSeparator.removeAttribute("hidden");
} else {
this.appMenuContainer.setAttribute("hidden", "true");
@@ -73,16 +87,17 @@ var TrackingProtection = {
this.enabledHistogramAdd(this.enabledGlobally);
this.disabledPBMHistogramAdd(!this.enabledInPrivateWindows);
},
uninit() {
Services.prefs.removeObserver(this.PREF_ENABLED_GLOBALLY, this);
Services.prefs.removeObserver(this.PREF_ENABLED_IN_PRIVATE_WINDOWS, this);
Services.prefs.removeObserver(this.PREF_APP_MENU_TOGGLE, this.updateAppMenuToggle);
+ Services.prefs.removeObserver(this.PREF_ANIMATIONS_ENABLED, this.updateAnimationsEnabled);
},
observe() {
this.updateEnabled();
},
get enabled() {
return this.enabledGlobally ||
@@ -151,31 +166,39 @@ var TrackingProtection = {
shieldHistogramAdd(value) {
if (PrivateBrowsingUtils.isWindowPrivate(window)) {
return;
}
Services.telemetry.getHistogramById("TRACKING_PROTECTION_SHIELD").add(value);
},
- onSecurityChange(state, isSimulated) {
+ cancelAnimation() {
+ let iconAnimation = this.animatedIcon.getAnimations()[0];
+ if (iconAnimation && iconAnimation.currentTime) {
+ iconAnimation.cancel();
+ }
+ this.iconBox.removeAttribute("animate");
+ },
+
+ onSecurityChange(state, webProgress, isSimulated) {
let baseURI = this._baseURIForChannelClassifier;
// Don't deal with about:, file: etc.
if (!baseURI) {
- this.icon.removeAttribute("state");
+ this.cancelAnimation();
+ this.iconBox.removeAttribute("state");
return;
}
- // Only animate the shield if the event was not fired directly from
- // the tabbrowser (due to a browser change).
- if (isSimulated) {
- this.icon.removeAttribute("animate");
- } else {
- this.icon.setAttribute("animate", "true");
+ // The user might have navigated before the shield animation
+ // finished. In this case, reset the animation to be able to
+ // play it in full again and avoid choppiness.
+ if (webProgress.isTopLevel) {
+ this.cancelAnimation();
}
let isBlocking = state & Ci.nsIWebProgressListener.STATE_BLOCKED_TRACKING_CONTENT;
let isAllowing = state & Ci.nsIWebProgressListener.STATE_LOADED_TRACKING_CONTENT;
// Check whether the user has added an exception for this site.
let hasException = false;
if (PrivateBrowsingUtils.isBrowserPrivate(gBrowser.selectedBrowser)) {
@@ -187,48 +210,60 @@ var TrackingProtection = {
if (hasException) {
this.content.setAttribute("hasException", "true");
} else {
this.content.removeAttribute("hasException");
}
if (isBlocking && this.enabled) {
- this.icon.setAttribute("tooltiptext", this.activeTooltipText);
- this.icon.setAttribute("state", "blocked-tracking-content");
+ if (isSimulated) {
+ this.cancelAnimation();
+ } else if (webProgress.isTopLevel) {
+ this.iconBox.setAttribute("animate", "true");
+ }
+
+ this.iconBox.setAttribute("tooltiptext", this.activeTooltipText);
+ this.iconBox.setAttribute("state", "blocked-tracking-content");
this.content.setAttribute("state", "blocked-tracking-content");
// Open the tracking protection introduction panel, if applicable.
if (this.enabledGlobally) {
let introCount = Services.prefs.getIntPref("privacy.trackingprotection.introCount");
if (introCount < TrackingProtection.MAX_INTROS) {
Services.prefs.setIntPref("privacy.trackingprotection.introCount", ++introCount);
Services.prefs.savePrefFile(null);
this.showIntroPanel();
}
}
this.shieldHistogramAdd(2);
} else if (isAllowing) {
+ if (isSimulated) {
+ this.cancelAnimation();
+ } else if (webProgress.isTopLevel) {
+ this.iconBox.setAttribute("animate", "true");
+ }
+
// Only show the shield when TP is enabled for now.
if (this.enabled) {
- this.icon.setAttribute("tooltiptext", this.disabledTooltipText);
- this.icon.setAttribute("state", "loaded-tracking-content");
+ this.iconBox.setAttribute("tooltiptext", this.disabledTooltipText);
+ this.iconBox.setAttribute("state", "loaded-tracking-content");
this.shieldHistogramAdd(1);
} else {
- this.icon.removeAttribute("tooltiptext");
- this.icon.removeAttribute("state");
+ this.iconBox.removeAttribute("tooltiptext");
+ this.iconBox.removeAttribute("state");
this.shieldHistogramAdd(0);
}
// Warn in the control center even with TP disabled.
this.content.setAttribute("state", "loaded-tracking-content");
} else {
- this.icon.removeAttribute("tooltiptext");
- this.icon.removeAttribute("state");
+ this.iconBox.removeAttribute("tooltiptext");
+ this.iconBox.removeAttribute("state");
this.content.removeAttribute("state");
// We didn't show the shield
this.shieldHistogramAdd(0);
}
// Telemetry for state change.
this.eventsHistogramAdd(0);
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -4893,17 +4893,17 @@ var XULBrowserWindow = {
// Make sure the "https" part of the URL is striked out or not,
// depending on the current mixed active content blocking state.
gURLBar.formatValue();
try {
uri = Services.uriFixup.createExposableURI(uri);
} catch (e) {}
gIdentityHandler.updateIdentity(this._state, uri);
- TrackingProtection.onSecurityChange(this._state, aIsSimulated);
+ TrackingProtection.onSecurityChange(this._state, aWebProgress, aIsSimulated);
},
// simulate all change notifications after switching tabs
onUpdateCurrentBrowser: function XWB_onUpdateCurrentBrowser(aStateFlags, aStatus, aMessage, aTotalProgress) {
if (FullZoom.updateBackgroundTabs)
FullZoom.onLocationChange(gBrowser.currentURI, true);
CombinedStopReload.onTabSwitch();
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -793,17 +793,22 @@
aria-label="&urlbar.viewSiteInfo.label;"
onclick="gIdentityHandler.handleIdentityButtonEvent(event);"
onkeypress="gIdentityHandler.handleIdentityButtonEvent(event);"
ondragstart="gIdentityHandler.onDragStart(event);">
<image id="identity-icon"
consumeanchor="identity-box"
onclick="PageProxyClickHandler(event);"/>
<image id="sharing-icon" mousethrough="always"/>
- <image id="tracking-protection-icon"/>
+ <box id="tracking-protection-icon-box" animationsenabled="true">
+ <image id="tracking-protection-icon"/>
+ <box id="tracking-protection-icon-animatable-box" flex="1">
+ <image id="tracking-protection-icon-animatable-image" flex="1"/>
+ </box>
+ </box>
<box id="blocked-permissions-container" align="center">
<image data-permission-id="geo" class="blocked-permission-icon geo-icon" role="button"
tooltiptext="&urlbar.geolocationBlocked.tooltip;"/>
<image data-permission-id="desktop-notification" class="blocked-permission-icon desktop-notification-icon" role="button"
tooltiptext="&urlbar.webNotificationsBlocked.tooltip;"/>
<image data-permission-id="camera" class="blocked-permission-icon camera-icon" role="button"
tooltiptext="&urlbar.cameraBlocked.tooltip;"/>
<image data-permission-id="microphone" class="blocked-permission-icon microphone-icon" role="button"
--- a/browser/base/content/test/general/browser_trackingUI_4.js
+++ b/browser/base/content/test/general/browser_trackingUI_4.js
@@ -39,48 +39,48 @@ function waitForSecurityChange(numChange
tabbrowser.addProgressListener(listener);
});
}
async function testTrackingProtectionAnimation() {
info("Load a test page not containing tracking elements");
let benignTab = await BrowserTestUtils.openNewForegroundTab(tabbrowser, BENIGN_PAGE);
- ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
- ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+ ok(!TrackingProtection.iconBox.hasAttribute("state"), "iconBox: no state");
+ ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
info("Load a test page containing tracking elements");
let trackingTab = await BrowserTestUtils.openNewForegroundTab(tabbrowser, TRACKING_PAGE);
- ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
- ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+ ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+ ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
info("Switch from tracking -> benign tab");
let securityChanged = waitForSecurityChange();
tabbrowser.selectedTab = benignTab;
await securityChanged;
- ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
- ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
+ ok(!TrackingProtection.iconBox.hasAttribute("state"), "iconBox: no state");
+ ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
info("Switch from benign -> tracking tab");
securityChanged = waitForSecurityChange();
tabbrowser.selectedTab = trackingTab;
await securityChanged;
- ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
- ok(!TrackingProtection.icon.hasAttribute("animate"), "icon: no animate");
+ ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+ ok(!TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: no animate");
info("Reload tracking tab");
securityChanged = waitForSecurityChange(2);
tabbrowser.reload();
await securityChanged;
- ok(TrackingProtection.icon.hasAttribute("state"), "icon: state");
- ok(TrackingProtection.icon.hasAttribute("animate"), "icon: animate");
+ ok(TrackingProtection.iconBox.hasAttribute("state"), "iconBox: state");
+ ok(TrackingProtection.iconBox.hasAttribute("animate"), "iconBox: animate");
}
add_task(async function testNormalBrowsing() {
await UrlClassifierTestUtils.addTestTrackers();
tabbrowser = gBrowser;
TrackingProtection = gBrowser.ownerGlobal.TrackingProtection;
--- a/browser/base/content/test/general/browser_trackingUI_5.js
+++ b/browser/base/content/test/general/browser_trackingUI_5.js
@@ -33,20 +33,20 @@ function clickButton(sel) {
el.doCommand();
}
function testTrackingPage(window) {
info("Tracking content must be blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
'content: state="blocked-tracking-content"');
- is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
- 'icon: state="blocked-tracking-content"');
+ is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+ 'iconBox: state="blocked-tracking-content"');
- ok(!hidden("#tracking-protection-icon"), "icon is visible");
+ ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
ok(hidden("#tracking-action-block"), "blockButton is hidden");
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
ok(!hidden("#tracking-action-unblock-private"), "unblockButtonPrivate is visible");
// Make sure that the blocked tracking elements message appears
ok(hidden("#tracking-not-detected"), "labelNoTracking is hidden");
ok(hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
@@ -54,20 +54,20 @@ function testTrackingPage(window) {
ok(!hidden("#tracking-blocked"), "labelTrackingBlocked is visible");
}
function testTrackingPageUnblocked() {
info("Tracking content must be white-listed and not blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
is(TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
'content: state="loaded-tracking-content"');
- is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
- 'icon: state="loaded-tracking-content"');
+ is(TrackingProtection.iconBox.getAttribute("state"), "loaded-tracking-content",
+ 'iconBox: state="loaded-tracking-content"');
- ok(!hidden("#tracking-protection-icon"), "icon is visible");
+ ok(!hidden("#tracking-protection-icon-box"), "icon box is visible");
ok(!hidden("#tracking-action-block"), "blockButton is visible");
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
// Make sure that the blocked tracking elements message appears
ok(hidden("#tracking-not-detected"), "labelNoTracking is hidden");
ok(!hidden("#tracking-loaded-exception"), "labelTrackingLoadedException is visible");
ok(hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
}
--- a/browser/base/content/test/general/browser_trackingUI_6.js
+++ b/browser/base/content/test/general/browser_trackingUI_6.js
@@ -30,14 +30,14 @@ add_task(async function test_fetch() {
await securityChange;
var TrackingProtection = newTabBrowser.ownerGlobal.TrackingProtection;
ok(TrackingProtection, "got TP object");
ok(TrackingProtection.enabled, "TP is enabled");
is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
'content: state="blocked-tracking-content"');
- is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
- 'icon: state="blocked-tracking-content"');
- is(TrackingProtection.icon.getAttribute("tooltiptext"),
+ is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+ 'iconBox: state="blocked-tracking-content"');
+ is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
});
});
--- a/browser/base/content/test/trackingUI/browser.ini
+++ b/browser/base/content/test/trackingUI/browser.ini
@@ -1,12 +1,13 @@
[DEFAULT]
tags = trackingprotection
support-files =
head.js
../general/benignPage.html
../general/trackingPage.html
+[browser_trackingUI_animation.js]
[browser_trackingUI_appMenu.js]
[browser_trackingUI_appMenu_toggle.js]
[browser_trackingUI_open_preferences.js]
[browser_trackingUI_reload_hint.js]
[browser_trackingUI_state.js]
new file mode 100644
--- /dev/null
+++ b/browser/base/content/test/trackingUI/browser_trackingUI_animation.js
@@ -0,0 +1,40 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
+const BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/benignPage.html";
+const TP_PREF = "privacy.trackingprotection.enabled";
+const ANIMATIONS_PREF = "toolkit.cosmeticAnimations.enabled";
+
+// Test that the shield icon animation can be controlled by the cosmetic
+// animations pref and that one of the icons is visible in each case.
+add_task(async function testShieldAnimation() {
+ await UrlClassifierTestUtils.addTestTrackers();
+ Services.prefs.setBoolPref(TP_PREF, true);
+
+ let tab = gBrowser.selectedTab = gBrowser.addTab();
+
+ let animationIcon = document.getElementById("tracking-protection-icon-animatable-image");
+ let noAnimationIcon = document.getElementById("tracking-protection-icon");
+
+ Services.prefs.setBoolPref(ANIMATIONS_PREF, true);
+ await promiseTabLoadEvent(tab, TRACKING_PAGE);
+ ok(BrowserTestUtils.is_hidden(noAnimationIcon), "the default icon is hidden when animations are enabled");
+ ok(BrowserTestUtils.is_visible(animationIcon), "the animated icon is shown when animations are enabled");
+
+ await promiseTabLoadEvent(tab, BENIGN_PAGE);
+ ok(BrowserTestUtils.is_hidden(animationIcon), "the animated icon is hidden");
+ ok(BrowserTestUtils.is_hidden(noAnimationIcon), "the default icon is hidden");
+
+ Services.prefs.setBoolPref(ANIMATIONS_PREF, false);
+ await promiseTabLoadEvent(tab, TRACKING_PAGE);
+ ok(BrowserTestUtils.is_visible(noAnimationIcon), "the default icon is shown when animations are disabled");
+ ok(BrowserTestUtils.is_hidden(animationIcon), "the animated icon is hidden when animations are disabled");
+
+ gBrowser.removeCurrentTab();
+ Services.prefs.clearUserPref(ANIMATIONS_PREF);
+ Services.prefs.clearUserPref(TP_PREF);
+ UrlClassifierTestUtils.cleanupTestTrackers();
+});
--- a/browser/base/content/test/trackingUI/browser_trackingUI_open_preferences.js
+++ b/browser/base/content/test/trackingUI/browser_trackingUI_open_preferences.js
@@ -1,18 +1,16 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const PREF = "privacy.trackingprotection.enabled";
const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
async function waitAndAssertPreferencesShown() {
await BrowserTestUtils.waitForEvent(gIdentityHandler._identityPopup, "popuphidden");
await TestUtils.waitForCondition(() => gBrowser.currentURI.spec == "about:preferences#privacy",
"Should open about:preferences.");
await ContentTask.spawn(gBrowser.selectedBrowser, {}, async function() {
let doc = content.document;
let section = await ContentTaskUtils.waitForCondition(
--- a/browser/base/content/test/trackingUI/browser_trackingUI_reload_hint.js
+++ b/browser/base/content/test/trackingUI/browser_trackingUI_reload_hint.js
@@ -1,18 +1,16 @@
/* Any copyright is dedicated to the Public Domain.
* http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
const PREF = "privacy.trackingprotection.enabled";
const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
// TODO: replace this once bug 1428847 is done.
function hidden(el) {
let win = el.ownerGlobal;
let display = win.getComputedStyle(el).getPropertyValue("display", null);
let opacity = win.getComputedStyle(el).getPropertyValue("opacity", null);
return display === "none" || opacity === "0";
}
--- a/browser/base/content/test/trackingUI/browser_trackingUI_state.js
+++ b/browser/base/content/test/trackingUI/browser_trackingUI_state.js
@@ -16,28 +16,29 @@
const PREF = "privacy.trackingprotection.enabled";
const PB_PREF = "privacy.trackingprotection.pbmode.enabled";
const BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/benignPage.html";
const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/trackingUI/trackingPage.html";
var TrackingProtection = null;
var tabbrowser = null;
-var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
-
registerCleanupFunction(function() {
TrackingProtection = tabbrowser = null;
UrlClassifierTestUtils.cleanupTestTrackers();
Services.prefs.clearUserPref(PREF);
Services.prefs.clearUserPref(PB_PREF);
while (gBrowser.tabs.length > 1) {
gBrowser.removeCurrentTab();
}
});
+// This is a special version of "hidden" that doesn't check for item
+// visibility and just asserts the display and opacity attributes.
+// That way we can test elements even when their panel is hidden...
function hidden(sel) {
let win = tabbrowser.ownerGlobal;
let el = win.document.querySelector(sel);
let display = win.getComputedStyle(el).getPropertyValue("display", null);
let opacity = win.getComputedStyle(el).getPropertyValue("opacity", null);
return display === "none" || opacity === "0";
}
@@ -46,39 +47,41 @@ function clickButton(sel) {
let el = win.document.querySelector(sel);
el.doCommand();
}
function testBenignPage() {
info("Non-tracking content must not be blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
ok(!TrackingProtection.content.hasAttribute("state"), "content: no state");
- ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
- ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
+ ok(!TrackingProtection.iconBox.hasAttribute("state"), "icon box: no state");
+ ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
- ok(hidden("#tracking-protection-icon"), "icon is hidden");
+ let doc = tabbrowser.ownerGlobal.document;
+ ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
ok(hidden("#tracking-action-block"), "blockButton is hidden");
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
// Make sure that the no tracking elements message appears
ok(!hidden("#tracking-not-detected"), "labelNoTracking is visible");
ok(hidden("#tracking-loaded"), "labelTrackingLoaded is hidden");
ok(hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
}
function testBenignPageWithException() {
info("Non-tracking content must not be blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
ok(!TrackingProtection.content.hasAttribute("state"), "content: no state");
ok(TrackingProtection.content.hasAttribute("hasException"), "content has exception attribute");
- ok(!TrackingProtection.icon.hasAttribute("state"), "icon: no state");
- ok(!TrackingProtection.icon.hasAttribute("tooltiptext"), "icon: no tooltip");
+ ok(!TrackingProtection.iconBox.hasAttribute("state"), "icon box: no state");
+ ok(!TrackingProtection.iconBox.hasAttribute("tooltiptext"), "icon box: no tooltip");
- ok(hidden("#tracking-protection-icon"), "icon is hidden");
+ let doc = tabbrowser.ownerGlobal.document;
+ ok(BrowserTestUtils.is_hidden(doc.getElementById("tracking-protection-icon-box")), "icon box is hidden");
is(!hidden("#tracking-action-block"), TrackingProtection.enabled,
"blockButton is visible if TP is on");
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
is(!hidden("#tracking-not-detected-exception"), TrackingProtection.enabled,
"labelNoTrackingException is visible if TP is on");
is(hidden("#tracking-not-detected"), TrackingProtection.enabled,
@@ -87,22 +90,23 @@ function testBenignPageWithException() {
ok(hidden("#tracking-blocked"), "labelTrackingBlocked is hidden");
}
function testTrackingPage(window) {
info("Tracking content must be blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
is(TrackingProtection.content.getAttribute("state"), "blocked-tracking-content",
'content: state="blocked-tracking-content"');
- is(TrackingProtection.icon.getAttribute("state"), "blocked-tracking-content",
- 'icon: state="blocked-tracking-content"');
- is(TrackingProtection.icon.getAttribute("tooltiptext"),
+ is(TrackingProtection.iconBox.getAttribute("state"), "blocked-tracking-content",
+ 'icon box: state="blocked-tracking-content"');
+ is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
gNavigatorBundle.getString("trackingProtection.icon.activeTooltip"), "correct tooltip");
- ok(!hidden("#tracking-protection-icon"), "icon is visible");
+ let doc = tabbrowser.ownerGlobal.document;
+ ok(BrowserTestUtils.is_visible(doc.getElementById("tracking-protection-icon-box")), "icon box is visible");
ok(hidden("#tracking-action-block"), "blockButton is hidden");
ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
if (PrivateBrowsingUtils.isWindowPrivate(window)) {
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
ok(!hidden("#tracking-action-unblock-private"), "unblockButtonPrivate is visible");
} else {
@@ -118,23 +122,24 @@ function testTrackingPage(window) {
}
function testTrackingPageUnblocked() {
info("Tracking content must be white-listed and not blocked");
ok(!TrackingProtection.container.hidden, "The container is visible");
is(TrackingProtection.content.getAttribute("state"), "loaded-tracking-content",
'content: state="loaded-tracking-content"');
if (TrackingProtection.enabled) {
- is(TrackingProtection.icon.getAttribute("state"), "loaded-tracking-content",
- 'icon: state="loaded-tracking-content"');
- is(TrackingProtection.icon.getAttribute("tooltiptext"),
+ is(TrackingProtection.iconBox.getAttribute("state"), "loaded-tracking-content",
+ 'icon box: state="loaded-tracking-content"');
+ is(TrackingProtection.iconBox.getAttribute("tooltiptext"),
gNavigatorBundle.getString("trackingProtection.icon.disabledTooltip"), "correct tooltip");
}
- is(!hidden("#tracking-protection-icon"), TrackingProtection.enabled, "icon is visible if TP is on");
+ let doc = tabbrowser.ownerGlobal.document;
+ is(BrowserTestUtils.is_visible(doc.getElementById("tracking-protection-icon-box")), TrackingProtection.enabled, "icon box is visible if TP is on");
is(!hidden("#tracking-action-block"), TrackingProtection.enabled, "blockButton is visible if TP is on");
ok(hidden("#tracking-action-unblock"), "unblockButton is hidden");
ok(!hidden("#tracking-protection-preferences-button"), "preferences button is visible");
// Make sure that the blocked tracking elements message appears
ok(hidden("#tracking-not-detected"), "labelNoTracking is hidden");
is(hidden("#tracking-loaded"), TrackingProtection.enabled,
"labelTrackingLoaded is visible if TP is off");
--- a/browser/base/content/test/trackingUI/head.js
+++ b/browser/base/content/test/trackingUI/head.js
@@ -1,8 +1,10 @@
+var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
+
/**
* Waits for a load (or custom) event to finish in a given tab. If provided
* load an uri into the tab.
*
* @param tab
* The tab to load into.
* @param [optional] url
* The url to load, or the current url.
--- a/browser/components/uitour/UITour.jsm
+++ b/browser/components/uitour/UITour.jsm
@@ -182,17 +182,22 @@ var UITour = {
"tab-icon-image");
if (!element || !UITour.isElementVisible(element)) {
return null;
}
return element;
},
}],
["trackingProtection", {
- query: "#tracking-protection-icon",
+ query: (aDocument) => {
+ if (Services.prefs.getBoolPref("toolkit.cosmeticAnimations.enabled", false)) {
+ return aDocument.getElementById("tracking-protection-icon-animatable-box");
+ }
+ return aDocument.getElementById("tracking-protection-icon");
+ },
}],
["urlbar", {
query: "#urlbar",
widgetName: "urlbar-container",
}],
["pageActionButton", {
query: "#pageActionButton"
}],
--- a/browser/components/uitour/test/browser_trackingProtection.js
+++ b/browser/components/uitour/test/browser_trackingProtection.js
@@ -1,16 +1,16 @@
"use strict";
const PREF_INTRO_COUNT = "privacy.trackingprotection.introCount";
const PREF_TP_ENABLED = "privacy.trackingprotection.enabled";
const BENIGN_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/benignPage.html";
const TRACKING_PAGE = "http://tracking.example.org/browser/browser/base/content/test/general/trackingPage.html";
const TOOLTIP_PANEL = document.getElementById("UITourTooltip");
-const TOOLTIP_ANCHOR = document.getElementById("tracking-protection-icon");
+const TOOLTIP_ANCHOR = document.getElementById("tracking-protection-icon-animatable-box");
var {UrlClassifierTestUtils} = ChromeUtils.import("resource://testing-common/UrlClassifierTestUtils.jsm", {});
registerCleanupFunction(function() {
UrlClassifierTestUtils.cleanupTestTrackers();
Services.prefs.clearUserPref(PREF_TP_ENABLED);
Services.prefs.clearUserPref(PREF_INTRO_COUNT);
});
--- a/browser/themes/shared/identity-block/identity-block.inc.css
+++ b/browser/themes/shared/identity-block/identity-block.inc.css
@@ -142,43 +142,132 @@
}
@keyframes in-use-blink {
50% { opacity: 0; }
}
/* TRACKING PROTECTION ICON */
-#tracking-protection-icon {
- list-style-image: url(chrome://browser/skin/tracking-protection.svg);
- margin-inline-end: 0;
+#tracking-protection-icon-box {
+ visibility: collapse;
+ overflow: hidden;
+ width: 20px;
+ margin-inline-end: -20px;
}
-#tracking-protection-icon[state="loaded-tracking-content"] {
- list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
+#tracking-protection-icon-box[state] {
+ margin-inline-end: 0px;
+ visibility: visible;
}
-#tracking-protection-icon[animate] {
+#tracking-protection-icon-box[animationsenabled][animate] {
transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
}
-#tracking-protection-icon:not([state]) {
- margin-inline-end: -20px;
- pointer-events: none;
- opacity: 0;
- /* Only animate the shield in, when it disappears hide it immediately. */
- transition: none;
- list-style-image: none;
+#tracking-protection-icon-box[state="blocked-tracking-content"][animationsenabled] > #tracking-protection-icon,
+#tracking-protection-icon-box:not([animationsenabled]) > #tracking-protection-icon-animatable-box {
+ display: none;
+}
+
+#tracking-protection-icon-box > #tracking-protection-icon-animatable-box {
+ position: absolute;
+ overflow: hidden;
+ top: calc(50% - 10px); /* half the height of the sprite */
+ margin-inline-start: 4px;
+ width: 16px;
+ height: 20px;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] #tracking-protection-icon-animatable-image {
+ background-image: url(chrome://browser/skin/tracking-protection-animation.svg);
+ transform: translateX(-1232px);
+ width: 1248px;
+ background-size: auto;
+ height: 16px;
+ min-height: 20px;
+ -moz-context-properties: fill, fill-opacity;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+ transform: scaleX(-1) translateX(-1232px);
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"][animate] #tracking-protection-icon-animatable-image {
+ animation-name: tp-icon-animation;
+ animation-timing-function: steps(77);
+ animation-duration: 3s;
+ animation-fill-mode: forwards;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"][animate] #tracking-protection-icon-animatable-image:-moz-locale-dir(rtl) {
+ animation-name: tp-icon-animation-rtl;
+}
+
+#tracking-protection-icon-box[state="blocked-tracking-content"] > #tracking-protection-icon {
+ list-style-image: url(chrome://browser/skin/tracking-protection.svg);
+}
+
+#tracking-protection-icon-box[state="loaded-tracking-content"] > #tracking-protection-icon {
+ list-style-image: url(chrome://browser/skin/tracking-protection-disabled.svg);
}
#urlbar[pageproxystate="invalid"] > #identity-box > #extension-icon,
-#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
+#urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon-box {
visibility: collapse;
}
+@keyframes tp-icon-animation {
+ from {
+ transform: translateX(0);
+ fill-opacity: 0.3;
+ }
+ 38% {
+ fill: inherit;
+ fill-opacity: 0.3;
+ }
+ 39% {
+ fill: #7f00d6;
+ fill-opacity: 1;
+ }
+ 75% {
+ transform: translateX(-1232px);
+ fill: #7f00d6;
+ fill-opacity: 1;
+ }
+ to {
+ fill: inherit;
+ fill-opacity: inherit;
+ }
+}
+
+@keyframes tp-icon-animation-rtl {
+ from {
+ transform: scaleX(-1) translateX(0);
+ fill-opacity: 0.3;
+ }
+ 38% {
+ fill: inherit;
+ fill-opacity: 0.3;
+ }
+ 39% {
+ fill: #7f00d6;
+ fill-opacity: 1;
+ }
+ 75% {
+ transform: scaleX(-1) translateX(-1232px);
+ fill: #7f00d6;
+ fill-opacity: 1;
+ }
+ to {
+ fill: inherit;
+ fill-opacity: inherit;
+ }
+}
+
/* CONNECTION ICON, EXTENSION ICON */
#connection-icon,
#extension-icon {
visibility: collapse;
}
#urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
#urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/identity-block/tracking-protection-animation.svg
@@ -0,0 +1,1674 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+ - License, v. 2.0. If a copy of the MPL was not distributed with this
+ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="1248" height="20">
+ <defs>
+ <path id="shape-0" d="M18 42.999l-0.336 -0.035a18.737 18.737 0 0 1 -12.036 -7.281 27.778 27.778 0 0 1 -5.4 -15.859c-0.228 -2.517 -0.228 -8.042 -0.228 -11.117a5.535 5.535 0 0 1 4.581 -5.467l13.419 -2.303 13.413 2.303a5.536 5.536 0 0 1 4.587 5.47c0 3.069 0 8.597 -0.24 11.114a27.778 27.778 0 0 1 -5.4 15.859 18.737 18.737 0 0 1 -12.036 7.281l-0.324 0.035zm-12 -33.917c0 4.875 -0.147 8.28 0 9.9a22.722 22.722 0 0 0 4.461 13.146 12.67 12.67 0 0 0 7.539 4.815 12.664 12.664 0 0 0 7.536 -4.815 22.725 22.725 0 0 0 4.464 -13.146c0.147 -1.62 0 -5.025 0 -9.9l-12 -2.055 -12 2.055z"/>
+ </defs>
+ <svg width="16" height="20">
+ <defs>
+ <mask id="a">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.332 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ </defs>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#a)" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use href="#shape-0"/>
+ <path d="M11.681 12.84l-6.596 1.13c0.024 2.485 0.079 4.366 0.163 5.277a15.21 15.21 0 0 0 2.982 9.315 7.09 7.09 0 0 0 3.43 2.488h0.021v-18.21z" opacity=".419"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="16">
+ <defs>
+ <mask id="d">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.321 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="c">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="b">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#b)" opacity=".006" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#c)" opacity=".045" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#d)" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use href="#shape-0"/>
+ <path d="M11.556 12.862l-6.58 1.126c0.023 2.48 0.079 4.357 0.163 5.265a15.173 15.173 0 0 0 2.974 9.293 7.073 7.073 0 0 0 3.422 2.482h0.021v-18.166z" opacity=".412"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="32">
+ <defs>
+ <mask id="g">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.296 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="f">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="e">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#e)" opacity=".023" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#f)" opacity=".098" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#g)" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use href="#shape-0"/>
+ <path d="M11.432 12.883l-6.565 1.124c0.023 2.474 0.078 4.346 0.162 5.252a15.137 15.137 0 0 0 2.968 9.271 7.056 7.056 0 0 0 3.414 2.477h0.02v-18.124z" opacity=".404"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="48">
+ <defs>
+ <mask id="j">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.263 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="i">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="h">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#h)" opacity=".051" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#i)" opacity=".159" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#j)" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use href="#shape-0"/>
+ <path d="M11.307 12.905l-6.55 1.121c0.024 2.468 0.08 4.336 0.163 5.24a15.1 15.1 0 0 0 2.96 9.248 7.04 7.04 0 0 0 3.406 2.47h0.02v-18.078z" opacity=".397"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="64">
+ <defs>
+ <mask id="m">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.223 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="l">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="k">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#k)" opacity=".087" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#l)" opacity=".224" transform="translate(4.64 5.68) scale(.18672)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#m)" transform="translate(4.654 5.699) scale(.18588)">
+ <use href="#shape-0"/>
+ <path d="M11.182 12.927l-6.534 1.118c0.024 2.462 0.079 4.326 0.163 5.227a15.063 15.063 0 0 0 2.953 9.227 7.023 7.023 0 0 0 3.397 2.464h0.021v-18.036z" opacity=".39"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="80">
+ <defs>
+ <mask id="p">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.178 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="o">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="n">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#n)" opacity=".132" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#o)" opacity=".294" transform="translate(4.308 5.285) scale(.20512)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#p)" transform="translate(4.364 5.352) scale(.20198)">
+ <use href="#shape-0"/>
+ <path d="M11.058 12.948l-6.518 1.116c0.023 2.456 0.078 4.315 0.161 5.215a15.029 15.029 0 0 0 2.946 9.204 7.006 7.006 0 0 0 3.39 2.459h0.02v-17.994z" opacity=".382"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="96">
+ <defs>
+ <mask id="s">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.13 59.76l5.5 5.5 40.855 -40.854 -5.5 -5.5 -40.855 40.854" filter="null"/>
+ </mask>
+ <mask id="r">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="q">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#q)" opacity=".183" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#r)" opacity=".367" transform="translate(3.813 4.694) scale(.23261)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#s)" transform="translate(3.931 4.835) scale(.22603)">
+ <use href="#shape-0"/>
+ <path d="M10.933 12.97l-6.502 1.113c0.023 2.45 0.078 4.305 0.161 5.202a14.984 14.984 0 0 0 2.94 9.182 6.99 6.99 0 0 0 3.38 2.453h0.021v-17.95z" opacity=".375"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="112">
+ <defs>
+ <mask id="v">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.08 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="u">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="t">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#t)" opacity=".239" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#u)" opacity=".442" transform="translate(3.202 3.964) scale(.26658)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#v)" transform="translate(3.396 4.196) scale(.25575)">
+ <use href="#shape-0"/>
+ <path d="M10.809 12.991l-6.487 1.11c0.023 2.445 0.078 4.295 0.16 5.19a14.957 14.957 0 0 0 2.933 9.16 6.972 6.972 0 0 0 3.373 2.448h0.021v-17.909z" opacity=".368"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="128">
+ <defs>
+ <mask id="y">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.027 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="x">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="w">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#w)" opacity=".301" transform="translate(4.627 5.667) scale(.18737)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#x)" opacity=".517" transform="translate(2.52 3.15) scale(.30443)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#y)" transform="translate(2.8 3.484) scale(.28887)">
+ <use href="#shape-0"/>
+ <path d="M10.685 13.013l-6.472 1.107c0.024 2.438 0.078 4.284 0.16 5.177a14.921 14.921 0 0 0 2.927 9.139 6.956 6.956 0 0 0 3.365 2.441h0.02v-17.864z" opacity=".36"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="144">
+ <defs>
+ <mask id="B">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.973 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="A">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="z">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#z)" opacity=".365" transform="translate(4.268 5.237) scale(.20736)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#A)" opacity=".591" transform="translate(1.816 2.308) scale(.34357)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#B)" transform="translate(2.184 2.748) scale(.32313)">
+ <use href="#shape-0"/>
+ <path d="M10.56 13.034l-6.454 1.106c0.023 2.433 0.077 4.274 0.16 5.165a14.885 14.885 0 0 0 2.918 9.117 6.939 6.939 0 0 0 3.357 2.435h0.02v-17.823z" opacity=".353"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="160">
+ <defs>
+ <mask id="E">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.917 59.76l5.5 5.5 40.853 -40.854 -5.5 -5.5 -40.853 40.854" filter="null"/>
+ </mask>
+ <mask id="D">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="C">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#C)" opacity=".432" transform="translate(3.738 4.604) scale(.2368)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#D)" opacity=".663" transform="translate(1.134 1.494) scale(.38142)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#E)" transform="translate(1.588 2.036) scale(.35625)">
+ <use href="#shape-0"/>
+ <path d="M10.437 13.056l-6.44 1.102c0.023 2.427 0.077 4.264 0.16 5.152a14.85 14.85 0 0 0 2.91 9.095 6.922 6.922 0 0 0 3.35 2.43h0.02v-17.78z" opacity=".346"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="176">
+ <defs>
+ <mask id="H">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.86 59.76l5.5 5.5 40.853 -40.854 -5.5 -5.5 -40.853 40.854" filter="null"/>
+ </mask>
+ <mask id="G">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="F">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#F)" opacity=".5" transform="translate(3.095 3.836) scale(.27252)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#G)" opacity=".731" transform="translate(.523 .764) scale(.41539)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#H)" transform="translate(1.053 1.397) scale(.38597)">
+ <use href="#shape-0"/>
+ <path d="M10.314 13.077l-6.425 1.1c0.023 2.42 0.077 4.253 0.159 5.14a14.814 14.814 0 0 0 2.904 9.073 6.906 6.906 0 0 0 3.341 2.423h0.02v-17.736z" opacity=".338"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="192">
+ <defs>
+ <mask id="K">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.8 59.76l5.5 5.5 40.855 -40.854 -5.5 -5.5 -40.855 40.854" filter="null"/>
+ </mask>
+ <mask id="J">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="I">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#I)" opacity=".568" transform="translate(2.395 3) scale(.3114)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#J)" opacity=".795" transform="translate(.028 .173) scale(.44288)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#K)" transform="translate(.62 .88) scale(.41002)">
+ <use href="#shape-0"/>
+ <path d="M10.19 13.098l-6.41 1.098c0.024 2.415 0.078 4.243 0.16 5.127a14.778 14.778 0 0 0 2.897 9.051 6.89 6.89 0 0 0 3.333 2.418h0.02v-17.694z" opacity=".331"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="208">
+ <defs>
+ <mask id="N">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.741 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="M">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="L">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#L)" opacity=".635" transform="translate(1.695 2.164) scale(.35028)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#M)" opacity=".852" transform="translate(-.303 -.223) scale(.46128)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#N)" transform="translate(.33 .533) scale(.42612)">
+ <use href="#shape-0"/>
+ <path d="M10.067 13.12l-6.394 1.094c0.023 2.41 0.077 4.233 0.159 5.115a14.747 14.747 0 0 0 2.89 9.03 6.873 6.873 0 0 0 3.325 2.412h0.02v-17.652z" opacity=".324"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="224">
+ <defs>
+ <mask id="Q">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.68 59.76l5.5 5.5 40.855 -40.854 -5.5 -5.5 -40.855 40.854" filter="null"/>
+ </mask>
+ <mask id="P">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="O">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#O)" opacity=".699" transform="matrix(.386 0 0 .386 1.052 1.396)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#P)" opacity=".902" transform="matrix(.468 0 0 .468 -.424 -.367)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#Q)" transform="matrix(.432 0 0 .432 .224 .407)">
+ <use href="#shape-0"/>
+ <path d="M9.944 13.14l-6.378 1.093c0.023 2.403 0.076 4.222 0.158 5.103a14.707 14.707 0 0 0 2.883 9.007 6.856 6.856 0 0 0 3.317 2.406h0.02v-17.608z" opacity=".316"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="240">
+ <defs>
+ <mask id="T">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.62 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="S">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="R">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#R)" opacity=".761" transform="translate(.522 .763) scale(.41544)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#S)" opacity=".943" transform="translate(-.402 -.34) scale(.46679)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#T)" transform="translate(.24 .427) scale(.43108)">
+ <use href="#shape-0"/>
+ <path d="M9.822 13.162l-6.364 1.09c0.023 2.397 0.077 4.212 0.158 5.09a14.67 14.67 0 0 0 2.877 8.986 6.84 6.84 0 0 0 3.309 2.4h0.02v-17.566z" opacity=".309"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="256">
+ <defs>
+ <mask id="W">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.558 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="V">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="U">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#U)" opacity=".817" transform="translate(.162 .333) scale(.43543)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#V)" opacity=".974" transform="translate(-.34 -.267) scale(.46335)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#W)" transform="translate(.287 .482) scale(.4285)">
+ <use href="#shape-0"/>
+ <path d="M9.7 13.183l-6.348 1.087c0.022 2.392 0.076 4.202 0.157 5.078a14.637 14.637 0 0 0 2.87 8.965 6.823 6.823 0 0 0 3.3 2.394h0.02v-17.524z" opacity=".301"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="272">
+ <defs>
+ <mask id="Z">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.496 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="Y">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="X">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#X)" opacity=".868" transform="translate(.03 .175) scale(.4428)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#Y)" opacity=".993" transform="translate(-.244 -.153) scale(.45802)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#Z)" transform="translate(.359 .568) scale(.4245)">
+ <use href="#shape-0"/>
+ <path d="M9.578 13.204l-6.333 1.084c0.023 2.386 0.076 4.192 0.157 5.066a14.594 14.594 0 0 0 2.863 8.943 6.807 6.807 0 0 0 3.293 2.39h0.02v-17.484z" opacity=".294"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="288">
+ <defs>
+ <mask id="ac">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.433 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="ab">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aa">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aa)" opacity=".913" transform="translate(.046 .195) scale(.44187)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ab)" transform="translate(-.12 -.004) scale(.45111)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ac)" transform="translate(.451 .679) scale(.41936)">
+ <use href="#shape-0"/>
+ <path d="M9.457 13.225l-6.318 1.081c0.022 2.38 0.076 4.183 0.156 5.055a14.567 14.567 0 0 0 2.856 8.921 6.79 6.79 0 0 0 3.285 2.383h0.02v-17.44z" opacity=".287"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="304">
+ <defs>
+ <mask id="af">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.37 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="ae">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ad">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ad)" opacity=".949" transform="translate(.094 .251) scale(.43924)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ae)" transform="translate(.027 .172) scale(.44294)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#af)" transform="translate(.56 .808) scale(.41333)">
+ <use href="#shape-0"/>
+ <path d="M9.336 13.246l-6.303 1.079c0.023 2.374 0.075 4.172 0.156 5.042a14.536 14.536 0 0 0 2.849 8.9 6.774 6.774 0 0 0 3.277 2.377h0.02v-17.398z" opacity=".279"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="320">
+ <defs>
+ <mask id="ai">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.307 59.76l5.5 5.5 40.853 -40.854 -5.5 -5.5 -40.853 40.854" filter="null"/>
+ </mask>
+ <mask id="ah">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ag">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ag)" opacity=".977" transform="translate(.167 .34) scale(.43515)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ah)" transform="translate(.191 .368) scale(.43382)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ai)" transform="translate(.68 .952) scale(.40665)">
+ <use href="#shape-0"/>
+ <path d="M9.215 13.266l-6.288 1.077c0.023 2.369 0.076 4.162 0.156 5.03a14.497 14.497 0 0 0 2.842 8.879 6.758 6.758 0 0 0 3.27 2.372h0.02v-17.358z" opacity=".272"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="336">
+ <defs>
+ <mask id="al">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.244 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="ak">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aj">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aj)" opacity=".994" transform="translate(.263 .453) scale(.42985)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ak)" transform="translate(.367 .578) scale(.42407)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#al)" transform="translate(.807 1.104) scale(.3996)">
+ <use href="#shape-0"/>
+ <path d="M9.095 13.287l-6.273 1.074c0.023 2.363 0.075 4.152 0.156 5.018a14.463 14.463 0 0 0 2.835 8.858 6.742 6.742 0 0 0 3.262 2.366h0.02v-17.316z" opacity=".265"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="352">
+ <defs>
+ <mask id="ao">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.18 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="an">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="am">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#am)" transform="translate(.375 .588) scale(.42359)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#an)" transform="matrix(.414 0 0 .414 .548 .794)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ao)" transform="translate(.937 1.258) scale(.3924)">
+ <use href="#shape-0"/>
+ <path d="M8.975 13.308l-6.258 1.071c0.023 2.358 0.076 4.143 0.156 5.006a14.428 14.428 0 0 0 2.827 8.837 6.726 6.726 0 0 0 3.254 2.36h0.02v-17.274z" opacity=".257"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="368">
+ <defs>
+ <mask id="ar">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.116 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aq">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ap">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ap)" transform="translate(.501 .738) scale(.4166)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aq)" transform="translate(.73 1.01) scale(.40393)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ar)" transform="translate(1.064 1.41) scale(.38535)">
+ <use href="#shape-0"/>
+ <path d="M8.856 13.328l-6.243 1.069c0.023 2.352 0.075 4.133 0.155 4.994a14.394 14.394 0 0 0 2.822 8.816 6.71 6.71 0 0 0 3.246 2.355h0.02v-17.234z" opacity=".25"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="384">
+ <defs>
+ <mask id="au">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M11.053 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="at">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="as">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#as)" transform="translate(.636 .899) scale(.40912)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#at)" transform="translate(.905 1.22) scale(.39418)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#au)" transform="translate(1.184 1.554) scale(.37867)">
+ <use href="#shape-0"/>
+ <path d="M8.738 13.349l-6.229 1.066c0.023 2.347 0.075 4.123 0.155 4.982a14.36 14.36 0 0 0 2.815 8.795 6.694 6.694 0 0 0 3.239 2.35h0.02v-17.194z" opacity=".243"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="400">
+ <defs>
+ <mask id="ax">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.989 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aw">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="av">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#av)" transform="translate(.775 1.065) scale(.4014)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aw)" transform="translate(1.069 1.416) scale(.38506)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ax)" transform="translate(1.293 1.683) scale(.37264)">
+ <use href="#shape-0"/>
+ <path d="M8.62 13.369l-6.214 1.064c0.023 2.34 0.075 4.113 0.154 4.97a14.326 14.326 0 0 0 2.809 8.774 6.678 6.678 0 0 0 3.23 2.344h0.02v-17.151z" opacity=".235"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="416">
+ <defs>
+ <mask id="aA">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.925 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="az">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ay">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ay)" transform="translate(.914 1.23) scale(.39368)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#az)" transform="translate(1.216 1.592) scale(.37689)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aA)" transform="translate(1.385 1.794) scale(.3675)">
+ <use href="#shape-0"/>
+ <path d="M8.502 13.389l-6.199 1.061c0.023 2.336 0.075 4.104 0.154 4.96a14.293 14.293 0 0 0 2.802 8.753 6.663 6.663 0 0 0 3.223 2.337h0.02v-17.111z" opacity=".228"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="432">
+ <defs>
+ <mask id="aD">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.862 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aC">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aB">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aB)" transform="translate(1.048 1.392) scale(.3862)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aC)" transform="translate(1.34 1.74) scale(.36998)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aD)" transform="translate(1.457 1.88) scale(.3635)">
+ <use href="#shape-0"/>
+ <path d="M8.386 13.409l-6.186 1.059c0.023 2.33 0.075 4.094 0.154 4.947a14.26 14.26 0 0 0 2.795 8.733 6.647 6.647 0 0 0 3.216 2.333h0.02v-17.072z" opacity=".221"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="448">
+ <defs>
+ <mask id="aG">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.799 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aF">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aE">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aE)" transform="translate(1.174 1.542) scale(.37921)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aF)" transform="translate(1.436 1.855) scale(.36465)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aG)" transform="translate(1.503 1.935) scale(.36092)">
+ <use href="#shape-0"/>
+ <path d="M8.27 13.429l-6.17 1.056c0.022 2.325 0.074 4.085 0.153 4.936a14.226 14.226 0 0 0 2.789 8.713 6.632 6.632 0 0 0 3.208 2.326h0.02v-17.03z" opacity=".213"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="464">
+ <defs>
+ <mask id="aJ">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.736 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aI">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aH">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aH)" transform="translate(1.287 1.677) scale(.37295)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aI)" transform="translate(1.498 1.929) scale(.36121)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aJ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M8.155 13.449l-6.156 1.053c0.022 2.32 0.074 4.075 0.153 4.925a14.193 14.193 0 0 0 2.782 8.692 6.616 6.616 0 0 0 3.2 2.322h0.02v-16.991z" opacity=".206"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="480">
+ <defs>
+ <mask id="aM">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.673 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aL">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.077 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aK">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aK)" transform="translate(1.382 1.79) scale(.36765)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aL)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aM)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M8.04 13.468l-6.14 1.052c0.022 2.314 0.073 4.065 0.152 4.913a14.16 14.16 0 0 0 2.776 8.672 6.6 6.6 0 0 0 3.193 2.317h0.02v-16.954z" opacity=".199"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="496">
+ <defs>
+ <mask id="aP">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.61 59.76l5.5 5.5 40.855 -40.854 -5.5 -5.5 -40.855 40.854" filter="null"/>
+ </mask>
+ <mask id="aO">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M8.243 58.758l6.362 6.474 40.854 -40.854 -6.355 -6.474 -40.861 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aN">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aN)" transform="translate(1.456 1.878) scale(.36356)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aO)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aP)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.927 13.488l-6.128 1.049c0.022 2.308 0.074 4.056 0.152 4.902a14.134 14.134 0 0 0 2.77 8.652 6.586 6.586 0 0 0 3.186 2.311h0.02v-16.914z" opacity=".191"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="512">
+ <defs>
+ <mask id="aS">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.55 59.76l5.498 5.5 40.855 -40.854 -5.5 -5.5 -40.853 40.854" filter="null"/>
+ </mask>
+ <mask id="aR">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M5.98 56.039l8.701 9.117 40.854 -40.854 -8.675 -9.117 -40.88 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aQ">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aQ)" transform="translate(1.503 1.935) scale(.36093)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aR)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aS)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.814 13.507l-6.113 1.047c0.022 2.303 0.073 4.047 0.151 4.89a14.095 14.095 0 0 0 2.764 8.633 6.57 6.57 0 0 0 3.178 2.306h0.02v-16.876z" opacity=".184"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="528">
+ <defs>
+ <mask id="aV">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.488 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aU">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M2.648 52.034l12.145 13.01 40.854 -40.854 -12.091 -13.01 -40.908 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aT">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aT)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aU)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aV)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.702 13.526l-6.099 1.044c0.022 2.299 0.073 4.038 0.151 4.88a14.063 14.063 0 0 0 2.757 8.613 6.556 6.556 0 0 0 3.172 2.3h0.02v-16.836z" opacity=".176"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="544">
+ <defs>
+ <mask id="aY">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.428 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="aX">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-1.397 47.174l16.326 17.734 40.854 -40.854 -16.238 -17.734 -40.942 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aW">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aW)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#aX)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#aY)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.592 13.545l-6.086 1.042c0.022 2.293 0.073 4.029 0.151 4.869a14.037 14.037 0 0 0 2.75 8.593 6.541 6.541 0 0 0 3.165 2.296h0.02v-16.8z" opacity=".169"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="560">
+ <defs>
+ <mask id="bb">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.368 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="ba">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-5.798 41.885l20.875 22.875 40.854 -40.854 -20.75 -22.875 -40.979 40.854" filter="null"/>
+ </mask>
+ <clipPath id="aZ">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#aZ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ba)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bb)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.482 13.564l-6.072 1.04c0.022 2.287 0.073 4.02 0.15 4.857a14 14 0 0 0 2.745 8.575 6.527 6.527 0 0 0 3.158 2.29h0.02v-16.762z" opacity=".162"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="576">
+ <defs>
+ <mask id="be">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.31 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bd">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-10.199 36.596l25.424 28.016 40.854 -40.854 -25.262 -28.016 -41.016 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bc">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bc)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bd)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#be)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.374 13.582l-6.059 1.038c0.022 2.283 0.073 4.01 0.15 4.847a13.97 13.97 0 0 0 2.74 8.555 6.512 6.512 0 0 0 3.15 2.286h0.019v-16.726z" opacity=".154"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="592">
+ <defs>
+ <mask id="bh">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.252 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bg">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-14.244 31.736l29.605 32.74 40.854 -40.854 -29.409 -32.74 -41.05 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bf">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bf)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bg)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bh)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.267 13.6l-6.045 1.036c0.021 2.278 0.072 4.002 0.15 4.836a13.939 13.939 0 0 0 2.732 8.537 6.498 6.498 0 0 0 3.144 2.28h0.019v-16.688z" opacity=".147"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="608">
+ <defs>
+ <mask id="bk">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.196 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bj">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-17.576 27.731l33.049 36.633 40.854 -40.854 -32.825 -36.633 -41.078 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bi">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bi)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bj)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bk)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.161 13.619l-6.031 1.031c0.022 2.273 0.072 3.994 0.15 4.826a13.909 13.909 0 0 0 2.726 8.519 6.484 6.484 0 0 0 3.137 2.275h0.02v-16.65z" opacity=".14"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="624">
+ <defs>
+ <mask id="bn">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.142 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bm">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-19.839 25.012l35.389 39.276 40.854 -40.854 -35.145 -39.276 -41.097 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bl">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bl)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bm)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bn)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M7.057 13.636l-6.02 1.031c0.022 2.268 0.073 3.985 0.15 4.816a13.879 13.879 0 0 0 2.72 8.5 6.47 6.47 0 0 0 3.13 2.27h0.02v-16.616z" opacity=".132"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="640">
+ <defs>
+ <mask id="bq">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.089 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bp">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 24.01l36.25 40.25 40.854 -40.854 -36 -40.25 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bo">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bo)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bp)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bq)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.954 13.654l-6.006 1.028c0.021 2.264 0.072 3.977 0.149 4.806a13.85 13.85 0 0 0 2.715 8.482 6.456 6.456 0 0 0 3.123 2.266h0.02v-16.582z" opacity=".125"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="656">
+ <defs>
+ <mask id="bt">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M10.038 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bs">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 23.72l36.25 40.25 40.854 -40.855 -36 -40.25 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="br">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#br)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bs)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bt)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.853 13.671l-5.993 1.026c0.022 2.26 0.072 3.969 0.149 4.796a13.815 13.815 0 0 0 2.71 8.465 6.443 6.443 0 0 0 3.116 2.26h0.02v-16.546z" opacity=".118"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="672">
+ <defs>
+ <mask id="bw">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.99 59.76l5.5 5.5 40.855 -40.854 -5.5 -5.5 -40.855 40.854" filter="null"/>
+ </mask>
+ <mask id="bv">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 23.243l36.25 40.25 40.854 -40.853 -36 -40.25 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bu">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bu)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bv)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bw)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.754 13.688l-5.982 1.024c0.022 2.254 0.072 3.96 0.149 4.786a13.793 13.793 0 0 0 2.703 8.447 6.43 6.43 0 0 0 3.111 2.257h0.02v-16.514z" opacity=".11"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="688">
+ <defs>
+ <mask id="bz">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.946 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="by">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 22.74l36.25 40.25 40.854 -40.855 -36 -40.25 -41.104 40.855" filter="null"/>
+ </mask>
+ <clipPath id="bx">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bx)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#by)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bz)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.657 13.705l-5.97 1.022c0.022 2.25 0.072 3.952 0.148 4.776a13.765 13.765 0 0 0 2.699 8.43 6.417 6.417 0 0 0 3.104 2.252h0.02v-16.48z" opacity=".103"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="704">
+ <defs>
+ <mask id="bC">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.906 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bB">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 22.261l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bA">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bA)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bB)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bC)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.562 13.72l-5.958 1.02c0.021 2.246 0.071 3.945 0.147 4.768a13.738 13.738 0 0 0 2.694 8.414 6.404 6.404 0 0 0 3.098 2.247h0.02v-16.448z" opacity=".096"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="720">
+ <defs>
+ <mask id="bF">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.873 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bE">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.845l36.25 40.25 40.854 -40.855 -36 -40.25 -41.104 40.855" filter="null"/>
+ </mask>
+ <clipPath id="bD">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bD)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bE)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bF)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.47 13.737l-5.949 1.018c0.022 2.24 0.072 3.937 0.148 4.757a13.712 13.712 0 0 0 2.688 8.398 6.392 6.392 0 0 0 3.092 2.243h0.02v-16.416z" opacity=".088"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="736">
+ <defs>
+ <mask id="bI">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.848 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bH">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.536l36.25 40.25 40.854 -40.856 -36 -40.25 -41.104 40.855" filter="null"/>
+ </mask>
+ <clipPath id="bG">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bG)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bH)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bI)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.38 13.752l-5.938 1.016c0.022 2.237 0.072 3.93 0.148 4.749a13.684 13.684 0 0 0 2.683 8.382 6.38 6.38 0 0 0 3.086 2.24h0.02v-16.388z" opacity=".081"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="752">
+ <defs>
+ <mask id="bL">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M9.837 59.76l5.499 5.5 40.855 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ <mask id="bK">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bJ">
+ <path fill="#fff" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bJ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bK)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bL)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.292 13.767l-5.925 1.013c0.021 2.233 0.07 3.923 0.147 4.74a13.662 13.662 0 0 0 2.678 8.367 6.369 6.369 0 0 0 3.081 2.235h0.019v-16.355z" opacity=".074"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="768">
+ <defs>
+ <mask id="bO">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M8.982 58.685l6.36 6.474 40.856 -40.854 -6.355 -6.474 -40.861 40.854" filter="null"/>
+ </mask>
+ <mask id="bN">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l35.326 39.218 40.854 -40.854 -35.077 -39.218 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bM">
+ <path fill="#fff" d="M-20.673 21.406l35.326 39.218 40.854 -40.854 -35.077 -39.218 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bM)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bN)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bO)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.208 13.781l-5.915 1.013c0.021 2.228 0.07 3.915 0.147 4.731a13.638 13.638 0 0 0 2.673 8.353 6.357 6.357 0 0 0 3.076 2.231h0.019v-16.328z" opacity=".066"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="784">
+ <defs>
+ <mask id="bR">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M6.661 55.768l8.7 9.117 40.855 -40.855 -8.675 -9.117 -40.88 40.854" filter="null"/>
+ </mask>
+ <mask id="bQ">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l32.996 36.617 40.854 -40.855 -32.746 -36.616 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bP">
+ <path fill="#fff" d="M-20.673 21.406l32.996 36.617 40.854 -40.855 -32.746 -36.616 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bP)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bQ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bR)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.127 13.795l-5.905 1.01c0.021 2.226 0.071 3.91 0.147 4.724a13.615 13.615 0 0 0 2.669 8.339 6.347 6.347 0 0 0 3.07 2.227h0.019v-16.3z" opacity=".059"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="800">
+ <defs>
+ <mask id="bU">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M3.244 51.471l12.144 13.01 40.855 -40.854 -12.091 -13.01 -40.908 40.854" filter="null"/>
+ </mask>
+ <mask id="bT">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l29.705 32.942 40.854 -40.854 -29.455 -32.942 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bS">
+ <path fill="#fff" d="M-20.673 21.406l29.705 32.942 40.854 -40.854 -29.455 -32.942 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bS)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bT)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bU)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.05 13.808l-5.895 1.009c0.02 2.221 0.07 3.903 0.146 4.716a13.593 13.593 0 0 0 2.665 8.326 6.337 6.337 0 0 0 3.065 2.223h0.02v-16.274z" opacity=".051"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="816">
+ <defs>
+ <mask id="bX">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-0.905 46.257l16.326 17.733 40.854 -40.854 -16.238 -17.733 -40.942 40.854" filter="null"/>
+ </mask>
+ <mask id="bW">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l25.735 28.51 40.854 -40.856 -25.486 -28.508 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bV">
+ <path fill="#fff" d="M-20.673 21.406l25.735 28.51 40.854 -40.856 -25.486 -28.508 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bV)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bW)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#bX)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.978 13.82l-5.888 1.008c0.021 2.218 0.07 3.897 0.146 4.709a13.573 13.573 0 0 0 2.66 8.313 6.327 6.327 0 0 0 3.062 2.22h0.019v-16.25z" opacity=".044"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="832">
+ <defs>
+ <mask id="ca">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-5.418 40.583l20.874 22.875 40.855 -40.855 -20.75 -22.873 -40.979 40.853" filter="null"/>
+ </mask>
+ <mask id="bZ">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l21.293 23.55 40.854 -40.854 -21.043 -23.55 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="bY">
+ <path fill="#fff" d="M-20.673 21.406l21.293 23.55 40.854 -40.854 -21.043 -23.55 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#bY)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#bZ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#ca)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.91 13.831l-5.878 1.007c0.021 2.215 0.07 3.891 0.146 4.702a13.554 13.554 0 0 0 2.657 8.301 6.318 6.318 0 0 0 3.057 2.218h0.018v-16.229z" opacity=".037"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="848">
+ <defs>
+ <mask id="cd">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-9.931 34.91l25.423 28.015 40.855 -40.855 -25.262 -28.015 -41.016 40.855" filter="null"/>
+ </mask>
+ <mask id="cc">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l16.556 18.262 40.854 -40.855 -16.306 -18.261 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cb">
+ <path fill="#fff" d="M-20.673 21.406l16.556 18.262 40.854 -40.855 -16.306 -18.261 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cb)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#cc)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cd)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.849 13.842l-5.871 1.005c0.02 2.212 0.07 3.886 0.145 4.696a13.534 13.534 0 0 0 2.654 8.291 6.31 6.31 0 0 0 3.053 2.214h0.019v-16.206z" opacity=".029"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="864">
+ <defs>
+ <mask id="cg">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-14.08 29.695l29.605 32.74 40.854 -40.855 -29.409 -32.74 -41.05 40.855" filter="null"/>
+ </mask>
+ <mask id="cf">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l11.706 12.846 40.854 -40.855 -11.457 -12.845 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ce">
+ <path fill="#fff" d="M-20.673 21.406l11.706 12.846 40.854 -40.855 -11.457 -12.845 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ce)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#cf)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cg)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.794 13.85l-5.865 1.005c0.022 2.21 0.07 3.882 0.146 4.691a13.521 13.521 0 0 0 2.65 8.281 6.303 6.303 0 0 0 3.05 2.212h0.019v-16.188z" opacity=".022"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="880">
+ <defs>
+ <mask id="cj">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-17.497 25.398l33.049 36.633 40.854 -40.855 -32.825 -36.632 -41.078 40.854" filter="null"/>
+ </mask>
+ <mask id="ci">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l6.979 7.569 40.854 -40.855 -6.729 -7.568 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ch">
+ <path fill="#fff" d="M-20.673 21.406l6.979 7.569 40.854 -40.855 -6.729 -7.568 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ch)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#ci)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cj)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.747 13.859l-5.859 1.003c0.021 2.207 0.07 3.878 0.145 4.686a13.508 13.508 0 0 0 2.649 8.274 6.297 6.297 0 0 0 3.046 2.21h0.019v-16.174z" opacity=".015"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="896">
+ <defs>
+ <mask id="cm">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-19.818 22.481l35.388 39.276 40.854 -40.855 -35.144 -39.275 -41.097 40.854" filter="null"/>
+ </mask>
+ <mask id="cl">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l2.805 2.908 40.854 -40.854 -2.555 -2.908 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ck">
+ <path fill="#fff" d="M-20.673 21.406l2.805 2.908 40.854 -40.854 -2.555 -2.908 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ck)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#cl)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="#ED00B5" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cm)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.71 13.865l-5.855 1.002c0.022 2.206 0.07 3.875 0.146 4.683a13.498 13.498 0 0 0 2.646 8.267 6.292 6.292 0 0 0 3.044 2.208h0.019v-16.16z" opacity=".007"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="912">
+ <defs>
+ <mask id="co">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cn">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cn)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g mask="url(#co)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="928">
+ <defs>
+ <mask id="cq">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cp">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cp)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cq)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M5.675 13.87l-5.85 1.002c0.021 2.204 0.07 3.873 0.145 4.68a13.488 13.488 0 0 0 2.644 8.26 6.288 6.288 0 0 0 3.042 2.208h0.019v-16.15z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="944">
+ <defs>
+ <mask id="cs">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cr">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cr)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cs)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.013 13.743l-5.943 1.018c0.02 2.239 0.07 3.933 0.147 4.753a13.7 13.7 0 0 0 2.686 8.391 6.387 6.387 0 0 0 3.09 2.242h0.019v-16.404z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="960">
+ <defs>
+ <mask id="cu">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="ct">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#ct)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cu)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M6.896 13.51l-6.111 1.044c0.022 2.303 0.073 4.046 0.151 4.89a14.092 14.092 0 0 0 2.763 8.63 6.57 6.57 0 0 0 3.178 2.306h0.02v-16.871z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="976">
+ <defs>
+ <mask id="cw">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cv">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cv)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cw)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M8.187 13.24l-6.307 1.08c0.023 2.376 0.076 4.175 0.156 5.045a14.542 14.542 0 0 0 2.851 8.906 6.779 6.779 0 0 0 3.28 2.38h0.02v-17.411z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="992">
+ <defs>
+ <mask id="cy">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cx">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cx)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cy)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M9.763 12.96l-6.51 1.114c0.023 2.453 0.078 4.31 0.161 5.208a15.01 15.01 0 0 0 2.943 9.193 6.997 6.997 0 0 0 3.385 2.456h0.02v-17.972z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1008">
+ <defs>
+ <mask id="cA">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cz">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cz)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cA)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M11.506 12.68l-6.711 1.15c0.024 2.529 0.08 4.443 0.166 5.37a15.475 15.475 0 0 0 3.034 9.477 7.214 7.214 0 0 0 3.49 2.532h0.021v-18.528z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1024">
+ <defs>
+ <mask id="cC">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cB">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cB)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cC)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M13.302 12.414l-6.905 1.182c0.025 2.602 0.083 4.571 0.171 5.524a15.921 15.921 0 0 0 3.121 9.751 7.422 7.422 0 0 0 3.591 2.605h0.022v-19.062z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1040">
+ <defs>
+ <mask id="cE">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cD">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cD)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cE)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M15.035 12.167l-7.085 1.212c0.026 2.67 0.085 4.69 0.176 5.668a16.334 16.334 0 0 0 3.202 10.004 7.615 7.615 0 0 0 3.684 2.672h0.023v-19.556z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1056">
+ <defs>
+ <mask id="cG">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cF">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cF)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cG)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M16.588 11.948l-7.243 1.24c0.026 2.729 0.087 4.795 0.18 5.794a16.7 16.7 0 0 0 3.274 10.228 7.785 7.785 0 0 0 3.766 2.732h0.023v-19.994z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1072">
+ <defs>
+ <mask id="cI">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cH">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cH)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cI)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M17.846 11.768l-7.373 1.262c0.026 2.779 0.088 4.881 0.183 5.899a17 17 0 0 0 3.332 10.412 7.925 7.925 0 0 0 3.835 2.781h0.023v-20.354z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1088">
+ <defs>
+ <mask id="cK">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cJ">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cJ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cK)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.69 11.642l-7.464 1.278c0.027 2.813 0.09 4.942 0.185 5.972a17.21 17.21 0 0 0 3.374 10.54 8.023 8.023 0 0 0 3.882 2.816h0.024v-20.606z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1104">
+ <defs>
+ <mask id="cM">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cL">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cL)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cM)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M19 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1120">
+ <defs>
+ <mask id="cO">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cN">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cN)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cO)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.909 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1136">
+ <defs>
+ <mask id="cQ">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cP">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cP)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cQ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.753 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1152">
+ <defs>
+ <mask id="cS">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cR">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cR)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cS)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.584 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1168">
+ <defs>
+ <mask id="cU">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cT">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cT)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cU)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.418 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1184">
+ <defs>
+ <mask id="cW">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cV">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cV)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cW)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.265 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1200">
+ <defs>
+ <mask id="cY">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cX">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cX)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#cY)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.134 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1216">
+ <defs>
+ <mask id="da">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="cZ">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#cZ)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#da)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18.039 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1232">
+ <defs>
+ <mask id="dc">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M-20.673 21.406l36.25 40.25 40.854 -40.855 -36 -40.249 -41.104 40.854" filter="null"/>
+ </mask>
+ <clipPath id="db">
+ <path fill="#fff" d="M-20.673 21.406l0.486 0.319 40.854 -40.854 -0.236 -0.319 -41.104 40.854"/>
+ </clipPath>
+ </defs>
+ <g clip-path="url(#db)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use fill="context-fill" fill-opacity="context-fill-opacity" href="#shape-0"/>
+ </g>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#dc)" transform="matrix(.36 0 0 .36 1.52 1.955)">
+ <use href="#shape-0"/>
+ <path d="M18 11.593l-7.5 1.284c0.027 2.826 0.09 4.965 0.186 6a17.293 17.293 0 0 0 3.39 10.591 8.061 8.061 0 0 0 3.9 2.829h0.024v-20.704z"/>
+ </g>
+ </svg>
+ <svg width="16" height="20" x="1248">
+ <defs>
+ <mask id="dd">
+ <path fill="#fff" stroke="#fff" stroke-width="0" d="M12.332 59.76l5.5 5.5 40.854 -40.854 -5.5 -5.5 -40.854 40.854" filter="null"/>
+ </mask>
+ </defs>
+ <g fill="context-fill" fill-opacity="context-fill-opacity" mask="url(#dd)" transform="matrix(.18 0 0 .18 4.76 5.825)">
+ <use href="#shape-0"/>
+ <path d="M11.681 12.84l-6.596 1.13c0.024 2.485 0.079 4.366 0.163 5.277a15.21 15.21 0 0 0 2.982 9.315 7.09 7.09 0 0 0 3.43 2.488h0.021v-18.21z" opacity=".419"/>
+ </g>
+ </svg>
+</svg>
--- a/browser/themes/shared/jar.inc.mn
+++ b/browser/themes/shared/jar.inc.mn
@@ -80,16 +80,17 @@
skin/classic/browser/notification-icons/screen-blocked.svg (../shared/notification-icons/screen-blocked.svg)
skin/classic/browser/notification-icons/screen.svg (../shared/notification-icons/screen.svg)
skin/classic/browser/notification-icons/update.svg (../shared/notification-icons/update.svg)
skin/classic/browser/notification-icons/midi.svg (../shared/notification-icons/midi.svg)
skin/classic/browser/notification-icons/webauthn.svg (../shared/notification-icons/webauthn.svg)
skin/classic/browser/tracking-protection.svg (../shared/identity-block/tracking-protection.svg)
skin/classic/browser/tracking-protection-disabled.svg (../shared/identity-block/tracking-protection-disabled.svg)
+ skin/classic/browser/tracking-protection-animation.svg (../shared/identity-block/tracking-protection-animation.svg)
skin/classic/browser/panel-icon-arrow-left.svg (../shared/panel-icon-arrow-left.svg)
skin/classic/browser/panel-icon-arrow-right.svg (../shared/panel-icon-arrow-right.svg)
skin/classic/browser/panel-icon-cancel.svg (../shared/panel-icon-cancel.svg)
#ifndef XP_MACOSX
skin/classic/browser/panel-icon-folder.svg (../shared/panel-icon-folder.svg)
#else
skin/classic/browser/panel-icon-magnifier.svg (../shared/panel-icon-magnifier.svg)
#endif
