PluginProbe
MailerLite – WooCommerce integration / 2.0
MailerLite – WooCommerce integration v2.0
3.1.25 3.1.26 3.1.24 3.1.23 3.1.22 3.1.21 3.1.20 3.1.19 3.1.18 3.1.17 3.1.16 3.1.15 1.8.7 1.8.8 2.0 2.0.1 2.0.2 2.0.3 2.0.4 2.0.5 2.0.6 2.0.7 2.0.8 2.0.9 2.1.0 All 147 releases
woo-mailerlite / public / css / admin.css

admin.css in MailerLite – WooCommerce integration 2.0, at public/css/admin.css

790 lines 20.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 input[type=checkbox].woo-ml-form-checkbox, input[type=checkbox].woo-ml-form-checkbox:focus {
2 border-color: #d1d5db !important;
3 box-shadow: none;
4 }
5 input[type=checkbox].woo-ml-form-checkbox:checked::before {
6 content: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3E%3C/svg%3E");
7 margin: -0.05rem 0 0 -0.05rem;
8 height: 1rem;
9 width: 1rem;
10 border-radius: 0.25rem;
11 background-color: #09c269;
12 }
13 input[type=checkbox].woo-ml-form-checkbox:focus {
14 border-color: transparent;
15 box-shadow: none;
16 }
17 /* Tooltip container */
18 .tooltip {
19 position: relative;
20 display: inline-block;
21 margin-left: 6px;
22 width: 14px;
23 height: 14px;
24 background-image: url("data:image/svg+xml,%3Csvg data-v-ec5c43b2='' width='14' height='14' viewBox='0 0 20 20' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' class='fill-current'%3E%3Cpath data-v-ec5c43b2='' d='M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M10,2 C5.581722,2 2,5.581722 2,10 C2,14.418278 5.581722,18 10,18 C14.418278,18 18,14.418278 18,10 C18,5.581722 14.418278,2 10,2 Z M10,13.4 C10.5128358,13.4 10.9355072,13.7860402 10.9932723,14.2833789 L11,14.4 L11,14.5 C11,15.0522847 10.5522847,15.5 10,15.5 C9.48716416,15.5 9.06449284,15.1139598 9.00672773,14.6166211 L9,14.5 L9,14.4 C9,13.8477153 9.44771525,13.4 10,13.4 Z M10.5535163,4.54923473 C12.3317262,4.854245 13.6306856,6.39731006 13.6280154,8.2 C13.6280154,9.39222524 12.926064,10.3281429 11.8327013,11.0570506 C11.2400318,11.4521631 10.6587584,11.7105066 10.2442274,11.8486834 C9.72028407,12.023331 9.15396419,11.7401708 8.9793166,11.2162274 C8.81714383,10.7297086 9.04971348,10.2066508 9.50326352,9.99457788 L9.77443179,9.88965209 L9.94373739,9.81743828 C10.2116844,9.69835088 10.4792578,9.55564518 10.7233018,9.39294942 C11.317441,8.99685706 11.628003,8.58277476 11.6280041,8.1985125 C11.6292372,7.36956413 11.0324169,6.660587 10.215401,6.52044706 C9.44944865,6.38906586 8.69935706,6.79355516 8.38192794,7.48895692 L8.32433444,7.63184353 C8.14106232,8.15283276 7.5701457,8.42660656 7.04915647,8.24333444 C6.52816724,8.06006232 6.25439344,7.4891457 6.43766556,6.96815647 C7.03637104,5.26621128 8.77530536,4.24422427 10.5535163,4.54923473 Z'%3E%3C/path%3E%3C/svg%3E");
25 }
26
27 /* Tooltip text */
28 .tooltip .tooltiptext {
29 visibility: hidden;
30 width: 180px;
31 background-color: black;
32 color: #fff;
33 font-size: 12px;
34 font-weight: 400;
35 text-align: left;
36 padding: 6px 8px;
37 border-radius: 6px;
38
39 /* Position the tooltip text - see examples below! */
40 position: absolute;
41 z-index: 1;
42 }
43
44 /* Show the tooltip text when you mouse over the tooltip container */
45 .tooltip:hover .tooltiptext {
46 visibility: visible;
47 }
48 a.body-link {
49 color: #000000 !important;
50 text-decoration: underline;
51 }
52 a.body-link:hover {
53 text-decoration: none;
54 }
55 .woo-ml-icon {
56 display: inline-block;
57 height: 16px;
58 width: 16px;
59 background-repeat: no-repeat;
60 background-image: url('../img/icon-mailerlite.svg');
61 background-size: 16px 16px;
62 background-position: center;
63 vertical-align: middle;
64 }
65 .woo-ml-icon-refresh {
66 display: inline-block;
67 height: 16px;
68 width: 16px;
69 margin-top: 8px;
70 margin-left: 10px;
71 background-repeat: no-repeat;
72 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABIFBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiJf1cGbAAAAX3RSTlMAAQIDBAUGBwgJCgsMDQ4QERITFBYXGBobHB0eHyAhIyYqLi86PkBCQ0RHSkxOVFZhYmZnaGxwdXd4gIWGi4yRlZuepq+0wcXHyMrR19rc3uDi5Obo6evt7/H19/n7/bWOYmEAAAE8SURBVBgZzcHpIhtRAIbh92QRjdTW2qq1d0WCllJVLUGCLqRtMOK7/7twzmQmc0b473lIyRWH+vM8ILvwrSnn/85chi65tSsl/n4wWOO/V4jMNJR2/hJeBGrRtqpu5alrSYQ2FPt51FAKzrJCN1tjBjBj6y11YI0odPCEWM93xbDqcj7h+6oIMC9nG99EoAhQl3Vo8EwEikFJziSewUAdsCirju+tOv7AQMV6hs+8r0TKgzwOmWzEkJa1gG3Fguf4NmXNghKv8eRasp6COvYMnrKsE0CxfYOn71rWMqBI1eDJHstqZgBFakUSvUdylrAUu3hnaDNvLuVUcZQ4W58e6C1Nr50r9K+AI+vXjbo1+glJquVHz3TXSYm2pmp5yO8q7XOGyKuPOZzhH0rsDHOPwsKXw2ZwerA130PiFqnGov3b75WUAAAAAElFTkSuQmCC');
73 background-size: 16px 16px;
74 background-position: center;
75 cursor: pointer;
76 vertical-align: middle;
77 }
78 .woo-ml-icon-refresh.running {
79 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABIFBMVEUAAABcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxcuFxvZxGWAAAAX3RSTlMAAQIDBAUGBwgJCgsMDQ4QERITFBYXGBobHB0eHyAhIyYqLi86PkBCQ0RHSkxOVFZhYmZnaGxwdXd4gIWGi4yRlZuepq+0wcXHyMrR19rc3uDi5Obo6evt7/H19/n7/bWOYmEAAAE8SURBVBgZzcHpIhtRAIbh92QRjdTW2qq1d0WCllJVLUGCLqRtMOK7/7twzmQmc0b473lIyRWH+vM8ILvwrSnn/85chi65tSsl/n4wWOO/V4jMNJR2/hJeBGrRtqpu5alrSYQ2FPt51FAKzrJCN1tjBjBj6y11YI0odPCEWM93xbDqcj7h+6oIMC9nG99EoAhQl3Vo8EwEikFJziSewUAdsCirju+tOv7AQMV6hs+8r0TKgzwOmWzEkJa1gG3Fguf4NmXNghKv8eRasp6COvYMnrKsE0CxfYOn71rWMqBI1eDJHstqZgBFakUSvUdylrAUu3hnaDNvLuVUcZQ4W58e6C1Nr50r9K+AI+vXjbo1+glJquVHz3TXSYm2pmp5yO8q7XOGyKuPOZzhH0rsDHOPwsKXw2ZwerA130PiFqnGov3b75WUAAAAAElFTkSuQmCC');
80 }
81 .woo-ml-icon-refresh.error {
82 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABIFBMVEUAAADZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZU0/ZHZidAAAAX3RSTlMAAQIDBAUGBwgJCgsMDQ4QERITFBYXGBobHB0eHyAhIyYqLi86PkBCQ0RHSkxOVFZhYmZnaGxwdXd4gIWGi4yRlZuepq+0wcXHyMrR19rc3uDi5Obo6evt7/H19/n7/bWOYmEAAAE8SURBVBgZzcHpIhtRAIbh92QRjdTW2qq1d0WCllJVLUGCLqRtMOK7/7twzmQmc0b473lIyRWH+vM8ILvwrSnn/85chi65tSsl/n4wWOO/V4jMNJR2/hJeBGrRtqpu5alrSYQ2FPt51FAKzrJCN1tjBjBj6y11YI0odPCEWM93xbDqcj7h+6oIMC9nG99EoAhQl3Vo8EwEikFJziSewUAdsCirju+tOv7AQMV6hs+8r0TKgzwOmWzEkJa1gG3Fguf4NmXNghKv8eRasp6COvYMnrKsE0CxfYOn71rWMqBI1eDJHstqZgBFakUSvUdylrAUu3hnaDNvLuVUcZQ4W58e6C1Nr50r9K+AI+vXjbo1+glJquVHz3TXSYm2pmp5yO8q7XOGyKuPOZzhH0rsDHOPwsKXw2ZwerA130PiFqnGov3b75WUAAAAAElFTkSuQmCC');
83 }
84 .woo-ml-progress-bar {
85 display: block;
86 margin: 10px 0;
87 width: 400px;
88 padding: 3px;
89 background-color: #e5e5e5;
90 border-radius: 6px;
91 }
92 .woo-ml-progress-bar > div {
93 background-color: #00a154;
94 border-radius: 6px;
95 transition: width 1s ease;
96 }
97
98 .section-description {
99 width: 1000px;
100 }
101
102 #woo-ml-validate-key {
103 margin-left: 5px;
104 }
105
106 #woo-ml-order .woocommerce-help-tip {
107 margin: 0px !important;
108 }
109
110 #woocommerce-product-data ul.wc-tabs li.woo-ml_options a::before {
111 content: " ";
112 background-image: url(../img/icon-mailerlite-modern.svg);
113 background-position: center;
114 background-size: 13px;
115 background-repeat: no-repeat;
116 white-space: pre;
117 }
118
119 .woo-ml-wizard {
120 background: #FFFFFF;
121 border: 1px solid rgba(229,231,235,0.75);
122 padding: 2.5rem;
123 border-radius: 0.25rem;
124 font-family: 'Inter', sans-serif;
125 margin-top: 1.5rem;
126 margin-right: 1.5rem;
127 }
128 .flex {
129 display: flex !important;
130 }
131 .separator {
132 height: 4px;
133 width: 4px;
134 border-radius: 100px;
135 background-color: #d1d5db;
136 margin-left: 1rem;
137 margin-right: 1rem;
138 }
139
140 .woo-ml-header {
141 display: flex;
142 justify-content: space-between;
143 margin-bottom: 2.5rem;
144 align-items: center;
145 }
146 .card-between {
147 display: flex;
148 justify-content: space-between;
149 align-items: center;
150 }
151 .header-title h1 {
152 margin: 0;
153 font-weight: 600;
154 font-size: 20px;
155 line-height: 1.5rem;
156 color: #000000;
157 }
158 .header-title h2 {
159 font-size: 1.3rem;
160 line-height: 1.5rem;
161 margin: 0;
162 font-weight: 600;
163 color: #000000;
164 }
165 .settings-block {
166 border-top: 1px solid #e5e7eb;
167 margin-top: 2rem;
168 }
169 .settings-block-fixed {
170 max-width: 35rem;
171 }
172 .w-100 {
173 width: 100%;
174 }
175 .input-mailerlite input.woo-ml-form-checkbox.text-input {
176 border-color: #d1d5db;
177 height: 38px;
178 width: 100%;
179 padding-left: 12px;
180 }
181 .checkbox-text {
182 display: flex;
183 align-items: center;
184 }
185 .checkbox-text label {
186 margin-left: 4px;
187 margin-bottom: 3px;
188 }
189 h2.settings-block-header {
190 margin-top: 2rem;
191 margin-bottom: 1.5rem;
192 font-size: 20px;
193 }
194 .mb-0 {
195 margin-bottom: 0!important;
196 }
197 .mb-3 {
198 margin-bottom: 0.5rem !important;
199 }
200 .mb-2 {
201 margin-bottom: 0.4rem !important;
202 }
203 .mt-0 {
204 margin-top: 0 !important;
205 }
206 .mt-6 {
207 margin-top: 1.5rem !important;
208 }
209 .settings-label {
210 font-size: 0.875rem !important;
211 color: #000000 !important;
212 font-weight: 600 !important;
213 cursor: default;
214 }
215 .settings-label-medium {
216 font-size: 0.875rem;
217 color: rgba(0,0,0,0.75);
218 font-weight: 500;
219 }
220 .settings-label-medium a {
221 color: rgba(0,0,0,0.75);
222 text-decoration: underline;
223 }
224 .settings-label-medium a:hover {
225 text-decoration: none;
226 }
227 .settings-label-small {
228 font-size: 0.8125rem;
229 color: rgba(0,0,0,0.75);
230 font-weight: 400;
231 cursor: default;
232 }
233 .settings-label-small a {
234 color: rgba(0,0,0,0.75);
235 text-decoration: underline;
236 }
237 .settings-label-small a:hover {
238 text-decoration: none;
239 }
240 .form-group {
241 display: flex;
242 margin-bottom: 1.5rem;
243 }
244 .vertical {
245 flex-direction: column;
246 }
247 .align-items-center {
248 align-items: center;
249 }
250 .flex-start {
251 align-self: flex-start;
252 }
253 ol.instructions-list {
254 margin: 1rem 0 0 1rem;
255 font-size: 14px;
256 color: rgba(0,0,0,0.75);
257 line-height: 24px;
258 }
259
260 ol li {
261 margin-bottom: 0.5rem;
262 }
263
264 .signup-link {
265 color: rgba(0,0,0,0.75);
266 margin-top: 0.25rem;
267 }
268 .signup-link p {
269 margin-top: 0;
270 color: rgba(0,0,0,0.75);
271 }
272 .signup-link p a {
273 text-decoration: underline;
274 color: #000000;
275 font-weight: 500;
276 }
277 .signup-link p a:hover {
278 cursor: pointer;
279 text-decoration: none;
280 }
281
282 .border-top {
283 border-top: 1px solid #E5E7EB;
284 padding-top: 32px;
285 margin-top: 32px;
286 }
287 .header-title p {
288 margin: 0;
289 margin-top: 0.5rem;
290 font-weight: 400;
291 color: rgba(0,0,0,0.75);
292 font-size: 14px;
293 line-height: 24px;
294 }
295 .header-title {
296 margin-bottom: 24px;
297 width: 650px;
298 }
299 .input-block {
300 width: 650px;
301 }
302 .api-key-input {
303 display: flex;
304 flex-direction: row;
305 width: 100%;
306 height: 38px;
307 }
308 .api-key-input input {
309 width: 100%;
310 border-color: #d1d5db;
311 margin-right: 0.5rem;
312 padding-left: 12px;
313 }
314 .wp-core-ui select[multiple] {
315 height: 38px;
316 }
317 .api-key-input input::placeholder {
318 color: rgba(0,0,0,0.25);
319 }
320 .api-key-input button {
321 width: auto;
322 text-wrap: nowrap;
323 white-space: nowrap;
324 }
325 .api-key-input input:focus {
326 border-color: #6f6f6f;
327 box-shadow: none;
328 }
329
330 #woo-ml-wizard-step-two {
331 width: 650px;
332 }
333
334 #woo-ml-wizard-step-two input {
335 height: 38px;
336 }
337
338 .woo-ml-wizard-content div label { display: block; margin:5px; margin-left:0; font-size: 13px; color: #000000; font-weight: 500; }
339
340 .woo-ml-wizard-footer{
341 margin-top: 1rem;
342 text-align: center;
343 }
344 .btn-link {
345 padding: 0.5rem 0;
346 background-color: transparent;
347 color: rgba(0,0,0,0.75);
348 border: transparent;
349 font-size: 14px;
350 text-decoration: none;
351 height: 38px;
352 font-weight: 500;
353 }
354 .btn-link:hover {
355 text-decoration: underline;
356 cursor: pointer;
357 }
358 .btn-secondary {
359 position: relative;
360 padding: 0.5rem 1rem;
361 background-color: #e5ebe7;
362 color: rgba(0,0,0,0.75);
363 border-radius: 0.25rem;
364 border: transparent;
365 font-size: 14px;
366 text-decoration: none;
367 height: 38px;
368 font-weight: 500;
369 white-space: nowrap;
370 }
371 .btn-primary {
372 position: relative;
373 padding: 0.5rem 1rem;
374 background-color: #09c269;
375 color: #FFFFFF;
376 border-radius: 0.25rem;
377 border: transparent;
378 font-size: 14px;
379 text-decoration: none;
380 height: 38px;
381 white-space: nowrap;
382 font-weight: 500;
383 }
384 .btn-danger {
385 position: relative;
386 padding: 0.5rem 1rem;
387 background-color: #EF4444;
388 color: #FFFFFF;
389 border-radius: 0.25rem;
390 border: transparent;
391 font-size: 14px;
392 text-decoration: none;
393 height: 38px;
394 text-wrap: nowrap;
395 white-space: nowrap;
396 font-weight: 500;
397 }
398 .btn-primary:hover {
399 cursor: pointer;
400 background-color: #079B54;
401 }
402 .btn-secondary:hover {
403 cursor: pointer;
404 background-color: #EAECEF;
405 }
406 .btn-danger:hover {
407 cursor: pointer;
408 background-color: #DC2626;
409 }
410
411 .woo-ml-wizard-btn-previous{
412 float: left;
413 }
414
415 .woo-ml-wizard-btn-next{
416 float: right;
417 }
418 .woo-ml-wizard-error {
419 display: block;
420 color: #ec5858;
421 margin-top: 0.4rem;
422 }
423 .woo-ml-wizard-ul {
424 display: flex;
425 align-items: center;
426 }
427 .woo-ml-wizard-ul > li{
428 display: inline-block;
429 margin-bottom: 0;
430 }
431 .chevron {
432 display: inline-block;
433 width: 13px;
434 height: 13px;
435 margin-left: 12px;
436 margin-right: 12px;
437 background-image: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.66667 2.91683L8.75 7.00016L4.66667 11.0835' stroke='black' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
438 }
439 .woo-ml-wizard-group-btn{
440 display: flex;
441 margin-top: 24px;
442 }
443 .woo-ml-wizard-group-btn > button{
444 margin-right: 20px;
445 }
446 .woo-ml-wizard-text-bold{
447 font-weight: bold;
448 }
449 .woo-ml-wizard-text-medium{
450 font-weight: 600;
451 color: #000000;
452 }
453
454 .woo-ml-wizard-modal {
455 z-index: 10000;
456 position: fixed;
457 top: 0;
458 bottom: 0;
459 left: 0;
460 right: 0;
461 background-color: rgba(0,0,0,.7);
462 font-family: 'Inter', sans-serif;
463 overflow: auto;
464 overflow-y: scroll;
465 overflow-x: auto;
466 display: none;
467 }
468 .woo-ml-wizard-modal-parent {
469 display: table;
470 height: 100%;
471 table-layout: fixed;
472 width: 100%;
473 }
474 .woo-ml-wizard-modal-container {
475 display: table-cell;
476 text-align: center;
477 vertical-align: middle;
478 width: 100%;
479 }
480 .woo-ml-wizard-modal-header {
481 text-align: left;
482 }
483 .woo-ml-wizard-modal-header h2 {
484 margin-top: 0;
485 font-weight: 600;
486 font-size: 20px;
487 margin-bottom: 32px;
488 }
489 .woo-ml-wizard-modal-content {
490 width: 600px;
491 display: inline-block;
492 position: relative;
493 text-align: right;
494 background-color: #FFFFFF;
495 border-radius: 0.25rem;
496 padding: 40px;
497 }
498 .woo-ml-wizard-modal-body {
499 text-align: left;
500 display: flex;
501 flex-direction: column;
502 }
503
504 .modal-button {
505 display: flex;
506 justify-content: flex-end;
507 margin-top: 2rem;
508 }
509 #wooMlCreateGroup::placeholder {
510 color: rgba(0,0,0,0.25);
511 margin-left: 12px;
512 }
513 .woo-ml-wizard-modal-text {
514 padding: 20px 25px;
515 font-family: 'Inter', sans-serif;
516 font-size: 12px;
517 display: block;
518 direction: rtl;
519 text-align: center;
520 line-height: 20px;
521 }
522 .close {
523 cursor: pointer;
524 }
525 .close:after, .close:before {
526 content: "";
527 height: 20px;
528 width: 20px;
529 border-top: 1px solid #000;
530 position: absolute;
531 top: 20px;
532 right: 6px;
533 -moz-transform: rotate(-45deg);
534 -ms-transform: rotate(-45deg);
535 -webkit-transform: rotate(-45deg);
536 transform: rotate(-45deg);
537 }
538 .close:before {
539 right: 20px;
540 -moz-transform: rotate(45deg);
541 -ms-transform: rotate(45deg);
542 -webkit-transform: rotate(45deg);
543 transform: rotate(45deg);
544 }
545 .close:hover {
546 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
547 }
548 .woo-ml-text-center{
549 text-align: center;
550 }
551 .progress-box {
552 padding: 24px;
553 background-color: rgba(157,231,195,0.25);
554 border: 1px dashed #09c269;
555 border-radius: 4px;
556 text-align: left;
557 }
558 #wooMlWizardProgress {
559 width: 0px;
560 height: 10px;
561 border-radius: 20px;
562 background: #09c269;
563 margin-bottom: 24px;
564 transition: width 2s ease;
565 }
566 .input-mailerlite .select2-container--default .select2-selection--single {
567 border-color: #d1d5db;
568 height: 38px;
569 }
570 .input-mailerlite .select2-container--default .select2-selection--single:focus {
571 border-color: #6f6f6f;
572 }
573 .input-mailerlite select {
574 border-color: #d1d5db;
575 height: 38px;
576 width: 100%;
577 max-width: 100%;
578 padding: 0 24px 0 12px;
579 background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E') no-repeat right 12px top 48%;
580 background-size: 14px 14px;
581 }
582 .input-mailerlite select:hover {
583 color: #000000;
584 }
585 .input-mailerlite select:focus {
586 border-color: #8c8f94;
587 color: #000000;
588 box-shadow: none;
589 }
590 .input-mailerlite .select2-container--default .select2-selection--single .select2-selection__arrow {
591 border-color: #d1d5db;
592 height: 38px;
593 width: 100%;
594 max-width: 100%;
595 background: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23555%22%2F%3E%3C%2Fsvg%3E) no-repeat right 12px top 48%;
596 background-size: 14px 14px;
597 }
598 .input-mailerlite .select2-container--default .select2-selection--single .select2-selection__arrow b {
599 display: none;
600 }
601 .input-mailerlite .select2-container--default .select2-selection--single .select2-selection__rendered {
602 line-height: 38px;
603 font-size: 14px;
604 color: rgba(0,0,0,0.75);
605 padding-left: 12px;
606 }
607 .input-mailerlite input[type=text]:focus {
608 border-color: #6f6f6f;
609 box-shadow: none;
610 }
611 .create-group-input input {
612 width: 100%;
613 height: 38px;
614 border-color: #d1d5db;
615 }
616 .create-group-input input:focus {
617 border-color: #6f6f6f;
618 box-shadow: none;
619 }
620 body {
621 color: rgba(0,0,0,0.75);
622 }
623 @media only screen and (max-width: 768px) {
624 .woo-ml-wizard-breadcrumbs {
625 display: none;
626 }
627 .header-title, .input-block, #woo-ml-wizard-step-two {
628 width: 100%;
629 }
630 .woo-ml-wizard {
631 margin-right: 1rem;
632 margin-top: 1rem;
633 padding: 2rem;
634 }
635 .card-between {
636 align-items: start;
637 flex-direction: column;
638 }
639 .card-between button {
640 margin-top: 1.5rem;
641 }
642 .woo-ml-header .status .separator, .woo-ml-header .status h3, .woo-ml-header .status p {
643 display: none;
644 }
645 .api-key-input {
646 flex-direction: column;
647 height: auto;
648 }
649 .api-key-input button {
650 margin-top: 0.5rem;
651 }
652 }
653 @media only screen and (max-width: 782px) {
654 input[type=checkbox].woo-ml-form-checkbox {
655 height: 1rem;
656 width: 1rem;
657 }
658 }
659 /* The alert message box */
660 .woo-ml-alert {
661 padding: 12px 16px;
662 background-color: #FECACA; /* Red */
663 border-radius: 0.25rem;
664 color: #B91C1C;
665 margin-bottom: 40px;
666 }
667
668 /* The close button */
669 .woo-ml-closebtn {
670 margin-left: 15px;
671 color: #B91C1C;
672 float: right;
673 font-size: 20px;
674 line-height: 16px;
675 cursor: pointer;
676 transition: 0.3s;
677 }
678
679 .woo-ml-alert-success {
680 padding: 12px 16px;
681 background-color: #9DE7C3;
682 border-radius: 0.25rem;
683 color: #05743F;
684 margin-bottom: 40px;
685 }
686
687 .woo-ml-alert-warning-small {
688 margin-bottom: 0;
689 margin-top: 0.75rem;
690 padding: 8px 10px;
691 background-color: #FEF08A;
692 color: #A16207;
693 border-radius: 0.25rem;
694 }
695
696 .woo-ml-alert-warning-small svg {
697 margin-right: 6px;
698 fill: #A16207;
699 }
700
701 /* When moving the mouse over the close button */
702 .woo-ml-closebtn:hover {
703 color: #600c0c;
704 }
705
706 /* The close button */
707 .woo-ml-closebtn-success {
708 margin-left: 15px;
709 color: #05743F;
710 float: right;
711 font-size: 20px;
712 line-height: 16px;
713 cursor: pointer;
714 transition: 0.3s;
715 }
716
717 /* When moving the mouse over the close button */
718 .woo-ml-closebtn-success:hover {
719 color: #025B31;
720 }
721 .progress {
722 border-radius: 0.25rem;
723 background: rgba(157,231,195,0.5);
724 }
725
726 #woo_ml_loader {
727 position:fixed;
728 width:100%;
729 left:0;right:0;top:0;bottom:0;
730 background-color: rgba(255,255,255,0.7);
731 z-index:9999;
732 display:none;
733 }
734
735 @-webkit-keyframes spin {
736 from {-webkit-transform:rotate(0deg);}
737 to {-webkit-transform:rotate(360deg);}
738 }
739
740 @keyframes spin {
741 from {transform:rotate(0deg);}
742 to {transform:rotate(360deg);}
743 }
744
745 #woo_ml_loader::after {
746 content:'';
747 display:block;
748 position:absolute;
749 left:48%;top:40%;
750 width:40px;height:40px;
751 border-style:solid;
752 border-color:black;
753 border-top-color:transparent;
754 border-width: 4px;
755 border-radius:50%;
756 -webkit-animation: spin .8s linear infinite;
757 animation: spin .8s linear infinite;
758 }
759
760 .woo-ml-button-loading .woo-ml-button-text {
761 visibility: hidden;
762 opacity: 0;
763 }
764
765 .woo-ml-button-loading::after {
766 content: "";
767 position: absolute;
768 width: 16px;
769 height: 16px;
770 top: 0;
771 left: 0;
772 right: 0;
773 bottom: 0;
774 margin: auto;
775 border: 4px solid transparent;
776 border-top-color: #ffffff;
777 border-radius: 50%;
778 animation: woo-ml-button-loading-spinner 1s ease infinite;
779 }
780
781 @keyframes woo-ml-button-loading-spinner {
782 from {
783 transform: rotate(0turn);
784 }
785
786 to {
787 transform: rotate(1turn);
788 }
789 }
790