/* Minification failed. Returning unminified contents.
(28,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(34,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(35,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(44,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(56,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(64,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(65,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(77,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg'
(81,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(86,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(95,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(100,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(118,36): run-time error CSS1046: Expect comma, found '0'
(118,40): run-time error CSS1046: Expect comma, found '/'
(119,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-bg'
(164,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(165,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(172,39): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg'
(188,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(190,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(192,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(197,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(208,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(209,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(210,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xxl'
(219,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(221,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(231,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(233,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(234,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(235,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(237,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(242,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(244,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(247,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(254,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(263,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(265,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(266,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(268,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(270,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(276,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(277,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(283,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(285,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(286,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(288,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(296,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(297,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(299,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(301,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(302,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(307,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-hover'
(308,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-hover'
(319,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(321,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(342,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(343,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(344,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(345,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(351,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(355,43): run-time error CSS1030: Expected identifier, found ':'
(355,51): run-time error CSS1031: Expected selector, found ')'
(355,51): run-time error CSS1025: Expected comma or open brace, found ')'
(386,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(387,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(405,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(407,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(414,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(415,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(430,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(436,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(438,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(452,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-warning'
(453,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(455,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(460,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(461,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(463,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(469,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(471,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(496,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(500,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(501,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(502,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(504,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(522,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(523,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(525,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(535,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(539,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(540,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(541,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(543,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(560,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(561,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(563,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(575,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(576,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(578,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(583,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(584,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(586,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(599,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(600,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(601,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(607,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(609,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(610,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(619,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(627,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(628,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(629,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(644,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(645,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(646,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(653,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(654,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(657,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(665,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(671,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(680,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(681,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(683,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(689,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(690,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(692,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(697,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(698,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(700,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(715,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(716,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(717,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(729,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(730,31): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(731,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(769,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(770,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(777,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(788,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(834,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(836,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(837,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(841,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(842,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(851,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(857,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(862,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-bg'
(867,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-success'
(873,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(874,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(875,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(876,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(883,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-hover'
(884,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-hover'
(889,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(890,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(891,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(892,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(895,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(901,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(902,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(909,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(910,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(915,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(916,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(928,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(930,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(936,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(937,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(942,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(948,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(949,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(963,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(973,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(975,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(976,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(985,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(987,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(988,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(992,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(993,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1001,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1002,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1003,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1009,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1010,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1011,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1016,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1020,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1021,31): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(1026,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1033,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1070,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1071,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1072,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1076,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1077,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-accent'
(1078,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1078,42): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1083,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1084,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1085,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1086,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1088,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1094,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1095,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1112,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1113,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1115,43): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1116,40): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1127,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1131,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1132,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1136,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1141,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1143,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1155,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1166,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1168,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1175,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(1176,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1181,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(1183,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1187,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1200,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1204,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1219,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1220,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1224,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1226,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1234,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1249,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1253,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1254,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1258,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1259,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1269,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1284,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(1285,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(1316,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1317,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1318,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1378,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1379,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1380,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1387,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1388,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1389,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1396,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(1397,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1398,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1446,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1448,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1454,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1456,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1464,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1479,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1480,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1492,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1494,38): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1500,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1511,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1515,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-success'
(1519,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1523,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1526,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1534,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1535,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1549,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1550,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(1551,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(1552,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1560,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(1561,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(1565,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1573,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1574,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1580,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1582,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1586,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1587,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-hover'
(1588,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1589,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1600,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1601,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(1624,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1628,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1636,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1674,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1678,38): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1695,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xxl'
(1701,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1705,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1709,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1715,34): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1732,45): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(1742,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(1743,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1750,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(1751,46): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1778,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1778,54): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1786,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1786,54): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1791,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1811,41): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(1853,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1854,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1859,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1861,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1866,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1867,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1898,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(1903,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1904,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(1905,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1912,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(1920,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(1925,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1926,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary'
(1927,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1932,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(1936,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-primary-hover'
(1940,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(1942,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(1948,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(1949,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(1953,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(1958,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(1959,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1963,31): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(1964,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(1989,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(1999,41): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(2037,27): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(2041,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(2042,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2058,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2069,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2073,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2084,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg'
(2085,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2091,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2094,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2103,36): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2107,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2114,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2118,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(2120,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2124,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2125,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2139,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2145,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2149,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2150,35): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2155,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(2187,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2187,46): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2225,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(2238,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(2239,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2240,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(2253,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(2260,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-on-primary'
(2275,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-warning'
(2276,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(2282,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(2286,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(2312,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-success'
(2316,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-danger'
(2317,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(2318,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-xl'
(2338,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(2339,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(2341,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2356,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2357,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2358,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2365,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2367,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2373,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2374,40): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2387,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(2392,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2396,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2403,16): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(2407,16): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2414,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2415,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2416,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2437,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2438,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2454,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(2455,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2457,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2462,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(2464,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-muted'
(2474,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2488,20): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2495,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-sm'
(2496,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2502,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2525,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg'
(2534,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-banner-height'
(2548,20): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(2549,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(2552,63): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg-rgb'
(2552,106): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg-rgb'
(2552,144): run-time error CSS1039: Token not allowed after unary operator: '-uc-banner-image'
(2566,20): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(2567,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-page-gutter'
(2571,32): run-time error CSS1039: Token not allowed after unary operator: '-uc-banner-image'
(2583,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(2584,38): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2587,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-banner-text'
(2593,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2595,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-banner-text-rgb'
(2601,31): run-time error CSS1039: Token not allowed after unary operator: '-uc-banner-height'
(2605,67): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg-rgb'
(2605,110): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg-rgb'
(2605,154): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-page-bg-rgb'
(2605,193): run-time error CSS1039: Token not allowed after unary operator: '-uc-banner-image'
(2632,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2663,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2677,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2678,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2679,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2695,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2696,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text'
(2697,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2698,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2699,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2704,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2705,41): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2726,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2727,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2728,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2749,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2754,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2755,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2764,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2765,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2766,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2797,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(2798,24): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2813,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-lg'
(2827,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-surface'
(2828,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-border'
(2829,30): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2845,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2846,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-text-rgb'
(2928,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(2937,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(2939,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(2951,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent-rgb'
(2952,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(2973,25): run-time error CSS1039: Token not allowed after unary operator: '-uc-radius'
(2974,22): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(2981,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(2983,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(2997,33): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(2998,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(3008,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(3010,37): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text-rgb'
(3020,16): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(3031,29): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-accent'
(3228,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-text'
(3229,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-header-bg'
(3230,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-body'
(3231,21): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
(3255,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-logo-height'
(3269,17): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-section-text'
(3270,28): run-time error CSS1039: Token not allowed after unary operator: '-uc-color-section-bg'
(3271,23): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-heading'
(3272,26): run-time error CSS1039: Token not allowed after unary operator: '-uc-font-size-base'
 */
/* ============================================================
   SITE STYLES

   Colors, fonts, sizes, and corner radius come from the theme
   variables (--uc-*) written by Controls/ThemeHead.ascx. Change
   them in Admin > Theme Settings rather than in this file.

   Font-size scale (values at the default 14px base size):
     --uc-font-size-sm    12px
     --uc-font-size-base  14px
     --uc-font-size-lg    16px
     --uc-font-size-xl    20px
     --uc-font-size-xxl   24px
   Other sizes are written as calc(base * N / 14), so they equal
   N px at the default size and scale with it.

   The ADMIN CONTROLS section at the end is deliberately NOT
   themed, so a poor color choice can never make the admin pages
   (including the theme editor) hard to use.
   ============================================================ */

/* ── Theme base ─────────────────────────────────────────────── */

/* Bootstrap sizes everything in rem. Tying the root size to the
   theme's base size scales Bootstrap along with the site; at the
   default 14px base this is 16px, the browser default. */
html {
    font-size: calc(var(--uc-font-size-base) * 16 / 14);
}

/* body.walls-green-body outranks Bootstrap's plain body rule,
   which loads after this file. */
body.walls-green-body {
    font-family: var(--uc-font-body);
    color: var(--uc-color-text);
}

    body.walls-green-body h1,
    body.walls-green-body h2,
    body.walls-green-body h3,
    body.walls-green-body h4,
    body.walls-green-body h5,
    body.walls-green-body h6 {
        font-family: var(--uc-font-heading);
    }

/* ── Page width ─────────────────────────────────────────────── */
/*
   The menu bar and banner always span the full window. Their contents,
   and the page content, use the full width minus a side margin that
   grows with the window: 15px on small screens, up to 1 inch on wide
   ones, while keeping the content at least about 960px wide wherever
   the window allows. Add "uc-page-width" to a container to use it.
*/
:root {
    --uc-page-gutter: max(15px, min(1in, (100vw - 990px) / 2));
}

.walls-green-body .uc-page-width {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--uc-page-gutter);
    padding-right: var(--uc-page-gutter);
}

/* The menu bar itself always runs edge to edge. */
.walls-green-body .hpu-menu {
    width: 100%;
    border-radius: 0;
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-bottom: 20px;
    background-color: var(--uc-color-page-bg) !important;
}

.walls-green-body a:not(.btn) {
    color: var(--uc-color-text);
    text-decoration: underline;
}

    .walls-green-body a:not(.btn):hover {
        color: var(--uc-color-text);
        text-decoration: underline;
    }

/* Header links and icon buttons follow the header colors,
   but links inside header dropdowns (the cart) sit on a
   regular surface and use the normal text color. */
.walls-green-body .hpu-menu a:not(.btn),
.walls-green-body .hpu-menu .btn {
    color: var(--uc-color-header-text);
}

.walls-green-body .hpu-menu .dropdown-menu a:not(.btn),
.walls-green-body .hpu-menu .dropdown-menu .btn {
    color: var(--uc-color-text);
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

.walls-green-body .hpu-menu {
    box-shadow: 0px 4px 12px rgb(0 0 0 / 11%);
    background-color: var(--uc-color-header-bg);
    border: 0;
    margin-bottom: 20px;
}

/* The page background is now the page color (Solid style) or the banner
   (Banner style); see "Page banner" below. The old tiled image is gone. */

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

@media screen and (max-width: 768px) {
    .manage-order-confirm .btn-custom-outline {
        margin-bottom: 10px;
    }

    .navbar-inverse .navbar-nav > li {
        margin-right: 10px;
    }

    .snippets.bootdeys {
        text-align: center;
    }

    .product-image img {
        display: inline-block;
    }

    .page-header {
        padding: 10px;
    }
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--uc-color-text-muted);
    font-size: var(--uc-font-size-sm);
}

    .separator::before,
    .separator::after {
        content: '';
        flex: 1;
        border-bottom: 2px solid var(--uc-color-page-bg);
    }

    .separator:not(:empty)::before {
        margin-right: 10px;
    }

    .separator:not(:empty)::after {
        margin-left: 10px;
    }

.color-black {
    color: #000 !important;
}

.walls-green-body .employee-login-info {
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-lg);
    letter-spacing: 0;
    color: var(--uc-color-text);
    margin-top: 50px;
}

.font-20 {
    font-size: var(--uc-font-size-xl) !important;
}

.walls-green-login {
    width: 100%;
}

.login-box h2, .landing-page h2 {
    padding-top: 5px;
    padding-bottom: 10px;
    text-align: center;
    color: var(--uc-color-text);
    font-family: var(--uc-font-heading);
    font-size: var(--uc-font-size-xxl);
    letter-spacing: 0;
}

.landing-page .card-header {
    border-bottom: 0;
}

.login-box .col-form-label {
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-sm);
    letter-spacing: 0;
}

.right-wrapper .employee-login-wrapper {
    padding: 20px;
}

.walls-green-body .form-control {
    height: 40px;
    border-radius: var(--uc-radius);
    box-shadow: none;
    border-color: var(--uc-color-text);
    background-color: var(--uc-color-surface);
    color: var(--uc-color-text);
    max-width: 100%;
    font-size: var(--uc-font-size-base);
}

.walls-green-body .search-filter-control {
    height: 30px;
    border-radius: var(--uc-radius);
    box-shadow: none;
    border-color: var(--uc-color-text);
    min-width: 100%;
    max-width: 100%;
    font-size: var(--uc-font-size-sm);
}

.walls-green-body .voucher-type-links {
    height: 35px;
    min-width: 100%;
    max-width: 100%;
    font-size: var(--uc-font-size-base);
    display: inline-block;
}

/* ── Buttons ────────────────────────────────────────────────── */

.walls-green-body .btn-custom {
    min-width: 200px;
    height: 40px;
    background-color: var(--uc-color-primary);
    border: 0;
    border-radius: var(--uc-radius);
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-base);
    letter-spacing: 0;
    color: var(--uc-color-on-primary);
    line-height: 33px;
}

    .walls-green-body .btn-custom:hover,
    .walls-green-body .btn-custom:focus {
        background-color: var(--uc-color-primary-hover);
        color: var(--uc-color-on-primary);
    }

.walls-green-body .btn-secondary {
    min-width: 100px;
    height: 40px;
    background-color: var(--uc-color-text-muted);
    border: 0;
    border-radius: var(--uc-radius);
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-base);
    letter-spacing: 0;
    color: white;
}

.walls-green-body .btn-custom-outline {
    min-width: 200px;
    height: 40px;
    border-radius: var(--uc-radius);
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-base);
    letter-spacing: 0;
    border-color: var(--uc-color-accent);
    color: var(--uc-color-accent);
    line-height: 30px;
}

    .walls-green-body .btn-custom-outline:hover {
        color: var(--uc-color-accent-hover);
        border-color: var(--uc-color-accent-hover);
    }

.walls-green-body .form-group {
    position: relative;
}

.validation-error {
    position: absolute;
    right: -10px;
    top: 55%;
    font-size: var(--uc-font-size-base);
    font-weight: bold;
    color: var(--uc-color-danger);
}

/* ── Landing page cart choice ───────────────────────────────── */
/*
   Each option is a card, and the whole card is clickable (the
   label fills it). The radio circle is drawn with CSS rather than
   text characters, so it's the same size selected or not, in any
   font. Selection is styled from the radio's own :checked state,
   so no script is needed to keep it in step.

   The double-class selectors (.radio.radio-shopping-*) outrank the
   older Bootstrap 3 ".radio + .radio" and ".radio label" rules that
   still load from the bundle.
*/

.radio.radio-shopping-myself,
.radio.radio-shopping-other {
    position: relative;
    display: block;
    margin: 0 0 16px;
    background-color: rgba(var(--uc-color-text-rgb), 0.04);
    color: var(--uc-color-text);
    border: 1px solid var(--uc-color-border);
    border-radius: calc(var(--uc-radius) * 2.5);
    transition: border-color .15s ease, background-color .15s ease;
}

    .radio.radio-shopping-myself:hover,
    .radio.radio-shopping-other:hover {
        border-color: var(--uc-color-text-muted);
    }

    /* Selected card */
    .radio.radio-shopping-myself:has(input:checked),
    .radio.radio-shopping-other:has(input:checked) {
        border-color: var(--uc-color-primary);
        background-color: var(--uc-color-surface);
    }

    /* An option with no text (fewer carts than options) is hidden. */
    .radio.radio-shopping-myself:not(:has(label)),
    .radio.radio-shopping-other:not(:has(label)) {
        display: none;
    }

    /* Hidden from view but still reachable with the keyboard. */
    .radio.radio-shopping-myself input[type=radio],
    .radio.radio-shopping-other input[type=radio] {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        opacity: 0;
        pointer-events: none;
    }

    .radio.radio-shopping-myself label,
    .radio.radio-shopping-other label {
        position: relative;
        display: block;
        min-height: 0;
        margin: 0;
        padding: 16px 18px 16px 54px;
        cursor: pointer;
        font-family: var(--uc-font-body);
        font-size: calc(var(--uc-font-size-base) * 15 / 14);
        font-weight: 400;
        line-height: 1.4;
        letter-spacing: 0;
        text-align: left;
    }

        /* The circle */
        .radio.radio-shopping-myself label::before,
        .radio.radio-shopping-other label::before {
            content: "";
            position: absolute;
            left: 18px;
            top: 50%;
            width: 22px;
            height: 22px;
            margin-top: -11px;
            box-sizing: border-box;
            border: 2px solid var(--uc-color-text-muted);
            border-radius: 50%;
            background: var(--uc-color-surface);
            transition: background-color .15s ease, border-color .15s ease;
        }

    /* Selected: filled circle with a check mark */
    .radio.radio-shopping-myself input:checked + label::before,
    .radio.radio-shopping-other input:checked + label::before {
        border-color: var(--uc-color-primary);
        background: var(--uc-color-primary);
    }

    .radio.radio-shopping-myself input:checked + label::after,
    .radio.radio-shopping-other input:checked + label::after {
        content: "\2713";
        position: absolute;
        left: 18px;
        top: 50%;
        width: 22px;
        margin-top: -11px;
        line-height: 22px;
        text-align: center;
        font-size: 13px;
        font-weight: 700;
        color: var(--uc-color-on-primary);
    }

    /* Keyboard focus ring */
    .radio.radio-shopping-myself input:focus-visible + label,
    .radio.radio-shopping-other input:focus-visible + label {
        outline: 2px solid var(--uc-color-accent);
        outline-offset: 2px;
        border-radius: calc(var(--uc-radius) * 2.5);
    }

/* ── Page text ──────────────────────────────────────────────── */

.navigation-hint i {
    position: absolute;
    top: 8px;
    left: 0;
}

.navigation-hint {
    position: relative;
    padding-left: 20px;
    color: var(--uc-color-warning);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-sm);
    letter-spacing: 0;
}

.walls-green-body .page-header {
    color: var(--uc-color-text);
    font-family: var(--uc-font-heading);
    text-align: left;
    font-size: var(--uc-font-size-xl);
    letter-spacing: 0;
    margin-top: 20px;
}

.category-select-page-message {
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-lg);
}

.category-select-page table {
    width: 100%;
}

    .category-select-page table tbody {
        display: flex;
    }

        .category-select-page table tbody tr {
            flex: auto;
        }

#MainContent_dlGroups, #MainContent_dlGroups span:first-child {
    display: block;
    overflow: hidden;
}

/* ── Location and category tiles ────────────────────────────── */

.location-list .item {
    margin-bottom: 30px;
    width: 272px;
    background-color: var(--uc-color-surface);
    padding: 0 0 0 0;
    margin-right: 60px;
    text-decoration: none !important;
    border: 1px solid var(--uc-color-border);
    border-radius: var(--uc-radius);
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-base);
    top: 50%;
}

    .location-list .item:last-child, .location-list .item:nth-child(3n) {
        margin-right: 0;
    }

    .location-list .item:hover {
        text-decoration: none;
    }

    .location-list .item > img {
        width: 176px;
        height: 176px;
    }

    .location-list .item center {
        color: var(--uc-color-text-muted);
        font-family: var(--uc-font-heading);
        text-align: center;
        font-size: var(--uc-font-size-xl);
        letter-spacing: 0;
        margin-top: 20px;
        display: block;
        padding: 0 20px;
    }

.category-list .item {
    margin-bottom: 30px;
    width: 272px;
    background-color: var(--uc-color-surface);
    padding: 30px 0 0 0;
    margin-right: 60px;
    text-decoration: none !important;
    border: 1px solid var(--uc-color-border);
    border-radius: var(--uc-radius);
    font-family: var(--uc-font-body);
    text-align: center;
    font-size: var(--uc-font-size-base);
}

    .category-list .item:last-child, .category-list .item:nth-child(3n) {
        margin-right: 0;
    }

    .category-list .item:hover {
        text-decoration: none;
    }

    .category-list .item > img {
        width: 176px;
        height: 176px;
    }

    .category-list .item center {
        color: var(--uc-color-text-muted);
        font-family: var(--uc-font-heading);
        text-align: center;
        font-size: var(--uc-font-size-xl);
        letter-spacing: 0;
        margin-top: 20px;
        display: block;
        padding: 0 20px;
    }

.txt-login-status {
    display: none;
}

.ordering-email {
    color: var(--uc-color-text-muted);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-sm);
    letter-spacing: 0;
}

.contact-info {
    color: var(--uc-color-text);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-lg);
    letter-spacing: 0;
}

.walls-green-body .manage-order-confirm {
    padding: 40px 20px;
}

.walls-green-body .manage-order-complete {
    padding: 20px 0px;
}

.grid-item-header {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-base);
    color: var(--uc-color-text);
    font-weight: 600;
    letter-spacing: 1px;
}

.grid-item-pre-header {
    color: var(--uc-color-text);
    margin-left: 5px;
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-sm);
    font-weight: 600;
    letter-spacing: 1px;
}

/* ── Order details and totals ───────────────────────────────── */

.order-details {
    padding: 5px 0 20px 0;
    border-bottom: 2px dotted var(--uc-color-text);
    display: flex;
    width: 100%;
    flex-direction: row;
}

    .order-details li {
        max-width: 100px;
        color: var(--uc-color-text);
        font-family: var(--uc-font-body);
        font-size: var(--uc-font-size-base);
        font-weight: 100;
        letter-spacing: 0;
        white-space: normal;
        padding-right: 10px;
        flex: 1 1 25px;
        display: flex;
    }

    .order-details .style {
        max-width: 300px;
        flex: 1 1 50px;
    }

    .order-details li span {
        color: var(--uc-color-text-muted);
        font-family: var(--uc-font-body);
        font-size: var(--uc-font-size-base);
        font-weight: 100;
        letter-spacing: 0;
        margin-right: 10px;
    }

    .order-details .btn-delete {
        font-family: var(--uc-font-body);
        font-size: var(--uc-font-size-base);
        font-weight: 100;
        letter-spacing: 0;
        color: var(--uc-color-text);
    }

        .order-details .btn-delete:hover {
            text-decoration: none;
        }

.manage-order-confirm .btn-custom {
    color: var(--uc-color-on-primary);
    border: 0;
    line-height: 33px;
}

    .manage-order-confirm .btn-custom:hover {
        color: var(--uc-color-on-primary);
    }

.manage-order-confirm .btn-custom-outline {
    min-width: 150px;
    line-height: 35px;
}

.back-button {
    color: var(--uc-color-text);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-lg);
    letter-spacing: 0;
    text-decoration: none;
}

.faq-list li.question {
    color: var(--uc-color-text-muted);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-sm);
    letter-spacing: 0;
}

.faq-list li.answer {
    color: var(--uc-color-text);
    font-family: var(--uc-font-body);
    text-align: left;
    font-size: var(--uc-font-size-lg);
    letter-spacing: 0;
    margin-bottom: 20px;
}

.faq-list p {
    margin-top: 20px;
}

.order-totals {
    display: block;
}

    .order-totals li {
        display: block;
        color: var(--uc-color-text);
        font-family: var(--uc-font-body);
        font-size: var(--uc-font-size-base);
        font-weight: bold;
        letter-spacing: 0;
        white-space: nowrap;
        width: 100%;
    }

        .order-totals li:last-child {
            padding-right: 0;
        }

        .order-totals li span {
            color: var(--uc-color-text-muted);
            font-family: var(--uc-font-body);
            font-size: var(--uc-font-size-base);
            font-weight: 100;
            letter-spacing: 0;
            margin-right: 10px;
        }

.walls-green-body .btn-checkout {
    min-width: auto;
}

/* ── Navigation ─────────────────────────────────────────────── */

@media (min-width: 768px) {
    .navbar-nav > li {
        float: left;
    }
}

li.has-popup.static {
    position: relative;
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .popout {
        padding-right: .5rem;
        padding-left: .5rem;
    }
}

.navbar-inverse .navbar-nav > li {
    margin-right: 20px;
}

    .navbar-inverse .navbar-nav > li:last-child {
        margin-right: 0;
    }

    .navbar-inverse .navbar-nav > li > a {
        color: var(--uc-color-header-text);
        font-size: var(--uc-font-size-base);
        position: relative;
        overflow: hidden;
        background-image: none !important;
    }

        .navbar-inverse .navbar-nav > li > a:hover {
            color: var(--uc-color-header-text);
        }

    .navbar-inverse .navbar-nav > li.has-popup > a::before {
        content: "\203A";
        position: absolute;
        font-size: 30px;
        top: 25%;
        right: 5px;
        z-index: -1;
        transform: rotate(90deg);
        color: var(--uc-color-accent);
    }

.navbar-nav .popout {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 768px) {
    .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
    }
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

.popout {
    display: block;
    padding: .5rem 1rem;
}

.dropdown-toggle {
    white-space: nowrap;
}

[role=button] {
    cursor: pointer;
}

#Menu1 .dropdown-menu li {
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    background-color: transparent;
    border: 0;
}

    #Menu1 .dropdown-menu li > a {
        padding: .25rem 1.5rem;
        font-weight: 400;
        color: var(--uc-color-text);
        white-space: nowrap;
        font-family: var(--uc-font-body);
        font-size: var(--uc-font-size-base);
    }

.all-back {
    font-size: var(--uc-font-size-lg);
    color: var(--uc-color-text);
    line-height: 22.4px;
}

    .all-back i {
        padding-right: 10px;
    }

.bg-white-top {
    background-color: var(--uc-color-surface);
    margin: -20px 0px 10px 0px;
    padding: 20px;
}

.breadcrumb-button, .breadcrumb-button :hover {
    color: var(--uc-color-text);
    text-decoration: none;
}

.navbar-inverse {
    border-color: var(--uc-color-header-bg) !important;
    box-shadow: 0px 1px 3px #888888;
}

.green-text {
    color: var(--uc-color-success);
    text-align: right;
}

/* Outline-style action button (e.g. "Clear Saved") */
.orge {
    color: var(--uc-color-accent) !important;
    border-color: var(--uc-color-accent) !important;
    border-radius: var(--uc-radius);
    font-size: var(--uc-font-size-base) !important;
    padding: 8px 30px 8px 30px !important;
    margin-bottom: 10px;
    text-transform: uppercase;
}

    .orge:hover {
        color: var(--uc-color-accent-hover) !important;
        border-color: var(--uc-color-accent-hover) !important;
    }

/* Solid primary action button (e.g. "Checkout") */
.black-b {
    color: var(--uc-color-on-primary) !important;
    border-color: var(--uc-color-primary) !important;
    border-radius: var(--uc-radius);
    font-size: var(--uc-font-size-base) !important;
    padding: 8px 19px 8px 9px !important;
    margin-bottom: 20px;
    background-color: var(--uc-color-primary) !important;
    text-transform: uppercase;
}

    .black-b:hover,
    .black-b:focus {
        background-color: var(--uc-color-primary-hover) !important;
        border-color: var(--uc-color-primary-hover) !important;
    }

/* ── Search and filters ─────────────────────────────────────── */

.has-search .form-control {
    padding-left: 3.375rem;
    font-size: calc(var(--uc-font-size-base) * 17 / 14);
    font-family: var(--uc-font-body);
}

.has-search .search-filter-control {
    padding-left: 3.375rem;
    font-size: var(--uc-font-size-sm);
    font-family: var(--uc-font-body);
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 37px;
    text-align: center;
    pointer-events: none;
    color: var(--uc-color-text-muted);
    left: 0px;
    font-size: calc(var(--uc-font-size-base) * 17 / 14);
    margin-left: 5px;
    font-weight: 400;
}

.dep-select .form-control {
    font-size: calc(var(--uc-font-size-base) * 17 / 14) !important;
    font-family: var(--uc-font-body);
    width: 100%;
}

.bg-white-bottom {
    background-color: var(--uc-color-surface);
    margin: 0px 0px 0px 0px;
    padding: 20px;
}

.grey-text {
    font-size: calc(var(--uc-font-size-base) * 13 / 14);
    color: var(--uc-color-text-muted);
    font-weight: 600;
}

/* ── Panels and accordions ──────────────────────────────────── */

.panel-heading {
    padding: 0;
    border: 0;
}

.panel-title > a, .panel-title > a:active {
    display: block;
    padding: 15px;
    color: var(--uc-color-text);
    text-decoration: none;
    overflow: hidden;
}

.panel-heading a.main-expender.collapsed::before {
    font-family: 'bootstrap-icons';
    content: "\f282";
    float: right;
    transition: all 0.5s;
    background: var(--uc-color-primary);
    padding: 5px;
    border-radius: var(--uc-radius);
    color: var(--uc-color-on-primary);
}

.panel-heading a.main-expender:not(.collapsed)::before {
    transform: rotate( 180deg ) !important;
    font-family: 'bootstrap-icons';
    content: "\f282";
    float: right;
    transition: all 0.5s;
    background: var(--uc-color-primary);
    padding: 5px;
    border-radius: var(--uc-radius);
    color: var(--uc-color-on-primary);
}

.font16 {
    font-size: var(--uc-font-size-xl);
    color: var(--uc-color-accent);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0px;
}

.panel {
    margin-bottom: 20px;
    background-color: var(--uc-color-surface);
    border-bottom: 1px solid var(--uc-color-border) !important;
    border-radius: var(--uc-radius);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.05) !important;
}

.panel-default > .panel-heading {
    color: var(--uc-color-text);
    background-color: var(--uc-color-surface);
    border-color: var(--uc-color-surface);
    border: 0px;
}

.panel-default {
    border-color: var(--uc-color-surface);
}

    .panel-default > .panel-heading + .panel-collapse > .panel-body {
        border-top-color: var(--uc-color-border);
        background: rgba(var(--uc-color-text-rgb), 0.03);
    }

.co-option td input {
    width: 150px;
    font-size: var(--uc-font-size-lg);
    margin-right: 15px;
    margin-top: 10px;
}

.co-option td select {
    width: 150px;
    font-size: var(--uc-font-size-lg);
    margin-right: 20px;
    margin-bottom: 10px;
}

.acco-option {
    max-width: 1040px;
    overflow: scroll;
    overflow-y: hidden;
}

/* ── Carousels ──────────────────────────────────────────────── */

.carousel {
    position: relative;
}

.owl-item ul {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
}

.carousel-item li {
    display: inline-block;
    width: 100%;
    margin-bottom: 10px;
    margin-left: 16px;
    right: 12px;
    position: relative;
}

    .carousel-item li input.btn {
        width: 100%;
    }

.head {
    background-color: var(--uc-color-surface);
    border: solid 1px var(--uc-color-accent) !important;
    font-size: var(--uc-font-size-sm);
}

.blue-text {
    background-color: var(--uc-color-accent);
    color: var(--uc-color-on-accent);
    border-radius: var(--uc-radius) var(--uc-radius) 0px 0px;
}

.btn-add {
    padding: 8px 15px !important;
    background: var(--uc-color-surface) !important;
    color: var(--uc-color-text) !important;
    border: solid 1px var(--uc-color-text) !important;
    border-radius: var(--uc-radius);
    text-transform: uppercase !important;
    font-size: var(--uc-font-size-base) !important;
}

/* ── Order history ──────────────────────────────────────────── */

.ordr-hist label {
    color: var(--uc-color-text);
    font-size: var(--uc-font-size-lg);
    font-weight: 500;
}

.order-det {
    width: 97% !important;
    padding: 0px;
    border: 0 !important;
}

    .order-det tr, .order-det tr th, .order-det tr td {
        border-top: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
    }

        .order-det tr th a, .order-det tr th {
            color: var(--uc-color-text);
            font-size: var(--uc-font-size-lg);
            font-weight: 500;
            border-bottom: solid 0px var(--uc-color-border) !important;
            border-top: solid 0px var(--uc-color-border) !important;
            text-transform: uppercase;
            text-align: left;
        }

.order-det-info {
    width: 97% !important;
    padding: 0px;
}

    .order-det-info i {
        font-size: calc(var(--uc-font-size-base) * 18 / 14);
    }

    .order-det-info td {
        font-size: calc(var(--uc-font-size-base) * 13 / 14);
        border-top: solid 0px var(--uc-color-border) !important;
    }

        .order-det-info td span {
            color: var(--uc-color-text-muted);
        }

    .order-det-info th, .order-det-info td {
        text-decoration: none;
        font-family: var(--uc-font-body);
        font-weight: 400;
        font-size: var(--uc-font-size-base);
    }

    .order-det-info td {
        padding: 5px 2px !important;
    }

a[data-toggle=collapse] {
    text-decoration: none !important;
}

.walls-green-body .ordr-hist .form-control {
    font-size: var(--uc-font-size-lg);
}

.panel-title > a {
    text-decoration: none;
    padding: 0px !important;
}

.title-with-bod {
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--uc-font-size-lg);
    color: inherit;
    border-bottom: solid 1px var(--uc-color-border) !important;
    padding: 15px !important;
    display: block;
    overflow: hidden;
}

.navbar-inverse .navbar-nav > li > a {
    color: var(--uc-color-header-text);
    font-size: var(--uc-font-size-base);
}

    .navbar-inverse .navbar-nav > li > a:hover,
    .navbar-inverse .navbar-nav > li > a:focus {
        color: var(--uc-color-header-text);
        background-color: transparent;
        font-size: var(--uc-font-size-base);
    }

.font14 {
    font-size: var(--uc-font-size-base);
}

#Menu1 a.level1 {
    font-weight: bold;
    text-transform: capitalize;
}

.walls-green-body #Menu1 a.popout {
    padding-right: 20px;
}

.nano .nano-pane {
    background: var(--uc-color-text-muted);
}

.nano .nano-slider {
    background: var(--uc-color-text);
}

.smart-scroll-employees {
    height: 500px !important;
}

.ps-container > .ps-scrollbar-y-rail {
    z-index: 1002;
}

/* ── Product slider and quantity controls ───────────────────── */

.owl-item .item .qty-input {
    width: 40%;
    border: 1px solid var(--uc-color-border);
    color: var(--uc-color-text);
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    font-family: var(--uc-font-body);
    font-weight: 500;
    font-size: var(--uc-font-size-lg);
    padding: 0 2px;
}

.owl-item .item .plus::after, .owl-item .item .plus::before, .owl-item .item .minus::before {
    content: "";
    width: 12px;
    height: 2px;
    background: var(--uc-color-text);
    position: absolute;
    left: 9px;
    top: 18px;
}

.owl-item .item .plus::after {
    transform: rotate( 90deg );
}

.owl-item .item .plus, .owl-item .item .minus {
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 40px;
    border: 1px solid var(--uc-color-border);
}

.item img {
    border: 1px solid var(--uc-color-surface);
    border-radius: var(--uc-radius);
}

#product-slider .item strong {
    font-size: var(--uc-font-size-base);
    color: var(--uc-color-text);
    display: block;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
    text-wrap: normal;
    word-break: break-word;
    line-height: 18px;
    font-weight: normal;
    min-height: 40px;
    font-family: var(--uc-font-body);
}

#accordion .owl-next, #accordion .owl-prev {
    display: none !important;
}

#product-slider .owl-next,
#product-slider .owl-prev {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 35%;
    display: block !important;
    border: 0;
    background-color: var(--uc-color-primary);
    color: var(--uc-color-on-primary);
    border-radius: 50%;
}

#product-slider .owl-next {
    right: 5px;
}

#product-slider .owl-prev {
    left: 5px;
}

    #product-slider .owl-next span,
    #product-slider .owl-prev span {
        padding: 0;
        font-size: 24px;
    }

#product-slider .owl-item .item {
    min-height: 290px;
}

    #product-slider .owl-item .item a:hover {
        text-decoration: none !important;
    }

#product-slider .owl-item img {
    height: 260px !important;
}

.link-underline {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-base);
    color: var(--uc-color-text);
    text-decoration: underline;
}

footer {
    margin-top: 100px;
    padding: 50px 0;
    width: 100%;
    display: block;
}

a#MainContent_cmdClear, a#MainContent_cmdSubmit {
    margin-bottom: 10px;
}

a#MainContent_cmdSubmit {
    padding: 8px 30px 8px 30px !important;
}

/* ── Order page actions (Clear Saved / Checkout) ───────────── */
/*
   Add "order-actions" to the column holding these buttons. They sit
   side by side, aligned right, with matching spacing, and only wrap
   on screens too narrow for both. The ID selectors outrank the
   general a#MainContent_cmd* rules above, which still apply on other
   pages that have buttons with those IDs.
*/
.order-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

    .order-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }

        .order-actions .btn.orge,
        .order-actions .btn.black-b,
        .order-actions a#MainContent_cmdClear,
        .order-actions a#MainContent_cmdSubmit {
            margin: 0;
            padding: 8px 18px !important;
        }

@media (max-width: 767.98px) {
    .order-actions {
        justify-content: flex-start;
    }
}

/* ── Messages ───────────────────────────────────────────────── */

.shipping-address-message {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-lg);
    color: var(--uc-color-danger);
    text-decoration: none;
    padding: 10px;
    text-align: center;
}

.order-message {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-sm);
    color: var(--uc-color-danger);
    text-decoration: none;
    padding: 10px;
    text-align: center;
}

.empty-cart-message {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-lg);
    color: var(--uc-color-text);
    text-decoration: none;
    padding: 10px;
    text-align: center;
}

/* ── Image wrappers ─────────────────────────────────────────── */

.category-list .img-wrapper,
.location-list .img-wrapper {
    height: 175px;
    width: 175px;
    overflow: hidden;
    -webkit-transition: 1s ease;
    transition: 1s ease;
}

.contain, .cover {
    position: relative;
    overflow: hidden;
}

    .cover img {
        left: -10000%;
        right: -10000%;
        top: -10000%;
        bottom: -10000%;
        min-width: 1000%;
        min-height: 1000%;
        -webkit-transform: scale(.1);
        -ms-transform: scale(.1);
        transform: scale(.1);
        max-width: none !important;
        object-fit: cover;
    }

    .contain img, .cover img {
        position: absolute;
        margin: auto;
    }

.margin-20 {
    margin-top: 40px;
}

/* ── Product cards ──────────────────────────────────────────── */

.products-list {
    border-radius: var(--uc-radius);
    padding: 0px;
    background-color: var(--uc-color-surface);
}

.product-content {
    margin-bottom: 20px;
    margin-top: 12px;
    background: var(--uc-color-surface);
    padding: 0px;
    border-radius: var(--uc-radius);
}

    .product-content .carousel-control.left {
        margin-left: 0
    }

    .product-content .product-image {
        background-color: var(--uc-color-surface);
        display: block;
        min-height: 238px;
        overflow: hidden;
        position: relative
    }

    .product-content .product-deatil {
        padding-bottom: 17px;
        padding-left: 16px;
        padding-top: 16px;
        position: relative;
    }

        .product-content .product-deatil h5 a {
            color: var(--uc-color-text-muted);
            font-size: calc(var(--uc-font-size-base) * 18 / 14);
            line-height: 26px;
            text-decoration: none;
            padding-left: 0;
            margin-left: 0;
        }

            .product-content .product-deatil h5 a:hover {
                text-decoration: none;
            }

            .product-content .product-deatil h5 a span {
                color: var(--uc-color-text-muted);
                display: block;
                font-size: calc(var(--uc-font-size-base) * 13 / 14);
            }

        .product-content .product-deatil span.tag1 {
            border-radius: 50%;
            color: #fff;
            font-size: calc(var(--uc-font-size-base) * 15 / 14);
            height: 50px;
            padding: 13px 0;
            position: absolute;
            right: 10px;
            text-align: center;
            top: 10px;
            width: 50px
        }

        .product-content .product-deatil span.sale {
            background-color: var(--uc-color-accent)
        }

        .product-content .product-deatil span.discount {
            background-color: var(--uc-color-success)
        }

        .product-content .product-deatil span.hot {
            background-color: var(--uc-color-danger)
        }

    .product-content .description {
        font-size: var(--uc-font-size-sm);
        line-height: 20px;
        padding: 10px 14px 16px 19px;
        background: var(--uc-color-surface)
    }

    .product-content .product-info {
        padding: 11px 19px 10px 20px
    }

        .product-content .product-info a.add-to-cart {
            color: var(--uc-color-text);
            font-size: calc(var(--uc-font-size-base) * 13 / 14);
            padding-left: 16px
        }

    .product-content name.a {
        padding: 5px 10px;
        margin-left: 16px
    }

/* "Buy" button on product cards */
.product-info.smart-form .btn {
    padding: 6px 40px;
    margin-left: -6px;
    margin-top: -10px;
    border-radius: var(--uc-radius);
    background: var(--uc-color-primary);
    color: var(--uc-color-on-primary);
    font-size: var(--uc-font-size-lg);
    text-transform: uppercase;
    line-height: 27px;
    border: 0px;
}

    .product-info.smart-form .btn:hover,
    .product-info.smart-form .btn:focus {
        background: var(--uc-color-primary-hover);
        color: var(--uc-color-on-primary);
    }

.product-entry .product-deatil {
    border-bottom: 1px solid var(--uc-color-border);
    padding-bottom: 17px;
    padding-left: 16px;
    padding-top: 16px;
    position: relative
}

    .product-entry .product-deatil h5 a {
        color: var(--uc-color-text);
        font-size: calc(var(--uc-font-size-base) * 15 / 14);
        line-height: 19px;
        text-decoration: none
    }

        .product-entry .product-deatil h5 a span {
            color: var(--uc-color-text-muted);
            display: block;
            font-size: calc(var(--uc-font-size-base) * 13 / 14)
        }

.load-more-btn {
    background-color: var(--uc-color-accent);
    border-bottom: 2px solid var(--uc-color-accent-hover);
    border-radius: var(--uc-radius);
    border-top: 2px solid var(--uc-color-accent);
    margin-top: 20px;
    padding: 9px 0;
    width: 100%
}

.product-block .product-deatil p.price-container span,
.product-content .product-deatil p.price-container span,
.product-entry .product-deatil p.price-container span,
.shipping table tbody tr td p.price-container span,
.shopping-items table tbody tr td p.price-container span {
    color: var(--uc-color-text);
    font-size: var(--uc-font-size-xl);
    line-height: 20px;
    font-weight: 600;
}

.product-info.smart-form .rating label {
    margin-top: 0
}

.product-wrap .product-image span.tag2 {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    padding: 10px 0;
    color: #fff;
    font-size: 11px;
    text-align: center
}

.product-wrap .product-image span.sale {
    background-color: var(--uc-color-accent)
}

.product-wrap .product-image span.hot {
    background-color: var(--uc-color-danger)
}

.shop-btn {
    position: relative
}

    .shop-btn > span {
        background: var(--uc-color-danger);
        display: inline-block;
        font-size: 10px;
        box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07);
        font-weight: 700;
        border-radius: 50%;
        padding: 2px 4px 3px !important;
        text-align: center;
        line-height: normal;
        width: 19px;
        top: -7px;
        left: -7px
    }

/* ── Product detail page ────────────────────────────────────── */

.description-tabs {
    padding: 30px 0 5px !important
}

    .description-tabs .tab-content {
        padding: 10px 0
    }

.product-deatil {
    padding: 30px 30px 50px
}

    .product-deatil hr + .description-tabs {
        padding: 0 0 5px !important
    }

    .product-deatil .carousel-control.left,
    .product-deatil .carousel-control.right {
        background: none !important
    }

    .product-deatil .glyphicon {
        color: var(--uc-color-accent)
    }

    .product-deatil .product-image {
        border-right: 0px solid var(--uc-color-surface) !important
    }

    .product-deatil .name {
        margin-top: 0;
        margin-bottom: 0
    }

        .product-deatil .name small {
            display: block
        }

        .product-deatil .name a {
            margin-left: 0
        }

    .product-deatil .price-container {
        font-size: var(--uc-font-size-xxl);
        margin: 0;
        font-weight: 300
    }

        .product-deatil .price-container small {
            font-size: var(--uc-font-size-sm)
        }

    .product-deatil .fa-2x {
        font-size: var(--uc-font-size-lg) !important
    }

        .product-deatil .fa-2x > h5 {
            font-size: var(--uc-font-size-sm);
            margin: 0
        }

        .product-deatil .fa-2x + a,
        .product-deatil .fa-2x + a + a {
            font-size: calc(var(--uc-font-size-base) * 13 / 14)
        }

    .product-deatil .certified {
        margin-top: 10px
    }

        .product-deatil .certified ul {
            padding-left: 0
        }

            .product-deatil .certified ul li:not(first-child) {
                margin-left: -3px
            }

            .product-deatil .certified ul li {
                display: inline-block;
                background-color: rgba(var(--uc-color-text-rgb), 0.03);
                padding: 13px 19px
            }

                .product-deatil .certified ul li:first-child {
                    border-right: none
                }

                .product-deatil .certified ul li a {
                    text-align: left;
                    font-size: var(--uc-font-size-sm);
                    color: var(--uc-color-text-muted);
                    line-height: 16px;
                    text-decoration: none
                }

                    .product-deatil .certified ul li a span {
                        display: block;
                        color: var(--uc-color-accent);
                        font-size: calc(var(--uc-font-size-base) * 13 / 14);
                        font-weight: 700;
                        text-align: center
                    }

    .product-deatil .message-text {
        width: calc(100% - 70px)
    }

@media only screen and (min-width:1024px) {
    .product-content div[class*=col-md-4] {
        padding-right: 0
    }

    .product-content div[class*=col-md-8] {
        padding: 0 13px 0 22px
    }

    .product-wrap div[class*=col-md-5] {
        padding-right: 0
    }

    .product-wrap div[class*=col-md-7] {
        padding: 0 13px 0 0
    }

    .product-content .product-image {
        border-radius: var(--uc-radius) 0px 0px var(--uc-radius);
    }

    .product-content .product-info {
        position: relative
    }

    .product-content .product-image-cart {
        border-radius: var(--uc-radius) 0px 0px var(--uc-radius);
    }

        .product-content .product-image-cart img {
            height: auto;
            border-radius: var(--uc-radius)
        }
}

/* ── Flying cart ────────────────────────────────────────────── */

ul.dropdown-cart {
    min-width: 350px;
    padding: 2px;
    margin: 7px;
    margin-top: 11px;
}

    ul.dropdown-cart li .item {
        display: block;
        padding: 3px 10px;
        margin: 3px 0;
    }

        ul.dropdown-cart li .item:hover {
            background-color: rgba(var(--uc-color-text-rgb), 0.25);
        }

        ul.dropdown-cart li .item:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

    ul.dropdown-cart li .item-left {
        float: left;
    }

        ul.dropdown-cart li .item-left img,
        ul.dropdown-cart li .item-left span.item-info {
            float: left;
        }

        ul.dropdown-cart li .item-left span.item-info {
            margin-left: 10px;
        }

            ul.dropdown-cart li .item-left span.item-info span {
                display: block;
            }

    ul.dropdown-cart li .item-right {
        float: right;
    }

        ul.dropdown-cart li .item-right button {
            margin-top: 14px;
        }

.products {
    margin: -15px;
}

.cart-p-detail {
    color: var(--uc-color-text-muted);
    font-size: var(--uc-font-size-base);
    line-height: 20px;
}

    .cart-p-detail span {
        color: var(--uc-color-text-muted);
        display: block;
        font-size: calc(var(--uc-font-size-base) * 13 / 14);
    }

    .cart-p-detail strong {
        font-weight: 600;
        color: var(--uc-color-text);
        font-size: var(--uc-font-size-lg);
    }

    .cart-p-detail td {
        padding: 0;
        vertical-align: top;
        line-height: 1.3;
    }

    .cart-p-detail .btn-delete {
        padding: 0;
        border: 0;
        line-height: 1.3;
        vertical-align: top;
    }

.top-up {
    vertical-align: top;
    text-align: right;
}

.p-scroll {
    height: 140px;
    overflow: scroll;
    overflow-x: hidden;
}

.dropdown-menu .divider {
    height: 1px;
    margin: 10px !important;
    overflow: hidden;
    background-color: var(--uc-color-border);
}

.cart-btn {
    padding: 12px 13px !important;
    border-radius: var(--uc-radius);
    background: var(--uc-color-primary) !important;
    font-size: var(--uc-font-size-lg);
    text-transform: uppercase;
    line-height: 27px;
    border: 0px;
    width: 160px;
    float: right;
    text-align: center;
    color: var(--uc-color-on-primary) !important;
    margin-bottom: 10px;
    margin-right: 22px;
    margin-top: 15px;
}

    .cart-btn:hover,
    .cart-btn:focus {
        background: var(--uc-color-primary-hover) !important;
    }

    .cart-btn a {
        padding: 12px 13px !important;
        border-radius: var(--uc-radius);
        background: var(--uc-color-primary);
        font-size: var(--uc-font-size-lg);
        text-transform: uppercase;
        line-height: 27px;
        border: 0px;
        width: 160px;
        color: var(--uc-color-on-primary) !important;
    }

        .cart-btn a:hover {
            background: var(--uc-color-primary-hover);
        }

.c-total {
    color: var(--uc-color-text-muted);
    display: block;
    font-size: calc(var(--uc-font-size-base) * 13 / 14);
    margin-right: 24px;
}

    .c-total strong {
        font-weight: 600;
        color: var(--uc-color-text);
        font-size: var(--uc-font-size-lg);
    }

.red {
    color: var(--uc-color-danger);
}

/* Cart button in the header: a light tint of the header text color */
a.dropdown-toggle {
    background: rgba(var(--uc-color-header-text-rgb), 0.06);
    border-radius: var(--uc-radius);
}

    a.dropdown-toggle:hover {
        background: rgba(var(--uc-color-header-text-rgb), 0.25);
        border-radius: var(--uc-radius);
    }

.flying-cart div.dropdown-menu.dropdown-cart.nano.has-scrollbar.show {
    min-height: 380px;
}

.flying-cart .nano-pane {
    display: block !important;
}

.flying-cart .has-popup > a::before {
    z-index: 1 !important;
}

.flying-cart .dropdown-toggle::after {
    border: 0 !important;
    margin-left: 9px;
}

div.dropdown-cart {
    min-width: 350px;
    padding: 2px;
    margin: 7px;
    margin-top: 11px;
    background-color: var(--uc-color-surface);
}

    div.dropdown-cart div .item {
        display: block;
        padding: 3px 10px;
        margin: 3px 0;
    }

        div.dropdown-cart div .item:hover {
            background-color: rgba(var(--uc-color-text-rgb), 0.25);
        }

        div.dropdown-cart div .item:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
        }

    div.dropdown-cart div .item-left {
        float: left;
    }

        div.dropdown-cart div .item-left img,
        div.dropdown-cart div .item-left span.item-info {
            float: left;
        }

        div.dropdown-cart div .item-left span.item-info {
            margin-left: 10px;
        }

            div.dropdown-cart div .item-left span.item-info span {
                display: block;
            }

    div.dropdown-cart div .item-right {
        float: right;
    }

        div.dropdown-cart div .item-right button {
            margin-top: 14px;
        }

.total-pr {
    background: rgba(var(--uc-color-text-rgb), 0.02);
}

.navbar-inverse .navbar-nav > div > a {
    color: var(--uc-color-header-text);
    font-size: var(--uc-font-size-base);
    text-decoration: none;
}

    .navbar-inverse .navbar-nav > div > a:hover {
        text-decoration: none;
    }

.navbar-inverse .navbar-nav > div.has-popup > a::before {
    content: "\203A";
    position: absolute;
    font-size: 30px;
    top: 25%;
    right: 5px;
    z-index: -1;
    transform: rotate(90deg);
    color: var(--uc-color-accent);
}

.navbar-nav > div > a {
    padding: 10px;
    line-height: 20px;
}

/* ── Breadcrumbs ────────────────────────────────────────────── */

.breadcrumb-item a {
    color: var(--uc-color-text);
}

.breadcrumb-item.active {
    color: var(--uc-color-accent) !important;
}

.breadcrumb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    list-style: none;
    background-color: var(--uc-color-page-bg) !important;
    border-radius: var(--uc-radius);
}

/* ── Order confirmation ─────────────────────────────────────── */

.bg-white-order {
    background-color: var(--uc-color-surface);
    margin: -20px 0px 10px 0px;
    padding: 20px;
    border-radius: var(--uc-radius);
}

.col-md-3 .bg-white-order {
    padding: 20px 20px 0 20px;
}

.order-details-page {
    margin: 10px 0px 10px 0px;
    border-bottom: 2px dotted var(--uc-color-text);
    display: flex;
    width: 100%;
    flex-direction: row;
    font-size: var(--uc-font-size-base);
    padding: 15px 0px 20px 0px;
    line-height: 35px;
}

    .order-details-page span {
        text-align: center;
        font-size: var(--uc-font-size-base);
    }

.order-text-grey {
    color: var(--uc-color-text-muted);
    display: block;
    font-size: calc(var(--uc-font-size-base) * 13 / 14);
}

.text-shipping {
    font-size: var(--uc-font-size-base);
    border-bottom: solid 1px var(--uc-color-border);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

    .text-shipping span {
        text-transform: uppercase;
    }

.line-h {
    line-height: 40px;
}

.total-p {
    font-size: calc(var(--uc-font-size-base) * 17 / 14);
    text-align: left;
    font-weight: 600;
}

.no-bdr {
    border-bottom: solid 0px var(--uc-color-border) !important;
}

.top-bdr {
    border-top: solid 1px var(--uc-color-border);
    border-bottom: solid 0px var(--uc-color-border) !important;
    padding-top: 12px;
}

.no-bdr span {
    color: var(--uc-color-text-muted);
    text-transform: none;
}

.btn-top-m {
    margin-top: 3rem;
}

.text-shipping ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.text-shipping li {
    display: inline-block;
    line-height: 25px;
    word-wrap: anywhere;
    width: 49%;
}

.wi-50 {
    width: 115px !important;
    height: 25px !important;
    margin-bottom: 10px;
}

.walls-green-body .product-detail {
    padding: 0 20px 0 0;
}

.main-product-picture {
    border-radius: var(--uc-radius) 0 0 var(--uc-radius);
}

.product-attributes {
    list-style-type: none;
    padding-left: 0;
}

    .product-attributes li {
        margin: 20px 0;
    }

        .product-attributes li:first-child {
            margin-top: 0;
        }

@media screen and (max-width: 768px) {
    .product-attributes {
        padding-left: 10px;
        padding-right: 10px;
    }

    .main-product-picture {
        padding-left: 15px;
        padding-top: 10px;
        border-radius: 0;
    }

    .floating-in-cart {
        text-align: center;
        position: static !important;
    }
}

/* ── Payment and shipping options ───────────────────────────── */

.credit-notes {
    font-weight: 200;
    font-size: var(--uc-font-size-sm);
    margin-left: 5px;
    margin-right: 5px;
    line-height: 16px;
}

.payment-options .rd-credit label, .payment-options .rd-credit-card label, .payment-options .rd-payroll-deduction label {
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
}

.payment-disclaimer {
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-base);
    color: var(--uc-color-danger);
    text-decoration: none;
    padding: 10px;
    text-align: left;
}

.shipping-options .rd-location label, .shipping-options .rd-freeform .rd-cart-location .rd-employee-location label {
    font-weight: 600;
    margin-left: 5px;
    margin-right: 5px;
}

.payroll-warning {
    font-size: var(--uc-font-size-sm);
    display: block;
    clear: both;
    padding-left: 20px;
}

.walls-green-body .manage-order-complete .btn-custom:hover {
    color: var(--uc-color-on-primary);
}

.custom-label {
    line-height: 35px;
}

.team-member-order .navigation-hint i {
    top: 0;
}

.floating-in-cart {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--uc-color-warning);
    font-size: var(--uc-font-size-sm);
    font-weight: 600;
}

.walls-green-body a.cart-btn {
    text-decoration: none;
    font-size: var(--uc-font-size-lg);
}

.color-red {
    color: var(--uc-color-danger) !important;
}

.package-description {
    margin-left: 8px;
    margin-right: 8px;
    text-align: left;
}

.zoom-box {
    display: none;
    overflow: hidden;
}

.zoom-area-indicator {
    pointer-events: none;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    display: none;
}

.zoomed-image {
    position: relative;
}

h4.shipping-method-loader-message {
    color: var(--uc-color-success);
}

.preview-message {
    color: var(--uc-color-danger);
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-xl);
    font-weight: 100;
    letter-spacing: 0;
}

/* ── Voucher order sidebar ──────────────────────────────────── */
/*
   Voucher type links and the "Need help?" card in the left column
   of VoucherOrder.aspx. Icons are inline SVGs that use currentColor,
   so they follow the theme without depending on an icon library.
   Placed after the general link rules so these win where
   specificity ties.
*/

.voucher-nav {
    margin-top: 24px;
}

.walls-green-body .voucher-nav-title {
    margin: 0 0 8px;
    font-family: var(--uc-font-heading);
    font-size: var(--uc-font-size-lg);
    font-weight: 600;
    color: var(--uc-color-text);
}

.voucher-type-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.walls-green-body a.voucher-type-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--uc-radius);
    color: var(--uc-color-text);
    font-size: var(--uc-font-size-base);
    text-decoration: none;
    transition: background-color .15s ease;
}

    .walls-green-body a.voucher-type-link:hover,
    .walls-green-body a.voucher-type-link:focus {
        color: var(--uc-color-text);
        text-decoration: none;
        background-color: rgba(var(--uc-color-accent-rgb), 0.08);
    }

    /* The voucher type currently being shown */
    .walls-green-body a.voucher-type-link.is-active {
        font-weight: 600;
        background-color: rgba(var(--uc-color-accent-rgb), 0.12);
        box-shadow: inset 3px 0 0 var(--uc-color-accent);
    }

/* Icon and name, kept together on the left */
.voucher-type-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.voucher-type-link .voucher-type-icon {
    flex-shrink: 0;
    color: var(--uc-color-text-muted);
    transition: color .15s ease;
}

.voucher-type-link:hover .voucher-type-icon {
    color: var(--uc-color-text);
}

.voucher-type-link.is-active .voucher-type-icon {
    color: var(--uc-color-accent);
}

.voucher-type-link .voucher-type-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    fill: var(--uc-color-text-muted);
}

.voucher-type-link.is-active .voucher-type-chevron {
    fill: var(--uc-color-accent);
}

/* "Need help?" card */
.voucher-help {
    margin-top: 24px;
    padding: 16px;
    background-color: var(--uc-color-surface);
    border: 1px solid var(--uc-color-border);
    border-radius: calc(var(--uc-radius) * 2);
}

.voucher-help-intro {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* Round image beside "Need help?": an uploaded picture if one is
   set, otherwise the built-in shirt illustration. */
.voucher-help-image {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    overflow: hidden;
    border-radius: 50%;
    background-color: rgba(var(--uc-color-accent-rgb), 0.12);
    color: var(--uc-color-accent);
}

    .voucher-help-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .voucher-help-image svg {
        width: 28px;
        height: 28px;
    }

.walls-green-body .voucher-help-title {
    margin: 2px 0 2px;
    font-family: var(--uc-font-heading);
    font-size: var(--uc-font-size-base);
    font-weight: 600;
    color: var(--uc-color-text);
}

.voucher-help-text {
    margin: 0;
    font-size: var(--uc-font-size-sm);
    line-height: 1.45;
    color: var(--uc-color-text-muted);
}

.voucher-help-contacts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
    border-top: 1px solid var(--uc-color-border);
}

    .voucher-help-contacts li {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
    }

    .voucher-help-contacts svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        fill: var(--uc-color-accent);
    }

/* Long email addresses wrap instead of overflowing the narrow column */
.walls-green-body .voucher-help-contacts a {
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: var(--uc-font-size-sm);
    color: var(--uc-color-text);
    text-decoration: none;
}

    .walls-green-body .voucher-help-contacts a:hover,
    .walls-green-body .voucher-help-contacts a:focus {
        color: var(--uc-color-text);
        text-decoration: underline;
    }

/* ── Page banner ────────────────────────────────────────────── */
/*
   Written by Controls/ThemeBanner.ascx when Theme Settings > Page
   background is set to "Banner image".

   The band runs the full width of the window in the page color. The
   image sits within the same side margins as the page content and is
   scaled to fit (never cropped), lined up on the right. Images with a
   transparent or plain left side blend in best.

   Below the band, a heavily blurred copy of the image continues as a
   soft glow of its colors behind the top of the content, then fades
   out, so no shapes or lines appear behind it.
*/

.walls-green-body .uc-banner {
    position: relative;
    margin-top: -20px; /* cancels the menu's bottom margin */
    margin-bottom: 20px;
    background-color: var(--uc-color-page-bg);
}

.uc-banner-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--uc-banner-height);
    padding-top: 24px;
    padding-bottom: 24px;
}

    /* The image, inside the same side margins as the content. "contain"
       scales it to fit both the band's height and the content width, so
       the whole image is always visible; it lines up on the right. */
    .uc-banner-inner::before {
        content: "";
        display: block; /* overrides the older Bootstrap's .container clearfix (display: table), which collapses this to zero width */
        position: absolute;
        top: 0;
        bottom: 0;
        left: var(--uc-page-gutter);
        right: var(--uc-page-gutter);
        z-index: -1;
        pointer-events: none;
        background-image: linear-gradient(to right, rgba(var(--uc-color-page-bg-rgb), 0.75) 0, rgba(var(--uc-color-page-bg-rgb), 0) 45%), var(--uc-banner-image);
        background-size: auto, contain;
        background-position: left top, right center;
        background-repeat: no-repeat;
    }

    /* The soft color glow that continues below the band, also content width.
       z-index -1 keeps it beneath the title text. */
    .uc-banner-inner::after {
        content: "";
        display: block; /* same clearfix override as above */
        clear: none;
        position: absolute;
        top: 100%;
        left: var(--uc-page-gutter);
        right: var(--uc-page-gutter);
        height: 360px;
        z-index: -1;
        pointer-events: none;
        background-image: var(--uc-banner-image);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        filter: blur(50px);
        opacity: 0.55;
        -webkit-mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 0, transparent 100%);
    }

.walls-green-body .uc-banner-title {
    max-width: 640px;
    margin: 0 0 6px;
    font-family: var(--uc-font-heading);
    font-size: clamp(24px, calc(var(--uc-font-size-base) * 2.4), 42px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--uc-color-banner-text);
}

.walls-green-body .uc-banner-subtitle {
    max-width: 640px;
    margin: 0;
    font-size: calc(var(--uc-font-size-base) * 18 / 14);
    line-height: 1.4;
    color: rgba(var(--uc-color-banner-text-rgb), 0.85);
}

/* On narrow screens the graphic sits behind the text, so the wash is stronger. */
@media (max-width: 767.98px) {
    .uc-banner-inner {
        min-height: calc(var(--uc-banner-height) * 0.7);
    }

        .uc-banner-inner::before {
            background-image: linear-gradient(to right, rgba(var(--uc-color-page-bg-rgb), 0.85) 0, rgba(var(--uc-color-page-bg-rgb), 0.4) 70%, rgba(var(--uc-color-page-bg-rgb), 0) 100%), var(--uc-banner-image);
        }
}

/* "Match the image's shape": the image is shown as a picture at the full
   content width, at its own proportions, so it's never cropped and never
   leaves gaps. The banner's height follows the image. Any title and
   subtitle sit on top of it, centred vertically on the left. */
.uc-banner--image .uc-banner-inner {
    display: block;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}

    .uc-banner--image .uc-banner-inner::before {
        display: none; /* the picture replaces the background layer */
    }

.uc-banner-frame {
    position: relative;
}

.uc-banner-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: calc(var(--uc-radius) * 2);
}

.uc-banner-text {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 3%;
}

/* On phones the image gets too short to hold text, so the text moves below it. */
@media (max-width: 767.98px) {
    .uc-banner-text {
        position: static;
        padding: 12px 0 0;
    }
}

/* Content sits above the banner image. */
.uc-banner ~ .container {
    position: relative;
    z-index: 1;
}

/* Main white content block on the order pages: a raised card. */
.bg-white-top {
    border-radius: calc(var(--uc-radius) * 2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);
}

/* ── Order sidebar panel ────────────────────────────────────── */
/*
   Wrap the left column's contents on VoucherOrder.aspx in
   <div class="order-sidebar-panel">. A light tint of the accent color
   sets it apart from the products.
*/

.order-sidebar-panel {
    margin-bottom: 20px;
    padding: 16px;
    background-color: rgba(var(--uc-color-accent-rgb), 0.05);
    border: 1px solid rgba(var(--uc-color-accent-rgb), 0.15);
    border-radius: calc(var(--uc-radius) * 2);
}

    .order-sidebar-panel .form-group,
    .order-sidebar-panel .dep-select {
        margin-bottom: 12px;
    }

    .order-sidebar-panel .voucher-nav,
    .order-sidebar-panel .voucher-help {
        margin-top: 20px;
    }

/* Larger, softer search box and dropdowns inside the panel */
.walls-green-body .order-sidebar-panel .search-filter-control {
    height: 40px;
    font-size: var(--uc-font-size-base);
    color: var(--uc-color-text);
    background-color: var(--uc-color-surface);
    border: 1px solid var(--uc-color-border);
    border-radius: var(--uc-radius);
}

    .walls-green-body .order-sidebar-panel .search-filter-control:focus {
        outline: none;
        border-color: var(--uc-color-accent);
        box-shadow: 0 0 0 3px rgba(var(--uc-color-accent-rgb), 0.2);
    }

.order-sidebar-panel .has-search .form-control-feedback {
    height: 40px;
    line-height: 40px;
}

/* ── Product and allotment cards ────────────────────────────── */
/*
   Product cards in the style carousel and the size/quantity cards in
   each employee's allotment get a surface, border, and soft shadow.
   Only vertical margins are used, because the carousel calculates
   each item's width itself.
*/

#product-slider .owl-item .item {
    box-sizing: border-box;
    overflow: hidden; /* nothing can spill over the border */
    margin: 4px 0 14px;
    padding: 16px 14px 14px;
    background-color: var(--uc-color-surface);
    border: 1px solid var(--uc-color-border);
    border-radius: calc(var(--uc-radius) * 2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow .15s ease, transform .15s ease;
}

    #product-slider .owl-item .item:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.10);
        transform: translateY(-2px);
    }

    /* The product photo: centered in its own space inside the card's padding,
   scaled to fit without cropping or stretching. These outrank the
   carousel's own "width: 100%" and the older fixed 260px height. */
    #product-slider .owl-item .item img {
        display: block;
        width: 100% !important;
        max-width: 100%;
        height: 220px !important;
        margin: 0 auto 12px;
        object-fit: contain;
        border: 0;
        border-radius: var(--uc-radius);
    }

/* The panel holding all employees */
.employees-list .panel {
    border: 1px solid var(--uc-color-border) !important;
    border-radius: calc(var(--uc-radius) * 2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
}

/* Each size/quantity card */
.employees-list .owl-item .item {
    margin: 4px 0 10px;
    padding: 12px;
    background-color: var(--uc-color-surface);
    border: 1px solid var(--uc-color-border);
    border-radius: calc(var(--uc-radius) * 2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* ── Order page (Order.aspx) ────────────────────────────────── */

/* Back link and filter on the left, actions on the right, all vertically
   centred and the same 40px height so they line up */
.order-toolbar {
    align-items: center;
    row-gap: 12px;
    margin-bottom: 16px;
}

.order-toolbar-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 20px;
}

.order-toolbar-filter {
    flex: 0 1 320px;
    min-width: 200px;
}

/* Same height, text size, and border weight as the buttons beside it */
.walls-green-body .order-toolbar .dep-select .form-control {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: var(--uc-font-size-base) !important;
    border-color: var(--uc-color-border);
}

.order-toolbar .order-actions {
    margin-bottom: 0;
}

    .order-toolbar .order-actions .btn {
        height: 40px;
    }

.walls-green-body .order-toolbar a.breadcrumb-button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--uc-font-size-lg);
}

/* Product cards: photo on the left in its own space, details on the right */
.order-product-grid {
    margin-top: 4px;
}

.order-product-card {
    display: flex;
    gap: 16px;
    width: 100%;
    margin: 0 0 20px;
    padding: 16px;
    background-color: var(--uc-color-surface);
    border: 1px solid var(--uc-color-border);
    border-radius: calc(var(--uc-radius) * 2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow .15s ease, transform .15s ease;
}

    .order-product-card:hover {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 10px 24px rgba(0, 0, 0, 0.10);
        transform: translateY(-2px);
    }

.order-product-image {
    flex: 0 0 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--uc-radius);
    background-color: rgba(var(--uc-color-text-rgb), 0.03);
}

.order-product-img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: contain;
}

/* Details column; resets the older template's padding */
.order-product-card .product-deatil {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 4px 0 0;
}

    /* Leave room for the "In Cart" label in the top corner */
    .order-product-card .product-deatil .name {
        margin-bottom: 8px;
        padding-right: 64px;
    }

    .order-product-card .product-deatil .floating-in-cart {
        top: 4px;
        right: 0;
    }

.order-product-card .navigation-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
}

.order-product-card .price-container {
    margin: 4px 0 12px;
}

/* Buy button sits at the bottom of the card */
.order-product-card .product-info {
    margin-top: auto;
    padding: 0;
}

    .order-product-card .product-info.smart-form .btn {
        margin: 0;
    }

/* Small phones: photo above the details */
@media (max-width: 575.98px) {
    .order-product-card {
        flex-direction: column;
    }

    .order-product-image {
        flex-basis: auto;
    }
}

/* ── Header account links ───────────────────────────────────── */
/*
   The profile link (user icon + name) and the log-out icon button in
   the menu bar. Icons are inline SVGs using currentColor. The wrapper
   span is needed because Site.Master.cs sets display:block on
   divWelcome, which would override flex on the div itself.
*/

.uc-account {
    display: flex;
    align-items: center;
    gap: 4px;
}

.walls-green-body .hpu-menu a.uc-account-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    color: var(--uc-color-header-text);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

    .walls-green-body .hpu-menu a.uc-account-link:hover,
    .walls-green-body .hpu-menu a.uc-account-link:focus {
        color: var(--uc-color-header-text);
        text-decoration: none;
        background-color: rgba(var(--uc-color-header-text-rgb), 0.06);
    }

.uc-account-avatar,
.uc-cart-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(var(--uc-color-accent-rgb), 0.12);
    color: var(--uc-color-accent);
}

    .uc-account-avatar svg,
    .uc-cart-icon svg {
        fill: currentColor;
    }

/* Long names are shortened with an ellipsis rather than pushing the cart off the bar */
.uc-account-name {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.walls-green-body .hpu-menu a.uc-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--uc-radius);
    color: rgba(var(--uc-color-header-text-rgb), 0.75);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

    .walls-green-body .hpu-menu a.uc-icon-button:hover,
    .walls-green-body .hpu-menu a.uc-icon-button:focus {
        color: var(--uc-color-header-text);
        text-decoration: none;
        background-color: rgba(var(--uc-color-header-text-rgb), 0.06);
    }

.uc-icon-button svg {
    fill: currentColor;
}

/* Cart button: same round icon as the profile link, on a light tint */
.walls-green-body .hpu-menu a.uc-cart-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    background-color: rgba(var(--uc-color-header-text-rgb), 0.06);
    color: var(--uc-color-header-text);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

    .walls-green-body .hpu-menu a.uc-cart-toggle:hover,
    .walls-green-body .hpu-menu a.uc-cart-toggle:focus,
    .walls-green-body .hpu-menu a.uc-cart-toggle[aria-expanded="true"] {
        color: var(--uc-color-header-text);
        text-decoration: none;
        background-color: rgba(var(--uc-color-header-text-rgb), 0.12);
    }

/* Replaces the old orange arrow drawn by the general menu rules */
.walls-green-body .hpu-menu .flying-cart a.uc-cart-toggle::before {
    display: none;
}

.uc-cart-chevron {
    flex-shrink: 0;
    fill: var(--uc-color-accent);
    transition: transform .15s ease;
}

a.uc-cart-toggle[aria-expanded="true"] .uc-cart-chevron {
    transform: rotate(180deg);
}

.walls-green-body .hpu-menu a.uc-account-link:focus-visible,
.walls-green-body .hpu-menu a.uc-icon-button:focus-visible,
.walls-green-body .hpu-menu a.uc-cart-toggle:focus-visible {
    outline: 2px solid var(--uc-color-accent);
    outline-offset: 2px;
}

/* ============================================================
   ADMIN CONTROLS
   Shared across all admin pages. Controls use .admin-btn and
   .admin-input so they are isolated from the site's .btn-custom
   and .form-control rules (which set different heights for the
   customer-facing UI).

   Intentionally NOT themed: admin pages keep fixed colors so a
   theme change can never make them hard to use.
   ============================================================ */

/* ── Toolbar layout ─────────────────────────────────────────── */
.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 8px 0 12px;
}

.toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Replaces the old .divider class (which conflicts with Bootstrap's
   .dropdown-menu .divider rule defined earlier in this file).    */
.toolbar-divider {
    width: 1px;
    height: 24px;
    background: #ccc;
    flex-shrink: 0;
}

.toolbar-result {
    font-size: 12px;
    color: #555;
    font-weight: bold;
    margin-left: 6px;
}

/* ── Shared admin button ────────────────────────────────────── */
/*
   .admin-btn is the single token for every button on an admin
   page — toolbar and grid. Gives a visible border/background on
   all states so buttons never look like plain text.
*/
.admin-btn {
    display: inline-block;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    line-height: 28px; /* 30px height − 2px border */
    white-space: nowrap;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #aaa;
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
    vertical-align: middle;
    /* Override the site's global input rule that strips backgrounds */
    max-width: none;
}

    .admin-btn:hover,
    .admin-btn:focus {
        background-color: #e0e0e0;
        border-color: #888;
        color: #111;
        text-decoration: none;
        outline: none;
    }

    .admin-btn:active {
        background-color: #d0d0d0;
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
    }

/* Modifier — primary action (Add, Search) */
.admin-btn-primary {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #fff;
}

    .admin-btn-primary:hover,
    .admin-btn-primary:focus {
        background-color: #286090;
        border-color: #204d74;
        color: #fff;
    }

/* Modifier — success action (Update/Save) */
.admin-btn-success {
    background-color: #5cb85c;
    border-color: #4cae4c;
    color: #fff;
}

    .admin-btn-success:hover,
    .admin-btn-success:focus {
        background-color: #449d44;
        border-color: #398439;
        color: #fff;
    }

/* Modifier — danger action (Delete) */
.admin-btn-danger {
    background-color: #d9534f;
    border-color: #d43f3a;
    color: #fff;
}

    .admin-btn-danger:hover,
    .admin-btn-danger:focus {
        background-color: #c9302c;
        border-color: #ac2925;
        color: #fff;
    }

/* ── Shared admin input (textbox + dropdown) ────────────────── */
/*
   .admin-input overrides the site's .walls-green-body .form-control
   (height:40px, font-size:14px) for admin pages only, and also
   overrides the global "input, select { max-width: 280px }" rule.
*/
.admin-input {
    height: 30px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    font-family: Poppins, sans-serif;
    line-height: 1.4 !important;
    border: 1px solid #aaa;
    border-radius: 3px;
    background-color: #fff;
    color: #333;
    vertical-align: middle;
    max-width: none !important; /* undo global 280px cap */
    box-shadow: none !important; /* undo .walls-green-body .form-control shadow */
    /* Do NOT set width here — let the column/cell control width */
}

    .admin-input:focus {
        border-color: #66afe9;
        outline: none;
        box-shadow: inset 0 1px 1px rgba(0,0,0,0.075), 0 0 6px rgba(102,175,233,0.6) !important;
    }

/* ── Admin grid ─────────────────────────────────────────────── */
.admin-grid td,
.admin-grid th {
    vertical-align: middle !important;
    font-size: 13px;
}

/* Give inputs inside the grid a reasonable width without going full-cell */
.admin-grid .admin-input {
    width: 100%;
    max-width: 250px !important;
}

/* Hint text below dropdowns */
.admin-hint {
    display: block;
    font-size: 10px;
    color: #888;
    line-height: 1.3;
    margin-top: 2px;
}

/* File input — can't be fully styled but nudge it inline */
.admin-toolbar input[type="file"],
.admin-grid input[type="file"] {
    font-size: 12px;
    vertical-align: middle;
    max-width: none;
}

.tox.tox-tinymce-aux,
.tox-tinymce-aux,
.tox .tox-menu,
.tox .tox-collection,
.tox .tox-color-input,
.tox .tox-swatches,
.tox-pop,
.tox-pop__dialog {
    z-index: 99999 !important;
}
/* Header bar: colors, font, and logo height come from the theme. */
.hpu-menu {
    color: var(--uc-color-header-text);
    background-color: var(--uc-color-header-bg);
    font-family: var(--uc-font-body);
    font-size: var(--uc-font-size-base);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: left;
}

    /* The logo link sizes itself to the logo, so any logo height set in
   Theme Settings fits inside the header. This overrides the older
   Bootstrap's fixed 50px .navbar-brand height, which is what let
   taller logos spill out. */
    .hpu-menu .navbar-brand {
        display: flex;
        align-items: center;
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
        line-height: 1;
    }

        /* Scoped to the logo only; a plain ".hpu-menu img" also resized
       the product photos in the cart dropdown. */
        .hpu-menu .navbar-brand img {
            display: block;
            height: var(--uc-logo-height);
            width: auto;
            max-width: 240px;
            object-fit: contain;
            object-position: left center;
        }

.hpu-grid-expand {
    width: 30px;
    height: 30px;
}

/* Section headings on the order pages. */
.hpu-groupname {
    color: var(--uc-color-section-text);
    background-color: var(--uc-color-section-bg);
    font-family: var(--uc-font-heading);
    font-size: calc(var(--uc-font-size-base) * 18 / 14);
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0em;
    text-align: center;
}