/* Minification failed. Returning unminified contents.
(9,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(10,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(11,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(12,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(13,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(14,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(15,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(16,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(17,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(18,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(19,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(20,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(21,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(22,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(23,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(24,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(25,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(26,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(27,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(28,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(29,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(30,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(31,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(34,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(43,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(44,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(45,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(46,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(47,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(48,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(49,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(50,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(51,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(52,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(53,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(54,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(55,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(57,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(58,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(67,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(68,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(69,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(70,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(71,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(72,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(73,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(74,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(75,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(76,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(77,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(78,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(79,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(80,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(81,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(82,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(91,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(92,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(93,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(94,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(95,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(96,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(97,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(98,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(99,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(100,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(101,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(102,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(103,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(104,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(105,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(106,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(107,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(118,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(119,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(120,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-base'
(121,26): run-time error CSS1039: Token not allowed after unary operator: '-letter-spacing-base'
(125,26): run-time error CSS1039: Token not allowed after unary operator: '-bottom-nav-height'
(146,22): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-bg'
(147,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(193,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(202,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(211,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(227,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-text'
(230,22): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-bg'
(236,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-text'
(239,22): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-bg'
(242,65): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-bg'
(286,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(291,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(304,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(311,28): run-time error CSS1039: Token not allowed after unary operator: '-header-bg'
(328,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(343,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(382,22): run-time error CSS1039: Token not allowed after unary operator: '-header-bg'
(383,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(385,18): run-time error CSS1039: Token not allowed after unary operator: '-bottom-nav-height'
(398,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(414,41): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(423,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(437,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(447,22): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-bg'
(448,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-hover-text'
(462,42): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(464,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(464,67): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(465,53): run-time error CSS1039: Token not allowed after unary operator: '-card-header-bg'
(465,90): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(467,43): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(467,76): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(470,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(471,24): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(472,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(475,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-hover-bg'
(476,24): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-hover-bg'
(477,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(479,30): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(482,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(483,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(484,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(488,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(489,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(500,43): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(506,38): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(510,43): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(512,29): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(527,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(528,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(529,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(532,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(533,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(534,24): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(543,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(544,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(545,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(548,55): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(550,46): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(552,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(569,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(570,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(574,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(575,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(580,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(581,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(583,46): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(586,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(587,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(589,60): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(593,30): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(608,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(609,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(610,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(664,46): run-time error CSS1039: Token not allowed after unary operator: '-bottom-nav-height'
(665,47): run-time error CSS1039: Token not allowed after unary operator: '-bottom-nav-height'
(687,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(691,54): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(697,100): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(741,31): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(742,37): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(838,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(843,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(854,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(862,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(863,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(873,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(881,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(882,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(900,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(907,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(913,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(926,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(934,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(935,31): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(946,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(951,34): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(952,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(962,57): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(964,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(965,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(988,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(990,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(994,45): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1004,28): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1010,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1017,22): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1022,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1025,22): run-time error CSS1030: Expected identifier, found '.'
(1025,45): run-time error CSS1031: Expected selector, found ')'
(1025,45): run-time error CSS1025: Expected comma or open brace, found ')'
(1030,30): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1052,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1053,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1063,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1064,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1078,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1081,39): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1082,45): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1082,84): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1097,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1098,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1123,51): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1123,78): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1128,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1129,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1130,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1157,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1163,52): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1165,61): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1168,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1170,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1173,57): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1173,85): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1175,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1176,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1177,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1187,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1194,76): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1196,93): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1196,120): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1197,94): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1197,121): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1209,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(1210,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1215,54): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-hover-bg'
(1215,87): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1223,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1224,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-texture-squares'
(1241,23): run-time error CSS1039: Token not allowed after unary operator: '-line-height-base'
(1267,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1270,38): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1293,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1306,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1313,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1343,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1376,45): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1376,68): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1376,93): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1385,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1386,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1400,45): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1400,68): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1400,93): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1403,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1408,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1409,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1423,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1441,28): run-time error CSS1039: Token not allowed after unary operator: '-custom-grey'
(1442,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1447,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1461,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1462,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1463,33): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1473,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1474,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1479,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1484,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1485,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1486,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1498,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1499,24): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1503,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1514,17): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1576,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1577,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1578,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1585,48): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1586,54): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1601,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1602,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1608,87): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1616,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1622,49): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1631,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1654,22): run-time error CSS1039: Token not allowed after unary operator: '-custom-grey'
(1668,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1669,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1677,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(1678,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1686,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(1695,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1701,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1713,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(1714,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1718,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-hover-bg'
(1719,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1728,22): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(1729,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(1739,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1755,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1761,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(1774,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1785,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1786,31): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1801,28): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-bg'
(1802,28): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-bg'
(1803,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(1810,17): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-text'
(1814,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1818,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1822,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1827,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1828,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1832,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1833,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1857,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1863,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1864,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1865,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1869,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1870,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1871,24): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1873,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1878,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(1890,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1891,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1901,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1918,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1919,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(1920,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(1930,38): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1930,66): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1932,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1936,22): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1937,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1938,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(1943,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1951,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(1958,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1964,56): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1973,34): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(1974,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(1977,38): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(1977,66): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1979,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(1982,48): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1994,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(1999,46): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2001,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2008,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(2039,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2045,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2052,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2055,59): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(2063,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2079,17): run-time error CSS1039: Token not allowed after unary operator: '-text-secondary'
(2082,49): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2113,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2116,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2124,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2125,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2129,29): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2156,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2189,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2190,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2201,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2207,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2208,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2209,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2216,55): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2219,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2229,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2233,48): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2243,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2244,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2252,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2253,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2262,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2263,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2280,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2281,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2295,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2298,52): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2300,60): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2306,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2312,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2314,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2317,28): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2318,24): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2338,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2349,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2350,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2351,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2355,42): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2362,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2363,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2377,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2381,54): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2382,60): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2385,52): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2407,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2408,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2410,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2422,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2425,47): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2425,86): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2430,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2436,47): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2470,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2473,48): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2475,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2476,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2500,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2501,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2502,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2520,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2521,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2522,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2529,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2534,58): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2542,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2550,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2552,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2562,77): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2563,58): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(2575,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2576,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2577,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2596,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2600,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2670,72): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2700,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2701,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2712,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2721,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2723,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2735,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2736,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2737,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2748,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2749,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2752,110): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2753,78): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2764,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2765,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2766,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2771,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2772,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2773,17): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2783,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2784,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2785,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2789,52): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2794,57): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2795,53): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2797,66): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2799,65): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2809,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2810,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2811,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2815,47): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2815,86): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2827,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2843,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2848,58): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(2863,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2868,63): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(2871,77): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2874,59): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2883,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(2884,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2887,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2888,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2900,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2925,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2962,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2963,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(2974,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(2981,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(2982,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3016,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3017,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3037,58): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3038,51): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3040,50): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3054,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3058,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3064,50): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3079,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3081,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3086,56): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3089,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(3090,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(3091,24): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(3095,28): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-hover-bg'
(3096,17): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(3109,35): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3135,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3136,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3143,72): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3151,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3163,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3166,45): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3167,60): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3170,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3171,29): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3188,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3190,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3194,41): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3195,61): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3196,56): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3204,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3205,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3213,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3218,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3229,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3230,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3233,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3237,41): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3238,56): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3253,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3254,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3259,47): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3260,62): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3267,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3276,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3292,22): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3293,33): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3303,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3319,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3320,28): run-time error CSS1039: Token not allowed after unary operator: '-ep-texture-squares'
(3321,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3322,35): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3334,99): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3339,54): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3342,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3345,69): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3361,32): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3364,35): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3366,41): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3387,64): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3392,17): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3396,63): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3397,48): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-bg'
(3397,75): run-time error CSS1039: Token not allowed after unary operator: '-btn-dark-text'
(3398,56): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3409,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3410,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3411,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3415,63): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3420,69): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3422,86): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3422,113): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3423,87): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3423,114): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3451,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3452,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3453,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3460,24): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3463,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3470,28): run-time error CSS1039: Token not allowed after unary operator: '-sidebar-bg'
(3498,103): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3499,81): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3499,128): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3691,17): run-time error CSS1039: Token not allowed after unary operator: '-accent-color'
(3817,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3818,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3819,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3826,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3833,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3841,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3850,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3851,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3857,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3870,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(3871,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3872,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3876,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-tertiary'
(3899,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3909,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3915,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3921,28): run-time error CSS1039: Token not allowed after unary operator: '-card-header-bg'
(3922,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3923,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3929,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3942,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3943,24): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(3946,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-secondary'
(3947,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3954,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3960,28): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3962,28): run-time error CSS1039: Token not allowed after unary operator: '-text-muted'
(3969,17): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3970,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(3974,28): run-time error CSS1039: Token not allowed after unary operator: '-text-primary'
(4014,28): run-time error CSS1039: Token not allowed after unary operator: '-bg-primary'
(4015,28): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4016,33): run-time error CSS1039: Token not allowed after unary operator: '-callout-accent'
(4016,55): run-time error CSS1039: Token not allowed after unary operator: '-border-color'
(4018,43): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4019,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4020,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4021,44): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(4022,61): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
 */
/* =============================================================
 * variables.css – Theme variables & body base
 * Per-theme overrides that need more than variable swaps live in themes.css.
 * ============================================================= */

/* #region Default theme (light) */

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e2e2e2;
    --text-primary: #000000;
    --text-muted: #6c757d;
    --border-color: #e2e2e2;
    --header-bg: #ffffff;
    --card-header-bg: #ffffff;
    --sidebar-bg: #000;
    --sidebar-text: #fff;
    --sidebar-hover-bg: #fff;
    --sidebar-hover-text: #000;
    --btn-dark-bg: #000;
    --btn-dark-text: #fff;
    --btn-dark-hover-bg: #333;
    --bullet-color: #000;
    --bottom-nav-height: 60px;
    --custom-grey: #e2e2e2;
    --accent-color: #0d6efd;
    --toast-bg: #333333;
    --toast-text: #ffffff;
    --line-height-base: 1.5;
    --letter-spacing-base: normal;
    /* Scattered-square brand texture (lobby header + default profile banners). Mid-grey at low
       opacity blends on every theme surface - a data-URI can't take a per-theme colour. */
    --ep-texture-squares: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='%23808080' fill-opacity='0.22'><rect x='10' y='14' width='7' height='7'/><rect x='44' y='8' width='5' height='5'/><rect x='84' y='18' width='10' height='10'/><rect x='106' y='40' width='6' height='6'/><rect x='24' y='44' width='6' height='6'/><rect x='62' y='52' width='8' height='8'/><rect x='14' y='78' width='9' height='9'/><rect x='48' y='86' width='5' height='5'/><rect x='88' y='74' width='6' height='6'/><rect x='102' y='98' width='8' height='8'/><rect x='30' y='104' width='6' height='6'/><rect x='70' y='110' width='7' height='7'/></g></svg>");
}

/* #endregion */


/* #region Dark theme */

[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #242424;
    --bg-tertiary: #3a3a3a;
    --text-primary: #e2e2e2;
    --text-muted: #adb5bd;
    --border-color: #3a3a3a;
    --header-bg: #242424;
    --card-header-bg: #242424;
    --sidebar-hover-bg: #e2e2e2;
    --sidebar-hover-text: #000;
    --btn-dark-bg: #e2e2e2;
    --btn-dark-text: #000;
    --btn-dark-hover-bg: #fff;
    --bullet-color: #e2e2e2;
    --custom-grey: #333333;
    --accent-color: #6ea8fe;
}

/* #endregion */


/* #region High-contrast theme */

[data-theme="high-contrast"] {
    --bg-primary: #000000;
    --bg-secondary: #000000;
    --bg-tertiary: #000000;
    --text-primary: #ffff00;
    --text-muted: #00ff00;
    --border-color: #ffffff;
    --header-bg: #000000;
    --sidebar-bg: #000000;
    --sidebar-text: #ffff00;
    --sidebar-hover-bg: #ffff00;
    --sidebar-hover-text: #000000;
    --accent-color: #ffff00;
    --custom-grey: #000000;
    --btn-dark-bg: #ffff00;
    --btn-dark-text: #000000;
    --btn-dark-hover-bg: #ffff00;
}

/* #endregion */


/* #region Monochrome theme */

[data-theme="monochrome"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f2f2f2;
    --bg-tertiary: #d9d9d9;
    --text-primary: #111111;
    --text-muted: #555555;
    --border-color: #b0b0b0;
    --header-bg: #ffffff;
    --card-header-bg: #f7f7f7;
    --sidebar-bg: #1a1a1a;
    --sidebar-text: #ffffff;
    --sidebar-hover-bg: #ffffff;
    --sidebar-hover-text: #000000;
    --btn-dark-bg: #1a1a1a;
    --btn-dark-text: #ffffff;
    --btn-dark-hover-bg: #444444;
    --accent-color: #1a1a1a;
    --custom-grey: #d9d9d9;
}

/* #endregion */


/* #region Body base + transitions */

html { transition: font-size 0.2s ease-in-out; }

body.event-platform {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    line-height: var(--line-height-base);
    letter-spacing: var(--letter-spacing-base);
    /* `clip` keeps `position: sticky` descendants working; `hidden` is the legacy fallback. */
    overflow-x: hidden;
    overflow-x: clip;
    padding-bottom: var(--bottom-nav-height);
}

/* #endregion */

/* =============================================================
 * layout.css – Shell, sidebar, header, mobile bottom nav
 * ============================================================= */

/* #region Shell wrapper + sidebar */

.ep-wrapper {
    display: flex;
    width: 100%;
    min-height: 100vh;
    align-items: stretch;
}

#ep-sidebar {
    width: 270px;
    min-width: 270px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    transition: margin-left 0.35s ease-in-out, transform 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1040;
    overflow-y: auto;
    margin-left: -270px;
}

.ep-sidebar-logo {
    max-height: 42px;
    width: auto;
    max-width: 130px;
}

#ep-sidebar.collapsed { margin-left: -270px; }
#ep-sidebar.open      { margin-left: 0; }

#ep-sidebar-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1039;
    display: none;
}
#ep-sidebar-overlay.open { display: block; }

/* min-height matches .ep-main-header so the sidebar's logo underline
   lines up with the bottom of the main header on desktop. */
#ep-sidebar .sidebar-header {
    min-height: 68px;
    border-bottom: 1px solid #474747;
    justify-content: center;
}

@media (max-width: 991.98px) {
    #ep-sidebar .sidebar-header { justify-content: flex-start; }
    #ep-sidebar .sidebar-header .ep-sidebar-logo { margin: 0; }
    #ep-sidebar .sidebar-header .ep-sidebar-close-btn { margin-left: auto; }
}

.ep-sidebar-close-btn {
    background: transparent;
    border: 0;
    color: var(--sidebar-text);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    border-radius: 0;
}
.ep-sidebar-close-btn:hover,
.ep-sidebar-close-btn:focus {
    color: var(--sidebar-text);
    opacity: 0.7;
    outline: none;
    background: transparent;
}

#ep-sidebar .nav-link,
#ep-sidebar .nav-link span,
#ep-sidebar .nav-link i {
    color: var(--sidebar-text);
}
#ep-sidebar .nav-link {
    padding: 1.15rem 1.2rem;
    font-size: 0.98rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    position: relative;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, padding-left 0.2s ease-in-out;
}
#ep-sidebar .nav-link:hover,
#ep-sidebar .nav-link:hover span,
#ep-sidebar .nav-link:hover i {
    color: var(--sidebar-hover-text);
}
#ep-sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    padding-left: 1.55rem;
}
#ep-sidebar .nav-item.active .nav-link,
#ep-sidebar .nav-item.active .nav-link span,
#ep-sidebar .nav-item.active .nav-link i {
    color: var(--sidebar-hover-text);
}
#ep-sidebar .nav-item.active .nav-link {
    background: var(--sidebar-hover-bg);
    font-weight: 700;
}
#ep-sidebar .nav-item.active .nav-link:hover { background: var(--sidebar-hover-bg); }
#ep-sidebar .nav-item.active .nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background-color: #6c757d;
}
#ep-sidebar .fas,
#ep-sidebar .fa-sharp {
    width: 22px;
    margin-right: 12px;
    text-align: center;
    flex-shrink: 0;
}
#ep-sidebar .nav-link span { transition: opacity 0.2s ease-in-out; }

/* The nav is a bounded-height flex column (.components scrolls): override Bootstrap's .nav
   flex-wrap so large text stacks items and scrolls, instead of wrapping into a cut-off 2nd column. */
#ep-sidebar .components { flex-wrap: nowrap; }

#ep-sidebar .sidebar-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid #474747;
    color: #e2e2e2;
}
#ep-sidebar .sidebar-footer p { color: #ffffff !important; }
.ep-sidebar-mini-date { font-size: 0.7rem; }

.sidebar-mobile-settings {
    border-bottom: 1px solid #474747;
    margin: -1rem -1rem 1rem;
    padding: 0 0 1rem;
}
.sidebar-mobile-settings .btn-access-header {
    width: 100%;
    justify-content: flex-start;
    margin-right: 0 !important;
    padding: 1rem 1.2rem;
    background: transparent;
    border: 0;
    color: var(--sidebar-text);
    font-weight: 500;
}
.sidebar-mobile-settings .btn-access-header span {
    display: inline !important;
    color: var(--sidebar-text);
}

/* #endregion */


/* #region Main content + sticky header */

#ep-content {
    width: 100%;
    /* Flex item: shrink to the row instead of growing to a wide child's intrinsic width (stretches the page). */
    min-width: 0;
    min-height: 100vh;
    background-color: var(--bg-secondary);
}

.ep-main { position: relative; }

.ep-main-header {
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    background-color: var(--header-bg);
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 68px;
}

/* min-width: 0 lets the title shrink and truncate when the right-side
   controls eat the available width on narrow viewports. */
.ep-header-left {
    min-width: 0;
    flex: 1 1 auto;
}
.ep-header-event { min-width: 0; }
.ep-header-event-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 768px) {
    .ep-header-event-title { font-size: 1.15rem; }
}
.ep-header-event-meta {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 0.1rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
    line-height: 1.2;
}
.ep-header-event-meta-item {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    min-width: 0;
}
.ep-header-event-meta-item > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 575.98px) {
    .ep-header-event-title { font-size: 0.95rem; }
    .ep-header-event-meta { font-size: 0.68rem; column-gap: 0.6rem; }
}

.ep-icon-dropdown-toggle,
.btn-access-header {
    min-height: 42px;
    padding: 0.45rem 0.85rem;
    font-size: 0.9rem;
    font-weight: 700;
}

.dropdown-chevron { transition: transform 0.2s ease-in-out; }
.show > .ep-icon-dropdown-toggle .dropdown-chevron { transform: rotate(180deg); }
.ep-profile-toggle { padding: 0.25rem 0; }

/* #endregion */


/* #region Mobile bottom nav */

#ep-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--header-bg);
    border-top: 1px solid var(--border-color);
    display: flex;
    height: var(--bottom-nav-height);
    z-index: 1035;
}
/* Selector matches both <a> page links and the <button> for the
   "More" sheet — both nav children share the same column layout. */
#ep-bottom-nav > a,
#ep-bottom-nav > button {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}
#ep-bottom-nav > a .fas,
#ep-bottom-nav > a .fa-sharp,
#ep-bottom-nav > button .fas,
#ep-bottom-nav > button .fa-sharp {
    font-size: 1.35rem;
    margin-bottom: 5px;
}
#ep-bottom-nav > a.active { color: var(--text-primary); font-weight: 600; }
/* Active-item indicator: a bar across the top edge. */
#ep-bottom-nav > a.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--text-primary);
}

/* #endregion */


/* #region Sidebar collapse / expand toggle */

/* Chevron flips 180deg when minimized so it points the way the next click moves the sidebar. */
#sidebarCollapse {
    width: 100%;
    padding: 0.85rem 1.2rem;
    border: 0;
    background: transparent;
    color: var(--sidebar-text);
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
#sidebarCollapse:hover,
#sidebarCollapse:focus-visible {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-text);
    outline: none;
}
#sidebarCollapse i { transition: transform .25s ease; }
html.ep-sidebar-minimized #sidebarCollapse i { transform: rotate(180deg); }

/* #endregion */

/* =============================================================
 * components.css – Cards, buttons, dropdowns, profile, notifications, badges
 * ============================================================= */

/* #region Base elements & area-wide overrides */

.bg-custom-gray { background-color: var(--bg-tertiary); }

.card { border-color: var(--border-color); background-color: var(--bg-primary); }
.card-header, .card-footer { background-color: var(--card-header-bg); border-color: var(--border-color); }

.list-group-item { background-color: var(--bg-primary); border-color: var(--border-color); }

.btn-dark {
    background-color: var(--btn-dark-bg);
    border-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
}
.btn-dark:hover {
    background-color: var(--btn-dark-hover-bg);
    border-color: var(--btn-dark-hover-bg);
    color: var(--btn-dark-text);
}
.btn-dark span { color: var(--btn-dark-text); }

.btn.btn-light {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
/* Bell dropdown toggle — slight darken on hover, matching Display Settings, in every theme. */
.event-platform .ep-icon-dropdown-toggle:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    filter: brightness(0.93);
}


.event-platform h1,
.event-platform h2,
.event-platform h3,
.event-platform h4,
.event-platform h5,
.event-platform h6,
.event-platform .text-black { color: var(--text-primary) !important; }

.event-platform p,
.event-platform span,
.event-platform div,
.event-platform small,
.event-platform strong { color: var(--text-primary); }

.event-platform small.text-muted,
.event-platform p.text-muted,
.event-platform .text-muted { color: var(--text-muted) !important; }

hr { border-top-color: var(--border-color); }

.event-platform .card,
.event-platform .btn,
.event-platform .badge,
.event-platform .form-control,
.event-platform .alert,
.event-platform .modal-content,
.event-platform .list-group-item,
.event-platform .rounded,
.event-platform .carousel { border-radius: 0 !important; }

/* Native form controls (e.g. the Meetings day filter) follow the theme tokens; Bootstrap
   otherwise leaves them white. The native popup is darkened via color-scheme in themes.css. */
.event-platform .form-control {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
}
.event-platform .form-control:focus {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--accent-color);
    box-shadow: none;
}

.event-platform .modal-xl { max-width: 1140px; }

/* Leave-event confirm modal: themed surface so text stays readable in every
   theme, plus a balanced two-up button row.*/
#epLeaveEventModal .modal-content {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
#epLeaveEventModal .modal-header,
#epLeaveEventModal .modal-footer { border-color: var(--border-color); }
#epLeaveEventModal .modal-title,
#epLeaveEventModal .modal-body { color: var(--text-primary); }
#epLeaveEventModal .close {
    color: var(--text-primary);
    text-shadow: none;
    opacity: .75;
}
#epLeaveEventModal .close:hover { opacity: 1; }

#epLeaveEventModal .modal-footer {
    flex-wrap: nowrap;
    gap: .75rem;
}
#epLeaveEventModal .modal-footer > .btn {
    flex: 1 1 0;
    margin: 0;
}

#epLeaveEventModal .ep-leave-btn {
    background-color: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-primary);
}
#epLeaveEventModal .ep-leave-btn:hover,
#epLeaveEventModal .ep-leave-btn:focus {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.event-platform .dropdown-menu {
    border-radius: 0 !important;
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}
.event-platform .dropdown-item { color: var(--text-primary); }
.event-platform .dropdown-item:hover,
.event-platform .dropdown-item:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.event-platform .dropdown-divider { border-top-color: var(--border-color); }

.empty-state i,
.empty-state h3,
.empty-state p { color: var(--text-primary); }

.event-platform .profile-img {
    width: 40px; height: 40px;
    border-radius: 50% !important;
    object-fit: cover;
    transition: filter 0.15s ease-in-out;
}
.profile-avatar-fallback {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 700;
    text-transform: uppercase;
    transition: filter 0.15s ease-in-out;
}
/* Profile avatar: same slight darken on hover as the bell / Display Settings. */
.event-platform .ep-profile-toggle:hover .profile-img,
.event-platform .ep-profile-toggle:hover .profile-avatar-fallback {
    filter: brightness(0.93);
}
.ep-profile-dropdown-logo { max-width: 120px; }

/* #endregion */


/* #region Bell-dropdown notifications */

/* Scoped to .event-platform to beat the area-wide span colour rule. */
.event-platform .notification-indicator {
    position: absolute;
    top: -6px; right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background-color: #dc3545;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 0;
}

#notificationDropdown + .dropdown-menu {
    width: 320px;
    padding-top: 0;
    padding-bottom: 0;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow: hidden;
}
/* Flex column so the list scrolls while the header + footer (Mark all / View all) stay pinned. */
#notificationDropdown + .dropdown-menu.show {
    display: flex;
    flex-direction: column;
}
#notificationDropdown + .dropdown-menu #notification-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
/* dvh tracks the visible viewport; plain vh is too tall on phones and lets the footer slip under the bottom nav. */
@media (max-width: 991.98px) {
    #notificationDropdown + .dropdown-menu {
        max-height: calc(100vh - 80px - var(--bottom-nav-height));
        max-height: calc(100dvh - 80px - var(--bottom-nav-height));
    }
}
#notificationDropdown + .dropdown-menu .dropdown-item {
    white-space: normal;
    padding-top: .75rem;
    padding-bottom: .75rem;
}
#notificationDropdown + .dropdown-menu .dropdown-item p { line-height: 1.3; }
.ep-notification-item.is-unread {
    background-color: rgba(0, 0, 0, .06);
    border-left: 4px solid #dc3545;
}
.ep-notification-item.is-read { opacity: .72; }

/* #endregion */


/* #region Notifications page cards */

.ep-notification-card {
    position: relative;
    border-color: var(--border-color);
    transition: background-color .15s ease, box-shadow .15s ease;
}
/* Hover matches the bell dropdown items: subtle background tint, no border or slide. */
.ep-notification-card:hover { background-color: var(--bg-secondary); }
.ep-notification-card.is-read { opacity: .65; }
.ep-notification-card.is-hidden-batch { display: none; }
/* Unread: a status-coloured left rail (inset shadow = no layout shift; read cards get none). */
.ep-notification-card:not(.is-read)[data-status="live"]         { box-shadow: inset 4px 0 0 0 #dc3545; }
.ep-notification-card:not(.is-read)[data-status="startingsoon"] { box-shadow: inset 4px 0 0 0 #28a745; }
.ep-notification-card:not(.is-read)[data-status="upcoming"]     { box-shadow: inset 4px 0 0 0 var(--text-muted); }

/* #endregion */


/* #region Toastr — flat white card, FA icons, opaque on touch */

#toast-container > div {
    background-color: #fff !important;
    background-image: none !important;
    color: #000 !important;
    opacity: 1 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    border-radius: 0;
    /* !important: toastr.css is bundled after this and otherwise wins, collapsing the right gap so long
       text runs under the close X. 3rem horizontal leaves room for the left icon and the right X. */
    padding: 1rem 3rem !important;
    width: 360px;
    max-width: 90vw;
    position: relative;
}
#toast-container > div:hover {
    opacity: 1 !important;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
#toast-container > div .toast-title {
    color: #000;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
#toast-container > div .toast-message {
    color: #000;
    line-height: 1.4;
    word-break: break-word;
}
#toast-container > div .toast-message a,
#toast-container > div .toast-message a:hover {
    color: #0d6efd;
    text-decoration: underline;
    font-weight: 600;
}

/* Inline prose link (empty states); themed so it stays visible on dark + high-contrast. */
.ep-inline-link { color: var(--text-primary); text-decoration: underline; }
.ep-inline-link:hover { color: var(--text-muted); }

#toast-container > div::before {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.25rem;
    line-height: 1;
}
#toast-container > .toast-info        { border-left: 4px solid #0d6efd; }
#toast-container > .toast-info::before    { content: '\f05a'; color: #0d6efd; }
#toast-container > .toast-success     { border-left: 4px solid #198754; }
#toast-container > .toast-success::before { content: '\f058'; color: #198754; }
#toast-container > .toast-warning     { border-left: 4px solid #ffc107; }
#toast-container > .toast-warning::before { content: '\f071'; color: #ffc107; }
#toast-container > .toast-error       { border-left: 4px solid #dc3545; }
/* fa-circle reads as "live dot" rather than an error X. */
#toast-container > .toast-error::before   { content: '\f111'; color: #dc3545; }

/* Dismiss X — hide toastr's native &times; and overlay an FA xmark via ::before. */
#toast-container > div .toast-close-button {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: transparent;
    font-size: 0;
    line-height: 1;
    opacity: 1;
    text-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease;
}
#toast-container > div .toast-close-button::before {
    content: '\f00d';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.95rem;
    color: rgba(0, 0, 0, 0.5);
    transition: color .15s ease;
}
#toast-container > div .toast-close-button:hover,
#toast-container > div .toast-close-button:focus-visible {
    background-color: rgba(0, 0, 0, 0.08);
    outline: none;
}
#toast-container > div .toast-close-button:hover::before,
#toast-container > div .toast-close-button:focus-visible::before {
    color: #000;
}

/* Mobile: stretch toasts edge-to-edge - beats toastr's narrow built-in mobile sizing. */
@media (max-width: 575.98px) {
    #toast-container {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
    }
    #toast-container > div {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* #endregion */


/* #region Toast summary list + notification card chrome */

.ep-toast-list {
    margin: 0.25rem 0;
    padding-left: 1.1rem;
    list-style: disc;
}
.ep-toast-list li { margin-bottom: 0.1rem; line-height: 1.35; }
.ep-toast-link,
.ep-toast-link:hover,
.ep-toast-link:focus {
    color: #0d6efd;
    text-decoration: underline;
    font-weight: 600;
}
.ep-notification-card-link {
    display: block;
    color: var(--text-primary);
    text-decoration: none;
}
.ep-notification-card-link:hover,
.ep-notification-card-link:focus {
    color: var(--text-primary);
    text-decoration: none;
    outline: none;
}
.ep-notification-clear {
    position: absolute;
    top: 8px; right: 8px;
    width: 28px; height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.ep-notification-clear:hover,
.ep-notification-clear:focus-visible {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    outline: none;
}
.ep-notification-read-toggle {
    position: absolute;
    top: 8px; right: 40px;
    width: 28px; height: 28px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.ep-notification-read-toggle:hover,
.ep-notification-read-toggle:focus-visible {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    outline: none;
}
/* Envelope reflects state: unread = sealed, read = opened. */
.ep-notification-card .ep-notif-icon-read { display: none; }
.ep-notification-card.is-read .ep-notif-icon-unread { display: none; }
.ep-notification-card.is-read .ep-notif-icon-read { display: inline-block; }

/* #endregion */


/* #region Tab strip (underline indicator). Add `ep-tab-strip-sticky` to pin. */

.ep-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
/* `top: 68px` clears the sticky .ep-main-header above. */
.ep-tab-strip-sticky {
    position: sticky;
    top: 68px;
    z-index: 5;
    background-color: var(--bg-secondary);
}
.ep-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.6rem 1.1rem;
    margin: 0 0 -1px 0;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.ep-tab:hover,
.ep-tab:focus,
.ep-tab:focus-visible {
    color: var(--text-primary);
    outline: none;
    box-shadow: none;
}
.ep-tab.active,
.ep-tab.active:hover,
.ep-tab.active:focus,
.ep-tab.active:focus-visible {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: 700;
}

/* #endregion */


/* #region Segmented control (1 / 2 / 3 / 5 / 7 / 10 picker) */

.ep-segmented {
    display: inline-flex;
    border: 1px solid var(--text-primary);
}
.ep-segment {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--text-primary);
    color: var(--text-primary);
    padding: 0.35rem 0.9rem;
    min-width: 44px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: none;
    transition: background-color .15s ease, color .15s ease;
}
.ep-segment:last-child { border-right: 0; }
.ep-segment:hover:not(.active) { background-color: var(--bg-tertiary); }
.ep-segment.active {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}
/* Wrap variant — when too many segments to fit on one row (e.g. 1/2/3/5/7/10). */
.ep-segmented-wrap { flex-wrap: wrap; }
.ep-segmented-wrap .ep-segment { min-height: 44px; }

/* #endregion */


/* #region Tappable radio rows (mobile-friendly, Notification preferences) */

.ep-radio-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ep-radio-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 48px;
    padding: 0.5rem 0.85rem;
    margin: 0;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ep-radio-option:hover { border-color: var(--text-primary); }
.ep-radio-input {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.ep-radio-indicator {
    flex: 0 0 auto;
    width: 20px; height: 20px;
    border: 2px solid var(--text-muted);
    border-radius: 50%;
    position: relative;
    transition: border-color .15s ease;
}
.ep-radio-input:checked + .ep-radio-indicator {
    border-color: var(--text-primary);
}
.ep-radio-input:checked + .ep-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    background: var(--text-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ep-radio-input:focus-visible + .ep-radio-indicator {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}
.ep-radio-option:has(.ep-radio-input:checked) {
    border-color: var(--text-primary);
    background: var(--bg-tertiary);
}
.ep-radio-text { flex: 1 1 auto; font-size: 0.95rem; line-height: 1.3; }
.ep-radio-hint { color: var(--text-muted); font-size: 0.8rem; margin-left: 0.25rem; }

/* #endregion */


/* #region Schedule grid (DevExtreme) */

/* Auto-height so a short last page doesn't keep a fuller page's row-area height. */
#ep-schedule-dx-grid .dx-datagrid,
#ep-schedule-dx-grid .dx-datagrid-rowsview,
#ep-schedule-dx-grid .dx-datagrid-rowsview .dx-scrollable-container,
#ep-schedule-dx-grid .dx-datagrid-rowsview .dx-scrollable-content { height: auto !important; }
/* Hide DevExtreme's short-page filler row (the trailing white space). */
#ep-schedule-dx-grid .dx-freespace-row { display: none !important; }

/* #endregion */


/* #region Subtle action button (outline → fill on hover) */

.ep-btn-subtle {
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ep-btn-subtle:hover,
.ep-btn-subtle:focus {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    text-decoration: none;
    outline: none;
}

/* #endregion */


/* #region List groups, itinerary, adverts & status badges */

/* Hairline between the action buttons and the injected details. !important beats Bootstrap's .mt-3. */
.card-accordion .card-body > #NestedDetailsContainerDiv {
    margin-top: 1rem !important;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.list-group-item-action { color: var(--text-primary); }
.list-group-item-action:hover { color: var(--text-primary); background-color: var(--bg-secondary); }
.list-group-item-action .arrow { transition: transform .2s ease-in-out; }
.list-group-item-action:hover .arrow { transform: translateX(5px); }

/* Sibling of .card-header (not inside) so its click doesn't trigger the collapse toggle. */
#itineraryAccordion .card-accordion { position: relative; }
#itineraryAccordion .card-header-accordion { padding-right: 3rem; }
.ep-itinerary-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 0;
    font-size: 0.95rem;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}
.ep-itinerary-remove:hover,
.ep-itinerary-remove:focus-visible,
.ep-itinerary-remove:active {
    color: #fff;
    background-color: #dc3545;
    outline: none;
}

#NestedDetailsContainerDiv .badge,
#NestedDetailsContainerDiv .badge span,
#NestedDetailsContainerDiv [class*="badge"],
#NestedDetailsContainerDiv [class*="badge"] span {
    color: #fff !important;
}

/* Status badges — fixed colours across themes (semantic, not chrome). */
.session-badge-live      { background-color: #dc3545 !important; color: #fff !important; }
.session-badge-soon      { background-color: #28a745 !important; color: #fff !important; }
.session-badge-upcoming  { background-color: var(--bg-tertiary); color: var(--text-primary); }

/* "In your itinerary" marker (Upcoming Sessions): themed surface + border, replacing Bootstrap's
   fixed badge-light whose light palette was unreadable on the dark card. */
.ep-itinerary-badge {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* #endregion */


/* #region Registration QR page */

.ep-registration-qr-img { max-width: 280px; }
.ep-registration-qr-note { max-width: 480px; }

/* #endregion */


/* #region Schedule itinerary toggle + filter */

.ep-itin-toggle-cell { text-align: center; }
/* Mirrors the attendee-profile toggle: state is shown by the icon (solid = in), not by colour. */
.ep-itin-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    border-radius: 4px;
    line-height: 1;
    font-size: 1.1rem;
    cursor: pointer;
}
.ep-itin-toggle-btn:hover { background-color: var(--bg-tertiary); }
.ep-itin-toggle-btn:disabled { opacity: .5; cursor: default; }
.ep-itin-toggle-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }

.ep-schedule-toolbar-btn {
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-primary);
}
.ep-schedule-toolbar-btn:hover,
.ep-schedule-toolbar-btn:focus { background-color: var(--bg-secondary); color: var(--text-primary); }
.ep-schedule-toolbar-btn.active {
    background-color: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}
/* Inert export state: kept hoverable (no pointer-events:none) so the title tooltip still shows. */
.ep-schedule-toolbar-btn.ep-toolbar-btn-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.ep-schedule-toolbar-btn.ep-toolbar-btn-disabled:hover,
.ep-schedule-toolbar-btn.ep-toolbar-btn-disabled:focus {
    background-color: transparent;
    color: var(--text-primary);
}

/* Itinerary range picker reuses the lobby filter's themed dropdown, narrower for its three options.
   The menu items are themed here too - the lobby's legibility rules are scoped to #ep-events-view. */
#ep-schedule-itin-range .ep-events-filter-btn,
#ep-schedule-itin-range .ep-events-filter-menu { min-width: 9rem; }
#ep-schedule-grid-view .ep-events-filter-menu .dropdown-item { color: var(--text-primary); background-color: transparent; }
#ep-schedule-grid-view .ep-events-filter-menu .dropdown-item:hover,
#ep-schedule-grid-view .ep-events-filter-menu .dropdown-item:focus { background-color: var(--bg-tertiary); color: var(--text-primary); }
#ep-schedule-grid-view .ep-events-filter-menu .dropdown-item.active { background-color: var(--bg-tertiary); color: var(--text-primary); font-weight: 700; }

.ep-status-cell { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.ep-status-pwd { text-align: center; word-break: break-all; }
.ep-status-actions { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
/* Mobile "..." adaptive detail: badge pinned left; join buttons centered in the rest (wrap below if tight). */
.dx-adaptive-detail-row .ep-status-cell { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.dx-adaptive-detail-row .ep-status-actions { flex: 1 0 auto; flex-direction: row; flex-wrap: wrap; justify-content: center; }
.ep-schedule-join-btn {
    padding: .15rem .55rem;
    font-size: .8rem;
    border-radius: 0;
    background-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
    text-decoration: none;
    white-space: nowrap;
}
.ep-schedule-join-btn:hover,
.ep-schedule-join-btn:focus { background-color: var(--btn-dark-hover-bg); color: var(--btn-dark-text); text-decoration: none; }

/* #endregion */

/* Default profile banner: the shared scattered-square texture (see variables.css). The doubled
   selectors out-rank each base rule's background settings (e.g. the profile banner's cover sizing). */
.ep-attendee-banner.ep-banner--default,
.ep-profile-banner.ep-banner--default {
    background-color: var(--bg-secondary);
    background-image: var(--ep-texture-squares);
    background-size: 120px 120px;
    background-repeat: repeat;
    background-position: top left;
}

/* =============================================================
 * devextreme.css — overrides for DevExtreme widgets (dxDataGrid).
 * Theme-specific tweaks (dark / high-contrast) live in themes.css.
 * ============================================================= */

/* #region Global DX overrides */

/* DevExtreme pins line-height with high specificity — re-bind to our var. */
body.event-platform .dx-datagrid,
body.event-platform .dx-datagrid .dx-row > td,
body.event-platform .dx-datagrid .dx-header-row > td {
    line-height: var(--line-height-base);
}

/* Amber match highlight — DX default is illegible on our text colour. */
.event-platform .dx-datagrid-search-text {
    background-color: #fff3a3;
    color: #1a1a1a;
    border-radius: 2px;
    padding: 0 2px;
}

/* #endregion */


/* #region Schedule grid (#ep-schedule-dx-grid) */

#ep-schedule-dx-grid .dx-data-row { cursor: pointer; }

/* Empty rows view collapses to ~0, hiding the "no results" message - give it a floor. overflow-x
   is a backstop; the real page-stretch fix is #ep-content's min-width:0. */
#ep-schedule-dx-grid { overflow-x: hidden; }
#ep-schedule-dx-grid .dx-datagrid-rowsview { min-height: 120px; }

/* Focused row (?focus= deep-link): a theme-aware surface lift, plus a single ink-coloured rail at the
   row start - black on light, the theme's near-white on dark. The old amber clashed in dark mode. */
#ep-schedule-dx-grid .dx-data-row.ep-schedule-focused-row > td {
    background-color: var(--bg-tertiary);
}
#ep-schedule-dx-grid .dx-data-row.ep-schedule-focused-row > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--text-primary);
}

/* Full-width search bar — mirrors the Programme grids' recipe. */
#ep-schedule-dx-grid .dx-datagrid-header-panel { padding: 0; }
#ep-schedule-dx-grid .dx-toolbar .dx-toolbar-after {
    padding-left: 0;
    width: 100% !important;
}
#ep-schedule-dx-grid .dx-datagrid-search-panel { margin-left: 0; }
#ep-schedule-dx-grid .dx-toolbar .dx-texteditor { width: 100% !important; }

/* Mobile: tighten the default DX cell gutter so When + Title aren't squashed. */
@media (max-width: 575.98px) {
    #ep-schedule-dx-grid .dx-row > td {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* Adaptive detail row (panel shown when tapping the ⋯ button) — compact label/value list. */
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-master-detail-cell {
    padding: 0.75rem 1rem;
    background-color: var(--bg-secondary);
}
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item {
    padding: 0.2rem 0 !important;
    border: 0 !important;
}
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item-label {
    padding: 0 0.75rem 0 0 !important;
    min-width: 80px;
}
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item-label-text,
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item-label-content {
    font-weight: 700;
    color: var(--text-primary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item-content {
    padding: 0 !important;
    color: var(--text-primary);
    font-size: 0.95rem;
}
#ep-schedule-dx-grid .dx-adaptive-detail-row .dx-field-item-content .badge {
    vertical-align: middle;
}

/* #endregion */

/* =============================================================
 * loading.css – Page skeleton overlay, spinners, grid loaders
 * ============================================================= */

.display-settings-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1049;
    display: none;
    background: transparent;
}
.display-settings-backdrop.open { display: block; }

/* 68px = sticky header min-height — overlay fills the viewport below it. */
.ep-page-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: none;
    background: var(--bg-secondary);
    overflow: hidden;
    height: calc(100vh - 68px);
}
.ep-page-loading-overlay.open { display: flex; flex-direction: column; }

/* While the overlay is up, lock document scroll - the outgoing page is taller than the
   one-viewport overlay and would otherwise scroll into view beneath it. */
html.ep-page-loading,
html.ep-page-loading body { overflow: hidden; }

.ep-page-skeleton {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 1.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ep-page-skeleton .ep-skel-grid { flex: 1 1 auto; display: flex; flex-wrap: wrap; gap: 1rem; }
.ep-page-skeleton .ep-skel-tile { height: auto; min-height: 0; flex: 1 1 0; }

@media (max-width: 767.98px) {
    .ep-page-skeleton .ep-skel-tile {
        flex: 1 1 calc(50% - 0.5rem);
        min-height: 120px;
        max-height: 200px;
    }
}

.ep-skel-block {
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: ep-skeleton 1.4s ease-in-out infinite;
    border-radius: 0 !important;
}
.ep-skel-header { margin-bottom: 1.5rem; }
.ep-skel-title { height: 28px; width: 38%; margin-bottom: 0.6rem; }
.ep-skel-subtitle { height: 14px; width: 22%; }
.ep-skel-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.ep-skel-line { height: 14px; margin-bottom: 0.85rem; width: 100%; }
.ep-skel-line.w-75 { width: 75%; }
.ep-skel-line.w-50 { width: 50%; }
.ep-skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.ep-skel-tile {
    height: 140px;
    background: linear-gradient(90deg, var(--bg-tertiary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: ep-skeleton 1.4s ease-in-out infinite;
    border: 1px solid var(--border-color);
}
.ep-loading-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--bg-tertiary);
    border-top-color: var(--text-primary);
    border-radius: 50% !important;
    animation: ep-spin 0.8s linear infinite;
    flex: 0 0 auto;
    display: inline-block;
}

.programme-grid-loading,
.ep-details-loading {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-weight: 700;
}

@keyframes ep-spin { to { transform: rotate(360deg); } }
@keyframes ep-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================================
 * display-settings.css – Settings panel UI + body-class a11y options
 * Theme-specific overrides (high-contrast, monochrome) live in themes.css.
 * ============================================================= */

/* #region Panel UI (buttons, slide-out panel) */

.btn-access-header {
    background-color: var(--custom-grey);
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.btn-access-header:hover {
    background-color: #d1d1d1;
    color: var(--text-primary);
}

.display-settings-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100%;
    z-index: 1050;
    transform: translateX(100%);
    transition: transform 0.25s ease-in-out;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-left: 1px solid var(--border-color);
    overflow-y: auto;
}
.display-settings-panel.open { transform: translateX(0); }

.display-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}
.display-settings-body { padding: 1rem; }

.access-group {
    background-color: var(--bg-secondary);
    padding: 15px;
    margin-bottom: 15px;
}
.access-option-btn {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 10px;
    margin-bottom: 8px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    position: relative;
}
.access-option-btn:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--text-muted);
}
.access-option-btn.active,
.access-option-btn.theme-active {
    border: 2px solid var(--accent-color) !important;
    background-color: rgba(13, 110, 253, 0.1);
    font-weight: 700;
}
.access-option-btn.theme-active::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--accent-color);
}
.access-option-btn i {
    width: 20px;
    text-align: center;
}

/* #endregion */


/* #region Body-class a11y options (legible-mode, reduce-motion) */

body.legible-mode {
    font-family: Verdana, Arial, sans-serif !important;
    text-align: left !important;
}
body.legible-mode p,
body.legible-mode h1,
body.legible-mode h2,
body.legible-mode h3,
body.legible-mode h4,
body.legible-mode h5,
body.legible-mode h6,
body.legible-mode .card-body,
body.legible-mode .dropdown-item,
body.legible-mode .nav-link {
    text-align: left !important;
}

body:not(.reduce-motion) .carousel-item { transition: transform .6s ease-in-out; }
body.reduce-motion * { transition-duration: 0s !important; animation: none !important; }
/* WCAG: keep the loading spinner spinning — a frozen spinner reads as broken, not "loading". */
body.reduce-motion .ep-loading-spinner {
    animation: ep-spin 0.8s linear infinite !important;
}

/* #endregion */

/* =============================================================
 * dashboard.css – Highlights, countdown, adverts
 * ============================================================= */

/* #region Highlights (dashboard list + standalone page) */

.todays-highlights .media { display: flex; align-items: flex-start; }
.media-img {
    width: 150px;
    height: 100px;
    object-fit: cover;
    flex-shrink: 0;
    margin-right: 1rem !important;
    margin-bottom: 0;
}

.highlight-image-fallback {
    width: 150px;
    height: 100px;
    flex-shrink: 0;
    margin-right: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.todays-highlights .media-body a { color: var(--text-primary); font-weight: bold; }
.todays-highlights .media-body a:hover { color: var(--text-muted); text-decoration: underline; }

/* #endregion */


/* #region Adverts + countdown */

.dashboard-advert-card img {
    width: 100%;
    height: auto;
    display: block;
}

.ep-countdown { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.ep-countdown .unit {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: .75rem 1rem;
    text-align: center;
    min-width: 70px;
}
.ep-countdown .unit .value { font-size: 1.75rem; font-weight: 700; display: block; line-height: 1; }
.ep-countdown .unit .label { font-size: .7rem; text-transform: uppercase; color: var(--text-muted); }

/* #endregion */

/* Connect card: suggested attendees sharing research interests and/or standing groups. */
.ep-connect-refresh {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    padding: .25rem .5rem;
    line-height: 1;
    cursor: pointer;
}
.ep-connect-refresh:hover:not(:disabled),
.ep-connect-refresh:focus-visible { color: var(--text-primary); }
.ep-connect-refresh:disabled { opacity: .5; cursor: default; }

.ep-connect-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-tertiary);
}

/* Staff-managed splash content (pre-event / post-event Home). Authored HTML brings its own
   styling; these rules just keep it inside the column on small screens. */
.ep-splash-content { overflow-wrap: break-word; }
.ep-splash-content img { max-width: 100%; height: auto; }

/* Compact countdown on phones: four equal units on one row instead of an awkward 3 + 1 wrap. */
@media (max-width: 575.98px) {
    .ep-countdown { gap: 0.5rem; }
    .ep-countdown .unit {
        flex: 1 1 0;
        min-width: 0;
        padding: 0.6rem 0.25rem;
    }
    .ep-countdown .unit .value { font-size: 1.35rem; }
    .ep-countdown .unit .label { font-size: 0.6rem; }
}

/* #region Homepage splash screen displayed before/after an event */

.ep-splash-box {
    background: var(--custom-grey);
    padding: 1.5rem;
}
.ep-splash-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
}
.ep-splash-card {
    flex: 1 1 230px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--text-primary);
}
.event-platform .ep-splash-card-header {
    margin: 0;
    padding: 1.25rem 1rem;
    text-align: center;
    font-weight: 700;
    font-size: 1.1rem;
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text) !important;
}
.ep-splash-card--feature {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--btn-dark-bg);
}
/* The FA kit replaces <i>/<em> with <svg>, so target all three - the svg sizes via
   font-size and fills with currentColor. (<em> survives the admin HTML editor; <i> may not.) */
.event-platform .ep-splash-card--feature i,
.event-platform .ep-splash-card--feature em,
.event-platform .ep-splash-card--feature svg {
    font-size: 64px;
    font-style: normal;
    color: var(--btn-dark-text) !important;
}
.event-platform .ep-splash-feature-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--btn-dark-text) !important;
}
.ep-splash-card-body { flex: 1 1 auto; padding: 1rem; }
.ep-splash-card-body p:last-child { margin-bottom: 0; }
.ep-splash-card-footer { padding: 0.5rem 1rem 1rem; text-align: center; }
.event-platform .ep-splash-btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text) !important;
}
.event-platform .ep-splash-btn:hover,
.event-platform .ep-splash-btn:focus {
    background: var(--btn-dark-hover-bg);
    color: var(--btn-dark-text) !important;
    text-decoration: none;
}
.ep-splash-info { flex: 1 1 230px; }
.event-platform .ep-splash-badge,
.event-platform .ep-splash-badge span {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text) !important;
}
.event-platform .ep-splash-badge span { padding: 0; }
.event-platform .ep-splash-inline-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary) !important;
    text-decoration: underline;
}

/* #endregion */

/* =============================================================
 * programme.css – Plan-Your-Event tabs / mobile dropdown
 * ============================================================= */

/* #region Plan Your Event tabs (underline-indicator pattern) */

/* Custom tab class — sidesteps site-wide .btn conventions so the underline treatment owns the cascade. */
#PlanYourEventButtons.planYourEventTabs {
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}
#PlanYourEventButtons .planYourEventButton {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.6rem 1.1rem;
    margin: 0 0 -1px 0;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#PlanYourEventButtons .planYourEventButton:hover,
#PlanYourEventButtons .planYourEventButton:focus,
#PlanYourEventButtons .planYourEventButton:focus-visible {
    color: var(--text-primary);
    outline: none;
    box-shadow: none;
}
/* Active tab — locked across every interactive pseudo-state so its
   look can't drift on hover/focus/click. */
#PlanYourEventButtons .planYourEventButton.active,
#PlanYourEventButtons .planYourEventButton.active:hover,
#PlanYourEventButtons .planYourEventButton.active:focus,
#PlanYourEventButtons .planYourEventButton.active:focus-visible,
#PlanYourEventButtons .planYourEventButton.active:active {
    color: var(--text-primary);
    border-bottom-color: var(--text-primary);
    font-weight: 700;
}

/* #endregion */


/* #region Mobile dropdown (Plan Your Event) */

/* Uses --sidebar-* (constant across themes) instead of --btn-dark-* (which flips in dark). */
#PlanYourEventDropdownToggle.planYourEventMobileTrigger,
#PlanYourEventDropdownToggle.planYourEventMobileTrigger:hover,
#PlanYourEventDropdownToggle.planYourEventMobileTrigger:focus,
#PlanYourEventDropdownToggle.planYourEventMobileTrigger:active,
#PlanYourEventDropdownToggle.planYourEventMobileTrigger[aria-expanded="true"] {
    background-color: var(--sidebar-bg);
    border: 2px solid var(--sidebar-bg);
    color: var(--sidebar-text);
    padding: 0.95rem 1rem;
    font-weight: 600;
    box-shadow: none;
    outline: none;
}
#PlanYourEventDropdownToggle.planYourEventMobileTrigger #PlanYourEventCurrentTabLabel {
    color: var(--sidebar-text);
}

.planYourEventMobileNav .dropdown-menu {
    border: 2px solid var(--text-primary);
    border-top: 0;
    margin-top: 0;
    padding: 0;
    background-color: var(--bg-primary);
}
.planYourEventMobileNav .dropdown-item {
    padding: 0.85rem 1rem;
    color: var(--text-primary);
    white-space: normal;
}
.planYourEventMobileNav .dropdown-item:hover,
.planYourEventMobileNav .dropdown-item:focus {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}
.planYourEventMobileNav .dropdown-item.active,
.planYourEventMobileNav .dropdown-item:active {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
}

/* #endregion */

/* --- Keywords tab: expandable keyword list (EP-native, replaces the shared grid) --- */
.ep-kw-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.ep-kw-search {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}
.ep-kw-search i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-primary);
    pointer-events: none;
    z-index: 1;
}
.ep-kw-search input {
    padding-left: 2.4rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
/* Theme-accent focus instead of Bootstrap's compiled blue glow (invisible intent in high contrast). */
.ep-kw-search input:focus {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--accent-color);
    box-shadow: none;
    outline: 2px solid var(--accent-color);
    outline-offset: 0;
}
.ep-kw-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.ep-kw-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ep-kw-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    overflow: hidden;
}
.ep-kw-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.8rem 1rem;
    color: var(--text-primary);
}
.ep-kw-name {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}
.ep-kw-chips {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ep-kw-chip {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
}
.ep-kw-chip-chevron {
    font-size: 0.65em;
    margin-left: 0.3rem;
    transition: transform 0.15s ease;
}
.ep-kw-chip.active .ep-kw-chip-chevron { transform: rotate(180deg); }
.ep-kw-chip:hover { background: var(--bg-secondary); color: var(--text-primary); }
.ep-kw-chip:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}
.ep-kw-chip.active {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}

.ep-kw-body {
    padding: 0.25rem 1rem 1rem;
    border-top: 1px solid var(--border-color);
}
.ep-kw-group { padding-top: 0.75rem; }
.ep-kw-group-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 0.35rem;
}
.ep-kw-group-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color);
}
.ep-kw-group-list li {
    display: flex;
    align-items: stretch;
}
.ep-kw-group-list li + li { border-top: 1px solid var(--border-color); }
.ep-kw-itin {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    background: none;
    border: 0;
    border-right: 1px solid var(--border-color);
    color: var(--text-secondary);
    cursor: pointer;
}
.ep-kw-itin:hover { background: var(--bg-secondary); color: var(--text-primary); }
.ep-kw-itin:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}
.ep-kw-itin[aria-pressed="true"] { color: var(--text-primary); }
.ep-kw-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.75rem;
    background: none;
    border: 0;
    text-align: left;
    color: var(--text-primary);
    font-weight: 500;
    cursor: pointer;
}
.ep-kw-link:hover,
.ep-kw-link:focus-visible { background: var(--bg-secondary); }
.ep-kw-link:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}
.ep-kw-link-title { flex: 1 1 auto; min-width: 0; }
.ep-kw-link-chevron {
    flex: 0 0 auto;
    font-size: 0.7em;
    color: var(--text-secondary);
}

.ep-kw-noresults { padding: 2rem 0; text-align: center; }

/* Small screens: keyword on the first row, the count-chip buttons wrap underneath. */
@media (max-width: 575.98px) {
    .ep-kw-header { flex-wrap: wrap; }
    .ep-kw-chips {
        flex-basis: 100%;
        justify-content: flex-start;
        margin-top: 0.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ep-kw-chip-chevron { transition: none; }
}

/* #region Programme detail drill-downs (panel / section / paper) — EP-native redesign */

.ep-detail-title {
    overflow-wrap: break-word;
    word-break: break-word;
}
.ep-detail-code { font-weight: 700; }
.ep-detail-when { font-size: 0.9rem; }

/* Section headings sit above their card, quiet-spaced (matches the mockup's hierarchy). */
.ep-detail-section-title {
    margin: 0 0 0.6rem;
    color: var(--text-primary);
}

.ep-detail-abstract {
    white-space: pre-line;
    overflow-wrap: break-word;
    color: var(--text-primary);
}

/* The whole row is the drill target (role="button"); keep the pointer + a visible keyboard focus ring.
   Colours/hover come from the themed .list-group-item-action (shared with Connect/Attendees). */
.ep-detail-row { cursor: pointer; }
.ep-detail-row:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}
.ep-detail-paper-title { margin-top: 0.15rem; color: var(--text-secondary); }

.ep-detail-avatar {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--bg-tertiary);
}

.ep-detail-role {
    font-size: 0.8rem;
    white-space: nowrap;
}

/* Download lives inside a drill row but acts alone (the JS skips the row drill for nested links). */
.ep-detail-download {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    color: var(--text-secondary);
}
.ep-detail-download:hover,
.ep-detail-download:focus-visible { color: var(--text-primary); }

.ep-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.ep-detail-tag { font-weight: 500; }

.ep-detail-video { text-align: center; }
.ep-detail-video iframe { max-width: 100%; }

/* Detail-header itinerary toggle: a larger, leading tap target than the 36px schedule-grid toggle. */
.ep-itin-toggle-btn.ep-detail-itin {
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

/* Header action buttons (export to calendar, download paper) — proper tappable buttons (mobile-friendly),
   squared to match the platform; the disabled variant marks an unavailable paper. */
.ep-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ep-detail-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background-color: transparent;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.ep-detail-action-btn:hover,
.ep-detail-action-btn:focus-visible {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}
.ep-detail-action-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
}
.ep-detail-action-btn.is-disabled,
.ep-detail-action-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: transparent;
}

/* #endregion */

/* =============================================================
 * attendees.css — Attendees directory: toolbar (search/filter/sort),
 * A–Z index, surname-grouped card grid.
 * Desktop = banner+avatar cards; mobile = compact list rows.
 * ============================================================= */

/* Back/forward restore: hide the list and show a spinner until attendees.js
   re-applies the saved filters, so returning from a profile never flashes the
   unfiltered set. Spinner reuses the platform's .ep-loading-spinner. */
.ep-attendees-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 240px;
    color: var(--text-primary);
    font-weight: 700;
}
html.ep-attendees-restoring .ep-attendees-layout { display: none; }
html.ep-attendees-restoring #ep-attendees-count { visibility: hidden; }
html.ep-attendees-restoring .ep-attendees-loading { display: flex; }

/* #region Toolbar: search + filter + sort */

.ep-attendees-toolbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* ── Search (desktop: always-open field; mobile: icon that slides open) ── */
.ep-attendees-search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 340px;
    width: 340px;
    transition: max-width .28s ease, flex-basis .28s ease;
}
.ep-attendees-search-toggle {
    display: none;                 /* desktop: hidden, field is always shown */
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.ep-attendees-search-toggle span,
.ep-attendees-search-toggle i { color: inherit; }
.ep-attendees-search-field { position: relative; display: flex; align-items: center; width: 100%; }
.ep-attendees-search-icon {
    position: absolute;
    left: 0.85rem;
    color: var(--text-muted);
    pointer-events: none;
}
.ep-attendees-search-input {
    width: 100%;
    padding: 0.55rem 2.4rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 0;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.ep-attendees-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.ep-attendees-search-input::placeholder { color: var(--text-muted); }
.ep-attendees-search-input:focus {
    outline: none;
    border-color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, .06);
}
.ep-attendees-search-clear {
    position: absolute;
    right: 0.4rem;
    display: none;
    padding: 0.3rem 0.45rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.ep-attendees-search.has-text .ep-attendees-search-clear { display: block; }
.ep-attendees-search-clear:hover { color: var(--text-primary); }

/* ── Filter / Sort buttons ── */
.ep-attendees-controls { display: flex; gap: 0.5rem; flex: 0 0 auto; }
.ep-attendees-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--text-primary);
    color: var(--text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ep-attendees-tool-btn:hover,
.ep-attendees-tool-btn[aria-expanded="true"] {
    background-color: var(--text-primary);
    color: var(--bg-primary);
}
/* Inner <span>/<i> must follow the button colour, not the area-wide span rule. */
.ep-attendees-tool-btn span,
.ep-attendees-tool-btn i { color: inherit; }
.ep-attendees-sort-current { color: inherit; }
.ep-attendees-tool-badge {
    min-width: 18px;
    padding: 0 5px;
    background-color: var(--bg-tertiary);
    color: var(--text-primary) !important;
    font-size: 0.7rem;
    line-height: 18px;
    text-align: center;
}

/* ── Dropdown panels (drop directly under the clicked button) ── */
.ep-attendees-tool { position: relative; }
.ep-attendees-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 4px);
    z-index: 1060;
    display: none;
    min-width: 300px;
    max-width: calc(100vw - 2rem);
    padding: 0.85rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.ep-attendees-panel.is-open { display: block; }

/* ── Custom controls (accent-color, finger-friendly rows) ── */
.ep-attendees-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
}
.ep-attendees-check:hover { background-color: var(--bg-secondary); }
.ep-attendees-check-text { flex: 0 1 auto; white-space: nowrap; }
.ep-attendees-check-count { margin-left: auto; color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ep-attendees-check.is-disabled { opacity: 0.5; }
.ep-attendees-check.is-disabled:hover { background-color: transparent; }
.ep-attendees-check.is-disabled,
.ep-attendees-check.is-disabled input { cursor: default; }
.ep-attendees-check input { flex: 0 0 auto; width: 20px; height: 20px; cursor: pointer; }
.ep-attendees-check input[type="radio"] { accent-color: var(--accent-color); }
/* Square custom checkbox (rounded-0) with a drawn tick. */
.ep-attendees-check input[type="checkbox"] {
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background-color: var(--bg-primary);
}
.ep-attendees-check input[type="checkbox"]:checked {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
}
.ep-attendees-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ep-attendees-field-label {
    display: block;
    margin: 0.65rem 0 0.15rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
}
/* ── Role picker: custom dropdown, grey-highlight options ── */
.ep-rolepicker { position: relative; }
.ep-rolepicker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font: inherit;
    cursor: pointer;
}
.ep-rolepicker-trigger > i { color: var(--text-muted); font-size: 0.7rem; transition: transform .15s ease; }
.ep-rolepicker.is-open .ep-rolepicker-trigger > i { transform: rotate(180deg); }
.ep-rolepicker-menu {
    display: none;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.ep-rolepicker.is-open .ep-rolepicker-menu { display: block; }
.ep-rolepicker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 44px;
    padding: 0.6rem 0.75rem;
    text-align: left;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.ep-rolepicker-option:hover { background-color: var(--bg-secondary); }
.ep-rolepicker-option.is-selected { background-color: var(--bg-tertiary); font-weight: 700; }
.ep-rolepicker-option:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.ep-rolepicker-label { min-width: 0; }
.ep-rolepicker-count { flex: 0 0 auto; color: var(--text-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }

.ep-attendees-panel-clear { margin-top: 0.75rem; width: 100%; }

/* #endregion */


/* #region Active-filter chips */

.ep-attendees-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.ep-attendees-chips:empty { display: none; }
.ep-attendees-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.25rem 0.2rem 0.6rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    font-size: 0.8rem;
    color: var(--text-primary);
}
.ep-attendees-chip-label { line-height: 1.2; }
.ep-attendees-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
}
.ep-attendees-chip-remove:hover { color: var(--text-primary); background-color: var(--bg-tertiary); }
.ep-attendees-chips-clear {
    padding: 0.2rem 0.4rem;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
}
.ep-attendees-chips-clear:hover { color: var(--text-primary); }

/* #endregion */


/* #region Layout + A–Z index */

.ep-attendees-layout {
    position: relative;
    padding-right: 1.5rem;   /* gutter for the fixed A-Z index */
}
.ep-attendees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

/* Fixed + vertically centred so it sits mid-content as a thumb-reachable fast-scroll. */
.ep-attendees-index {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 1020;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.25rem 0.15rem;
}
.ep-attendees-index-letter {
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text-muted);
    text-decoration: none;
}
.ep-attendees-index-letter:hover { color: var(--text-primary); }
.ep-attendees-index-letter.is-active {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

/* While the page-load skeleton is up, hide the fixed index so it doesn't float over
   it. Overlay and view are siblings in <main>. */
#epPageLoadingOverlay.open ~ #ep-attendees-view .ep-attendees-index { display: none; }

/* #endregion */


/* #region Letter headings + empty state (full-row grid items) */

.ep-attendees-letter-heading {
    grid-column: 1 / -1;
    position: sticky;
    top: 68px;
    z-index: 4;
    margin: 0;
    padding: 0.35rem 0;
    scroll-margin-top: 80px;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}
.ep-attendees-noresults { grid-column: 1 / -1; padding: 2rem 0; text-align: center; }

/* #endregion */


/* #region Attendee card (desktop: banner + avatar) */

.ep-attendee-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 1rem 1rem;
    text-align: center;
    font: inherit;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    cursor: pointer;
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ep-attendee-card:hover {
    border-color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
/* Attendees with no profile slug render as a non-link <a> (no href) - not interactive. */
.ep-attendee-card:not([href]) { cursor: default; }
.ep-attendee-card:not([href]):hover { border-color: var(--border-color); box-shadow: none; transform: none; }
/* An <img loading="lazy"> rather than a background-image: backgrounds can't lazy-load, and on
   mobile (where this is display:none) a background would still download - a hidden lazy img never does. */
.ep-attendee-banner {
    display: block;
    width: calc(100% + 2rem);
    margin: 0 -1rem;
    height: 64px;
    background-color: var(--bg-tertiary);
    object-fit: cover;
}
.ep-attendee-avatar {
    width: 72px;
    height: 72px;
    margin-top: -36px;
    border-radius: 50%;
    border: 3px solid var(--bg-primary);
    object-fit: cover;
    background-color: var(--bg-tertiary);
}
.ep-attendee-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: 100%;
    margin-top: 0.5rem;
}
.ep-attendee-name { font-weight: 700; line-height: 1.25; }
.ep-attendee-institution { font-size: 0.8rem; line-height: 1.3; color: var(--text-muted); }
.ep-attendee-interests { font-size: 0.75rem; color: var(--accent-color); }
.ep-attendee-orbadge {
    position: absolute;
    top: 70px;            /* just below the 64px banner */
    left: 0.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}
.ep-attendee-orbadge i { color: inherit; }
.ep-attendee-chevron { display: none; }   /* whole card is the target on desktop */

/* #endregion */


/* #region Accessibility: focus rings + reduced motion */

/* Keyboard focus ring for toolbar controls (cards/search keep their natural focus).
   !important beats the core bundle's `button:focus { outline:none !important }`. */
.ep-attendees-tool-btn:focus-visible,
.ep-attendees-search-toggle:focus-visible,
.ep-attendees-search-clear:focus-visible,
.ep-rolepicker-trigger:focus-visible,
.ep-attendees-panel-clear:focus-visible,
.ep-attendees-chip-remove:focus-visible,
.ep-attendees-chips-clear:focus-visible {
    outline: 2px solid var(--text-primary) !important;
    outline-offset: 2px;
}
.ep-rolepicker-option:focus-visible {
    outline: 2px solid var(--text-primary) !important;
    outline-offset: -2px;   /* inset so it isn't clipped by the scrolling menu */
}

@media (prefers-reduced-motion: reduce) {
    .ep-attendees-search,
    .ep-attendee-card,
    .ep-attendees-tool-btn,
    .ep-rolepicker-trigger > i { transition: none; }
}

/* #endregion */


/* #region Mobile: list rows + edge-pinned index + expanding search */

@media (max-width: 767.98px) {
    /* Inline [Search][Filter][Sort]. Tapping search grows it in-flow, sliding
       Filter/Sort off (clipped by the page); the ✕ clears + collapses it back. */
    .ep-attendees-search { flex: 0 0 auto; width: auto; max-width: 160px; }
    .ep-attendees-search-toggle { display: inline-flex; }
    .ep-attendees-search-field { display: none; }
    .ep-attendees-search.is-open { flex: 1 1 100%; max-width: 100%; }
    .ep-attendees-search.is-open .ep-attendees-search-toggle { display: none; }
    .ep-attendees-search.is-open .ep-attendees-search-field { display: flex; }
    .ep-attendees-search.is-open .ep-attendees-search-clear { display: block; }

    /* Panels anchor to the toolbar and span full width. */
    .ep-attendees-tool { position: static; }
    .ep-attendees-panel { left: 0; right: 0; min-width: 0; max-width: none; }

    /* Sort: drop the label suffix for space; a dot marks a non-default sort. */
    .ep-attendees-sort-current { display: none; }
    .ep-attendees-tool-btn[data-ep-dropdown="sort"].is-active::after {
        content: '';
        width: 6px;
        height: 6px;
        margin-left: 0.1rem;
        border-radius: 50%;
        background-color: currentColor;
    }

    .ep-attendees-grid { grid-template-columns: 1fr; gap: 0; }
    .ep-attendee-card {
        flex-direction: row;
        align-items: center;
        gap: 0.85rem;
        padding: 0.7rem 0.5rem;
        text-align: left;
        border-width: 0 0 1px 0;
    }
    .ep-attendee-card:hover { transform: none; box-shadow: none; }   /* rows don't lift; focus ring kept */
    .ep-attendee-banner { display: none; }
    .ep-attendee-avatar {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
        margin-top: 0;
        border-width: 0;
    }
    .ep-attendee-body { flex: 1 1 auto; min-width: 0; margin-top: 0; }
    .ep-attendee-name,
    .ep-attendee-institution,
    .ep-attendee-interests {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .ep-attendee-orbadge { position: static; align-self: flex-start; margin-top: 0.15rem; }
    .ep-attendee-chevron { display: block; flex: 0 0 auto; color: var(--text-muted); }

    /* Closer to the edge (no desktop scrollbar) and nudged down so it doesn't sit
       tight under the header. Letter sizing + gutter come from the base rules. */
    .ep-attendees-index { right: 2px; top: calc(50% + 10px); }
}

/* #endregion */

/* =============================================================
 * attendee-profile.css — individual attendee profile page:
 * banner+avatar header, About, interests, groups, papers & roles.
 * Monochrome (no accent/blue); mutual interests/groups share one
 * inverted-fill highlight. Sessions drill into panel details.
 * ============================================================= */

.ep-attendee-profile {
    max-width: 720px;
    margin: 0 auto;
}

/* #region Header */

.ep-profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1.1rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.ep-profile-header-text {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ep-profile-banner {
    width: 100%;
    height: 120px;
    background-color: var(--bg-tertiary);
    background-size: cover;
    background-position: center;
}
.ep-profile-avatar {
    width: 112px;
    height: 112px;
    margin-top: -56px;
    border-radius: 50%;
    border: 4px solid var(--bg-primary);
    object-fit: cover;
    background-color: var(--bg-tertiary);
}
.ep-profile-name { margin: 0.6rem 0 0; font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.ep-profile-institution { margin: 0.1rem 1rem 0; font-weight: 600; }
.ep-profile-orbadge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

/* #endregion */


/* #region Cards + sections */

.ep-profile-card {
    margin-bottom: 1rem;
    padding: 1.1rem 1.25rem;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
}
.ep-profile-section-title { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; }
.ep-profile-bio { margin: 0; white-space: pre-wrap; overflow-wrap: break-word; line-height: 1.5; color: var(--text-primary); }
.ep-profile-mutual-note { margin: 0 0 0.6rem; font-size: 0.8rem; color: var(--text-muted); }

/* #endregion */


/* #region Interests chips + Groups (shared inverted-fill highlight) */

.ep-profile-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.ep-profile-chip {
    padding: 0.2rem 0.55rem;
    font-size: 0.8rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}
/* Mutual = shared with the viewer. Monochrome inverted fill (no accent/blue). */
.ep-profile-chip.is-mutual,
.ep-profile-group.is-mutual {
    border-color: var(--text-primary);
    background-color: var(--text-primary);
    color: var(--bg-primary);
}

.ep-profile-groups { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ep-profile-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color .15s ease, opacity .15s ease;
}
.ep-profile-group[href]:hover { border-color: var(--text-primary); }
/* The highlighted (mutual) item is dark-filled, so a border tweak won't read - fade it on hover instead. */
.ep-profile-group.is-mutual[href]:hover { opacity: 0.85; }
.ep-profile-group-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ep-profile-group-name { font-weight: 600; }
.ep-profile-group-meta { font-size: 0.8rem; color: var(--text-muted); }
.ep-profile-group-ext { flex: 0 0 auto; color: var(--text-muted); font-size: 0.8rem; }
/* On the inverted highlight set the readable colour explicitly - the name otherwise takes the dark fill. */
.ep-profile-group.is-mutual .ep-profile-group-name { color: var(--bg-primary); }
.ep-profile-group.is-mutual .ep-profile-group-meta,
.ep-profile-group.is-mutual .ep-profile-group-ext { color: var(--bg-primary); opacity: 0.8; }

.ep-profile-socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ep-profile-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.ep-profile-social:hover { border-color: var(--text-primary); background-color: var(--bg-tertiary); }

/* #endregion */


/* #region Papers and roles */

.ep-profile-sessions { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.ep-profile-session {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}
.ep-profile-session:last-child { border-bottom: 0; }

/* Itinerary join/leave (start) — same calendar icon as the Programme; plain icon button.
   Light/outline icon when not added, solid filled once added (set in markup + JS). */
.ep-profile-itinerary-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color .15s ease;
}
.ep-profile-itinerary-btn:hover { background-color: var(--bg-tertiary); }
.ep-profile-itinerary-btn:disabled { opacity: .5; cursor: default; }

/* Main row area — clickable, drills into the component's details; squared arrow signals it. */
.ep-profile-session-main {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    min-width: 0;
    padding: 0.75rem 0.5rem;
    background: transparent;
    border: 0;
    text-align: left;
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
}
.ep-profile-session-main--static { cursor: default; }
button.ep-profile-session-main:hover { background-color: var(--bg-secondary); }

.ep-profile-session-body { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.ep-profile-session-role { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.ep-profile-session-title { font-weight: 600; line-height: 1.3; }
.ep-profile-session-when,
.ep-profile-session-room { font-size: 0.8rem; color: var(--text-muted); }

.ep-profile-session-arrow {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}
button.ep-profile-session-main:hover .ep-profile-session-arrow {
    color: var(--text-primary);
    border-color: var(--text-primary);
}

/* #endregion */


/* #region Accessibility + responsive */

.ep-profile-itinerary-btn:focus-visible,
.ep-profile-session-main:focus-visible,
.ep-profile-group:focus-visible,
.ep-profile-social:focus-visible {
    outline: 2px solid var(--text-primary) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ep-profile-itinerary-btn { transition: none; }
}

@media (max-width: 767.98px) {
    .ep-profile-card { padding: 1rem; }

    /* Reclaim vertical space: drop the banner, lay the avatar left of the details. */
    .ep-profile-header {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 0.9rem;
        padding: 1rem;
    }
    .ep-profile-banner { display: none; }
    .ep-profile-avatar {
        flex: 0 0 auto;
        width: 80px;
        height: 80px;
        margin-top: 0;
        border: 2px solid var(--border-color);
    }
    .ep-profile-header-text {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }
    .ep-profile-name { margin-top: 0; font-size: 1.15rem; }
    .ep-profile-institution { margin-left: 0; margin-right: 0; }
}

/* #endregion */

/* =============================================================
 * exhibitors.css — Exhibitors banner grid + full-page exhibit detail.
 * ============================================================= */

/* 6-column base so the banner widths map cleanly: Full spans 6, Half 3, Third 2. */
.ep-exhibitors-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.25rem;
    align-items: start;
}
.ep-exhibitor-col { grid-column: span 6; }

@media (min-width: 576px) {
    .ep-exhibitor-col--half,
    .ep-exhibitor-col--third { grid-column: span 3; }
}
@media (min-width: 992px) {
    .ep-exhibitor-col--third { grid-column: span 2; }
}

.ep-exhibitor-banner {
    display: block;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ep-exhibitor-banner img {
    display: block;
    width: 100%;
    height: auto;
}
.ep-exhibitor-banner:hover,
.ep-exhibitor-banner:focus-visible {
    border-color: var(--text-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
    transform: translateY(-2px);
    outline: none;
}

.ep-exhibitor-content {
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    padding: 1rem 1.25rem;
}
.ep-exhibitor-content img {
    max-width: 100%;
    height: auto;
}

/* Admin CustomContent uses the site's Bootstrap colour utilities; the brand-dark .bg-primary
   leaves muted utilities like .text-secondary unreadable, so force light text on those blocks. */
.ep-exhibitor-content .bg-primary,
.ep-exhibitor-content .bg-primary * {
    color: #ffffff !important;
}

/* =============================================================
 * my-items.css - My Items: paper upload management + my sessions.
 * ============================================================= */

.ep-myitems-heading { margin-bottom: 0.75rem; }

.ep-mypaper-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ep-mypaper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
}
.ep-mypaper.is-busy { opacity: 0.6; pointer-events: none; }

.ep-mypaper-main {
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: inherit;
}
.ep-mypaper-main:hover .ep-mypaper-title,
.ep-mypaper-main:focus-visible .ep-mypaper-title { text-decoration: underline; }
.ep-mypaper-main:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ep-mypaper-title { font-weight: 700; color: var(--text-primary); }
.ep-mypaper-meta > span { margin-right: 0.35rem; }
.ep-mypaper-role { font-weight: 600; color: var(--text-primary); }

.ep-mypaper-side {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}
.ep-mypaper-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ep-mypaper-filename {
    font-weight: 400;
    color: var(--text-muted);
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-mypaper-spinner { display: none; color: var(--text-muted); }
.ep-mypaper.is-busy .ep-mypaper-spinner { display: inline-flex; }
.ep-mypaper-view {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}
.ep-mypaper-view:hover,
.ep-mypaper-view:focus-visible { text-decoration: none; }

.ep-mypaper-actions { display: flex; gap: 0.4rem; }
.ep-mypaper-btn {
    padding: 0.35rem 0.8rem;
    font-size: 0.85rem;
    border: 1px solid var(--text-primary);
    background-color: transparent;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.ep-mypaper-btn:hover,
.ep-mypaper-btn:focus-visible { background-color: var(--bg-tertiary); outline: none; }
.ep-mypaper-btn:disabled { opacity: 0.5; cursor: default; }
.ep-mypaper-btn-primary {
    background-color: var(--btn-dark-bg);
    color: var(--btn-dark-text);
    border-color: var(--btn-dark-bg);
}
.ep-mypaper-btn-primary:hover,
.ep-mypaper-btn-primary:focus-visible {
    background-color: var(--btn-dark-hover-bg);
    color: var(--btn-dark-text);
}

.ep-mysession-role { font-weight: 600; }
.ep-mysession-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    cursor: pointer;
}
.ep-mysession-arrow { color: var(--text-muted); flex-shrink: 0; }

/* =============================================================
 * guide.css – Platform Guide (attendee documentation page).
 * Docs-style layout: sticky grouped sidebar + one panel at a time
 * (overview card grid or a single topic).  guide.js injects the
 * mobile back bar and the prev/next pager into each topic panel.
 * ============================================================= */

.ep-guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
    max-width: 1180px;
}
@media (min-width: 992px) {
    .ep-guide { grid-template-columns: 230px minmax(0, 1fr); }
}
.ep-guide-main { min-width: 0; }

/* ---- Sidebar (desktop only; the overview cards are the nav on mobile) ---- */
.ep-guide-nav {
    display: none;
    position: sticky;
    top: 84px; /* clears the sticky platform header */
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 0.25rem 0;
}
@media (min-width: 992px) {
    .ep-guide-nav { display: block; }
}
.ep-guide-nav-group { padding: 0.65rem 0; }
.ep-guide-nav-group + .ep-guide-nav-group { border-top: 1px solid var(--border-color); }
.ep-guide-nav-label {
    margin: 0 0 0.25rem;
    padding: 0 1rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ep-guide-nav-link {
    display: block;
    width: 100%;
    padding: 0.45rem 1rem;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
}
.ep-guide-nav-link:hover { background: var(--bg-secondary); }
.ep-guide-nav-link:focus-visible { outline: 2px solid var(--accent-color); outline-offset: -2px; }
/* Active marker uses text-primary, not accent: accent is the focus colour and is blue in light theme. */
.ep-guide-nav-link[aria-current="true"] {
    background: var(--bg-secondary);
    border-left-color: var(--text-primary);
    font-weight: 700;
}

/* ---- Overview cards ---- */
.ep-guide-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
@media (min-width: 768px) {
    .ep-guide-cards { grid-template-columns: 1fr 1fr; }
}
.ep-guide-card {
    display: block;
    width: 100%;
    padding: 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 0;
    background: var(--bg-primary);
    text-align: left;
    cursor: pointer;
}
.ep-guide-card:hover { background: var(--bg-secondary); }
.ep-guide-card:hover .ep-guide-card-icon { background: var(--bg-primary); }
.ep-guide-card:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
.ep-guide-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 17px;
}
.ep-guide-card-title {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}
.ep-guide-card-text {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* ---- Topic panels ---- */
.ep-guide-section { margin-bottom: 0; }

.ep-guide-back {
    display: inline-flex;
    align-items: center;
    margin-bottom: 1rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}
.ep-guide-back::before { content: "\2190"; margin-right: 0.5rem; }
.ep-guide-back:hover { background: var(--bg-secondary); }
.ep-guide-back:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
@media (min-width: 992px) {
    .ep-guide-back { display: none; } /* the sidebar covers it on desktop */
}

/* ---- Prev / next pager ---- */
.ep-guide-pager {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}
.ep-guide-pager-link {
    flex: 0 1 48%;
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    text-align: left;
    cursor: pointer;
}
.ep-guide-pager-link--next { margin-left: auto; text-align: right; }
.ep-guide-pager-link:hover { background: var(--bg-secondary); }
.ep-guide-pager-link:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }
.ep-guide-pager-kicker {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ep-guide-pager-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ---- Shared content styles ---- */
.ep-guide-steps,
.ep-guide-list { padding-left: 1.25rem; margin-bottom: 1rem; }
.ep-guide-steps li { margin-bottom: 0.5rem; }
.ep-guide-list li { margin-bottom: 0.4rem; }
.ep-guide-steps li:last-child,
.ep-guide-list li:last-child { margin-bottom: 0; }
.ep-guide-steps:last-child,
.ep-guide-list:last-child { margin-bottom: 0; }

.ep-guide-tip {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-left: 3px solid var(--text-primary);
}

.ep-guide-inline-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-primary);
    text-decoration: underline;
}

/* =============================================================
 * events.css - Public events lobby (events.ecpr.eu landing).
 * Themed card grid + a theme-aware brand masthead; no per-event chrome.
 * ============================================================= */

/* Single-row masthead driven by the design tokens: a light surface in the light / monochrome
   themes and a dark surface in dark / high-contrast - no hardcoded colours, no !important. */
.ep-public-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1.25rem;
    background-color: var(--bg-secondary);
    background-image: var(--ep-texture-squares);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}
.ep-public-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ep-public-logo { height: 60px; width: auto; display: block; }
/* White logo on the dark-surface themes; the dark logo elsewhere. */
.ep-public-logo--dark { display: none; }
[data-theme="dark"] .ep-public-logo--light,
[data-theme="high-contrast"] .ep-public-logo--light { display: none; }
[data-theme="dark"] .ep-public-logo--dark,
[data-theme="high-contrast"] .ep-public-logo--dark { display: block; }

.ep-public-titles { display: flex; flex-direction: column; justify-content: center; }
.ep-public-title { margin: 0; font-size: 1.4rem; font-weight: 700; line-height: 1.15; color: var(--text-primary); }

.ep-public-header-actions { margin-left: auto; flex-shrink: 0; }

.ep-public-header .btn-access-header,
.ep-public-header .btn-access-header i { color: var(--text-primary); }
.ep-public-header .btn-access-header {
    background-color: transparent;
    border: 1px solid var(--border-color);
}
.ep-public-header .btn-access-header:hover,
.ep-public-header .btn-access-header:focus { background-color: var(--bg-tertiary); }
/* Mobile: the label is hidden (icon only), so drop the box border, enlarge the icon and sit it flush right. */
@media (max-width: 767.98px) {
    .ep-public-header .btn-access-header { border: 0; padding: 0.35rem; margin-right: 0 !important; }
    .ep-public-header .btn-access-header:hover,
    .ep-public-header .btn-access-header:focus { background-color: transparent; }
    .ep-public-header .btn-access-header i { font-size: 1.5rem; margin-right: 0 !important; }
}

/* Sticky footer so Accessibility sits at the bottom of the screen even on short pages. */
.ep-public-body { min-height: 100vh; display: flex; flex-direction: column; }
.ep-public-main { width: 100%; flex: 1 0 auto; }

.ep-public-footer {
    padding: 1.25rem;
    text-align: left;
    border-top: 1px solid var(--border-color);
}
/* Own hover colours - the global a:hover turns links light, which vanishes on the footer. */
.ep-public-footer a { color: var(--text-muted); text-decoration: none; }
.ep-public-footer a:hover,
.ep-public-footer a:focus { color: var(--text-primary); background: transparent; text-decoration: underline; }

/* Access-restricted actions: stacked, content-width and centred on desktop; full-width on phones for easy tapping. */
.ep-restricted-actions { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
@media (max-width: 575.98px) {
    .ep-restricted-actions .btn { width: 100%; }
}

/* Advert strip - centred above the listing. */
.ep-events-adverts { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.ep-events-ad { width: 100%; max-width: 66%; }

/* Controls: section toggle + organiser filter. */
.ep-events-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.5rem;
}
.ep-events-tabs { display: inline-flex; border: 1px solid var(--border-color); }
.ep-events-tab {
    padding: 0.5rem 1rem;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
}
.ep-events-tab + .ep-events-tab { border-left: 1px solid var(--border-color); }
.ep-events-tab.active { background-color: var(--btn-dark-bg); color: var(--btn-dark-text); }
.ep-events-tab:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -2px; }

/* Organiser filter - custom dropdown styled like a select (Bootstrap dropdown under the hood). */
.ep-events-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-width: 16rem;
    max-width: 100%;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.ep-events-filter-btn:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.ep-events-filter-menu { min-width: 16rem; max-height: 20rem; overflow-y: auto; }

/* Keep menu items legible - the theme's default active state can be dark-on-dark. The #id keeps
   these ahead of the themed Bootstrap dropdown rules without needing !important. */
#ep-events-view .ep-events-filter-menu .dropdown-item { color: var(--text-primary); background-color: transparent; }
#ep-events-view .ep-events-filter-menu .dropdown-item:hover,
#ep-events-view .ep-events-filter-menu .dropdown-item:focus { background-color: var(--bg-tertiary); color: var(--text-primary); }
#ep-events-view .ep-events-filter-menu .dropdown-item.active { background-color: var(--bg-tertiary); color: var(--text-primary); font-weight: 700; }

/* Checkmark the selected option so the active item is unmistakable in every theme - a colour highlight
   alone vanishes on high-contrast, where the active background matches the menu. Applies to both filters. */
.ep-events-filter-menu .dropdown-item { position: relative; padding-left: 1.9rem; }
.ep-events-filter-menu .dropdown-item.active::before {
    content: '\2713';
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
}

/* Card grid - larger cards, centred so a short row doesn't hug the left edge. */
/* Explicit responsive columns (like the legacy CardsPerRow=4) - a fixed track count means a
   single filtered result stays one-column wide instead of stretching to the full row. */
.ep-events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
}
@media (max-width: 1199.98px) { .ep-events-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991.98px)  { .ep-events-grid { grid-template-columns: repeat(2, 1fr); } }

.ep-event-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    text-decoration: none;
    overflow: hidden;
    transition: border-color .15s ease;
}
.ep-event-card:hover,
.ep-event-card:focus-visible {
    border-color: var(--text-primary);
    outline: none;
    text-decoration: none;
    color: var(--text-primary);
}

.ep-event-card-media {
    position: relative;
    aspect-ratio: 9 / 4;
    overflow: hidden;
    background-color: var(--sidebar-bg);   /* only visible on the no-image fallback */
}
/* Wide, short banner matching the legacy lobby (.signpostImg = background-size: cover at ~200px).
   The wider frame shows far more of the (wide) event images than 16:9 did; cover keeps it gap-free. */
.ep-event-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Organising body as a reversed-out label, top-right of the image (replaces the old type badge).
   #id-scoped so the white text wins over the theme's text-colour rules (same as the old badge). */
#ep-events-view .ep-event-card-group {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100%;
    padding: .3rem .6rem;
    background-color: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Title now lives in the body as the card heading (themed, not on the image). */
.ep-event-card-body { display: flex; flex-direction: column; gap: .5rem; padding: .9rem; }
.ep-event-card-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.ep-event-card-note { margin: 0; padding-top: .6rem; border-top: 1px solid var(--border-color); font-size: .72rem; color: var(--text-muted); }

@media (max-width: 991.98px) {
    .ep-events-ad { max-width: 100%; }
}
@media (max-width: 575.98px) {
    .ep-events-grid { grid-template-columns: 1fr; }
    .ep-public-logo { height: 46px; }
    .ep-public-title { font-size: 1.2rem; }
}

/* =============================================================
 * responsive.css – Breakpoint overrides (mobile / desktop split)
 * ============================================================= */

/* #region Tablet+ (≥768px) — highlights media layout */

@media (min-width: 768px) {
    .todays-highlights .media { display: flex; }
    .media-img {
        width: 150px;
        height: 100px;
        margin-right: 1rem !important;
        margin-bottom: 0;
    }
}

/* #endregion */


/* #region Desktop (≥992px) — persistent sidebar + minimised state */

@media (min-width: 992px) {
    body.event-platform { padding-bottom: 0; }

    /* align-self: flex-start stops the flex parent stretching the sidebar past 100vh. */
    #ep-sidebar,
    #ep-sidebar.collapsed {
        position: sticky;
        top: 0;
        height: 100vh;
        align-self: flex-start;
        margin-left: 0;
    }
    #ep-sidebar {
        display: flex;
        flex-direction: column;
        transition: width 0.3s ease-in-out, min-width 0.3s ease-in-out;
    }

    /* Overrides layout.css's absolute footer so flex's margin-top: auto can pin it. */
    #ep-sidebar .sidebar-footer {
        position: static;
        margin-top: auto;
    }

    #ep-sidebar .components {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
    }

    #ep-sidebar-overlay { display: none !important; }
    #ep-bottom-nav { display: none; }

    /* Minimised sidebar — two selectors so it works pre-paint
       (html class set in <head>) AND after JS-driven toggles. */
    html.ep-sidebar-minimized #ep-sidebar,
    #ep-sidebar.minimized {
        width: 80px;
        min-width: 80px;
    }
    html.ep-sidebar-minimized #ep-sidebar .nav-link span,
    #ep-sidebar.minimized .nav-link span {
        opacity: 0;
        display: none;
    }
    html.ep-sidebar-minimized #ep-sidebar .sidebar-header .ep-sidebar-logo,
    #ep-sidebar.minimized .sidebar-header .ep-sidebar-logo {
        max-width: 36px;
    }
    html.ep-sidebar-minimized #ep-sidebar #datetime-widget-full,
    #ep-sidebar.minimized #datetime-widget-full {
        display: none;
    }
    html.ep-sidebar-minimized #ep-sidebar #datetime-widget-mini,
    #ep-sidebar.minimized #datetime-widget-mini {
        display: block !important;
    }
    /* Expand tween: sidebar.js holds .dates-hold until the width finishes, keeping the compact
       date until the sidebar is fully open so the full date never wraps into the narrow space. */
    #ep-sidebar.dates-hold #datetime-widget-full { display: none; }
    #ep-sidebar.dates-hold #datetime-widget-mini { display: block !important; }
    html.ep-sidebar-minimized #ep-sidebar .nav-link,
    #ep-sidebar.minimized .nav-link {
        padding: 1.15rem 0;
        justify-content: center;
    }
    html.ep-sidebar-minimized #ep-sidebar .nav-link:hover,
    #ep-sidebar.minimized .nav-link:hover { padding-left: 0; }
    html.ep-sidebar-minimized #ep-sidebar .nav-item.active .nav-link,
    #ep-sidebar.minimized .nav-item.active .nav-link { padding-left: 0; }
    html.ep-sidebar-minimized #ep-sidebar .fas,
    html.ep-sidebar-minimized #ep-sidebar .fa-sharp,
    #ep-sidebar.minimized .fas,
    #ep-sidebar.minimized .fa-sharp { margin-right: 0; }
    html.ep-sidebar-minimized #ep-sidebar .sidebar-mobile-settings,
    #ep-sidebar.minimized .sidebar-mobile-settings { display: none !important; }
}

/* #endregion */


/* #region Under-lg (≤991.98px) — slide-up mobile sidebar + Plan-Your-Event buttons */

@media (max-width: 991.98px) {
    #ep-sidebar {
        width: 100%;
        min-width: 100%;
        top: auto;
        bottom: 0;
        height: 78vh;
        border-radius: 18px 18px 0 0 !important;
        transform: translateY(100%);
        margin-left: 0;
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }
    #ep-sidebar.open { transform: translateY(0); margin-left: 0; }
    #ep-sidebar.collapsed { margin-left: 0; }

    #ep-sidebar .components {
        flex: 1 1 auto;
        overflow-y: auto;
    }
    #ep-sidebar .sidebar-footer {
        position: static;
        margin-top: auto;
        flex-shrink: 0;
        border-top: 0;
        padding-top: 0 !important;
    }
    .sidebar-mobile-settings { margin-top: 0; }

    #PlanYourEventButtons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    .planYourEventButton {
        min-width: auto;
        flex: 0 1 calc(50% - 0.5rem);
        min-height: 3.4rem;
        margin: 0 !important;
        padding: 0.55rem 0.7rem !important;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: normal;
        line-height: 1.1;
    }
}

/* #endregion */

/* =============================================================
 * themes.css – Theme-specific overrides ([data-theme] selectors)
 * Variable defaults live in variables.css; this file carries the
 * cases where the variable cascade alone isn't enough (DevExtreme,
 * !important contests, monochrome filter, etc.).
 * ============================================================= */

/* Render native control popups (e.g. the <select> day filter) dark, not the browser default light. */
[data-theme="dark"] .event-platform .form-control,
[data-theme="high-contrast"] .event-platform .form-control { color-scheme: dark; }

/* #region Monochrome */

[data-theme="monochrome"] img,
[data-theme="monochrome"] video,
[data-theme="monochrome"] iframe,
[data-theme="monochrome"] embed {
    filter: grayscale(100%);
}
[data-theme="monochrome"] .access-option-btn.active,
[data-theme="monochrome"] .access-option-btn.theme-active {
    background-color: rgba(0, 0, 0, 0.06);
}
[data-theme="monochrome"] .access-option-btn.theme-active::after {
    color: var(--accent-color);
}

/* #endregion */


/* #region High contrast */

[data-theme="high-contrast"] .card,
[data-theme="high-contrast"] .list-group-item,
[data-theme="high-contrast"] .dropdown-menu,
[data-theme="high-contrast"] .modal-content,
[data-theme="high-contrast"] .access-option-btn {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffffff !important;
}
[data-theme="high-contrast"] .text-muted { color: #00ff00 !important; }
[data-theme="high-contrast"] .btn-light,
[data-theme="high-contrast"] .btn-access-header,
[data-theme="high-contrast"] .dropdown-toggle {
    background-color: transparent !important;
    color: #ffff00 !important;
    border: 1px solid #ffff00 !important;
}
[data-theme="high-contrast"] .btn-light:hover,
[data-theme="high-contrast"] .btn-access-header:hover,
[data-theme="high-contrast"] .dropdown-toggle:hover {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

[data-theme="high-contrast"] .card-header,
[data-theme="high-contrast"] .card-footer,
[data-theme="high-contrast"] .card-header.bg-secondary,
[data-theme="high-contrast"] .card-accordion,
[data-theme="high-contrast"] .card-header-accordion {
    background-color: #000000 !important;
    color: #ffff00 !important;
    border-color: #ffffff !important;
}
[data-theme="high-contrast"] .card-header .text-primary,
[data-theme="high-contrast"] .card-header-accordion .text-primary,
[data-theme="high-contrast"] .accordion-icon,
[data-theme="high-contrast"] .accordion-icon:before {
    color: #ffff00 !important;
}

[data-theme="high-contrast"] .btn-secondary,
[data-theme="high-contrast"] .btn-secondary:hover,
[data-theme="high-contrast"] .btn-secondary:focus,
[data-theme="high-contrast"] .btn-secondary:active,
[data-theme="high-contrast"] .btn-dark,
[data-theme="high-contrast"] a.btn-dark,
[data-theme="high-contrast"] .btn-dark:hover,
[data-theme="high-contrast"] .btn-dark:focus,
[data-theme="high-contrast"] .btn-dark:active {
    background-color: #ffff00 !important;
    border-color: #ffff00 !important;
    color: #000000 !important;
}
/* Lock the entire btn-dark / btn-secondary subtree to black so the
   global `.event-platform span { color: var(--text-primary) }` rule
   doesn't push inner labels to yellow-on-yellow. */
[data-theme="high-contrast"] .btn-dark span,
[data-theme="high-contrast"] .btn-dark i,
[data-theme="high-contrast"] .btn-dark svg,
[data-theme="high-contrast"] .btn-secondary span,
[data-theme="high-contrast"] .btn-secondary i,
[data-theme="high-contrast"] .btn-secondary svg {
    color: #000000 !important;
}

[data-theme="high-contrast"] .profile-avatar-fallback {
    border-color: #ffff00 !important;
}

/* Sidebar footer date/time — layout.css pins these to white with
   !important so the variable cascade can't reach them. */
[data-theme="high-contrast"] #ep-sidebar .sidebar-footer p,
[data-theme="high-contrast"] #date-display,
[data-theme="high-contrast"] #time-display,
[data-theme="high-contrast"] #date-display-mini,
[data-theme="high-contrast"] #time-display-mini {
    color: #ffff00 !important;
}

[data-theme="high-contrast"] .card.border-0 {
    border: 1px solid #ffffff !important;
}

/* bg-tertiary is black in HC - add a border so the box doesn't vanish into the page. */
[data-theme="high-contrast"] .bg-custom-gray,
[data-theme="high-contrast"] .ep-splash-box,
[data-theme="high-contrast"] .ep-guide-card-icon {
    border: 1px solid #ffffff;
}

/* Set `background-image` (not the `background` shorthand) — the
   shorthand resets background-position to 0% 0%, and !important on
   that would freeze the keyframes that animate it. */
[data-theme="high-contrast"] .ep-skel-block,
[data-theme="high-contrast"] .ep-skel-tile {
    background-image: linear-gradient(90deg, #000000 0%, #ffff00 50%, #000000 100%) !important;
    background-size: 200% 100% !important;
    border-color: #ffffff !important;
}

/* #endregion */


/* #region DevExtreme grids — dark + high-contrast */

/* DX's Material theme loads AFTER our bundle via @section, so every override needs !important. */
[data-theme="dark"] body.event-platform .dx-datagrid,
[data-theme="high-contrast"] body.event-platform .dx-datagrid,
[data-theme="dark"] body.event-platform .dx-datagrid-headers,
[data-theme="high-contrast"] body.event-platform .dx-datagrid-headers,
[data-theme="dark"] body.event-platform .dx-datagrid-rowsview,
[data-theme="high-contrast"] body.event-platform .dx-datagrid-rowsview,
[data-theme="dark"] body.event-platform .dx-datagrid-header-panel,
[data-theme="high-contrast"] body.event-platform .dx-datagrid-header-panel,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-row > td,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-row > td,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-header-row > td,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-header-row > td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] body.event-platform .dx-datagrid .dx-row.dx-data-row:hover > td,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-row.dx-data-row:hover > td,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-row.dx-state-hover > td,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-row.dx-state-hover > td {
    background-color: var(--bg-secondary) !important;
}

/* Focused-row fill: the .dx-row td rule above (and DX's late Material theme) paint over the base
   var(--bg-tertiary), so restate it with the grid id (which also outranks the :hover rule). Dark
   lifts like light/mono; high-contrast is all-black, so a faint white wash stands in for the token. */
[data-theme="dark"] #ep-schedule-dx-grid .dx-data-row.ep-schedule-focused-row > td {
    background-color: var(--bg-tertiary) !important;
}
[data-theme="high-contrast"] #ep-schedule-dx-grid .dx-data-row.ep-schedule-focused-row > td {
    background-color: rgba(255, 255, 255, 0.18) !important;
}

[data-theme="dark"] body.event-platform .dx-datagrid .dx-toolbar,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-toolbar {
    background-color: var(--bg-primary) !important;
}

[data-theme="dark"] body.event-platform .dx-datagrid .dx-texteditor,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-texteditor,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-texteditor.dx-editor-filled,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-texteditor.dx-editor-filled,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-texteditor.dx-editor-underlined,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-texteditor.dx-editor-underlined {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}
[data-theme="dark"] body.event-platform .dx-datagrid .dx-texteditor-input,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-texteditor-input,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-placeholder,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-placeholder {
    color: var(--text-primary) !important;
}

[data-theme="dark"] body.event-platform .dx-datagrid .dx-pager,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-pager,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-pages,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-pages,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-page,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-page,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-info,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-info,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-page-size,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-page-size {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] body.event-platform .dx-datagrid .dx-page.dx-selection,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-page.dx-selection {
    background-color: var(--bg-tertiary) !important;
}

/* Sort/search icons render via ::before pseudo on Material's DXIcons
   font, so the parent override doesn't reach the glyph by itself. */
[data-theme="dark"] body.event-platform .dx-datagrid .dx-icon,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-icon,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-icon::before,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-icon::before,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-icon-search,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-icon-search,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-icon-search::before,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-icon-search::before,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-sort,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-sort,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-sort::before,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-sort::before,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-datagrid-text-content,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-datagrid-text-content,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-sorted,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-sorted,
[data-theme="dark"] body.event-platform .dx-datagrid .dx-header-row .dx-sorted .dx-datagrid-text-content,
[data-theme="high-contrast"] body.event-platform .dx-datagrid .dx-header-row .dx-sorted .dx-datagrid-text-content {
    color: var(--text-primary) !important;
}

/* #endregion */


/* #region Theme tweaks for specific features (Programme, Dashboard) */

/* Programme mobile dropdown — high-contrast btn-light beats the variable cascade; yield to it. */
[data-theme="high-contrast"] #PlanYourEventDropdownToggle.planYourEventMobileTrigger #PlanYourEventCurrentTabLabel {
    color: var(--text-primary);
}

/* base :hover hardcodes light grey, unreadable behind dark theme's light text. */
[data-theme="dark"] .btn-access-header:hover {
    background-color: #444 !important;
    color: var(--text-primary) !important;
}

/* Bootstrap's .bg-secondary on the itinerary accordion header forces a fixed
   light grey, hiding the (also light-grey) muted text in dark mode. */
[data-theme="dark"] .card-accordion .card-header.bg-secondary {
    background-color: var(--card-header-bg) !important;
    color: var(--text-primary);
    border-color: var(--border-color);
}
/* Title + chevron use dark glyphs that vanish against the now-dark header. */
[data-theme="dark"] .card-accordion .card-header-accordion .text-primary,
[data-theme="dark"] .card-accordion .accordion-icon,
[data-theme="dark"] .card-accordion .accordion-icon::before {
    color: var(--text-primary) !important;
}

/* Bootstrap .table cells + links ship with fixed dark/blue text — invisible on
   dark and high-contrast backgrounds. Use theme primary so they match siblings. */
[data-theme="dark"] body.event-platform .table,
[data-theme="dark"] body.event-platform .table th,
[data-theme="dark"] body.event-platform .table td,
[data-theme="dark"] body.event-platform .table a,
[data-theme="high-contrast"] body.event-platform .table,
[data-theme="high-contrast"] body.event-platform .table th,
[data-theme="high-contrast"] body.event-platform .table td,
[data-theme="high-contrast"] body.event-platform .table a {
    color: var(--text-primary);
    border-color: var(--border-color);
}
[data-theme="dark"] body.event-platform .table-hover tbody tr:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

/* Section name + other inline .text-primary uses inside the platform — Bootstrap's
   blue disappears on dark/HC backgrounds. */
[data-theme="dark"] body.event-platform .text-primary,
[data-theme="high-contrast"] body.event-platform .text-primary {
    color: var(--text-primary) !important;
}

/* Keyword tags — solid green fill + black text in HC. ID prefix beats the
   `#NestedDetailsContainerDiv .badge` force-white rule in components.css. */
[data-theme="high-contrast"] body.event-platform #NestedDetailsContainerDiv .badge.badge-primary {
    background-color: var(--text-muted) !important;
    color: #000 !important;
    border: 1px solid var(--text-muted) !important;
}

/* Legacy .btn-default (Bootstrap 3) — partials still emit it; theme to match
   the HC button family (transparent + yellow border, inverts on hover). */
[data-theme="high-contrast"] body.event-platform .btn-default {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--text-primary) !important;
}
[data-theme="high-contrast"] body.event-platform .btn-default:hover,
[data-theme="high-contrast"] body.event-platform .btn-default:focus {
    background-color: var(--text-primary) !important;
    color: #000 !important;
}

/* Yellow-filled buttons (.btn-dark / .btn-secondary) — slightly darken yellow
   on hover so HC users get distinct interactive feedback. */
[data-theme="high-contrast"] .btn-secondary:hover,
[data-theme="high-contrast"] .btn-secondary:focus-visible,
[data-theme="high-contrast"] .btn-dark:hover,
[data-theme="high-contrast"] .btn-dark:focus-visible,
[data-theme="high-contrast"] a.btn-dark:hover,
[data-theme="high-contrast"] a.btn-dark:focus-visible {
    background-color: #cccc00 !important;
    border-color: #cccc00 !important;
    color: #000 !important;
}

/* Inverting buttons (.btn-light / .btn-access-header / .dropdown-toggle) — on
   hover the bg goes yellow but inner <i>/<span> still inherit yellow from
   area-wide rules. Force descendants to black so the label stays readable. */
[data-theme="high-contrast"] .btn-light:hover *,
[data-theme="high-contrast"] .btn-light:focus-visible *,
[data-theme="high-contrast"] .btn-access-header:hover *,
[data-theme="high-contrast"] .btn-access-header:focus-visible *,
[data-theme="high-contrast"] .dropdown-toggle:hover *,
[data-theme="high-contrast"] .dropdown-toggle:focus-visible * {
    color: #000 !important;
}

/* #endregion */


/* #region Shared content boxes (.ecprContentBox) */

/* .ecprContentBox-* is a main-site component with fixed light pastel fills. Light keeps them; the darker
   themes can't show a pink box, so re-skin onto the theme surface (the text already follows the theme)
   with a semantic left-edge accent. Monochrome stays greyscale. */
[data-theme="dark"] .event-platform .ecprContentBox,
[data-theme="high-contrast"] .event-platform .ecprContentBox,
[data-theme="monochrome"] .event-platform .ecprContentBox {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--callout-accent, var(--border-color));
}
.event-platform .ecprContentBox-danger  { --callout-accent: #dc3545; }
.event-platform .ecprContentBox-info     { --callout-accent: #0dcaf0; }
.event-platform .ecprContentBox-success  { --callout-accent: #198754; }
.event-platform .ecprContentBox-warning  { --callout-accent: #ffc107; }
[data-theme="monochrome"] .event-platform .ecprContentBox { --callout-accent: var(--text-primary); }

/* #endregion */

.toast-title {
  font-weight: bold;
}
.toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
}
.toast-message a,
.toast-message label {
  color: #ffffff;
}
.toast-message a:hover {
  color: #cccccc;
  text-decoration: none;
}
.toast-close-button {
  position: relative;
  right: -0.3em;
  top: -0.3em;
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: #ffffff;
  -webkit-text-shadow: 0 1px 0 #ffffff;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
.toast-close-button:hover,
.toast-close-button:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Additional properties for button version
 iOS requires the button element instead of an anchor tag.
 If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}
.toast-top-center {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-center {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-full-width {
  top: 0;
  right: 0;
  width: 100%;
}
.toast-bottom-full-width {
  bottom: 0;
  right: 0;
  width: 100%;
}
.toast-top-left {
  top: 12px;
  left: 12px;
}
.toast-top-right {
  top: 12px;
  right: 12px;
}
.toast-bottom-right {
  right: 12px;
  bottom: 12px;
}
.toast-bottom-left {
  bottom: 12px;
  left: 12px;
}
#toast-container {
  position: fixed;
  z-index: 999999;
  /*overrides*/

}
#toast-container * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#toast-container > div {
  position: relative;
  overflow: hidden;
  margin: 0 0 6px;
  padding: 15px 15px 15px 50px;
  width: 300px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  background-position: 15px center;
  background-repeat: no-repeat;
  -moz-box-shadow: 0 0 12px #999999;
  -webkit-box-shadow: 0 0 12px #999999;
  box-shadow: 0 0 12px #999999;
  color: #ffffff;
  opacity: 0.8;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  filter: alpha(opacity=80);
}
#toast-container > :hover {
  -moz-box-shadow: 0 0 12px #000000;
  -webkit-box-shadow: 0 0 12px #000000;
  box-shadow: 0 0 12px #000000;
  opacity: 1;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  filter: alpha(opacity=100);
  cursor: pointer;
}
#toast-container > .toast-info {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
  width: 300px;
  margin: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
  width: 96%;
  margin: auto;
}
.toast {
  background-color: #030303;
}
.toast-success {
  background-color: #51a351;
}
.toast-error {
  background-color: #bd362f;
}
.toast-info {
  background-color: #2f96b4;
}
.toast-warning {
  background-color: #f89406;
}
.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  background-color: #000000;
  opacity: 0.4;
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  filter: alpha(opacity=40);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 11em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container > div {
    padding: 8px 8px 8px 50px;
    width: 18em;
  }
  #toast-container .toast-close-button {
    right: -0.2em;
    top: -0.2em;
  }
}
@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: 15px 15px 15px 50px;
    width: 25em;
  }
}