├── presqu11.js
├── README.md
├── LICENSE
├── chanel.css
└── presqu11.css
/presqu11.js:
--------------------------------------------------------------------------------
1 | // vars & start
2 | const electron = require('electron')
3 | const path = require('path')
4 | const remote = electron.remote
5 | const ipcRenderer = require('electron').ipcRenderer;
6 |
7 | let presqu11 = new Object;
8 | presqu11.components = new Object;
9 |
10 | // topbar & controls
11 | let topbar = document.getElementsByTagName("w11-topbar")[0];
12 | let icon = topbar.getAttribute('icon');
13 | let title = topbar.getAttribute('title');
14 |
15 | let max = false;
16 |
17 | topbar.innerHTML = '
![]()
'+title+'
';
18 |
19 | if(process.versions.electron !== null) {
20 | topbar.innerHTML = '![]()
'+title+'
';
21 | }
22 |
23 | document.getElementsByTagName("c0")[0].addEventListener('click', function(){
24 | ipcRenderer.send('devtools');
25 | });
26 |
27 | document.getElementsByTagName("c3")[0].addEventListener('click', function(){
28 | ipcRenderer.send('close');
29 | });
30 |
31 | document.getElementsByTagName("c2")[0].addEventListener('click', function(){
32 | if(max) {
33 | ipcRenderer.send('unmaximize');
34 | max = false;
35 | }
36 | else {
37 | ipcRenderer.send('maximize');
38 | max = true;
39 | }
40 | });
41 |
42 | document.getElementsByTagName("c1")[0].addEventListener('click', function(){
43 | ipcRenderer.send('minimize');
44 | });
45 |
46 | // tabs
47 | let currentTab;
48 |
49 | let childDivs = document.getElementsByTagName('w11-tabs')[0].getElementsByTagName('w11-tab-select');
50 | for( i=0; i< childDivs.length; i++ ) {
51 | var childDiv = childDivs[i];
52 |
53 | let icon = childDiv.getAttribute('icon');
54 | let title = childDiv.getAttribute('text');
55 |
56 | childDiv.innerHTML = '
' + title + '
';
57 | }
58 |
59 | let childDivs2 = document.getElementsByTagName('body')[0].getElementsByTagName('w11-tab');
60 | for( i=0; i< childDivs2.length; i++ )
61 | {
62 | var childDiv2 = childDivs2[i];
63 | let nb = i;
64 |
65 | let cid = childDiv2.id;
66 | childDivs[i].addEventListener('click', function(){
67 | openTab(cid);
68 | document.getElementsByClassName("selected")[0].classList.remove("selected");
69 | childDivs[nb].classList.add("selected");
70 | });
71 | }
72 |
73 | let defaultName = document.getElementsByTagName("w11-tabs")[0].getAttribute("default");
74 | let defaultElem = document.getElementById(defaultName);
75 |
76 | currentTab = defaultElem;
77 | defaultElem.classList.add("active");
78 |
79 | function openTab(elemnt) {
80 | currentTab.classList.remove("active");
81 | currentTab = document.getElementById(elemnt);
82 | document.getElementById(elemnt).classList.add("active");
83 | }
84 |
85 | presqu11.components.modalShow = function (modal) {
86 | document.getElementById(modal).style.display = "flex";
87 | }
88 |
89 | presqu11.components.modalHide = function (modal) {
90 | document.getElementById(modal).classList.add("modal-about");
91 | setTimeout(function() {
92 | document.getElementById(modal).style.display = "none";
93 | document.getElementById(modal).classList.remove("modal-about");
94 | }, 300)
95 | }
96 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | *For all information, [read the wiki](https://presqu11.notion.site/About-Presqu-11-56eabbc8a2ff433a8c90a947c0ab39ef).*
4 |
5 | Windows 11 native-like apps using Javascript and HTML.
6 | **Works with [Electron](https://github.com/electron/electron) and [NW.js](https://github.com/nwjs/nw.js) !**
7 |
8 | [Download latest version](https://github.com/ecnivtwelve/presqu11/releases)
9 |
10 | 
11 |
12 | ## Installation
13 | Grab this repository and import it into your project's folder.
14 |
15 | #### In your HTML file
16 | import Presqu'11 CSS files in your tag
17 | ```html
18 |
19 |
20 |
21 | ```
22 | and then import the JS at the end of
23 | ```html
24 |
25 |
26 |
27 |
28 |
29 |
30 | ```
31 |
32 | ## Usage
33 | To use Presqu'11 components, just add them in your HTML file.
34 |
35 | ### Title bar / Topbar
36 | 
37 |
38 | *The topbar is a key element of a Windows app. This one has been recreated from scratch using CSS, to fit Windows 11 guidelines.*
39 |
40 | ```html
41 |
42 | ```
43 | **NWJS users : Controls like close, maximize etc... already works straight from with no additionnal code. Dragging works too.**
44 |
45 | **Electron users : Dragging works out-of-the-box, but controls will not work and may crash the app**
46 |
47 | ##
48 |
49 | ### Tabs
50 | To use tabs, you need two key things : a tab and a way to select tabs. Both are included and works with no additionnal code.
51 |
52 | 
53 |
54 | #### Tab selection (w11-tabs)
55 | 
56 |
57 | ```html
58 |
59 |
60 |
61 |
62 | ```
63 |
64 | - `default=""` tells which tab should be shown by default. **The default app should also get the `class="selected"` to be selected in the selection.**
65 | - *The rest of the code is pretty self-explainatory, try by yourself.**
66 |
67 | #### Tab (w11-tab)
68 | The tab is what should be shown to users (it contains the main content).
69 |
70 | ```html
71 |
72 | Tab 1
73 |
74 |
75 |
76 | ```
77 |
78 | **The ID should be the same as `for=""` in your tab selection**, otherwise, it may crash the app.
79 |
80 | *The `` is optionnal, but recommended for user experience* **If used, you should add your content in ``. If you don't use ``, it's optionnal to use ``.**
81 |
82 |
83 | ##
84 |
85 | ### Other components
86 | For the other components, [read the wiki](https://presqu11.notion.site/Components-8540950d9e5c492295c2a005b3db16ac).
87 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/chanel.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | font-family: 'Segoe UI Variable Static Text', 'Segoe UI Variable', "Segoe UI";
4 | text-rendering: optimizeLegibility;
5 | }
6 |
7 | p {
8 | filter: blur(0.2px);
9 | }
10 |
11 | h1 {
12 | filter: blur(0.5px);
13 | }
14 |
15 | h3 {
16 | filter: blur(0.2px);
17 | }
18 |
19 | :root {
20 | --background: #f3f3f3;
21 | }
22 |
23 | body {
24 | padding: 0;
25 | width: 100vw;
26 | height: 100vh;
27 | overflow: hidden;
28 | }
29 |
30 | w11-modal {
31 | background-color: #00000055;
32 | backdrop-filter: blur(10px);
33 | width: 100vw;
34 | height: calc(100vh - 48px);
35 | position: absolute;
36 | top: 48px;
37 | left: 0;
38 | z-index: 99999999999999999;
39 | display: flex;
40 | align-items: center;
41 | justify-content: center;
42 | animation: modalBG 0.3s forwards;
43 | display: none;
44 | }
45 |
46 | @keyframes modalBG {
47 | from {
48 | background-color: #00000001;
49 | backdrop-filter: blur(0px);
50 | }
51 | }
52 |
53 | w11-modal-content {
54 | width: 75%;
55 | height: 70%;
56 | max-width: 1100px;
57 | max-height: 750px;
58 | border-radius: 5px;
59 | background-color: var(--background);
60 | box-shadow: 0px 2px 4px #00000055;
61 | overflow: hidden;
62 | padding: 25px;
63 | animation: modal 0.3s forwards cubic-bezier(0,0,0,1);
64 | }
65 |
66 | @keyframes modal {
67 | from {
68 | opacity: 0;
69 | transform: translateY(100px);
70 | }
71 | }
72 |
73 | .modal-about {
74 | animation: modal-about forwards 0.3s cubic-bezier(0,0,0,1);
75 | }
76 |
77 | .modal-about w11-modal-content {
78 | animation: modal-about-inner forwards 0.2s cubic-bezier(0,0,0,1);
79 | }
80 |
81 | @keyframes modal-about {
82 | to {
83 | background-color: #00000001;
84 | backdrop-filter: blur(0px);
85 | }
86 | }
87 |
88 | @keyframes modal-about-inner {
89 | to {
90 | opacity: 0;
91 | transform: scale(0.9);
92 | }
93 | }
94 |
95 | w11-topbar {
96 | background-color: var(--background);
97 | height: 48px;
98 | width: 100vw;
99 | position: fixed;
100 | top: 0;
101 | left: 0;
102 | display: flex;
103 | -webkit-app-region: drag;
104 | z-index: 9999999999999999999999999999999;
105 | }
106 |
107 | w11-topbar img {
108 | object-fit: contain;
109 | height: 18px;
110 | position: absolute;
111 | top: 15px;
112 | left: 16px;
113 | border: 0;
114 | }
115 |
116 | w11-topbar p {
117 | position: absolute;
118 | left: 50px;
119 | top: 14px;
120 | font-style: normal;
121 | font-weight: 600;
122 | font-size: 14px;
123 | line-height: 19px;
124 | color: #444444;
125 | }
126 |
127 | controls {
128 | position: absolute;
129 | right: 0;
130 | top: 0;
131 | height: 32px;
132 | display: flex;
133 | -webkit-app-region: no-drag;
134 | }
135 |
136 | c0 {
137 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iMTAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIiIHk9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjMiIHk9IjIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHk9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI0IiB5PSIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIxIiB5PSI1IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjMiIHk9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIxIiB5PSI3IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjIiIHk9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI0IiB5PSIxMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjQiIHk9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIyIiB5PSI2IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjUiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE1IDUpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxNCA2KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgNykiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDgpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMSA5KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMTApIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxNCA0KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgMykiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDIpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMSAxKSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgMykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgNCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgNSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTUgNCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgMykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgMikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgMSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTUgNikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgNykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgOCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgOSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMTApIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEwIDkpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDExIDgpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDcpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEzIDYpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEwIDApIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
138 | width: 52px;
139 | height: 32px;
140 | background-position: center;
141 | background-repeat: no-repeat;
142 | border-radius: 0px;
143 | }
144 |
145 | c1 {
146 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDEwIDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjUiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjkiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
147 | width: 52px;
148 | height: 32px;
149 | background-position: center;
150 | background-repeat: no-repeat;
151 | border-radius: 0px;
152 | }
153 |
154 | c2 {
155 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
156 | width: 52px;
157 | height: 32px;
158 | background-position: center;
159 | background-repeat: no-repeat;
160 | border-radius: 0px;
161 | }
162 |
163 | c3 {
164 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
165 | width: 56px;
166 | height: 32px;
167 | background-position: center;
168 | background-repeat: no-repeat;
169 | border-radius: 0px;
170 | }
171 |
172 | c0:hover {
173 | background-color: #00000020;
174 | }
175 |
176 | c1:hover {
177 | background-color: #00000020;
178 | }
179 |
180 | c2:hover {
181 | background-color: #00000020;
182 | }
183 |
184 | c3:hover {
185 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOCIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
186 | background-color: #ff2e2e;
187 | }
188 |
189 | w11-tabs {
190 | position: absolute;
191 | top: calc(57px - 5px);
192 | left: 16px;
193 | width: 268px;
194 |
195 | display: flex;
196 | flex-direction: column;
197 | align-items: flex-start;
198 | padding: 0px;
199 | }
200 |
201 | w11-tab-select {
202 | width: 268px;
203 | height: 36px;
204 | flex: none;
205 | order: 0;
206 | flex-grow: 0;
207 | margin: 5px 0px;
208 | display: flex;
209 | position: relative;
210 | transition: 0.1s;
211 | align-items: center;
212 | border-radius: 4px;
213 | }
214 |
215 | w11-tab-select:hover {
216 | background-color: #EAEAEA;
217 | }
218 |
219 | .selected:hover {
220 | background-color: #00000020;
221 | }
222 |
223 | .selected {
224 | background-color: #EAEAEA;
225 | border-radius: 4px;
226 | }
227 |
228 | w11-tab-select img {
229 | position: absolute;
230 | left: 11px;
231 | top: 9px;
232 | height: 17px;
233 | width: 17px;
234 | pointer-events: none;
235 | }
236 |
237 | w11-tab-select p {
238 | position: absolute;
239 | left: 46px;
240 | top: 8px;
241 | font-style: normal;
242 | font-weight: 400;
243 | font-size: 14px;
244 | line-height: 19px;
245 | display: flex;
246 | align-items: center;
247 | color: #000000;
248 | user-select: none;
249 | transition: 0.3s;
250 | }
251 |
252 | .selected p {
253 | font-weight: 600;
254 | }
255 |
256 | sel {
257 | position: absolute;
258 | left: 0%;
259 | width: 3px;
260 | height: 10px;
261 | opacity: 0%;
262 | top: 0;
263 | background: #005CCA;
264 | border-radius: 300px !important;
265 | transition: height 0.2s, opacity 0s;
266 | }
267 |
268 | .selected sel {
269 | height: 16px;
270 | opacity: 100%;
271 | top: initial;
272 | }
273 |
274 | w11-tab {
275 | display: none;
276 | position: absolute;
277 | top: 57px;
278 | left: 324px;
279 | right: 25px;
280 | bottom: 0px;
281 | animation: tab-show 0.5s;
282 | animation-timing-function: cubic-bezier(0,0,0,1.01);
283 | }
284 |
285 | @keyframes tab-show {
286 | from {
287 | top: 80px;
288 | opacity: 0%;
289 | }
290 | to {
291 | top: 57px;
292 | opacity: 100%;
293 | }
294 | }
295 |
296 | .active {
297 | display: block;
298 | }
299 |
300 | w11-tab-title {
301 | font-style: normal;
302 | font-weight: 600;
303 | font-size: 28px;
304 | line-height: 37px;
305 | display: flex;
306 | align-items: center;
307 | color: #000000;
308 | margin-top: -5px;
309 | margin-bottom: 29px;
310 | user-select: none;
311 | }
312 |
313 | h1 {
314 | font-style: normal;
315 | font-weight: 600;
316 | font-size: 32px;
317 | line-height: 32px;
318 | display: flex;
319 | align-items: center;
320 | color: #000000;
321 | user-select: none;
322 | margin-bottom: 20px;
323 | }
324 |
325 | h2 {
326 | font-style: normal;
327 | font-weight: 600;
328 | font-size: 24px;
329 | line-height: 24px;
330 | display: flex;
331 | align-items: center;
332 | color: #000000;
333 | user-select: none;
334 | margin-bottom: 10px;
335 | }
336 |
337 | h3 {
338 | font-style: normal;
339 | font-weight: 600;
340 | font-size: 20px;
341 | line-height: 20px;
342 | display: flex;
343 | align-items: center;
344 | color: #000000;
345 | user-select: none;
346 | margin-bottom: 10px;
347 | }
348 |
349 | w11-tab-content {
350 | position: absolute;
351 | top: 50px;
352 | left: 0px;
353 | right: 0px;
354 | bottom: 0px;
355 | overflow-y: scroll;
356 | overflow-x: hidden;
357 | border-radius: 8px 8px 0px 0px;
358 | }
359 |
360 | ::-webkit-scrollbar {
361 | width: 7px;
362 | }
363 | ::-webkit-scrollbar-track {
364 | background: #f1f1f100;
365 | }
366 | ::-webkit-scrollbar-thumb {
367 | background: #bbbbbb;
368 | border-radius:10px;
369 | }
370 | ::-webkit-scrollbar-thumb:hover {
371 | background: #9a9a9a;
372 | }
373 |
374 | w11-wide-card {
375 | background: #FBFBFB;
376 | border: 1px solid #E5E5E5;
377 | border-radius: 5px;
378 | width: 100%;
379 | height: 69px;
380 | display:flex;
381 | align-items: center;
382 | transition: 0.15s;
383 | margin-bottom: 5px;
384 | }
385 |
386 | w11-wide-card .w11-icon {
387 | width: 24px;
388 | height: 24px;
389 | object-fit: cover;
390 | margin-left: 17px;
391 | }
392 |
393 | w11-wide-card:hover {
394 | background-color: #F6F6F6;
395 | }
396 |
397 | w11-wide-card-text {
398 | margin-left: 18px;
399 | }
400 |
401 | w11-wide-card-text h3 {
402 | font-size: 14px;
403 | font-style: normal;
404 | font-weight: 600;
405 | line-height: 19px;
406 | letter-spacing: 0em;
407 | text-align: left;
408 | user-select: none;
409 | }
410 |
411 | w11-wide-card-text p {
412 | font-size: 12px;
413 | font-style: normal;
414 | font-weight: 400;
415 | line-height: 16px;
416 | letter-spacing: 0.01em;
417 | text-align: left;
418 | user-select: none;
419 | }
420 |
421 | w11-button {
422 | display: flex;
423 | align-items: center;
424 | justify-content: center;
425 | padding: 5px 24px 6px;
426 | width: fit-content;
427 | background-color: #005CCA;
428 | border-radius: 5px;
429 | font-size: 15px;
430 | font-style: normal;
431 | font-weight: 600;
432 | line-height: 20px;
433 | letter-spacing: 0em;
434 | text-align: center;
435 | color: #ffffff;
436 | user-select: none;
437 | transition: 0.15s;
438 | }
439 |
440 | w11-button:hover {
441 | background-color: #337DD5;
442 | }
443 |
444 | w11-button:active {
445 | background: rgba(0, 92, 202, 0.64);
446 | }
447 |
448 | .w11-card-element {
449 | position: absolute;
450 | right: 14px;
451 | }
452 |
453 | @media (prefers-color-scheme: dark) {
454 | :root {
455 | --background: #202020;
456 | }
457 | w11-topbar p {
458 | color: #fff;
459 | }
460 | w11-tab-select:hover {
461 | background-color: #2D2D2D;
462 | }
463 | .selected:hover {
464 | background-color: #ffffff20;
465 | }
466 | .selected {
467 | background-color: #2D2D2D;
468 | border-radius: 4px;
469 | }
470 | w11-tab-select p {
471 | color: #fff
472 | }
473 | w11-tab-title {
474 | color: #fff;
475 | }
476 | w11-wide-card:hover {
477 | background: #323232;
478 | }
479 | w11-wide-card {
480 | background: #2B2B2B;
481 | border: 1px solid #1D1D1D;
482 | }
483 | w11-wide-card-text h3 {
484 | color: #FFFFFF;
485 | }
486 | w11-wide-card-text p {
487 | color: rgba(255, 255, 255, 0.5);
488 | }
489 | c0 {
490 | filter: invert(1);
491 | }
492 | c1 {
493 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='1' viewBox='0 0 10 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='1' height='1' fill='white'/%3E %3Crect x='1' width='1' height='1' fill='white'/%3E %3Crect x='2' width='1' height='1' fill='white'/%3E %3Crect x='3' width='1' height='1' fill='white'/%3E %3Crect x='4' width='1' height='1' fill='white'/%3E %3Crect x='5' width='1' height='1' fill='white'/%3E %3Crect x='6' width='1' height='1' fill='white'/%3E %3Crect x='7' width='1' height='1' fill='white'/%3E %3Crect x='8' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
494 | }
495 | c2 {
496 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect y='2' width='1' height='1' fill='white'/%3E %3Crect x='1' y='2' width='1' height='1' fill='white'/%3E %3Crect x='2' y='2' width='1' height='1' fill='white'/%3E %3Crect x='3' y='2' width='1' height='1' fill='white'/%3E %3Crect x='4' y='2' width='1' height='1' fill='white'/%3E %3Crect x='5' y='2' width='1' height='1' fill='white'/%3E %3Crect x='6' y='2' width='1' height='1' fill='white'/%3E %3Crect x='7' y='2' width='1' height='1' fill='white'/%3E %3Crect x='7' y='3' width='1' height='1' fill='white'/%3E %3Crect x='7' y='4' width='1' height='1' fill='white'/%3E %3Crect x='7' y='5' width='1' height='1' fill='white'/%3E %3Crect x='7' y='6' width='1' height='1' fill='white'/%3E %3Crect x='7' y='7' width='1' height='1' fill='white'/%3E %3Crect x='7' y='8' width='1' height='1' fill='white'/%3E %3Crect x='6' y='9' width='1' height='1' fill='white'/%3E %3Crect x='7' y='9' width='1' height='1' fill='white'/%3E %3Crect x='5' y='9' width='1' height='1' fill='white'/%3E %3Crect x='4' y='9' width='1' height='1' fill='white'/%3E %3Crect x='3' y='9' width='1' height='1' fill='white'/%3E %3Crect x='2' y='9' width='1' height='1' fill='white'/%3E %3Crect x='1' y='9' width='1' height='1' fill='white'/%3E %3Crect y='9' width='1' height='1' fill='white'/%3E %3Crect y='8' width='1' height='1' fill='white'/%3E %3Crect y='7' width='1' height='1' fill='white'/%3E %3Crect y='6' width='1' height='1' fill='white'/%3E %3Crect y='5' width='1' height='1' fill='white'/%3E %3Crect y='4' width='1' height='1' fill='white'/%3E %3Crect y='3' width='1' height='1' fill='white'/%3E %3Crect x='2' width='1' height='1' fill='white'/%3E %3Crect x='3' width='1' height='1' fill='white'/%3E %3Crect x='4' width='1' height='1' fill='white'/%3E %3Crect x='5' width='1' height='1' fill='white'/%3E %3Crect x='6' width='1' height='1' fill='white'/%3E %3Crect x='7' width='1' height='1' fill='white'/%3E %3Crect x='8' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3Crect x='9' y='1' width='1' height='1' fill='white'/%3E %3Crect x='9' y='2' width='1' height='1' fill='white'/%3E %3Crect x='9' y='3' width='1' height='1' fill='white'/%3E %3Crect x='9' y='4' width='1' height='1' fill='white'/%3E %3Crect x='9' y='5' width='1' height='1' fill='white'/%3E %3Crect x='9' y='6' width='1' height='1' fill='white'/%3E %3Crect x='8' y='7' width='1' height='1' fill='white'/%3E %3Crect x='9' y='7' width='1' height='1' fill='white'/%3E %3Crect x='2' y='1' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
497 | }
498 | c3 {
499 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='4' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='5' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='9' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='4' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='5' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='9' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='9' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='5' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='4' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='9' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='5' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='4' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' y='1' width='1' height='1' fill='white'/%3E %3Crect x='1' y='1' width='1' height='1' fill='white'/%3E %3Crect x='2' y='2' width='1' height='1' fill='white'/%3E %3Crect x='3' y='3' width='1' height='1' fill='white'/%3E %3Crect x='4' y='4' width='1' height='1' fill='white'/%3E %3Crect y='9' width='1' height='1' fill='white'/%3E %3Crect x='1' y='8' width='1' height='1' fill='white'/%3E %3Crect x='2' y='7' width='1' height='1' fill='white'/%3E %3Crect x='3' y='6' width='1' height='1' fill='white'/%3E %3Crect x='4' y='5' width='1' height='1' fill='white'/%3E %3Crect x='5' y='4' width='1' height='1' fill='white'/%3E %3Crect x='5' y='5' width='1' height='1' fill='white'/%3E %3Crect x='6' y='3' width='1' height='1' fill='white'/%3E %3Crect x='7' y='2' width='1' height='1' fill='white'/%3E %3Crect x='8' y='1' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3Crect x='6' y='6' width='1' height='1' fill='white'/%3E %3Crect x='7' y='7' width='1' height='1' fill='white'/%3E %3Crect x='8' y='8' width='1' height='1' fill='white'/%3E %3Crect x='9' y='9' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
500 | }
501 | c1:hover {
502 | background-color: #ffffff11;
503 | }
504 | c2:hover {
505 | background-color: #ffffff11;
506 | }
507 | .w11-input {
508 | background-color: #000 !important;
509 | border-bottom: 2px solid #424242 !important;
510 | color: #fff;
511 | }
512 | }
513 |
514 | .w11-input {
515 | background-color: #ffffff;
516 | border-style: none;
517 | border-bottom: 2px solid #888;
518 | border-radius: 5px;
519 | padding: 7px;
520 | padding-left: 10px;
521 | font-size: 14px;
522 | width: 300px;
523 | transition: 0.15s;
524 | }
525 |
526 | .w11-input:focus {
527 | border-bottom: 2px solid #005CCA !important;
528 | outline: none;
529 | }
530 |
531 | w11-tabs .w11-input {
532 | width: 100%;
533 | margin-bottom: 1em;
534 | }
535 |
--------------------------------------------------------------------------------
/presqu11.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | font-family: 'Segoe UI Variable Static Text', 'Segoe UI Variable', "Segoe UI";
4 | text-rendering: optimizeLegibility;
5 | }
6 |
7 | p {
8 | filter: blur(0.2px);
9 | }
10 |
11 | h1 {
12 | filter: blur(0.5px);
13 | }
14 |
15 | h3 {
16 | filter: blur(0.2px);
17 | }
18 |
19 | :root {
20 | --background: #f3f3f3;
21 | }
22 |
23 | body {
24 | background-color: var(--background);
25 | padding: 0;
26 | width: 100vw;
27 | height: 100vh;
28 | overflow: hidden;
29 | }
30 |
31 | w11-modal {
32 | background-color: #00000055;
33 | backdrop-filter: blur(10px);
34 | width: 100vw;
35 | height: calc(100vh - 48px);
36 | position: absolute;
37 | top: 48px;
38 | left: 0;
39 | z-index: 99999999999999999;
40 | display: flex;
41 | align-items: center;
42 | justify-content: center;
43 | animation: modalBG 0.3s forwards;
44 | display: none;
45 | }
46 |
47 | @keyframes modalBG {
48 | from {
49 | background-color: #00000001;
50 | backdrop-filter: blur(0px);
51 | }
52 | }
53 |
54 | w11-modal-content {
55 | width: 75%;
56 | height: 70%;
57 | max-width: 1100px;
58 | max-height: 750px;
59 | border-radius: 5px;
60 | background-color: var(--background);
61 | box-shadow: 0px 2px 4px #00000055;
62 | overflow: hidden;
63 | padding: 25px;
64 | animation: modal 0.3s forwards cubic-bezier(0,0,0,1);
65 | }
66 |
67 | @keyframes modal {
68 | from {
69 | opacity: 0;
70 | transform: translateY(100px);
71 | }
72 | }
73 |
74 | .modal-about {
75 | animation: modal-about forwards 0.3s cubic-bezier(0,0,0,1);
76 | }
77 |
78 | .modal-about w11-modal-content {
79 | animation: modal-about-inner forwards 0.2s cubic-bezier(0,0,0,1);
80 | }
81 |
82 | @keyframes modal-about {
83 | to {
84 | background-color: #00000001;
85 | backdrop-filter: blur(0px);
86 | }
87 | }
88 |
89 | @keyframes modal-about-inner {
90 | to {
91 | opacity: 0;
92 | transform: scale(0.9);
93 | }
94 | }
95 |
96 | w11-topbar {
97 | background-color: var(--background);
98 | height: 48px;
99 | width: 100vw;
100 | position: fixed;
101 | top: 0;
102 | left: 0;
103 | display: flex;
104 | -webkit-app-region: drag;
105 | z-index: 9999999999999999999999999999999;
106 | }
107 |
108 | w11-topbar img {
109 | object-fit: contain;
110 | height: 18px;
111 | position: absolute;
112 | top: 15px;
113 | left: 16px;
114 | border: 0;
115 | }
116 |
117 | w11-topbar p {
118 | position: absolute;
119 | left: 50px;
120 | top: 14px;
121 | font-style: normal;
122 | font-weight: 600;
123 | font-size: 14px;
124 | line-height: 19px;
125 | color: #444444;
126 | }
127 |
128 | controls {
129 | position: absolute;
130 | right: 0;
131 | top: 0;
132 | height: 32px;
133 | display: flex;
134 | -webkit-app-region: no-drag;
135 | }
136 |
137 | c0 {
138 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAxNSAxMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iMTAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEiIHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIiIHk9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjMiIHk9IjIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHk9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI0IiB5PSIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIxIiB5PSI1IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHk9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIyIiB5PSIyIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjMiIHk9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIxIiB5PSI3IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjIiIHk9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI0IiB5PSIxMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSI1IiB5PSI5IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjQiIHk9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMC4yNSIvPgo8cmVjdCB4PSIyIiB5PSI2IiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHg9IjUiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE1IDUpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxNCA2KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgNykiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDgpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMSA5KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMTApIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxNCA0KSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgMykiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDIpIiBmaWxsPSJibGFjayIvPgo8cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMSAxKSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTAgMSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgMykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgNCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgNSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTUgNCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgMykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgMikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgMSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTUgNikiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTQgNykiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTMgOCkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTIgOSkiIGZpbGw9ImJsYWNrIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMTEgMTApIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEwIDkpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDExIDgpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyIDcpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEzIDYpIiBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIwLjI1Ii8+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEwIDApIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");
139 | width: 52px;
140 | height: 32px;
141 | background-position: center;
142 | background-repeat: no-repeat;
143 | border-radius: 0px;
144 | }
145 |
146 | c1 {
147 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMSIgdmlld0JveD0iMCAwIDEwIDEiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjEiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjIiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjMiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjQiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjUiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjYiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjciIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+CjxyZWN0IHg9IjkiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo=");
148 | width: 52px;
149 | height: 32px;
150 | background-position: center;
151 | background-repeat: no-repeat;
152 | border-radius: 0px;
153 | }
154 |
155 | c2 {
156 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
157 | width: 52px;
158 | height: 32px;
159 | background-position: center;
160 | background-repeat: no-repeat;
161 | border-radius: 0px;
162 | }
163 |
164 | c3 {
165 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPHJlY3QgeD0iOSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==");
166 | width: 56px;
167 | height: 32px;
168 | background-position: center;
169 | background-repeat: no-repeat;
170 | border-radius: 0px;
171 | }
172 |
173 | c0:hover {
174 | background-color: #00000020;
175 | }
176 |
177 | c1:hover {
178 | background-color: #00000020;
179 | }
180 |
181 | c2:hover {
182 | background-color: #00000020;
183 | }
184 |
185 | c3:hover {
186 | background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMCAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iOCIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNyIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNSIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iNCIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMyIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeD0iMSIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3Qgb3BhY2l0eT0iMC4yNSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMSIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNCIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMSIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMiIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iMyIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNSIgeT0iNCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNSIgeT0iNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNiIgeT0iMyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNyIgeT0iMiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOCIgeT0iMSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNiIgeT0iNiIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iNyIgeT0iNyIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPHJlY3QgeD0iOSIgeT0iOSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==");
187 | background-color: #ff2e2e;
188 | }
189 |
190 | w11-tabs {
191 | position: absolute;
192 | top: calc(57px - 5px);
193 | left: 16px;
194 | width: 268px;
195 |
196 | display: flex;
197 | flex-direction: column;
198 | align-items: flex-start;
199 | padding: 0px;
200 | }
201 |
202 | w11-tab-select {
203 | width: 268px;
204 | height: 36px;
205 | flex: none;
206 | order: 0;
207 | flex-grow: 0;
208 | margin: 5px 0px;
209 | display: flex;
210 | position: relative;
211 | transition: 0.1s;
212 | align-items: center;
213 | border-radius: 4px;
214 | }
215 |
216 | w11-tab-select:hover {
217 | background-color: #EAEAEA;
218 | }
219 |
220 | .selected:hover {
221 | background-color: #00000020;
222 | }
223 |
224 | .selected {
225 | background-color: #EAEAEA;
226 | border-radius: 4px;
227 | }
228 |
229 | w11-tab-select img {
230 | position: absolute;
231 | left: 11px;
232 | top: 9px;
233 | height: 17px;
234 | width: 17px;
235 | pointer-events: none;
236 | }
237 |
238 | w11-tab-select p {
239 | position: absolute;
240 | left: 46px;
241 | top: 8px;
242 | font-style: normal;
243 | font-weight: 400;
244 | font-size: 14px;
245 | line-height: 19px;
246 | display: flex;
247 | align-items: center;
248 | color: #000000;
249 | user-select: none;
250 | transition: 0.3s;
251 | }
252 |
253 | .selected p {
254 | font-weight: 600;
255 | }
256 |
257 | sel {
258 | position: absolute;
259 | left: 0%;
260 | width: 3px;
261 | height: 10px;
262 | opacity: 0%;
263 | top: 0;
264 | background: #005CCA;
265 | border-radius: 300px !important;
266 | transition: height 0.2s, opacity 0s;
267 | }
268 |
269 | .selected sel {
270 | height: 16px;
271 | opacity: 100%;
272 | top: initial;
273 | }
274 |
275 | w11-tab {
276 | display: none;
277 | position: absolute;
278 | top: 57px;
279 | left: 324px;
280 | right: 25px;
281 | bottom: 0px;
282 | animation: tab-show 0.5s;
283 | animation-timing-function: cubic-bezier(0,0,0,1.01);
284 | }
285 |
286 | @keyframes tab-show {
287 | from {
288 | top: 80px;
289 | opacity: 0%;
290 | }
291 | to {
292 | top: 57px;
293 | opacity: 100%;
294 | }
295 | }
296 |
297 | .active {
298 | display: block;
299 | }
300 |
301 | w11-tab-title {
302 | font-style: normal;
303 | font-weight: 600;
304 | font-size: 28px;
305 | line-height: 37px;
306 | display: flex;
307 | align-items: center;
308 | color: #000000;
309 | margin-top: -5px;
310 | margin-bottom: 29px;
311 | user-select: none;
312 | }
313 |
314 | h1 {
315 | font-style: normal;
316 | font-weight: 600;
317 | font-size: 32px;
318 | line-height: 32px;
319 | display: flex;
320 | align-items: center;
321 | color: #000000;
322 | user-select: none;
323 | margin-bottom: 20px;
324 | }
325 |
326 | h2 {
327 | font-style: normal;
328 | font-weight: 600;
329 | font-size: 24px;
330 | line-height: 24px;
331 | display: flex;
332 | align-items: center;
333 | color: #000000;
334 | user-select: none;
335 | margin-bottom: 10px;
336 | }
337 |
338 | h3 {
339 | font-style: normal;
340 | font-weight: 600;
341 | font-size: 20px;
342 | line-height: 20px;
343 | display: flex;
344 | align-items: center;
345 | color: #000000;
346 | user-select: none;
347 | margin-bottom: 10px;
348 | }
349 |
350 | w11-tab-content {
351 | position: absolute;
352 | top: 50px;
353 | left: 0px;
354 | right: 0px;
355 | bottom: 0px;
356 | overflow-y: scroll;
357 | overflow-x: hidden;
358 | border-radius: 8px 8px 0px 0px;
359 | }
360 |
361 | ::-webkit-scrollbar {
362 | width: 7px;
363 | }
364 | ::-webkit-scrollbar-track {
365 | background: #f1f1f100;
366 | }
367 | ::-webkit-scrollbar-thumb {
368 | background: #bbbbbb;
369 | border-radius:10px;
370 | }
371 | ::-webkit-scrollbar-thumb:hover {
372 | background: #9a9a9a;
373 | }
374 |
375 | w11-wide-card {
376 | background: #FBFBFB;
377 | border: 1px solid #E5E5E5;
378 | border-radius: 5px;
379 | width: 100%;
380 | height: 69px;
381 | display:flex;
382 | align-items: center;
383 | transition: 0.15s;
384 | margin-bottom: 5px;
385 | }
386 |
387 | w11-wide-card .w11-icon {
388 | width: 24px;
389 | height: 24px;
390 | object-fit: cover;
391 | margin-left: 17px;
392 | }
393 |
394 | w11-wide-card:hover {
395 | background-color: #F6F6F6;
396 | }
397 |
398 | w11-wide-card-text {
399 | margin-left: 18px;
400 | }
401 |
402 | w11-wide-card-text h3 {
403 | font-size: 14px;
404 | font-style: normal;
405 | font-weight: 600;
406 | line-height: 19px;
407 | letter-spacing: 0em;
408 | text-align: left;
409 | user-select: none;
410 | }
411 |
412 | w11-wide-card-text p {
413 | font-size: 12px;
414 | font-style: normal;
415 | font-weight: 400;
416 | line-height: 16px;
417 | letter-spacing: 0.01em;
418 | text-align: left;
419 | user-select: none;
420 | }
421 |
422 | w11-button {
423 | display: flex;
424 | align-items: center;
425 | justify-content: center;
426 | padding: 5px 24px 6px;
427 | width: fit-content;
428 | background-color: #005CCA;
429 | border-radius: 5px;
430 | font-size: 15px;
431 | font-style: normal;
432 | font-weight: 600;
433 | line-height: 20px;
434 | letter-spacing: 0em;
435 | text-align: center;
436 | color: #ffffff;
437 | user-select: none;
438 | transition: 0.15s;
439 | }
440 |
441 | w11-button:hover {
442 | background-color: #337DD5;
443 | }
444 |
445 | w11-button:active {
446 | background: rgba(0, 92, 202, 0.64);
447 | }
448 |
449 | .w11-card-element {
450 | position: absolute;
451 | right: 14px;
452 | }
453 |
454 | @media (prefers-color-scheme: dark) {
455 | :root {
456 | --background: #202020;
457 | }
458 | w11-topbar p {
459 | color: #fff;
460 | }
461 | w11-tab-select:hover {
462 | background-color: #2D2D2D;
463 | }
464 | .selected:hover {
465 | background-color: #ffffff20;
466 | }
467 | .selected {
468 | background-color: #2D2D2D;
469 | border-radius: 4px;
470 | }
471 | w11-tab-select p {
472 | color: #fff
473 | }
474 | w11-tab-title {
475 | color: #fff;
476 | }
477 | w11-wide-card:hover {
478 | background: #323232;
479 | }
480 | w11-wide-card {
481 | background: #2B2B2B;
482 | border: 1px solid #1D1D1D;
483 | }
484 | w11-wide-card-text h3 {
485 | color: #FFFFFF;
486 | }
487 | w11-wide-card-text p {
488 | color: rgba(255, 255, 255, 0.5);
489 | }
490 | c0 {
491 | filter: invert(1);
492 | }
493 | c1 {
494 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='1' viewBox='0 0 10 1' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='1' height='1' fill='white'/%3E %3Crect x='1' width='1' height='1' fill='white'/%3E %3Crect x='2' width='1' height='1' fill='white'/%3E %3Crect x='3' width='1' height='1' fill='white'/%3E %3Crect x='4' width='1' height='1' fill='white'/%3E %3Crect x='5' width='1' height='1' fill='white'/%3E %3Crect x='6' width='1' height='1' fill='white'/%3E %3Crect x='7' width='1' height='1' fill='white'/%3E %3Crect x='8' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
495 | }
496 | c2 {
497 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect y='2' width='1' height='1' fill='white'/%3E %3Crect x='1' y='2' width='1' height='1' fill='white'/%3E %3Crect x='2' y='2' width='1' height='1' fill='white'/%3E %3Crect x='3' y='2' width='1' height='1' fill='white'/%3E %3Crect x='4' y='2' width='1' height='1' fill='white'/%3E %3Crect x='5' y='2' width='1' height='1' fill='white'/%3E %3Crect x='6' y='2' width='1' height='1' fill='white'/%3E %3Crect x='7' y='2' width='1' height='1' fill='white'/%3E %3Crect x='7' y='3' width='1' height='1' fill='white'/%3E %3Crect x='7' y='4' width='1' height='1' fill='white'/%3E %3Crect x='7' y='5' width='1' height='1' fill='white'/%3E %3Crect x='7' y='6' width='1' height='1' fill='white'/%3E %3Crect x='7' y='7' width='1' height='1' fill='white'/%3E %3Crect x='7' y='8' width='1' height='1' fill='white'/%3E %3Crect x='6' y='9' width='1' height='1' fill='white'/%3E %3Crect x='7' y='9' width='1' height='1' fill='white'/%3E %3Crect x='5' y='9' width='1' height='1' fill='white'/%3E %3Crect x='4' y='9' width='1' height='1' fill='white'/%3E %3Crect x='3' y='9' width='1' height='1' fill='white'/%3E %3Crect x='2' y='9' width='1' height='1' fill='white'/%3E %3Crect x='1' y='9' width='1' height='1' fill='white'/%3E %3Crect y='9' width='1' height='1' fill='white'/%3E %3Crect y='8' width='1' height='1' fill='white'/%3E %3Crect y='7' width='1' height='1' fill='white'/%3E %3Crect y='6' width='1' height='1' fill='white'/%3E %3Crect y='5' width='1' height='1' fill='white'/%3E %3Crect y='4' width='1' height='1' fill='white'/%3E %3Crect y='3' width='1' height='1' fill='white'/%3E %3Crect x='2' width='1' height='1' fill='white'/%3E %3Crect x='3' width='1' height='1' fill='white'/%3E %3Crect x='4' width='1' height='1' fill='white'/%3E %3Crect x='5' width='1' height='1' fill='white'/%3E %3Crect x='6' width='1' height='1' fill='white'/%3E %3Crect x='7' width='1' height='1' fill='white'/%3E %3Crect x='8' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3Crect x='9' y='1' width='1' height='1' fill='white'/%3E %3Crect x='9' y='2' width='1' height='1' fill='white'/%3E %3Crect x='9' y='3' width='1' height='1' fill='white'/%3E %3Crect x='9' y='4' width='1' height='1' fill='white'/%3E %3Crect x='9' y='5' width='1' height='1' fill='white'/%3E %3Crect x='9' y='6' width='1' height='1' fill='white'/%3E %3Crect x='8' y='7' width='1' height='1' fill='white'/%3E %3Crect x='9' y='7' width='1' height='1' fill='white'/%3E %3Crect x='2' y='1' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
498 | }
499 | c3 {
500 | background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Crect width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='4' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='5' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='9' y='1' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='4' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='5' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='9' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='8' y='9' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='7' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='6' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='5' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='4' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='9' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' y='8' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='7' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='6' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='5' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='3' y='4' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='2' y='3' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' x='1' y='2' width='1' height='1' fill='white'/%3E %3Crect opacity='0.25' y='1' width='1' height='1' fill='white'/%3E %3Crect x='1' y='1' width='1' height='1' fill='white'/%3E %3Crect x='2' y='2' width='1' height='1' fill='white'/%3E %3Crect x='3' y='3' width='1' height='1' fill='white'/%3E %3Crect x='4' y='4' width='1' height='1' fill='white'/%3E %3Crect y='9' width='1' height='1' fill='white'/%3E %3Crect x='1' y='8' width='1' height='1' fill='white'/%3E %3Crect x='2' y='7' width='1' height='1' fill='white'/%3E %3Crect x='3' y='6' width='1' height='1' fill='white'/%3E %3Crect x='4' y='5' width='1' height='1' fill='white'/%3E %3Crect x='5' y='4' width='1' height='1' fill='white'/%3E %3Crect x='5' y='5' width='1' height='1' fill='white'/%3E %3Crect x='6' y='3' width='1' height='1' fill='white'/%3E %3Crect x='7' y='2' width='1' height='1' fill='white'/%3E %3Crect x='8' y='1' width='1' height='1' fill='white'/%3E %3Crect x='9' width='1' height='1' fill='white'/%3E %3Crect x='6' y='6' width='1' height='1' fill='white'/%3E %3Crect x='7' y='7' width='1' height='1' fill='white'/%3E %3Crect x='8' y='8' width='1' height='1' fill='white'/%3E %3Crect x='9' y='9' width='1' height='1' fill='white'/%3E %3C/svg%3E ");
501 | }
502 | c1:hover {
503 | background-color: #ffffff11;
504 | }
505 | c2:hover {
506 | background-color: #ffffff11;
507 | }
508 | .w11-input {
509 | background-color: #000 !important;
510 | border-bottom: 2px solid #424242 !important;
511 | color: #fff;
512 | }
513 | }
514 |
515 | .w11-input {
516 | background-color: #ffffff;
517 | border-style: none;
518 | border-bottom: 2px solid #888;
519 | border-radius: 5px;
520 | padding: 7px;
521 | padding-left: 10px;
522 | font-size: 14px;
523 | width: 300px;
524 | transition: 0.15s;
525 | }
526 |
527 | .w11-input:focus {
528 | border-bottom: 2px solid #005CCA !important;
529 | outline: none;
530 | }
531 |
532 | w11-tabs .w11-input {
533 | width: 100%;
534 | margin-bottom: 1em;
535 | }
536 |
--------------------------------------------------------------------------------