PluginProbe
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant / trunk
Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant vtrunk
2.3.1 2.3.0 2.2.8 2.2.7 trunk 1.10.0 1.10.1 1.10.2 1.10.3 1.10.4 1.10.5 1.11.0 1.11.1 1.11.2 1.6 1.7 1.8 1.8.1 1.8.2 1.8.3 1.9.0 1.9.1 1.9.10 1.9.11 1.9.12 All 59 releases
merchant / assets / css / admin / analytics.css

analytics.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant trunk, at assets/css/admin/analytics.css

1,092 lines 42.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 .merchant-analytics-section:not(.all-campaigns-table) {
3 background-color: #fff;
4 margin-bottom: 22px;
5 -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
6 box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2);
7 border-radius: 4px;
8 }
9
10 .merchant-analytics-loading-spinner {
11 display: inline-block;
12 width: 20px;
13 height: 20px;
14 border: 4px solid rgba(0, 0, 0, 0.1);
15 border-radius: 50%;
16 border-top-color: #3D65E9;
17 -webkit-animation: spin 1s ease-in-out infinite;
18 animation: spin 1s ease-in-out infinite;
19 vertical-align: middle;
20 -webkit-transition: 300ms;
21 transition: 300ms;
22 opacity: 0;
23 visibility: hidden;
24 }
25 .merchant-analytics-loading-spinner.show {
26 opacity: 1;
27 visibility: visible;
28 }
29 @-webkit-keyframes spin {
30 0% {
31 -webkit-transform: rotate(0deg);
32 transform: rotate(0deg);
33 }
34 100% {
35 -webkit-transform: rotate(360deg);
36 transform: rotate(360deg);
37 }
38 }
39 @keyframes spin {
40 0% {
41 -webkit-transform: rotate(0deg);
42 transform: rotate(0deg);
43 }
44 100% {
45 -webkit-transform: rotate(360deg);
46 transform: rotate(360deg);
47 }
48 }
49
50 .impressions-chart-section .chart .apexcharts-gridlines-vertical line:last-of-type,
51 .impressions-chart-section .chart .apexcharts-gridlines-vertical line:first-of-type {
52 display: none;
53 }
54
55 .merchant-analytics-section .chart-head {
56 padding: 20px 20px 0;
57 }
58 .merchant-analytics-section .chart-head .head-wrapper {
59 display: -webkit-box;
60 display: -ms-flexbox;
61 display: flex;
62 -webkit-box-pack: justify;
63 -ms-flex-pack: justify;
64 justify-content: space-between;
65 -ms-flex-line-pack: center;
66 align-content: center;
67 -webkit-box-align: center;
68 -ms-flex-align: center;
69 align-items: center;
70 -ms-flex-wrap: nowrap;
71 flex-wrap: nowrap;
72 -webkit-box-orient: horizontal;
73 -webkit-box-direction: normal;
74 -ms-flex-direction: row;
75 flex-direction: row;
76 }
77 .merchant-analytics-section .chart-head .head-wrapper .title .title-text {
78 font-size: 20px;
79 font-weight: 500;
80 margin-right: 15px;
81 vertical-align: middle;
82 }
83 .merchant-analytics-section .chart-head .head-wrapper .title .percentage {
84 vertical-align: middle;
85 font-size: 14px;
86 color: #335EEA;
87 border: 1px solid #F0F0F1;
88 border-radius: 4px;
89 padding: 3px 5px;
90 }
91 .merchant-analytics-section .chart-head .head-wrapper .title .percentage:before {
92 content: "+";
93 }
94 .merchant-analytics-section .chart-head .head-wrapper .title .percentage:after {
95 content: "%";
96 }
97 .merchant-analytics-section .chart-head .head-wrapper .title .percentage.negative {
98 color: #E36131;
99 }
100 .merchant-analytics-section .chart-head .head-wrapper .title .percentage.negative:before {
101 content: "-";
102 }
103
104 .merchant-analytics-overview-section {
105 margin-bottom: 30px;
106 }
107 .merchant-analytics-overview-section .overview-head {
108 margin-bottom: 20px;
109 }
110 .merchant-analytics-overview-section .overview-head .head-wrapper {
111 display: -webkit-box;
112 display: -ms-flexbox;
113 display: flex;
114 -webkit-box-pack: justify;
115 -ms-flex-pack: justify;
116 justify-content: space-between;
117 -webkit-box-align: center;
118 -ms-flex-align: center;
119 align-items: center;
120 -ms-flex-wrap: wrap;
121 flex-wrap: wrap; /* Allow wrapping on smaller screens */
122 gap: 15px; /* Increased gap for better spacing */
123 padding: 15px 0; /* Increased padding for better spacing */
124 }
125 .merchant-analytics-overview-section .overview-head .head-wrapper .title {
126 display: -webkit-box;
127 display: -ms-flexbox;
128 display: flex;
129 -webkit-box-align: center;
130 -ms-flex-align: center;
131 align-items: center;
132 -ms-flex-wrap: wrap;
133 flex-wrap: wrap; /* Allow wrapping on smaller screens */
134 gap: 15px; /* Increased gap between title and percentage */
135 }
136 .merchant-analytics-overview-section .overview-head .head-wrapper .title .title-text {
137 font-size: 24px; /* Increased font size */
138 font-weight: 500;
139 margin-right: 20px; /* Increased margin */
140 vertical-align: middle;
141 }
142 @media (max-width: 768px) {
143 .merchant-analytics-overview-section .overview-head .head-wrapper .title .title-text {
144 font-size: 20px; /* Slightly reduced font size on smaller screens */
145 display: block;
146 text-align: center;
147 margin-right: 0; /* Removed margin */
148 }
149 }
150 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage {
151 vertical-align: middle;
152 font-size: 16px; /* Increased font size */
153 color: #335EEA;
154 border: 1px solid #F0F0F1;
155 border-radius: 4px;
156 padding: 5px 8px; /* Increased padding */
157 }
158 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage:before {
159 content: "+";
160 }
161 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage:after {
162 content: "%";
163 }
164 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage.negative {
165 color: #E36131;
166 }
167 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage.negative:before {
168 content: "-";
169 }
170 @media (max-width: 768px) {
171 .merchant-analytics-overview-section .overview-head .head-wrapper .title .percentage {
172 font-size: 14px; /* Slightly reduced font size on smaller screens */
173 padding: 4px 6px; /* Adjusted padding */
174 }
175 }
176 @media (max-width: 768px) {
177 .merchant-analytics-overview-section .overview-head .head-wrapper .title {
178 display: block;
179 width: 100%;
180 }
181 }
182 .merchant-analytics-overview-section .overview-head .head-wrapper .date-range {
183 display: -webkit-box;
184 display: -ms-flexbox;
185 display: flex;
186 -webkit-box-align: center;
187 -ms-flex-align: center;
188 align-items: center;
189 -ms-flex-wrap: wrap;
190 flex-wrap: wrap; /* Allow wrapping on smaller screens */
191 gap: 15px; /* Increased gap between elements */
192 }
193 @media (max-width: 768px) {
194 .merchant-analytics-overview-section .overview-head .head-wrapper .date-range {
195 -webkit-box-orient: vertical;
196 -webkit-box-direction: normal;
197 -ms-flex-direction: column;
198 flex-direction: column; /* Stack inputs vertically on mobile */
199 width: 100%; /* Make date range full width on mobile */
200 gap: 10px; /* Increased gap between stacked elements */
201 }
202 }
203 @media (max-width: 768px) {
204 .merchant-analytics-overview-section .overview-head .head-wrapper {
205 -webkit-box-orient: vertical;
206 -webkit-box-direction: normal;
207 -ms-flex-direction: column;
208 flex-direction: column; /* Stack items vertically on smaller screens */
209 -webkit-box-align: start;
210 -ms-flex-align: start;
211 align-items: flex-start; /* Align items to the start */
212 gap: 20px; /* Increased gap for better spacing */
213 }
214 }
215 .merchant-analytics-overview-section .overview-cards {
216 display: -webkit-box;
217 display: -ms-flexbox;
218 display: flex;
219 -webkit-box-pack: justify;
220 -ms-flex-pack: justify;
221 justify-content: space-between;
222 -ms-flex-wrap: wrap;
223 flex-wrap: wrap;
224 gap: 20px;
225 }
226 .merchant-analytics-overview-section .overview-cards .overview-card {
227 background-color: #ffffff;
228 border-radius: 8px;
229 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
230 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
231 padding: 25px 20px;
232 -webkit-box-flex: 1;
233 -ms-flex: 1 1 calc(20% - 20px);
234 flex: 1 1 calc(20% - 20px);
235 position: relative;
236 }
237 .merchant-analytics-overview-section .overview-cards .overview-card .info-icon {
238 display: inline-block;
239 margin-left: 5px;
240 cursor: pointer;
241 position: absolute;
242 top: 8px;
243 right: 8px;
244 width: 18px;
245 height: 18px;
246 background-image: url("../../images/admin/info.svg");
247 }
248 .merchant-analytics-overview-section .overview-cards .overview-card .info-icon::before {
249 content: attr(data-tooltip);
250 position: absolute;
251 top: 50%;
252 right: calc(100% + 5px);
253 -webkit-transform: translateY(-50%);
254 transform: translateY(-50%);
255 background-color: #333;
256 color: #fff;
257 padding: 5px 10px;
258 border-radius: 4px;
259 font-size: 12px;
260 opacity: 0;
261 visibility: hidden;
262 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
263 transition: opacity 0.3s ease, visibility 0.3s ease;
264 z-index: 10;
265 width: 200px;
266 }
267 .merchant-analytics-overview-section .overview-cards .overview-card .info-icon::after {
268 content: "";
269 position: absolute;
270 right: calc(100% - 5px);
271 top: 50%;
272 -webkit-transform: translateY(-50%);
273 transform: translateY(-50%);
274 border-width: 5px;
275 border-style: solid;
276 border-color: transparent transparent transparent #333;
277 opacity: 0;
278 visibility: hidden;
279 -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
280 transition: opacity 0.3s ease, visibility 0.3s ease;
281 z-index: 10;
282 }
283 .merchant-analytics-overview-section .overview-cards .overview-card .info-icon:hover::before, .merchant-analytics-overview-section .overview-cards .overview-card .info-icon:hover::after {
284 opacity: 1;
285 visibility: visible;
286 }
287 .merchant-analytics-overview-section .overview-cards .overview-card .card-title {
288 font-size: 16px;
289 font-weight: 500;
290 color: #333;
291 margin-bottom: 15px;
292 position: relative;
293 }
294 .merchant-analytics-overview-section .overview-cards .overview-card .card-value {
295 font-size: 36px;
296 color: #000;
297 line-height: 36px;
298 margin-bottom: 10px;
299 }
300 .merchant-analytics-overview-section .overview-cards .overview-card .card-change {
301 position: absolute;
302 bottom: 10px;
303 right: 10px;
304 font-size: 16px;
305 color: #00BD8A;
306 }
307 .merchant-analytics-overview-section .overview-cards .overview-card .card-change::before {
308 content: "";
309 background-repeat: no-repeat;
310 background-position: center;
311 background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2213%22%20viewBox%3D%220%200%2011%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.515625%204.95483L5.29688%200.529297M5.29688%200.529297L10.1719%204.95483M5.29688%200.529297V12.2964%22%20stroke%3D%22%2300BD8A%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
312 width: 11px;
313 height: 11px;
314 display: inline-block;
315 margin-right: 4px;
316 background-size: 9px;
317 }
318 .merchant-analytics-overview-section .overview-cards .overview-card .card-change.decrease {
319 color: #E36131;
320 }
321 .merchant-analytics-overview-section .overview-cards .overview-card .card-change.decrease::before {
322 background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2211%22%20height%3D%2213%22%20viewBox%3D%220%200%2011%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M0.515625%208.3418L5.29688%2012.7673M5.29688%2012.7673L10.1719%208.3418M5.29688%2012.7673V0.999999%22%20stroke%3D%22%23E36131%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
323 }
324
325 .period-length {
326 display: none;
327 }
328
329 .revenue-chart-section .chart,
330 .aov-chart-section .chart {
331 padding: 20px;
332 }
333 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-title,
334 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-title {
335 color: #7880CA;
336 font-size: 14px;
337 font-weight: 500;
338 margin-bottom: 5px;
339 }
340 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value,
341 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value {
342 font-weight: 500;
343 font-size: 16px;
344 }
345 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff,
346 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff {
347 font-size: 14px;
348 color: #3D65E9;
349 }
350 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff:before,
351 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff:before {
352 content: "(+";
353 }
354 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff:after,
355 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff:after {
356 content: ")";
357 }
358 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff.decrease,
359 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff.decrease {
360 color: #E36131;
361 }
362 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff.decrease:before,
363 .aov-chart-section .chart .apexcharts-tooltip .arrow-box-aov .box-value .diff.decrease:before {
364 content: "(-";
365 }
366 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper,
367 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper {
368 display: -webkit-box;
369 display: -ms-flexbox;
370 display: flex;
371 -webkit-box-orient: horizontal;
372 -webkit-box-direction: normal;
373 -ms-flex-direction: row;
374 flex-direction: row;
375 gap: 10px;
376 }
377 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .separator,
378 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .separator {
379 width: 1px;
380 background-color: #D8D8D8;
381 }
382 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column,
383 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column {
384 -webkit-box-flex: 1;
385 -ms-flex: 1;
386 flex: 1;
387 }
388 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column.big,
389 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column.big {
390 -webkit-box-flex: 2;
391 -ms-flex: 2;
392 flex: 2;
393 }
394 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head,
395 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head {
396 border-bottom: 1px solid #D8D8D8;
397 margin-bottom: 10px;
398 }
399 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head .box-title,
400 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head .box-title {
401 color: #3D65E9;
402 font-weight: 500;
403 font-size: 14px;
404 margin-bottom: 5px;
405 }
406 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head .box-value,
407 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .head .box-value {
408 font-size: 16px;
409 font-weight: 500;
410 color: #101517;
411 margin-bottom: 10px;
412 }
413 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .orders-count,
414 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .orders-count {
415 color: #565865;
416 }
417 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage,
418 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage {
419 color: #3D65E9;
420 }
421 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage strong:before,
422 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage strong:before {
423 content: "+";
424 }
425 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage.decrease,
426 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage.decrease {
427 color: #E36131;
428 }
429 .revenue-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage.decrease strong:before,
430 .aov-chart-section .chart .apexcharts-tooltip .arrow-box .box-wrapper .box-column .change-percentage.decrease strong:before {
431 content: "-";
432 }
433
434 .revenue-chart-section .chart .apexcharts-tooltip {
435 padding: 20px;
436 border-radius: 5px;
437 -webkit-box-shadow: 0 0 23px 5px rgba(0, 0, 0, 0.1);
438 box-shadow: 0 0 23px 5px rgba(0, 0, 0, 0.1);
439 background-color: #fff;
440 }
441
442 .aov-chart-section .chart .apexcharts-tooltip {
443 padding: 10px;
444 border-radius: 5px;
445 -webkit-box-shadow: 0 0 23px 5px rgba(0, 0, 0, 0.1);
446 box-shadow: 0 0 23px 5px rgba(0, 0, 0, 0.1);
447 background-color: #fff;
448 }
449
450 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper {
451 display: -webkit-box;
452 display: -ms-flexbox;
453 display: flex;
454 -webkit-box-pack: justify;
455 -ms-flex-pack: justify;
456 justify-content: space-between;
457 -webkit-box-align: center;
458 -ms-flex-align: center;
459 align-items: center;
460 -ms-flex-wrap: wrap;
461 flex-wrap: wrap; /* Allow wrapping on smaller screens */
462 gap: 15px; /* Increased gap for better spacing */
463 padding: 20px; /* Increased padding for better spacing */
464 border-bottom: 1px solid #E9E9E9;
465 }
466 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title {
467 display: -webkit-box;
468 display: -ms-flexbox;
469 display: flex;
470 -webkit-box-align: center;
471 -ms-flex-align: center;
472 align-items: center;
473 -ms-flex-wrap: wrap;
474 flex-wrap: wrap; /* Allow wrapping on smaller screens */
475 gap: 15px; /* Increased gap between title and percentage */
476 }
477 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .title-text {
478 font-size: 20px; /* Increased font size */
479 font-weight: 500;
480 margin-right: 20px; /* Increased margin */
481 vertical-align: middle;
482 }
483 @media (max-width: 768px) {
484 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .title-text {
485 font-size: 18px; /* Slightly reduced font size on smaller screens */
486 display: block;
487 text-align: center;
488 margin-right: 0; /* Removed margin */
489 }
490 }
491 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage {
492 vertical-align: middle;
493 font-size: 16px; /* Increased font size */
494 color: #335EEA;
495 border: 1px solid #F0F0F1;
496 border-radius: 4px;
497 padding: 5px 8px; /* Increased padding */
498 }
499 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage:before {
500 content: "+";
501 }
502 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage:after {
503 content: "%";
504 }
505 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage.negative {
506 color: #E36131;
507 }
508 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage.negative:before {
509 content: "-";
510 }
511 @media (max-width: 768px) {
512 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title .percentage {
513 font-size: 14px; /* Slightly reduced font size on smaller screens */
514 padding: 4px 6px; /* Adjusted padding */
515 }
516 }
517 @media (max-width: 768px) {
518 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .title {
519 display: block;
520 width: 100%;
521 }
522 }
523 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .date-range {
524 display: -webkit-box;
525 display: -ms-flexbox;
526 display: flex;
527 -webkit-box-align: center;
528 -ms-flex-align: center;
529 align-items: center;
530 -ms-flex-wrap: wrap;
531 flex-wrap: wrap; /* Allow wrapping on smaller screens */
532 gap: 15px; /* Increased gap between elements */
533 }
534 @media (max-width: 768px) {
535 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper .date-range {
536 -webkit-box-orient: vertical;
537 -webkit-box-direction: normal;
538 -ms-flex-direction: column;
539 flex-direction: column; /* Stack inputs vertically on mobile */
540 width: 100%; /* Make date range full width on mobile */
541 gap: 10px; /* Increased gap between stacked elements */
542 }
543 }
544 @media (max-width: 768px) {
545 .merchant-analytics-section.campaigns-table .overview-head .head-wrapper {
546 -webkit-box-orient: vertical;
547 -webkit-box-direction: normal;
548 -ms-flex-direction: column;
549 flex-direction: column; /* Stack items vertically on smaller screens */
550 -webkit-box-align: start;
551 -ms-flex-align: start;
552 align-items: flex-start; /* Align items to the start */
553 gap: 20px; /* Increased gap for better spacing */
554 }
555 }
556 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper {
557 overflow-x: auto; /* Enable horizontal scrolling on mobile */
558 border-radius: 8px; /* Adjust the radius as needed */
559 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
560 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for better visual effect */
561 }
562 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table {
563 width: 100%;
564 border-collapse: collapse;
565 border-radius: 8px; /* Apply border radius to the table */
566 overflow: hidden; /* Ensures the border radius is applied correctly */
567 }
568 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th, .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table td {
569 padding: 14px 20px;
570 text-align: left;
571 border-bottom: 1px solid #ddd;
572 }
573 @media (max-width: 768px) {
574 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th, .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table td {
575 padding: 10px; /* Reduce padding on smaller screens */
576 font-size: 14px; /* Reduce font size for better readability */
577 }
578 }
579 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table {
580 /* Make the first column wider */
581 }
582 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th:first-child,
583 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table td:first-child {
584 width: 30%; /* Adjust this value as needed */
585 min-width: 150px; /* Ensure it doesn't get too small on mobile */
586 }
587 @media (max-width: 768px) {
588 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th:first-child,
589 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table td:first-child {
590 width: 40%; /* Increase width on mobile for better readability */
591 min-width: 120px; /* Adjust min-width for mobile */
592 }
593 }
594 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th {
595 background-color: #fff; /* White background for table head */
596 font-weight: bold; /* Bold font weight for table head */
597 cursor: pointer;
598 position: relative;
599 user-select: none; /* Disable text selection */
600 -webkit-user-select: none; /* Safari */
601 -moz-user-select: none; /* Firefox */
602 -ms-user-select: none; /* IE/Edge */
603 }
604 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th.asc::after {
605 content: "";
606 font-size: 12px;
607 color: #000;
608 }
609 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table th.desc::after {
610 content: "";
611 font-size: 12px;
612 color: #000;
613 }
614 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table {
615 /* Alternating row colors */
616 }
617 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:nth-child(odd) {
618 background-color: #F8F8FA; /* Light gray for even rows */
619 }
620 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:nth-child(even) {
621 background-color: #fff; /* White for odd rows */
622 }
623 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:hover {
624 background-color: #f5f5f5; /* Hover effect for rows */
625 }
626 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table {
627 /* Optional: Add border radius to the first and last rows */
628 }
629 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:first-child th:first-child {
630 border-top-left-radius: 8px;
631 }
632 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:first-child th:last-child {
633 border-top-right-radius: 8px;
634 }
635 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:last-child td:first-child {
636 border-bottom-left-radius: 8px;
637 }
638 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table tr:last-child td:last-child {
639 border-bottom-right-radius: 8px;
640 }
641 .merchant-analytics-section.campaigns-table .campaigns-table-wrapper table td.ctr:after {
642 content: "%";
643 }
644
645 .merchant-page-campaigns {
646 -webkit-box-orient: vertical;
647 -webkit-box-direction: normal;
648 -ms-flex-direction: column;
649 flex-direction: column;
650 }
651 .merchant-page-campaigns .merchant__campaigns-table-nav {
652 background-color: #fff;
653 padding: 15px;
654 border: 1px solid #F0F0F1;
655 border-radius: 5px 5px 0 0;
656 }
657 @media (max-width: 1099px) {
658 .merchant-page-campaigns .merchant__campaigns-table-nav > .alignright {
659 float: left;
660 margin-top: 15px;
661 }
662 }
663 .merchant-page-campaigns .merchant__campaigns-table-nav select,
664 .merchant-page-campaigns .merchant__campaigns-table-nav input,
665 .merchant-page-campaigns .merchant__campaigns-table-nav .button {
666 background: #fff;
667 border: 2px solid #F0F0F1;
668 color: #747474;
669 font-weight: 300;
670 padding-inline: 12px;
671 height: 36px;
672 }
673 .merchant-page-campaigns .merchant__campaigns-table-nav select:focus, .merchant-page-campaigns .merchant__campaigns-table-nav select:active,
674 .merchant-page-campaigns .merchant__campaigns-table-nav input:focus,
675 .merchant-page-campaigns .merchant__campaigns-table-nav input:active,
676 .merchant-page-campaigns .merchant__campaigns-table-nav .button:focus,
677 .merchant-page-campaigns .merchant__campaigns-table-nav .button:active {
678 -webkit-box-shadow: none;
679 box-shadow: none;
680 outline: none;
681 }
682 .merchant-page-campaigns .merchant__campaigns-table-nav select {
683 background-image: url("data:image/svg+xml,%3Csvg xmlns%3D%22http%3A//www.w3.org/2000/svg%22 width%3D%2210%22 height%3D%226%22 viewBox%3D%220%200%2010%206%22 fill%3D%22none%22%3E%3Cpath d%3D%22M4.37891 5.26562C4.51562 5.40234 4.70703 5.40234 4.84375 5.26562L8.89062 1.24609C9.02734 1.13672 9.02734 0.917969 8.89062 0.78125L8.34375 0.261719C8.23438 0.125 8.01562 0.125 7.87891 0.261719L4.625 3.48828L1.34375 0.261719C1.20703 0.125 1.01562 0.125 0.878906 0.261719L0.332031 0.78125C0.195312 0.917969 0.195312 1.13672 0.332031 1.24609L4.37891 5.26562Z%22 fill%3D%22%23939393%22/%3E%3C/svg%3E");
684 background-size: 12px;
685 background-repeat: no-repeat;
686 background-position: right 10px top 55%;
687 }
688 .merchant-page-campaigns .merchant__campaigns-table-nav .bulk-action {
689 display: -webkit-box;
690 display: -ms-flexbox;
691 display: flex;
692 -webkit-box-align: center;
693 -ms-flex-align: center;
694 align-items: center;
695 }
696 .merchant-page-campaigns .merchant__campaigns-table-nav .bulk-action select {
697 border-radius: 5px 0 0 5px;
698 padding-right: 30px;
699 margin-right: 0;
700 }
701 .merchant-page-campaigns .merchant__campaigns-table-nav .bulk-action .button {
702 border-left: none;
703 border-radius: 0 5px 5px 0;
704 padding-inline: 15px;
705 }
706 .merchant-page-campaigns .merchant__campaigns-table-nav .bulk-action .button:hover {
707 color: #fff;
708 background-color: #335EEA;
709 }
710 .merchant-page-campaigns .merchant__campaigns-table-nav .bulk-action .spinner {
711 margin-top: 0;
712 margin-right: 0;
713 }
714 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box {
715 position: relative;
716 margin-left: 10px;
717 }
718 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box .button {
719 border: none;
720 position: absolute;
721 background: none;
722 padding: 0;
723 left: 14px;
724 top: 1px;
725 line-height: 1;
726 }
727 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input {
728 width: 260px;
729 padding-left: 32px;
730 }
731 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input::-webkit-input-placeholder {
732 color: #747474;
733 font-weight: 300;
734 }
735 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input::-moz-placeholder {
736 color: #747474;
737 font-weight: 300;
738 }
739 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input:-ms-input-placeholder {
740 color: #747474;
741 font-weight: 300;
742 }
743 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input::-ms-input-placeholder {
744 color: #747474;
745 font-weight: 300;
746 }
747 .merchant-page-campaigns .merchant__campaigns-table-nav .search-campaign-box input::placeholder {
748 color: #747474;
749 font-weight: 300;
750 }
751 .merchant-page-campaigns .merchant__campaigns-table-nav .filter-campaign select {
752 width: 170px;
753 }
754 .merchant-page-campaigns .merchant__campaigns-table-nav .date-range {
755 margin-left: 10px;
756 }
757 .merchant-page-campaigns .merchant__campaigns-table-nav .merchant-analytics-loading-spinner {
758 display: none;
759 }
760 .merchant-page-campaigns .merchant__campaigns-table-nav .merchant-analytics-loading-spinner.show {
761 display: inline-block;
762 }
763 .merchant-page-campaigns .merchant__campaigns-pagination {
764 margin-left: 1px;
765 }
766 .merchant-page-campaigns .merchant__campaigns-pagination, .merchant-page-campaigns .merchant__campaigns-pagination-section {
767 display: -webkit-box;
768 display: -ms-flexbox;
769 display: flex;
770 -webkit-box-align: center;
771 -ms-flex-align: center;
772 align-items: center;
773 }
774 .merchant-page-campaigns .merchant__campaigns-pagination-section {
775 -ms-flex-wrap: wrap;
776 flex-wrap: wrap;
777 gap: 20px;
778 -webkit-box-pack: justify;
779 -ms-flex-pack: justify;
780 justify-content: space-between;
781 margin-top: 20px;
782 }
783 .merchant-page-campaigns .merchant__campaigns-pagination .prev-page, .merchant-page-campaigns .merchant__campaigns-pagination:not(:has(.prev-page)) .pagination-button:first-child {
784 border-radius: 5px 0 0 5px;
785 }
786 .merchant-page-campaigns .merchant__campaigns-pagination .next-page, .merchant-page-campaigns .merchant__campaigns-pagination:not(:has(.next-page)) .pagination-button:last-child {
787 border-radius: 0 5px 5px 0;
788 }
789 .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button {
790 cursor: pointer;
791 background: #fff;
792 border: 1px solid #f3f3f3;
793 width: 40px;
794 height: 40px;
795 line-height: 1;
796 margin: 0 -1px;
797 }
798 .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button:hover, .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button.pagination-active, .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button.prev-page:hover svg, .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button.next-page:hover svg {
799 color: #fff;
800 fill: #fff;
801 background-color: #335EEA;
802 }
803 .merchant-page-campaigns .merchant__campaigns-pagination .pagination-button.pagination-active {
804 pointer-events: none;
805 cursor: default;
806 }
807 .merchant-page-campaigns .merchant__campaigns-no-results {
808 display: -webkit-box;
809 display: -ms-flexbox;
810 display: flex;
811 -webkit-box-orient: vertical;
812 -webkit-box-direction: normal;
813 -ms-flex-direction: column;
814 flex-direction: column;
815 -webkit-box-align: center;
816 -ms-flex-align: center;
817 align-items: center;
818 gap: 10px;
819 padding: 50px 25px;
820 background: #fff;
821 border-radius: 5px;
822 }
823 .merchant-page-campaigns .merchant__campaigns-no-results span {
824 color: #787C82;
825 font-size: 14px;
826 }
827 .merchant-page-campaigns .merchant__campaigns-no-results span:first-of-type {
828 color: #101517;
829 font-size: 20px;
830 }
831 .merchant-page-campaigns .merchant__campaigns-no-results img {
832 width: 300px;
833 max-width: 100%;
834 height: auto;
835 margin-bottom: 10px;
836 }
837 .merchant-page-campaigns table.merchant__campaigns-table {
838 -webkit-box-shadow: none;
839 box-shadow: none;
840 border: none;
841 }
842 .merchant-page-campaigns table.merchant__campaigns-table th {
843 font-weight: bold;
844 border: none !important;
845 user-select: none; /* Disable text selection */
846 -webkit-user-select: none; /* Safari */
847 -moz-user-select: none; /* Firefox */
848 -ms-user-select: none; /* IE/Edge */
849 cursor: pointer;
850 position: relative;
851 }
852 .merchant-page-campaigns table.merchant__campaigns-table tr:nth-child(even) {
853 background-color: #F8F8FA;
854 }
855 .merchant-page-campaigns table.merchant__campaigns-table tr:nth-child(odd) {
856 background-color: #fff;
857 }
858 .merchant-page-campaigns table.merchant__campaigns-table th:first-child,
859 .merchant-page-campaigns table.merchant__campaigns-table td:first-child {
860 width: 27px !important;
861 min-width: 27px !important;
862 padding-inline: 15px 0;
863 }
864 .merchant-page-campaigns table.merchant__campaigns-table th.merchant__status .merchant-toggle-switch,
865 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__status .merchant-toggle-switch {
866 position: relative;
867 display: inline-block;
868 }
869 .merchant-page-campaigns table.merchant__campaigns-table th.merchant__status .spinner.is-active,
870 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__status .spinner.is-active {
871 position: absolute;
872 margin: 0;
873 left: calc(100% + 5px);
874 top: 50%;
875 -webkit-transform: translateY(-50%);
876 transform: translateY(-50%);
877 }
878 .merchant-page-campaigns table.merchant__campaigns-table th.merchant__edit a,
879 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__edit a {
880 color: #565865;
881 border: 1px solid #D8D8D8;
882 border-radius: 5px;
883 padding: 8px 10px;
884 }
885 .merchant-page-campaigns table.merchant__campaigns-table th.merchant__edit a:hover,
886 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__edit a:hover {
887 opacity: 0.8;
888 }
889 .merchant-page-campaigns table.merchant__campaigns-table th.merchant__edit a svg,
890 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__edit a svg {
891 position: relative;
892 top: 1px;
893 }
894 .merchant-page-campaigns table.merchant__campaigns-table td, .merchant-page-campaigns table.merchant__campaigns-table th {
895 padding: 13px 10px;
896 }
897 .merchant-page-campaigns table.merchant__campaigns-table thead tr th {
898 background-color: #F8F8FA;
899 }
900 .merchant-page-campaigns table.merchant__campaigns-table thead tr th.asc::after {
901 content: "";
902 font-size: 12px;
903 color: #000;
904 }
905 .merchant-page-campaigns table.merchant__campaigns-table thead tr th.desc::after {
906 content: "";
907 font-size: 12px;
908 color: #000;
909 }
910 .merchant-page-campaigns table.merchant__campaigns-table td.merchant__ctr:after {
911 content: "%";
912 }
913 .merchant-page-campaigns table.merchant__campaigns-table input[type=checkbox] {
914 margin: 0;
915 }
916 .merchant-page-campaigns .no-results-message {
917 text-align: center;
918 padding: 20px;
919 }
920
921 .merchant-analytics-widget {
922 margin: 0 -12px -12px -12px;
923 }
924 .merchant-analytics-widget .foot {
925 background-color: #FAFAFA;
926 border-top: 1px solid #F0F0F1;
927 display: -webkit-box;
928 display: -ms-flexbox;
929 display: flex;
930 -webkit-box-pack: justify;
931 -ms-flex-pack: justify;
932 justify-content: space-between;
933 -webkit-box-align: center;
934 -ms-flex-align: center;
935 align-items: center;
936 padding: 15px;
937 }
938 .merchant-analytics-widget .foot input {
939 border-color: #8c8f94;
940 background-color: #fff;
941 }
942 .merchant-analytics-widget .foot .analytics-link {
943 font-size: 14px;
944 font-weight: 500;
945 color: #2271b1;
946 }
947
948 .merchant-analytics-section.all-campaigns-table .date-range .compare-text,
949 .merchant-analytics-section.campaigns-table .date-range .compare-text,
950 .merchant-analytics-overview-section .date-range .compare-text,
951 .merchant-analytics-section .date-range .compare-text {
952 color: #3858E9;
953 font-size: 12px;
954 }
955 @media (min-width: 769px) {
956 .merchant-analytics-section.all-campaigns-table .date-range .compare-text,
957 .merchant-analytics-section.campaigns-table .date-range .compare-text,
958 .merchant-analytics-overview-section .date-range .compare-text,
959 .merchant-analytics-section .date-range .compare-text {
960 margin-right: -20px;
961 }
962 }
963 @media (max-width: 768px) {
964 .merchant-analytics-section.all-campaigns-table .date-range .compare-text,
965 .merchant-analytics-section.campaigns-table .date-range .compare-text,
966 .merchant-analytics-overview-section .date-range .compare-text,
967 .merchant-analytics-section .date-range .compare-text {
968 margin-top: 12px;
969 }
970 }
971 .merchant-analytics-section.all-campaigns-table .date-range input,
972 .merchant-analytics-section.campaigns-table .date-range input,
973 .merchant-analytics-overview-section .date-range input,
974 .merchant-analytics-section .date-range input {
975 width: 210px;
976 max-width: 100%;
977 font-size: 13px;
978 text-align: center;
979 color: #757575;
980 background: #fff;
981 border: 2px solid #F0F0F1;
982 border-radius: 4px;
983 padding: 3px 15px 3px 30px;
984 }
985 .merchant-analytics-section.all-campaigns-table .date-range .single-date-range,
986 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range,
987 .merchant-analytics-section.all-campaigns-table .date-range .second-date-range,
988 .merchant-analytics-section.campaigns-table .date-range .single-date-range,
989 .merchant-analytics-section.campaigns-table .date-range .first-date-range,
990 .merchant-analytics-section.campaigns-table .date-range .second-date-range,
991 .merchant-analytics-overview-section .date-range .single-date-range,
992 .merchant-analytics-overview-section .date-range .first-date-range,
993 .merchant-analytics-overview-section .date-range .second-date-range,
994 .merchant-analytics-section .date-range .single-date-range,
995 .merchant-analytics-section .date-range .first-date-range,
996 .merchant-analytics-section .date-range .second-date-range {
997 display: inline-block;
998 position: relative;
999 }
1000 .merchant-analytics-section.all-campaigns-table .date-range .single-date-range:before, .merchant-analytics-section.all-campaigns-table .date-range .single-date-range:after,
1001 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:before,
1002 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:after,
1003 .merchant-analytics-section.all-campaigns-table .date-range .second-date-range:before,
1004 .merchant-analytics-section.all-campaigns-table .date-range .second-date-range:after,
1005 .merchant-analytics-section.campaigns-table .date-range .single-date-range:before,
1006 .merchant-analytics-section.campaigns-table .date-range .single-date-range:after,
1007 .merchant-analytics-section.campaigns-table .date-range .first-date-range:before,
1008 .merchant-analytics-section.campaigns-table .date-range .first-date-range:after,
1009 .merchant-analytics-section.campaigns-table .date-range .second-date-range:before,
1010 .merchant-analytics-section.campaigns-table .date-range .second-date-range:after,
1011 .merchant-analytics-overview-section .date-range .single-date-range:before,
1012 .merchant-analytics-overview-section .date-range .single-date-range:after,
1013 .merchant-analytics-overview-section .date-range .first-date-range:before,
1014 .merchant-analytics-overview-section .date-range .first-date-range:after,
1015 .merchant-analytics-overview-section .date-range .second-date-range:before,
1016 .merchant-analytics-overview-section .date-range .second-date-range:after,
1017 .merchant-analytics-section .date-range .single-date-range:before,
1018 .merchant-analytics-section .date-range .single-date-range:after,
1019 .merchant-analytics-section .date-range .first-date-range:before,
1020 .merchant-analytics-section .date-range .first-date-range:after,
1021 .merchant-analytics-section .date-range .second-date-range:before,
1022 .merchant-analytics-section .date-range .second-date-range:after {
1023 position: absolute;
1024 top: 50%;
1025 -webkit-transform: translateY(-50%);
1026 transform: translateY(-50%);
1027 }
1028 .merchant-analytics-section.all-campaigns-table .date-range .single-date-range:before,
1029 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:before,
1030 .merchant-analytics-section.all-campaigns-table .date-range .second-date-range:before,
1031 .merchant-analytics-section.campaigns-table .date-range .single-date-range:before,
1032 .merchant-analytics-section.campaigns-table .date-range .first-date-range:before,
1033 .merchant-analytics-section.campaigns-table .date-range .second-date-range:before,
1034 .merchant-analytics-overview-section .date-range .single-date-range:before,
1035 .merchant-analytics-overview-section .date-range .first-date-range:before,
1036 .merchant-analytics-overview-section .date-range .second-date-range:before,
1037 .merchant-analytics-section .date-range .single-date-range:before,
1038 .merchant-analytics-section .date-range .first-date-range:before,
1039 .merchant-analytics-section .date-range .second-date-range:before {
1040 color: #4A4A4A;
1041 content: attr(data-title);
1042 left: 15px;
1043 }
1044 .merchant-analytics-section.all-campaigns-table .date-range .single-date-range:after,
1045 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:after,
1046 .merchant-analytics-section.all-campaigns-table .date-range .second-date-range:after,
1047 .merchant-analytics-section.campaigns-table .date-range .single-date-range:after,
1048 .merchant-analytics-section.campaigns-table .date-range .first-date-range:after,
1049 .merchant-analytics-section.campaigns-table .date-range .second-date-range:after,
1050 .merchant-analytics-overview-section .date-range .single-date-range:after,
1051 .merchant-analytics-overview-section .date-range .first-date-range:after,
1052 .merchant-analytics-overview-section .date-range .second-date-range:after,
1053 .merchant-analytics-section .date-range .single-date-range:after,
1054 .merchant-analytics-section .date-range .first-date-range:after,
1055 .merchant-analytics-section .date-range .second-date-range:after {
1056 content: "";
1057 background-image: url("../../images/admin/calendar.svg");
1058 background-size: 13px 14px;
1059 width: 13px;
1060 height: 14px;
1061 right: 15px;
1062 }
1063 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input,
1064 .merchant-analytics-section.campaigns-table .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input,
1065 .merchant-analytics-overview-section .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input,
1066 .merchant-analytics-section .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input {
1067 width: 225px;
1068 background: none;
1069 border: none;
1070 color: #939393;
1071 padding-inline: 0;
1072 }
1073 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input:focus,
1074 .merchant-analytics-section.campaigns-table .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input:focus,
1075 .merchant-analytics-overview-section .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input:focus,
1076 .merchant-analytics-section .date-range .first-date-range:not(.first-date-range-top-campaigns, .first-date-range-all-campaigns) input:focus {
1077 -webkit-box-shadow: none;
1078 box-shadow: none;
1079 outline: none;
1080 }
1081 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range-analytics-overview:after,
1082 .merchant-analytics-section.campaigns-table .date-range .first-date-range-analytics-overview:after,
1083 .merchant-analytics-overview-section .date-range .first-date-range-analytics-overview:after,
1084 .merchant-analytics-section .date-range .first-date-range-analytics-overview:after {
1085 right: 0;
1086 }
1087 .merchant-analytics-section.all-campaigns-table .date-range .first-date-range-analytics-overview input,
1088 .merchant-analytics-section.campaigns-table .date-range .first-date-range-analytics-overview input,
1089 .merchant-analytics-overview-section .date-range .first-date-range-analytics-overview input,
1090 .merchant-analytics-section .date-range .first-date-range-analytics-overview input {
1091 width: 158px !important;
1092 }