From cdfbff0b6b5a8c5645ec4d08f019bb3b35112e1b Mon Sep 17 00:00:00 2001
From: Sunil Mohan Adapa <sunil@medhas.org>
Date: Wed, 19 Nov 2025 16:29:50 -0800
Subject: [PATCH] oidc: Style the page for authorizing an OIDC app

Tests:

- Appearance is acceptable: top margin, width of the readable text, heading
centering, list top/bottom margins, SVG icon for application, md mode icon size,
submit button width, margins.

Signed-off-by: Sunil Mohan Adapa <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
---
 debian/copyright                              |   1 +
 .../templates/oauth2_provider/authorize.html  |  69 +++
 static/themes/default/css/main.css            |  39 ++
 static/themes/default/img/application.svg     | 515 ++++++++++++++++++
 4 files changed, 624 insertions(+)
 create mode 100644 plinth/modules/oidc/templates/oauth2_provider/authorize.html
 create mode 100644 static/themes/default/img/application.svg

diff --git a/debian/copyright b/debian/copyright
index d3fb07094..52aac5e7c 100644
--- a/debian/copyright
+++ b/debian/copyright
@@ -79,6 +79,7 @@ Files: plinth/modules/ejabberd/static/icons/ejabberd.png
        plinth/modules/rssbridge/static/icons/rssbridge.svg
        plinth/modules/zoph/static/icons/zoph.png
        plinth/modules/zoph/static/icons/zoph.svg
+       static/themes/default/img/application.svg
        static/themes/default/img/network-connection.svg
        static/themes/default/img/network-connection-vertical.svg
        static/themes/default/img/network-ethernet.svg
diff --git a/plinth/modules/oidc/templates/oauth2_provider/authorize.html b/plinth/modules/oidc/templates/oauth2_provider/authorize.html
new file mode 100644
index 000000000..60d689d84
--- /dev/null
+++ b/plinth/modules/oidc/templates/oauth2_provider/authorize.html
@@ -0,0 +1,69 @@
+{% extends "base.html" %}
+{% comment %}
+# SPDX-License-Identifier: AGPL-3.0-or-later
+{% endcomment %}
+
+{% load i18n %}
+{% load static %}
+{% load bootstrap %}
+
+{% block wrapper %}
+  <div class="container narrow-container authorize-container">
+    <div class="d-flex flex-row align-items-center authorize-diagram">
+      <img src="{% static 'theme/img/application.svg' %}"
+           class="col-image network-entity" alt="{% trans "Application" %}"/>
+      <img src="{% static 'theme/img/network-connection.svg' %}"
+           class="col-image network-connection"
+           alt="{% trans "Connection" %}"/>
+      <img src="{% static 'theme/img/network-freedombox.svg' %}"
+           class="col-image network-entity" alt="{{ box_name }}"/>
+    </div>
+
+    <h3>{% trans "Authorize App" %}</h3>
+
+    {% if not error %}
+      <form id="authorizationForm" class="form form-authorize" method="post">
+        {% csrf_token %}
+
+        {% for field in form %}
+          {% if field.is_hidden %}
+            {{ field }}
+          {% endif %}
+        {% endfor %}
+
+        <ul class="list-group">
+          <li class="list-group-item">
+            {% trans application.name as app %}
+            {% blocktrans trimmed with username=request.user.username %}
+              <strong>{{ app }}</strong> wants to access your account <strong>
+                {{ username }}</strong>
+            {% endblocktrans %}
+          </li>
+          {% for scope in scopes_descriptions %}
+            <li class="list-group-item">{% trans scope %}</li>
+          {% endfor %}
+        </ul>
+
+        {{ form.errors }}
+        {{ form.non_field_errors }}
+
+        <div class="submit-container">
+          <input type="submit" class="btn btn-large btn-primary" name="allow"
+                 value="{% blocktrans trimmed with app=application.name %}
+                          Authorize {{ app }}
+                        {% endblocktrans %}"/>
+        </div>
+      </form>
+
+      <p class="text-secondary">
+        {% blocktrans trimmed with url=form.redirect_uri.value %}
+          Authorizing will redirect to {{ url }}
+        {% endblocktrans %}
+      </p>
+    {% else %}
+      <h3>{% trans "Error:" %} {{ error.error }}</h3>
+      <p>{{ error.description }}</p>
+    {% endif %}
+
+  </div>
+{% endblock %}
diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css
index d6d7ec504..d5808f69b 100644
--- a/static/themes/default/css/main.css
+++ b/static/themes/default/css/main.css
@@ -278,6 +278,11 @@ html {
     margin-bottom: 1.25rem;
 }
 
+.narrow-container {
+    max-width: 496px;
+    margin-top: 4rem;
+}
+
 /* When an exception's text is shown in message as alert component, don't
    overflow the alert's width. */
 .alert.d-flex div {
@@ -1028,3 +1033,37 @@ textarea.log {
     width: 100%;
     text-wrap: nowrap;
 }
+
+/*
+ * OpenID Connect Authorization page.
+ */
+.authorize-container img {
+    display: block;
+    width: 100%;
+}
+
+.authorize-container h3:first-of-type {
+    text-align: center;
+}
+
+.authorize-container ul {
+    margin-top: 3rem;
+    margin-bottom: 3rem;
+}
+
+.authorize-container .submit-container {
+    width: 100%;
+    margin: 4rem 0 1.5rem;
+}
+
+.authorize-container .submit-container input {
+    width: 100%;
+    white-space: normal;
+}
+
+@media (min-width: 576px) {
+    .authorize-diagram {
+        margin: 0 auto;
+        width: 80%;
+    }
+}
diff --git a/static/themes/default/img/application.svg b/static/themes/default/img/application.svg
new file mode 100644
index 000000000..f57bbb90a
--- /dev/null
+++ b/static/themes/default/img/application.svg
@@ -0,0 +1,515 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="48"
+   height="48"
+   version="1.1"
+   id="svg414"
+   sodipodi:docname="application.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview416"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="13.98009"
+     inkscape:cx="22.567808"
+     inkscape:cy="19.027059"
+     inkscape:window-width="3840"
+     inkscape:window-height="2089"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg414" />
+  <defs
+     id="defs324">
+    <path
+       id="l"
+       fill="#fff"
+       d="M18.788838 12.493138a6.7175145 6.7175145 0 1 1-13.4350291 0 6.7175145 6.7175145 0 1 1 13.4350291 0z"
+       overflow="visible"
+       style="marker:none" />
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter474"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix472" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter478"
+       x="-0.012892849"
+       y="-0.012892556"
+       width="1.0257857"
+       height="1.0257851">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix476" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter482"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix480" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter486"
+       x="-0.01358265"
+       y="-0.013582341"
+       width="1.0271653"
+       height="1.0271647">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix484" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter490"
+       x="-0.014009326"
+       y="-0.0233018"
+       width="1.0280187"
+       height="1.0466036">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix488" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter494"
+       x="-0.014009326"
+       y="-0.0233018"
+       width="1.0280187"
+       height="1.0466036">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix492" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter498"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix496" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter502"
+       x="-0.014009326"
+       y="-0.0233018"
+       width="1.0280187"
+       height="1.0466036">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix500" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter506"
+       x="-0.014336969"
+       y="-0.023846776"
+       width="1.0286739"
+       height="1.0476936">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix504" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter510"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix508" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter514"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix512" />
+    </filter>
+    <filter
+       style="color-interpolation-filters:sRGB;"
+       inkscape:label="Greyscale"
+       id="filter518"
+       x="0"
+       y="0"
+       width="1"
+       height="1">
+      <feColorMatrix
+         values="0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0.21 0.72 0.072 0 0 0 0 0 1 0 "
+         id="feColorMatrix516" />
+    </filter>
+  </defs>
+  <defs
+     id="defs366">
+    <linearGradient
+       id="a">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         id="stop326" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0"
+         id="stop328" />
+    </linearGradient>
+    <linearGradient
+       id="e">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         id="stop331" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity="0"
+         id="stop333" />
+    </linearGradient>
+    <linearGradient
+       id="d">
+      <stop
+         offset="0"
+         stop-color="#fff"
+         id="stop336" />
+      <stop
+         offset="1"
+         stop-color="#fff"
+         stop-opacity=".16494845"
+         id="stop338" />
+    </linearGradient>
+    <linearGradient
+       id="c">
+      <stop
+         offset="0"
+         id="stop341" />
+      <stop
+         offset="1"
+         stop-opacity="0"
+         id="stop343" />
+    </linearGradient>
+    <linearGradient
+       id="b">
+      <stop
+         offset="0"
+         stop-color="#d3e9ff"
+         id="stop346" />
+      <stop
+         offset=".15517241"
+         stop-color="#d3e9ff"
+         id="stop348" />
+      <stop
+         offset=".75"
+         stop-color="#4074ae"
+         id="stop350" />
+      <stop
+         offset="1"
+         stop-color="#36486c"
+         id="stop352" />
+    </linearGradient>
+    <linearGradient
+       xlink:href="#a"
+       id="i"
+       x1="-25.176178"
+       x2="-22.252472"
+       y1="30.057165"
+       y2="21.041553"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#a"
+       id="j"
+       x1="-25.176178"
+       x2="-22.113543"
+       y1="30.057165"
+       y2="22.661524"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#a"
+       id="m"
+       x1="-22.822565"
+       x2="-22.113543"
+       y1="28.337734"
+       y2="22.661524"
+       gradientUnits="userSpaceOnUse" />
+    <linearGradient
+       xlink:href="#a"
+       id="n"
+       x1="-21.658581"
+       x2="-21.962101"
+       y1="15.649428"
+       y2="21.336346"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#b"
+       id="g"
+       cx="18.247644"
+       cy="15.716079"
+       r="29.993349"
+       fx="18.247644"
+       fy="15.716079"
+       gradientTransform="scale(.99999 1.00001)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#c"
+       id="f"
+       cx="15.115514"
+       cy="63.965388"
+       r="12.289036"
+       fx="15.115514"
+       fy="63.965388"
+       gradientTransform="scale(1.64399 .60828)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#d"
+       id="h"
+       cx="15.601279"
+       cy="12.142302"
+       r="43.526714"
+       fx="15.601279"
+       fy="12.142302"
+       gradientTransform="scale(.99999 1.00001)"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#e"
+       id="o"
+       cx="12.071323"
+       cy="12.493138"
+       r="6.7175145"
+       fx="12.071323"
+       fy="12.493138"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#e"
+       id="p"
+       cx="12.071323"
+       cy="12.493138"
+       r="6.7175145"
+       fx="12.071323"
+       fy="12.493138"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#e"
+       id="k"
+       cx="12.071323"
+       cy="12.493138"
+       r="6.7175145"
+       fx="12.071323"
+       fy="12.493138"
+       gradientUnits="userSpaceOnUse" />
+    <radialGradient
+       xlink:href="#e"
+       id="q"
+       cx="12.071323"
+       cy="12.493138"
+       r="6.7175145"
+       fx="12.071323"
+       fy="12.493138"
+       gradientUnits="userSpaceOnUse" />
+  </defs>
+  <path
+     fill="url(#f)"
+     d="M45.052803 38.908627a20.203051 7.4751287 0 1 1-40.4061012 0 20.203051 7.4751287 0 1 1 40.4061012 0z"
+     transform="matrix(1 0 0 1.24324 0 -10.27241)"
+     id="path368"
+     style="filter:url(#filter474)" />
+  <path
+     fill="url(#g)"
+     stroke="#39396c"
+     d="M43.959853 23.485499c0 10.709718-8.682103 19.391723-19.390348 19.391723-10.709226 0-19.3908387-8.682103-19.3908387-19.391723 0-10.709227 8.6816127-19.3903473 19.3908387-19.3903473 10.708245 0 19.390348 8.6811203 19.390348 19.3903473z"
+     id="path370"
+     style="filter:url(#filter478)" />
+  <g
+     fill="#204a87"
+     fill-opacity=".71345031"
+     transform="translate(.121079 .232914) scale(.98237)"
+     id="g378"
+     style="filter:url(#filter482)">
+    <path
+       d="M44.0713 20.7144c0 .2627 0 0 0 0l-.5449.6172c-.334-.3936-.709-.7246-1.0898-1.0703l-.8359.123-.7637-.8633v1.0684l.6543.4951.4355.4932.582-.6582c.1465.2744.291.5488.4365.8232v.8223l-.6553.7402-1.1992.8232-.9082.9063-.582-.6602.291-.7402-.5811-.6582-.9814-2.0977-.8359-.9453-.2188.2461.3281 1.1934.6172.6992c.3525 1.0176.7012 1.9902 1.1641 2.9629.7178 0 1.3945-.0762 2.1074-.166v.5762l-.8721 2.1392-.7998.9043-.6543 1.4004v2.3027l.2188.9063-.3633.4102-.8008.4941-.8359.6992.6914.7813-.9453.8242.1816.5332-1.418 1.6055h-.9443l-.7998.4941h-.5098v-.6582l-.2168-1.3184c-.2813-.8262-.5742-1.6465-.8721-2.4668 0-.6055.0361-1.2051.0723-1.8105l.3643-.8223-.5098-.9883.0371-1.3574-.6914-.7813.3457-1.1309-.5625-.6382h-.9824l-.3271-.3701-.9814.6177-.3994-.4536-.9092.7817c-.6172-.6997-1.2354-1.3989-1.8535-2.0981l-.7266-1.7285.6543-.9863-.3633-.4111.7988-1.8936c.6563-.8164 1.3418-1.5996 2.0352-2.3857l1.2363-.3291 1.3809-.1641.9453.2471L33.459 19.15l.4727-.5342.6533-.082 1.2363.4111h.9453l.6543-.5762.291-.4111-.6553-.4111-1.0908-.082c-.3027-.4199-.584-.8613-.9434-1.2344l-.3643.1641-.1455 1.0703-.6543-.7402-.1445-.8242-.7266-.5742h-.292l.7275.8223-.291.7402-.5811.1641.3633-.7402-.6553-.3281-.5801-.6582-1.0918.2461-.1445.3281-.6543.4121-.3633.9053-.9082.4521-.4004-.4521h-.4355v-1.4814l.9453-.4941h.7266l-.1465-.5752-.5801-.5762.9805-.2061.5449-.6162.4355-.7412h.8008l-.2188-.5752.5098-.3291v.6582l1.0898.2461 1.0898-.9043.0732-.4121.9443-.6577c-.3418.0425-.6836.0737-1.0176.1646v-.7411l.3633-.8228h-.3633l-.7984.7402-.2188.4116.2188.5767-.3643.9863-.5811-.3291-.5078-.5752-.8008.5752-.291-1.3159 1.3809-.9048v-.4941l.873-.5757 1.3809-.3296.9453.3296 1.7441.3291-.4355.4932h-.9453l.9453.9873.7266-.8223.2207-.3618s2.7871 2.498 4.3799 5.2305c1.5928 2.7334 2.3408 5.9551 2.3408 6.6094zM26.0703 9.2363l-.0732.4932.5098.3291.8711-.5757-.4355-.4937-.582.3296-.29-.0825m.7996-3.373-1.8906-.7407-2.1797.2466-2.6904.7402-.5088.4941 1.6719 1.1514v.6582l-.6543.6582.873 1.729.5801-.3301.7285-1.1514c1.123-.3472 2.1299-.7407 3.1973-1.2344l.873-2.2212m1.9629 6.9117-.291-.7412-.5098.165.1465.9043.6543-.3281"
+       id="path372" />
+    <path
+       d="m29.123 12.6089-.1455.9883.7998-.165.5811-.5752-.5088-.4941c-.1709-.4551-.3672-.8799-.5811-1.3164h-.4355v.4932l.29.3291v.7402M18.3652 28.2422l-.582-1.1523-1.0903-.2466-.5815-1.5625-1.4536.1641-1.2354-.9043-1.3091 1.1514v.1816c-.396-.1143-.8828-.1299-1.2354-.3467l-.291-.8223v-.9053l-.8721.082c.0728-.5762.145-1.1514.2183-1.7275h-.5093l-.5083.6582-.5093.2461-.7271-.4102-.0728-.9053.1455-.9873 1.0908-.8223h.8721l.145-.4941 1.0903.2461.7998.9883.1455-1.6465 1.3813-1.1514.5088-1.2344 1.0176-.4111.5815-.8223 1.3081-.248.6548-.9863h-1.9629l1.2358-.5762h.8716l1.2363-.4121.1455-.4922-.4365-.4121-.5088-.165.1455-.4932-.3633-.7402-.8726.3281.1455-.6577-1.0176-.5762-.7993 1.3979.0723.4941-.7993.3301-.5093 1.0693-.2178-.9873-1.3813-.5762-.2183-.7402 1.8174-1.0703.7998-.7402.0728-.9048-.436-.2471-.5815-.0825-.3633.9053s-.6079.1191-.7642.1577c-1.9961 1.8394-6.0293 5.8101-6.9663 13.3062.0371.1738.6792 1.1816.6792 1.1816l1.5264.9043 1.5264.4121.6548.8232 1.0171.7402.5815-.082.436.1963v.1328l-.5811 1.563-.4365.6582.1455.3301-.3633 1.2324 1.3086 2.3867 1.3081 1.1523.582.8223-.0732 1.7285.4365.9863-.4365 1.8926s-.0342-.0117.0215.1777c.0562.1895 2.3291 1.4512 2.4736 1.3438.144-.1094.2671-.2051.2671-.2051l-.145-.4102.5811-.5762.2183-.5762.9453-.3301.7266-1.8105-.2178-.4922.5078-.7402 1.0908-.248.582-1.3164-.1455-1.6445.8721-1.2344.1455-1.2344c-1.1934-.5918-2.377-1.2012-3.5615-1.8105M16.7656 9.5649l.7266.4937h.582v-.5757l-.7266-.3291-.582.4111"
+       id="path374" />
+    <path
+       d="m14.876 8.9072-.3638.9048h.7271l.3638-.8228c.3135-.2217.6255-.4448.9448-.6582l.7271.2471c.4844.3291.9688.6582 1.4536.9868l.7275-.6577-.8003-.3291-.3638-.7407-1.3809-.1646-.0728-.4116-.6543.165-.2904.5758-.3638-.7407-.145.3291.0728.8228-.5816.494m2.6162-2.0576.3638-.3286.7271-.1646c.498-.2422.998-.4053 1.5264-.5762l-.29-.4937-.9385.1348-.4434.4419-.731.106-.6499.3052-.3159.1528-.1929.2583.9443.1641m1.2363 7.8169.4365-.6582-.6548-.4932.2183 1.1514"
+       id="path376" />
+  </g>
+  <path
+     fill="none"
+     stroke="url(#h)"
+     d="M42.975093 23.485534c0 10.16582-8.241178 18.406906-18.4056 18.406906-10.165354 0-18.4060669-8.241179-18.4060669-18.406906 0-10.165354 8.2407129-18.4056 18.4060669-18.4056 10.164422 0 18.4056 8.240246 18.4056 18.4056z"
+     opacity=".3956044"
+     id="path380"
+     style="filter:url(#filter486)" />
+  <path
+     fill="none"
+     stroke="url(#i)"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width=".88164198"
+     d="M-2.8284283 21.041553a15.733126 9.4575529 0 1 1-31.4662517 0 15.733126 9.4575529 0 1 1 31.4662517 0z"
+     color="#000"
+     overflow="visible"
+     style="marker:none;filter:url(#filter490)"
+     transform="matrix(1.13103 .6131 -.47656 .87914 54.09058 16.04435)"
+     id="path382" />
+  <path
+     fill="none"
+     stroke="url(#j)"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width=".88164198"
+     d="M-2.8284283 21.041553a15.733126 9.4575529 0 1 1-31.4662517 0 15.733126 9.4575529 0 1 1 31.4662517 0z"
+     color="#000"
+     overflow="visible"
+     style="marker:none;filter:url(#filter494)"
+     transform="matrix(.93933 -.87909 .6833 .73013 32.31406 -4.451561)"
+     id="path384" />
+  <g
+     fill-rule="evenodd"
+     color="#000"
+     transform="matrix(-1.04577 .76725 .76725 1.04577 35.61651 -22.14396)"
+     id="g390"
+     style="filter:url(#filter498)">
+    <path
+       fill="url(#k)"
+       d="M18.788838 12.493138a6.7175145 6.7175145 0 1 1-13.4350291 0 6.7175145 6.7175145 0 1 1 13.4350291 0z"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(14.95026 22.93047)"
+       id="path386" />
+    <use
+       xlink:href="#l"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(23.30035 31.57234) scale(.30827)"
+       id="use388" />
+  </g>
+  <path
+     fill="none"
+     stroke="url(#m)"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width=".88164198"
+     d="M-2.8284283 21.041553a15.733126 9.4575529 0 1 1-31.4662517 0 15.733126 9.4575529 0 1 1 31.4662517 0z"
+     color="#000"
+     overflow="visible"
+     style="marker:none;filter:url(#filter502)"
+     transform="matrix(-1.28032 -.12616 .09806 -.99518 -2.405125 40.52387)"
+     id="path392" />
+  <path
+     fill="none"
+     stroke="url(#n)"
+     stroke-linecap="round"
+     stroke-linejoin="round"
+     stroke-width=".90226138"
+     d="M-2.8284283 21.041553a15.733126 9.4575529 0 1 1-31.4662517 0 15.733126 9.4575529 0 1 1 31.4662517 0z"
+     color="#000"
+     overflow="visible"
+     style="marker:none;filter:url(#filter506)"
+     transform="matrix(.91787 -.85898 .6677 .71343 27.63317 -6.909069)"
+     id="path394" />
+  <g
+     fill-rule="evenodd"
+     color="#000"
+     transform="scale(-1 1) rotate(36.266 21.33340587 -27.92446612)"
+     id="g400"
+     style="filter:url(#filter510)">
+    <path
+       fill="url(#o)"
+       d="M18.788838 12.493138a6.7175145 6.7175145 0 1 1-13.4350291 0 6.7175145 6.7175145 0 1 1 13.4350291 0z"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(14.95026 22.93047)"
+       id="path396" />
+    <use
+       xlink:href="#l"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(23.30035 31.57234) scale(.30827)"
+       id="use398" />
+  </g>
+  <g
+     fill-rule="evenodd"
+     color="#000"
+     transform="scale(-1 1) rotate(36.266 41.34363601 -36.35995218)"
+     id="g406"
+     style="filter:url(#filter514)">
+    <path
+       fill="url(#p)"
+       d="M18.788838 12.493138a6.7175145 6.7175145 0 1 1-13.4350291 0 6.7175145 6.7175145 0 1 1 13.4350291 0z"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(14.95026 22.93047)"
+       id="path402" />
+    <use
+       xlink:href="#l"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(23.30035 31.57234) scale(.30827)"
+       id="use404" />
+  </g>
+  <g
+     fill-rule="evenodd"
+     color="#000"
+     transform="matrix(-.87023 .63857 .63846 .87038 25.20503 -35.31278)"
+     id="g412"
+     style="filter:url(#filter518)">
+    <path
+       fill="url(#q)"
+       d="M18.788838 12.493138a6.7175145 6.7175145 0 1 1-13.4350291 0 6.7175145 6.7175145 0 1 1 13.4350291 0z"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(14.95026 22.93047)"
+       id="path408" />
+    <use
+       xlink:href="#l"
+       overflow="visible"
+       style="marker:none"
+       transform="translate(23.30035 31.57234) scale(.30827)"
+       id="use410" />
+  </g>
+</svg>