https://www.e-rewards.es/login

1<!DOCTYPE html>
2
3<html data-ng-app="app-defaultLayout" lang="es">
4
5  <head>
6  
7  <meta charset="utf-8">
8  <meta http-equiv="X-UA-Compatible" content="IE=edge">
9  <meta name="viewport" content="width=device-width, initial-scale=1">
10  <meta name=”robots” content=”index,follow” />
11  <link rel="alternate" hreflang="es-es" href="login" /><link rel="canonical" href="login" />
12
13  <title>e-Rewards: inicia sesión en tu cuenta</title>
14  <meta name="description" content="Usa las credenciales con las que te suscribiste para iniciar sesión en tu cuenta de e-Rewards." />
15  <meta name="keywords" content="" />
16  <link rel="shortcut icon" href="https://darwin-assets.dynata.com/EROP/RB/fav-32x32-c.svg" type="image/x-ico; charset=binary" />
17  <meta name="google-site-verification" content="" />
18
19  <link rel="stylesheet" href="https://e-rewards.es/blueprint/dist/stylesheets/style.css" />
20    <link rel="stylesheet" href="https://e-rewards.es/blueprint/dist/stylesheets/layouts/default/default.css" />
21    <link rel="stylesheet" href="https://e-rewards.es/blueprint/dist/stylesheets/login.css" />
22    
23
24  
25
26  
27  <link rel="stylesheet" href="https://darwin-assets.dynata.com/upp-ui/hydra.css" />
28  
29
30  
31
32  
33  

33<script type="module" src="https://darwin-assets.dynata.com/upp-ui/hydra.js" defer></script>

33
34  
35
36  
37  

37<script src="/blueprint/dist/common/icons.js"></script>

37
38  
39
40  
41  <link href="https://darwin-assets.dynata.com/font-awesome/css/fontawesome.min.css" rel="stylesheet" />
42  <link href="https://darwin-assets.dynata.com/font-awesome/css/regular.min.css" rel="stylesheet" />
43  <link href="https://darwin-assets.dynata.com/font-awesome/css/solid.min.css" rel="stylesheet" />
44
45  
46  <link href="https://darwin-assets.dynata.com/font-awesome/css/v4-font-face.min.css" rel="stylesheet" />
47
48  
49
50  <!-- Google Tag Manager -->

51<script>

51(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
52new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
53j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
54'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
55})(window,document,'script','dataLayer','

55GTM-TW4HV4C

55');

55</script>

55
56<!-- End Google Tag Manager -->
57
58<!-- Google Tag Manager -->

59<script>

59(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
60new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
61j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
62'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
63})(window,document,'script','dataLayer','

63GTM-MWBHNQL

63');

63</script>

63
64<!-- End Google Tag Manager -->
65
66<link rel="preconnect" href="https://fonts.googleapis.com">
67<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
68<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;300;400;500;600;700;800&display=swap" rel="stylesheet">
69<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />
70 

70<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>

70
71</head>
72
73  <body class="" style="background-image: url(https://darwin-assets.dynata.com/EROP/RB/login-bkgrnd.png)">
74    <div>
75  <style >:root {
76
77    /***** COLORS *****/
78
79    /* Teal */
80    --teal-100: #A8EFFA;
81    --teal-200: #54C1D2;
82    --teal-300: #1BA4AD;
83    --teal-400: #008091;
84    --teal-500: #165A73;
85
86    /* Orange */
87    --orange-100: #FFECD1;
88    --orange-200: #FCBF6C;
89    --orange-300: #FFA427;
90    --orange-400: #F66A00;
91    --orange-500: #D14900;
92
93    /* Purple */
94    --purple-100: #F4EBFD;
95    --purple-200: #C6A5E6;
96    --purple-300: #9D7CBE;
97    --purple-400: #7F5CA2;
98    --purple-500: #412860;
99
100    /* Grey */
101    --grey-100: #F8F8F8;
102    --grey-200: #DDDDDD;
103    --grey-300: #858585;
104    --grey-400: #555555;
105    --grey-500: #252525;
106
107    /* Black & White */
108    --black: #000000;
109    --white: #FFFFFF;
110
111
112    /***** TEXT INFO *****/
113
114    /* Font family */
115
116    --ff-primary: 'Noto Sans', sans-serif;
117
118    /* Font Weight */
119
120    --fw-thin: 100;
121    --fw-regular: 300;
122    --fw-medium: 500;
123    --fw-semibold: 600;
124    --fw-bold: 700;
125    --fw-xbold: 800;
126
127    /* Font Sizes */
128
129    --fs-800: 3.875rem;
130    --fs-700: 3rem;
131    --fs-600: 2.5rem;
132    --fs-500: 2rem;
133    --fs-400: 1.5rem;
134    --fs-300: 1.25rem;
135    --fs-200: 1.125rem;
136    --fs-100: 1rem;
137    --fs-75: 0.875rem;
138    --fs-50: 0.75rem;
139    --fs-25: 0.625rem;
140
141    /* Line Heights */
142
143    --lh-800: 4.375rem;
144    --lh-700: 3.5rem;
145    --lh-600: 3rem;
146    --lh-500: 2.5rem;
147    --lh-400: 2rem;
148    --lh-300: 1.75rem;
149    --lh-200: 1.625rem;
150    --lh-100: 1.5rem;
151    --lh-75: 1.375rem;
152    --lh-50: 1.25rem;
153    --lh-25: 1.125rem;
154
155    /* Mobile Font Declarations */
156
157    --fs-xl-h1: var(--fs-700);
158    --fs-h1: var(--fs-600);
159    --fs-h2: var(--fs-400);
160    --fs-h3: var(--fs-400);
161    --fs-h4: var(--fs-300);
162    --fs-h5: var(--fs-200);
163    --fs-h6: var(--fs-100);
164    --fs-p: var(--fs-75);
165    --fs-s: var(--fs-50);
166    --fs-xs: var(--fs-25);
167    --fs-button: var(--fs-100);
168    --fs-body: var(--fs-100);
169
170    --lh-xl-h1: var(--lh-700);
171    --lh-h1: var(--lh-600);
172    --lh-h2: var(--lh-500);
173    --lh-h3: var(--lh-400);
174    --lh-h4: var(--lh-300);
175    --lh-h5: var(--lh-200);
176    --lh-h6: var(--lh-100);
177    --lh-p: var(--lh-75);
178    --lh-s: var(--lh-50);
179    --lh-xs: var(--lh-25);
180    --lh-button: var(--lh-100);
181    --lh-body: var(--lh-100);
182
183}
184
185@media (min-width: 51.875em) {
186
187    /* Desktop Font Declarations */
188
189    :root {
190
191        --fs-xl-h1: var(--fs-800);
192        --fs-h1: var(--fs-700);
193        --fs-h2: var(--fs-600);
194        --fs-h3: var(--fs-500);
195        --fs-h4: var(--fs-400);
196        --fs-h5: var(--fs-300);
197        --fs-h6: var(--fs-200);
198        --fs-p: var(--fs-100);
199        --fs-s: var(--fs-50);
200        --fs-xs: var(--fs-25);
201        --fs-button: var(--fs-100);
202        --fs-body: var(--fs-100);
203
204        --lh-xl-h1: var(--lh-800);
205        --lh-h1: var(--lh-700);
206        --lh-h2: var(--lh-600);
207        --lh-h3: var(--lh-500);
208        --lh-h4: var(--lh-400);
209        --lh-h5: var(--lh-300);
210        --lh-h6: var(--lh-200);
211        --lh-p: var(--lh-100);
212        --lh-s: var(--lh-50);
213        --lh-xs: var(--lh-25);
214        --lh-button: var(--lh-100);
215        --lh-body: var(--lh-100);
216
217    }
218
219
220}
221
222
223/***** CSS RESET *****/
224
225/* Box sizing rules */
226*,
227*::before,
228*::after {
229    box-sizing: border-box;
230}
231
232/* Remove default margin */
233* {
234    margin: 0;
235    padding: 0;
236    font: inherit;
237    font-family: var(--ff-primary) !important;
238}
239
240.fa,
241.fab,
242.fad,
243.fal,
244.far,
245.fas {
246    font-family: "Font Awesome 6 Free" !important;
247}
248
249/* Set core root defaults */
250html:focus-within {
251    scroll-behavior: smooth;
252}
253
254html,
255body {
256    height: 100%;
257}
258
259/* Set core body defaults */
260body {
261    text-rendering: optimizeSpeed;
262    line-height: 1.5;
263}
264
265/* A elements that don't have a class get default styles */
266a:not([class]) {
267    text-decoration-skip-ink: auto;
268}
269
270
271/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
272@media (prefers-reduced-motion: reduce) {
273    html:focus-within {
274        scroll-behavior: auto;
275    }
276
277    *,
278    *::before,
279    *::after {
280        animation-duration: 0.01ms !important;
281        animation-iteration-count: 1 !important;
282        transition-duration: 0.01ms !important;
283        scroll-behavior: auto !important;
284    }
285}
286
287/***** UTILITY CLASSES *****/
288
289/* Color Classes */
290
291.white {
292    color: var(--white)
293}
294
295.black {
296    color: var(--black);
297}
298
299/*TEAL*/
300
301.teal-100 {
302    color: var(--teal-100);
303}
304
305.teal-200 {
306    color: var(--teal-200);
307}
308
309.teal-300 {
310    color: var(--teal-300);
311}
312
313.teal-400 {
314    color: var(--teal-400);
315}
316
317.teal-500 {
318    color: var(--teal-500);
319}
320
321/*ORANGE*/
322
323.orange-100 {
324    color: var(--orange-100);
325}
326
327.orange-200 {
328    color: var(--orange-200);
329}
330
331.orange-300 {
332    color: var(--orange-300);
333}
334
335.orange-400 {
336    color: var(--orange-400);
337}
338
339.orange-500 {
340    color: var(--orange-500);
341}
342
343/*PURPLE*/
344
345.purple-100 {
346    color: var(--purple-100);
347}
348
349.purple-200 {
350    color: var(--purple-200);
351}
352
353.purple-300 {
354    color: var(--purple-300);
355}
356
357.purple-400 {
358    color: var(--purple-400);
359}
360
361.purple-500 {
362    color: var(--purple-500);
363}
364
365/*GREY*/
366
367.grey-100 {
368    color: var(--grey-100);
369}
370
371.grey-200 {
372    color: var(--grey-200);
373}
374
375.grey-300 {
376    color: var(--grey-300);
377}
378
379.grey-400 {
380    color: var(--grey-400);
381}
382
383.grey-500 {
384    color: var(--grey-500);
385}
386
387
388
389
390/* Font Weight Classes */
391
392.fw-thin {
393    font-weight: var(--fw-thin);
394}
395
396.fw-regular {
397    font-weight: var(--fw-regular);
398}
399
400.fw-medium {
401    font-weight: var(--fw-medium);
402}
403
404.fw-semibold {
405    font-weight: var(--fw-semibold);
406}
407
408.fw-bold {
409    font-weight: var(--fw-bold);
410}
411
412.fw-xbold {
413    font-weight: var(--fw-xbold);
414}
415
416/* Text align */
417
418.la {
419    text-align: left;
420}
421
422.ra {
423    text-align: right;
424}
425
426.ca {
427    text-align: center;
428}
429
430/* Container Styling */
431
432.rb-container {
433    /*max-width: 1160px;*/
434    width: min(1160px, 90%);
435    margin-inline: auto;
436}
437
438.header .container {
439    padding-left: 0 !important;
440    width: min(1160px, 90%) !important;
441    margin-inline: auto !important;
442    padding-right: 0 !important;
443}
444
445/* Grid Styling */
446
447.center {
448    text-align: center;
449}
450
451.rb-grid {
452    display: grid;
453    grid-template-columns: 1fr;
454}
455
456/* Button Styling */
457
458.button {
459    font-size: 0.875rem !important;
460    padding: 15px 30px;
461    border-radius: 30px !important;
462    font-weight: var(--fw-bold) !important;
463
464}
465
466.buttonPrimary {
467    background: var(--white);
468    border: 2px solid var(--teal-500);
469    box-shadow: 2px 4px 0px var(--teal-500);
470    color: var(--teal-500);
471}
472
473.buttonPrimary:hover {
474    background: var(--teal-500);
475    border: 2px solid var(--teal-500);
476    box-shadow: 2px 4px 0px #165A734D;
477    color: var(--white);
478}
479
480.buttonSecondary {
481    background: var(--white);
482    border: 2px solid var(--orange-300);
483    box-shadow: 2px 4px 0px var(--orange-300);
484    color: var(--grey-500);
485}
486
487.buttonSecondary:hover {
488    background: var(--orange-300);
489    border: 2px solid var(--orange-300);
490    box-shadow: 2px 4px 0px #FFA4274D;
491    color: var(--white);
492}
493
494.buttonTertiary {
495    background: var(--orange-300);
496    border: 2px solid var(--orange-300);
497    box-shadow: 2px 4px 0px var(--grey-500);
498    color: var(--grey-500);
499}
500
501.buttonTertiary:hover {
502    background: none;
503    border: 2px solid var(--white);
504    box-shadow: none;
505    color: var(--white);
506}
507
508.buttonInfo-light {
509    padding: 15px 35px 15px 70px;
510    width: auto;
511    border-radius: 40px;
512    background: none;
513    background-image: url('https://darwin-assets.dynata.com/EROP/RB/info-button-slider-erop.svg');
514    background-position: -323.5px 0px;
515    background-size: 375px;
516    background-repeat: no-repeat;
517    transition-property: all;
518    transition-duration: 0.3s;
519    animation-timing-function: ease-in;
520    text-decoration: none;
521    border: none;
522    font-size: var(--fs-75);
523    font-weight: var(--fw-semibold);
524    margin: auto;
525    display: inline-block;
526    position: relative;
527    color: var(--grey-500);
528}
529
530.buttonInfo-light:hover {
531    background-position: 100%;
532    color: white;
533    padding-left: 65px;
534}
535
536.buttonInfo-light::before {
537    content: url('https://darwin-assets.dynata.com/EROP/RB/arrow.svg');
538    position: absolute;
539    top: 13px;
540    left: 12px;
541}
542
543
544.buttonInfo-dark {
545    color: white;
546    padding: 15px 35px 15px 70px;
547    width: auto;
548    border-radius: 40px;
549    background: none;
550    background-image: url('https://darwin-assets.dynata.com/EROP/RB/info-button-slider-white.svg');
551    background-position: -323.5px 0px;
552    background-size: 375px;
553    background-repeat: no-repeat;
554    transition-property: all;
555    transition-duration: 0.3s;
556    animation-timing-function: ease-in;
557    border: none;
558    font-size: var(--fs-75);
559    font-weight: var(--fw-semibold);
560    margin: auto;
561    display: inline-block;
562    position: relative;
563    text-decoration: underline;
564}
565
566.buttonInfo-dark:hover {
567    background-position: 100%;
568    color: var(--grey-500);
569    padding-left: 65px;
570}
571
572.buttonInfo-dark::before {
573    content: url('https://darwin-assets.dynata.com/EROP/RB/arrow-black.svg');
574    fill: #252525;
575    position: absolute;
576    top: 13px;
577    left: 12px;
578}
579
580.buttonInfo-orange {
581    padding: 0px 0px 0px 35px;
582    width: auto;
583    height: 25px;
584    border-radius: 40px;
585    background: none;
586
587    background-position: -323.5px 0px;
588    background-size: 375px;
589    background-repeat: no-repeat;
590    transition-property: all;
591    transition-duration: 0.3s;
592    animation-timing-function: ease-in;
593    border: none;
594    font-size: var(--fs-75);
595    font-weight: var(--fw-semibold);
596    margin: auto;
597    display: inline-block;
598    position: relative;
599    text-decoration: underline;
600    color: var(--orange-500);
601    cursor: pointer;
602    font-weight 300;
603}
604
605.buttonInfo-orange::before {
606    content: url('https://darwin-assets.dynata.com/EROP/RB/red-arrow.svg');
607    position: absolute;
608    top: -1px;
609    left: 0px;
610}
611
612.buttonInfo-small {
613    padding: 0px 0px 0px 35px;
614    width: auto;
615    height: 25px;
616    border-radius: 40px;
617    background: none;
618
619    background-position: -323.5px 0px;
620    background-size: 375px;
621    background-repeat: no-repeat;
622    transition-property: all;
623    transition-duration: 0.3s;
624    animation-timing-function: ease-in;
625    border: none;
626    font-size: var(--fs-75);
627    font-weight: var(--fw-semibold);
628    margin: auto;
629    display: inline-block;
630    position: relative;
631    text-decoration: underline;
632    color: var(--white);
633}
634
635
636
637.buttonInfo-small::before {
638    content: url('https://darwin-assets.dynata.com/EROP/RB/white-arrow-small.svg');
639    position: absolute;
640    top: -3px;
641    left: 0px;
642}
643
644
645/* Text Classes */
646
647.xl-h1 {
648    font-size: var(--fs-xl-h1);
649    line-height: var(--lh-xl-h1);
650    margin-bottom: 30px;
651
652}
653
654.h1 {
655    font-size: var(--fs-h1);
656    line-height: var(--lh-h1);
657    margin-bottom: 30px;
658}
659
660.h2 {
661    font-size: var(--fs-h2);
662    line-height: var(--lh-h2);
663}
664
665.h3 {
666    font-size: var(--fs-h3);
667    line-height: var(--lh-h3);
668    margin-bottom: 20px;
669
670}
671
672.h4 {
673    font-size: var(--fs-h4);
674    line-height: var(--lh-h4);
675    margin-bottom: 20px;
676
677}
678
679.h5 {
680    font-size: var(--fs-h5);
681    line-height: var(--lh-h5);
682
683}
684
685.h6 {
686    font-size: var(--fs-h6);
687    line-height: var(--lh-h6);
688
689}
690
691.pg {
692    font-size: var(--fs-p);
693    line-height: var(--lh-p);
694
695}
696
697.small {
698    font-size: var(--fs-s);
699    line-height: var(--lh-s);
700
701}
702
703.xsmall {
704    font-size: var(--fs-xs);
705    line-height: var(--lh-xs);
706
707}
708
709/* Border Classes */
710
711.auth-border {
712    border: 2px solid var(--teal-300);
713    border-radius: 11px;
714}
715
716.auth-dbl-border,
717.member-tier-progress .container {
718    border: 2px solid var(--teal-300);
719    border-radius: 11px;
720    box-shadow: 5px 5px 0px var(--teal-300);
721}
722
723.web-border {
724    border: 2px solid var(--teal-300);
725    border-radius: 50px;
726}
727
728.web-dbl-border {
729    border: 2px solid var(--teal-300);
730    border-radius: 50px;
731    box-shadow: 5px 5px 0px var(--teal-300);
732}
733
734.auth-border-drk {
735    border: 2px solid var(--teal-500);
736    border-radius: 11px;
737}
738
739.auth-dbl-border-drk {
740    border: 2px solid var(--teal-500);
741    border-radius: 11px;
742    box-shadow: 5px 5px 0px var(--teal-500);
743}
744
745.web-border-drk {
746    border: 2px solid var(--teal-500);
747    border-radius: 50px;
748}
749
750.web-dbl-border-drk {
751    border: 2px solid var(--teal-500);
752    border-radius: 50px;
753    box-shadow: 5px 5px 0px var(--teal-500);
754}
755
756@media (min-width: 51.875em) {
757
758    .auth-border {
759        border: 2px solid var(--teal-300);
760        border-radius: 25px;
761    }
762
763    .auth-dbl-border,
764    .member-tier-progress .container {
765        border: 2px solid var(--teal-300);
766        border-radius: 25px;
767        box-shadow: 5px 5px 0px var(--teal-300);
768    }
769
770    .web-border {
771        border: 2px solid var(--teal-300);
772        border-radius: 50px;
773    }
774
775    .web-dbl-border {
776        border: 2px solid var(--teal-300);
777        border-radius: 50px;
778        box-shadow: 5px 5px 0px var(--teal-300);
779    }
780
781    .auth-border-drk {
782        border: 2px solid var(--teal-500);
783        border-radius: 25px;
784    }
785
786    .auth-dbl-border-drk {
787        border: 2px solid var(--teal-500);
788        border-radius: 25px;
789        box-shadow: 5px 5px 0px var(--teal-500);
790    }
791
792    .web-border-drk {
793        border: 2px solid var(--teal-500);
794        border-radius: 50px;
795    }
796
797    .web-dbl-border-drk {
798        border: 2px solid var(--teal-500);
799        border-radius: 50px;
800        box-shadow: 5px 5px 0px var(--teal-500);
801    }
802
803}
804
805/* Text highlight */
806
807.highlight::after {
808    position: absolute;
809    content: "";
810    z-index: -1;
811    top: 20px;
812    left: 0;
813    bottom: 0;
814    right: 0;
815    scale: 1 1.2;
816    display: block;
817    background-color: #FDA432;
818}
819
820.highlight {
821    position: relative;
822}
823

824/***** GLOBAL STYLING *****/
825
826body {
827    font-family: var(--ff-primary);
828    font-size: var(--fs-body);
829    background-color: var(--white);
830    background-image: url(https://darwin-assets.dynata.com/EROP/RB/bg/background-auth-2x.png);
831    background-size: cover;
832    background-attachment: fixed;
833    background-position: center;
834}
835
836p {
837    margin-bottom: 30px;
838}
839
840.rb-main p a {
841    color: var(--orange-500);
842}
843
844.rb-hero {
845    background: var(--teal-500);
846    padding: 36px 0px 24px;
847}
848
849.rb-hero img {
850    max-width: 350px;
851}
852
853.rb-main {
854    width: 100%;
855}
856
857.rb-main section {
858    padding-top: 30px;
859}
860
861.rb-grid img {
862    width: 100%;
863    max-width: 550px;
864    display: block;
865    margin-inline: auto;
866}
867
868
869/* Legacy Overwrites */
870
871.loginForm a {
872    color: var(--orange-500);
873    
874}
875
876.rewardDisplay-sale {
877    position: absolute;
878    top: 0;
879    width: 100%;
880    background: var(--orange-300) !important;
881    line-height: 30px;
882    font-weight: 600;
883    left: 0;
884    color: var(--grey-500) !important;
885}
886
887.rewardDetails-modal-sale-slogan {
888    padding: 0.5em;
889    color: var(--grey-500);
890    background: var(--orange-300);
891}
892
893.rewardsView .contentAndLinks-links-link {
894    font-size: 0.825rem !important;
895}
896
897.rewards-selection-selected:hover {
898    background: var(--teal-500) !important;
899    color: #fff;
900}
901
902.rewards-selection-selected .rewards-selection-selected-check {
903    color: var(--teal-500) !important;
904}
905
906.rewards-selection-selected .rewards-selection-selected-check:hover {
907    color: #fff !important;
908}
909
910.rzslider .rz-pointer {
911    background-color: var(--teal-500) !important;
912}
913
914.rzslider .rz-bar.rz-selection {
915    background: var(--teal-500) !important;
916}
917
918.rewardDetails-modal-terms p a {
919    color: var(--orange-500) !important;
920    text-decoration: underline;
921}
922
923.modal-content {
924    background: #FFFFFFB0 0% 0% no-repeat padding-box;
925    border: 2px solid #FFFFFF;
926    border-radius: 25px;
927    opacity: 1;
928    backdrop-filter: blur(10px);
929    -webkit-backdrop-filter: blur(10px);
930}
931
932.rewardsView .mobileHeader__footerActions>div>* {
933    width: 80%;
934    margin-inline: auto;
935}
936
937.rewardsView .mobileHeader__footerActions {
938    right: 30px !important;
939}
940
941.widget-profiler-progress-container .radial-progress .radial-progress-background {
942    stroke: var(--teal-400) !important;
943}
944
945.radial-progress-percentage {
946    color: var(--teal-500) !important;
947}
948
949.header-accountInfo-account-name {
950    color: var(--teal-400) !important;
951}
952
953.form-type1 .field-valid {
954    color: var(--orange-300) !important;
955}
956
957.widget-profiler-profilers-list a.active {
958    background: var(--teal-500) !important;
959}
960
961.widget-profiler-profilers-list .icon .badge {
962    background-color: var(--teal-500) !important;
963}
964
965.widget-profiler-profilers-list a.active .icon .badge {
966    background-color: var(--white) !important;
967}
968
969.header-accountInfo-balance {
970    line-height: 53px !important;
971    max-width: none !important;
972    color: var(--teal-400);
973}
974
975.header-accountInfo-balance .header-accountInfo-balance-text {
976    font-weight: 700 !important;
977}
978
979
980.header-accountInfo.open .header-accountInfo-account-menu {
981    border-top: 5px solid var(--teal-500) !important;
982}
983
984.header .header-accountInfo-account-menu a:hover {
985    background: var(--teal-500) !important;
986    color: #fff;
987}
988
989.header .link.active:after {
990    content: " ";
991    background: var(--teal-500) !important;
992}
993
994.contentAndLinks-links-link-active {
995    background: var(--teal-500) !important;
996    color: #fff;
997}
998
999.header-accountInfo-account:hover {
1000    border-bottom: 5px solid var(--teal-500) !important;
1001}
1002
1003.header .header-accountInfo-account-menu a.active {
1004    background: #fff;
1005    color: var(--teal-500) !important;
1006}
1007
1008.header .header-accountInfo-account-menu a.active:hover {
1009    color: var(--white) !important;
1010}
1011
1012.header .header-accountInfo-account-menu a.active [image],
1013.header .header-accountInfo-account-menu a.active:hover [image] {
1014    fill: var(--teal-500) !important;
1015}
1016
1017.mobile-chat-container {
1018    background-color: var(--teal-500) !important;
1019}
1020
1021.badge-tier-details {
1022    display: none;
1023}
1024
1025.rewardDisplay-logo {
1026    height: 124px;
1027}
1028
1029.cg-busy-default-sign {
1030    background-color: var(--teal-500);
1031}
1032
1033.top20 .contentAndLinks-content {
1034    width: 100% !important;
1035}
1036
1037.top20 a,
1038.contentAndLinks-content a {
1039    color: var(--orange-500) !important;
1040    text-decoration: underline !important;
1041}
1042
1043.header-logo .hideOnMobile {
1044    max-height: 30.75px !important;
1045}
1046
1047@media only screen and (max-width: 830px) {
1048    .header img {
1049        max-height: 25px !important;
1050    }
1051}
1052
1053.promoFooter {
1054    display: none;
1055}
1056
1057
1058/* Login Page */
1059
1060input[type=checkbox], input[type=radio] {
1061
1062accent-color: #1BA4AD;
1063
1064}
1065
1066.loginForm {
1067    border: 2px solid var(--teal-300);
1068    border-radius: 25px;
1069    box-shadow: 5px 5px 0px var(--teal-300);
1070    text-align: left;
1071    width: min(600px, 90%);
1072    padding: 90px 53px 53px;
1073}
1074
1075.loginForm .button-full {
1076    width: auto;
1077    padding: 15px 50px;
1078}
1079
1080.loginForm .forgotPassword {
1081    display: inline;
1082}
1083
1084.loginForm .image-logo {
1085    display: block;
1086}
1087
1088.image-logo img {
1089    max-height: 50px;
1090    margin: auto;
1091    display: block;
1092}
1093
1094
1095
1096
1097/***** AUTH STYLING *****/
1098
1099.contentAndLinks-container {
1100    border: 2px solid #1BA4AD;
1101    border-radius: 11px;
1102    padding: 20px;
1103}
1104
1105.button-medium {
1106    background: var(--white) !important;
1107    border: 2px solid var(--teal-500) !important;
1108    box-shadow: 2px 4px 0px var(--teal-500) !important;
1109    color: var(--teal-500) !important;
1110}
1111
1112.button-medium:hover {
1113    background: var(--teal-500) !important;
1114    border: 2px solid var(--teal-500) !important;
1115    box-shadow: 2px 4px 0px #165A734D !important;
1116    color: var(--white) !important;
1117}
1118
1119/* Rewards specific styling */
1120
1121.rewardsView .rb-hero .h2 {
1122    margin-bottom: 20px;
1123}
1124
1125.rewardsView .rb-hero img {
1126    max-width: 238px;
1127}
1128
1129.rewardsView .rb-hero .rb-grid div:nth-child(2),
1130.veriffView .rb-hero .rb-grid div:nth-child(2) {
1131    display: none;
1132}
1133
1134/* Offerwall Cards */
1135
1136.qualification-item {
1137    max-width: 982px !important;
1138    margin: auto !important;
1139}
1140
1141.qualifications .list-group {}
1142
1143.qualifications .list-group-item {
1144    padding-bottom: 50px !important;
1145    padding: 0.5rem 0.5rem !important;
1146}
1147
1148
1149.qualifications .list-group-item {
1150    background-color: transparent !important;
1151    border: 0px !important;
1152}
1153
1154.card {
1155    border: 2px solid #165873 !important;
1156    border-radius: 11px !important;
1157    box-shadow: 5px 5px 0px #165873 !important;
1158    max-width: 230px !important;
1159    background-color: #f7f7f7 !important;
1160}
1161
1162.card-header {
1163    padding: 0 !important;
1164}
1165
1166.card-peak {
1167    background-color: #54c1d2 !important;
1168}
1169
1170.card-text {
1171    margin-bottom: 0 !important;
1172    text-align: center !important;
1173    margin: 0 auto !important;
1174    font-size: 25px !important;
1175    font-weight: 700 !important;
1176    background-position-y: 7px;
1177    background-position-x: 1px;
1178    background-image: url(https://darwin-assets.dynata.com/EROP/RB/cards/incentive-icon.svg);
1179    background-repeat: no-repeat;
1180    background-size: 37px;
1181    color: #00436F;
1182    padding-left: 27px;
1183}
1184
1185.card-text span {
1186    clear: both !important;
1187    font-weight: 700;
1188    padding-top: 2px;
1189    display: inline;
1190    font-size: 25px !important;
1191    line-height: 45px;
1192}
1193
1194.card-text img {

1195    vertical-align: baseline !important;
1196    height: 30px !important;
1197    display: none;
1198}
1199
1200.qualification-body {
1201    background-color: #F7F7F7 !important;
1202    font-family: 'open-sans';
1203    font-weight: 300;
1204    padding-left: 24px !important;
1205}
1206
1207.qualification-body .mb-2 {
1208    margin-bottom: 0.8rem !important;
1209}
1210
1211.card .btn-primary {
1212    border-radius: 25px !important;
1213    color: #000 !important;
1214    font-size: 14px !important;
1215    font-weight: 600 !important;
1216    padding-top: 10px !important;
1217    padding-bottom: 10px !important;
1218    background-color: #FFA427 !important;
1219    border-color: #FFA427 !important;
1220    text-transform: uppercase;
1221    width: 215px;
1222    margin-inline: auto;
1223    margin-bottom: 10px;
1224}
1225
1226.card-peak .high-reward-header-label svg,
1227.card-peak .recommended-header-label svg,
1228.card-peak .quick-header-label svg {
1229    position: absolute;
1230    top: 0;
1231    right: 0;
1232    width: 65px
1233}
1234
1235.card-peak .high-reward-header-label {
1236    text-align: center;
1237    font-size: 15px;
1238    background-color: #7f5ca2;
1239    width: 100%;
1240    height: 20px;
1241    color: #fff;
1242    line-height: 20px;
1243    text-transform: uppercase;
1244}
1245
1246.card-peak .high-reward {
1247    background-color: #7f5ca2 !important;
1248}
1249
1250.card-peak .recommended-header-label {
1251    text-align: center;
1252    font-size: 15px;
1253    background-color: #d14900;
1254    width: 100%;
1255    height: 20px;
1256    color: #fff;
1257    line-height: 20px;
1258    text-transform: uppercase;
1259}
1260
1261.card-peak .high-reward {
1262    background-color: #d14900 !important;
1263}
1264
1265.card-peak .quick-header-label {
1266    text-align: center;
1267    font-size: 15px;
1268    background-color: #165a73;
1269    width: 100%;
1270    height: 20px;
1271    color: #fff;
1272    line-height: 20px;
1273    text-transform: uppercase;
1274}
1275
1276.card-peak .high-reward {
1277    background-color: #165a73 !important;
1278}
1279
1280.card-header {
1281    border-bottom: none !important;
1282    height: 20px !important;
1283}
1284
1285.card {
1286    overflow: hidden;
1287}
1288
1289.row .col-md-2 {
1290    background-image: url(https://darwin-assets.dynata.com/EROP/RB/cards/i-duration.svg) !important;
1291    background-size: 25px;
1292    background-repeat: no-repeat;
1293}
1294
1295.mb-2 .col-md-2 {
1296    background-image: url(https://darwin-assets.dynata.com/EROP/RB/cards/i-topic.svg) !important;
1297    background-size: 25px;
1298    background-repeat: no-repeat;
1299}
1300
1301.qualification-body .row .col-md-2,
1302.qualification-body .mb-2 .col-md-2 {
1303    background-position: 0px !important;
1304}
1305
1306
1307.quick .card-body-loi .col-md-2 {
1308    background-image: url(https://darwin-assets.dynata.com/OO/quick-time-2x.png) !important;
1309    background-size: 20px;
1310    background-repeat: no-repeat;
1311    background-position: 10px;
1312}
1313
1314.card-body {
1315    background: #fff;
1316}
1317
1318/* Promotion Wallet */
1319
1320rxp-tabs::part(qualified-punchcard),
1321rxp-tabs::part(started-punchcard),
1322rxp-tabs::part(expired-punchcard),
1323rxp-tabs::part(credited-punchcard),
1324rxp-tabs::part(completed-punchcard) {
1325    width: auto !important;
1326    min-width: 334px !important;
1327    box-shadow: none;
1328    border-radius: 11px;
1329}
1330
1331rxp-tabs::part(dotted-line) {
1332    display: none;
1333}
1334
1335rxp-tabs::part(pc-points) {
1336
1337    background-color: var(--teal-400) !important;
1338    font-weight: 700 !important;
1339    text-transform: none;
1340}
1341
1342rxp-tabs::part(pc-points) {
1343
1344    background-color: var(--teal-400) !important;
1345    font-weight: 700 !important;
1346    text-transform: none;
1347}
1348
1349rxp-tabs::part(tab-nav-container) {
1350
1351    border-bottom: 0px !important;
1352}
1353
1354rxp-tabs::part(pc-header) {
1355    border-left: 2px solid var(--teal-200);
1356    border-right: 2px solid var(--teal-200);
1357}
1358
1359rxp-tabs::part(pc-list) {
1360
1361    margin: 0px;
1362}
1363
1364rxp-tabs::part(pc-tiles) {
1365
1366    width: calc(100% - 4px);
1367    border-bottom: 2px solid var(--teal-200);
1368    border-left: 2px solid var(--teal-200);
1369    border-right: 2px solid var(--teal-200);
1370    border-radius: 0px 0px 11px 11px;
1371}
1372
1373rxp-tabs::part(pc-title) {
1374    text-align: left;
1375    font-weight: 700;
1376    color: var(--teal-400);
1377}
1378
1379
1380
1381rxp-tabs::part(view-details) {
1382    text-align: left;
1383    /*font-family: 'open-sans';*/
1384}
1385
1386upp-punchcard-details-modal::part(modal-badge) {
1387    background-image: url(https://darwin-assets.dynata.com/EROP/RB/PC/pop-up-punchcard-badge.png);
1388}
1389
1390rxp-tabs::part(started-filled-punch),
1391rxp-tabs::part(qualified-filled-punch),
1392rxp-tabs::part(expired-filled-punch),
1393rxp-tabs::part(credited-filled-punch) {
1394    color: var(--white) !important;
1395    background-color: #565656 !important;
1396    border-radius: 25px;
1397    height: 55.34px;
1398    width: 28.33px;
1399    font-weight: 700;
1400    font-size: 15px;
1401}
1402
1403rxp-tabs::part(started-empty-punch),
1404rxp-tabs::part(qualified-empty-punch),
1405rxp-tabs::part(expired-empty-punch),
1406rxp-tabs::part(credited-empty-punch) {
1407    color: #565656 !important;
1408    background-color: #D9D9D9 !important;
1409    border-radius: 25px;
1410    height: 55.34px;
1411    width: 28.33px;
1412    font-weight: 700;
1413    font-size: 15px;
1414}
1415
1416/**rxp-tabs::part(started-empty-punch), rxp-tabs::part(qualified-empty-punch), rxp-tabs::part(expired-empty-punch), rxp-tabs::part(credited-empty-punch) {
1417      color: #ffffff!important;
1418      background-color: #dd7e0b!important;
1419      }**/
1420

1421/*upp-punchcard-details-modal::part(modal-activate) {
1422        background-color: #EADB30 !important;
1423        color: #070707 !important;
1424        font-weight: 700 !important;
1425        border: 0px;
1426    }*/
1427
1428rxp-tabs::part(started-filled-pc-punch),
1429rxp-tabs::part(qualified-filled-pc-punch),
1430rxp-tabs::part(expired-filled-pc-punch),
1431rxp-tabs::part(credited-filled-pc-punch) {
1432
1433    background-image: url(https://darwin-assets.dynata.com/EROP/RB/PC/pc-checkmark-2.svg) !important;
1434    margin: 0px 0px 4px;
1435    width: 22px;
1436    height: 22px;
1437
1438}
1439
1440rxp-tabs::part(started-empty-pc-punch),
1441rxp-tabs::part(qualified-empty-pc-punch),
1442rxp-tabs::part(expired-empty-pc-punch),
1443rxp-tabs::part(credited-empty-pc-punch) {
1444
1445    background-color: #565656 !important;
1446    margin: 0px 0px 4px;
1447    box-shadow: none;
1448    width: 22px;
1449    height: 22px;
1450
1451}
1452
1453/**rxp-tabs::part(started-empty-pc-punch), rxp-tabs::part(qualified-empty-pc-punch), rxp-tabs::part(expired-empty-pc-punch), rxp-tabs::part(credited-empty-pc-punch) {
1454    
1455      background: #ffffff!important;
1456      
1457      } **/
1458
1459
1460rxp-tabs::part(tab-active) {
1461    color: var(--grey-500) !important;
1462    border-bottom: 5px solid var(--teal-200) !important;
1463    font-size: 18px;
1464    font-weight: 700;
1465}
1466
1467rxp-tabs::part(tab) {
1468    font-size: 18px;
1469    color: var(--grey-500);
1470    font-weight: 700;
1471}
1472
1473rxp-tabs::part(punchcard-no-promotions-message) {
1474    padding: 50px;
1475    text-align: center;
1476    font-size: 17px;
1477    background: #c3f3fb;
1478    border-radius: 5px;
1479    white-space: pre-wrap;
1480}
1481
1482
1483/* Dashboard Styling */
1484
1485.hero-d {
1486    /*min-height: 320px;*/
1487    min-height: 100px;
1488    padding: 0px;
1489    background: none;
1490    height: auto;
1491    text-align: center;
1492}
1493
1494
1495hr {
1496    border-style: solid;
1497    border-width: 0.5px;
1498    border-color: #e6e7e6;
1499    margin-bottom: 20px;
1500}
1501
1502.dashboardView .hero .hero-desc {
1503    margin-top: 10px;
1504}
1505
1506.hero .hero-desc {
1507    display: none;
1508    z-index: 1;
1509    width: 100%;
1510}
1511
1512.dash-top {
1513    padding-bottom: 10px;
1514    text-transform: uppercase;
1515    font-size: 16px;
1516}
1517
1518.dash-container {
1519    background-color: #165a73;
1520    width: 100%;
1521    min-height: 170px;
1522}
1523
1524#new-dash {
1525    display: flex;
1526    width: 100%;
1527    max-width: 1160px;
1528    margin: auto;
1529    padding: 40px 16px 20px;
1530    margin-bottom: 30px;
1531}
1532
1533.dash-50 {
1534    width: 50%;
1535    padding-right: 20px;
1536}
1537
1538.dash-50 h1 {
1539    text-align: left;
1540
1541}
1542
1543.dash-sub {
1544    text-align: left;
1545    margin: 5px 0 20px 0;
1546
1547}
1548
1549.partner-sub {
1550    color: #fff;
1551    font-size: 12px;
1552    text-align: left;
1553}
1554
1555#new-dash .dash-25 {
1556    width: 25%;
1557    color: #FFF;
1558    border-left: 3px solid #54C1D2;
1559    max-height: 100px
1560}
1561
1562.dash-25 a {
1563    color: #fff;
1564    text-decoration: underline;
1565    font-size: 16px;
1566    text-align: center;
1567}
1568
1569.dash-bot {
1570    color: #fff;
1571    font-size: 30px;
1572}
1573
1574.dashboardView .hero {
1575    background-color: #f8f8f8;
1576}
1577
1578.partners {
1579    box-shadow: 0 2px 1px 0 rgb(0 0 0 / 10%);
1580    background: #fff;
1581    border: 1px solid #eaeaea;
1582    height: 130px;
1583    width: 100%;
1584    background: #fff;
1585    border-radius: 8px;
1586
1587}
1588
1589@media only screen and (max-width:830px) {
1590
1591    #new-dash {
1592        display: block;
1593    }
1594
1595    .dash-container {
1596        display: flex;
1597    }
1598
1599    .hero-d {
1600        /*min-height: 320px;*/
1601        min-height: 100px;
1602        padding: 0px;
1603        background: none;
1604        height: auto;
1605        text-align: center;
1606    }
1607
1608    .dash-50 h1 {
1609        text-align: center;
1610    }
1611
1612    .partner-sub,
1613    .dash-sub {
1614        text-align: center;
1615    }
1616
1617    .dash-50 {
1618        width: 100%;
1619        padding-right: 0;
1620    }
1621
1622    #new-dash .dash-25 {
1623        width: 50%;
1624        float: left;
1625        border: none;
1626        min-height: 75px;
1627        max-height: initial;
1628    }
1629
1630    #new-dash .dash-badge {
1631        display: none;
1632    }
1633}
1634
1635.header .header-surveyNotification,
1636.header-mobile-join {
1637    display: none !important;
1638}
1639
1640/* Offerwall mobile nav Styling */
1641
1642@media screen and (max-width: 51.875em) {
1643
1644    a.scroll-left {
1645        left: -6% !important;
1646        scale: 1.5;
1647    }
1648
1649    .fa-chevron-left:before {
1650        background: #000000c7;
1651        padding: 10px;
1652        border-radius: 0 10px 10px 0;
1653        color:
1654
1655            white;
1656    }
1657
1658    a.scroll-right {
1659        right: -6% !important;
1660        scale: 1.5;
1661    }
1662
1663    .fa-chevron-right:before {
1664        background: #000000c7;
1665        padding: 10px;
1666        border-radius: 10px 0 0 10px;
1667        color: white;
1668    }
1669
1670}
1671
1672
1673/***** FOOTER STYLING *****/
1674
1675footer {
1676    background-color: var(--grey-500) !important;
1677    color: #bbbbbb;
1678}
1679
1680footer small {
1681    color: var(--white);
1682    font-size: 100%;
1683
1684}
1685
1686footer a {
1687    text-decoration: none;
1688    color: #bbbbbb;
1689}
1690
1691footer li {
1692    list-style: none;
1693}
1694
1695footer a:link {
1696    color: #bbbbbb;
1697    text-decoration: none;
1698}
1699
1700.footer-logo {
1701    width: 140px;
1702    margin: 41.99px 0 12.9px 0;
1703    display: inline-block;
1704}
1705
1706footer .social-links {
1707    display: flex;
1708    margin-top: 1rem;
1709    padding: 0px
1710}
1711
1712footer .social-links li img {
1713    height: 25px;
1714    width: 25px;
1715    margin-right: 1rem;
1716}
1717
1718footer ul {
1719    margin: 0;
1720    padding: 0px;
1721}
1722
1723.footer-nav {
1724    border-top: 2px solid #bbbbbb;
1725    margin-top: 20px;
1726}
1727
1728.footer-nav li {
1729    margin-bottom: 20px;
1730}
1731
1732.footer-nav ul {
1733    padding-top: 20px;
1734}
1735
1736.footer-app-icons .fw-bold {
1737    color: var(--white);
1738    margin-bottom: 10px;
1739}
1740
1741/* Legacy Footer Overrides */
1742
1743.rewardsView {
1744    background-size: cover;
1745    background-attachment: fixed;
1746    background-repeat: no-repeat;
1747}
1748
1749.rewardsView .container {
1750    max-width: none;
1751    width: min(1160px, 90%);
1752}
1753
1754.rewardsView .container-widgets {
1755    margin-top: 40px;
1756    border: 2px solid #1BA4AD;
1757    border-radius: 11px !important;
1758    padding: 20px;
1759    background-color: var(--white);
1760}
1761
1762.rewardsView .rewards-title::after {
1763    content: normal;
1764    width: 250px;
1765    display: block;
1766    font-size: var(--fs-500);
1767    font-weight: 700;
1768    color: var(--grey-500);
1769    margin: 30px 0 14px;
1770    margin-inline: auto;
1771}
1772
1773.rewardsView .container-widgets .buttonSecondary {
1774    background: #FFA427 0% 0% no-repeat padding-box;
1775    border-radius: 25px;
1776    padding: 8px 32px !important;
1777    font-weight: 700;
1778    box-shadow: none;
1779}
1780
1781.rewardsView .container-widgets .button-whiteGreen {
1782    background: #FFA427 0% 0% no-repeat padding-box;
1783    color: var(--black);
1784}
1785
1786.rewardsView .container-widgets .buttonSecondary:hover {
1787    background: #FFA427 0% 0% no-repeat padding-box;
1788    border-radius: 25px;
1789    padding: 8px 32px !important;
1790    font-weight: 700;
1791    color: var(--black);
1792    box-shadow: none;
1793}
1794
1795.rewardDisplay-reward .magazine .rewardDisplay-logo {
1796    height: auto !important;
1797}
1798
1799footer .components_languageSelector .btn-default {
1800    display: none;
1801}
1802
1803footer .footer-links-col .footer-links-row:nth-child(1) {
1804    display: none
1805}
1806
1807footer .container {
1808    max-width: none;
1809    margin: 0;
1810    padding: 0;
1811    width: min(1160px, 90%);
1812    margin-inline: auto;
1813}
1814
1815.footer {
1816    padding: 0;
1817}
1818
1819.smallerText {
1820    display: none;
1821}
1822
1823/***** DESKTOP SPECIFIC STYLING ****/
1824
1825@media screen and (min-width: 51.875em) {
1826
1827    /* Desktop Global Styling */
1828
1829    .highlight::after {
1830        position: absolute;
1831        content: "";
1832        z-index: -1;
1833        top: 29px;
1834        left: 0;
1835        bottom: 0;
1836        right: 0;
1837        scale: 1 1.2;
1838        display: block;
1839        background-color: #FDA432;
1840    }
1841
1842    .rb-hero {
1843        padding: 54px 0px 24px;
1844    }
1845
1846    .rb-main section {
1847        padding-top: 90px;
1848    }
1849
1850    /* Desktop My Account Styling */
1851
1852    .contentAndLinks-container {
1853        border-radius: 25px;
1854    }
1855
1856    /* Desktop auth-hero Styling */
1857
1858    .rewardsView .rb-hero {
1859        min-height: 300px;
1860    }
1861
1862    .rewardsView .rb-hero .rb-grid {
1863        grid-template-columns: 2fr 1fr;
1864    }
1865
1866    .rewardsView .rb-hero .rb-grid div:nth-child(2) {
1867        display: block;
1868    }
1869
1870    /* Desktop Login Styling */
1871
1872    .loginForm {
1873        margin-bottom: 160px;
1874    }
1875
1876    /* Desktop Utility Class Styling */
1877
1878    .rb-grid {
1879        grid-auto-flow: column;
1880        grid-auto-columns: 1fr;
1881        gap: 3.75rem;
1882    }
1883
1884    /* Desktop Rewards Page Styling */
1885
1886    .rewardsView .container-widgets {
1887        margin-top: 0px;
1888        padding: 30px 50px;
1889        border-radius: 25px !important;
1890    }
1891
1892    .rewardsView .rewards-title::after {
1893        content: "Elige tu opción:";
1894        width: 250px;
1895        display: block;
1896        font-size: var(--fs-500);
1897        font-weight: 700;
1898        color: var(--grey-500);
1899        margin: 30px 0 14px;
1900        margin-inline: auto;
1901    }
1902
1903    /* Desktop Footer Styling */
1904
1905    footer .rb-container {
1906        padding-bottom: 60px;
1907    }
1908
1909    footer .rb-grid {
1910        grid-template-columns: 2fr 1fr 1fr;
1911        gap: 0.5rem;
1912    }
1913
1914    footer ul {
1915        margin: 0;
1916        padding: 0;
1917    }
1918
1919    .footer-nav {
1920        border-left: 3px solid #bbbbbb;
1921        border-top: none;
1922        margin: 0px
1923    }
1924
1925    .footer-nav ul {
1926        margin-top: 0px;
1927        padding-top: 0px;
1928    }
1929
1930    .footer-nav li {
1931        margin-bottom: 20px;
1932        margin-left: 20px;
1933    }
1934
1935    .footer-logo {
1936        width: 140px;
1937        margin: 37.87px 0 30.37px 0;
1938    }
1939
1940}
1941
1942/************profile test***********/
1943/**
1944    .profile-h4 {
1945        margin: 25px 0 5px 7px;
1946        color: #00827d;
1947    }
1948    
1949    .widget-profiler-profilers-list a.active {
1950     background: #FF8552!important;
1951    color: #323232!important;
1952    }
1953    
1954    .widget-profiler-profilers-list .Household, .widget-profiler-profilers-list .selenium-id-profiler-Business, .widget-profiler-profilers-list .selenium-id-profiler-Get {
1955    background-color: #00827d;
1956    border-bottom: 1px solid #fff;
1957    color:#ffffff!important;
1958    }
1959    
1960    
1961    .widget-profiler-profilers-list .Household:hover,  .widget-profiler-profilers-list .selenium-id-profiler-Business:hover, .widget-profiler-profilers-list .selenium-id-profiler-Get:hover {
1962    background-color: #FF8552 !important;
1963    border-bottom: 1px solid #fff;
1964    color: #323232!important;
1965    }
1966    
1967    .widget-profiler-profilers-list .Household .icon .badge,  .widget-profiler-profilers-list .selenium-id-profiler-Business .icon .badge, .widget-profiler-profilers-list .selenium-id-profiler-Get .icon .badge {
1968    background:#fff!important;
1969    color:#323232!important;
1970    }
1971    
1972    .widget-profiler-profilers-list .nextSteps{
1973    border-top: 5px solid #a6a1a1;
1974    padding-top: 20px;
1975    width: 96%;
1976    }
1977    
1978    .widget-profiler-profilers-list .Roles{
1979    background-color: transparent!important;
1980    color: #323232!important;
1981    }
1982    
1983    .widget-profiler-profilers-list .Roles:hover{
1984    background-color: #EFEFEF!important;
1985    color: #323232!important;
1986    }
1987    
1988    .widget-profiler-profilers-list .Roles .icon .badge {
1989    background:#00827d!important;
1990    color:#ffffff!important;
1991    }
1992    
1993    
1994    
1995    .widgetContainer-widget-100 {
1996        display: block!important;
1997    } **/
1998
1999/** profiler on surveys page */
2000
2001/** @media screen and (min-width: 830px) {
2002    
2003    .widgetContainer-widget.widgetContainer-widget-100.widget-profiler-hideOnMobile {
2004        display: block!important;
2005    }
2006    }
2007    **/
2008
2009.widget-profiler-progress-container .radial-progress .radial-progress-cover {
2010    stroke: var(--grey-100)
2011}
2012
2013/******* Prize Draw ***********/
2014
2015.pd-img {
2016    display: block;
2017    width: auto;
2018    max-width: 600px;
2019    margin: auto;
2020    margin-top: 40px
2021}
2022
2023@media only screen and (max-width: 629px) {
2024    .pd-img {
2025        width: 100% !important;
2026    }
2027}
2028
2029/******* CHATBOT BUBBLE FIX ********/
2030
2031#joe-bubble-unread {
2032    font-size: 15px !important;
2033    background-color: #d03601;
2034    margin-top: -30px;
2035    border: none !important;
2036}
2037
2038
2039#joe-bubble-unread {
2040    position: absolute !important;
2041    color: white;
2042    border-radius: 50%;
2043    right: -23px;
2044    top: 23px;
2045    height: 20px !important;

2046    width: 20px !important;
2047    line-height: 19px !important;
2048
2049}
2050
2051.mobile-chat-container {
2052    background-color: #1BA4AD!important;
2053}
2054
2055.chat-container .chat-header,
2056.chat-container .joe-faq-header {
2057  /*  background-image: linear-gradient(to right, rgba(58, 128, 124, 1), #3A807C);*/
2058background-image: linear-gradient(to top, #082733 , #165A73);
2059}
2060
2061.chat-container .chat-history .other-message {
2062  /*  background: rgb(23, 130, 125); */
2063background: #165A73;
2064}
2065
2066.header-bottom .right-brand-icon span,
2067.joe-agent-pic {
2068    background-image: url(https://darwin-assets.dynata.com/EROP/helpwidget-icons_EROP-helpwidget-icon.png) !important;
2069}
2070
2071
2072
2073/*** Veriff Styling ***/
2074
2075.veriff_container {
2076    text-align: center;
2077    font-family: proxima-soft, sans-serif !important;
2078    font-size: 16px !important;
2079    font-weight: 300;
2080}
2081
2082.veriff_container p {
2083    color: #000;
2084    font-family: proxima-soft, sans-serif !important;
2085    font-weight: 300;
2086    font-size: 16px;
2087}
2088
2089.veriff_container ol {
2090    padding-inline-start: 17px;
2091    font-weight: 500;
2092    text-align: left;
2093}
2094
2095.veriff_container li {
2096    margin-bottom: 12px;
2097    font-weight: 300;
2098    text-align: left !important;
2099}
2100
2101.veriff_header {
2102    font-size: 29px;
2103    text-align: center;
2104    color: #005753;
2105    text-shadow: none;
2106    font-weight: 600 !important;
2107}
2108
2109.v-primary {
2110    background: #FF8552;
2111    border: 2px solid #FF8552;
2112    color: #000;
2113    border-radius: 6px !important;
2114    text-decoration: none !important;
2115}
2116
2117.v-secondary {
2118    background: transparent;
2119    border: 2px solid #343434;
2120    color: #343434;
2121    border-radius: 6px !important;
2122    text-decoration: none !important;
2123}
2124
2125
2126
2127@media only screen and (min-width: 481px) {
2128    .vbutton_container {
2129        display: flex;
2130    }
2131
2132    .vbtn {
2133        flex: 1;
2134        margin: 20px;
2135    }
2136}
2137
2138@media only screen and (max-width: 480px) {
2139    .vbutton_container {}
2140
2141    .v-secondary {
2142        margin-top: 20px;
2143    }
2144}
2145
2146.vheader {
2147    height: 80px;
2148    top: 0;
2149    left: 0;
2150    right: 0;
2151    border-bottom: none;
2152    background: #fff;
2153    box-shadow: 0 0 13px rgb(0 0 0 / 50%);
2154    z-index: 1000;
2155    position: fixed;
2156    display: -webkit-box;
2157    display: -moz-box;
2158    display: box;
2159    display: -webkit-flex;
2160    display: -moz-flex;
2161    display: -ms-flexbox;
2162    display: flex;
2163}
2164
2165.vheader img {
2166    max-height: 60px;
2167    width: auto;
2168}
2169
2170@media only screen and (max-width: 830px) {
2171    .vheader img {
2172        max-height: 35px;
2173    }
2174}
2175
2176.header-bars {
2177    display: none;
2178    float: right;
2179    font-size: 27px;
2180    color: var(--teal-500) !important;
2181}
2182
2183/*** FORMS ***/
2184
2185.rb-form-container,
2186.registrationForm-content {
2187    padding: 0 70px;
2188    background: #00000060 0% 0% no-repeat padding-box;
2189    border: 2px solid #FFFFFF;
2190    border-radius: 8px;
2191    opacity: 1;
2192    backdrop-filter: blur(15px);
2193    -webkit-backdrop-filter: blur(15px);
2194}
2195
2196.registrationForm .registrationForm-content .pad-top,
2197.registrationForm .registrationForm-content #registrationForm-header {
2198    color: var(--white);
2199    padding-top: 30px;
2200}
2201
2202.registrationForm .registrationForm-content .twoColumns h2,
2203.registrationForm .registrationForm-content .twoColumns p,
2204.registrationForm .registrationForm-content .twoColumns .step-text,
2205.registrationForm .registrationForm-content .twoColumns .form-type1-row .form-type1-title,
2206.registrationForm .registrationForm-content .twoColumns .form-type1-row .form-help-text,
2207.registrationForm .registrationForm-content .twoColumns .form-type1-title {
2208    color: var(--white);
2209}
2210
2211.registrationForm .registrationForm-content .twoColumns .form-type1-title .field-errors {
2212    color: #F74544 !important;
2213}
2214
2215.registrationForm .registrationForm-content .twoColumns p a,
2216.registrationForm .registrationForm-content .twoColumns a {
2217    color: var(--orange-500);
2218}
2219
2220.registrationForm .registrationForm-content .form-type1-row .buttonSecondary {
2221    background: var(--white) !important;
2222    border: 2px solid var(--orange-300) !important;
2223    box-shadow: 2px 4px 0px var(--orange-300) !important;
2224    color: var(--grey-500) !important;
2225    border-radius: 30px !important;
2226}
2227
2228.registrationForm .registrationForm-content .form-type1-row .buttonSecondary span {
2229    color: var(--grey-500) !important;
2230}
2231
2232.registrationForm .registrationForm-content .form-type1-row .buttonSecondary:hover {
2233    background: var(--orange-300) !important;
2234    border: 2px solid var(--orange-300) !important;
2235    box-shadow: 2px 4px 0px #FFA4274D !important;
2236    color: var(--white) !important;
2237}
2238
2239.registrationForm .registrationForm-content .twoColumns .form-type1-actions {
2240    text-align: center;
2241}
2242
2243.reg-steps .steps>li.active .step-label>b {
2244    background-color: var(--teal-300) !important;
2245}
2246
2247.registrationForm .registrationForm-content .twoColumns .form-description {
2248    color: var(--white) !important;
2249}
2250
2251/*** Veriff Reactivation CSS ***/
2252
2253.rxp-reactivation .modal .title {
2254color: #323232!important;
2255font-size: 1.9em;
2256margin: 20px 0;
2257}
2258
2259.rxp-reactivation .modal  {
2260font-family: 'Noto Sans', sans-serif!important;
2261}
2262
2263.rxp-reactivation .modal p {
2264font-family: 'Noto Sans', sans-serif!important;
2265}
2266
2267.rxp-reactivation .modal .buttonCancel {
2268background:#fff ;
2269border: 2px solid #165a73;
2270color: #165a73;
2271border-radius: 30px !important;
2272text-decoration: none !important;
2273    box-shadow: 2px 4px 0px #165a73;
2274}
2275
2276.rxp-reactivation .modal a {
2277    color: #d14900!important;
2278text-decoration: underline !important;
2279}
2280
2281@media (min-width: 768px) {
2282.rxp-reactivation .modal .modal-dialog {
2283width: 600px!important
2284}
2285}
2286
2287.reactivation-content {
2288    /* padding-top: 130px; */
2289    text-align: center;
2290    max-width: 640px;
2291    margin: 0 auto;
2292}
2293
2294.reactivation-content .container {
2295    /*background-color: #fff;
2296    border-radius: 10px;
2297    padding: 30px 50px;
2298    margin: 130px 20px 100px;
2299    box-shadow: 0 5px 17px 0 rgb(0 0 0 / 30%);*/
2300}
2301
2302/** upp form error message. **/
2303
2304.upp-msg {
2305        color: #FFA427!important;
2306    }
2307
2308.upp-error .upp-msg {
2309        color: #FFA427!important;
2310    }
2311
2312
2313.formly-field-consent {
2314color: #fff;
2315}
2316
2317/** LOGIN FORM MOBILE **/
2318@media only screen and (max-width:600px) {
2319    .loginForm {
2320        padding: 20px 15px 15px!important;
2321    }
2322}
2323
2324/** Cognito Styling **/
2325    
2326    .rxp .auth-title h2 {
2327        margin-bottom: 20px;
2328        font-size: 32px;
2329    }
2330    
2331    .rxp .auth-button-back {
2332    }
2333    
2334    .rxp .auth-button-submit {
2335        float: left;
2336        background: var(--white)!important;
2337        border: 2px solid var(--teal-500)!important;
2338        box-shadow: 2px 4px 0px var(--teal-500)!important;
2339        color: var(--teal-500);
2340        border-radius: 30px !important;
2341        text-decoration: none !important;
2342    }
2343    
2344    .rxp .auth-button-submit:hover {
2345        background: var(--teal-500)!important;
2346        border: 2px solid var(--teal-500)!important;;
2347        color: var(--white)!important;
2348        box-shadow: 2px 4px 0px #165A734D!important;
2349    }
2350    
2351    .rxp .auth-button-forgot-password, .rxp .auth-button-back {
2352        float: right!important;
2353        background: none!important;
2354        border: none!important;
2355        text-decoration: underline!important;
2356        color: var(--orange-500)!important;
2357        font-weight: 700!important;
2358    }
2359    
2360    .rxp .btn:disabled,
2361    .rxp .btn.disabled,

2362    fieldset:disabled .rxp .btn {
2363            color: #aeaeae !important;
2364                background-color: #f4f4f4 !important;
2365                border-color: #aeaeae !important;
2366        opacity: 1;
2367    }
2368    
2369    .rxp .auth-buttons-bottom {
2370        padding: 10px 0;
2371    }
2372    
2373    .rxp .auth-input {
2374        margin-bottom: 20px;
2375    }
2376    
2377    .modal .auth-title .login-logo-container .img-logo {
2378        display: none;
2379    }
2380    
2381    .cognito-change-password h3 {
2382        font-size: 23px;
2383            font-weight: 600;
2384            text-align: left;
2385            margin: 0 0 30px;
2386    }
2387    
2388    .cognito-change-password p {
2389        line-height: 1.5em;
2390        text-align: left;
2391    }
2392    
2393    .cognito-change-password .auth-button-submit {
2394        font-weight: 700!important;
2395    }
2396    
2397    .error-text {
2398        margin-top: -10px;
2399        display: block;
2400        padding-top: 0;
2401        padding-bottom: calc(0.375rem + 1px);
2402        margin-bottom: 0;
2403        font-size: inherit;
2404        line-height: 1.5;
2405    }
2406    
2407@media (max-width: 440px) {
2408    .error-text {
2409        padding-top: 0;
2410        padding-bottom: calc(0.375rem + 1px);
2411        margin-bottom: 0;
2412        font-size: inherit;
2413        line-height: 1.5;
2414    }
2415    
2416    .cognito-change-password .error-text {
2417        float: right;
2418        display: inline;
2419        padding-top: calc(0.375rem + 1px);
2420        padding-bottom: calc(0.375rem + 1px);
2421        margin-bottom: 0;
2422        font-size: inherit;
2423        line-height: 1.5;
2424    }
2425}
2426    
2427    .rxp .cognito-modal .modal-content {
2428        margin: 0px;
2429        padding: 20px;
2430    }
2431
2432.upp-birth-date, .upp-postal, .upp-gender, .upp-first-name, .upp-last-name, .upp-email, .upp-password, .upp-address1, .upp-address2 {
2433color: #000!important;
2434}
2435
2436.upp-postal span, .upp-password span {
2437    color: #fff!important;
2438}
2439
2440/********* TILES MOBILE RESIZING ***************/
2441@media only screen and (max-width:600px) {
2442    .scroll-left, .scroll-right {
2443        display: none!important;
2444        visibility: hidden!important;
2445    }
2446
2447    .ow .qualifications .qualification-item {
2448        margin-left: 20px;
2449        margin-right: 20px;
2450        display: flex;
2451    }
2452
2453    .ow .qualifications .list-group-horizontal {
2454        flex-direction: column;
2455        justify-content: center;
2456        align-content: center;
2457        flex-wrap: wrap;
2458        flex: 1;
2459    }
2460
2461    .ow .qualifications .list-group-horizontal>.list-group-item{
2462        width: 100%;
2463    }
2464
2465    .ow .qualifications .list-group-horizontal .list-group-item .card {
2466        max-width: 700px!important;
2467        width: 100%;
2468    }
2469
2470    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body{
2471        padding: 5px!important;
2472    }
2473
2474    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2475        background-position: 30% 50%;
2476    }
2477
2478    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2479        display: flex;
2480        flex-direction: row;
2481        flex-wrap: wrap;
2482        justify-content: center;
2483        align-items: center;
2484        background-color: #F1F1F1!important;
2485        min-height: 41px;
2486        position: relative;
2487    }
2488
2489    .ow .qualifications .list-group-horizontal .list-group-item .card .row {
2490        /*flex: 1 1;*/
2491        flex-direction: row;
2492        justify-content: center;
2493        margin: 3px!important;
2494    }
2495
2496    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-topic{
2497        flex: 2 1;
2498    }
2499
2500    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-loi{
2501        flex: 1 1;
2502        padding: 0 10px;
2503    }
2504
2505    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2506        padding-left: 30px!important;
2507        background-color: #fff;
2508        /*border-radius: 50px;*/
2509        border-radius: 15px;
2510        /*padding-top: 3px;*/
2511        mask: radial-gradient(20px at 0px 15px,#0000 98%,#000)!important;
2512        margin-left: -20px!important;
2513        display: flex;
2514        align-items: center;
2515    }    
2516
2517    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-2 {
2518        float: right;
2519        background-color: #fff;
2520        border-radius: 50px;
2521        outline:5px solid #F1F1F1;
2522        width: 30px!important;
2523        height: 30px;
2524        padding-left: 10px;
2525        background-position: center!important;
2526        z-index: 99;
2527    }
2528
2529    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2530        height: 30px!important;
2531        width: fit-content!important;
2532    }
2533
2534    .ow .qualifications .list-group-horizontal .list-group-item .card .btn-primary {
2535        padding-top: 5px!important;
2536        padding-bottom: 5px!important;
2537    }
2538}
2539
2540@media only screen and (max-width:435px) {
2541    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2542        background-position: 16% 50%;
2543    }
2544
2545    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2546        /*border-radius: 5px;*/
2547        min-height: 30px;
2548        mask: none;
2549        margin-left: 0px;
2550        padding-left: 30px!important;
2551        width: fit-content!important;
2552    }
2553
2554    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2555        min-height: 48px;
2556    }
2557
2558    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body > * {
2559        animation: 8s autoplay6 infinite linear;
2560        position: absolute; 
2561        opacity: 0.0;
2562        width: 100%;
2563    }
2564

2565    @keyframes autoplay6 {
2566        0% {opacity: 0.0}
2567        4% {opacity: 1.0}
2568        50% {opacity: 1.0}
2569        56% {opacity: 0.0}
2570        100% {opacity: 0.0}
2571    }
2572
2573    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body > *:nth-child(1) {animation-delay: 0s}
2574    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body > *:nth-child(2) {animation-delay: 4s}
2575}
2576
2577@media only screen and (max-width:369px) {
2578    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2579        background-position: 10% 50%;
2580    }
2581
2582    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2583        min-height: 48px;
2584        height: auto!important;
2585        overflow: hidden;
2586    }
2587
2588    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .col-md-10 {
2589        /*max-width: 100%!important;*/
2590        max-width: 210px!important;
2591        overflow: hidden;
2592        white-space: nowrap;
2593        text-overflow: ellipsis;
2594        display: inline;
2595        padding-top: 4px;
2596    }
2597
2598    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2599        height: 20px!important;
2600    }
2601}
2602
2603/**** Hide term Points across site ****/
2604
2605.card-body.qualification-body div.row:first-of-type {
2606    /*display: none;*/
2607}
2608
2609/********* TILES MOBILE RESIZING ***************/
2610@media only screen and (max-width:600px) {
2611    .scroll-left, .scroll-right {
2612        display: none!important;
2613        visibility: hidden!important;
2614    }
2615
2616    .ow .qualifications .qualification-item {
2617        margin-left: 20px;
2618        margin-right: 20px;
2619        display: flex;
2620    }
2621
2622    .ow .qualifications .list-group-horizontal {
2623        flex-direction: column;
2624        justify-content: center;
2625        align-content: center;
2626        flex-wrap: wrap;
2627        flex: 1;
2628    }
2629
2630    .ow .qualifications .list-group-horizontal>.list-group-item{
2631        width: 100%;
2632    }
2633
2634    .ow .qualifications .list-group-horizontal .list-group-item .card {
2635        max-width: 700px!important;
2636        width: 100%;
2637    }
2638
2639    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body{
2640        padding: 5px!important;
2641    }
2642
2643    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2644        background-position: 30% 50%;
2645    }
2646
2647    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2648        display: flex;
2649        flex-direction: row;
2650        flex-wrap: wrap;
2651        justify-content: center;
2652        align-items: center;
2653        background-color: #F1F1F1!important;
2654        min-height: 41px;
2655        position: relative;
2656    }
2657
2658    .ow .qualifications .list-group-horizontal .list-group-item .card .row {
2659        /*flex: 1 1;*/
2660        flex-direction: row;
2661        justify-content: center;
2662        /*margin: 3px!important;*/
2663    }
2664
2665    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-topic{
2666        flex: 2 1;
2667    }
2668
2669    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body-loi{
2670        flex: 1 1;
2671        padding: 0 10px;
2672    }
2673
2674    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2675        padding-left: 30px!important;
2676        background-color: #fff;
2677        /*border-radius: 50px;*/
2678        border-radius: 15px;
2679        /*padding-top: 3px;*/
2680        mask: radial-gradient(20px at 0px 15px,#0000 98%,#000)!important;
2681        margin-left: -20px!important;
2682        display: flex;
2683        align-items: center;
2684    }    
2685
2686    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-2 {
2687        float: right;
2688        background-color: #fff;
2689        border-radius: 50px;
2690        outline:5px solid #F1F1F1;
2691        width: 30px!important;
2692        height: 30px!important;
2693        padding-left: 10px!important;
2694        background-position: center!important;
2695        z-index: 99;
2696    }
2697
2698    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10, .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-topic .col-md-10 {
2699        padding-right: 10px!important;
2700        font-size: 13px;
2701    }
2702
2703    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2704        height: 30px!important;
2705        width: fit-content!important;
2706    }
2707
2708    .ow .qualifications .list-group-horizontal .list-group-item .card .btn-primary {
2709        padding-top: 5px!important;
2710        padding-bottom: 5px!important;
2711    }
2712}
2713
2714@media only screen and (min-width:436px) and (max-width:476px) {
2715    .ow .qualifications .list-group-horizontal .list-group-item .card .card-body .card-body-loi .col-md-10 {
2716        white-space: nowrap;
2717        overflow: hidden;
2718        text-overflow: ellipsis;
2719        max-width: 75px;
2720    }
2721}
2722
2723@media only screen and (max-width:435px) {
2724    .ow .qualifications .list-group-horizontal .list-group-item .card .card-text {
2725        background-position: 16% 50%;
2726    }
2727
2728    .ow .qualifications .list-group-horizontal .list-group-item .card .row .col-md-10 {
2729        /*border-radius: 5px;*/
2730        min-height: 30px;
2731        mask: none;
2732        margin-left: 0px;
2733        padding-left: 30px!important;
2734        width: fit-content!important;
2735    }
2736
2737    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body {
2738        min-height: 48px;
2739    }
2740
2741    .ow .qualifications .list-group-horizontal .list-group-item .card .qualification-body > * {
2742        animation: 8s autoplay6 infinite linear;
2743        position: absolute; 
2744        opacity: 0.0;
2745        width: 100%;
2746    }
2747