/* Minification failed. Returning unminified contents. (42,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (47,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (51,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (82,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (91,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (95,23): run-time error CSS1039: Token not allowed after unary operator: '-body-font' (95,41): run-time error CSS1039: Token not allowed after unary operator: '-body-fallback-font' (96,21): run-time error CSS1039: Token not allowed after unary operator: '-text-standard' (99,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (106,36): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (111,23): run-time error CSS1039: Token not allowed after unary operator: '-headline-font' (111,45): run-time error CSS1039: Token not allowed after unary operator: '-headline-fallback-font' (112,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (116,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-1' (120,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-2' (124,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-3' (128,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-4' (132,19): run-time error CSS1039: Token not allowed after unary operator: '-input-padding' (137,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (141,21): run-time error CSS1039: Token not allowed after unary operator: '-text-standard' (145,29): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (152,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (157,19): run-time error CSS1039: Token not allowed after unary operator: '-button-padding' (172,19): run-time error CSS1039: Token not allowed after unary operator: '-button-padding' (181,19): run-time error CSS1039: Token not allowed after unary operator: '-button-padding' (223,10): run-time error CSS1030: Expected identifier, found '#meterReadingOverlay' (223,43): run-time error CSS1031: Expected selector, found ')' (223,43): run-time error CSS1025: Expected comma or open brace, found ')' (244,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (248,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-4' (265,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (266,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (314,35): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (319,25): run-time error CSS1039: Token not allowed after unary operator: '-text-small-2' (320,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (325,21): run-time error CSS1039: Token not allowed after unary operator: '-text-small-2' (330,34): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (397,27): run-time error CSS1039: Token not allowed after unary operator: '-full-screen-height' (397,55): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (401,22): run-time error CSS1039: Token not allowed after unary operator: '-full-screen-height' (442,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (443,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (446,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (447,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (450,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (451,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (454,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (455,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (458,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (459,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (466,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (469,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (472,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (475,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (478,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (484,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (487,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (490,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (493,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (496,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (504,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (505,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (508,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (509,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (512,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (513,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (516,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (517,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (520,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (521,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (528,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (531,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (534,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (537,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (540,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (546,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (549,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (552,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (555,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (558,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (678,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (679,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (682,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (683,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (686,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (687,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (690,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (691,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (694,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (695,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (702,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (705,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (708,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (711,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (714,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (720,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (723,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (726,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (729,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (732,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (740,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (741,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (744,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (745,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (748,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (749,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (752,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (753,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (756,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (757,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (764,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (767,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (770,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (773,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (776,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (782,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (785,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (788,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (791,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (794,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (914,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (915,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (918,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (919,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (922,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (923,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (926,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (927,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (930,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (931,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (938,28): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (941,28): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (944,28): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (947,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (950,28): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (956,29): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (959,29): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (962,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (965,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (968,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (976,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (977,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (980,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (981,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (984,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (985,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (988,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (989,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (992,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (993,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1000,27): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1003,27): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1006,27): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1009,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1012,27): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1018,30): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1021,30): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1024,30): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1027,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1030,30): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1049,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (1062,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (1066,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (1080,23): run-time error CSS1039: Token not allowed after unary operator: '-headline-font' (1080,45): run-time error CSS1039: Token not allowed after unary operator: '-headline-fallback-font' (1083,23): run-time error CSS1039: Token not allowed after unary operator: '-body-font' (1083,41): run-time error CSS1039: Token not allowed after unary operator: '-body-fallback-font' (1088,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (1091,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1094,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (1097,17): run-time error CSS1039: Token not allowed after unary operator: '-secondary-red' (1100,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (1105,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-1' (1108,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-2' (1111,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-3' (1114,21): run-time error CSS1039: Token not allowed after unary operator: '-text-large-4' (1117,21): run-time error CSS1039: Token not allowed after unary operator: '-text-standard' (1120,21): run-time error CSS1039: Token not allowed after unary operator: '-text-small-1' (1123,21): run-time error CSS1039: Token not allowed after unary operator: '-text-small-2' (1155,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1158,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (1161,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (1164,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (1167,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-red' (1172,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1175,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (1178,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (1181,24): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (1184,24): run-time error CSS1039: Token not allowed after unary operator: '-secondary-red' (1279,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-xs' (1282,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-s' (1285,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-m' (1288,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-l' (1291,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-xl' (1307,18): run-time error CSS1039: Token not allowed after unary operator: '-full-screen-height' (1310,23): run-time error CSS1039: Token not allowed after unary operator: '-full-screen-height' (1310,51): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1313,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1316,18): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1319,18): run-time error CSS1039: Token not allowed after unary operator: '-footer-height' (1322,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1325,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1328,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1331,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1334,18): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1337,22): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1340,18): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1343,18): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1346,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1349,18): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1425,17): run-time error CSS1039: Token not allowed after unary operator: '-full-screen-width' (1429,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1432,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1435,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1438,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1441,17): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1444,17): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1447,17): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1450,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1453,17): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1503,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1504,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1507,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1508,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1511,23): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1512,26): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1515,23): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1516,26): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1519,23): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1520,26): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1523,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1524,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1527,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1528,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1531,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1532,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1535,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1536,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1539,23): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1542,23): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1545,23): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1548,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1551,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1557,26): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1560,26): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1563,26): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1566,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1569,26): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1580,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1581,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1584,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1585,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1588,24): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1589,25): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1592,24): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1593,25): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1596,24): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1597,25): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1600,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1601,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1604,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1605,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1608,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1609,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1612,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1613,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1616,24): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1619,24): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1622,24): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1625,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1628,24): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1634,25): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1637,25): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1640,25): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1643,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1646,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1657,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1661,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1665,22): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1669,22): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1673,22): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1677,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1681,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1685,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1689,22): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1697,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (1701,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (1705,25): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1709,25): run-time error CSS1039: Token not allowed after unary operator: '-space-m' (1713,25): run-time error CSS1039: Token not allowed after unary operator: '-space-l' (1717,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-1' (1721,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-2' (1725,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-3' (1729,25): run-time error CSS1039: Token not allowed after unary operator: '-space-xl-4' (1734,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1735,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1736,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1737,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1739,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1740,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1741,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1742,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1743,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1744,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1745,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1747,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1748,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1749,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1750,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1751,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1752,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1753,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1755,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1756,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1757,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1758,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1759,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1760,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1761,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1762,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1763,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1764,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1765,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1766,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1767,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1768,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1769,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1770,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1771,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1773,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1774,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1775,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1776,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1777,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1799,20): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (1803,21): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1803,36): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1803,51): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (1818,15): run-time error CSS1039: Token not allowed after unary operator: '-gap-l' (1841,10): run-time error CSS1030: Expected identifier, found '#menuToggle' (1841,29): run-time error CSS1031: Expected selector, found ')' (1841,29): run-time error CSS1025: Expected comma or open brace, found ')' (1866,28): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1894,22): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1895,26): run-time error CSS1039: Token not allowed after unary operator: '-header-height' (1910,17): run-time error CSS1030: Expected identifier, found '#menuToggle' (1910,36): run-time error CSS1031: Expected selector, found ')' (1910,36): run-time error CSS1025: Expected comma or open brace, found ')' (1918,17): run-time error CSS1030: Expected identifier, found '#menuToggle' (1918,36): run-time error CSS1031: Expected selector, found ')' (1918,36): run-time error CSS1025: Expected comma or open brace, found ')' (1929,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1930,23): run-time error CSS1039: Token not allowed after unary operator: '-body-font' (1930,41): run-time error CSS1039: Token not allowed after unary operator: '-body-fallback-font' (1931,21): run-time error CSS1039: Token not allowed after unary operator: '-text-medium' (1937,32): run-time error CSS1039: Token not allowed after unary operator: '-primary-green' (1938,21): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' (2023,23): run-time error CSS1039: Token not allowed after unary operator: '-headline-font' (2023,45): run-time error CSS1039: Token not allowed after unary operator: '-headline-fallback-font' (2028,35): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (2043,17): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (2047,28): run-time error CSS1039: Token not allowed after unary operator: '-secondary-green' (2053,28): run-time error CSS1039: Token not allowed after unary operator: '-tertiary-grey' (2060,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (2061,23): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (2067,25): run-time error CSS1039: Token not allowed after unary operator: '-text-large-4' (2075,25): run-time error CSS1039: Token not allowed after unary operator: '-text-large-4' (2081,23): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (2083,27): run-time error CSS1039: Token not allowed after unary operator: '-headline-font' (2083,49): run-time error CSS1039: Token not allowed after unary operator: '-headline-fallback-font' (2084,29): run-time error CSS1039: Token not allowed after unary operator: '-space-s' (2091,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (2092,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-1' (2098,25): run-time error CSS1039: Token not allowed after unary operator: '-text-standard' (2106,25): run-time error CSS1039: Token not allowed after unary operator: '-text-standard' (2113,29): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (2114,23): run-time error CSS1039: Token not allowed after unary operator: '-space-xs-2' (2120,25): run-time error CSS1039: Token not allowed after unary operator: '-text-small-2' (2128,25): run-time error CSS1039: Token not allowed after unary operator: '-text-small-2' (2159,22): run-time error CSS1039: Token not allowed after unary operator: '-primary-orange' (2182,25): run-time error CSS1039: Token not allowed after unary operator: '-secondary-grey' */ /* Clear out the browser default behaviour */ :root { font-size: 10px; } *, *::before, *::after { box-sizing: border-box; } html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td, header, footer, aside, nav, article, figure, figcaption { margin: 0; padding: 0; } fieldset, img { border: 0; } address, caption, cite, code, dfn, em, strong, th, var { font-style: normal; font-weight: 400; } ul { list-style: none; padding-left: 5rem; } li { padding-top: 1.6rem; } ul > li > ul { list-style: circle; margin-left: 4rem; margin-bottom: 1rem; } table { border: 3px solid var(--secondary-grey); border-collapse: collapse; } th { border: 3px solid var(--secondary-grey); } td { border: 1px solid var(--secondary-grey); } td, th { padding-top: 0; padding-bottom: 0; padding-right: 1%; padding-left: 1%; text-align: start; vertical-align: top; } caption, th { text-align: left; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 400; } q:before, q:after { content: ''; } abbr, acronym { border: 0; } a, input, button { text-decoration: none; color: var(--primary-green); } a:active, a:focus { outline: none; } /* Add our own global base styles */ html { background-color: var(--primary-green); } body { font-family: var(--body-font), var(--body-fallback-font); font-size: var(--text-standard); font-weight: 400; line-height: 1.4; color: var(--primary-green); display: flex; flex-direction: column; flex-wrap: nowrap; } main { xmin-height: calc(100vh - var(--header-height)); } h1, h2, h3, h4, h5, h6 { line-height: 1.1; font-family: var(--headline-font), var(--headline-fallback-font); color: var(--primary-green); } h1 { font-size: var(--text-large-1); } h2 { font-size: var(--text-large-2); } h3 { font-size: var(--text-large-3); } h4 { font-size: var(--text-large-4); } input { padding: var(--input-padding); font-weight: bold; outline: none; border: none; background-image: none; background-color: var(--secondary-grey); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; font-size: var(--text-standard); } input:not([type="radio"]):not([type="checkbox"]):focus { outline: 5px solid var(--primary-orange); } input[type="radio"], input[type="checkbox"] { height: 2.5rem; width: 2.5rem; accent-color: var(--primary-orange); align-self: center; } button { padding: var(--button-padding); font-weight: bold; } embed, iframe, img, object, video { max-width: 100%; } /* Buttons */ .button { border: 0; border-radius: 5px; display: flex; justify-content: center; align-items: center; padding: var(--button-padding); } .input { border: 0; border-radius: 5px; display: flex; justify-content: center; align-items: center; padding: var(--button-padding); } #overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); z-index: 1; overflow: hidden; overflow-y: auto; } #modal { zposition: absolute; ztop: 20vh; zleft: 20vw; zheight: 60vh; zwidth: 60vw; zz-index: 2; } #meterReadingOverlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); overflow-y: scroll; z-index: 1; padding-bottom: 5vh; } html:has(#meterReadingOverlay:not(.hidden)) { overflow: hidden; } .tils { display: flex; flex-flow: row wrap; } .tils-column { position: relative; min-width: 250px; margin: 0 0.6rem; flex: 1; } .input-group { display: table; border-collapse: collapse; } .currency-input-symbol { background-color: var(--secondary-grey); display: table-cell; text-align: center; vertical-align: middle; font-size: var(--text-large-4); } #iPaymentAmount { display: table-cell; border-collapse: collapse; height: 100%; } .orange-line-background { background-image: url("../../Images/Icons/orange-line-background.webp"); background-size: contain; background-repeat: no-repeat; background-position: 5% 0; } .portalActive { background-color: var(--primary-orange)!important; color: var(--secondary-grey)!important; } .portal-link { height: 7rem; } @media (min-width: 1024.1px) { .hero-heart-background { background-image: url("../../Images/Home/Heart Icon Hero Image.webp"); background-size: 50% 100%; background-repeat: no-repeat; background-position: right; } } .footer-content-bottom-right-top { background-image: url("../../Images/Footer/HeartIconFooterImage_top.webp"); background-size: 100%; background-repeat: no-repeat; background-position: bottom; margin-top: 12px; } .footer-content-bottom-right-top > div { padding-top: 100px; position: relative; bottom: 12px; } .footer-content-bottom-right-bottom { background-image: url("../../Images/Footer/HeartIconFooterImage_bottom.webp"); background-size: 100%; background-repeat: no-repeat; background-position: top; margin-bottom: 24px; } .footer-content-bottom-right-bottom > div { position: relative; top: 24px; } @media (max-width: 1024px) { .hero-heart-background { background-image: none; } } .tariffInformationPopupTable, .tariffInformationPopupTable tr, .tariffInformationPopupTable td, .tariffInformationPopupTable th { border: none !important; border-bottom: 2px solid var(--secondary-grey)!important; padding-top: 3px; } .tariffInformationPopupTable th { font-size: var(--text-small-2); background-color: var(--primary-orange); vertical-align: middle; } .tariffInformationPopupTable td { font-size: var(--text-small-2); vertical-align: middle; } .tariffInformationPopupTable tr td:first-child { border-right: 2px solid var(--secondary-grey)!important; } /* Desktop */ @media (min-width: 1024.1px) { /* Base Font - scales everything that uses EM */ :root { font-size: 10px !important; } /* Hide*/ .u-hide-desktop { display: none !important; } /* Flexbox Center */ .u-flex-center-desktop { justify-content: center !important; } /* Text Center */ .u-text-align-center-desktop { text-align: center; } /* Desktop Specific Width */ .u-width-100-desktop { width: 100% !important; } .u-width-90-desktop { width: 90% !important; } .u-width-80-desktop { width: 80% !important; } .u-width-70-desktop { width: 70% !important; } .u-width-66-desktop { width: calc(100% / 1.5) !important; } .u-width-60-desktop { width: 60% !important; } .u-width-50-desktop { width: 50% !important; } .u-width-45-desktop { width: 45% !important; } .u-width-40-desktop { width: 40% !important; } .u-width-33-desktop { width: calc(100% / 3) !important; } .u-width-30-desktop { width: 30% !important; } .u-width-20-desktop { width: 20% !important; } .u-width-10-desktop { width: 10% !important; } /* Desktop-Specific Height */ .u-height-full-screen-adjust-header-desktop { height: calc(var(--full-screen-height) - var(--header-height)); } .u-height-full-screen-desktop { height: var(--full-screen-height); } .u-height-100-desktop { height: 100%; } .u-height-90-desktop { height: 90%; } .u-height-80-desktop { height: 80%; } .u-height-70-desktop { height: 70%; } .u-height-66-desktop { height: calc(100% / 1.5); } .u-height-60-desktop { height: 60%; } .u-height-50-desktop { height: 50%; } .u-height-40-desktop { height: 40%; } .u-height-33-desktop { height: calc(100% / 3) } .u-height-30-desktop { height: 30%; } .u-height-20-desktop { height: 20%; } .u-height-10-desktop { height: 10%; } /* Desktop Specific Padding */ .u-padding-horizontal-l-desktop { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; } .u-padding-horizontal-m-desktop { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; } .u-padding-horizontal-s-desktop { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; } .u-padding-horizontal-xs-1-desktop { padding-left: var(--space-xs-1) !important; padding-right: var(--space-xs-1) !important; } .u-padding-horizontal-xs-2-desktop { padding-left: var(--space-xs-2) !important; padding-right: var(--space-xs-2) !important; } .u-padding-horizontal-0-desktop { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-left-l-desktop { padding-left: var(--space-l) !important; } .u-padding-left-m-desktop { padding-left: var(--space-m) !important; } .u-padding-left-s-desktop { padding-left: var(--space-s) !important; } .u-padding-left-xs-1-desktop { padding-left: var(--space-xs-1) !important; } .u-padding-left-xs-2-desktop { padding-left: var(--space-xs-2) !important; } .u-padding-left-0-desktop { padding-left: 0 !important; } .u-padding-right-l-desktop { padding-right: var(--space-l) !important; } .u-padding-right-m-desktop { padding-right: var(--space-m) !important; } .u-padding-right-s-desktop { padding-right: var(--space-s) !important; } .u-padding-right-xs-1-desktop { padding-right: var(--space-xs-1) !important; } .u-padding-right-xs-2-desktop { padding-right: var(--space-xs-2) !important; } .u-padding-right-0-desktop { padding-right: 0 !important; } /* Desktop Specific Vertical Padding */ .u-padding-vertical-l-desktop { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } .u-padding-vertical-m-desktop { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; } .u-padding-vertical-s-desktop { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; } .u-padding-vertical-xs-1-desktop { padding-top: var(--space-xs-1) !important; padding-bottom: var(--space-xs-1) !important; } .u-padding-vertical-xs-2-desktop { padding-top: var(--space-xs-2) !important; padding-bottom: var(--space-xs-2) !important; } .u-padding-vertical-0-desktop { padding-top: 0 !important; padding-bottom: 0 !important; } .u-padding-top-l-desktop { padding-top: var(--space-l) !important; } .u-padding-top-m-desktop { padding-top: var(--space-m) !important; } .u-padding-top-s-desktop { padding-top: var(--space-s) !important; } .u-padding-top-xs-1-desktop { padding-top: var(--space-xs-1) !important; } .u-padding-top-xs-2-desktop { padding-top: var(--space-xs-2) !important; } .u-padding-top-0-desktop { padding-top: 0 !important; } .u-padding-bottom-l-desktop { padding-bottom: var(--space-l) !important; } .u-padding-bottom-m-desktop { padding-bottom: var(--space-m) !important; } .u-padding-bottom-s-desktop { padding-bottom: var(--space-s) !important; } .u-padding-bottom-xs-1-desktop { padding-bottom: var(--space-xs-1) !important; } .u-padding-bottom-xs-2-desktop { padding-bottom: var(--space-xs-2) !important; } .u-padding-bottom-0-desktop { padding-bottom: 0 !important; } #modal, #meterReadingModal { position: relative; width: 900px; margin: 30px auto; } } /* Tablets */ @media (min-width: 650.01px) and (max-width: 1024px) { /* Base Font - scales everything that uses EM */ :root { font-size: 8px !important; } /* Hide*/ .u-hide-tablet { display: none !important; } /* Flexbox Center */ .u-flex-center-tablet { justify-content: center !important; } /* Text Center */ .u-text-align-center-tablet { text-align: center; } /* Tablet Specific Width */ .u-width-100-tablet { width: 100% !important; } .u-width-90-tablet { width: 90% !important; } .u-width-80-tablet { width: 80% !important; } .u-width-70-tablet { width: 70% !important; } .u-width-66-tablet { width: calc(100% / 1.5) !important; } .u-width-60-tablet { width: 60% !important; } .u-width-50-tablet { width: 50% !important; } .u-width-45-tablet { width: 45% !important; } .u-width-40-tablet { width: 40% !important; } .u-width-33-tablet { width: calc(100% / 3) !important; } .u-width-30-tablet { width: 30% !important; } .u-width-20-tablet { width: 20% !important; } .u-width-10-tablet { width: 10% !important; } /* Tablet-Specific Height */ .u-height-unfixed-tablet { height: unset!important; } .u-height-100-tablet { height: 100%; } .u-height-90-tablet { height: 90%; } .u-height-80-tablet { height: 80%; } .u-height-70-tablet { height: 70%; } .u-height-66-tablet { height: calc(100% / 1.5); } .u-height-60-tablet { height: 60%; } .u-height-50-tablet { height: 50%; } .u-height-40-tablet { height: 40%; } .u-height-33-tablet { height: calc(100% / 3) } .u-height-30-tablet { height: 30%; } .u-height-20-tablet { height: 20%; } .u-height-10-tablet { height: 10%; } /* Tablet Specific Padding */ .u-padding-horizontal-l-tablet { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; } .u-padding-horizontal-m-tablet { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; } .u-padding-horizontal-s-tablet { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; } .u-padding-horizontal-xs-1-tablet { padding-left: var(--space-xs-1) !important; padding-right: var(--space-xs-1) !important; } .u-padding-horizontal-xs-2-tablet { padding-left: var(--space-xs-2) !important; padding-right: var(--space-xs-2) !important; } .u-padding-horizontal-0-tablet { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-left-l-tablet { padding-left: var(--space-l) !important; } .u-padding-left-m-tablet { padding-left: var(--space-m) !important; } .u-padding-left-s-tablet { padding-left: var(--space-s) !important; } .u-padding-left-xs-1-tablet { padding-left: var(--space-xs-1) !important; } .u-padding-left-xs-2-tablet { padding-left: var(--space-xs-2) !important; } .u-padding-left-0-tablet { padding-left: 0 !important; } .u-padding-right-l-tablet { padding-right: var(--space-l) !important; } .u-padding-right-m-tablet { padding-right: var(--space-m) !important; } .u-padding-right-s-tablet { padding-right: var(--space-s) !important; } .u-padding-right-xs-1-tablet { padding-right: var(--space-xs-1) !important; } .u-padding-right-xs-2-tablet { padding-right: var(--space-xs-2) !important; } .u-padding-right-0-tablet { padding-right: 0 !important; } /* Tablet Specific Vertical Padding */ .u-padding-vertical-l-tablet { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } .u-padding-vertical-m-tablet { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; } .u-padding-vertical-s-tablet { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; } .u-padding-vertical-xs-1-tablet { padding-top: var(--space-xs-1) !important; padding-bottom: var(--space-xs-1) !important; } .u-padding-vertical-xs-2-tablet { padding-top: var(--space-xs-2) !important; padding-bottom: var(--space-xs-2) !important; } .u-padding-vertical-0-tablet { padding-top: 0 !important; padding-bottom: 0 !important; } .u-padding-top-l-tablet { padding-top: var(--space-l) !important; } .u-padding-top-m-tablet { padding-top: var(--space-m) !important; } .u-padding-top-s-tablet { padding-top: var(--space-s) !important; } .u-padding-top-xs-1-tablet { padding-top: var(--space-xs-1) !important; } .u-padding-top-xs-2-tablet { padding-top: var(--space-xs-2) !important; } .u-padding-top-0-tablet { padding-top: 0 !important; } .u-padding-bottom-l-tablet { padding-bottom: var(--space-l) !important; } .u-padding-bottom-m-tablet { padding-bottom: var(--space-m) !important; } .u-padding-bottom-s-tablet { padding-bottom: var(--space-s) !important; } .u-padding-bottom-xs-1-tablet { padding-bottom: var(--space-xs-1) !important; } .u-padding-bottom-xs-2-tablet { padding-bottom: var(--space-xs-2) !important; } .u-padding-bottom-0-tablet { padding-bottom: 0 !important; } #modal, #meterReadingModal { position: relative; width: 600px; margin: 30px auto; } } /* Phones */ @media (max-width: 650px) { /* Base Font - scales everything that uses EM */ :root { font-size: 7px!important; } /* Hide */ .u-hide-mobile { display: none!important; } /* Center (if flexbox) */ .u-flex-center-mobile { justify-content: center!important; } /* Text Center */ .u-text-align-center-mobile { text-align: center; } /* Mobile-Specific Widths */ .u-width-100-mobile { width: 100%!important; } .u-width-90-mobile { width: 90%!important; } .u-width-80-mobile { width: 80%!important; } .u-width-70-mobile { width: 70%!important; } .u-width-66-mobile { width: calc(100% / 1.5)!important; } .u-width-60-mobile { width: 60%!important; } .u-width-50-mobile { width: 50%!important; } .u-width-45-mobile { width: 45% !important; } .u-width-40-mobile { width: 40%!important; } .u-width-33-mobile { width: calc(100% / 3)!important; } .u-width-30-mobile { width: 30%!important; } .u-width-20-mobile { width: 20%!important; } .u-width-10-mobile { width: 10%!important; } /* Mobile-Specific Height */ .u-height-unfixed-mobile { height: unset!important; } .u-height-100-mobile { height: 100%; } .u-height-90-mobile { height: 90%; } .u-height-80-mobile { height: 80%; } .u-height-70-mobile { height: 70%; } .u-height-66-mobile { height: calc(100% / 1.5); } .u-height-60-mobile { height: 60%; } .u-height-50-mobile { height: 50%; } .u-height-40-mobile { height: 40%; } .u-height-33-mobile { height: calc(100% / 3) } .u-height-30-mobile { height: 30%; } .u-height-20-mobile { height: 20%; } .u-height-10-mobile { height: 10%; } /* Mobile Specific Padding */ .u-padding-horizontal-l-mobile { padding-left: var(--space-l) !important; padding-right: var(--space-l) !important; } .u-padding-horizontal-m-mobile { padding-left: var(--space-m) !important; padding-right: var(--space-m) !important; } .u-padding-horizontal-s-mobile { padding-left: var(--space-s) !important; padding-right: var(--space-s) !important; } .u-padding-horizontal-xs-1-mobile { padding-left: var(--space-xs-1) !important; padding-right: var(--space-xs-1) !important; } .u-padding-horizontal-xs-2-mobile { padding-left: var(--space-xs-2) !important; padding-right: var(--space-xs-2) !important; } .u-padding-horizontal-0-mobile { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-left-l-mobile { padding-left: var(--space-l) !important; } .u-padding-left-m-mobile { padding-left: var(--space-m) !important; } .u-padding-left-s-mobile { padding-left: var(--space-s) !important; } .u-padding-left-xs-1-mobile { padding-left: var(--space-xs-1) !important; } .u-padding-left-xs-2-mobile { padding-left: var(--space-xs-2) !important; } .u-padding-left-0-mobile { padding-left: 0 !important; } .u-padding-right-l-mobile { padding-right: var(--space-l) !important; } .u-padding-right-m-mobile { padding-right: var(--space-m) !important; } .u-padding-right-s-mobile { padding-right: var(--space-s) !important; } .u-padding-right-xs-1-mobile { padding-right: var(--space-xs-1) !important; } .u-padding-right-xs-2-mobile { padding-right: var(--space-xs-2) !important; } .u-padding-right-0-mobile { padding-right: 0 !important; } /* Mobile Specific Vertical Padding */ .u-padding-vertical-l-mobile { padding-top: var(--space-l) !important; padding-bottom: var(--space-l) !important; } .u-padding-vertical-m-mobile { padding-top: var(--space-m) !important; padding-bottom: var(--space-m) !important; } .u-padding-vertical-s-mobile { padding-top: var(--space-s) !important; padding-bottom: var(--space-s) !important; } .u-padding-vertical-xs-1-mobile { padding-top: var(--space-xs-1) !important; padding-bottom: var(--space-xs-1) !important; } .u-padding-vertical-xs-2-mobile { padding-top: var(--space-xs-2) !important; padding-bottom: var(--space-xs-2) !important; } .u-padding-vertical-0-mobile { padding-top: 0 !important; padding-bottom: 0 !important; } .u-padding-top-l-mobile { padding-top: var(--space-l) !important; } .u-padding-top-m-mobile { padding-top: var(--space-m) !important; } .u-padding-top-s-mobile { padding-top: var(--space-s) !important; } .u-padding-top-xs-1-mobile { padding-top: var(--space-xs-1) !important; } .u-padding-top-xs-2-mobile { padding-top: var(--space-xs-2) !important; } .u-padding-top-0-mobile { padding-top: 0 !important; } .u-padding-bottom-l-mobile { padding-bottom: var(--space-l) !important; } .u-padding-bottom-m-mobile { padding-bottom: var(--space-m) !important; } .u-padding-bottom-s-mobile { padding-bottom: var(--space-s) !important; } .u-padding-bottom-xs-1-mobile { padding-bottom: var(--space-xs-1) !important; } .u-padding-bottom-xs-2-mobile { padding-bottom: var(--space-xs-2) !important; } .u-padding-bottom-0-mobile { padding-bottom: 0 !important; } #modal, #meterReadingModal { position: relative; width: auto; margin: 10px; } } a:hover { text-decoration: underline; } button:hover, .button:hover, .hoverAction:hover { background-color: var(--secondary-green); cursor: pointer; } .button > a:hover, a.button:hover { text-decoration: none; } .hidden { display: none; } .meter-reading-fuel-selector.active { background-color: var(--primary-orange); } .meter-reading-fuel-selector:not(.active) { background-color: var(--secondary-green); } #elecReadingsSection:not(.active) { display: none; } #gasReadingsSection:not(.active) { display: none; } /* All Utility classes should have the 'u-' prefix + can use , as they are designed not to clash with each other while overriding the default behaviour */ /* Font Family */ .u-font-headline { font-family: var(--headline-font), var(--headline-fallback-font); } .u-font-body { font-family: var(--body-font), var(--body-fallback-font); } /* Font Color */ .u-text-color-white { color: var(--secondary-grey) ; } .u-text-color-green { color: var(--primary-green); } .u-text-color-mint-green { color: var(--secondary-green); } .u-text-color-red { color: var(--secondary-red); } .u-text-color-orange { color: var(--primary-orange); } /* Font Size */ .u-text-size-large-1 { font-size: var(--text-large-1); } .u-text-size-large-2 { font-size: var(--text-large-2); } .u-text-size-large-3 { font-size: var(--text-large-3); } .u-text-size-large-4 { font-size: var(--text-large-4); } .u-text-size-standard { font-size: var(--text-standard); } .u-text-size-small-1 { font-size: var(--text-small-1); } .u-text-size-small-2 { font-size: var(--text-small-2); } /* Font Bold */ .u-font-weight-bold { font-weight: bold; } .u-font-weight-standard { font-weight: normal; } /* Font Style */ .u-font-style-normal { font-style: normal; } .u-font-style-italic { font-style: italic; } /* Text Alignment */ .u-text-align-center { text-align: center; } .u-text-align-left { text-align: left; } .u-text-align-right { text-align: right; } /* Background Color */ .u-background-color-green { background-color: var(--primary-green); } .u-background-color-light-green { background-color: var(--secondary-green); } .u-background-color-grey { background-color: var(--secondary-grey); } .u-background-color-orange { background-color: var(--primary-orange); } .u-background-color-red { background-color: var(--secondary-red); } /* Border */ .u-border-color-green { border-color: var(--primary-green); } .u-border-color-light-green { border-color: var(--secondary-green); } .u-border-color-grey { border-color: var(--secondary-grey); } .u-border-color-orange { border-color: var(--primary-orange); } .u-border-color-red { border-color: var(--secondary-red); } .u-border-width-l { border-width: 0.5em; border-style: solid; } .u-border-width-m { border-width: 0.25rem; border-style: solid; } .u-border-width-s { border-width: 0.1rem; border-style: solid; } /* List Styles */ .u-list-style-none { list-style: none; } .u-list-style-circle { list-style: circle; } /* Images */ .u-constrain-image-scale-down { max-height: 100%; object-fit: scale-down; } .u-constrain-image-cover { max-height: 100%; object-fit: cover; } .u-constrain-image-contain { max-height: 100%; object-fit: contain; } /* Flexbox */ .u-flex { display: flex; } .u-flex-inline { display: inline-flex; } .u-flex-wrap { flex-wrap: wrap; } .u-flex-nowrap { flex-wrap: nowrap; } .u-flex-column { flex-direction: column; } .u-flex-column-reverse { flex-direction: column-reverse; } .u-flex-row { flex-direction: row; } .u-flex-row-reverse { flex-direction: row-reverse; } .u-flex-justify-start { justify-content: flex-start; } .u-flex-justify-end { justify-content: flex-end; } .u-flex-justify-center { justify-content: center; } .u-flex-justify-around { justify-content: space-around; } .u-flex-justify-between { justify-content: space-between } .u-flex-justify-evenly { justify-content: space-evenly; } .u-flex-align-start { align-items: flex-start; } .u-flex-align-end { align-items: flex-end; } .u-flex-align-center { align-items: center; } .u-flex-align-stretch { align-items: stretch; } .u-flex-gap-xs { gap: var(--gap-xs); } .u-flex-gap-s { gap: var(--gap-s) ; } .u-flex-gap-m { gap: var(--gap-m) ; } .u-flex-gap-l { gap: var(--gap-l) ; } .u-flex-gap-xl { gap: var(--gap-xl) ; } .u-flex-gap-5 { gap: 5%; } .u-flex-gap-10 { gap: 10%; } .u-flex-grow-0 { flex-grow: 0; } .u-flex-shrink-0 { flex-shrink: 0; } /* Variable-Based Height */ .u-height-full-screen { height: var(--full-screen-height); } .u-height-full-screen-adjust-header { height: calc(var(--full-screen-height) - var(--header-height)); } .u-max-height-xl-4 { max-height: var(--space-xl-4); } .u-height-match-header { height: var(--header-height); } .u-height-match-footer { height: var(--footer-height) ; } .u-height-xl-4 { height: var(--space-xl-4); } .u-height-xl-3 { height: var(--space-xl-3); } .u-height-xl-2 { height: var(--space-xl-2); } .u-height-xl-1 { height: var(--space-xl-1); } .u-height-l { height: var(--space-l); } .u-min-height-m { min-height: var(--space-m); } .u-height-m { height: var(--space-m); } .u-height-s { height: var(--space-s); } .u-height-xs-1 { height: var(--space-xs-1); } .u-height-xs-2 { height: var(--space-xs-2); } /* Percentage-Based Height */ .u-height-100 { height: 100%; } .u-height-90 { height: 90%; } .u-height-80 { height: 80%; } .u-height-70 { height: 70%; } .u-height-66 { height: calc(100% / 1.5); } .u-height-60 { height: 60%; } .u-height-50 { height: 50% ; } .u-height-40 { height: 40% ; } .u-height-33 { height: calc(100% / 3) } .u-height-30 { height: 30% ; } .u-height-20 { height: 20% ; } .u-height-10 { height: 10% ; } /* Max Heights - Percentage Based */ .u-max-height-10 { max-height: 10%; } .u-max-height-20 { max-height: 20%; } .u-max-height-30 { max-height: 30%; } .u-max-height-40 { max-height: 40%; } .u-max-height-50 { max-height: 50%; } .u-max-height-60 { max-height: 60%; } .u-max-height-70 { max-height: 70%; } .u-max-height-80 { max-height: 80%; } .u-max-height-90 { max-height: 90%; } .u-max-height-100 { max-height: 100%; } /* Variable-Based Width */ .u-width-full-screen { width: var(--full-screen-width); max-width: 100%; } .u-width-xl-4 { width: var(--space-xl-4); } .u-width-xl-3 { width: var(--space-xl-3); } .u-width-xl-2 { width: var(--space-xl-2); } .u-width-xl-1 { width: var(--space-xl-1); } .u-width-l { width: var(--space-l); } .u-width-m { width: var(--space-m); } .u-width-s { width: var(--space-s); } .u-width-xs-1 { width: var(--space-xs-1); } .u-width-xs-2 { width: var(--space-xs-2); } /* Percentage-Based Width */ .u-width-100 { width: 100% ; } .u-width-90 { width: 90% ; } .u-width-80 { width: 80% ; } .u-width-70 { width: 70% ; } .u-width-66 { width: calc(100% / 1.5); } .u-width-60 { width: 60% ; } .u-width-50 { width: 50% ; } .u-width-40 { width: 40% ; } .u-width-33 { width: calc(100% / 3); } .u-width-30 { width: 30% ; } .u-width-25 { width: 25%; } .u-width-20 { width: 20%; } .u-width-10 { width: 10% ; } /* Padding */ .u-padding-vertical-0 { padding-top: 0; padding-bottom: 0; } .u-padding-vertical-xs-2 { padding-top: var(--space-xs-2); padding-bottom: var(--space-xs-2); } .u-padding-vertical-xs-1 { padding-top: var(--space-xs-1); padding-bottom: var(--space-xs-1); } .u-padding-vertical-s { padding-top: var(--space-s); padding-bottom: var(--space-s); } .u-padding-vertical-m { padding-top: var(--space-m); padding-bottom: var(--space-m); } .u-padding-vertical-l { padding-top: var(--space-l); padding-bottom: var(--space-l); } .u-padding-vertical-xl-1 { padding-top: var(--space-xl-1); padding-bottom: var(--space-xl-1); } .u-padding-vertical-xl-2 { padding-top: var(--space-xl-2); padding-bottom: var(--space-xl-2); } .u-padding-vertical-xl-3 { padding-top: var(--space-xl-3); padding-bottom: var(--space-xl-3); } .u-padding-vertical-xl-4 { padding-top: var(--space-xl-4); padding-bottom: var(--space-xl-4); } .u-padding-top-l { padding-top: var(--space-l) !important; } .u-padding-top-m { padding-top: var(--space-m) !important; } .u-padding-top-s { padding-top: var(--space-s) !important; } .u-padding-top-xs-1 { padding-top: var(--space-xs-1) !important; } .u-padding-top-xs-2 { padding-top: var(--space-xs-2) !important; } .u-padding-top-0 { padding-top: 0 !important; } .u-padding-bottom-l { padding-bottom: var(--space-l) !important; } .u-padding-bottom-m { padding-bottom: var(--space-m) !important; } .u-padding-bottom-s { padding-bottom: var(--space-s) !important; } .u-padding-bottom-xs-1 { padding-bottom: var(--space-xs-1) !important; } .u-padding-bottom-xs-2 { padding-bottom: var(--space-xs-2) !important; } .u-padding-bottom-0 { padding-bottom: 0 !important; } .u-padding-horizontal-0 { padding-left: 0; padding-right: 0; } .u-padding-horizontal-xs-2 { padding-left: var(--space-xs-2); padding-right: var(--space-xs-2); } .u-padding-horizontal-xs-1 { padding-left: var(--space-xs-1); padding-right: var(--space-xs-1); } .u-padding-horizontal-s { padding-left: var(--space-s); padding-right: var(--space-s); } .u-padding-horizontal-m { padding-left: var(--space-m); padding-right: var(--space-m); } .u-padding-horizontal-l { padding-left: var(--space-l); padding-right: var(--space-l); } .u-padding-horizontal-xl-1 { padding-left: var(--space-xl-1); padding-right: var(--space-xl-1); } .u-padding-horizontal-xl-2 { padding-left: var(--space-xl-2); padding-right: var(--space-xl-2); } .u-padding-horizontal-xl-3 { padding-left: var(--space-xl-3); padding-right: var(--space-xl-3); } .u-padding-horizontal-xl-4 { padding-left: var(--space-xl-4); padding-right: var(--space-xl-4); } .u-padding-left-l { padding-left: var(--space-l) !important; } .u-padding-left-m { padding-left: var(--space-m) !important; } .u-padding-left-s { padding-left: var(--space-s) !important; } .u-padding-left-xs-1 { padding-left: var(--space-xs-1) !important; } .u-padding-left-xs-2 { padding-left: var(--space-xs-2) !important; } .u-padding-left-0 { padding-left: 0 !important; } .u-padding-right-l { padding-right: var(--space-l) !important; } .u-padding-right-m { padding-right: var(--space-m) !important; } .u-padding-right-s { padding-right: var(--space-s) !important; } .u-padding-right-xs-1 { padding-right: var(--space-xs-1) !important; } .u-padding-right-xs-2 { padding-right: var(--space-xs-2) !important; } .u-padding-right-0 { padding-right: 0 !important; } .u-margin-top-0 { margin-top: 0; } .u-margin-top-xs-2 { margin-top: var(--space-xs-2); } .u-margin-top-xs-1 { margin-top: var(--space-xs-1); } .u-margin-top-s { margin-top: var(--space-s); } .u-margin-top-m { margin-top: var(--space-m); } .u-margin-top-l { margin-top: var(--space-l); } .u-margin-top-xl-1 { margin-top: var(--space-xl-1); } .u-margin-top-xl-2 { margin-top: var(--space-xl-2); } .u-margin-top-xl-3 { margin-top: var(--space-xl-3); } .u-margin-top-xl-4 { margin-top: var(--space-xl-4); } .u-margin-bottom-0 { margin-bottom: 0; } .u-margin-bottom-xs-2 { margin-bottom: var(--space-xs-2); } .u-margin-bottom-xs-1 { margin-bottom: var(--space-xs-1); } .u-margin-bottom-s { margin-bottom: var(--space-s); } .u-margin-bottom-m { margin-bottom: var(--space-m); } .u-margin-bottom-l { margin-bottom: var(--space-l); } .u-margin-bottom-xl-1 { margin-bottom: var(--space-xl-1); } .u-margin-bottom-xl-2 { margin-bottom: var(--space-xl-2); } .u-margin-bottom-xl-3 { margin-bottom: var(--space-xl-3); } .u-margin-bottom-xl-4 { margin-bottom: var(--space-xl-4); } :root { /* Font */ --headline-font: 'New Spirit'; --body-font: 'Acumin Pro'; --headline-fallback-font: Georgia; --body-fallback-font: Arial; /* Colour */ --primary-green: #1C341C; --primary-orange: #EA591C; --secondary-red: #C73D40; --secondary-blue: #081595; --secondary-green: #68D2A4; --secondary-grey: #F8F6F3; --tertiary-grey: #dfdddb; /* Text */ --text-large-1: 6rem; --text-large-2: 5rem; --text-large-3: 4rem; --text-large-4: 3rem; --text-standard: 2rem; --text-small-1: 1.8rem; --text-small-2: 1.5rem; /* Spacing */ --section-padding: 4rem; --input-padding: 1.2rem; --button-padding: 1.5rem; --gap-xs: 1rem; --gap-s: 1.5rem; --gap-m: 2rem; --gap-l: 3.5rem; --gap-xl: 6rem; --space-xl-4: 50rem; --space-xl-3: 40rem; --space-xl-2: 30rem; --space-xl-1: 20rem; --space-l: 15rem; --space-m: 10rem; --space-s: 5rem; --space-xs-1: 2.5rem; --space-xs-2: 1rem; /* Fixed Section Heights */ --full-screen-height: 100vh; --header-height: 12.5rem; --footer-height: 60rem; --full-screen-width: 100vw; --small-section-height: 50vh; --large-section-height: 100vh; } footer { margin-top: auto; } .rounded-top { position: relative; line-height: 0; transform: rotate(180deg); } .rounded-top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 45px; } .rounded-top .shape-fill { fill: var(--secondary-grey); } #footer-content { padding: 0 var(--space-s) var(--space-s) var(--space-s); } .footer-content-bottom-right p, .footer-link-row { padding: 0 20% 0 0; } .footer-content-bottom-right img { margin-top: -11%; margin-bottom: -7%; } #menu-label { display: flex; flex-flow: row nowrap; justify-content: start; gap: var(--gap-l); } #menuToggle { opacity: 0; z-index: 105; cursor: pointer; } #menuToggle:checked ~ .menu-btn > span { transform: rotate(45deg); } #menuToggle:checked ~ .menu-btn > span::before { top: 0; transform: rotate(0); } #menuToggle:checked ~ .menu-btn > span::after { top: 0; transform: rotate(90deg); } html:has(#menuToggle:checked) { overflow: hidden; } .menu-btn { display: flex; align-items: center; position: absolute; width: 26px; height: 26px; cursor: pointer; z-index: 103; } #menuToggle:checked ~ .menu-btn { /*position: fixed;*/ } .menu-btn > span, .menu-btn > span::before, .menu-btn > span::after { display: block; position: absolute; width: 100%; height: 2px; background-color: var(--primary-green); transition-duration: .25s; } .menu-btn > span::before { content: ''; top: -8px; } .menu-btn > span::after { content: ''; top: 8px; } .menu-overlay { display: block; position: fixed; visibility: hidden; top: 0; left: -100%; width: 300px; height: 100%; list-style: none; background-color: #ECEFF1; box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); transition-duration: .25s; overflow: hidden; overflow-y: auto; margin-top: var(--header-height); padding-bottom: var(--header-height); } .menu-close-overlay { display: block; position: fixed; visibility: hidden; top: 0; right: 0; height: 100%; width: calc(100vw - 300px); background-color: transparent; z-index: 80; } #menu-label:has(#menuToggle:checked) ~ .menu-overlay { visibility: visible; left: 0; z-index: 100; background-color: var(--secondary-grey); color: var(--secondary-grey); } #menu-label:has(#menuToggle:checked) ~ .menu-close-overlay { visibility: visible; } .menu-overlay > ul { padding-left: 0!important; } .menu-item { display: block; padding: 12px 24px; color: var(--primary-green); font-family: var(--body-font), var(--body-fallback-font); font-size: var(--text-medium); text-decoration: none; transition-duration: .25s; } .menu-item:hover { background-color: var(--primary-green); color: var(--secondary-grey); } #account-icon { min-width: 35px; max-width: 35px; } .menu-overlay ul { transition: opacity 0.5s ease-in-out; } .menu-overlay ul.hidden { opacity: 0; pointer-events: none; } .menu-overlay ul:not(.hidden) { opacity: 1; } /** * @license * MyFonts Webfont Build ID 3867246, 2020-12-16T11:57:38-0500 * * The fonts listed in this notice are subject to the End User License * Agreement(s) entered into by the website owner. All other parties are * explicitly restricted from using the Licensed Webfonts(s). * * You may obtain a valid license at the URLs below. * * Webfont: undefined by undefined * URL: https://www.myfonts.comundefined * Copyright: Copyright © 2024 Monotype Imaging Inc. All rights reserved. * * © 2024 MyFonts Inc. */ /* Acumin Pro */ @font-face { font-family: 'Acumin Pro'; src: url('../../Fonts/AcuminPro-Regular.woff2') format('woff2'), url('../../Fonts/AcuminPro-Regular.woff') format('woff'); font-style: normal; font-weight: 400; } /* New Spirit */ @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-Bold.woff2') format('woff2'), url('../../Fonts/NewSpirit-Bold.woff') format('woff'); font-style: normal; font-weight: 700; } @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-Heavy.woff2') format('woff2'), url('../../Fonts/NewSpirit-Heavy.woff') format('woff'); font-style: normal; font-weight: 900; } @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-Light.woff2') format('woff2'), url('../../Fonts/NewSpirit-Light.woff') format('woff'); font-style: normal; font-weight: 300; } @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-Medium.woff2') format('woff2'), url('../../Fonts/NewSpirit-Medium.woff') format('woff'); font-style: normal; font-weight: 500; } @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-Regular.woff2') format('woff2'), url('../../Fonts/NewSpirit-Regular.woff') format('woff'); font-style: normal; font-weight: 400; } @font-face { font-family: 'New Spirit'; src: url('../../Fonts/NewSpirit-SemiBold.woff2') format('woff2'), url('../../Fonts/NewSpirit-SemiBold.woff') format('woff'); font-style: normal; font-weight: 600; } #meter-reading-box table, #transactions-box table { width: 100%; border-collapse: collapse; font-family: var(--headline-font), var(--headline-fallback-font); } #meter-reading-box table tr, #transactions-box table tr { border-bottom: 3px solid var(--primary-orange); } #meter-reading-box table tbody tr:nth-child(odd), #transactions-box table tbody tr:nth-child(odd) { background-color: #F7E8DF; } #meter-reading-box table td, #transactions-box table td { opacity: 70%; } #meter-reading-box table th, #transactions-box table th { color: var(--primary-orange); } .meter-reading-digit-input { border: 3px solid var(--secondary-green); text-align: center; vertical-align: middle; } .meter-reading-digit-input:disabled { background-color: var(--tertiary-grey); opacity: 60%; } @media (min-width: 1024.1px) { #meter-reading-box table, #transactions-box table { margin-bottom: var(--space-s); padding: var(--space-s); } .meter-reading-digit-input { width: 60px; height: 60px; font-size: var(--text-large-4); } #meter-reading-box table td, #meter-reading-box table th, #transaction-box table td, #transaction-box table th { padding: 8px; font-size: var(--text-large-4); } #meter-reading-box table, #transaction-box table { width: 100%; padding: var(--space-s); border-collapse: collapse; font-family: var(--headline-font), var(--headline-fallback-font); margin-bottom: var(--space-s) } } @media (min-width: 650.01px) and (max-width: 1024px) { #meter-reading-box table, #transactions-box table { margin-bottom: var(--space-xs-1); padding: var(--space-xs-1); } .meter-reading-digit-input { width: 50px; height: 50px; font-size: var(--text-standard); } #meter-reading-box table td, #meter-reading-box table th, #transactions-box table td, #transactions table th { padding: 6px; font-size: var(--text-standard); } } @media (max-width: 650px) { #meter-reading-box table, #transactions-box table { margin-bottom: var(--space-xs-2); padding: var(--space-xs-2); } .meter-reading-digit-input { width: 30px; height: 30px; font-size: var(--text-small-2); } #meter-reading-box table td, #meter-reading-box table th, #transactions-box table td, #transactions table th { padding: 4px; font-size: var(--text-small-2); } } @media (min-width: 1024.1px) { div#cookie-declaration { height: 30vh; } } @media (min-width: 650.01px) and (max-width: 1024px) { div#cookie-declaration { height: 30vh; } } @media (max-width: 650px) { div#cookie-declaration { height: 60vh; } } div#cookie-declaration { position: fixed; z-index: 10; bottom: 0; left: 0; right: 0; background: var(--primary-orange); width: 100vw; } div#cookie-declaration p, div#cookie-declaration button { font-size: .9em; } div#cookie-declaration button { border-radius: 25px; width: 100%; } div#cookie-declaration p, div#cookie-declaration button { font-size: .9em; } div#cookie-declaration p { padding: 0; margin-bottom: 15px; } div#cookie-declaration p, div#cookie-declaration p a { color: var(--secondary-grey); }