/* Minification failed. Returning unminified contents. (45,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (51,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (55,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (60,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-1' (61,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (66,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (70,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (71,38): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (72,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (76,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (85,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (86,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (92,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-1' (93,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (98,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (102,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (103,38): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (104,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (108,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (117,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (118,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (123,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua' (124,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (129,29): run-time error CSS1039: Token not allowed after unary operator: '-aqua-2' (130,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (134,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (135,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (136,38): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (137,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (141,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (142,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (151,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (152,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (155,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (156,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (159,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (160,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (167,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (168,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (169,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (173,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (174,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (175,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (179,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (180,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (181,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (186,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (187,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (188,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (192,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (193,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (194,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (199,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (200,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (201,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (210,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (211,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (212,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (221,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (227,35): run-time error CSS1039: Token not allowed after unary operator: '-primary' (230,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (238,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (247,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (255,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-90' (260,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (262,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (266,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (267,24): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (268,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (273,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (275,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (286,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (291,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (292,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (294,28): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (298,28): run-time error CSS1039: Token not allowed after unary operator: '-decline-state-1' (299,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (303,28): run-time error CSS1039: Token not allowed after unary operator: '-error' (304,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (305,38): run-time error CSS1039: Token not allowed after unary operator: '-error' (306,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (310,28): run-time error CSS1039: Token not allowed after unary operator: '-decline-state-1' (311,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (320,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (321,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (338,16): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (342,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (346,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (347,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (348,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (352,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (353,38): run-time error CSS1039: Token not allowed after unary operator: '-primary' (354,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (363,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (364,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (365,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (370,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (374,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (378,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (382,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-4' (383,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (736,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (737,28): run-time error CSS1039: Token not allowed after unary operator: '-light' (750,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (751,35): run-time error CSS1039: Token not allowed after unary operator: '-light' (756,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (766,35): run-time error CSS1039: Token not allowed after unary operator: '-light' (770,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (773,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (794,29): run-time error CSS1039: Token not allowed after unary operator: '-dark' (798,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (821,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (822,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (827,29): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (828,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (832,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (833,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (834,38): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (835,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (839,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (840,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (849,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (850,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (856,28): run-time error CSS1039: Token not allowed after unary operator: '-loans' (857,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (862,29): run-time error CSS1039: Token not allowed after unary operator: '-loans' (863,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (867,28): run-time error CSS1039: Token not allowed after unary operator: '-loans' (868,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (869,38): run-time error CSS1039: Token not allowed after unary operator: '-loans' (870,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (874,28): run-time error CSS1039: Token not allowed after unary operator: '-loans' (875,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (884,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (885,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (890,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (891,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (896,29): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (897,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (901,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (902,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (903,38): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (904,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (908,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (909,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (918,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (919,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (924,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (925,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (930,29): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (931,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (935,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (936,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (937,38): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (938,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (942,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (943,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (952,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (953,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (1416,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1430,30): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1454,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1462,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (1466,17): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (1470,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (1474,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1478,17): run-time error CSS1039: Token not allowed after unary operator: '-aqua' (1482,17): run-time error CSS1039: Token not allowed after unary operator: '-pink' (1486,17): run-time error CSS1039: Token not allowed after unary operator: '-light' (1490,17): run-time error CSS1039: Token not allowed after unary operator: '-dark' (1494,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (1498,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-1' (1502,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (1506,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-dark-3' (1510,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (1514,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (1518,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (1522,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (1526,17): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (1530,17): run-time error CSS1039: Token not allowed after unary operator: '-success-quiet' (1534,17): run-time error CSS1039: Token not allowed after unary operator: '-error' (1538,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (1542,17): run-time error CSS1039: Token not allowed after unary operator: '-error-quiet' (1546,17): run-time error CSS1039: Token not allowed after unary operator: '-decline-state-1' (1550,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1554,17): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (1558,17): run-time error CSS1039: Token not allowed after unary operator: '-warning-quiet' (1562,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1566,17): run-time error CSS1039: Token not allowed after unary operator: '-informative-loud' (1570,17): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (1574,17): run-time error CSS1039: Token not allowed after unary operator: '-aqua-2' (1578,17): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (1582,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-1' (1586,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (1590,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (1594,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (1598,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (1602,17): run-time error CSS1039: Token not allowed after unary operator: '-loans' (1606,17): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (1610,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (1614,17): run-time error CSS1039: Token not allowed after unary operator: '-loans-copy' (1618,17): run-time error CSS1039: Token not allowed after unary operator: '-insurance-copy' (1622,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (1626,17): run-time error CSS1039: Token not allowed after unary operator: '-loans-quiet' (1630,17): run-time error CSS1039: Token not allowed after unary operator: '-insurance-quiet' (1634,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-quiet' (1639,17): run-time error CSS1039: Token not allowed after unary operator: '-accent-2' (1643,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (1647,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-90' (1651,17): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (1655,17): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-80' (1659,17): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-60' (1663,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (1667,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-outline-light' (1671,17): run-time error CSS1039: Token not allowed after unary operator: '-brand-outline-light-2' (1675,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-loud' (1680,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (1684,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (1688,28): run-time error CSS1039: Token not allowed after unary operator: '-black' (1692,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1696,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua' (1700,28): run-time error CSS1039: Token not allowed after unary operator: '-pink' (1704,28): run-time error CSS1039: Token not allowed after unary operator: '-light' (1708,28): run-time error CSS1039: Token not allowed after unary operator: '-dark' (1712,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (1717,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-1' (1721,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (1725,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-dark-3' (1729,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (1733,28): run-time error CSS1039: Token not allowed after unary operator: '-hint' (1737,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (1741,28): run-time error CSS1039: Token not allowed after unary operator: '-success' (1745,28): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (1749,28): run-time error CSS1039: Token not allowed after unary operator: '-success-quiet' (1753,28): run-time error CSS1039: Token not allowed after unary operator: '-error' (1757,28): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (1761,28): run-time error CSS1039: Token not allowed after unary operator: '-error-quiet' (1765,28): run-time error CSS1039: Token not allowed after unary operator: '-decline-state-1' (1769,28): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1773,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (1777,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-quiet' (1781,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1785,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-loud' (1789,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (1793,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-2' (1797,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (1801,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-1' (1805,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (1809,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (1813,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (1817,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (1821,22): run-time error CSS1039: Token not allowed after unary operator: '-loans' (1825,22): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (1829,22): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (1833,22): run-time error CSS1039: Token not allowed after unary operator: '-loans-copy' (1837,22): run-time error CSS1039: Token not allowed after unary operator: '-insurance-copy' (1841,22): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (1845,22): run-time error CSS1039: Token not allowed after unary operator: '-loans-quiet' (1849,22): run-time error CSS1039: Token not allowed after unary operator: '-insurance-quiet' (1853,22): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-quiet' (1857,22): run-time error CSS1039: Token not allowed after unary operator: '-accent-2' (1861,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (1865,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-90' (1869,22): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (1873,22): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-80' (1877,22): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-60' (1881,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (1885,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-outline-light' (1889,22): run-time error CSS1039: Token not allowed after unary operator: '-brand-outline-light-2' (1893,22): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-loud' (1899,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (1903,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (1907,28): run-time error CSS1039: Token not allowed after unary operator: '-black' (1911,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (1915,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua' (1919,28): run-time error CSS1039: Token not allowed after unary operator: '-pink' (1923,28): run-time error CSS1039: Token not allowed after unary operator: '-light' (1927,28): run-time error CSS1039: Token not allowed after unary operator: '-dark' (1931,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (1936,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-1' (1940,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (1944,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-dark-3' (1948,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-disabled' (1952,28): run-time error CSS1039: Token not allowed after unary operator: '-hint' (1956,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (1960,28): run-time error CSS1039: Token not allowed after unary operator: '-success' (1964,28): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (1968,28): run-time error CSS1039: Token not allowed after unary operator: '-success-quiet' (1972,28): run-time error CSS1039: Token not allowed after unary operator: '-error' (1976,28): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (1980,28): run-time error CSS1039: Token not allowed after unary operator: '-decline-state-1' (1984,28): run-time error CSS1039: Token not allowed after unary operator: '-error-quiet' (1988,28): run-time error CSS1039: Token not allowed after unary operator: '-warning' (1992,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (1996,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-quiet' (2000,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (2004,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-loud' (2008,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (2012,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-2' (2016,28): run-time error CSS1039: Token not allowed after unary operator: '-aqua-3' (2020,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-1' (2024,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (2028,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (2032,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (2036,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (2040,28): run-time error CSS1039: Token not allowed after unary operator: '-loans' (2044,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (2048,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (2052,28): run-time error CSS1039: Token not allowed after unary operator: '-loans-copy' (2056,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance-copy' (2060,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (2064,28): run-time error CSS1039: Token not allowed after unary operator: '-loans-quiet' (2068,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance-quiet' (2072,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-quiet' (2076,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-2' (2080,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (2084,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-90' (2088,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green' (2092,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-80' (2096,28): run-time error CSS1039: Token not allowed after unary operator: '-pjn-green-60' (2100,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (2104,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-outline-light' (2108,28): run-time error CSS1039: Token not allowed after unary operator: '-brand-outline-light-2' (2112,28): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-loud' (3303,25): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (3319,14): run-time error CSS1039: Token not allowed after unary operator: '-black' (3325,15): run-time error CSS1039: Token not allowed after unary operator: '-black' (3541,14): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3547,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (3553,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-70' (3559,14): run-time error CSS1039: Token not allowed after unary operator: '-primary-90' (3618,25): run-time error CSS1039: Token not allowed after unary operator: '-black' (3619,14): run-time error CSS1039: Token not allowed after unary operator: '-black' (3643,19): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3703,15): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3739,14): run-time error CSS1039: Token not allowed after unary operator: '-primary' (3831,25): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (4075,25): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (4087,15): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4425,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4442,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (4445,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (4447,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (4461,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4480,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (4501,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4503,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (4507,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4518,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4522,16): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4526,24): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4527,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (4640,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (4641,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (4759,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (4760,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (4798,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4827,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (4840,16): run-time error CSS1039: Token not allowed after unary operator: '-black' (4844,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (4850,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (4886,17): run-time error CSS1039: Token not allowed after unary operator: '-hint' (4892,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (4902,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (4912,28): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4916,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4920,28): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4924,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4928,28): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (4932,17): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (4936,28): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (4940,17): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (4944,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (4949,17): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (4953,16): run-time error CSS1030: Expected identifier, found '*' (4953,18): run-time error CSS1031: Expected selector, found ')' (4953,18): run-time error CSS1025: Expected comma or open brace, found ')' (4983,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4987,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (4993,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (4999,35): run-time error CSS1039: Token not allowed after unary operator: '-light' (5026,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5042,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (5051,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (5060,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (5061,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5071,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (5075,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5105,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5106,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5112,28): run-time error CSS1039: Token not allowed after unary operator: '-neutral-0' (5113,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5114,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5118,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (5119,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5120,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5125,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (5126,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5127,17): run-time error CSS1039: Token not allowed after unary operator: '-surface-primary' (5131,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5132,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5133,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5137,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-2' (5141,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (5142,38): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (5143,28): run-time error CSS1039: Token not allowed after unary operator: '-white' (5147,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-dark-state-3' (5160,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-light-state-4' (5168,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (5172,28): run-time error CSS1039: Token not allowed after unary operator: '-success' (5173,22): run-time error CSS1039: Token not allowed after unary operator: '-success-quiet' (5178,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5182,28): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5183,22): run-time error CSS1039: Token not allowed after unary operator: '-warning-quiet' (5187,17): run-time error CSS1039: Token not allowed after unary operator: '-error' (5191,28): run-time error CSS1039: Token not allowed after unary operator: '-error' (5192,22): run-time error CSS1039: Token not allowed after unary operator: '-error-quiet' (5219,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (5234,28): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (5256,17): run-time error CSS1039: Token not allowed after unary operator: '-disabled' (5260,28): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (5270,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (5275,28): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (5452,22): run-time error CSS1039: Token not allowed after unary operator: '-success-loud' (5453,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5460,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5484,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5489,22): run-time error CSS1039: Token not allowed after unary operator: '-success-quiet' (5490,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (5501,17): run-time error CSS1039: Token not allowed after unary operator: '-success' (5509,16): run-time error CSS1039: Token not allowed after unary operator: '-success' (5513,22): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5514,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5521,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5527,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5532,22): run-time error CSS1039: Token not allowed after unary operator: '-surface-light-3' (5533,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5544,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5551,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5561,22): run-time error CSS1039: Token not allowed after unary operator: '-error-loud' (5562,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5573,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5591,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5595,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5599,22): run-time error CSS1039: Token not allowed after unary operator: '-error-quiet' (5600,17): run-time error CSS1039: Token not allowed after unary operator: '-error' (5611,17): run-time error CSS1039: Token not allowed after unary operator: '-error' (5617,16): run-time error CSS1039: Token not allowed after unary operator: '-error' (5622,22): run-time error CSS1039: Token not allowed after unary operator: '-warning-loud' (5623,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5635,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5651,16): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5656,22): run-time error CSS1039: Token not allowed after unary operator: '-warning-quiet' (5657,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5668,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5674,16): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5685,17): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5686,28): run-time error CSS1039: Token not allowed after unary operator: '-warning' (5705,22): run-time error CSS1039: Token not allowed after unary operator: '-informative-loud' (5706,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5713,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5719,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5723,22): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (5724,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (5731,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (5737,28): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (5741,16): run-time error CSS1039: Token not allowed after unary operator: '-informative-quiet' (5745,16): run-time error CSS1039: Token not allowed after unary operator: '-primary-10' (5749,28): run-time error CSS1039: Token not allowed after unary operator: '-insurance-quiet' (5750,17): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (5757,17): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (5763,16): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (5769,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5770,28): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5774,17): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5781,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5785,16): run-time error CSS1039: Token not allowed after unary operator: '-primary' (5790,16): run-time error CSS1039: Token not allowed after unary operator: '-white' (5824,22): run-time error CSS1039: Token not allowed after unary operator: '-loans' (5828,22): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney' (5832,22): run-time error CSS1039: Token not allowed after unary operator: '-insurance' (5839,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5845,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5849,17): run-time error CSS1039: Token not allowed after unary operator: '-mobimoney-copy' (5854,22): run-time error CSS1039: Token not allowed after unary operator: '-white' (5855,17): run-time error CSS1039: Token not allowed after unary operator: '-black' (5856,28): run-time error CSS1039: Token not allowed after unary operator: '-surface-outline-light' (5870,22): run-time error CSS1039: Token not allowed after unary operator: '-black' (5871,17): run-time error CSS1039: Token not allowed after unary operator: '-white' (5877,17): run-time error CSS1039: Token not allowed after unary operator: '-white' */ .button { font-size: 16px; font-weight: 600; padding: 15px 16px; margin-bottom: 24px; text-transform: capitalize; text-decoration: none; } @media (max-width: 380px) { .button.long { font-size: 13px; padding: 15px 6px; } input.button { text-wrap: auto; white-space: normal; } } .button.small { font-size: 13px; padding: 8px 12px; } .button.icon { display: flex; border-radius: 50%; padding: 9px; } .button .button-icon { display: flex; justify-content: center; } .button .button-icon svg{ margin-right: 10px; } .button.primary .button-icon svg path, .button.secondary .button-icon svg path .button.decline .button-icon svg path { fill: var(--white); } .button.action .button-icon svg path, .button.hollow .button-icon svg path, .button.clear .button-icon svg path { fill: var(--surface-primary); } .button.white .button-icon svg path { fill: var(--black); } /*Primayr Button*/ .button.primary{ background-color: var(--primary-dark-state-1); color: var(--white); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.primary:hover { background-color: var(--primary-dark-state-2); } .button.primary:focus{ background-color: var(--primary-dark-state-3); box-shadow: 0px 0px 0px 1px var(--primary-dark-state-3); border: 1px solid var(--white); } .button.primary:active{ background-color: var(--primary-dark-state-3); } .button.primary.disabled, .button.primary[disabled], .button.primary.disabled:hover, .button.primary[disabled]:hover, .button.primary.disabled:focus, .button.primary[disabled]:focus{ background-color: var(--surface-disabled); color: var(--disabled); } /*Secondary Button*/ .button.secondary{ background-color: var(--primary-dark-state-1); color: var(--white); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.secondary:hover { background-color: var(--primary-dark-state-2); } .button.secondary:focus{ background-color: var(--primary-dark-state-3); box-shadow: 0px 0px 0px 1px var(--primary-dark-state-3); border: 1px solid var(--white); } .button.secondary:active{ background-color: var(--primary-dark-state-3); } .button.secondary.disabled, .button.secondary[disabled], .button.secondary.disabled:hover, .button.secondary[disabled]:hover, .button.secondary.disabled:focus, .button.secondary[disabled]:focus{ background-color: var(--surface-disabled); color: var(--disabled); } /*Action button*/ .button.action{ background-color: var(--aqua); color: var(--surface-primary); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.action:hover{ background-color: var( --aqua-2); color: var(--surface-primary); } .button.action:focus{ background-color: var(--aqua-3); color: var(--surface-primary); box-shadow: 0px 0px 0px 1px var(--aqua-3); border: 1px solid var(--white); } .button.action:active{ background-color: var(--aqua-3); color: var(--surface-primary); } .button.action.disabled, .button.action[disabled], .button.action.disabled:hover, .button.action[disabled]:hover, .button.action.disabled:focus, .button.action[disabled]:focus{ background-color: var(--surface-disabled); color: var(--disabled); } .button.white { background-color: var(--white); color: var(--black); } .button.white:hover { background-color: var(--neutral-0); color: var(--surface-primary); } /*Outline Button*/ .button.hollow.primary { background-color: var(--white); border: 1px solid var(--primary); color: var(--primary); box-shadow: unset; } .button.hollow.primary:hover, .button.hollow.primary:focus { background-color: var(--primary); border: 1px solid var(--primary); color: var(--white); } /**/ .button.hollow.secondary{ background-color: var(--white); border: 1px solid var(--surface-primary); color: var(--surface-primary); box-shadow: unset; } .button.hollow.secondary:hover { background-color: var(--neutral-0); border: 1px solid var(--surface-primary); color: var(--surface-primary); } .button.hollow.secondary:focus{ background-color: var(--surface-light-3); border: 1px solid var(--surface-primary); color: var(--surface-primary); box-shadow: unset; } .button.hollow:active{ background-color: var(--informative-quiet); border: 1px solid var(--surface-primary); color: var(--surface-primary); } .button.hollow.secondary.disabled, .button.hollow.secondary[disabled], .button.hollow.secondary.disabled:hover, .button.hollow.secondary[disabled]:hover, .button.hollow.secondary.disabled:focus, .button.hollow.secondary[disabled]:focus{ background-color: var(--white); border: 1px solid var(--disabled); color: var(--disabled); } /*Text Button*/ .button.secondary.clear { background-color: transparent; border-color: transparent; color: var(--surface-primary); box-shadow: unset; } .button.secondary.clear.underline { border: unset; border-bottom: 1px solid var(--primary); border-radius: 0; padding: 0; color: var(--primary); background-color: unset; } .button.secondary.clear.underline:hover{ border: unset; border-bottom: 1px solid transparent; padding: 0; color: var(--primary-70); background-color: unset; } .button.secondary.clear.underline:focus{ font-weight: 700; border: unset; border-bottom: 1px solid transparent; padding: 0; color: var(--primary-70); background-color: unset; } .button.secondary.clear.underline:active{ border: unset; border-bottom: 1px solid transparent; padding: 0; color: var(--primary-90); background-color: unset; } .button.secondary.clear:hover{ background-color: var(--neutral-0); border-color: transparent; color: var(--surface-primary); } .button.secondary.clear:focus{ background-color: var(--surface-light-3); border-color: var(--surface-primary); color: var(--surface-primary); box-shadow: unset; } .button.secondary.clear:active{ background-color: var(--surface-light-3); border-color: transparent; color: var(--surface-primary); } .button.secondary.clear.disabled, .button.secondary.clear.disabled:hover, .button.secondary.clear.disabled:focus, .button.secondary.clear[disabled], .button.secondary.clear[disabled]:hover, .button.secondary.clear[disabled]:focus{ background-color: transparent; border-color: transparent; color: var(--disabled); } /*Decline Button*/ .button.decline{ background-color: var(--white); color: var(--error-loud); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); border: 1px solid var(--error-loud); } .button.decline:hover{ background-color: var(--decline-state-1); color: var(--error-loud); } .button.decline:focus{ background-color: var(--error); color: var(--white); box-shadow: 0px 0px 0px 1px var(--error); border: 1px solid var(--white); } .button.decline:active{ background-color: var(--decline-state-1); color: var(--error-loud); } .button.decline.disabled, .button.decline[disabled], .button.decline.disabled:hover, .button.decline[disabled]:hover, .button.decline.disabled:focus, .button.decline[disabled]:focus{ background-color: var(--surface-disabled); color: var(--disabled); } /*Icon Buttons*/ .button.icon { display: flex; border-radius: 50%; padding: 9px; } .button.icon.disabled svg path, .button.icon[disabled] svg path, .button.icon.disabled:hover svg path, .button.icon[disabled]:hover svg path, .button.icon.disabled:focus svg path, .button.icon[disabled]:focus svg path { fill: var(--disabled); } .button.icon.hollow svg path{ fill: var(--primary); } .button.icon.hollow:active { background-color: var(--neutral-0); border: 1px solid var(--primary); color: var(--primary); } .button.icon.hollow:focus { background-color: var(--informative-quiet); box-shadow: 0px 0px 0px 1px var(--primary); border: 1px solid var(--primary); } .button.icon.hollow.disabled, .button.icon.hollow[disabled], .button.icon.hollow.disabled:hover, .button.icon.hollow[disabled]:hover, .button.icon.hollow.disabled:focus, .button.icon.hollow[disabled]:focus { background-color: var(--surface-disabled); color: var(--disabled); border: 1px solid var(--disabled); } .button.secondary.icon.clear svg path{ fill: var(--primary); } .button.icon.clear { background-color: var(--neutral-0); } .button.icon.clear:hover { background-color: var(--informative-quiet); } .button.icon.clear:focus { background-color: var(--primary-dark-state-4); border: 1px solid var(--primary); } .button-group { list-style: none; margin: 0; left: 0; *zoom: 1; } .button-group:before, .button-group:after { content: " "; display: table; } .button-group:after { clear: both; } .button-group li { margin: 0; float: left; } .button-group li > button, .button-group li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group li:first-child button, .button-group li:first-child .button { border-left: 0; } .button-group li:first-child { margin-left: 0; } .button-group.radius > * > button, .button-group.radius > * .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.radius > *:first-child button, .button-group.radius > *:first-child .button { border-left: 0; } .button-group.radius > *:first-child, .button-group.radius > *:first-child > a, .button-group.radius > *:first-child > button, .button-group.radius > *:first-child > .button { border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .button-group.radius > *:last-child, .button-group.radius > *:last-child > a, .button-group.radius > *:last-child > button, .button-group.radius > *:last-child > .button { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .button-group.round > * > button, .button-group.round > * .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.round > *:first-child button, .button-group.round > *:first-child .button { border-left: 0; } .button-group.round > *:first-child, .button-group.round > *:first-child > a, .button-group.round > *:first-child > button, .button-group.round > *:first-child > .button { border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .button-group.round > *:last-child, .button-group.round > *:last-child > a, .button-group.round > *:last-child > button, .button-group.round > *:last-child > .button { border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .button-group.even-2 li { width: 50%; } .button-group.even-2 li > button, .button-group.even-2 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-2 li:first-child button, .button-group.even-2 li:first-child .button { border-left: 0; } .button-group.even-2 li button, .button-group.even-2 li .button { width: 100%; } .button-group.even-3 li { width: 33.33333%; } .button-group.even-3 li > button, .button-group.even-3 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-3 li:first-child button, .button-group.even-3 li:first-child .button { border-left: 0; } .button-group.even-3 li button, .button-group.even-3 li .button { width: 100%; } .button-group.even-4 li { width: 25%; } .button-group.even-4 li > button, .button-group.even-4 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-4 li:first-child button, .button-group.even-4 li:first-child .button { border-left: 0; } .button-group.even-4 li button, .button-group.even-4 li .button { width: 100%; } .button-group.even-5 li { width: 20%; } .button-group.even-5 li > button, .button-group.even-5 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-5 li:first-child button, .button-group.even-5 li:first-child .button { border-left: 0; } .button-group.even-5 li button, .button-group.even-5 li .button { width: 100%; } .button-group.even-6 li { width: 16.66667%; } .button-group.even-6 li > button, .button-group.even-6 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-6 li:first-child button, .button-group.even-6 li:first-child .button { border-left: 0; } .button-group.even-6 li button, .button-group.even-6 li .button { width: 100%; } .button-group.even-7 li { width: 14.28571%; } .button-group.even-7 li > button, .button-group.even-7 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-7 li:first-child button, .button-group.even-7 li:first-child .button { border-left: 0; } .button-group.even-7 li button, .button-group.even-7 li .button { width: 100%; } .button-group.even-8 li { width: 12.5%; } .button-group.even-8 li > button, .button-group.even-8 li .button { border-left: 1px solid; border-color: rgba(255, 255, 255, 0.5); } .button-group.even-8 li:first-child button, .button-group.even-8 li:first-child .button { border-left: 0; } .button-group.even-8 li button, .button-group.even-8 li .button { width: 100%; } .button-bar { *zoom: 1; } .button-bar:before, .button-bar:after { content: " "; display: table; } .button-bar:after { clear: both; } .button-bar .button-group { float: left; margin-right: 0.625rem; } .button-bar .button-group div { overflow: hidden; } .split.button { position: relative; padding-right: 5.0625rem; } .split.button span { display: block; height: 100%; position: absolute; right: 0; top: 0; border-left: solid 1px; } .split.button span:before { position: absolute; content: ""; width: 0; height: 0; display: block; border-style: inset; top: 50%; left: 50%; } .split.button span:active { background-color: rgba(0, 0, 0, 0.1); } .split.button span { border-left-color: rgba(255, 255, 255, 0.5); } .split.button span { width: 3.09375rem; } .split.button span:before { border-top-style: solid; border-width: 0.375rem; top: 48%; margin-left: -0.375rem; } .split.button span:before { border-color: white transparent transparent transparent; } .split.button.secondary span { border-left-color: rgba(255, 255, 255, 0.5); } .split.button.secondary span:before { border-color: white transparent transparent transparent; } .split.button.alert span { border-left-color: rgba(255, 255, 255, 0.5); } .split.button.success span { border-left-color: rgba(255, 255, 255, 0.5); } .split.button.tiny { padding-right: 3.75rem; } .split.button.tiny span { width: 2.25rem; } .split.button.tiny span:before { border-top-style: solid; border-width: 0.375rem; top: 48%; margin-left: -0.375rem; } .split.button.small { padding-right: 4.375rem; } .split.button.small span { width: 2.625rem; } .split.button.small span:before { border-top-style: solid; border-width: 0.4375rem; top: 48%; margin-left: -0.375rem; } .split.button.large { padding-right: 5.5rem; } .split.button.large span { width: 3.4375rem; } .split.button.large span:before { border-top-style: solid; border-width: 0.3125rem; top: 48%; margin-left: -0.375rem; } .split.button.expand { padding-left: 2rem; } .split.button.secondary span:before { border-color: #333333 transparent transparent transparent; } .split.button.radius span { border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .split.button.round span { border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } .customButtons .right{ display: none; } .listButtons, .customButtons { background: var(--white); border: 1px solid var(--light); list-style: none; margin: 0; border-radius: 6px; margin-bottom: 16px; overflow: auto; } .listButtons.border-aqua{ margin-bottom: 16px; } .listButtons .listButton { color: var(--black); border-bottom: 1px solid var(--light); font-size: 15px; } .listButtons .listButton a, .customButtons li a { color: var(--black); padding: 16px; display: flex; justify-content: space-between; align-items: center; text-decoration: none; } .customButtons li { overflow: auto; border-bottom: 1px solid var(--light); } .customButtons li a.button{ color: var(--black); border: unset; font-size: 13px; background: var(--white); margin: 0; text-transform: unset; box-shadow: unset; border-radius: 0; overflow: auto; padding: 16px; } .listButtons .listButton:last-child, .customButtons li:last-child { border-bottom: unset; } .listButtons .listButton a:after, .customButtons li a:after{ content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.6501 10.563L13.8001 7.71304C13.6001 7.51304 13.5043 7.2797 13.5126 7.01304C13.5209 6.74637 13.6168 6.51304 13.8001 6.31304C14.0001 6.11304 14.2376 6.00887 14.5126 6.00054C14.7876 5.9922 15.0251 6.08804 15.2251 6.28804L19.8001 10.863C20.0001 11.063 20.1001 11.2964 20.1001 11.563C20.1001 11.8297 20.0001 12.063 19.8001 12.263L15.2251 16.838C15.0251 17.038 14.7876 17.1339 14.5126 17.1255C14.2376 17.1172 14.0001 17.013 13.8001 16.813C13.6168 16.613 13.5209 16.3797 13.5126 16.113C13.5043 15.8464 13.6001 15.613 13.8001 15.413L16.6501 12.563L5.5001 12.563C5.21676 12.563 4.97926 12.4672 4.7876 12.2755C4.59593 12.0839 4.5001 11.8464 4.5001 11.563C4.5001 11.2797 4.59593 11.0422 4.7876 10.8505C4.97926 10.6589 5.21676 10.563 5.5001 10.563L16.6501 10.563Z' fill='%23232426'/%3E%3C/svg%3E%0A"); line-height: 0; } .upload-button { border: 1px dashed var(--dark); padding: 24px 12px; border-radius: 8px; text-align: center; color: var(--primary); width: 100%; margin-bottom: 24px; font-weight: 600; } .upload-button .icon{ margin-bottom: 8px; } .upload-buttons { display: flex; gap: 8px; } .buttons-horizontal{ display: flex; gap: 8px; } /*Mobi Money Button*/ .button.mobi-money { background-color: var(--mobimoney); color: var(--mobimoney-copy); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.mobi-money:hover { background-color: var( --mobimoney); color: var(--mobimoney-copy); } .button.mobi-money:focus { background-color: var(--mobimoney); color: var(--mobimoney-copy); box-shadow: 0px 0px 0px 1px var(--mobimoney); border: 1px solid var(--white); } .button.mobi-money:active { background-color: var(--mobimoney); color: var(--mobimoney-copy); } .button.mobi-money.disabled, .button.mobi-money[disabled], .button.mobi-money.disabled:hover, .button.mobi-money[disabled]:hover, .button.mobi-money.disabled:focus, .button.mobi-money[disabled]:focus { background-color: var(--surface-disabled); color: var(--disabled); } /*Loans button*/ .button.loans { background-color: var(--loans); color: var(--white); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.loans:hover { background-color: var( --loans); color: var(--white); } .button.loans:focus { background-color: var(--loans); color: var(--white); box-shadow: 0px 0px 0px 1px var(--loans); border: 1px solid var(--white); } .button.loans:active { background-color: var(--loans); color: var(--white); } .button.loans.disabled, .button.loans[disabled], .button.loans.disabled:hover, .button.loans[disabled]:hover, .button.loans.disabled:focus, .button.loans[disabled]:focus { background-color: var(--surface-disabled); color: var(--disabled); } /*Insurance button*/ .button.insurance { background-color: var(--insurance); color: var(--white); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.insurance:hover { background-color: var( --insurance); color: var(--white); } .button.insurance:focus { background-color: var(--insurance); color: var(--white); box-shadow: 0px 0px 0px 1px var(--insurance); border: 1px solid var(--white); } .button.insurance:active { background-color: var(--insurance); color: var(--white); } .button.insurance.disabled, .button.insurance[disabled], .button.insurance.disabled:hover, .button.insurance[disabled]:hover, .button.insurance.disabled:focus, .button.insurance[disabled]:focus { background-color: var(--surface-disabled); color: var(--disabled); } /*PJN button*/ .button.pjn { background-color: var(--pjn-green); color: var(--surface-primary); box-shadow: 0px 4px 12px 0px rgba(22, 36, 109, 0.1); } .button.pjn:hover { background-color: var( --pjn-green); color: var(--surface-primary); } .button.pjn:focus { background-color: var(--pjn-green); color: var(--surface-primary); box-shadow: 0px 0px 0px 1px var(--pjn-green); border: 1px solid var(--white); } .button.pjn:active { background-color: var(--pjn-green); color: var(--surface-primary); } .button.pjn.disabled, .button.pjn[disabled], .button.pjn.disabled:hover, .button.pjn[disabled]:hover, .button.pjn.disabled:focus, .button.pjn[disabled]:focus { background-color: var(--surface-disabled); color: var(--disabled); } .buttons-bottom { position: fixed; bottom: 0; width: 100%; left: 50%; transform: translateX(-50%); padding: 0 16px; } /* Standard Forms */ form { margin: 0 0 1rem; } /* Using forms within rows, we need to set some defaults */ form .row .row { margin: 0 -0.5rem; } form .row .row .column, form .row .row .columns { padding: 0 0.5rem; } form .row .row.collapse { margin: 0; } form .row .row.collapse .column, form .row .row.collapse .columns { padding: 0; } form .row .row.collapse input { border-bottom-right-radius: 0; border-top-right-radius: 0; } form .row input.column, form .row input.columns, form .row textarea.column, form .row textarea.columns { padding-left: 0.5rem; } /* Label Styles */ label { font-size: 0.9rem; color: #000000; cursor: pointer; display: block; font-weight: normal; line-height: 1.5; margin-bottom: 0; /* Styles for required inputs */ } label.right { float: none; text-align: right; } label.inline { margin: 0 0 1rem 0; padding: 0.5625rem 0; } label small { text-transform: capitalize; color: #676767; } select::-ms-expand { display: none; } /* Attach elements to the beginning or end of an input */ .prefix, .postfix { display: block; position: relative; z-index: 2; text-align: center; width: 100%; padding-top: 0; padding-bottom: 0; border-style: solid; border-width: 1px; overflow: hidden; font-size: 0.9rem; height: 2.3125rem; line-height: 2.3125rem; } /* Adjust padding, alignment and radius if pre/post element is a button */ .postfix.button { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; text-align: center; line-height: 2.125rem; border: none; } .prefix.button { padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 0; text-align: center; line-height: 2.125rem; border: none; } .prefix.button.radius { border-radius: 0; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } .postfix.button.radius { border-radius: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } .prefix.button.round { border-radius: 0; border-bottom-left-radius: 1000px; border-top-left-radius: 1000px; } .postfix.button.round { border-radius: 0; border-bottom-right-radius: 1000px; border-top-right-radius: 1000px; } /* Separate prefix and postfix styles when on span or label so buttons keep their own */ span.prefix, label.prefix { background: #f2f2f2; border-right: none; color: #333333; border-color: #cccccc; } span.prefix.radius, label.prefix.radius { border-radius: 0; border-bottom-left-radius: 3px; border-top-left-radius: 3px; } span.postfix, label.postfix { background: #f2f2f2; border-left: none; color: #333333; border-color: #cccccc; } span.postfix.radius, label.postfix.radius { border-radius: 0; border-bottom-right-radius: 3px; border-top-right-radius: 3px; } /* We use this to get basic styling on all basic form elements */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { -webkit-appearance: none; background-color: white; font-family: inherit; border: 1px solid #cccccc; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); color: rgba(0, 0, 0, 0.75); display: block; font-size: 0.9rem; margin: 0 0 1rem 0; padding: 0.5rem; /*Danie Hugo 4 Nov 2014 - CSS Change*/ /*remove height completely*/ /*height: 2.3125rem;*/ width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; transition: box-shadow 0.45s, border-color 0.45s ease-in-out; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { box-shadow: 0 0 5px #999999; border-color: #999999; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus { background: #fafafa; border-color: #999999; outline: none; } input[type="text"][disabled], fieldset[disabled] input[type="text"], input[type="password"][disabled], fieldset[disabled] input[type="password"], input[type="date"][disabled], fieldset[disabled] input[type="date"], input[type="datetime"][disabled], fieldset[disabled] input[type="datetime"], input[type="datetime-local"][disabled], fieldset[disabled] input[type="datetime-local"], input[type="month"][disabled], fieldset[disabled] input[type="month"], input[type="week"][disabled], fieldset[disabled] input[type="week"], input[type="email"][disabled], fieldset[disabled] input[type="email"], input[type="number"][disabled], fieldset[disabled] input[type="number"], input[type="search"][disabled], fieldset[disabled] input[type="search"], input[type="tel"][disabled], fieldset[disabled] input[type="tel"], input[type="time"][disabled], fieldset[disabled] input[type="time"], input[type="url"][disabled], fieldset[disabled] input[type="url"], textarea[disabled], fieldset[disabled] textarea { background-color: #dddddd; } input[type="text"].radius, input[type="password"].radius, input[type="date"].radius, input[type="datetime"].radius, input[type="datetime-local"].radius, input[type="month"].radius, input[type="week"].radius, input[type="email"].radius, input[type="number"].radius, input[type="search"].radius, input[type="tel"].radius, input[type="time"].radius, input[type="url"].radius, textarea.radius { border-radius: 3px; } input[type="submit"] { -webkit-appearance: none; } /* Respect enforced amount of rows for textarea */ textarea[rows] { height: auto; } /* Add height value for select elements to match text input height */ select { -webkit-appearance: none !important; background-color: #fafafa; background-image: url("data:image/svg+xml;base64, PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iM3B4IiB2aWV3Qm94PSIwIDAgNiAzIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2IDMiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIHBvaW50cz0iNS45OTIsMCAyLjk5MiwzIC0wLjAwOCwwICIvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: 97% center; border: 1px solid #cccccc; padding: 0.5rem; font-size: 0.9rem; border-radius: 0; height: 2.3125rem; } select.radius { border-radius: 3px; } select:hover { background-color: #f3f3f3; border-color: #999999; } input[type="checkbox"] + label, input[type="radio"] + label { display: inline-block; margin-left: 0.5rem; margin-right: 1rem; margin-bottom: 0; vertical-align: baseline; } /* Normalize file input width */ input[type="file"] { width: 100%; } /* We add basic fieldset styling */ fieldset { border: 1px solid #dddddd; padding: 1.25rem; margin: 1.125rem 0; } fieldset legend { font-weight: bold; background: white; padding: 0 0.1875rem; margin: 0; margin-left: -0.1875rem; } /* Error Handling */ [data-abide] .error small.error, [data-abide] span.error, [data-abide] small.error { display: block; padding: 0.375rem 0.5625rem 0.5625rem; margin-top: -1px; margin-bottom: 1rem; font-size: 0.75rem; font-weight: normal; font-style: italic; background: #f04124; color: white; } [data-abide] span.error, [data-abide] small.error { display: none; } span.error, small.error { display: block; padding: 0.375rem 0.5625rem 0.5625rem; margin-top: -1px; margin-bottom: 1rem; font-size: 0.75rem; font-weight: normal; font-style: italic; background: #f04124; color: white; } .error input, .error textarea, .error select { margin-bottom: 0; } .error input[type="checkbox"], .error input[type="radio"] { margin-bottom: 1rem; } .error label, .error label.error { color: #f04124; } .error small.error { display: block; padding: 0.375rem 0.5625rem 0.5625rem; margin-top: -1px; margin-bottom: 1rem; font-size: 0.75rem; font-weight: normal; font-style: italic; background: #f04124; color: white; } .error > label > small { color: #676767; background: transparent; padding: 0; text-transform: capitalize; font-style: normal; font-size: 80%; margin: 0; display: inline; } .error span.error-message { display: block; } input.error, textarea.error { margin-bottom: 0; } label.error { color: #f04124; } .range-slider { display: block; position: relative; width: 100%; height: 1rem; border: 1px solid #dddddd; margin: 1.25rem 0; -ms-touch-action: none; touch-action: none; background: #fafafa; } .range-slider.vertical-range { display: block; position: relative; width: 100%; height: 1rem; border: 1px solid #dddddd; margin: 1.25rem 0; -ms-touch-action: none; touch-action: none; display: inline-block; width: 1rem; height: 12.5rem; } .range-slider.vertical-range .range-slider-handle { margin-top: 0; margin-left: -0.5rem; position: absolute; bottom: -10.5rem; } .range-slider.vertical-range .range-slider-active-segment { width: 0.9rem; height: auto; bottom: 0; } .range-slider.radius { background: #fafafa; border-radius: 3px; } .range-slider.radius .range-slider-handle { background: var(--primary); border-radius: 3px; } .range-slider.radius .range-slider-handle:hover { background: #007ba4; } .range-slider.round { background: #fafafa; border-radius: 1000px; } .range-slider.round .range-slider-handle { background: var(--primary); border-radius: 1000px; } .range-slider.round .range-slider-handle:hover { background: #007ba4; } .range-slider-active-segment { display: inline-block; position: absolute; height: 0.9rem; background: #e5e5e5; } .range-slider-handle { display: inline-block; position: absolute; z-index: 1; top: -0.3125rem; width: 2rem; height: 1.375rem; border: 1px solid none; cursor: pointer; background: var(--primary); } .range-slider-handle:hover { background: #007ba4; } /*Text Color classes*/ .text-white { color: var(--white); } .text-neutral-0 { color: var(--neutral-0); } .text-black { color: var(--black); } .text-primary { color: var(--primary); } .text-aqua { color: var(--aqua); } .text-pink { color: var(--pink); } .text-light { color: var(--light); } .text-dark { color: var(--dark); } .text-surface-primary { color: var(--surface-primary); } .text-surface-light-1 { color: var(--surface-light-1); } .text-surface-light-3 { color: var(--surface-light-3); } .text-surface-dark-3 { color: var(--surface-dark-3); } .text-surface-disabled { color: var(--surface-disabled); } .text-hint { color: var(--hint); } .text-disabled { color: var(--disabled); } .text-success { color: var(--success); } .text-success-loud { color: var(--success-loud); } .text-success-quiet { color: var(--success-quiet); } .text-error { color: var(--error); } .text-error-loud { color: var(--error-loud); } .text-error-quiet { color: var(--error-quiet); } .text-decline-state-1 { color: var(--decline-state-1); } .text-warning { color: var(--warning); } .text-warning-loud { color: var(--warning-loud); } .text-warning-quiet { color: var(--warning-quiet); } .text-informative { color: var(--primary); } .text-informative-loud { color: var(--informative-loud); } .text-informative-quiet { color: var(--informative-quiet); } .text-aqua-2 { color: var(--aqua-2); } .text-aqua-3 { color: var(--aqua-3); } .text-primary-dark-state-1 { color: var(--primary-dark-state-1); } .text-primary-dark-state-2 { color: var(--primary-dark-state-2); } .text-primary-dark-state-3 { color: var(--primary-dark-state-3); } .text-primary-dark-state-4 { color: var(--primary-dark-state-3); } .text-primary-light-state-4 { color: var(--primary-light-state-4); } .text-loans { color: var(--loans); } .text-insurance { color: var(--insurance); } .text-mobimoney { color: var(--mobimoney); } .text-loans-copy { color: var(--loans-copy); } .text-insurance-copy { color: var(--insurance-copy); } .text-mobimoney-copy { color: var(--mobimoney-copy); } .text-loans-quiet { color: var(--loans-quiet); } .text-insurance-quiet { color: var(--insurance-quiet); } .text-mobimoney-quiet { color: var(--mobimoney-quiet); } .text-accent-2{ color: var(--accent-2) !important; } .text-primary-70 { color: var(--primary-70); } .text-primary-90 { color: var(--primary-90); } .text-pjn-green { color: var(--pjn-green); } .text-pjn-green-80 { color: var(--pjn-green-80); } .text-pjn-green-60 { color: var(--pjn-green-60); } .text-primary-10 { color: var(--primary-10); } .text-surface-outline-light { color: var(--surface-outline-light); } .text-brand-outline-light-2 { color: var(--brand-outline-light-2); } .text-mobimoney-loud { color: var(--mobimoney-loud); } /*Background Color classes*/ .background-white { background-color: var(--white); } .background-neutral-0 { background-color: var(--neutral-0); } .background-black { background-color: var(--black); } .background-primary { background-color: var(--primary); } .background-aqua { background-color: var(--aqua); } .background-pink { background-color: var(--pink); } .background-light { background-color: var(--light); } .background-dark { background-color: var(--dark); } .background-surface-primary { background-color: var(--surface-primary); } .background-surface-light-1 { background-color: var(--surface-light-1); } .background-surface-light-3 { background-color: var(--surface-light-3); } .background-surface-dark-3 { background-color: var(--surface-dark-3); } .background-surface-disabled { background-color: var(--surface-disabled); } .background-hint { background-color: var(--hint); } .background-disabled { background-color: var(--disabled); } .background-success { background-color: var(--success); } .background-success-loud { background-color: var(--success-loud); } .background-success-quiet { background-color: var(--success-quiet); } .background-error { background-color: var(--error); } .background-error-loud { background-color: var(--error-loud); } .background-error-quiet { background-color: var(--error-quiet); } .background-decline-state-1 { background-color: var(--decline-state-1); } .background-warning { background-color: var(--warning); } .background-warning-loud { background-color: var(--warning-loud); } .background-warning-quiet { background-color: var(--warning-quiet); } .background-informative { background-color: var(--primary); } .background-informative-loud { background-color: var(--informative-loud); } .background-informative-quiet { background-color: var(--informative-quiet); } .background-aqua-2 { background-color: var(--aqua-2); } .background-aqua-3 { background-color: var(--aqua-3); } .background-primary-dark-state-1 { background-color: var(--primary-dark-state-1); } .background-primary-dark-state-2 { background-color: var(--primary-dark-state-2); } .background-primary-dark-state-3 { background-color: var(--primary-dark-state-3); } .background-primary-dark-state-4 { background-color: var(--primary-dark-state-3); } .background-primary-light-state-4 { background-color: var(--primary-light-state-4); } .background-loans { background: var(--loans); } .background-insurance { background: var(--insurance); } .background-mobimoney { background: var(--mobimoney); } .background-loans-copy { background: var(--loans-copy); } .background-insurance-copy { background: var(--insurance-copy); } .background-mobimoney-copy { background: var(--mobimoney-copy); } .background-loans-quiet { background: var(--loans-quiet); } .background-insurance-quiet { background: var(--insurance-quiet); } .background-mobimoney-quiet { background: var(--mobimoney-quiet); } .background-accent-2 { background: var(--accent-2) } .background-primary-70 { background: var(--primary-70); } .background-primary-90 { background: var(--primary-90); } .background-pjn-green { background: var(--pjn-green); } .background-pjn-green-80 { background: var(--pjn-green-80); } .background-pjn-green-60 { background: var(--pjn-green-60); } .background-primary-10 { background: var(--primary-10); } .background-surface-outline-light { background: var(--surface-outline-light); } .background-brand-outline-light-2 { background: var(--brand-outline-light-2); } .background-mobimoney-loud { background: var(--mobimoney-loud); } /*Border Colors*/ .border-white { border: 1px solid var(--white); } .border-neutral-0 { border: 1px solid var(--neutral-0); } .border-black { border: 1px solid var(--black); } .border-primary { border: 1px solid var(--primary); } .border-aqua { border: 1px solid var(--aqua); } .border-pink { border: 1px solid var(--pink); } .border-light { border: 1px solid var(--light); } .border-dark { border: 1px solid var(--dark); } .border-surface-primary { border: 1px solid var(--surface-primary); } .border-surface-light-1 { border: 1px solid var(--surface-light-1); } .border-surface-light-3 { border: 1px solid var(--surface-light-3); } .border-surface-dark-3 { border: 1px solid var(--surface-dark-3); } .border-surface-disabled { border: 1px solid var(--surface-disabled); } .border-hint { border: 1px solid var(--hint); } .border-disabled { border: 1px solid var(--disabled); } .border-success { border: 1px solid var(--success); } .border-success-loud { border: 1px solid var(--success-loud); } .border-success-quiet { border: 1px solid var(--success-quiet); } .border-error { border: 1px solid var(--error); } .border-error-loud { border: 1px solid var(--error-loud); } .border-decline-state-1 { border: 1px solid var(--decline-state-1); } .border-error-quiet { border: 1px solid var(--error-quiet); } .border-warning { border: 1px solid var(--warning); } .border-warning-loud { border: 1px solid var(--warning-loud); } .border-warning-quiet { border: 1px solid var(--warning-quiet); } .border-informative { border: 1px solid var(--primary); } .border-informative-loud { border: 1px solid var(--informative-loud); } .border-informative-quiet { border: 1px solid var(--informative-quiet); } .border-aqua-2 { border: 1px solid var(--aqua-2); } .border-aqua-3 { border: 1px solid var(--aqua-3); } .border-primary-dark-state-1 { border: 1px solid var(--primary-dark-state-1); } .border-primary-dark-state-2 { border: 1px solid var(--primary-dark-state-2); } .border-primary-dark-state-3 { border: 1px solid var(--primary-dark-state-3); } .border-primary-dark-state-4 { border: 1px solid var(--primary-dark-state-3); } .border-primary-light-state-4 { border: 1px solid var(--primary-light-state-4); } .border-loans { border: 1px solid var(--loans); } .border-insurance { border: 1px solid var(--insurance); } .border-mobimoney { border: 1px solid var(--mobimoney); } .border-loans-copy { border: 1px solid var(--loans-copy); } .border-insurance-copy { border: 1px solid var(--insurance-copy); } .border-mobimoney-copy { border: 1px solid var(--mobimoney-copy); } .border-loans-quiet { border: 1px solid var(--loans-quiet); } .border-insurance-quiet { border: 1px solid var(--insurance-quiet); } .border-mobimoney-quiet { border: 1px solid var(--mobimoney-quiet); } .border-accent-2 { border: 1px solid var(--accent-2); } .border-primary-70 { border: 1px solid var(--primary-70); } .border-primary-90 { border: 1px solid var(--primary-90); } .border-pjn-green { border: 1px solid var(--pjn-green); } .border-pjn-green-80 { border: 1px solid var(--pjn-green-80); } .border-pjn-green-60 { border: 1px solid var(--pjn-green-60); } .border-primary-10 { border: 1px solid var(--primary-10); } .border-surface-outline-light { border: 1px solid var(--surface-outline-light); } .border-brand-outline-light-2 { border: 1px solid var(--brand-outline-light-2); } .border-mobimoney-loud { border: 1px solid var(--mobimoney-loud); } form { margin: 0px !important; } .validation-summary-errors ul, .validation-summary-errors ol, .validation-summary-errors dl, .validation-summary-valid ul, .validation-summary-valid ol, .validation-summary-valid dl .validation-summary-success ul, .validation-summary-success ol, .validation-summary-success dl { margin-bottom: 0px !important; } .validation-summary-errors ul, .validation-summary-errors, .validation-summary-success ul, .validation-summary-success { font-size: .9rem; } .validation-summary-warnings ul { margin-bottom: 0px; margin-right: 10px; } .validation-summary-warnings { padding-left: 45px; padding-top: 10px; padding-bottom: 10px; color: #fe832c; background: lavenderblush url("Images/Warning.png") 15px 13px no-repeat; border-top: 1px solid #e59f63; border-bottom: 1px solid #e59f63; text-align: left; min-height: 25px; } .validation-summary-errors { padding-left: 45px; padding-top: 10px; padding-bottom: 10px; color: #CD001F; background: lavenderblush url("Images/Error.png") 15px 13px no-repeat; border-top: 1px solid #DE7A7B; border-bottom: 1px solid #DE7A7B; text-align: left; min-height: 25px; } .validation-summary-success { padding-left: 45px; padding-top: 10px; color: #009848; background: mintcream url("Images/ok.png") 15px 13px no-repeat; border-top: 1px solid green; border-bottom: 1px solid green; text-align: left; min-height: 25px; } /* Remove the arrows for input type number on Chrome and Firefox*/ /* For Firefox */ input[type='number'] { -moz-appearance: textfield; } /* Webkit browsers like Safari and Chrome */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .ReferralButtonGreen { width: 90%; height: 50px; border: solid 1px #36D368; border-radius: 6px; cursor: pointer; color: black; } .ReferralButtonBlue { width: 90%; height: 50px; border: solid 1px #3A579B; border-radius: 6px; cursor: pointer; color: black; } /* line 1, ../scss/custom.scss */ @media (max-width: 4800px) { .demo-holder { width: 320px; margin: 0 auto; } .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-300px.jpg'); width: 100%; height: 134px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-300px.jpg'); width: 100%; height: 134px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 25.2%; height: 80px; position: absolute; margin-left: 4%; margin-top: 10px; text-align: center } .EC-HomeScreenImg { width: 40px; margin-top: 10px; } .EC-HomeScreenHeader { font-size: 14px; margin-top: -5px; } .EC-HomeScreenLabel { font-size: 12px; margin-top: -10px; } .EC-ReferralBanner { color: white; font-size: 14px; display: block; cursor: pointer; font-weight: bold; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-300pxv2.jpg'); background-size: 100% 100%; width: 100%; height: 245px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-300px.jpg'); background-size: 100% 100%; width: 100%; height: 245px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 30%; margin-left: 10%; top: 70px; height: 100px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 14px; line-height: 16px; } .EC-ListScreenFooterDiv { width: 80%; margin-left: 5%; top: 202px; height: 100px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 14px; line-height: 16px; } .EC-ListScreenCounter { width: 40.2%; height: 134px; position: absolute; margin-left: 44.5%; margin-top: 25px; text-align: center } .EC-ListScreenImg { width: 50px; margin-top: 15px; } .EC-ListScreenHeader { font-size: 24px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 16px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen-300px.jpg'); background-size: 100% 100%; width: 100%; height: 205px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 205px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-300px.jpg'); background-size: 100% 100%; width: 100%; height: 246px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 246px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-300px.jpg'); background-size: 100% 100%; width: 100%; height: 134px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 134px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 23%; border-radius: 5px; } } @media (max-width: 767px) { .demo-holder { width: 100vw; margin: 0 auto; } .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-767px.jpg'); background-size: 100% 100%; width: 100%; height: 343px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-767px.jpg'); background-size: 100% 100%; width: 100%; height: 343px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 25.2%; height: 210px; position: absolute; margin-left: 4%; margin-top: 35px; text-align: center } .EC-HomeScreenImg { width: 80px; margin-top: 15px; } .EC-HomeScreenHeader { font-size: 40px; } .EC-HomeScreenLabel { font-size: 24px; margin-top: -15px; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-767pxv2.jpg'); width: 100%; height: 625px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-767px.jpg'); width: 100%; height: 625px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 35%; margin-left: 7%; top: 180px; height: 250px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 44px; line-height: 46px; } .EC-ListScreenFooterDiv { display: flex; align-items: center; justify-content: center; width: 85%; margin-left: 5%; top: 502px; height: 100px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 34px; line-height: 36px; } .EC-ListScreenCounter { width: 42.6%; height: 344px; position: absolute; margin-left: 46.5%; margin-top: 60px; text-align: center } .EC-ListScreenImg { width: 100px; margin-top: 65px; } .EC-ListScreenHeader { font-size: 50px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 24px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen-767px.jpg'); background-size: 100% 100%; width: 100%; height: 519px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-767px.jpg'); background-size: 100% 100%; width: 100%; height: 519px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-767px.jpg'); background-size: 100% 100%; width: 100%; height: 630px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-767px.jpg'); background-size: 100% 100%; width: 100%; height: 630px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-767px.jpg'); background-size: 100% 100%; width: 100%; height: 313px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-767px.jpg'); background-size: 100% 100%; width: 100%; height: 313px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; } } @media (max-width: 600px) { .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-600px.jpg'); width: 100%; height: 268px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-600px.jpg'); width: 100%; height: 268px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 25.2%; height: 160px; position: absolute; margin-left: 4%; margin-top: 25px; text-align: center } .EC-HomeScreenImg { width: 70px; margin-top: 15px; } .EC-HomeScreenHeader { font-size: 36px; } .EC-HomeScreenLabel { font-size: 20px; margin-top: -15px; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-600pxv2.jpg'); width: 100%; height: 493px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-600px.jpg'); width: 100%; height: 493px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 35%; margin-left: 7%; top: 140px; height: 210px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 34px; line-height: 36px; } .EC-ListScreenFooterDiv { display: flex; align-items: center; justify-content: center; width: 85%; margin-left: 5%; top: 392px; height: 100px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 24px; line-height: 26px; } .EC-ListScreenCounter { width: 42.6%; height: 274px; position: absolute; margin-left: 46.2%; margin-top: 49px; text-align: center } .EC-ListScreenImg { width: 100px; margin-top: 45px; } .EC-ListScreenHeader { font-size: 50px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 24px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen- 600px.jpg'); background-size: 100% 100%; width: 100%; height: 407px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-600px.jpg'); background-size: 100% 100%; width: 100%; height: 407px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-600px.jpg'); background-size: 100% 100%; width: 100%; height: 493px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-600px.jpg'); background-size: 100% 100%; width: 100%; height: 493px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-600px.jpg'); background-size: 100% 100%; width: 100%; height: 268px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-600px.jpg'); background-size: 100% 100%; width: 100%; height: 268px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; } } @media (max-width: 500px) { .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-500px.jpg'); width: 100%; height: 223px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-500px.jpg'); width: 100%; height: 223px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 25.2%; height: 135px; position: absolute; margin-left: 4%; margin-top: 25px; text-align: center } .EC-HomeScreenImg { width: 50px; margin-top: 12px; } .EC-HomeScreenHeader { font-size: 30px; } .EC-HomeScreenLabel { font-size: 16px; margin-top: -12px; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-500pxv2.jpg'); width: 100%; height: 408px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-500px.jpg'); width: 100%; height: 408px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 34%; margin-left: 7%; top: 120px; height: 180px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 30px; line-height: 32px; } .EC-ListScreenFooterDiv { display: flex; align-items: center; justify-content: center; width: 85%; margin-left: 5%; top: 338px; height: 60px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 22px; line-height: 24px; } .EC-ListScreenCounter { width: 42%; height: 224px; position: absolute; margin-left: 45.5%; margin-top: 39px; text-align: center } .EC-ListScreenImg { width: 80px; margin-top: 35px; } .EC-ListScreenHeader { font-size: 40px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 24px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen-500px.jpg'); background-size: 100% 100%; width: 100%; height: 338px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-500px.jpg'); background-size: 100% 100%; width: 100%; height: 338px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-500px.jpg'); background-size: 100% 100%; width: 100%; height: 410px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-500px.jpg'); background-size: 100% 100%; width: 100%; height: 410px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-500px.jpg'); background-size: 100% 100%; width: 100%; height: 224px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-500px.jpg'); background-size: 100% 100%; width: 100%; height: 224px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; } } @media (max-width: 400px) { .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-400px.jpg'); width: 100%; height: 179px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-400px.jpg'); width: 100%; height: 179px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 25%; height: 105px; position: absolute; margin-left: 4%; margin-top: 15px; text-align: center } .EC-HomeScreenImg { width: 50px; margin-top: 12px; } .EC-HomeScreenHeader { font-size: 24px; } .EC-HomeScreenLabel { font-size: 12px; margin-top: -10px; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-400pxv2.jpg'); width: 100%; height: 327px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-400px.jpg'); width: 100%; height: 327px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 34%; margin-left: 7%; top: 100px; height: 140px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 24px; line-height: 26px; } .EC-ListScreenFooterDiv { display: flex; align-items: center; justify-content: center; width: 83%; margin-left: 5%; top: 265px; height: 60px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 18px; line-height: 20px; } .EC-ListScreenCounter { width: 41.5%; height: 180px; position: absolute; margin-left: 45%; margin-top: 32px; text-align: center } .EC-ListScreenImg { width: 60px; margin-top: 35px; } .EC-ListScreenHeader { font-size: 30px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 20px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen-400px.jpg'); background-size: 100% 100%; width: 100%; height: 270px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-400px.jpg'); background-size: 100% 100%; width: 100%; height: 270px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-400px.jpg'); background-size: 100% 100%; width: 100%; height: 329px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-400px.jpg'); background-size: 100% 100%; width: 100%; height: 329px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-400px.jpg'); background-size: 100% 100%; width: 100%; height: 178px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-400px.jpg'); background-size: 100% 100%; width: 100%; height: 178px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; } } @media (max-width: 320px) { .EC-HomeScreenRef { background-image: url('Images/BlackFriday/1. Home screen-300px.jpg'); width: 100%; height: 134px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenRefBF { background-image: url('Images/BlackFriday/1. Home screen-BF-300px.jpg'); width: 100%; height: 134px; margin: 0px; padding: 0px; cursor: pointer; } .EC-HomeScreenCounter { width: 24%; height: 85px; position: absolute; margin-left: 4%; margin-top: 15px; text-align: center } .EC-HomeScreenImg { width: 40px; margin-top: 5px; } .EC-HomeScreenHeader { font-size: 14px; margin-top: -5px; } .EC-HomeScreenLabel { font-size: 12px; margin-top: -10px; } .EC-ListScreen { background-image: url('Images/BlackFriday/3. Money earned screen-300pxv2.jpg'); width: 100%; height: 245px; margin: 0px; padding: 0px; } .EC-ListScreenBF { background-image: url('Images/BlackFriday/3. Money earned screen-without text-300px.jpg'); width: 100%; height: 245px; margin: 0px; padding: 0px; } .EC-ListScreenHeaderDiv { width: 30%; margin-left: 10%; top: 70px; height: 100px; position: absolute; color: #95CA41 !important; } .EC-ListScreenHeaderDiv strong { font-size: 14px; line-height: 16px; } .EC-ListScreenFooterDiv { width: 80%; margin-left: 5%; top: 202px; height: 100px; position: absolute; color: #FFF !important; text-align: center } .EC-ListScreenFooterDiv span { font-size: 14px; line-height: 16px; } .EC-ListScreenCounter { width: 40.3%; height: 135px; position: absolute; margin-left: 43.5%; margin-top: 20px; text-align: center } .EC-ListScreenImg { width: 40px; margin-top: 35px; } .EC-ListScreenHeader { font-size: 24px; margin-top: 0px; } .EC-ListScreenLabel { font-size: 14px; margin-top: -10px; } .EC-ActivateScreen { background-image: url('Images/BlackFriday/2. Activated screen-300px.jpg'); background-size: 100% 100%; width: 100%; height: 205px; margin: 0px; padding: 0px; } .EC-ActivateScreenBF { background-image: url('Images/BlackFriday/2. Activated screen-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 205px; margin: 0px; padding: 0px; } .EC-Prequal { background-image: url('Images/BlackFriday/MobiMoney USPs-300px.jpg'); background-size: 100% 100%; width: 100%; height: 246px; margin: 0px; padding: 0px; } .EC-PrequalBF { background-image: url('Images/BlackFriday/MobiMoney USPs-V3-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 246px; margin: 0px; padding: 0px; } .EC-PrequalNU { background-image: url('Images/BlackFriday/NC-Prequal-300px.jpg'); background-size: 100% 100%; width: 100%; height: 134px; margin: 0px; padding: 0px; } .EC-PrequalNUBF { background-image: url('Images/BlackFriday/1. Home screen-Black Friday-300px.jpg'); background-size: 100% 100%; width: 100%; height: 134px; margin: 0px; padding: 0px; } .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; border-radius: 5px; } } /*backgrounds*/ /* line 22, ../scss/custom.scss */ .grey-bg { background-color: var(--surface-light-3); border-radius: 8px; padding: 16px; margin-bottom: 16px; } .smallParagraph { font-size: .9rem; } /* line 35, ../scss/custom.scss */ .white-bg { background: #FFFFFF; /*border-bottom: 0.063rem solid #dcdedf;*/ /*border-top: 0.063rem solid #d6d9da;*/ padding: 0px 0 0.3rem; color: var(--black); font-size: 0.9rem; margin-top: 20px; } /* line 42, ../scss/custom.scss */ .white-bg strong { color: var(--black); font-weight: 400; font-size: 1.1rem; } .white-bg label { font-size: 0.9rem; font-weight: 400; } /* line 47, ../scss/custom.scss */ .white-bg span { display: block; padding-bottom: 0.6rem; } /* line 53, ../scss/custom.scss */ .grey-line { border-bottom: none; } /* line 85, ../scss/custom.scss */ .top-blue-red { background: #DB323E; } /*inputs*/ /* line 91, ../scss/custom.scss */ input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea { margin: 0 0 0.4rem 0; /*Danie Hugo 4 Nov 2014*/ /*overwrite height that was switched off in foundation.css*/ height: 2.3125rem; } /* line 95, ../scss/custom.scss */ label.inline { margin: 0 0 0 0; } /*other css*/ /* line 101, ../scss/custom.scss */ .home-red { background: #ce1723; text-align: center; margin: 0 0 1.2rem 0; } /* line 106, ../scss/custom.scss */ .home-red h3 { color: white; padding: 10px 0px; font-size: 20px; line-height: 1.2; } /* line 122, ../scss/custom.scss */ i.right { height: 18px; width: 18px; background: url("Images/carat_grey.png") no-repeat 60% center; position: absolute; right: 0.7rem; } /* line 131, ../scss/custom.scss */ i.right.blue { height: 18px; width: 18px; background: url("Images/carat_grey.png") no-repeat center center; position: absolute; right: 0.9rem; top: 0.7rem; } /* line 165, ../scss/custom.scss */ /* Funi 2022.02.18 NB commented out the important rule to allow override of element on customerLanding quick link Download paid-up letter, double check all file using this class and this change won't cause conflict. */ /* line 214, ../scss/custom.scss */ ul.customButtons.red { list-style: none; padding: 0; margin: 0 0 1.2rem 0; border: 0.063rem solid #CD001F; background: #CD001F; -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); -webkit-border-radius: 0.625rem; -moz-border-radius: 0.625rem; border-radius: 0.625rem; } /* line 229, ../scss/custom.scss */ ul.customButtons.red li:first-child a { -webkit-border-top-left-radius: 0.625rem; -webkit-border-top-right-radius: 0.625rem; -moz-border-radius-topleft: 0.625rem; -moz-border-radius-topright: 0.625rem; border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; } /* line 238, ../scss/custom.scss */ ul.customButtons.red li:last-child a { -webkit-border-bottom-right-radius: 0.625rem; -webkit-border-bottom-left-radius: 0.625rem; -moz-border-radius-bottomright: 0.625rem; -moz-border-radius-bottomleft: 0.625rem; border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; border-bottom: none; } /* line 249, ../scss/custom.scss */ ul.customButtons.red a.button { margin: 0; margin-bottom: 0.063rem; border-bottom: 0.063rem solid #8b1e1e; color: white; font-weight: 700; position: relative; padding-left: 1rem; text-align: left; background: #CD001F; background: -moz-linear-gradient(top, #CD001F 0%, #CD001F 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CD001F), color-stop(100%, #CD001F)); background: -webkit-linear-gradient(top, #CD001F 0%, #CD001F 100%); background: -o-linear-gradient(top, #CD001F 0%, #CD001F 100%); background: -ms-linear-gradient(top, #CD001F 0%, #CD001F 100%); background: linear-gradient(to bottom, #CD001F 0%, #CD001F 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CD001F', endColorstr='#CD001F',GradientType=0 ); } ul.customButtons.green { list-style: none; padding: 0; margin: 0 0 1.2rem 0; border: 0.063rem solid #009848; background: #009848; -webkit-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); box-shadow: 0px 1px 4px 0px rgba(50, 50, 50, 0.5); -webkit-border-radius: 0.625rem; -moz-border-radius: 0.625rem; border-radius: 0.625rem; } /* line 229, ../scss/custom.scss */ ul.customButtons.green li:first-child a { -webkit-border-top-left-radius: 0.625rem; -webkit-border-top-right-radius: 0.625rem; -moz-border-radius-topleft: 0.625rem; -moz-border-radius-topright: 0.625rem; border-top-left-radius: 0.625rem; border-top-right-radius: 0.625rem; } /* line 238, ../scss/custom.scss */ ul.customButtons.green li:last-child a { -webkit-border-bottom-right-radius: 0.625rem; -webkit-border-bottom-left-radius: 0.625rem; -moz-border-radius-bottomright: 0.625rem; -moz-border-radius-bottomleft: 0.625rem; border-bottom-right-radius: 0.625rem; border-bottom-left-radius: 0.625rem; border-bottom: none; } /* line 249, ../scss/custom.scss */ ul.customButtons.green a.button { margin: 0; margin-bottom: 0.063rem; border-bottom: 0.063rem solid #8b1e1e; color: white; font-weight: 700; position: relative; padding-left: 1rem; text-align: left; background: #009848; background: -moz-linear-gradient(top, #009848 0%, #009848 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #009848), color-stop(100%, #009848)); background: -webkit-linear-gradient(top, #009848 0%, #009848 100%); background: -o-linear-gradient(top, #009848 0%, #009848 100%); background: -ms-linear-gradient(top, #009848 0%, #009848 100%); background: linear-gradient(to bottom, #009848 0%, #009848 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009848', endColorstr='#009848',GradientType=0 ); } /* line 291, ../scss/custom.scss */ a.red-link { color: #0086F7; text-decoration: underline; font-size: 0.7rem; font-weight: 700; padding-top: 0.5rem; } /*ENC-28520*/ /* Look at compact links*/ a.green-link { color: #008000; text-decoration: underline; font-size: .9rem; font-weight: 700; padding-top: 12px; } a.blue-link { color: cornflowerblue; text-decoration: underline; font-size: .9rem; font-weight: 700; padding-top: 12px; } p a, label a { color: var(--primary); text-decoration: underline; font-weight: 600; } p a:hover, label a:hover{ color: var(--primary-70); text-decoration: none; font-weight: 600; } p a:active, label a:active{ color: var(--primary-70); text-decoration: none; font-weight: 700; } p a:active, label a:active{ color: var(--primary-90); text-decoration: none; font-weight: 600; } a.blue-label { color: #008cba; font-size: .9rem; font-weight: 700; padding-top: 12px; } /*END*/ /* NEW COMPACT LAYOUT*/ a.red-link.compact { padding-top: 5px; } a.green-link.compact { padding-top: 5px; } a.blue-label.compact { padding-top: 5px; } /*END*/ /* line 299, ../scss/custom.scss */ .custom.button.red { background: #CD001F; font-size: 0.9rem; font-weight: 700; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; } .custom.button.red.outline { background: none; font-size: 0.9rem; font-weight: normal; font-family: Arial; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; color: #CD001F; } .custom.button.outline { background: none; font-size: 0.9rem; font-weight: normal; font-family: Arial; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; text-decoration: none; border: 2px !important; background-color: white !important; border: solid 1px var(--black) !important; color: var(--black) !important; font-weight: 500 !important } .custom.button.green { background: #009848; font-size: 0.9rem; font-weight: 700; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; } .custom.button.grey { background: #666666; font-size: 0.9rem; font-weight: 700; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; } .custom.button { background: var(--primary); font-size: 0.9rem; font-weight: 700; padding-top: 0.4rem; padding-bottom: 0.4rem; margin: 0 0 1rem; } ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */ color: #CCCCCC; opacity: 1; /* Firefox */ } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #CCCCCC; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #CCCCCC; } /* line 323, ../scss/custom.scss */ .bottom-nav { /*border-top: 0.063rem solid #cdcdab; border-bottom: 0.063rem solid #cdcdab; background: #f3f3f3;*/ padding: 1rem 0 0 0; margin-top: 15px; } .bottom-nav.elevated { position: sticky; bottom: 0; left: 0; background-color: white; box-shadow: 0px 2px 6px 0px rgba(19, 36, 128, 0.05), 0px 4px 12px 0px rgba(22, 36, 109, 0.10); padding: 16px 16px 0; margin: 0 -16px; z-index: 10000; } /* line 354, ../scss/custom.scss */ .sep { padding: 0; margin: 16px 0 16px; } /* line 359, ../scss/custom.scss */ .switch-toggle.panel { margin: 0; } /* line 365, ../scss/custom.scss */ .terms { display: block; font-size: 0.6rem; padding-top: 0.7rem; } /* line 370, ../scss/custom.scss */ .terms a { color: var(--primary); text-decoration: underline; } /* line 376, ../scss/custom.scss */ .black-price { display: block; padding: 0rem 0.01rem; color: black; font-weight: 700; font-size: 0.9rem; } /* line 385, ../scss/custom.scss */ label.light-grey { font-weight: normal; color: #a8a8a8; } /* line 390, ../scss/custom.scss */ label.common { font-weight: normal; color: #000000; } /* line 395, ../scss/custom.scss */ label.greyed { font-weight: normal; color: #000000; font-size: 0.9rem; padding-left: 0.9rem; } /* line 403, ../scss/custom.scss */ label.blue { font-weight: bold; color: var(--primary); font-size: 0.9rem; } label.blue.compact, span.light-grey.compact { font-size: 0.77rem; } label.inline.compact { /*margin: 4px 0px 1rem;*/ margin: 10px 0px 0px 0px; padding: 0px 0px; } /* line 409, ../scss/custom.scss */ span.light-grey { font-weight: normal; color: #a8a8a8; } .red-header { color: red; font-weight: 400; font-size: 0.9rem; display: block; padding-bottom: 0.5rem; } /* line 423, ../scss/custom.scss */ .grey-bg.many .row { padding-bottom: 0.6rem; } /* line 428, ../scss/custom.scss */ .step-text { color: #333333; font-weight: 700; font-size: 0.9rem; display: block; padding-bottom: 0.5rem; } .step-text.right { text-align: right!important; } /* line 436, ../scss/custom.scss */ span.blue-top-bold { display: block; text-align: center; font-weight: 700; font-size: 0.9rem; color: black; } /* line 460, ../scss/custom.scss */ .login-container { position: relative; } /* line 464, ../scss/custom.scss */ .loginout { position: absolute; top: 0.7rem; right: 2.6rem; z-index: 166; } /* line 470, ../scss/custom.scss */ .loginout a { /*display: block;*/ font-size: 0.9rem; font-weight: 700; color: #fff; border: 1px solid #fff; padding: 0.3rem; border-radius: 0.2rem; } .loginout a.login { background-color: #95c93d; } /* line 482, ../scss/custom.scss */ .switch-toggle a.button { display: none; } /* line 486, ../scss/custom.scss */ .prefix.amount { background: transparent; border: 1px solid var(--primary-light-state-4); border-radius: 8px; text-align: left; font-size: 16px; margin: 0 0 0.4rem 0; margin-bottom: 16px; padding-left: 32px !important; border-radius: 8px; padding: 9px 16px; height: auto; } label.amount { text-align: right !important; font-size: 16px; margin: 0 0 0.4rem 0; padding: 0.2em; padding-top: 10px; border: 0px solid #cccccc; /*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;*/ /*transition: box-shadow 0.45s ease 0s, border-color 0.45s ease-in-out 0s;*/ height: 2.3125rem; color: #fff; } label.label-top { padding: 10px 0px 5px 0px !important; } .amount.right input[type=text] { text-align: right; } .totals { background: #aaa; margin: 10px 0px !important; } .totals .description-1, .totals .description-2 { color: #fff; } .totals .description-1 { padding: 10px 0px; } .totals .description-2 { padding: 10px 0px; line-height: 1; } /* Custom button as IE8 does not position well with ABSOLUTE*/ .button-arrow { height: 18px; margin-top: 14px; margin-left: 3px; } .button-arrow.compact { height: 18px; margin-top: 5px; margin-left: 3px; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .input-right input[type=text] { text-align: right; } .input-right input[type=text] { text-align: right; } .grey-line-double { border-bottom: 2px solid #fff; } /*Neil Diedericks*/ /*16 JAN 2017*/ #activationbutton { display: table-cell; background: rgb(0, 128, 0); ; padding: 5px; margin: 0px 0px 0px 0px; color: white; text-align: center; font-weight: 600; position: relative; border: 1px solid rgb(0, 128, 0); ; border-width: 1px 1px 3px; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px; border-radius: 6px 6px 6px 6px; } .otto { color: white; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9,; } .newbadge:before { content: "New "; color: Red; text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9,; } .title-area { background-color: rgb(10, 31, 143) !important; } .title-area img { margin: 5px; } .title-banner { padding: 4px 0 8px 0; padding: 8px 0px; background-color: rgb(37,64,143); color: white; font-size: .9rem; line-height: 16px; position: relative; } .title-banner-image { position: absolute; top: -46px; right: 13px; z-index: 1; animation: bounce 2s infinite; } .title-banner-image img { width: 162px; /*height: 115px;*/ } .button-smallpadding .button.tiny { padding-right: 15px; padding-left: 15px; } @keyframes bounce { 0%, 100% { -ms-transform: translate(0px, 0px); /* IE 9 */ -webkit-transform: translate(0px, 0px); /* Safari */ -moz-transform: translate(0px, 0px); /* Firefox */ transform: translate(0px, 0px); } 50% { -ms-transform: translate(0px, -2px); /* IE 9 */ -webkit-transform: translate(0px, -2px); /* Safari */ -moz-transform: translate(0px, -2px); /* Firefox */ transform: translate(0px, -2px); } } #menu1 { z-index: 9999; } .centerStretch { text-align: center; } .tool-tip { display: inline-block; position: relative; margin-top: 10px; } .tool-tip .tool-tip__icon { padding-top: 2px; padding-left: 1px; background: #233a77; border-radius: 10px; cursor: pointer; display: inline-block; height: 18px; line-height: 1.3em; text-align: center; width: 18px; color: white; font-style: normal; } .tool-tip .tool-tip__info { display: none; background: #dfdfdf; border: 1px solid #233a77; border-radius: 3px; font-size: 0.875em; padding: 1em; position: absolute; left: 30px; top: -20px; width: 142px; z-index: 2; } .tool-tip .tool-tip__info:before, .tool-tip .tool-tip__info:after { content: ""; position: absolute; left: -10px; top: 7px; border-style: solid; border-width: 10px 10px 10px 0; border-color: transparent #233a77; } .tool-tip .tool-tip__info .info { display: block; } .tool-tip .tool-tip__info .info__title { color: #fa00f3; } .tool-tip:hover .tool-tip__info, .tool-tip:focus .tool-tip__info { display: inline-block; } a:focus + .tool-tip .tool-tip__info { display: inline-block; } .red-border-children input { border: 1px solid red; } .top-dark-blue { background-color: var(--informative-quiet); font-size: 12px; font-weight: normal; padding: 12px; border-radius: 8px; } .top-dark-blue b { font-weight: 900; } .top-dark-blue h5 { color: var(--primary); margin: 10px 0 0 0; } .top-dark-blue p { margin-bottom: 0; font-size: 0.9rem; } .banner-icons { font-size: 13px; } .banner-icons .grid-x{ margin-bottom: 12px; } .banner-icons .grid-x:last-of-type{ margin-bottom: 0; } .banner-icons .icon{ display: flex; margin-right: 12px; } .banner-icons .banner-icons-text { align-content: center; } .hidden { display: none; } ul.tick { list-style-image: url('Images/bullet-tick-white.png'); } .MMOrderList ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } .MMOrderListItems ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -1em; list-style-type: none; counter-increment: item; font-size: 14px; color: #4d4d4d; } .MMOrderListbullets ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; color: darkblue; text-align: right; content: counter(item) "."; } .MobiMoney-Text { line-height: 1.2; color: #000; margin: 0 !important; padding-bottom: 0 !important; } .hidden { display: none; } ul.tick { list-style-image: url('Images/bullet-tick-white.png'); } .MMOrderList ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } .MMOrderListItems ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -1em; list-style-type: none; counter-increment: item; font-size: 14px; color: #4d4d4d; } .MMOrderListbullets ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; color: darkblue; text-align: right; content: counter(item) "."; } .MobiMoney-Text { line-height: 1.2; color: #000; margin: 0 !important; padding-bottom: 0 !important; } img { max-width: 100%; max-height: 100%; } .portrait { height: 80px; width: 30px; } .landscape { height: 30px; width: 80px; } .square { height: 52.5px; width: 52.5px; } .text-bold { font-weight: 800; } .btn { border: 3px solid #1a1a1a; display: inline-block; padding: 10px; position: relative; text-align: center; transition: background 600ms ease, color 600ms ease; } .switch-field { font-family: "Lucida Grande", Tahoma, Verdana, sans-serif; overflow: hidden; } .switch-title { margin-bottom: 6px; } .switch-field input { position: absolute !important; clip: rect(0, 0, 0, 0); height: 1px; width: 1px; border: 0; overflow: hidden; } .switch-field label { float: left; } .switch-field label { display: inline-block; width: 152px; background-color: #e5e5e5; color: #3e7eae; font-size: 14px; font-weight: normal; text-align: center; text-shadow: none; padding: 6px; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; -o-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .switch-field label:hover { cursor: pointer; } .switch-field input:checked + label { background-color: #3e7eae; -webkit-box-shadow: none; color: #e5e5e5; box-shadow: none; margin-right: -10px; } .switch-field input + label { margin-right: -10px; } .switch-field label:first-of-type { border-radius: 4px 0 0 4px; } .switch-field label:last-of-type { border-radius: 0 4px 4px 0; } .LabelCaption { display: block; margin-top: -4px !important; } input, textarea, select, button { text-rendering: auto; color: initial; letter-spacing: normal; word-spacing: normal; text-transform: none; text-indent: 0px; text-shadow: none; display: inline-block; text-align: start; margin: 0em; margin-top: 5px; } .top-dark-blue label { font-size: .9rem; } .top-dark-blue strong { font-size: .9rem; } .pushBox { background-color: #e7ecff !important; width: 100%; border-bottom: 1px solid #CCCCCC; z-index: 1; } .pushBox table { background-color: unset; margin: 0; padding: 0px; border: none; } .pushBox table td { background-color: #e7ecff !important; padding: unset !important; } .checkbox { padding: 0px 20px 0px 20px; } .checkbox input[type="checkbox"] { display: none; } .checkbox label { position: relative; display: inline-block; /*16px width of fake checkbox + 6px distance between fake checkbox and text*/ padding-left: 19px; margin-left: 14px; } .checkbox label::before, .checkbox label::after { position: absolute; content: ""; /*Needed for the line-height to take effect*/ display: inline-block; } /*Outer box of the fake checkbox*/ .checkbox label::before { height: 25px; width: 25px; border: 1px solid; left: -20px; /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border *to vertically center it. */ top: 3px; } /*Checkmark of the fake checkbox*/ .checkbox label::after { height: 10px; width: 14px; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg); left: -16px; top: 7px; color: #00A887 } /*Hide the checkmark by default*/ .checkbox input[type="checkbox"] + label::after { content: none } /*Unhide on the checked state*/ .checkbox input[type="checkbox"]:checked + label::after { content: ""; } /*Adding focus styles on the outer-box of the fake checkbox*/ .checkbox input[type="checkbox"]:focus + label::before { outline: rgb(59, 153, 252) auto 5px; } /*Expired page image*/ .expired-image { display: block; margin-left: auto; margin-right: auto; } .expired-page-body { text-align: center; } .expired-page-heading h6{ text-align: center; } label { font-size: 15px; color: var(--primary); } input[type="text"], input[type="password"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="week"], input[type="email"], input[type="number"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], textarea, select { border: 1px solid var(--primary-light-state-4); border-radius: 8px; padding: 23px 16px; color: var(--black); font-size: 15px; background-color: var(--white); box-shadow: unset; margin-bottom: 16px; margin-top: 4px; /* letter-spacing: 0.3px; */ } select { height: 48px; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.00001 4.88748L9.90001 0.987475C10.0833 0.804142 10.3167 0.712475 10.6 0.712475C10.8833 0.712475 11.1167 0.804142 11.3 0.987475C11.4833 1.17081 11.575 1.40414 11.575 1.68748C11.575 1.97081 11.4833 2.20414 11.3 2.38748L6.70001 6.98748C6.50001 7.18748 6.26668 7.28748 6.00001 7.28748C5.73335 7.28748 5.50001 7.18748 5.30001 6.98748L0.700013 2.38747C0.516679 2.20414 0.425012 1.97081 0.425012 1.68747C0.425012 1.40414 0.516679 1.17081 0.700013 0.987474C0.883346 0.804141 1.11668 0.712474 1.40001 0.712474C1.68335 0.712474 1.91668 0.804141 2.10001 0.987475L6.00001 4.88748Z' fill='%23191A1C'/%3E%3C/svg%3E%0A"); background-position: 100% center; } select:hover{ border: 1px solid var(--primary); box-shadow: unset; } /*Placeholder styling*/ input[type="text"]::placeholder, input[type="password"]::placeholder, input[type="date"]::placeholder, input[type="datetime"]::placeholder, input[type="datetime-local"]::placeholder, input[type="month"]::placeholder, input[type="week"]::placeholder, input[type="email"]::placeholder, input[type="number"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="time"]::placeholder, input[type="url"]::placeholder, textarea::placeholder { color: var(--hint); font-size: 15px; } /*Focus styling*/ input:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="time"]:focus, input[type="url"]:focus, textarea:focus, select:focus { border: 1px solid var(--primary); box-shadow: unset; background-color: var(--white); } /*Required*/ label small.required { color: var(--error-loud); } label small.required::before { font-size: 0.9rem; content: "* "; } /*Error Styling*/ .is-invalid-label { color: var(--error-loud); } .is-invalid-label .input-group .icon svg path { fill: var(--error-loud); } .is-invalid-input:not(:focus) { border-color: var(--error-loud); background-color: var(--white); } .form-error{ font-size: 13px; margin-top: 0; } /*Disabled Styling*/ input[type="text"]:disabled, input[type="password"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="month"]:disabled, input[type="week"]:disabled, input[type="email"]:disabled, input[type="number"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, textarea:disabled, input[type="text"]:disabled:hover, input[type="password"]:disabled:hover, input[type="date"]:disabled:hover, input[type="datetime"]:disabled:hover, input[type="datetime-local"]:disabled:hover, input[type="month"]:disabled:hover, input[type="week"]:disabled:hover, input[type="email"]:disabled:hover, input[type="number"]:disabled:hover, input[type="search"]:disabled:hover, input[type="tel"]:disabled:hover, input[type="time"]:disabled:hover, input[type="url"]:disabled:hover, textarea:disabled:hover, input[type="text"]:disabled:focus, input[type="password"]:disabled:focus, input[type="date"]:disabled:focus, input[type="datetime"]:disabled:focus, input[type="datetime-local"]:disabled:focus, input[type="month"]:disabled:focus, input[type="week"]:disabled:focus, input[type="email"]:disabled:focus, input[type="number"]:disabled:focus, input[type="search"]:disabled:focus, input[type="tel"]:disabled:focus, input[type="time"]:disabled:focus, input[type="url"]:disabled:focus, textarea:disabled:focus, input[type="text"][disabled], input[type="password"][disabled], input[type="date"][disabled], input[type="datetime"][disabled], input[type="datetime-local"][disabled], input[type="month"][disabled], input[type="week"][disabled], input[type="email"][disabled], input[type="number"][disabled], input[type="search"][disabled], input[type="tel"][disabled], input[type="time"][disabled], input[type="url"][disabled], textarea[disabled], input[type="text"][disabled]:hover, input[type="password"][disabled]:hover, input[type="date"][disabled]:hover, input[type="datetime"][disabled]:hover, input[type="datetime-local"][disabled]:hover, input[type="month"][disabled]:hover, input[type="week"][disabled]:hover, input[type="email"][disabled]:hover, input[type="number"][disabled]:hover, input[type="search"][disabled]:hover, input[type="tel"][disabled]:hover, input[type="time"][disabled]:hover, input[type="url"][disabled]:hover, textarea[disabled]:hover, input[type="text"][disabled]:focus, input[type="password"][disabled]:focus, input[type="date"][disabled]:focus, input[type="datetime"][disabled]:focus, input[type="datetime-local"][disabled]:focus, input[type="month"][disabled]:focus, input[type="week"][disabled]:focus, input[type="email"][disabled]:focus, input[type="number"][disabled]:focus, input[type="search"][disabled]:focus, input[type="tel"][disabled]:focus, input[type="time"][disabled]:focus, input[type="url"][disabled]:focus, textarea[disabled]:focus input[type="text"]:disabled:focus, input[type="password"]:disabled:focus, input[type="date"]:disabled:focus, input[type="datetime"]:disabled:focus, input[type="datetime-local"]:disabled:focus, input[type="month"]:disabled:focus, input[type="week"]:disabled:focus, input[type="email"]:disabled:focus, input[type="number"]:disabled:focus, input[type="search"]:disabled:focus, input[type="tel"]:disabled:focus, input[type="time"]:disabled:focus, input[type="url"]:disabled:focus, textarea:disabled:focus, select:disabled, select:disabled:hover, select:disabled:focus, select[disabled], select[disabled]:hover, select[disabled]:focus { border: 1px solid var(--disabled); color: var(--disabled); box-shadow: unset; /* letter-spacing: 0.3px; */ } input[type="text"]:disabled::placeholder, input[type="password"]:disabled::placeholder, input[type="date"]:disabled::placeholder, input[type="datetime"]:disabled::placeholder, input[type="datetime-local"]:disabled::placeholder, input[type="month"]:disabled::placeholder, input[type="week"]:disabled::placeholder, input[type="email"]:disabled::placeholder, input[type="number"]:disabled::placeholder, input[type="search"]:disabled::placeholder, input[type="tel"]:disabled::placeholder, input[type="time"]:disabled::placeholder, input[type="url"]:disabled::placeholder, textarea:disabled::placeholder, input[type="text"]:disabled:hover::placeholder, input[type="password"]:disabled:hover::placeholder, input[type="date"]:disabled:hover::placeholder, input[type="datetime"]:disabled:hover::placeholder, input[type="datetime-local"]:disabled:hover::placeholder, input[type="month"]:disabled:hover::placeholder, input[type="week"]:disabled:hover::placeholder, input[type="email"]:disabled:hover::placeholder, input[type="number"]:disabled:hover::placeholder, input[type="search"]:disabled:hover::placeholder, input[type="tel"]:disabled:hover::placeholder, input[type="time"]:disabled:hover::placeholder, input[type="url"]:disabled:hover::placeholder, textarea:disabled:hover::placeholder, input[type="text"]:disabled:focus::placeholder, input[type="password"]:disabled:focus::placeholder, input[type="date"]:disabled:focus::placeholder, input[type="datetime"]:disabled:focus::placeholder, input[type="datetime-local"]:disabled:focus::placeholder, input[type="month"]:disabled:focus::placeholder, input[type="week"]:disabled:focus::placeholder, input[type="email"]:disabled:focus::placeholder, input[type="number"]:disabled:focus::placeholder, input[type="search"]:disabled:focus::placeholder, input[type="tel"]:disabled:focus::placeholder, input[type="time"]:disabled:focus::placeholder, input[type="url"]:disabled:focus::placeholder, textarea:disabled:focus::placeholder, input[type="text"][disabled]::placeholder, input[type="password"][disabled]::placeholder, input[type="date"][disabled]::placeholder, input[type="datetime"][disabled]::placeholder, input[type="datetime-local"][disabled]::placeholder, input[type="month"][disabled]::placeholder, input[type="week"][disabled]::placeholder, input[type="email"][disabled]::placeholder, input[type="number"][disabled]::placeholder, input[type="search"][disabled]::placeholder, input[type="tel"][disabled]::placeholder, input[type="time"][disabled]::placeholder, input[type="url"][disabled]::placeholder, textarea[disabled]::placeholder, input[type="text"][disabled]:hover::placeholder, input[type="password"][disabled]:hover::placeholder, input[type="date"][disabled]:hover::placeholder, input[type="datetime"][disabled]:hover::placeholder, input[type="datetime-local"][disabled]:hover::placeholder, input[type="month"][disabled]:hover::placeholder, input[type="week"][disabled]:hover::placeholder, input[type="email"][disabled]:hover::placeholder, input[type="number"][disabled]:hover::placeholder, input[type="search"][disabled]:hover::placeholder, input[type="tel"][disabled]:hover::placeholder, input[type="time"][disabled]:hover::placeholder, input[type="url"][disabled]:hover::placeholder, textarea[disabled]:hover::placeholder, input[type="text"][disabled]:focus::placeholder, input[type="password"][disabled]:focus::placeholder, input[type="date"][disabled]:focus::placeholder, input[type="datetime"][disabled]:focus::placeholder, input[type="datetime-local"][disabled]:focus::placeholder, input[type="month"][disabled]:focus::placeholder, input[type="week"][disabled]:focus::placeholder, input[type="email"][disabled]:focus::placeholder, input[type="number"][disabled]:focus::placeholder, input[type="search"][disabled]:focus::placeholder, input[type="tel"][disabled]:focus::placeholder, input[type="time"][disabled]:focus::placeholder, input[type="url"][disabled]:focus::placeholder, textarea[disabled]:focus::placeholder input[type="text"]:disabled:hover::placeholder, input[type="password"]:disabled:hover::placeholder, input[type="date"]:disabled:hover::placeholder, input[type="datetime"]:disabled:hover::placeholder, input[type="datetime-local"]:disabled:hover::placeholder, input[type="month"]:disabled:hover::placeholder, input[type="week"]:disabled:hover::placeholder, input[type="email"]:disabled:hover::placeholder, input[type="number"]:disabled:hover::placeholder, input[type="search"]:disabled:hover::placeholder, input[type="tel"]:disabled:hover::placeholder, input[type="time"]:disabled:hover::placeholder, input[type="url"]:disabled:hover::placeholder, textarea:disabled:hover::placeholder, input[type="text"]:disabled:focus::placeholder, input[type="password"]:disabled:focus::placeholder, input[type="date"]:disabled:focus::placeholder, input[type="datetime"]:disabled:focus::placeholder, input[type="datetime-local"]:disabled:focus::placeholder, input[type="month"]:disabled:focus::placeholder, input[type="week"]:disabled:focus::placeholder, input[type="email"]:disabled:focus::placeholder, input[type="number"]:disabled:focus::placeholder, input[type="search"]:disabled:focus::placeholder, input[type="tel"]:disabled:focus::placeholder, input[type="time"]:disabled:focus::placeholder, input[type="url"]:disabled:focus::placeholder, textarea:disabled:focus::placeholder { border: 1px solid var(--disabled); color: var(--disabled); box-shadow: unset; } .input-group > :first-child, .input-group > :first-child.input-group-button > *{ border-radius: 8px; } textarea{ min-height: 100px; } input, textarea, button, select, a, a:focus, a:active { -webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .otp-input-container { display: flex; justify-content: center; gap: 8px; } input[type="tel"].otp-input, input[type="number"].otp-input, input[type="tel"].otp-field, input[type="number"].otp-field { width: 100%; max-width: 68px; height: 100%; max-height: 68px; text-align: center; color: var(--primary); font-weight: 600; /* letter-spacing: 0.3px; */ } label.radio-button { margin-bottom: 0; } .input-group{ display: block; position: relative; margin-bottom: 0; } .input-group input{ padding-right: 40px; } .input-group .icon { position: absolute; top: 50%; transform: translateY(-50%); right: 16px; display: flex; } .input-group.currency .icon { left: 16px; right: unset; color: var(--hint); font-size: 15px; line-height: 0; } .input-group.currency input{ padding-right: 0; padding-left: 32px; line-height: 0; text-align: left; } .input-group .icon svg path{ fill: var(--black); } .supporting-text{ color: var(--hint); font-size: 13px; } label .body-2 { font-size: 13px!important; line-height: 1.2!important; color: var(--hint)!important; } .search-container { position: relative; width: 100%; } input[type="text"].search-input { padding-left: 46px; } .search-button { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); background-color: transparent; border: none; cursor: pointer; padding: 0; height: 100%; } .text-area{ position: relative; } .text-area textarea{ padding-right: 80px; } .text-area .text-area-word-count-wrapper{ position: absolute; right: 16px; bottom: 20px; color: var(--hint); } /*Password strength styling*/ .progress { border-radius: 10px; background-color: var(--surface-light-3); } .progress-meter { border-radius: 10px; } .password-strength-meter .password-strength-label { font-size: 13px; font-weight: 400; color: var(--black); } .password-strength-meter .password-strength-label .strength-text { font-size: 13px; font-weight: 400; } .progress.alert .progress-meter { background-color: var(--error-loud); } .password-strength-meter .password-strength-label .strength-text.alert { color: var(--error-loud); } .progress.danger .progress-meter { background-color: var(--error-loud); } .password-strength-meter .password-strength-label .strength-text.danger { color: var(--error-loud); } .progress.success .progress-meter{ background-color: var(--success-loud); } .password-strength-meter .password-strength-label .strength-text.success { color: var(--success-loud); } .progress.warning .progress-meter{ background-color: var(--warning-loud); } .password-strength-meter .password-strength-label .strength-text.warning { color: var(--warning-loud); } .password-help-block { background-color: var(--neutral-0); border-radius: 8px; } .password-help-block.invalid ul li { color: var(--error-loud); } label:not(:has(*)){ margin-bottom: 0px; } label:has(input), label:has(textarea), label:has(select) { margin-bottom: 16px; } label input[type="text"], label input[type="password"], label input[type="date"], label input[type="datetime"], label input[type="datetime-local"], label input[type="month"], label input[type="week"], label input[type="email"], label input[type="number"], label input[type="search"], label input[type="tel"], label input[type="time"], label input[type="url"], label textarea, label select { margin-bottom: 0px; } /*Date Picker styling*/ .ui-datepicker.ui-widget.ui-widget-content { background: var(--white); border: unset; box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.1); padding: 16px; color: var(--primary); border-radius: 8px; display: none; } .ui-datepicker .ui-datepicker-header { background: var(--white); border: unset; padding-bottom: 16px !important; border-radius: unset; border-top-left-radius: 8px; border-top-right-radius: 8px; border-bottom: 1px solid var(--light); } .ui-datepicker table { margin: 0 !important; margin-top: 16px !important; } .ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { display: none; } .ui-datepicker .ui-datepicker-header .ui-datepicker-title { margin: 0; text-align: left; display: flex; justify-content: space-between; } .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month, .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year { margin-left: 16px; border: unset; height: 24px; width: 30%; padding: 0; background-position: 85% center; color: var(--primary); font-weight: 600; font-size: 15px; background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.208008' width='24' height='24' rx='12' fill='%23F7F7FB'/%3E%3Cpath d='M11.8334 13.5914L14.4334 10.9914C14.5556 10.8692 14.7112 10.8081 14.9 10.8081C15.0889 10.8081 15.2445 10.8692 15.3667 10.9914C15.4889 11.1136 15.55 11.2692 15.55 11.4581C15.55 11.647 15.4889 11.8025 15.3667 11.9247L12.3 14.9914C12.1667 15.1247 12.0112 15.1914 11.8334 15.1914C11.6556 15.1914 11.5 15.1247 11.3667 14.9914L8.30005 11.9247C8.17783 11.8025 8.11672 11.647 8.11672 11.4581C8.11672 11.2692 8.17783 11.1136 8.30005 10.9914C8.42227 10.8692 8.57783 10.8081 8.76672 10.8081C8.9556 10.8081 9.11116 10.8692 9.23338 10.9914L11.8334 13.5914Z' fill='%230A1F8F'/%3E%3C/svg%3E%0A"); background-size: unset; margin-bottom: unset; } .ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year{ margin-right: 16px; background-position: 100% center; } .ui-datepicker .ui-datepicker-calendar thead { background: unset; color: var(--disabled); } .ui-datepicker .ui-datepicker-calendar thead tr th{ padding: 0; text-align: center; } .ui-datepicker .ui-datepicker-calendar tbody tr{ background: var(--white); } .ui-datepicker .ui-datepicker-calendar tbody tr td{ padding: 0px; text-align: center; } .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default { background: var(--white); color: var(--primary); text-align: center; border: 1px solid transparent; border-radius: 50%; padding: 0.4em; line-height: 20px; display: block; } .ui-datepicker .ui-datepicker-calendar tbody tr td.ui-datepicker-other-month .ui-state-default { color: var(--disabled); } .ui-datepicker .ui-datepicker-calendar tbody tr td .ui-state-default.ui-state-active{ border: 1px solid var(--primary); } .ui-datepicker .ui-datepicker-buttonpane { padding: 0; padding-top: 16px !important; display: flex; gap: 8px; justify-content: space-between; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; background-image: none; margin: 0.7em 0 0 0; padding: 0 .2em; border: 1px solid #dddddd; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button{ padding: 8px 12px !important; margin: 0 !important; font-size: 13px; font-weight: 600; border-radius: 8px; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{ background-color: transparent; border: 1px solid var(--surface-primary); color: var(--surface-primary); opacity: unset; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:hover { background-color: var(--neutral-0); border: 1px solid var(--surface-primary); color: var(--surface-primary); } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:focus { background-color: var(--surface-light-3); border: 1px solid var(--surface-primary); color: var(--surface-primary); box-shadow: unset; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current:active { background-color: var(--informative-quiet); border: 1px solid var(--surface-primary); color: var(--surface-primary); } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close{ background-color: var(--primary); border: 1px solid var(--primary); color: var(--white); } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:hover { background-color: var(--primary-dark-state-2); } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:focus { background-color: var(--primary-dark-state-3); box-shadow: 0px 0px 0px 1px var(--primary-dark-state-3); border: 1px solid var(--white); } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close:active { background-color: var(--primary-dark-state-3); } #smileyDiv { padding: 10px 0; text-align: center !important; display: flex; gap: 8px; justify-content: center; } #smileyDiv input { padding: 2px; border: 1px solid var(--primary-light-state-4); border-radius: 8px; margin: 0; width: 100%; max-width: 110px; } #smileyDiv input.excellent{ color: var(--success); } #smileyDiv input.excellent:active, #smileyDiv input.excellent:focus{ border: 1px solid var(--success); background: var(--success-quiet); } #smileyDiv input.average{ color: var(--warning); } #smileyDiv input.average:active, #smileyDiv input.average:focus{ border: 1px solid var(--warning); background: var(--warning-quiet); } #smileyDiv input.poor{ color: var(--error); } #smileyDiv input.poor:active, #smileyDiv input.poor:focus{ border: 1px solid var(--error); background: var(--error-quiet); } /*YES/NO Toggle styles*/ .switch { position: relative; display: inline-block; width: 70px; } .switch input { display: none; } .slider, .slider2 { background: unset; position: absolute; cursor: pointer; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid var(--disabled); -webkit-transition: 0.4s; transition: 0.4s; margin: 0 !important; height: 32px; } .slider:before, .slider2:before { position: absolute; z-index: 2; content: ""; height: 24px; width: 24px; left: 4px; bottom: 3px; background-color: var(--disabled); -webkit-transition: 0.4s; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .slider:after, .slider2:after { position: absolute; left: 0; z-index: 1; content: "No"; font-size: 13px; text-align: left !important; line-height: 25px; padding-left: 0; border-radius: 100px; -webkit-transform: translateX(40px); transform: translateX(40px); margin-top: 2px; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; color: var(--disabled); } input:checked + .slider, input:checked + .slider2 { border: 1px solid var(--success-loud); } input:checked + .slider:after, input:checked + .slider2:after { -webkit-transform: translateX(0px); transform: translateX(0px); padding-left: 25px; margin-top: 2px; padding-left: 10px; content: "Yes"; color: var(--success); } input:checked + .slider:before, input:checked + .slider2:before { background-color: var(--success-loud); } input:checked + .slider:before, input:checked + .slider2:before { -webkit-transform: translateX(36px); transform: translateX(36px); } /* Rounded sliders */ .slider.round, .slider2.round { border-radius: 100px; } .slider.round:before, .slider2.round:before { border-radius: 50%; } /*YES/NO Toggle styles (Small)*/ .switch.small { width: 55px; } .switch.small .slider, .switch.small .slider2 { height: 24px; } .switch.small .slider:before, .switch.small .slider2:before { height: 16px; width: 16px; left: 4px; bottom: 3px; } .switch.small input:checked + .slider:before, .switch.small input:checked + .slider2:before { -webkit-transform: translateX(30px); transform: translateX(30px); } .switch.small .slider:after, .switch.small .slider2:after { font-size: 11px; line-height: 17px; -webkit-transform: translateX(33px); transform: translateX(33px); } .switch.small input:checked + .slider:after, .switch.small input:checked + .slider2:after { -webkit-transform: translateX(0px); transform: translateX(0px); } .input-hidden{ visibility: hidden; position: absolute; opacity: 0; } .notification, .notification.privacypolicybox, .validation-summary-errors, .validation-summary-warnings, .notification-success, .notification-information, .notification-warning, .notification-danger, .notification-debug { padding: 12px; border-radius: 8px; display: flex; margin-bottom: 16px; align-items: center; border: 1px solid transparent; font-size: 13px; background-image: unset; } .privacypolicybox{ margin: 0 15px; } .notification-success p, .notification-information p, .notification-warning p, .notification-danger p, .notification-debug p { margin-bottom: 0; margin-right: 30px; font-size: 13px; } .notification-success .close-button, .notification-information .close-button, .notification-warning .close-button, .notification-danger .close-button, .notification-debug .close-button{ margin-top: 0; top: unset; line-height: 0; } .notification-success:before, .notification-information:before, .notification-warning:before, .notification-danger:before, .notification-debug:before{ background-color: unset; margin-right: 10px; margin-left: 14px; height: 20px; width: 20px; } .notification-success:before{ content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.6 11.8L6.45 9.65C6.26667 9.46667 6.03333 9.375 5.75 9.375C5.46667 9.375 5.23333 9.46667 5.05 9.65C4.86667 9.83333 4.775 10.0667 4.775 10.35C4.775 10.6333 4.86667 10.8667 5.05 11.05L7.9 13.9C8.1 14.1 8.33333 14.2 8.6 14.2C8.86667 14.2 9.1 14.1 9.3 13.9L14.95 8.25C15.1333 8.06667 15.225 7.83333 15.225 7.55C15.225 7.26667 15.1333 7.03333 14.95 6.85C14.7667 6.66667 14.5333 6.575 14.25 6.575C13.9667 6.575 13.7333 6.66667 13.55 6.85L8.6 11.8ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z' fill='%23002800'/%3E%3C/svg%3E%0A"); } .notification-information:before { content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.1 19.2125C7.31667 19.7375 8.61667 20 10 20C11.3833 20 12.6833 19.7375 13.9 19.2125C15.1167 18.6875 16.175 17.975 17.075 17.075C17.975 16.175 18.6875 15.1167 19.2125 13.9C19.7375 12.6833 20 11.3833 20 10C20 8.61667 19.7375 7.31667 19.2125 6.1C18.6875 4.88333 17.975 3.825 17.075 2.925C16.175 2.025 15.1167 1.3125 13.9 0.7875C12.6833 0.2625 11.3833 0 10 0C8.61667 0 7.31667 0.2625 6.1 0.7875C4.88333 1.3125 3.825 2.025 2.925 2.925C2.025 3.825 1.3125 4.88333 0.7875 6.1C0.2625 7.31667 0 8.61667 0 10C0 11.3833 0.2625 12.6833 0.7875 13.9C1.3125 15.1167 2.025 16.175 2.925 17.075C3.825 17.975 4.88333 18.6875 6.1 19.2125ZM9.628 6.51473C9.75344 6.4994 9.88016 6.49173 10.0082 6.49173C10.9789 6.49173 11.8106 6.83601 12.503 7.52457C13.1956 8.21301 13.5307 9.06223 13.5085 10.0722V10.0642L13.0755 9.63123C12.9453 9.50101 12.7963 9.4359 12.6287 9.4359C12.4609 9.4359 12.3119 9.50101 12.1817 9.63123C12.0514 9.76145 11.9836 9.90701 11.978 10.0679C11.9724 10.2287 12.0348 10.3742 12.165 10.5044L13.7157 12.0551C13.8566 12.196 14.0181 12.2664 14.2002 12.2664C14.3823 12.2664 14.5438 12.196 14.6847 12.0551L16.2353 10.5044C16.3656 10.3742 16.4307 10.2259 16.4307 10.0596C16.4307 9.89312 16.3656 9.74479 16.2353 9.61456C16.1051 9.48434 15.9568 9.41856 15.7903 9.41723C15.6239 9.4159 15.4756 9.48034 15.3455 9.61057L14.8918 10.0642V10.0602C14.9252 8.67445 14.4597 7.50273 13.4953 6.54507C12.5309 5.58729 11.3685 5.1084 10.0082 5.1084C9.78105 5.1084 9.56089 5.12429 9.34766 5.15606C9.13433 5.18784 8.92661 5.23418 8.7245 5.29506C8.55027 5.35006 8.42505 5.46518 8.34883 5.6404C8.27272 5.81573 8.27038 5.99045 8.34183 6.16456C8.41594 6.34134 8.54344 6.46162 8.72433 6.5254C8.90511 6.58918 9.08522 6.60173 9.26466 6.56307C9.38155 6.54618 9.50266 6.53007 9.628 6.51473ZM10.3723 13.4854C10.2469 13.5007 10.1202 13.5084 9.99216 13.5084C9.02138 13.5084 8.18911 13.1641 7.49533 12.4756C6.80144 11.7871 6.46561 10.9379 6.48783 9.9279V9.9359L6.9415 10.3896C7.07172 10.5198 7.22066 10.5849 7.38833 10.5849C7.55611 10.5849 7.70511 10.5198 7.83533 10.3896C7.96555 10.2593 8.03 10.1103 8.02866 9.94256C8.02733 9.7749 7.96155 9.62595 7.83133 9.49573L6.28066 7.94106C6.13977 7.80284 5.97894 7.73306 5.79816 7.73173C5.61738 7.7304 5.45655 7.80018 5.31566 7.94106L3.765 9.49173C3.63477 9.62195 3.56966 9.77095 3.56966 9.93873C3.56966 10.1064 3.63477 10.2553 3.765 10.3856C3.89522 10.5158 4.04355 10.5809 4.21 10.5809C4.37644 10.5809 4.52472 10.5158 4.65483 10.3856L5.1045 9.9359V9.9399C5.07116 11.3257 5.54011 12.4974 6.51133 13.4551C7.48266 14.4128 8.64294 14.8917 9.99216 14.8917C10.2331 14.8917 10.4629 14.8731 10.6817 14.8357C10.9006 14.7984 11.1179 14.748 11.3338 14.6846C11.5054 14.6295 11.6258 14.5177 11.6952 14.3494C11.7644 14.181 11.7577 14.0097 11.6752 13.8356C11.5899 13.6588 11.4597 13.5385 11.2843 13.4747C11.1091 13.411 10.9262 13.3984 10.7357 13.4371C10.6188 13.454 10.4977 13.4701 10.3723 13.4854Z' fill='%230A1F8F'/%3E%3C/svg%3E%0A"); } .notification-warning:before{ content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 15C10.2833 15 10.5208 14.9042 10.7125 14.7125C10.9042 14.5208 11 14.2833 11 14C11 13.7167 10.9042 13.4792 10.7125 13.2875C10.5208 13.0958 10.2833 13 10 13C9.71667 13 9.47917 13.0958 9.2875 13.2875C9.09583 13.4792 9 13.7167 9 14C9 14.2833 9.09583 14.5208 9.2875 14.7125C9.47917 14.9042 9.71667 15 10 15ZM10 11C10.2833 11 10.5208 10.9042 10.7125 10.7125C10.9042 10.5208 11 10.2833 11 10V6C11 5.71667 10.9042 5.47917 10.7125 5.2875C10.5208 5.09583 10.2833 5 10 5C9.71667 5 9.47917 5.09583 9.2875 5.2875C9.09583 5.47917 9 5.71667 9 6V10C9 10.2833 9.09583 10.5208 9.2875 10.7125C9.47917 10.9042 9.71667 11 10 11ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z' fill='%234C2400'/%3E%3C/svg%3E%0A"); } .notification-danger:before { content: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 11.4L12.9 14.3C13.0833 14.4833 13.3167 14.575 13.6 14.575C13.8833 14.575 14.1167 14.4833 14.3 14.3C14.4833 14.1167 14.575 13.8833 14.575 13.6C14.575 13.3167 14.4833 13.0833 14.3 12.9L11.4 10L14.3 7.1C14.4833 6.91667 14.575 6.68333 14.575 6.4C14.575 6.11667 14.4833 5.88333 14.3 5.7C14.1167 5.51667 13.8833 5.425 13.6 5.425C13.3167 5.425 13.0833 5.51667 12.9 5.7L10 8.6L7.1 5.7C6.91667 5.51667 6.68333 5.425 6.4 5.425C6.11667 5.425 5.88333 5.51667 5.7 5.7C5.51667 5.88333 5.425 6.11667 5.425 6.4C5.425 6.68333 5.51667 6.91667 5.7 7.1L8.6 10L5.7 12.9C5.51667 13.0833 5.425 13.3167 5.425 13.6C5.425 13.8833 5.51667 14.1167 5.7 14.3C5.88333 14.4833 6.11667 14.575 6.4 14.575C6.68333 14.575 6.91667 14.4833 7.1 14.3L10 11.4ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z' fill='%23560000'/%3E%3C/svg%3E%0A"); } .notification-debug:before { content: url("data:image/svg+xml,%3Csvg width='16' height='20' viewBox='0 0 16 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 10.625C16 10.7943 15.9367 10.9408 15.81 11.0645C15.6833 11.1882 15.5333 11.25 15.36 11.25H13.12C13.12 12.3633 12.8967 13.3073 12.45 14.082L14.53 16.123C14.6567 16.2467 14.72 16.3932 14.72 16.5625C14.72 16.7318 14.6567 16.8783 14.53 17.002C14.41 17.1257 14.26 17.1875 14.08 17.1875C13.9 17.1875 13.75 17.1257 13.63 17.002L11.65 15.0781C11.6167 15.1107 11.5667 15.153 11.5 15.2051C11.4333 15.2572 11.2933 15.3499 11.08 15.4834C10.8667 15.6169 10.65 15.7357 10.43 15.8398C10.21 15.944 9.93667 16.0384 9.61 16.123C9.28333 16.2077 8.96 16.25 8.64 16.25V7.5H7.36V16.25C7.02 16.25 6.68167 16.2061 6.345 16.1182C6.00833 16.0303 5.71833 15.9229 5.475 15.7959C5.23167 15.6689 5.01167 15.542 4.815 15.415C4.61833 15.2881 4.47333 15.1823 4.38 15.0977L4.23 14.9609L2.4 16.9824C2.26667 17.1191 2.10667 17.1875 1.92 17.1875C1.76 17.1875 1.61667 17.1354 1.49 17.0312C1.36333 16.9141 1.295 16.7692 1.285 16.5967C1.275 16.4242 1.32667 16.2728 1.44 16.1426L3.46 13.9258C3.07333 13.1836 2.88 12.2917 2.88 11.25H0.64C0.46667 11.25 0.31667 11.1882 0.19 11.0645C0.06333 10.9408 0 10.7943 0 10.625C0 10.4557 0.06333 10.3092 0.19 10.1855C0.31667 10.0618 0.46667 10 0.64 10H2.88V7.12891L1.15 5.43945C1.02333 5.31575 0.96 5.16927 0.96 5C0.96 4.83073 1.02333 4.68425 1.15 4.56055C1.27667 4.43685 1.42667 4.375 1.6 4.375C1.77333 4.375 1.92333 4.43685 2.05 4.56055L3.78 6.25H12.22L13.95 4.56055C14.0767 4.43685 14.2267 4.375 14.4 4.375C14.5733 4.375 14.7233 4.43685 14.85 4.56055C14.9767 4.68425 15.04 4.83073 15.04 5C15.04 5.16927 14.9767 5.31575 14.85 5.43945L13.12 7.12891V10H15.36C15.5333 10 15.6833 10.0618 15.81 10.1855C15.9367 10.3092 16 10.4557 16 10.625ZM11.2 5H4.8C4.8 4.13411 5.11167 3.39681 5.735 2.78809C6.35833 2.17937 7.11333 1.875 8 1.875C8.88667 1.875 9.64167 2.17937 10.265 2.78809C10.8883 3.39681 11.2 4.13411 11.2 5Z' fill='%23BE0095'/%3E%3C/svg%3E%0A"); } .notification .icon{ margin-right: 10px; display: flex; align-items: center; line-height: 0; } .notification .icon svg, .notification .icon img { max-width: unset; max-height: unset; } .notification .action-icon{ margin-left: auto; padding-left: 10px; margin-right: unset; } .notification .notification-content .body2{ font-weight: 700; margin-bottom: 0; } .notification .notification-content .body2.content-only { font-weight: 400; margin-bottom: 0; } .notification .notification-content{ font-size: 13px; line-height: 15.4px; } .notification .notification-content .body3 { line-height: 15.4px; font-size: 13px; margin-bottom: 0; } .notification.success-loud{ background: var(--success-loud); color: var(--white); } .notification.success-loud a, .notification.success-loud a:hover, .notification.success-loud a:focus, .notification.success-loud a:active { color: var(--white); font-weight: 700; text-decoration: underline; } .notification a:hover { opacity: 0.8; font-weight: 600 !important; text-decoration: none !important; } .notification a:focus { opacity: 0.8; font-weight: 700 !important; text-decoration: none !important; } .notification a:active { opacity: 0.5; font-weight: 600 !important; text-decoration: none !important; } .notification.success-loud svg path { fill: var(--white); } .notification.success-quiet, .notification-success{ background: var(--success-quiet); color: var(--success); } .notification.success-quiet a, .notification-success a, .notification.success-quiet a:hover, .notification-success a:hover, .notification.success-quiet a:active, .notification-success a:active, .notification.success-quiet a:focus, .notification-success a:focus{ color: var(--success); font-weight: 700; text-decoration: underline; } .notification.success-quiet svg path, .notification-success svg path{ fill: var(--success); } .notification.neutral-loud{ background: var(--primary); color: var(--white); } .notification.neutral-loud a, .notification.neutral-loud a:hover, .notification.neutral-loud a:active, .notification.neutral-loud a:focus{ color: var(--white); font-weight: 700; text-decoration: underline; } .notification.neutral-loud svg path{ fill: var(--white); } .notification.neutral-quiet, .notification-information { background: var(--surface-light-3); color: var(--primary); } .notification.neutral-quiet a, .notification-information a, .notification.neutral-quiet a:hover, .notification-information a:hover, .notification.neutral-quiet a:focus, .notification-information a:focus, .notification.neutral-quiet a:active, .notification-information a:active{ color: var(--primary); font-weight: 700; text-decoration: underline; } .notification.neutral-quiet svg path, .notification-information svg path{ fill: var(--primary); } .notification.neutral-quiet.document svg path, .notification-information.document svg path{ fill: unset; } .notification.failed-loud, .validation-summary-errors { background: var(--error-loud); color: var(--white); } .notification.failed-loud a, .validation-summary-errors a, .notification.failed-loud a:hover, .validation-summary-errors a:hover, .notification.failed-loud a:active, .validation-summary-errors a:active, .notification.failed-loud a:focus, .validation-summary-errors a:focus{ color: var(--white); font-weight: 700; text-decoration: underline; } .validation-summary-errors:before{ content:url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 11.4L12.9 14.3C13.0833 14.4833 13.3167 14.575 13.6 14.575C13.8833 14.575 14.1167 14.4833 14.3 14.3C14.4833 14.1167 14.575 13.8833 14.575 13.6C14.575 13.3167 14.4833 13.0833 14.3 12.9L11.4 10L14.3 7.1C14.4833 6.91667 14.575 6.68333 14.575 6.4C14.575 6.11667 14.4833 5.88333 14.3 5.7C14.1167 5.51667 13.8833 5.425 13.6 5.425C13.3167 5.425 13.0833 5.51667 12.9 5.7L10 8.6L7.1 5.7C6.91667 5.51667 6.68333 5.425 6.4 5.425C6.11667 5.425 5.88333 5.51667 5.7 5.7C5.51667 5.88333 5.425 6.11667 5.425 6.4C5.425 6.68333 5.51667 6.91667 5.7 7.1L8.6 10L5.7 12.9C5.51667 13.0833 5.425 13.3167 5.425 13.6C5.425 13.8833 5.51667 14.1167 5.7 14.3C5.88333 14.4833 6.11667 14.575 6.4 14.575C6.68333 14.575 6.91667 14.4833 7.1 14.3L10 11.4ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20Z' fill='white'/%3E%3C/svg%3E%0A"); background-color: unset; height: 20px; width: 20px; margin-right: 10px; } .validation-summary-errors ul{ list-style: none; } .validation-summary-errors ul li{ color: var(--white); } .notification.failed-loud svg path{ fill: var(--white); } .notification.failed-quiet, .notification-danger{ background: var(--error-quiet); color: var(--error); } .notification.failed-quiet a, .notification-danger a, .notification.failed-quiet a:hover, .notification-danger a:hover, .notification.failed-quiet a:active, .notification-danger a:active, .notification.failed-quiet a:focus, .notification-danger a:focus{ color: var(--error); font-weight: 700; text-decoration: underline; } .notification.failed-quiet svg path{ fill: var(--error); } .notification.outstanding-loud, .validation-summary-warnings { background: var(--warning-loud); color: var(--warning); } .notification.outstanding-loud a, .validation-summary-warnings a, .notification.outstanding-loud a:hover, .validation-summary-warnings a:hover, .notification.outstanding-loud a:focus, .validation-summary-warnings a:focus, .notification.outstanding-loud a:active, .validation-summary-warnings a:active{ color: var(--warning); font-weight: 700; text-decoration: underline; } .validation-summary-warnings:before { content: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 15.0649C10.2833 15.0649 10.5208 14.9691 10.7125 14.7774C10.9042 14.5858 11 14.3483 11 14.0649C11 13.7816 10.9042 13.5441 10.7125 13.3524C10.5208 13.1608 10.2833 13.0649 10 13.0649C9.71667 13.0649 9.47917 13.1608 9.2875 13.3524C9.09583 13.5441 9 13.7816 9 14.0649C9 14.3483 9.09583 14.5858 9.2875 14.7774C9.47917 14.9691 9.71667 15.0649 10 15.0649ZM10 11.0649C10.2833 11.0649 10.5208 10.9691 10.7125 10.7774C10.9042 10.5858 11 10.3483 11 10.0649V6.06494C11 5.78161 10.9042 5.54411 10.7125 5.35244C10.5208 5.16077 10.2833 5.06494 10 5.06494C9.71667 5.06494 9.47917 5.16077 9.2875 5.35244C9.09583 5.54411 9 5.78161 9 6.06494V10.0649C9 10.3483 9.09583 10.5858 9.2875 10.7774C9.47917 10.9691 9.71667 11.0649 10 11.0649ZM10 20.0649C8.61667 20.0649 7.31667 19.8024 6.1 19.2774C4.88333 18.7524 3.825 18.0399 2.925 17.1399C2.025 16.2399 1.3125 15.1816 0.7875 13.9649C0.2625 12.7483 0 11.4483 0 10.0649C0 8.68161 0.2625 7.38161 0.7875 6.16494C1.3125 4.94827 2.025 3.88994 2.925 2.98994C3.825 2.08994 4.88333 1.37744 6.1 0.852441C7.31667 0.327441 8.61667 0.0649414 10 0.0649414C11.3833 0.0649414 12.6833 0.327441 13.9 0.852441C15.1167 1.37744 16.175 2.08994 17.075 2.98994C17.975 3.88994 18.6875 4.94827 19.2125 6.16494C19.7375 7.38161 20 8.68161 20 10.0649C20 11.4483 19.7375 12.7483 19.2125 13.9649C18.6875 15.1816 17.975 16.2399 17.075 17.1399C16.175 18.0399 15.1167 18.7524 13.9 19.2774C12.6833 19.8024 11.3833 20.0649 10 20.0649Z' fill='%234C2400'/%3E%3C/svg%3E%0A"); background-color: unset; height: 20px; width: 20px; margin-right: 10px; } .notification.outstanding-loud svg path, .notification-danger svg path{ fill: var(--warning); } .notification.outstanding-quiet, .notification-warning { background: var(--warning-quiet); color: var(--warning); } .notification.outstanding-quiet a, .notification-warning a .notification.outstanding-quiet a:hover, .notification-warning a:hover, .notification.outstanding-quiet a:focus, .notification-warning a:focus, .notification.outstanding-quiet a:active, .notification-warning a:active{ color: var(--warning); font-weight: 700; text-decoration: underline; } .notification.outstanding-quiet svg path, .notification-warning svg path{ fill: var(--warning); } /* Figma "System Buttons" Size=Small, Style=Outlined, State=Warning — e.g. the arrears banner's "View Payment Options". Scoped under .notification to beat the banner link rules (bold + underline, and the hover/focus/active opacity that greyed the text and border out once tapped on a phone). */ .notification a.button.warning-outlined, .notification a.button.warning-outlined:hover, .notification a.button.warning-outlined:focus, .notification a.button.warning-outlined:active { color: var(--warning); border: 1px solid var(--warning); border-radius: 8px; background-color: transparent; font-size: 13px; font-weight: 600 !important; line-height: 1.2; text-decoration: none !important; opacity: 1; margin: 0; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05), 0 4px 6px rgba(0, 0, 0, 0.1); } /* Pressed: a light warning state layer instead of fading the button. */ .notification a.button.warning-outlined:hover, .notification a.button.warning-outlined:active { background-color: rgba(76, 36, 0, 0.08); } .notification.processing-loud{ background: var(--informative-loud); color: var(--white); } .notification.processing-loud a, .notification.processing-loud a:hover, .notification.processing-loud a:active, .notification.processing-loud a:focus{ color: var(--white); font-weight: 700; text-decoration: underline; } .notification.processing-loud svg path{ fill: var(--white); } .notification.processing-quiet { background: var(--informative-quiet); color: var(--primary-10); } .notification.processing-quiet a, .notification.processing-quiet a:hover, .notification.processing-quiet a:active, .notification.processing-quiet a:focus{ color: var(--primary-10); font-weight: 700; text-decoration: underline; } .notification.processing-quiet.border { border: 1px solid var(--informative-quiet); } .notification.processing-quiet.border .action-icon svg path{ fill: var(--informative-quiet); } .notification.processing-quiet svg path{ fill: var(--primary-10); } .notification-debug { background-color: var(--insurance-quiet); color: var(--insurance); } .notification-debug a, .notification-debug a:hover, .notification-debug a:active, .notification-debug a:focus{ color: var(--insurance); font-weight: 700; text-decoration: underline; } .notification-debug svg path{ fill: var(--insurance); } .notification.notification-primary{ background: white; color: var(--primary); border: 1px solid var(--primary); } .notification.notification-primary { color: var(--primary); font-weight: 700; text-decoration: none; } .notification.notification-primary svg path{ fill: var(--primary); } .notification.notification-primary .action-icon svg rect{ fill: var(--primary); } .notification.notification-primary .action-icon svg path{ fill: var(--white); } .notification .buttons-row { display: flex; flex-wrap: wrap; margin-top: 8px; } .notification .buttons-row .button { display: inline-flex; justify-content: center; align-items: center; min-width: 102px; height: 32px; border-radius: 8px; font-size: 13px; font-style: normal; font-weight: 600; line-height: 120%; margin: 0 8px 8px 0; } .notification .buttons-row .button.hollow { background-color: transparent; } .product-card { border-radius: 16px; margin-bottom: 20px; width: 100%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10); } .product-card.product-card-loans .card-header{ background: var(--loans); } .product-card.product-card-mobi-money .card-header{ background: var(--mobimoney); } .product-card.product-card-insurance .card-header{ background: var(--insurance); } .product-card .card-header { padding: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; color: var(--white); } .product-card .card-header h6 { margin-top: 0px; margin-bottom: 2px; color: var(--white); } .product-card.product-card-mobi-money .card-header h6, .product-card.product-card-mobi-money .card-header div{ color: var(--mobimoney-copy); } .product-card .card-section { padding: 16px; background: var(--white); color: var(--black); border: 1px solid var(--surface-outline-light); border-top: unset; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .product-card .promotion-section { color: white; padding: 16px; text-transform: uppercase; text-align: center; } .product-card.promotion-card .card-section { background: var(--black); color: var(--white); } .product-card.full-color .card-section { background: unset; color: var(--white); } .product-card ul li:last-of-type{ margin-bottom: 0px; } .product-card-loans.full-color .card-section ul li:before { content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23ffffff'/%3E%3Cpath d='M10.5253 13.85L16.1753 8.2C16.3087 8.06667 16.4642 8 16.642 8C16.8198 8 16.9753 8.06667 17.1087 8.2C17.242 8.33333 17.3087 8.49167 17.3087 8.675C17.3087 8.85833 17.242 9.01667 17.1087 9.15L10.992 15.2833C10.8587 15.4167 10.7031 15.4833 10.5253 15.4833C10.3476 15.4833 10.192 15.4167 10.0587 15.2833L7.192 12.4167C7.05867 12.2833 6.99478 12.125 7.00033 11.9417C7.00589 11.7583 7.07533 11.6 7.20867 11.4667C7.342 11.3333 7.50033 11.2667 7.68367 11.2667C7.867 11.2667 8.02533 11.3333 8.15867 11.4667L10.5253 13.85Z' fill='%23009AD2'/%3E%3C/svg%3E%0A"); } .product-card-mobi-money.full-color .card-section ul li:before { content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23ffffff'/%3E%3Cpath d='M10.5253 13.85L16.1753 8.2C16.3087 8.06667 16.4642 8 16.642 8C16.8198 8 16.9753 8.06667 17.1087 8.2C17.242 8.33333 17.3087 8.49167 17.3087 8.675C17.3087 8.85833 17.242 9.01667 17.1087 9.15L10.992 15.2833C10.8587 15.4167 10.7031 15.4833 10.5253 15.4833C10.3476 15.4833 10.192 15.4167 10.0587 15.2833L7.192 12.4167C7.05867 12.2833 6.99478 12.125 7.00033 11.9417C7.00589 11.7583 7.07533 11.6 7.20867 11.4667C7.342 11.3333 7.50033 11.2667 7.68367 11.2667C7.867 11.2667 8.02533 11.3333 8.15867 11.4667L10.5253 13.85Z' fill='%2381B132'/%3E%3C/svg%3E%0A"); } .product-card-insurance.full-color .card-section ul li:before { content: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='24' height='24' rx='12' fill='%23ffffff'/%3E%3Cpath d='M10.5253 13.85L16.1753 8.2C16.3087 8.06667 16.4642 8 16.642 8C16.8198 8 16.9753 8.06667 17.1087 8.2C17.242 8.33333 17.3087 8.49167 17.3087 8.675C17.3087 8.85833 17.242 9.01667 17.1087 9.15L10.992 15.2833C10.8587 15.4167 10.7031 15.4833 10.5253 15.4833C10.3476 15.4833 10.192 15.4167 10.0587 15.2833L7.192 12.4167C7.05867 12.2833 6.99478 12.125 7.00033 11.9417C7.00589 11.7583 7.07533 11.6 7.20867 11.4667C7.342 11.3333 7.50033 11.2667 7.68367 11.2667C7.867 11.2667 8.02533 11.3333 8.15867 11.4667L10.5253 13.85Z' fill='%23BE0095'/%3E%3C/svg%3E%0A"); }